[{"data":1,"prerenderedAt":1423},["ShallowReactive",2],{"navigation":3,"/examples/viewport-mount":238,"/examples/viewport-mount-surround":1418},[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":202,"body":240,"description":1412,"extension":1413,"links":1414,"meta":1415,"navigation":484,"path":203,"seo":1416,"stem":204,"__hash__":1417},"docs/08.examples/5.viewport-mount.md",{"type":241,"value":242,"toc":1407},"minimark",[243,247,255,262,267,274,277,280,308,311,401,1229,1233,1236,1395,1403],[244,245,246],"p",{},"By default the widget is created, the video element is injected, and network requests begin immediately on page load. On pages where the widget is below the fold, this wastes resources the user may never consume.",[244,248,249,250,254],{},"This example defers mounting until the container enters the viewport. A mount observer fires once on first intersection, calls ",[251,252,253],"code",{},"scena.mount()",", then disconnects. A second visibility observer then takes over — showing the widget when it is fully in view and hiding it when less than 50% remains visible.",[256,257,259],"callout",{"color":258},"warning",[244,260,261],{},"Both observers hold references to DOM nodes and will prevent garbage collection if not disconnected. The widget instance also maintains internal state, event listeners, and a mounted Svelte component.",[263,264,266],"h2",{"id":265},"demo","Demo",[268,269,270],"scena-container",{},[271,272],"scena-component-viewport-mount",{":config":273},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"poster\":\"/examples/example-cat.jpg\",\"loop\":true,\"muted\":true},\"size\":\"md\",\"shape\":\"circle\",\"ctaButton\":false,\"closeButton\":false,\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"visibility\":{\"isHidden\":true,\"isAnimated\":true,\"isShownOnReady\":false}}",[263,275,276],{"id":251},"Code",[244,278,279],{},"The setup requires two elements with distinct roles:",[281,282,283,293],"ul",{},[284,285,286,292],"li",{},[287,288,289],"strong",{},[251,290,291],{},"wrapper"," — a full-size container that sits in the normal document flow. Both observers watch this element to track its position in the viewport.",[284,294,295,300,301,303,304,307],{},[287,296,297],{},[251,298,299],{},"target"," — an empty mount point passed to ",[251,302,253],{},". The widget renders inside it, but since its container uses ",[251,305,306],{},"position: absolute",", the visual widget is positioned independently from the flow.",[244,309,310],{},"Separating them is important: observing the widget's own root would produce incorrect ratios during show/hide animations, as the widget's bounding rect changes while animating.",[312,313,319],"pre",{"className":314,"code":315,"filename":316,"language":317,"meta":318,"style":318},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv id=\"widget-wrapper\" style=\"width: 100%; height: 100%\">\n  \u003Cdiv id=\"widget-target\">\u003C/div>\n\u003C/div>\n","index.html","html","",[251,320,321,365,391],{"__ignoreMap":318},[322,323,326,330,334,338,341,344,348,350,353,355,357,360,362],"span",{"class":324,"line":325},"line",1,[322,327,329],{"class":328},"sMK4o","\u003C",[322,331,333],{"class":332},"swJcz","div",[322,335,337],{"class":336},"spNyl"," id",[322,339,340],{"class":328},"=",[322,342,343],{"class":328},"\"",[322,345,347],{"class":346},"sfazB","widget-wrapper",[322,349,343],{"class":328},[322,351,352],{"class":336}," style",[322,354,340],{"class":328},[322,356,343],{"class":328},[322,358,359],{"class":346},"width: 100%; height: 100%",[322,361,343],{"class":328},[322,363,364],{"class":328},">\n",[322,366,368,371,373,375,377,379,382,384,387,389],{"class":324,"line":367},2,[322,369,370],{"class":328},"  \u003C",[322,372,333],{"class":332},[322,374,337],{"class":336},[322,376,340],{"class":328},[322,378,343],{"class":328},[322,380,381],{"class":346},"widget-target",[322,383,343],{"class":328},[322,385,386],{"class":328},">\u003C/",[322,388,333],{"class":332},[322,390,364],{"class":328},[322,392,394,397,399],{"class":324,"line":393},3,[322,395,396],{"class":328},"\u003C/",[322,398,333],{"class":332},[322,400,364],{"class":328},[312,402,407],{"className":403,"code":404,"filename":405,"language":406,"meta":318,"style":318},"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();\nconst wrapper = document.getElementById('widget-wrapper');\nconst target = document.getElementById('widget-target');\n\nlet instance = null;\nlet componentObserver = null;\n\nconst mountObserver = new IntersectionObserver(async ([mountEntry]) => {\n  if (!mountEntry.isIntersecting || instance) return;\n\n  mountObserver.disconnect();\n\n  instance = await scena.mount({\n    video: {\n      src: '/video.mp4',\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    visibility: {\n      isHidden: true,\n      isAnimated: true,\n      isShownOnReady: false,\n    },\n  }, target);\n\n  // Show when fully visible, hide when less than 50% in view\n  componentObserver = new IntersectionObserver(([componentEntry]) => {\n      if (!componentEntry) return;\n\n      if (componentEntry.intersectionRatio >= 1) instance.visibility.show();\n      else if (componentEntry.intersectionRatio \u003C 0.5) instance.visibility.hide();\n    },\n    { threshold: [0, 0.5, 1] }\n  );\n\n  componentObserver.observe(wrapper);\n}, { threshold: 0.1 });\n\nmountObserver.observe(wrapper);\n","main.ts","ts",[251,408,409,418,427,434,442,450,458,479,486,500,505,525,558,586,591,605,617,622,658,691,696,711,716,741,752,769,783,795,801,819,837,847,865,883,888,901,913,923,935,947,959,964,977,982,989,1015,1033,1038,1078,1118,1123,1155,1163,1168,1186,1209,1214],{"__ignoreMap":318},[322,410,411,415],{"class":324,"line":325},[322,412,414],{"class":413},"s7zQu","import",[322,416,417],{"class":328}," {\n",[322,419,420,424],{"class":324,"line":367},[322,421,423],{"class":422},"sTEyZ","  useScena",[322,425,426],{"class":328},",\n",[322,428,429,432],{"class":324,"line":393},[322,430,431],{"class":422},"  ComponentSize",[322,433,426],{"class":328},[322,435,437,440],{"class":324,"line":436},4,[322,438,439],{"class":422},"  ComponentShape",[322,441,426],{"class":328},[322,443,445,448],{"class":324,"line":444},5,[322,446,447],{"class":422},"  ComponentPosition",[322,449,426],{"class":328},[322,451,453,456],{"class":324,"line":452},6,[322,454,455],{"class":422},"  ComponentPlacement",[322,457,426],{"class":328},[322,459,461,464,467,470,473,476],{"class":324,"line":460},7,[322,462,463],{"class":328},"}",[322,465,466],{"class":413}," from",[322,468,469],{"class":328}," '",[322,471,472],{"class":346},"@retoo/scena",[322,474,475],{"class":328},"'",[322,477,478],{"class":328},";\n",[322,480,482],{"class":324,"line":481},8,[322,483,485],{"emptyLinePlaceholder":484},true,"\n",[322,487,489,491,493,496,498],{"class":324,"line":488},9,[322,490,414],{"class":413},[322,492,469],{"class":328},[322,494,495],{"class":346},"@retoo/scena/styles",[322,497,475],{"class":328},[322,499,478],{"class":328},[322,501,503],{"class":324,"line":502},10,[322,504,485],{"emptyLinePlaceholder":484},[322,506,508,511,514,516,520,523],{"class":324,"line":507},11,[322,509,510],{"class":336},"const",[322,512,513],{"class":422}," scena ",[322,515,340],{"class":328},[322,517,519],{"class":518},"s2Zo4"," useScena",[322,521,522],{"class":422},"()",[322,524,478],{"class":328},[322,526,528,530,533,535,538,541,544,547,549,551,553,556],{"class":324,"line":527},12,[322,529,510],{"class":336},[322,531,532],{"class":422}," wrapper ",[322,534,340],{"class":328},[322,536,537],{"class":422}," document",[322,539,540],{"class":328},".",[322,542,543],{"class":518},"getElementById",[322,545,546],{"class":422},"(",[322,548,475],{"class":328},[322,550,347],{"class":346},[322,552,475],{"class":328},[322,554,555],{"class":422},")",[322,557,478],{"class":328},[322,559,561,563,566,568,570,572,574,576,578,580,582,584],{"class":324,"line":560},13,[322,562,510],{"class":336},[322,564,565],{"class":422}," target ",[322,567,340],{"class":328},[322,569,537],{"class":422},[322,571,540],{"class":328},[322,573,543],{"class":518},[322,575,546],{"class":422},[322,577,475],{"class":328},[322,579,381],{"class":346},[322,581,475],{"class":328},[322,583,555],{"class":422},[322,585,478],{"class":328},[322,587,589],{"class":324,"line":588},14,[322,590,485],{"emptyLinePlaceholder":484},[322,592,594,597,600,602],{"class":324,"line":593},15,[322,595,596],{"class":336},"let",[322,598,599],{"class":422}," instance ",[322,601,340],{"class":328},[322,603,604],{"class":328}," null;\n",[322,606,608,610,613,615],{"class":324,"line":607},16,[322,609,596],{"class":336},[322,611,612],{"class":422}," componentObserver ",[322,614,340],{"class":328},[322,616,604],{"class":328},[322,618,620],{"class":324,"line":619},17,[322,621,485],{"emptyLinePlaceholder":484},[322,623,625,627,630,632,635,638,640,643,646,650,653,656],{"class":324,"line":624},18,[322,626,510],{"class":336},[322,628,629],{"class":422}," mountObserver ",[322,631,340],{"class":328},[322,633,634],{"class":328}," new",[322,636,637],{"class":518}," IntersectionObserver",[322,639,546],{"class":422},[322,641,642],{"class":336},"async",[322,644,645],{"class":328}," ([",[322,647,649],{"class":648},"sHdIc","mountEntry",[322,651,652],{"class":328},"])",[322,654,655],{"class":336}," =>",[322,657,417],{"class":328},[322,659,661,664,667,670,672,674,677,680,683,686,689],{"class":324,"line":660},19,[322,662,663],{"class":413},"  if",[322,665,666],{"class":332}," (",[322,668,669],{"class":328},"!",[322,671,649],{"class":422},[322,673,540],{"class":328},[322,675,676],{"class":422},"isIntersecting",[322,678,679],{"class":328}," ||",[322,681,682],{"class":422}," instance",[322,684,685],{"class":332},") ",[322,687,688],{"class":413},"return",[322,690,478],{"class":328},[322,692,694],{"class":324,"line":693},20,[322,695,485],{"emptyLinePlaceholder":484},[322,697,699,702,704,707,709],{"class":324,"line":698},21,[322,700,701],{"class":422},"  mountObserver",[322,703,540],{"class":328},[322,705,706],{"class":518},"disconnect",[322,708,522],{"class":332},[322,710,478],{"class":328},[322,712,714],{"class":324,"line":713},22,[322,715,485],{"emptyLinePlaceholder":484},[322,717,719,722,725,728,731,733,736,738],{"class":324,"line":718},23,[322,720,721],{"class":422},"  instance",[322,723,724],{"class":328}," =",[322,726,727],{"class":413}," await",[322,729,730],{"class":422}," scena",[322,732,540],{"class":328},[322,734,735],{"class":518},"mount",[322,737,546],{"class":332},[322,739,740],{"class":328},"{\n",[322,742,744,747,750],{"class":324,"line":743},24,[322,745,746],{"class":332},"    video",[322,748,749],{"class":328},":",[322,751,417],{"class":328},[322,753,755,758,760,762,765,767],{"class":324,"line":754},25,[322,756,757],{"class":332},"      src",[322,759,749],{"class":328},[322,761,469],{"class":328},[322,763,764],{"class":346},"/video.mp4",[322,766,475],{"class":328},[322,768,426],{"class":328},[322,770,772,775,777,781],{"class":324,"line":771},26,[322,773,774],{"class":332},"      loop",[322,776,749],{"class":328},[322,778,780],{"class":779},"sfNiH"," true",[322,782,426],{"class":328},[322,784,786,789,791,793],{"class":324,"line":785},27,[322,787,788],{"class":332},"      muted",[322,790,749],{"class":328},[322,792,780],{"class":779},[322,794,426],{"class":328},[322,796,798],{"class":324,"line":797},28,[322,799,800],{"class":328},"    },\n",[322,802,804,807,809,812,814,817],{"class":324,"line":803},29,[322,805,806],{"class":332},"    size",[322,808,749],{"class":328},[322,810,811],{"class":422}," ComponentSize",[322,813,540],{"class":328},[322,815,816],{"class":422},"MD",[322,818,426],{"class":328},[322,820,822,825,827,830,832,835],{"class":324,"line":821},30,[322,823,824],{"class":332},"    shape",[322,826,749],{"class":328},[322,828,829],{"class":422}," ComponentShape",[322,831,540],{"class":328},[322,833,834],{"class":422},"CIRCLE",[322,836,426],{"class":328},[322,838,840,843,845],{"class":324,"line":839},31,[322,841,842],{"class":332},"    container",[322,844,749],{"class":328},[322,846,417],{"class":328},[322,848,850,853,855,858,860,863],{"class":324,"line":849},32,[322,851,852],{"class":332},"      position",[322,854,749],{"class":328},[322,856,857],{"class":422}," ComponentPosition",[322,859,540],{"class":328},[322,861,862],{"class":422},"ABSOLUTE",[322,864,426],{"class":328},[322,866,868,871,873,876,878,881],{"class":324,"line":867},33,[322,869,870],{"class":332},"      placement",[322,872,749],{"class":328},[322,874,875],{"class":422}," ComponentPlacement",[322,877,540],{"class":328},[322,879,880],{"class":422},"MIDDLE_CENTER",[322,882,426],{"class":328},[322,884,886],{"class":324,"line":885},34,[322,887,800],{"class":328},[322,889,891,894,896,899],{"class":324,"line":890},35,[322,892,893],{"class":332},"    ctaButton",[322,895,749],{"class":328},[322,897,898],{"class":779}," false",[322,900,426],{"class":328},[322,902,904,907,909,911],{"class":324,"line":903},36,[322,905,906],{"class":332},"    closeButton",[322,908,749],{"class":328},[322,910,898],{"class":779},[322,912,426],{"class":328},[322,914,916,919,921],{"class":324,"line":915},37,[322,917,918],{"class":332},"    visibility",[322,920,749],{"class":328},[322,922,417],{"class":328},[322,924,926,929,931,933],{"class":324,"line":925},38,[322,927,928],{"class":332},"      isHidden",[322,930,749],{"class":328},[322,932,780],{"class":779},[322,934,426],{"class":328},[322,936,938,941,943,945],{"class":324,"line":937},39,[322,939,940],{"class":332},"      isAnimated",[322,942,749],{"class":328},[322,944,780],{"class":779},[322,946,426],{"class":328},[322,948,950,953,955,957],{"class":324,"line":949},40,[322,951,952],{"class":332},"      isShownOnReady",[322,954,749],{"class":328},[322,956,898],{"class":779},[322,958,426],{"class":328},[322,960,962],{"class":324,"line":961},41,[322,963,800],{"class":328},[322,965,967,970,973,975],{"class":324,"line":966},42,[322,968,969],{"class":328},"  },",[322,971,972],{"class":422}," target",[322,974,555],{"class":332},[322,976,478],{"class":328},[322,978,980],{"class":324,"line":979},43,[322,981,485],{"emptyLinePlaceholder":484},[322,983,985],{"class":324,"line":984},44,[322,986,988],{"class":987},"sHwdD","  // Show when fully visible, hide when less than 50% in view\n",[322,990,992,995,997,999,1001,1003,1006,1009,1011,1013],{"class":324,"line":991},45,[322,993,994],{"class":422},"  componentObserver",[322,996,724],{"class":328},[322,998,634],{"class":328},[322,1000,637],{"class":518},[322,1002,546],{"class":332},[322,1004,1005],{"class":328},"([",[322,1007,1008],{"class":648},"componentEntry",[322,1010,652],{"class":328},[322,1012,655],{"class":336},[322,1014,417],{"class":328},[322,1016,1018,1021,1023,1025,1027,1029,1031],{"class":324,"line":1017},46,[322,1019,1020],{"class":413},"      if",[322,1022,666],{"class":332},[322,1024,669],{"class":328},[322,1026,1008],{"class":422},[322,1028,685],{"class":332},[322,1030,688],{"class":413},[322,1032,478],{"class":328},[322,1034,1036],{"class":324,"line":1035},47,[322,1037,485],{"emptyLinePlaceholder":484},[322,1039,1041,1043,1045,1047,1049,1052,1055,1059,1061,1064,1066,1069,1071,1074,1076],{"class":324,"line":1040},48,[322,1042,1020],{"class":413},[322,1044,666],{"class":332},[322,1046,1008],{"class":422},[322,1048,540],{"class":328},[322,1050,1051],{"class":422},"intersectionRatio",[322,1053,1054],{"class":328}," >=",[322,1056,1058],{"class":1057},"sbssI"," 1",[322,1060,685],{"class":332},[322,1062,1063],{"class":422},"instance",[322,1065,540],{"class":328},[322,1067,1068],{"class":422},"visibility",[322,1070,540],{"class":328},[322,1072,1073],{"class":518},"show",[322,1075,522],{"class":332},[322,1077,478],{"class":328},[322,1079,1081,1084,1087,1089,1091,1093,1095,1098,1101,1103,1105,1107,1109,1111,1114,1116],{"class":324,"line":1080},49,[322,1082,1083],{"class":413},"      else",[322,1085,1086],{"class":413}," if",[322,1088,666],{"class":332},[322,1090,1008],{"class":422},[322,1092,540],{"class":328},[322,1094,1051],{"class":422},[322,1096,1097],{"class":328}," \u003C",[322,1099,1100],{"class":1057}," 0.5",[322,1102,685],{"class":332},[322,1104,1063],{"class":422},[322,1106,540],{"class":328},[322,1108,1068],{"class":422},[322,1110,540],{"class":328},[322,1112,1113],{"class":518},"hide",[322,1115,522],{"class":332},[322,1117,478],{"class":328},[322,1119,1121],{"class":324,"line":1120},50,[322,1122,800],{"class":328},[322,1124,1126,1129,1132,1134,1137,1140,1143,1145,1147,1149,1152],{"class":324,"line":1125},51,[322,1127,1128],{"class":328},"    {",[322,1130,1131],{"class":332}," threshold",[322,1133,749],{"class":328},[322,1135,1136],{"class":332}," [",[322,1138,1139],{"class":1057},"0",[322,1141,1142],{"class":328},",",[322,1144,1100],{"class":1057},[322,1146,1142],{"class":328},[322,1148,1058],{"class":1057},[322,1150,1151],{"class":332},"] ",[322,1153,1154],{"class":328},"}\n",[322,1156,1158,1161],{"class":324,"line":1157},52,[322,1159,1160],{"class":332},"  )",[322,1162,478],{"class":328},[322,1164,1166],{"class":324,"line":1165},53,[322,1167,485],{"emptyLinePlaceholder":484},[322,1169,1171,1173,1175,1178,1180,1182,1184],{"class":324,"line":1170},54,[322,1172,994],{"class":422},[322,1174,540],{"class":328},[322,1176,1177],{"class":518},"observe",[322,1179,546],{"class":332},[322,1181,291],{"class":422},[322,1183,555],{"class":332},[322,1185,478],{"class":328},[322,1187,1189,1192,1195,1197,1199,1202,1205,1207],{"class":324,"line":1188},55,[322,1190,1191],{"class":328},"},",[322,1193,1194],{"class":328}," {",[322,1196,1131],{"class":332},[322,1198,749],{"class":328},[322,1200,1201],{"class":1057}," 0.1",[322,1203,1204],{"class":328}," }",[322,1206,555],{"class":422},[322,1208,478],{"class":328},[322,1210,1212],{"class":324,"line":1211},56,[322,1213,485],{"emptyLinePlaceholder":484},[322,1215,1217,1220,1222,1224,1227],{"class":324,"line":1216},57,[322,1218,1219],{"class":422},"mountObserver",[322,1221,540],{"class":328},[322,1223,1177],{"class":518},[322,1225,1226],{"class":422},"(wrapper)",[322,1228,478],{"class":328},[263,1230,1232],{"id":1231},"cleanup","Cleanup",[244,1234,1235],{},"Disconnect observers and unmount the instance any time the container leaves the DOM:",[312,1237,1239],{"className":403,"code":1238,"filename":405,"language":406,"meta":318,"style":318},"function destroy() {\n  mountObserver.disconnect();\n  componentObserver?.disconnect();\n  \n  if (instance) {\n    scena.unmount(instance);\n  }\n}\n\n// Example: single-page app route change\nrouter.beforeEach(() => destroy());\n\n// Example: modal close\nmodal.on('close', () => destroy());\n",[251,1240,1241,1253,1265,1278,1283,1295,1313,1318,1322,1326,1331,1354,1358,1363],{"__ignoreMap":318},[322,1242,1243,1246,1249,1251],{"class":324,"line":325},[322,1244,1245],{"class":336},"function",[322,1247,1248],{"class":518}," destroy",[322,1250,522],{"class":328},[322,1252,417],{"class":328},[322,1254,1255,1257,1259,1261,1263],{"class":324,"line":367},[322,1256,701],{"class":422},[322,1258,540],{"class":328},[322,1260,706],{"class":518},[322,1262,522],{"class":332},[322,1264,478],{"class":328},[322,1266,1267,1269,1272,1274,1276],{"class":324,"line":393},[322,1268,994],{"class":422},[322,1270,1271],{"class":328},"?.",[322,1273,706],{"class":518},[322,1275,522],{"class":332},[322,1277,478],{"class":328},[322,1279,1280],{"class":324,"line":436},[322,1281,1282],{"class":332},"  \n",[322,1284,1285,1287,1289,1291,1293],{"class":324,"line":444},[322,1286,663],{"class":413},[322,1288,666],{"class":332},[322,1290,1063],{"class":422},[322,1292,685],{"class":332},[322,1294,740],{"class":328},[322,1296,1297,1300,1302,1305,1307,1309,1311],{"class":324,"line":452},[322,1298,1299],{"class":422},"    scena",[322,1301,540],{"class":328},[322,1303,1304],{"class":518},"unmount",[322,1306,546],{"class":332},[322,1308,1063],{"class":422},[322,1310,555],{"class":332},[322,1312,478],{"class":328},[322,1314,1315],{"class":324,"line":460},[322,1316,1317],{"class":328},"  }\n",[322,1319,1320],{"class":324,"line":481},[322,1321,1154],{"class":328},[322,1323,1324],{"class":324,"line":488},[322,1325,485],{"emptyLinePlaceholder":484},[322,1327,1328],{"class":324,"line":502},[322,1329,1330],{"class":987},"// Example: single-page app route change\n",[322,1332,1333,1336,1338,1341,1343,1345,1347,1349,1352],{"class":324,"line":507},[322,1334,1335],{"class":422},"router",[322,1337,540],{"class":328},[322,1339,1340],{"class":518},"beforeEach",[322,1342,546],{"class":422},[322,1344,522],{"class":328},[322,1346,655],{"class":336},[322,1348,1248],{"class":518},[322,1350,1351],{"class":422},"())",[322,1353,478],{"class":328},[322,1355,1356],{"class":324,"line":527},[322,1357,485],{"emptyLinePlaceholder":484},[322,1359,1360],{"class":324,"line":560},[322,1361,1362],{"class":987},"// Example: modal close\n",[322,1364,1365,1368,1370,1373,1375,1377,1380,1382,1384,1387,1389,1391,1393],{"class":324,"line":588},[322,1366,1367],{"class":422},"modal",[322,1369,540],{"class":328},[322,1371,1372],{"class":518},"on",[322,1374,546],{"class":422},[322,1376,475],{"class":328},[322,1378,1379],{"class":346},"close",[322,1381,475],{"class":328},[322,1383,1142],{"class":328},[322,1385,1386],{"class":328}," ()",[322,1388,655],{"class":336},[322,1390,1248],{"class":518},[322,1392,1351],{"class":422},[322,1394,478],{"class":328},[256,1396,1398],{"icon":1397,"to":99},"i-lucide-arrow-right",[244,1399,1400,1401,540],{},"To hide the widget after mount instead of deferring it — see ",[287,1402,98],{},[1404,1405,1406],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":318,"searchDepth":325,"depth":367,"links":1408},[1409,1410,1411],{"id":265,"depth":367,"text":266},{"id":251,"depth":367,"text":276},{"id":1231,"depth":367,"text":1232},"Mount the widget only when its container enters the viewport using IntersectionObserver.","md",null,{},{"title":202,"description":1412},"FULvDu-ROoNBHopcgX3wOoJRo4_kCF-S8TK9CDCbcB0",[1419,1421],{"title":198,"path":199,"stem":200,"description":1420,"children":-1},"Build your own UI on top of the instance API — progress bar, buttons, and overlays.",{"title":206,"path":207,"stem":208,"description":1422,"children":-1},"Show a contextual overlay at a specific point in the video using playback time events.",1777984324452]