[{"data":1,"prerenderedAt":977},["ShallowReactive",2],{"navigation":3,"/distribution/formats":238,"/distribution/formats-surround":972},[4,22,55,88,105,138,159,180,217],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","01.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Introduction","/getting-started/introduction","01.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"Installation","/getting-started/installation","01.getting-started/2.installation",{"title":19,"path":20,"stem":21},"Quick Start","/getting-started/quick-start","01.getting-started/3.quick-start",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Configuration","/configuration","02.configuration",[27,31,35,39,43,47,51],{"title":28,"path":29,"stem":30},"Overview","/configuration/overview","02.configuration/1.overview",{"title":32,"path":33,"stem":34},"Size","/configuration/size","02.configuration/2.size",{"title":36,"path":37,"stem":38},"Shape","/configuration/shape","02.configuration/3.shape",{"title":40,"path":41,"stem":42},"Positioning","/configuration/positioning","02.configuration/4.positioning",{"title":44,"path":45,"stem":46},"Placement","/configuration/placement","02.configuration/5.placement",{"title":48,"path":49,"stem":50},"Video","/configuration/video","02.configuration/6.video",{"title":52,"path":53,"stem":54},"Styles","/configuration/styles","02.configuration/7.styles",{"title":56,"path":57,"stem":58,"children":59,"page":6},"Components","/components","03.components",[60,64,68,72,76,80,84],{"title":61,"path":62,"stem":63},"Container","/components/container","03.components/1.container",{"title":65,"path":66,"stem":67},"Close Button","/components/close-button","03.components/2.close-button",{"title":69,"path":70,"stem":71},"CTA Button","/components/cta-button","03.components/3.cta-button",{"title":73,"path":74,"stem":75},"Video Controls","/components/video-controls","03.components/4.video-controls",{"title":77,"path":78,"stem":79},"Video Loader","/components/video-loader","03.components/5.video-loader",{"title":81,"path":82,"stem":83},"Video Progress","/components/video-progress","03.components/6.video-progress",{"title":85,"path":86,"stem":87},"Video Volume","/components/video-volume","03.components/7.video-volume",{"title":89,"path":90,"stem":91,"children":92,"page":6},"Features","/features","04.features",[93,97,101],{"title":94,"path":95,"stem":96},"Preview","/features/preview","04.features/1.preview",{"title":98,"path":99,"stem":100},"Visibility","/features/visibility","04.features/2.visibility",{"title":102,"path":103,"stem":104},"Responsive","/features/responsive","04.features/3.responsive",{"title":106,"path":107,"stem":108,"children":109,"page":6},"API Reference","/api-reference","05.api-reference",[110,114,118,122,126,130,134],{"title":111,"path":112,"stem":113},"useScena","/api-reference/use-scena","05.api-reference/1.use-scena",{"title":115,"path":116,"stem":117},"useConfig","/api-reference/use-config","05.api-reference/2.use-config",{"title":119,"path":120,"stem":121},"Scena Instance","/api-reference/scena-instance","05.api-reference/3.scena-instance",{"title":123,"path":124,"stem":125},"Video Controller","/api-reference/video-controller","05.api-reference/4.video-controller",{"title":127,"path":128,"stem":129},"Video State","/api-reference/video-state","05.api-reference/5.video-state",{"title":131,"path":132,"stem":133},"Visibility API","/api-reference/visibility-api","05.api-reference/6.visibility-api",{"title":135,"path":136,"stem":137},"Preview API","/api-reference/preview-api","05.api-reference/7.preview-api",{"title":139,"path":140,"stem":141,"children":142,"page":6},"Events","/events","06.events",[143,147,151,155],{"title":144,"path":145,"stem":146},"Widget Events","/events/widget-events","06.events/1.widget-events",{"title":148,"path":149,"stem":150},"Video Events","/events/video-events","06.events/2.video-events",{"title":152,"path":153,"stem":154},"Feature Events","/events/feature-events","06.events/3.feature-events",{"title":156,"path":157,"stem":158},"Click Events","/events/click-events","06.events/4.click-events",{"title":160,"path":161,"stem":162,"children":163,"page":6},"Custom Element","/custom-element","07.custom-element",[164,168,172,176],{"title":165,"path":166,"stem":167},"Setup","/custom-element/setup","07.custom-element/1.setup",{"title":169,"path":170,"stem":171},"Usage","/custom-element/usage","07.custom-element/2.usage",{"title":173,"path":174,"stem":175},"DOM Events","/custom-element/events","07.custom-element/3.events",{"title":177,"path":178,"stem":179},"Integration","/custom-element/integration","07.custom-element/4.integration",{"title":181,"path":182,"stem":183,"children":184,"page":6},"Examples","/examples","08.examples",[185,189,193,197,201,205,209,213],{"title":186,"path":187,"stem":188},"Basic Setup","/examples/basic-setup","08.examples/1.basic-setup",{"title":190,"path":191,"stem":192},"Custom Styling","/examples/custom-styling","08.examples/2.custom-styling",{"title":194,"path":195,"stem":196},"Responsive Widget","/examples/responsive-widget","08.examples/3.responsive-widget",{"title":198,"path":199,"stem":200},"Custom Controls","/examples/custom-controls","08.examples/4.custom-controls",{"title":202,"path":203,"stem":204},"Viewport Mount","/examples/viewport-mount","08.examples/5.viewport-mount",{"title":206,"path":207,"stem":208},"Timed Overlay","/examples/timed-overlay","08.examples/6.timed-overlay",{"title":210,"path":211,"stem":212},"Loop Segment","/examples/loop-segment","08.examples/7.loop-segment",{"title":214,"path":215,"stem":216},"Heatmap Data","/examples/heatmap-data","08.examples/8.heatmap-data",{"title":218,"path":219,"stem":220,"children":221,"page":6},"Distribution","/distribution","09.distribution",[222,226,230,234],{"title":223,"path":224,"stem":225},"Formats","/distribution/formats","09.distribution/1.formats",{"title":227,"path":228,"stem":229},"Browser Support","/distribution/browser-support","09.distribution/2.browser-support",{"title":231,"path":232,"stem":233},"Bundle Size","/distribution/bundle-size","09.distribution/3.bundle-size",{"title":235,"path":236,"stem":237},"TypeScript","/distribution/typescript","09.distribution/4.typescript",{"id":239,"title":223,"body":240,"description":966,"extension":967,"links":968,"meta":969,"navigation":369,"path":224,"seo":970,"stem":225,"__hash__":971},"docs/09.distribution/1.formats.md",{"type":241,"value":242,"toc":959},"minimark",[243,247,252,264,304,319,411,415,426,458,627,638,642,647,677,733,736,739,826,836,840,843,875,917,955],[244,245,246],"p",{},"Scena is distributed in three module formats. Each format has a development build (readable, with comments) and a minified production build. All variants export the same API surface — the difference is how the module is loaded by the consumer.",[248,249,251],"h2",{"id":250},"es-module","ES Module",[244,253,254,255,259,260,263],{},"The recommended format for projects using a bundler (Vite, Webpack 5+, Rollup, esbuild). ES Modules support static analysis, tree-shaking, and modern ",[256,257,258],"code",{},"import","/",[256,261,262],{},"export"," syntax.",[265,266,267,280],"table",{},[268,269,270],"thead",{},[271,272,273,277],"tr",{},[274,275,276],"th",{},"File",[274,278,279],{},"Description",[281,282,283,294],"tbody",{},[271,284,285,291],{},[286,287,288],"td",{},[256,289,290],{},"scena.es.js",[286,292,293],{},"Development build — unminified, suitable for debugging",[271,295,296,301],{},[286,297,298],{},[256,299,300],{},"scena.min.es.js",[286,302,303],{},"Production build — minified and optimized",[244,305,306,307,310,311,314,315,318],{},"The ",[256,308,309],{},"main"," and ",[256,312,313],{},"module"," fields in ",[256,316,317],{},"package.json"," point to this build, so bundlers resolve it automatically.",[320,321,327],"pre",{"className":322,"code":323,"filename":324,"language":325,"meta":326,"style":326},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useScena } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n","main.ts","ts","",[256,328,329,364,371,385,390],{"__ignoreMap":326},[330,331,334,337,341,345,348,351,354,358,361],"span",{"class":332,"line":333},"line",1,[330,335,258],{"class":336},"s7zQu",[330,338,340],{"class":339},"sMK4o"," {",[330,342,344],{"class":343},"sTEyZ"," useScena",[330,346,347],{"class":339}," }",[330,349,350],{"class":336}," from",[330,352,353],{"class":339}," '",[330,355,357],{"class":356},"sfazB","@retoo/scena",[330,359,360],{"class":339},"'",[330,362,363],{"class":339},";\n",[330,365,367],{"class":332,"line":366},2,[330,368,370],{"emptyLinePlaceholder":369},true,"\n",[330,372,374,376,378,381,383],{"class":332,"line":373},3,[330,375,258],{"class":336},[330,377,353],{"class":339},[330,379,380],{"class":356},"@retoo/scena/styles",[330,382,360],{"class":339},[330,384,363],{"class":339},[330,386,388],{"class":332,"line":387},4,[330,389,370],{"emptyLinePlaceholder":369},[330,391,393,397,400,403,406,409],{"class":332,"line":392},5,[330,394,396],{"class":395},"spNyl","const",[330,398,399],{"class":343}," scena ",[330,401,402],{"class":339},"=",[330,404,344],{"class":405},"s2Zo4",[330,407,408],{"class":343},"()",[330,410,363],{"class":339},[248,412,414],{"id":413},"umd","UMD",[244,416,417,418,421,422,425],{},"Universal Module Definition — works via ",[256,419,420],{},"\u003Cscript>"," tags in the browser, AMD loaders, and CommonJS ",[256,423,424],{},"require()",". Use this for environments without a bundler: static HTML pages, WordPress, Webflow, Squarespace, or any CMS that allows custom scripts.",[265,427,428,436],{},[268,429,430],{},[271,431,432,434],{},[274,433,276],{},[274,435,279],{},[281,437,438,448],{},[271,439,440,445],{},[286,441,442],{},[256,443,444],{},"scena.umd.js",[286,446,447],{},"Development build",[271,449,450,455],{},[286,451,452],{},[256,453,454],{},"scena.min.umd.js",[286,456,457],{},"Production build",[320,459,464],{"className":460,"code":461,"filename":462,"language":463,"meta":326,"style":326},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Clink rel=\"stylesheet\" href=\"https://unpkg.com/@retoo/scena/dist/scena.css\" />\n\u003Cscript src=\"https://unpkg.com/@retoo/scena/dist/scena.min.umd.js\">\u003C/script>\n\u003Cscript>\n  const scena = window.scenaWidget();\n\n  scena.mount({\n    video: { src: '/video.mp4' }\n  });\n\u003C/script>\n","index.html","html",[256,465,466,503,530,538,560,564,581,606,617],{"__ignoreMap":326},[330,467,468,471,475,478,480,483,486,488,491,493,495,498,500],{"class":332,"line":333},[330,469,470],{"class":339},"\u003C",[330,472,474],{"class":473},"swJcz","link",[330,476,477],{"class":395}," rel",[330,479,402],{"class":339},[330,481,482],{"class":339},"\"",[330,484,485],{"class":356},"stylesheet",[330,487,482],{"class":339},[330,489,490],{"class":395}," href",[330,492,402],{"class":339},[330,494,482],{"class":339},[330,496,497],{"class":356},"https://unpkg.com/@retoo/scena/dist/scena.css",[330,499,482],{"class":339},[330,501,502],{"class":339}," />\n",[330,504,505,507,510,513,515,517,520,522,525,527],{"class":332,"line":366},[330,506,470],{"class":339},[330,508,509],{"class":473},"script",[330,511,512],{"class":395}," src",[330,514,402],{"class":339},[330,516,482],{"class":339},[330,518,519],{"class":356},"https://unpkg.com/@retoo/scena/dist/scena.min.umd.js",[330,521,482],{"class":339},[330,523,524],{"class":339},">\u003C/",[330,526,509],{"class":473},[330,528,529],{"class":339},">\n",[330,531,532,534,536],{"class":332,"line":373},[330,533,470],{"class":339},[330,535,509],{"class":473},[330,537,529],{"class":339},[330,539,540,543,545,547,550,553,556,558],{"class":332,"line":387},[330,541,542],{"class":395},"  const",[330,544,399],{"class":343},[330,546,402],{"class":339},[330,548,549],{"class":343}," window",[330,551,552],{"class":339},".",[330,554,555],{"class":405},"scenaWidget",[330,557,408],{"class":343},[330,559,363],{"class":339},[330,561,562],{"class":332,"line":392},[330,563,370],{"emptyLinePlaceholder":369},[330,565,567,570,572,575,578],{"class":332,"line":566},6,[330,568,569],{"class":343},"  scena",[330,571,552],{"class":339},[330,573,574],{"class":405},"mount",[330,576,577],{"class":343},"(",[330,579,580],{"class":339},"{\n",[330,582,584,587,590,592,594,596,598,601,603],{"class":332,"line":583},7,[330,585,586],{"class":473},"    video",[330,588,589],{"class":339},":",[330,591,340],{"class":339},[330,593,512],{"class":473},[330,595,589],{"class":339},[330,597,353],{"class":339},[330,599,600],{"class":356},"/video.mp4",[330,602,360],{"class":339},[330,604,605],{"class":339}," }\n",[330,607,609,612,615],{"class":332,"line":608},8,[330,610,611],{"class":339},"  }",[330,613,614],{"class":343},")",[330,616,363],{"class":339},[330,618,620,623,625],{"class":332,"line":619},9,[330,621,622],{"class":339},"\u003C/",[330,624,509],{"class":473},[330,626,529],{"class":339},[628,629,632],"callout",{"icon":630,"color":631},"i-lucide-alert-triangle","warning",[244,633,634,635],{},"In UMD mode, the factory function is exposed as ",[256,636,637],{},"window.scenaWidget()",[248,639,641],{"id":640},"commonjs","CommonJS",[244,643,644,645,552],{},"For Node.js environments, SSR frameworks, or legacy build systems that use ",[256,646,424],{},[265,648,649,657],{},[268,650,651],{},[271,652,653,655],{},[274,654,276],{},[274,656,279],{},[281,658,659,668],{},[271,660,661,666],{},[286,662,663],{},[256,664,665],{},"scena.cjs.js",[286,667,447],{},[271,669,670,675],{},[286,671,672],{},[256,673,674],{},"scena.min.cjs.js",[286,676,457],{},[320,678,683],{"className":679,"code":680,"filename":681,"language":682,"meta":326,"style":326},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const { useScena } = require('@retoo/scena');\n\nconst scena = useScena();\n","server.js","js",[256,684,685,715,719],{"__ignoreMap":326},[330,686,687,689,691,694,697,700,703,705,707,709,711,713],{"class":332,"line":333},[330,688,396],{"class":395},[330,690,340],{"class":339},[330,692,693],{"class":343}," useScena ",[330,695,696],{"class":339},"}",[330,698,699],{"class":339}," =",[330,701,702],{"class":405}," require",[330,704,577],{"class":343},[330,706,360],{"class":339},[330,708,357],{"class":356},[330,710,360],{"class":339},[330,712,614],{"class":343},[330,714,363],{"class":339},[330,716,717],{"class":332,"line":366},[330,718,370],{"emptyLinePlaceholder":369},[330,720,721,723,725,727,729,731],{"class":332,"line":373},[330,722,396],{"class":395},[330,724,399],{"class":343},[330,726,402],{"class":339},[330,728,344],{"class":405},[330,730,408],{"class":343},[330,732,363],{"class":339},[248,734,160],{"id":735},"custom-element",[244,737,738],{},"Register Scena as a native Web Component to use it in any framework — or vanilla HTML:",[740,741,742,747,803,807],"steps",{},[743,744,746],"h3",{"id":745},"register-the-element","Register the element",[320,748,751],{"className":322,"code":749,"filename":750,"language":325,"meta":326,"style":326},"import { defineScenaElement } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\ndefineScenaElement();\n","setup.ts",[256,752,753,774,778,790,794],{"__ignoreMap":326},[330,754,755,757,759,762,764,766,768,770,772],{"class":332,"line":333},[330,756,258],{"class":336},[330,758,340],{"class":339},[330,760,761],{"class":343}," defineScenaElement",[330,763,347],{"class":339},[330,765,350],{"class":336},[330,767,353],{"class":339},[330,769,357],{"class":356},[330,771,360],{"class":339},[330,773,363],{"class":339},[330,775,776],{"class":332,"line":366},[330,777,370],{"emptyLinePlaceholder":369},[330,779,780,782,784,786,788],{"class":332,"line":373},[330,781,258],{"class":336},[330,783,353],{"class":339},[330,785,380],{"class":356},[330,787,360],{"class":339},[330,789,363],{"class":339},[330,791,792],{"class":332,"line":387},[330,793,370],{"emptyLinePlaceholder":369},[330,795,796,799,801],{"class":332,"line":392},[330,797,798],{"class":405},"defineScenaElement",[330,800,408],{"class":343},[330,802,363],{"class":339},[743,804,806],{"id":805},"use-in-html","Use in HTML",[320,808,811],{"className":460,"code":809,"filename":810,"language":463,"meta":326,"style":326},"\u003Cscena-video-widget>\u003C/scena-video-widget>\n","page.html",[256,812,813],{"__ignoreMap":326},[330,814,815,817,820,822,824],{"class":332,"line":333},[330,816,470],{"class":339},[330,818,819],{"class":473},"scena-video-widget",[330,821,524],{"class":339},[330,823,819],{"class":473},[330,825,529],{"class":339},[628,827,829],{"icon":828,"to":166},"i-lucide-arrow-right",[244,830,831,832,835],{},"For detailed Custom Element docs — framework integration, attributes, and lifecycle — see the ",[833,834,160],"strong",{}," section.",[248,837,839],{"id":838},"stylesheets","Stylesheets",[244,841,842],{},"CSS must be imported separately regardless of the JS format. Without styles, the widget mounts into the DOM but renders without any visual appearance.",[265,844,845,854],{},[268,846,847],{},[271,848,849,852],{},[274,850,851],{},"Import path",[274,853,279],{},[281,855,856,865],{},[271,857,858,862],{},[286,859,860],{},[256,861,380],{},[286,863,864],{},"Development build — unminified, with source maps",[271,866,867,872],{},[286,868,869],{},[256,870,871],{},"@retoo/scena/styles/min",[286,873,874],{},"Production build — minified",[320,876,878],{"className":322,"code":877,"language":325,"meta":326,"style":326},"// ES Module / bundler\nimport '@retoo/scena/styles';        // dev\nimport '@retoo/scena/styles/min';    // prod\n",[256,879,880,886,902],{"__ignoreMap":326},[330,881,882],{"class":332,"line":333},[330,883,885],{"class":884},"sHwdD","// ES Module / bundler\n",[330,887,888,890,892,894,896,899],{"class":332,"line":366},[330,889,258],{"class":336},[330,891,353],{"class":339},[330,893,380],{"class":356},[330,895,360],{"class":339},[330,897,898],{"class":339},";",[330,900,901],{"class":884},"        // dev\n",[330,903,904,906,908,910,912,914],{"class":332,"line":373},[330,905,258],{"class":336},[330,907,353],{"class":339},[330,909,871],{"class":356},[330,911,360],{"class":339},[330,913,898],{"class":339},[330,915,916],{"class":884},"    // prod\n",[320,918,920],{"className":460,"code":919,"language":463,"meta":326,"style":326},"\u003C!-- UMD / script tag -->\n\u003Clink rel=\"stylesheet\" href=\"https://unpkg.com/@retoo/scena/dist/scena.css\" />\n",[256,921,922,927],{"__ignoreMap":326},[330,923,924],{"class":332,"line":333},[330,925,926],{"class":884},"\u003C!-- UMD / script tag -->\n",[330,928,929,931,933,935,937,939,941,943,945,947,949,951,953],{"class":332,"line":366},[330,930,470],{"class":339},[330,932,474],{"class":473},[330,934,477],{"class":395},[330,936,402],{"class":339},[330,938,482],{"class":339},[330,940,485],{"class":356},[330,942,482],{"class":339},[330,944,490],{"class":395},[330,946,402],{"class":339},[330,948,482],{"class":339},[330,950,497],{"class":356},[330,952,482],{"class":339},[330,954,502],{"class":339},[956,957,958],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":326,"searchDepth":333,"depth":366,"links":960},[961,962,963,964,965],{"id":250,"depth":366,"text":251},{"id":413,"depth":366,"text":414},{"id":640,"depth":366,"text":641},{"id":735,"depth":366,"text":160},{"id":838,"depth":366,"text":839},"Available build formats — ES Module, UMD, CommonJS, and their minified variants.","md",null,{},{"title":223,"description":966},"8ElKWifi1Ha4YVIZQeWVGtQriwPBlMC71Eh8_sLOx0Y",[973,975],{"title":214,"path":215,"stem":216,"description":974,"children":-1},"Collect seek positions and visualize which parts of the video users rewatch most.",{"title":227,"path":228,"stem":229,"description":976,"children":-1},"Supported browsers, required polyfills, and compatibility notes.",1777984319293]