[{"data":1,"prerenderedAt":815},["ShallowReactive",2],{"navigation":3,"/examples/responsive-widget":238,"/examples/responsive-widget-surround":810},[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":194,"body":240,"description":804,"extension":805,"links":806,"meta":807,"navigation":375,"path":195,"seo":808,"stem":196,"__hash__":809},"docs/08.examples/3.responsive-widget.md",{"type":241,"value":242,"toc":800},"minimark",[243,252,255,268,273,280,283,781,788,796],[244,245,246,247,251],"p",{},"The ",[248,249,250],"code",{},"responsive"," key maps max-width breakpoints (in px) to partial config overrides. When the viewport matches a breakpoint the overrides are applied on top of the base config — without remounting.",[244,253,254],{},"Resize the browser window or open DevTools device toolbar to see the widget adapt.",[256,257,260],"callout",{"icon":258,"color":259},"i-lucide-info","info",[244,261,262,263,267],{},"Breakpoints react to ",[264,265,266],"strong",{},"viewport width",", not the container. Use DevTools → toggle device toolbar (Ctrl+Shift+M / Cmd+Shift+M) to simulate different widths.",[269,270,272],"h2",{"id":271},"demo","Demo",[274,275,276],"scena-container",{},[277,278],"scena-component",{":config":279},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false,\"loop\":true,\"muted\":true},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false,\"responsive\":{\"lg\":{\"shape\":\"square\"},\"md\":{\"size\":\"sm\",\"shape\":\"square\"},\"sm\":{\"size\":\"xs\",\"shape\":\"square\"}}}",[269,281,282],{"id":248},"Code",[284,285,291],"pre",{"className":286,"code":287,"filename":288,"language":289,"meta":290,"style":290},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  useScena,\n  ComponentSize,\n  ComponentShape,\n  ComponentPosition,\n  ComponentPlacement,\n} from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: {\n    src: '/video.mp4',\n    autoplay: false,\n    loop: true,\n    muted: true,\n  },\n  size: ComponentSize.MD,\n  shape: ComponentShape.CIRCLE,\n  container: {\n    position: ComponentPosition.ABSOLUTE,\n    placement: ComponentPlacement.MIDDLE_CENTER,\n  },\n  ctaButton: false,\n  closeButton: false,\n  responsive: {\n    1024: {\n      shape: ComponentShape.SQUARE,\n    },\n    768: {\n      size: ComponentSize.SM,\n      shape: ComponentShape.SQUARE,\n    },\n    480: {\n      size: ComponentSize.XS,\n      shape: ComponentShape.SQUARE,\n    },\n  },\n});\n","main.ts","ts","",[248,292,293,306,316,324,332,340,348,370,377,391,396,418,423,444,456,473,487,500,512,518,536,554,564,582,600,605,617,629,639,650,667,673,683,700,715,720,730,746,761,766,771],{"__ignoreMap":290},[294,295,298,302],"span",{"class":296,"line":297},"line",1,[294,299,301],{"class":300},"s7zQu","import",[294,303,305],{"class":304},"sMK4o"," {\n",[294,307,309,313],{"class":296,"line":308},2,[294,310,312],{"class":311},"sTEyZ","  useScena",[294,314,315],{"class":304},",\n",[294,317,319,322],{"class":296,"line":318},3,[294,320,321],{"class":311},"  ComponentSize",[294,323,315],{"class":304},[294,325,327,330],{"class":296,"line":326},4,[294,328,329],{"class":311},"  ComponentShape",[294,331,315],{"class":304},[294,333,335,338],{"class":296,"line":334},5,[294,336,337],{"class":311},"  ComponentPosition",[294,339,315],{"class":304},[294,341,343,346],{"class":296,"line":342},6,[294,344,345],{"class":311},"  ComponentPlacement",[294,347,315],{"class":304},[294,349,351,354,357,360,364,367],{"class":296,"line":350},7,[294,352,353],{"class":304},"}",[294,355,356],{"class":300}," from",[294,358,359],{"class":304}," '",[294,361,363],{"class":362},"sfazB","@retoo/scena",[294,365,366],{"class":304},"'",[294,368,369],{"class":304},";\n",[294,371,373],{"class":296,"line":372},8,[294,374,376],{"emptyLinePlaceholder":375},true,"\n",[294,378,380,382,384,387,389],{"class":296,"line":379},9,[294,381,301],{"class":300},[294,383,359],{"class":304},[294,385,386],{"class":362},"@retoo/scena/styles",[294,388,366],{"class":304},[294,390,369],{"class":304},[294,392,394],{"class":296,"line":393},10,[294,395,376],{"emptyLinePlaceholder":375},[294,397,399,403,406,409,413,416],{"class":296,"line":398},11,[294,400,402],{"class":401},"spNyl","const",[294,404,405],{"class":311}," scena ",[294,407,408],{"class":304},"=",[294,410,412],{"class":411},"s2Zo4"," useScena",[294,414,415],{"class":311},"()",[294,417,369],{"class":304},[294,419,421],{"class":296,"line":420},12,[294,422,376],{"emptyLinePlaceholder":375},[294,424,426,429,432,435,438,441],{"class":296,"line":425},13,[294,427,428],{"class":300},"await",[294,430,431],{"class":311}," scena",[294,433,434],{"class":304},".",[294,436,437],{"class":411},"mount",[294,439,440],{"class":311},"(",[294,442,443],{"class":304},"{\n",[294,445,447,451,454],{"class":296,"line":446},14,[294,448,450],{"class":449},"swJcz","  video",[294,452,453],{"class":304},":",[294,455,305],{"class":304},[294,457,459,462,464,466,469,471],{"class":296,"line":458},15,[294,460,461],{"class":449},"    src",[294,463,453],{"class":304},[294,465,359],{"class":304},[294,467,468],{"class":362},"/video.mp4",[294,470,366],{"class":304},[294,472,315],{"class":304},[294,474,476,479,481,485],{"class":296,"line":475},16,[294,477,478],{"class":449},"    autoplay",[294,480,453],{"class":304},[294,482,484],{"class":483},"sfNiH"," false",[294,486,315],{"class":304},[294,488,490,493,495,498],{"class":296,"line":489},17,[294,491,492],{"class":449},"    loop",[294,494,453],{"class":304},[294,496,497],{"class":483}," true",[294,499,315],{"class":304},[294,501,503,506,508,510],{"class":296,"line":502},18,[294,504,505],{"class":449},"    muted",[294,507,453],{"class":304},[294,509,497],{"class":483},[294,511,315],{"class":304},[294,513,515],{"class":296,"line":514},19,[294,516,517],{"class":304},"  },\n",[294,519,521,524,526,529,531,534],{"class":296,"line":520},20,[294,522,523],{"class":449},"  size",[294,525,453],{"class":304},[294,527,528],{"class":311}," ComponentSize",[294,530,434],{"class":304},[294,532,533],{"class":311},"MD",[294,535,315],{"class":304},[294,537,539,542,544,547,549,552],{"class":296,"line":538},21,[294,540,541],{"class":449},"  shape",[294,543,453],{"class":304},[294,545,546],{"class":311}," ComponentShape",[294,548,434],{"class":304},[294,550,551],{"class":311},"CIRCLE",[294,553,315],{"class":304},[294,555,557,560,562],{"class":296,"line":556},22,[294,558,559],{"class":449},"  container",[294,561,453],{"class":304},[294,563,305],{"class":304},[294,565,567,570,572,575,577,580],{"class":296,"line":566},23,[294,568,569],{"class":449},"    position",[294,571,453],{"class":304},[294,573,574],{"class":311}," ComponentPosition",[294,576,434],{"class":304},[294,578,579],{"class":311},"ABSOLUTE",[294,581,315],{"class":304},[294,583,585,588,590,593,595,598],{"class":296,"line":584},24,[294,586,587],{"class":449},"    placement",[294,589,453],{"class":304},[294,591,592],{"class":311}," ComponentPlacement",[294,594,434],{"class":304},[294,596,597],{"class":311},"MIDDLE_CENTER",[294,599,315],{"class":304},[294,601,603],{"class":296,"line":602},25,[294,604,517],{"class":304},[294,606,608,611,613,615],{"class":296,"line":607},26,[294,609,610],{"class":449},"  ctaButton",[294,612,453],{"class":304},[294,614,484],{"class":483},[294,616,315],{"class":304},[294,618,620,623,625,627],{"class":296,"line":619},27,[294,621,622],{"class":449},"  closeButton",[294,624,453],{"class":304},[294,626,484],{"class":483},[294,628,315],{"class":304},[294,630,632,635,637],{"class":296,"line":631},28,[294,633,634],{"class":449},"  responsive",[294,636,453],{"class":304},[294,638,305],{"class":304},[294,640,642,646,648],{"class":296,"line":641},29,[294,643,645],{"class":644},"sbssI","    1024",[294,647,453],{"class":304},[294,649,305],{"class":304},[294,651,653,656,658,660,662,665],{"class":296,"line":652},30,[294,654,655],{"class":449},"      shape",[294,657,453],{"class":304},[294,659,546],{"class":311},[294,661,434],{"class":304},[294,663,664],{"class":311},"SQUARE",[294,666,315],{"class":304},[294,668,670],{"class":296,"line":669},31,[294,671,672],{"class":304},"    },\n",[294,674,676,679,681],{"class":296,"line":675},32,[294,677,678],{"class":644},"    768",[294,680,453],{"class":304},[294,682,305],{"class":304},[294,684,686,689,691,693,695,698],{"class":296,"line":685},33,[294,687,688],{"class":449},"      size",[294,690,453],{"class":304},[294,692,528],{"class":311},[294,694,434],{"class":304},[294,696,697],{"class":311},"SM",[294,699,315],{"class":304},[294,701,703,705,707,709,711,713],{"class":296,"line":702},34,[294,704,655],{"class":449},[294,706,453],{"class":304},[294,708,546],{"class":311},[294,710,434],{"class":304},[294,712,664],{"class":311},[294,714,315],{"class":304},[294,716,718],{"class":296,"line":717},35,[294,719,672],{"class":304},[294,721,723,726,728],{"class":296,"line":722},36,[294,724,725],{"class":644},"    480",[294,727,453],{"class":304},[294,729,305],{"class":304},[294,731,733,735,737,739,741,744],{"class":296,"line":732},37,[294,734,688],{"class":449},[294,736,453],{"class":304},[294,738,528],{"class":311},[294,740,434],{"class":304},[294,742,743],{"class":311},"XS",[294,745,315],{"class":304},[294,747,749,751,753,755,757,759],{"class":296,"line":748},38,[294,750,655],{"class":449},[294,752,453],{"class":304},[294,754,546],{"class":311},[294,756,434],{"class":304},[294,758,664],{"class":311},[294,760,315],{"class":304},[294,762,764],{"class":296,"line":763},39,[294,765,672],{"class":304},[294,767,769],{"class":296,"line":768},40,[294,770,517],{"class":304},[294,772,774,776,779],{"class":296,"line":773},41,[294,775,353],{"class":304},[294,777,778],{"class":311},")",[294,780,369],{"class":304},[244,782,783,784,787],{},"Breakpoints use ",[248,785,786],{},"matchMedia"," under the hood and update reactively as the window resizes — no scroll or resize handlers needed.",[256,789,791],{"icon":790,"to":103},"i-lucide-arrow-right",[244,792,793,794,434],{},"Full breakpoint reference and override shape — see ",[264,795,102],{},[797,798,799],"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 pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":290,"searchDepth":297,"depth":308,"links":801},[802,803],{"id":271,"depth":308,"text":272},{"id":248,"depth":308,"text":282},"Adapt widget size and shape across breakpoints using the responsive constants.","md",null,{},{"title":194,"description":804},"V1Fn4YIu-Esl-B_1DjvNjwV4bZlR08JS3uHRErITXQo",[811,813],{"title":190,"path":191,"stem":192,"description":812,"children":-1},"Override CSS custom properties and component constants to match your brand.",{"title":198,"path":199,"stem":200,"description":814,"children":-1},"Build your own UI on top of the instance API — progress bar, buttons, and overlays.",1777984324231]