[{"data":1,"prerenderedAt":859},["ShallowReactive",2],{"navigation":3,"/api-reference/use-scena":238,"/api-reference/use-scena-surround":854},[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":111,"body":240,"description":848,"extension":849,"links":850,"meta":851,"navigation":298,"path":112,"seo":852,"stem":113,"__hash__":853},"docs/05.api-reference/1.use-scena.md",{"type":241,"value":242,"toc":842},"minimark",[243,247,321,326,333,415,417,428,532,547,645,656,658,661,682,685,689,696,838],[244,245,246],"p",{},"The factory function that creates a widget manager. Call it once to get a reusable object with mount and unmount methods — each mount creates an independent instance.",[248,249,254],"pre",{"className":250,"code":251,"language":252,"meta":253,"style":253},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useScena } from '@retoo/scena';\n\nconst scena = useScena();\n","ts","",[255,256,257,293,300],"code",{"__ignoreMap":253},[258,259,262,266,270,274,277,280,283,287,290],"span",{"class":260,"line":261},"line",1,[258,263,265],{"class":264},"s7zQu","import",[258,267,269],{"class":268},"sMK4o"," {",[258,271,273],{"class":272},"sTEyZ"," useScena",[258,275,276],{"class":268}," }",[258,278,279],{"class":264}," from",[258,281,282],{"class":268}," '",[258,284,286],{"class":285},"sfazB","@retoo/scena",[258,288,289],{"class":268},"'",[258,291,292],{"class":268},";\n",[258,294,296],{"class":260,"line":295},2,[258,297,299],{"emptyLinePlaceholder":298},true,"\n",[258,301,303,307,310,313,316,319],{"class":260,"line":302},3,[258,304,306],{"class":305},"spNyl","const",[258,308,309],{"class":272}," scena ",[258,311,312],{"class":268},"=",[258,314,273],{"class":315},"s2Zo4",[258,317,318],{"class":272},"()",[258,320,292],{"class":268},[322,323,325],"h2",{"id":324},"returns","Returns",[244,327,328,329,332],{},"Returns a ",[255,330,331],{},"UseScenaReturns"," object with the following properties:",[334,335,336,352],"table",{},[337,338,339],"thead",{},[340,341,342,346,349],"tr",{},[343,344,345],"th",{},"Property",[343,347,348],{},"Type",[343,350,351],{},"Description",[353,354,355,371,385,400],"tbody",{},[340,356,357,363,368],{},[358,359,360],"td",{},[255,361,362],{},"NAME",[358,364,365],{},[255,366,367],{},"string",[358,369,370],{},"Library name",[340,372,373,378,382],{},[358,374,375],{},[255,376,377],{},"VERSION",[358,379,380],{},[255,381,367],{},[358,383,384],{},"Library version",[340,386,387,392,397],{},[358,388,389],{},[255,390,391],{},"mount",[358,393,394],{},[255,395,396],{},"(config: ScenaConfig, target?: ScenaTarget) => Promise\u003CScenaInstance>",[358,398,399],{},"Mount a widget into the DOM",[340,401,402,407,412],{},[358,403,404],{},[255,405,406],{},"unmount",[358,408,409],{},[255,410,411],{},"(instance: ScenaInstance) => Promise\u003Cvoid>",[358,413,414],{},"Destroy a mounted widget",[322,416,391],{"id":391},[244,418,419,420,423,424,427],{},"Mounts the widget into a target element and returns a promise that resolves with a ",[255,421,422],{},"ScenaInstance"," once the Svelte component is rendered and the event bus is ready. The only required config field is ",[255,425,426],{},"video.src"," — everything else uses sensible defaults.",[248,429,431],{"className":250,"code":430,"language":252,"meta":253,"style":253},"const instance = await scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.MD,\n  shape: ComponentShape.CIRCLE,\n});\n",[255,432,433,459,485,503,521],{"__ignoreMap":253},[258,434,435,437,440,442,445,448,451,453,456],{"class":260,"line":261},[258,436,306],{"class":305},[258,438,439],{"class":272}," instance ",[258,441,312],{"class":268},[258,443,444],{"class":264}," await",[258,446,447],{"class":272}," scena",[258,449,450],{"class":268},".",[258,452,391],{"class":315},[258,454,455],{"class":272},"(",[258,457,458],{"class":268},"{\n",[258,460,461,465,468,470,473,475,477,480,482],{"class":260,"line":295},[258,462,464],{"class":463},"swJcz","  video",[258,466,467],{"class":268},":",[258,469,269],{"class":268},[258,471,472],{"class":463}," src",[258,474,467],{"class":268},[258,476,282],{"class":268},[258,478,479],{"class":285},"/video.mp4",[258,481,289],{"class":268},[258,483,484],{"class":268}," },\n",[258,486,487,490,492,495,497,500],{"class":260,"line":302},[258,488,489],{"class":463},"  size",[258,491,467],{"class":268},[258,493,494],{"class":272}," ComponentSize",[258,496,450],{"class":268},[258,498,499],{"class":272},"MD",[258,501,502],{"class":268},",\n",[258,504,506,509,511,514,516,519],{"class":260,"line":505},4,[258,507,508],{"class":463},"  shape",[258,510,467],{"class":268},[258,512,513],{"class":272}," ComponentShape",[258,515,450],{"class":268},[258,517,518],{"class":272},"CIRCLE",[258,520,502],{"class":268},[258,522,524,527,530],{"class":260,"line":523},5,[258,525,526],{"class":268},"}",[258,528,529],{"class":272},")",[258,531,292],{"class":268},[244,533,534,535,538,539,542,543,546],{},"The second argument specifies the mount target — any ",[255,536,537],{},"HTMLElement"," or ",[255,540,541],{},"ShadowRoot",". When omitted, the widget mounts into ",[255,544,545],{},"document.body"," as a floating overlay:",[248,548,550],{"className":250,"code":549,"language":252,"meta":253,"style":253},"const container = document.getElementById('widget-root');\n\nconst instance = await scena.mount(\n  { video: { src: '/video.mp4' } },\n  container,\n);\n",[255,551,552,582,586,605,631,638],{"__ignoreMap":253},[258,553,554,556,559,561,564,566,569,571,573,576,578,580],{"class":260,"line":261},[258,555,306],{"class":305},[258,557,558],{"class":272}," container ",[258,560,312],{"class":268},[258,562,563],{"class":272}," document",[258,565,450],{"class":268},[258,567,568],{"class":315},"getElementById",[258,570,455],{"class":272},[258,572,289],{"class":268},[258,574,575],{"class":285},"widget-root",[258,577,289],{"class":268},[258,579,529],{"class":272},[258,581,292],{"class":268},[258,583,584],{"class":260,"line":295},[258,585,299],{"emptyLinePlaceholder":298},[258,587,588,590,592,594,596,598,600,602],{"class":260,"line":302},[258,589,306],{"class":305},[258,591,439],{"class":272},[258,593,312],{"class":268},[258,595,444],{"class":264},[258,597,447],{"class":272},[258,599,450],{"class":268},[258,601,391],{"class":315},[258,603,604],{"class":272},"(\n",[258,606,607,610,613,615,617,619,621,623,625,627,629],{"class":260,"line":505},[258,608,609],{"class":268},"  {",[258,611,612],{"class":463}," video",[258,614,467],{"class":268},[258,616,269],{"class":268},[258,618,472],{"class":463},[258,620,467],{"class":268},[258,622,282],{"class":268},[258,624,479],{"class":285},[258,626,289],{"class":268},[258,628,276],{"class":268},[258,630,484],{"class":268},[258,632,633,636],{"class":260,"line":523},[258,634,635],{"class":272},"  container",[258,637,502],{"class":268},[258,639,641,643],{"class":260,"line":640},6,[258,642,529],{"class":272},[258,644,292],{"class":268},[646,647,649],"callout",{"icon":648,"to":120},"i-lucide-arrow-right",[244,650,651,652,655],{},"See ",[653,654,119],"strong",{}," for the full shape of the returned object.",[322,657,406],{"id":406},[244,659,660],{},"Destroys a previously mounted widget and removes it from the DOM:",[248,662,664],{"className":250,"code":663,"language":252,"meta":253,"style":253},"await scena.unmount(instance);\n",[255,665,666],{"__ignoreMap":253},[258,667,668,671,673,675,677,680],{"class":260,"line":261},[258,669,670],{"class":264},"await",[258,672,447],{"class":272},[258,674,450],{"class":268},[258,676,406],{"class":315},[258,678,679],{"class":272},"(instance)",[258,681,292],{"class":268},[244,683,684],{},"After unmounting, all event handlers are cleared automatically.",[322,686,688],{"id":687},"multiple-instances","Multiple instances",[244,690,691,692,695],{},"Each ",[255,693,694],{},"mount()"," call creates an independent widget. You can run several instances on the same page:",[248,697,699],{"className":250,"code":698,"language":252,"meta":253,"style":253},"const scena = useScena();\n\nconst widget1 = await scena.mount({ video: { src: '/a.mp4' } });\nconst widget2 = await scena.mount({ video: { src: '/b.mp4' } });\n\n// Unmount individually\nawait scena.unmount(widget1);\n",[255,700,701,715,719,766,812,816,822],{"__ignoreMap":253},[258,702,703,705,707,709,711,713],{"class":260,"line":261},[258,704,306],{"class":305},[258,706,309],{"class":272},[258,708,312],{"class":268},[258,710,273],{"class":315},[258,712,318],{"class":272},[258,714,292],{"class":268},[258,716,717],{"class":260,"line":295},[258,718,299],{"emptyLinePlaceholder":298},[258,720,721,723,726,728,730,732,734,736,738,741,743,745,747,749,751,753,756,758,760,762,764],{"class":260,"line":302},[258,722,306],{"class":305},[258,724,725],{"class":272}," widget1 ",[258,727,312],{"class":268},[258,729,444],{"class":264},[258,731,447],{"class":272},[258,733,450],{"class":268},[258,735,391],{"class":315},[258,737,455],{"class":272},[258,739,740],{"class":268},"{",[258,742,612],{"class":463},[258,744,467],{"class":268},[258,746,269],{"class":268},[258,748,472],{"class":463},[258,750,467],{"class":268},[258,752,282],{"class":268},[258,754,755],{"class":285},"/a.mp4",[258,757,289],{"class":268},[258,759,276],{"class":268},[258,761,276],{"class":268},[258,763,529],{"class":272},[258,765,292],{"class":268},[258,767,768,770,773,775,777,779,781,783,785,787,789,791,793,795,797,799,802,804,806,808,810],{"class":260,"line":505},[258,769,306],{"class":305},[258,771,772],{"class":272}," widget2 ",[258,774,312],{"class":268},[258,776,444],{"class":264},[258,778,447],{"class":272},[258,780,450],{"class":268},[258,782,391],{"class":315},[258,784,455],{"class":272},[258,786,740],{"class":268},[258,788,612],{"class":463},[258,790,467],{"class":268},[258,792,269],{"class":268},[258,794,472],{"class":463},[258,796,467],{"class":268},[258,798,282],{"class":268},[258,800,801],{"class":285},"/b.mp4",[258,803,289],{"class":268},[258,805,276],{"class":268},[258,807,276],{"class":268},[258,809,529],{"class":272},[258,811,292],{"class":268},[258,813,814],{"class":260,"line":523},[258,815,299],{"emptyLinePlaceholder":298},[258,817,818],{"class":260,"line":640},[258,819,821],{"class":820},"sHwdD","// Unmount individually\n",[258,823,825,827,829,831,833,836],{"class":260,"line":824},7,[258,826,670],{"class":264},[258,828,447],{"class":272},[258,830,450],{"class":268},[258,832,406],{"class":315},[258,834,835],{"class":272},"(widget1)",[258,837,292],{"class":268},[839,840,841],"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":253,"searchDepth":261,"depth":295,"links":843},[844,845,846,847],{"id":324,"depth":295,"text":325},{"id":391,"depth":295,"text":391},{"id":406,"depth":295,"text":406},{"id":687,"depth":295,"text":688},"Widget factory function that returns mount, unmount, NAME, and VERSION.","md",null,{},{"title":111,"description":848},"sVu2qpZIVPJMhcwM9veczjJzysDBTRmpQ0ucej9BYG8",[855,857],{"title":102,"path":103,"stem":104,"description":856,"children":-1},"Automatically adapt widget size and shape to viewport width using breakpoint-based constants overrides.",{"title":115,"path":116,"stem":117,"description":858,"children":-1},"Get, set, and deep merge widget configuration at runtime with getConfig, setConfig, and mergeConfig.",1777984317791]