[{"data":1,"prerenderedAt":658},["ShallowReactive",2],{"navigation":3,"/features/responsive":238,"/features/responsive-surround":653},[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":102,"body":240,"description":646,"extension":647,"links":648,"meta":649,"navigation":650,"path":103,"seo":651,"stem":104,"__hash__":652},"docs/04.features/3.responsive.md",{"type":241,"value":242,"toc":639},"minimark",[243,256,261,264,277,284,288,297,494,505,509,536,540,543,551,554,558,564,606,635],[244,245,246,247,251,252,255],"p",{},"The ",[248,249,250],"code",{},"responsive"," config maps viewport breakpoints (max-width in px) to partial config overrides. When the viewport width matches a breakpoint, the corresponding overrides are applied on top of the base config — without remounting. Breakpoints use ",[248,253,254],{},"matchMedia"," under the hood and update reactively as the window resizes.",[257,258,260],"h2",{"id":259},"example","Example",[244,262,263],{},"Resize the browser window or use DevTools responsive mode to see the widget adapt between breakpoints.",[265,266,269],"callout",{"color":267,"icon":268},"info","i-lucide-info",[244,270,271,272,276],{},"Breakpoints react to the ",[273,274,275],"strong",{},"viewport width",", not the container. Resize the browser window manually or open DevTools → toggle device toolbar (Ctrl+Shift+M / Cmd+Shift+M).",[278,279,280],"scena-container",{},[281,282],"scena-component",{":config":283},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false,\"responsive\":{\"lg\":{\"size\":\"sm\"},\"md\":{\"size\":\"xs\"}}}",[257,285,287],{"id":286},"config","Config",[244,289,246,290,292,293,296],{},[248,291,250],{}," key is a plain object where each key is a max-width breakpoint in pixels and the value is a partial override — the same shape as ",[248,294,295],{},"ScenaOverrides",":",[298,299,304],"pre",{"className":300,"code":301,"language":302,"meta":303,"style":303},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.MD,\n  shape: ComponentShape.CIRCLE,\n  responsive: {\n    1024: {\n      size: ComponentSize.SM,\n    },\n    768: {\n      size: ComponentSize.XS,\n    },\n  },\n});\n","ts","",[248,305,306,333,363,382,400,411,422,439,445,455,471,476,482],{"__ignoreMap":303},[307,308,311,315,319,323,327,330],"span",{"class":309,"line":310},"line",1,[307,312,314],{"class":313},"s7zQu","await",[307,316,318],{"class":317},"sTEyZ"," scena",[307,320,322],{"class":321},"sMK4o",".",[307,324,326],{"class":325},"s2Zo4","mount",[307,328,329],{"class":317},"(",[307,331,332],{"class":321},"{\n",[307,334,336,340,342,345,348,350,353,357,360],{"class":309,"line":335},2,[307,337,339],{"class":338},"swJcz","  video",[307,341,296],{"class":321},[307,343,344],{"class":321}," {",[307,346,347],{"class":338}," src",[307,349,296],{"class":321},[307,351,352],{"class":321}," '",[307,354,356],{"class":355},"sfazB","/video.mp4",[307,358,359],{"class":321},"'",[307,361,362],{"class":321}," },\n",[307,364,366,369,371,374,376,379],{"class":309,"line":365},3,[307,367,368],{"class":338},"  size",[307,370,296],{"class":321},[307,372,373],{"class":317}," ComponentSize",[307,375,322],{"class":321},[307,377,378],{"class":317},"MD",[307,380,381],{"class":321},",\n",[307,383,385,388,390,393,395,398],{"class":309,"line":384},4,[307,386,387],{"class":338},"  shape",[307,389,296],{"class":321},[307,391,392],{"class":317}," ComponentShape",[307,394,322],{"class":321},[307,396,397],{"class":317},"CIRCLE",[307,399,381],{"class":321},[307,401,403,406,408],{"class":309,"line":402},5,[307,404,405],{"class":338},"  responsive",[307,407,296],{"class":321},[307,409,410],{"class":321}," {\n",[307,412,414,418,420],{"class":309,"line":413},6,[307,415,417],{"class":416},"sbssI","    1024",[307,419,296],{"class":321},[307,421,410],{"class":321},[307,423,425,428,430,432,434,437],{"class":309,"line":424},7,[307,426,427],{"class":338},"      size",[307,429,296],{"class":321},[307,431,373],{"class":317},[307,433,322],{"class":321},[307,435,436],{"class":317},"SM",[307,438,381],{"class":321},[307,440,442],{"class":309,"line":441},8,[307,443,444],{"class":321},"    },\n",[307,446,448,451,453],{"class":309,"line":447},9,[307,449,450],{"class":416},"    768",[307,452,296],{"class":321},[307,454,410],{"class":321},[307,456,458,460,462,464,466,469],{"class":309,"line":457},10,[307,459,427],{"class":338},[307,461,296],{"class":321},[307,463,373],{"class":317},[307,465,322],{"class":321},[307,467,468],{"class":317},"XS",[307,470,381],{"class":321},[307,472,474],{"class":309,"line":473},11,[307,475,444],{"class":321},[307,477,479],{"class":309,"line":478},12,[307,480,481],{"class":321},"  },\n",[307,483,485,488,491],{"class":309,"line":484},13,[307,486,487],{"class":321},"}",[307,489,490],{"class":317},")",[307,492,493],{"class":321},";\n",[244,495,496,497,500,501,504],{},"At viewport widths of 769–1024px the widget renders at ",[248,498,499],{},"sm",". At 768px and below it switches to ",[248,502,503],{},"xs",". Above 1024px the base config applies.",[257,506,508],{"id":507},"how-it-works","How it works",[510,511,512,519,526,533],"ol",{},[513,514,515,516,322],"li",{},"Breakpoints are sorted ascending and matched against ",[248,517,518],{},"window.innerWidth",[513,520,521,522,525],{},"The first breakpoint where ",[248,523,524],{},"width \u003C= breakpoint"," wins.",[513,527,528,529,532],{},"The matched override is applied as a layer below ",[248,530,531],{},"preview"," — so preview always takes priority.",[513,534,535],{},"When no breakpoint matches, all responsive overrides are cleared and the base config is restored.",[257,537,539],{"id":538},"breakpoint-priority","Breakpoint priority",[244,541,542],{},"Override layers are applied in fixed order:",[298,544,549],{"className":545,"code":547,"language":548},[546],"language-text","base config → responsive → preview\n","text",[248,550,547],{"__ignoreMap":303},[244,552,553],{},"Preview always wins — if preview is active, its overrides take precedence over the matched breakpoint.",[257,555,557],{"id":556},"runtime-api","Runtime API",[244,559,560,561,296],{},"The responsive API is available at ",[248,562,563],{},"instance.responsive",[565,566,567,583],"table",{},[568,569,570],"thead",{},[571,572,573,577,580],"tr",{},[574,575,576],"th",{},"Property",[574,578,579],{},"Type",[574,581,582],{},"Description",[584,585,586],"tbody",{},[571,587,588,594,599],{},[589,590,591],"td",{},[248,592,593],{},"activeBreakpoint",[589,595,596],{},[248,597,598],{},"number | null",[589,600,601,602,605],{},"The currently matched breakpoint in px, or ",[248,603,604],{},"null"," if none matched",[298,607,609],{"className":300,"code":608,"language":302,"meta":303,"style":303},"console.log(instance.responsive.activeBreakpoint);\n",[248,610,611],{"__ignoreMap":303},[307,612,613,616,618,621,624,626,628,630,633],{"class":309,"line":310},[307,614,615],{"class":317},"console",[307,617,322],{"class":321},[307,619,620],{"class":325},"log",[307,622,623],{"class":317},"(instance",[307,625,322],{"class":321},[307,627,250],{"class":317},[307,629,322],{"class":321},[307,631,632],{"class":317},"activeBreakpoint)",[307,634,493],{"class":321},[636,637,638],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":303,"searchDepth":310,"depth":335,"links":640},[641,642,643,644,645],{"id":259,"depth":335,"text":260},{"id":286,"depth":335,"text":287},{"id":507,"depth":335,"text":508},{"id":538,"depth":335,"text":539},{"id":556,"depth":335,"text":557},"Automatically adapt widget size and shape to viewport width using breakpoint-based constants overrides.","md",null,{},true,{"title":102,"description":646},"CLs1KmwmFVYvYkkMZkxIZzy8T3oDFiT_16buYnAiNMk",[654,656],{"title":98,"path":99,"stem":100,"description":655,"children":-1},"Control widget visibility with isHidden, isShownOnReady, and animated transitions.",{"title":111,"path":112,"stem":113,"description":657,"children":-1},"Widget factory function that returns mount, unmount, NAME, and VERSION.",1777984321393]