[{"data":1,"prerenderedAt":554},["ShallowReactive",2],{"navigation":3,"/getting-started/installation":238,"/getting-started/installation-surround":549},[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":15,"body":240,"description":543,"extension":544,"links":545,"meta":546,"navigation":435,"path":16,"seo":547,"stem":17,"__hash__":548},"docs/01.getting-started/2.installation.md",{"type":241,"value":242,"toc":537},"minimark",[243,248,252,339,342,368,376,380,392,396,399,496,500,523,533],[244,245,247],"h2",{"id":246},"package-manager","Package manager",[249,250,251],"p",{},"Install the package using your preferred package manager:",[253,254,256,287,305,322],"tabs",{"variant":255},"link",[257,258,261],"tabs-item",{"icon":259,"label":260},"i-simple-icons-npm","npm",[262,263,269],"pre",{"className":264,"code":265,"filename":266,"language":267,"meta":268,"style":268},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @retoo/scena\n","Terminal","bash","",[270,271,272],"code",{"__ignoreMap":268},[273,274,277,280,284],"span",{"class":275,"line":276},"line",1,[273,278,260],{"class":279},"sBMFI",[273,281,283],{"class":282},"sfazB"," install",[273,285,286],{"class":282}," @retoo/scena\n",[257,288,291],{"icon":289,"label":290},"i-simple-icons-pnpm","pnpm",[262,292,294],{"className":264,"code":293,"filename":266,"language":267,"meta":268,"style":268},"pnpm add @retoo/scena\n",[270,295,296],{"__ignoreMap":268},[273,297,298,300,303],{"class":275,"line":276},[273,299,290],{"class":279},[273,301,302],{"class":282}," add",[273,304,286],{"class":282},[257,306,309],{"icon":307,"label":308},"i-simple-icons-yarn","yarn",[262,310,312],{"className":264,"code":311,"filename":266,"language":267,"meta":268,"style":268},"yarn add @retoo/scena\n",[270,313,314],{"__ignoreMap":268},[273,315,316,318,320],{"class":275,"line":276},[273,317,308],{"class":279},[273,319,302],{"class":282},[273,321,286],{"class":282},[257,323,326],{"icon":324,"label":325},"i-simple-icons-bun","bun",[262,327,329],{"className":264,"code":328,"filename":266,"language":267,"meta":268,"style":268},"bun add @retoo/scena\n",[270,330,331],{"__ignoreMap":268},[273,332,333,335,337],{"class":275,"line":276},[273,334,325],{"class":279},[273,336,302],{"class":282},[273,338,286],{"class":282},[249,340,341],{},"The stylesheet must be imported separately — without it the widget mounts into the DOM but renders without any visual styling:",[262,343,347],{"className":344,"code":345,"language":346,"meta":268,"style":268},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import '@retoo/scena/styles';\n","ts",[270,348,349],{"__ignoreMap":268},[273,350,351,355,359,362,365],{"class":275,"line":276},[273,352,354],{"class":353},"s7zQu","import",[273,356,358],{"class":357},"sMK4o"," '",[273,360,361],{"class":282},"@retoo/scena/styles",[273,363,364],{"class":357},"'",[273,366,367],{"class":357},";\n",[369,370,373],"callout",{"icon":371,"color":372},"i-lucide-alert-triangle","warning",[249,374,375],{},"Missing the CSS import is the most common setup issue. If the widget mounts but appears invisible or unstyled, check this import first.",[244,377,379],{"id":378},"cdn","CDN",[249,381,382,383,386,387,391],{},"For environments without a bundler (static HTML, WordPress, Webflow), load Scena via a ",[270,384,385],{},"\u003Cscript>"," tag. See the ",[388,389,223],"a",{"href":390},"/distribution/formats#umd"," page for full CDN setup instructions.",[244,393,395],{"id":394},"verify-installation","Verify installation",[249,397,398],{},"Confirm that the package is resolved correctly by checking the exported metadata:",[262,400,402],{"className":344,"code":401,"language":346,"meta":268,"style":268},"import { useScena } from '@retoo/scena';\n\nconst { NAME, VERSION } = useScena();\n\nconsole.log(NAME, VERSION);\n",[270,403,404,430,437,469,474],{"__ignoreMap":268},[273,405,406,408,411,415,418,421,423,426,428],{"class":275,"line":276},[273,407,354],{"class":353},[273,409,410],{"class":357}," {",[273,412,414],{"class":413},"sTEyZ"," useScena",[273,416,417],{"class":357}," }",[273,419,420],{"class":353}," from",[273,422,358],{"class":357},[273,424,425],{"class":282},"@retoo/scena",[273,427,364],{"class":357},[273,429,367],{"class":357},[273,431,433],{"class":275,"line":432},2,[273,434,436],{"emptyLinePlaceholder":435},true,"\n",[273,438,440,444,446,449,452,455,458,461,464,467],{"class":275,"line":439},3,[273,441,443],{"class":442},"spNyl","const",[273,445,410],{"class":357},[273,447,448],{"class":413}," NAME",[273,450,451],{"class":357},",",[273,453,454],{"class":413}," VERSION ",[273,456,457],{"class":357},"}",[273,459,460],{"class":357}," =",[273,462,414],{"class":463},"s2Zo4",[273,465,466],{"class":413},"()",[273,468,367],{"class":357},[273,470,472],{"class":275,"line":471},4,[273,473,436],{"emptyLinePlaceholder":435},[273,475,477,480,483,486,489,491,494],{"class":275,"line":476},5,[273,478,479],{"class":413},"console",[273,481,482],{"class":357},".",[273,484,485],{"class":463},"log",[273,487,488],{"class":413},"(NAME",[273,490,451],{"class":357},[273,492,493],{"class":413}," VERSION)",[273,495,367],{"class":357},[244,497,499],{"id":498},"requirements","Requirements",[501,502,503,511,517],"field-group",{},[504,505,508],"field",{"name":506,"type":507},"Browser","string",[249,509,510],{},"Any modern browser supporting ES2020+ (Chrome 80+, Firefox 80+, Safari 14+, Edge 80+).",[504,512,514],{"name":513,"type":507},"Node.js",[249,515,516],{},"16.0 or later (for SSR / CommonJS usage).",[504,518,520],{"name":519,"type":507},"Bundler",[249,521,522],{},"Any bundler with ES Module support — Vite, Webpack 5+, Rollup, esbuild.",[369,524,526],{"icon":525,"to":20},"i-lucide-arrow-right",[249,527,528,529,532],{},"Package installed? Let's mount your first widget in the ",[530,531,19],"strong",{}," guide.",[534,535,536],"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":268,"searchDepth":276,"depth":432,"links":538},[539,540,541,542],{"id":246,"depth":432,"text":247},{"id":378,"depth":432,"text":379},{"id":394,"depth":432,"text":395},{"id":498,"depth":432,"text":499},"Install @retoo/scena via npm, pnpm, yarn, or connect via CDN.","md",null,{},{"title":15,"description":543},"AHJQOwv6Sp9ijmK9qkubvuskfUxla774O5RgRE886Hs",[550,552],{"title":11,"path":12,"stem":13,"description":551,"children":-1},"Lightweight embeddable widget for adding video reels to any website.",{"title":19,"path":20,"stem":21,"description":553,"children":-1},"Mount your first video widget in under 5 minutes.",1777984319392]