[{"data":1,"prerenderedAt":1495},["ShallowReactive",2],{"navigation":3,"/configuration/overview":238,"/configuration/overview-surround":1490},[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":28,"body":240,"description":1485,"extension":647,"links":1486,"meta":1487,"navigation":358,"path":29,"seo":1488,"stem":30,"__hash__":1489},"docs/02.configuration/1.overview.md",{"type":241,"value":242,"toc":1479},"minimark",[243,260,267,584,589,594,800,804,810,815,978,981,985,988,1247,1250,1254,1265,1475],[244,245,246,247,251,252,255,256,259],"p",{},"Every aspect of the widget — from the video source to the appearance of each UI element — is controlled through a single configuration object, ",[248,249,250],"code",{},"ScenaConfig",", passed to ",[248,253,254],{},"scena.mount()",". The only required field is ",[248,257,258],{},"video.src","; everything else has a sensible default or can be disabled entirely.",[261,262,263],"scena-container",{},[264,265],"scena-component",{":config":266},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":{\"text\":\"Get in touch\"}}",[268,269,274],"pre",{"className":270,"code":271,"language":272,"meta":273,"style":273},"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\nconst instance = await scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.MD,\n  shape: ComponentShape.CIRCLE,\n  container: {\n    position: ComponentPosition.ABSOLUTE,\n    placement: ComponentPlacement.MIDDLE_CENTER,\n  },\n  ctaButton: { text: 'Get in touch' },\n});\n","ts","",[248,275,276,289,299,307,315,323,331,353,360,374,379,401,406,434,462,480,498,508,526,544,550,574],{"__ignoreMap":273},[277,278,281,285],"span",{"class":279,"line":280},"line",1,[277,282,284],{"class":283},"s7zQu","import",[277,286,288],{"class":287},"sMK4o"," {\n",[277,290,292,296],{"class":279,"line":291},2,[277,293,295],{"class":294},"sTEyZ","  useScena",[277,297,298],{"class":287},",\n",[277,300,302,305],{"class":279,"line":301},3,[277,303,304],{"class":294},"  ComponentSize",[277,306,298],{"class":287},[277,308,310,313],{"class":279,"line":309},4,[277,311,312],{"class":294},"  ComponentShape",[277,314,298],{"class":287},[277,316,318,321],{"class":279,"line":317},5,[277,319,320],{"class":294},"  ComponentPosition",[277,322,298],{"class":287},[277,324,326,329],{"class":279,"line":325},6,[277,327,328],{"class":294},"  ComponentPlacement",[277,330,298],{"class":287},[277,332,334,337,340,343,347,350],{"class":279,"line":333},7,[277,335,336],{"class":287},"}",[277,338,339],{"class":283}," from",[277,341,342],{"class":287}," '",[277,344,346],{"class":345},"sfazB","@retoo/scena",[277,348,349],{"class":287},"'",[277,351,352],{"class":287},";\n",[277,354,356],{"class":279,"line":355},8,[277,357,359],{"emptyLinePlaceholder":358},true,"\n",[277,361,363,365,367,370,372],{"class":279,"line":362},9,[277,364,284],{"class":283},[277,366,342],{"class":287},[277,368,369],{"class":345},"@retoo/scena/styles",[277,371,349],{"class":287},[277,373,352],{"class":287},[277,375,377],{"class":279,"line":376},10,[277,378,359],{"emptyLinePlaceholder":358},[277,380,382,386,389,392,396,399],{"class":279,"line":381},11,[277,383,385],{"class":384},"spNyl","const",[277,387,388],{"class":294}," scena ",[277,390,391],{"class":287},"=",[277,393,395],{"class":394},"s2Zo4"," useScena",[277,397,398],{"class":294},"()",[277,400,352],{"class":287},[277,402,404],{"class":279,"line":403},12,[277,405,359],{"emptyLinePlaceholder":358},[277,407,409,411,414,416,419,422,425,428,431],{"class":279,"line":408},13,[277,410,385],{"class":384},[277,412,413],{"class":294}," instance ",[277,415,391],{"class":287},[277,417,418],{"class":283}," await",[277,420,421],{"class":294}," scena",[277,423,424],{"class":287},".",[277,426,427],{"class":394},"mount",[277,429,430],{"class":294},"(",[277,432,433],{"class":287},"{\n",[277,435,437,441,444,447,450,452,454,457,459],{"class":279,"line":436},14,[277,438,440],{"class":439},"swJcz","  video",[277,442,443],{"class":287},":",[277,445,446],{"class":287}," {",[277,448,449],{"class":439}," src",[277,451,443],{"class":287},[277,453,342],{"class":287},[277,455,456],{"class":345},"/video.mp4",[277,458,349],{"class":287},[277,460,461],{"class":287}," },\n",[277,463,465,468,470,473,475,478],{"class":279,"line":464},15,[277,466,467],{"class":439},"  size",[277,469,443],{"class":287},[277,471,472],{"class":294}," ComponentSize",[277,474,424],{"class":287},[277,476,477],{"class":294},"MD",[277,479,298],{"class":287},[277,481,483,486,488,491,493,496],{"class":279,"line":482},16,[277,484,485],{"class":439},"  shape",[277,487,443],{"class":287},[277,489,490],{"class":294}," ComponentShape",[277,492,424],{"class":287},[277,494,495],{"class":294},"CIRCLE",[277,497,298],{"class":287},[277,499,501,504,506],{"class":279,"line":500},17,[277,502,503],{"class":439},"  container",[277,505,443],{"class":287},[277,507,288],{"class":287},[277,509,511,514,516,519,521,524],{"class":279,"line":510},18,[277,512,513],{"class":439},"    position",[277,515,443],{"class":287},[277,517,518],{"class":294}," ComponentPosition",[277,520,424],{"class":287},[277,522,523],{"class":294},"ABSOLUTE",[277,525,298],{"class":287},[277,527,529,532,534,537,539,542],{"class":279,"line":528},19,[277,530,531],{"class":439},"    placement",[277,533,443],{"class":287},[277,535,536],{"class":294}," ComponentPlacement",[277,538,424],{"class":287},[277,540,541],{"class":294},"MIDDLE_CENTER",[277,543,298],{"class":287},[277,545,547],{"class":279,"line":546},20,[277,548,549],{"class":287},"  },\n",[277,551,553,556,558,560,563,565,567,570,572],{"class":279,"line":552},21,[277,554,555],{"class":439},"  ctaButton",[277,557,443],{"class":287},[277,559,446],{"class":287},[277,561,562],{"class":439}," text",[277,564,443],{"class":287},[277,566,342],{"class":287},[277,568,569],{"class":345},"Get in touch",[277,571,349],{"class":287},[277,573,461],{"class":287},[277,575,577,579,582],{"class":279,"line":576},22,[277,578,336],{"class":287},[277,580,581],{"class":294},")",[277,583,352],{"class":287},[585,586,588],"h2",{"id":587},"config-structure","Config structure",[244,590,591,593],{},[248,592,250],{}," is a flat object that combines component overrides and feature configs:",[595,596,597,610],"table",{},[598,599,600],"thead",{},[601,602,603,607],"tr",{},[604,605,606],"th",{},"Key",[604,608,609],{},"Description",[611,612,613,628,657,679,696,706,720,732,744,756,768,780,790],"tbody",{},[601,614,615,621],{},[616,617,618],"td",{},[248,619,620],{},"video",[616,622,623,624],{},"Video source, poster, autoplay, loop, muted, volume. ",[625,626,627],"strong",{},"Required.",[601,629,630,635],{},[616,631,632],{},[248,633,634],{},"size",[616,636,637,638,641,642,641,645,641,648,641,651,641,654],{},"Widget size — ",[248,639,640],{},"xs",", ",[248,643,644],{},"sm",[248,646,647],{},"md",[248,649,650],{},"lg",[248,652,653],{},"xl",[248,655,656],{},"xxl",[601,658,659,664],{},[616,660,661],{},[248,662,663],{},"shape",[616,665,666,667,641,670,641,673,641,676],{},"Widget shape — ",[248,668,669],{},"circle",[248,671,672],{},"square",[248,674,675],{},"portrait",[248,677,678],{},"landscape",[601,680,681,686],{},[616,682,683],{},[248,684,685],{},"container",[616,687,688,689,641,692,695],{},"Positioning — ",[248,690,691],{},"position",[248,693,694],{},"placement",", custom classes/styles",[601,697,698,703],{},[616,699,700],{},[248,701,702],{},"videoContainer",[616,704,705],{},"Video container customization",[601,707,708,713],{},[616,709,710],{},[248,711,712],{},"videoLoader",[616,714,715,716,719],{},"Loading indicator. Pass ",[248,717,718],{},"false"," to disable.",[601,721,722,727],{},[616,723,724],{},[248,725,726],{},"videoProgress",[616,728,729,730,719],{},"Progress bar. Pass ",[248,731,718],{},[601,733,734,739],{},[616,735,736],{},[248,737,738],{},"videoControls",[616,740,741,742,719],{},"Play/pause controls overlay. Pass ",[248,743,718],{},[601,745,746,751],{},[616,747,748],{},[248,749,750],{},"videoVolume",[616,752,753,754,719],{},"Volume control. Pass ",[248,755,718],{},[601,757,758,763],{},[616,759,760],{},[248,761,762],{},"closeButton",[616,764,765,766,719],{},"Close button. Pass ",[248,767,718],{},[601,769,770,775],{},[616,771,772],{},[248,773,774],{},"ctaButton",[616,776,777,778,719],{},"Call-to-action button. Pass ",[248,779,718],{},[601,781,782,787],{},[616,783,784],{},[248,785,786],{},"visibility",[616,788,789],{},"Initial visibility state and animation",[601,791,792,797],{},[616,793,794],{},[248,795,796],{},"preview",[616,798,799],{},"Preview mode overrides",[585,801,803],{"id":802},"disabling-components","Disabling components",[244,805,806,807,809],{},"Pass ",[248,808,718],{}," to any component key to remove it from the widget entirely:",[261,811,812],{},[264,813],{":config":814},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false,\"videoControls\":false,\"videoProgress\":false,\"videoVolume\":false}",[268,816,818],{"className":270,"code":817,"language":272,"meta":273,"style":273},"import { useScena } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  ctaButton: false,\n  closeButton: false,\n  videoControls: false,\n  videoProgress: false,\n  videoVolume: false,\n});\n",[248,819,820,841,845,857,861,875,879,894,914,926,937,948,959,970],{"__ignoreMap":273},[277,821,822,824,826,828,831,833,835,837,839],{"class":279,"line":280},[277,823,284],{"class":283},[277,825,446],{"class":287},[277,827,395],{"class":294},[277,829,830],{"class":287}," }",[277,832,339],{"class":283},[277,834,342],{"class":287},[277,836,346],{"class":345},[277,838,349],{"class":287},[277,840,352],{"class":287},[277,842,843],{"class":279,"line":291},[277,844,359],{"emptyLinePlaceholder":358},[277,846,847,849,851,853,855],{"class":279,"line":301},[277,848,284],{"class":283},[277,850,342],{"class":287},[277,852,369],{"class":345},[277,854,349],{"class":287},[277,856,352],{"class":287},[277,858,859],{"class":279,"line":309},[277,860,359],{"emptyLinePlaceholder":358},[277,862,863,865,867,869,871,873],{"class":279,"line":317},[277,864,385],{"class":384},[277,866,388],{"class":294},[277,868,391],{"class":287},[277,870,395],{"class":394},[277,872,398],{"class":294},[277,874,352],{"class":287},[277,876,877],{"class":279,"line":325},[277,878,359],{"emptyLinePlaceholder":358},[277,880,881,884,886,888,890,892],{"class":279,"line":333},[277,882,883],{"class":283},"await",[277,885,421],{"class":294},[277,887,424],{"class":287},[277,889,427],{"class":394},[277,891,430],{"class":294},[277,893,433],{"class":287},[277,895,896,898,900,902,904,906,908,910,912],{"class":279,"line":355},[277,897,440],{"class":439},[277,899,443],{"class":287},[277,901,446],{"class":287},[277,903,449],{"class":439},[277,905,443],{"class":287},[277,907,342],{"class":287},[277,909,456],{"class":345},[277,911,349],{"class":287},[277,913,461],{"class":287},[277,915,916,918,920,924],{"class":279,"line":362},[277,917,555],{"class":439},[277,919,443],{"class":287},[277,921,923],{"class":922},"sfNiH"," false",[277,925,298],{"class":287},[277,927,928,931,933,935],{"class":279,"line":376},[277,929,930],{"class":439},"  closeButton",[277,932,443],{"class":287},[277,934,923],{"class":922},[277,936,298],{"class":287},[277,938,939,942,944,946],{"class":279,"line":381},[277,940,941],{"class":439},"  videoControls",[277,943,443],{"class":287},[277,945,923],{"class":922},[277,947,298],{"class":287},[277,949,950,953,955,957],{"class":279,"line":403},[277,951,952],{"class":439},"  videoProgress",[277,954,443],{"class":287},[277,956,923],{"class":922},[277,958,298],{"class":287},[277,960,961,964,966,968],{"class":279,"line":408},[277,962,963],{"class":439},"  videoVolume",[277,965,443],{"class":287},[277,967,923],{"class":922},[277,969,298],{"class":287},[277,971,972,974,976],{"class":279,"line":436},[277,973,336],{"class":287},[277,975,581],{"class":294},[277,977,352],{"class":287},[244,979,980],{},"This is different from hiding — a disabled component is never rendered in the DOM.",[585,982,984],{"id":983},"runtime-updates","Runtime updates",[244,986,987],{},"After mount, modify any config property through the instance:",[268,989,991],{"className":270,"code":990,"language":272,"meta":273,"style":273},"import { useScena, ComponentSize } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nconst instance = await scena.mount({\n  video: { src: '/video.mp4' },\n});\n\n// Deep merge — only the specified fields are updated\ninstance.config.mergeConfig({\n  size: ComponentSize.LG,\n  ctaButton: { text: 'Buy now' },\n});\n\n// Full replacement\ninstance.config.setConfig({\n  video: { src: '/new-video.mp4' },\n  size: ComponentSize.SM,\n});\n",[248,992,993,1018,1022,1034,1038,1052,1056,1076,1096,1104,1108,1114,1133,1148,1169,1177,1181,1186,1203,1224,1239],{"__ignoreMap":273},[277,994,995,997,999,1001,1004,1006,1008,1010,1012,1014,1016],{"class":279,"line":280},[277,996,284],{"class":283},[277,998,446],{"class":287},[277,1000,395],{"class":294},[277,1002,1003],{"class":287},",",[277,1005,472],{"class":294},[277,1007,830],{"class":287},[277,1009,339],{"class":283},[277,1011,342],{"class":287},[277,1013,346],{"class":345},[277,1015,349],{"class":287},[277,1017,352],{"class":287},[277,1019,1020],{"class":279,"line":291},[277,1021,359],{"emptyLinePlaceholder":358},[277,1023,1024,1026,1028,1030,1032],{"class":279,"line":301},[277,1025,284],{"class":283},[277,1027,342],{"class":287},[277,1029,369],{"class":345},[277,1031,349],{"class":287},[277,1033,352],{"class":287},[277,1035,1036],{"class":279,"line":309},[277,1037,359],{"emptyLinePlaceholder":358},[277,1039,1040,1042,1044,1046,1048,1050],{"class":279,"line":317},[277,1041,385],{"class":384},[277,1043,388],{"class":294},[277,1045,391],{"class":287},[277,1047,395],{"class":394},[277,1049,398],{"class":294},[277,1051,352],{"class":287},[277,1053,1054],{"class":279,"line":325},[277,1055,359],{"emptyLinePlaceholder":358},[277,1057,1058,1060,1062,1064,1066,1068,1070,1072,1074],{"class":279,"line":333},[277,1059,385],{"class":384},[277,1061,413],{"class":294},[277,1063,391],{"class":287},[277,1065,418],{"class":283},[277,1067,421],{"class":294},[277,1069,424],{"class":287},[277,1071,427],{"class":394},[277,1073,430],{"class":294},[277,1075,433],{"class":287},[277,1077,1078,1080,1082,1084,1086,1088,1090,1092,1094],{"class":279,"line":355},[277,1079,440],{"class":439},[277,1081,443],{"class":287},[277,1083,446],{"class":287},[277,1085,449],{"class":439},[277,1087,443],{"class":287},[277,1089,342],{"class":287},[277,1091,456],{"class":345},[277,1093,349],{"class":287},[277,1095,461],{"class":287},[277,1097,1098,1100,1102],{"class":279,"line":362},[277,1099,336],{"class":287},[277,1101,581],{"class":294},[277,1103,352],{"class":287},[277,1105,1106],{"class":279,"line":376},[277,1107,359],{"emptyLinePlaceholder":358},[277,1109,1110],{"class":279,"line":381},[277,1111,1113],{"class":1112},"sHwdD","// Deep merge — only the specified fields are updated\n",[277,1115,1116,1119,1121,1124,1126,1129,1131],{"class":279,"line":403},[277,1117,1118],{"class":294},"instance",[277,1120,424],{"class":287},[277,1122,1123],{"class":294},"config",[277,1125,424],{"class":287},[277,1127,1128],{"class":394},"mergeConfig",[277,1130,430],{"class":294},[277,1132,433],{"class":287},[277,1134,1135,1137,1139,1141,1143,1146],{"class":279,"line":408},[277,1136,467],{"class":439},[277,1138,443],{"class":287},[277,1140,472],{"class":294},[277,1142,424],{"class":287},[277,1144,1145],{"class":294},"LG",[277,1147,298],{"class":287},[277,1149,1150,1152,1154,1156,1158,1160,1162,1165,1167],{"class":279,"line":436},[277,1151,555],{"class":439},[277,1153,443],{"class":287},[277,1155,446],{"class":287},[277,1157,562],{"class":439},[277,1159,443],{"class":287},[277,1161,342],{"class":287},[277,1163,1164],{"class":345},"Buy now",[277,1166,349],{"class":287},[277,1168,461],{"class":287},[277,1170,1171,1173,1175],{"class":279,"line":464},[277,1172,336],{"class":287},[277,1174,581],{"class":294},[277,1176,352],{"class":287},[277,1178,1179],{"class":279,"line":482},[277,1180,359],{"emptyLinePlaceholder":358},[277,1182,1183],{"class":279,"line":500},[277,1184,1185],{"class":1112},"// Full replacement\n",[277,1187,1188,1190,1192,1194,1196,1199,1201],{"class":279,"line":510},[277,1189,1118],{"class":294},[277,1191,424],{"class":287},[277,1193,1123],{"class":294},[277,1195,424],{"class":287},[277,1197,1198],{"class":394},"setConfig",[277,1200,430],{"class":294},[277,1202,433],{"class":287},[277,1204,1205,1207,1209,1211,1213,1215,1217,1220,1222],{"class":279,"line":528},[277,1206,440],{"class":439},[277,1208,443],{"class":287},[277,1210,446],{"class":287},[277,1212,449],{"class":439},[277,1214,443],{"class":287},[277,1216,342],{"class":287},[277,1218,1219],{"class":345},"/new-video.mp4",[277,1221,349],{"class":287},[277,1223,461],{"class":287},[277,1225,1226,1228,1230,1232,1234,1237],{"class":279,"line":546},[277,1227,467],{"class":439},[277,1229,443],{"class":287},[277,1231,472],{"class":294},[277,1233,424],{"class":287},[277,1235,1236],{"class":294},"SM",[277,1238,298],{"class":287},[277,1240,1241,1243,1245],{"class":279,"line":552},[277,1242,336],{"class":287},[277,1244,581],{"class":294},[277,1246,352],{"class":287},[244,1248,1249],{},"Both methods trigger a reactive update — the widget re-renders immediately without remounting.",[585,1251,1253],{"id":1252},"customization","Customization",[244,1255,1256,1257,1260,1261,1264],{},"Most components accept ",[248,1258,1259],{},"customClasses"," and ",[248,1262,1263],{},"customStyles"," for visual overrides without modifying the source. Classes are merged with the defaults; styles are applied as inline CSS.",[268,1266,1268],{"className":270,"code":1267,"language":272,"meta":273,"style":273},"import { useScena } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  ctaButton: {\n    text: 'Contact us',\n    customClasses: { \n      button: 'bg-red-500 text-white'\n    },\n    customStyles: { \n      root: {\n        marginTop: '8px'\n      } \n    },\n  },\n});\n",[248,1269,1270,1290,1294,1306,1310,1324,1328,1342,1362,1370,1386,1398,1413,1418,1429,1438,1452,1459,1463,1467],{"__ignoreMap":273},[277,1271,1272,1274,1276,1278,1280,1282,1284,1286,1288],{"class":279,"line":280},[277,1273,284],{"class":283},[277,1275,446],{"class":287},[277,1277,395],{"class":294},[277,1279,830],{"class":287},[277,1281,339],{"class":283},[277,1283,342],{"class":287},[277,1285,346],{"class":345},[277,1287,349],{"class":287},[277,1289,352],{"class":287},[277,1291,1292],{"class":279,"line":291},[277,1293,359],{"emptyLinePlaceholder":358},[277,1295,1296,1298,1300,1302,1304],{"class":279,"line":301},[277,1297,284],{"class":283},[277,1299,342],{"class":287},[277,1301,369],{"class":345},[277,1303,349],{"class":287},[277,1305,352],{"class":287},[277,1307,1308],{"class":279,"line":309},[277,1309,359],{"emptyLinePlaceholder":358},[277,1311,1312,1314,1316,1318,1320,1322],{"class":279,"line":317},[277,1313,385],{"class":384},[277,1315,388],{"class":294},[277,1317,391],{"class":287},[277,1319,395],{"class":394},[277,1321,398],{"class":294},[277,1323,352],{"class":287},[277,1325,1326],{"class":279,"line":325},[277,1327,359],{"emptyLinePlaceholder":358},[277,1329,1330,1332,1334,1336,1338,1340],{"class":279,"line":333},[277,1331,883],{"class":283},[277,1333,421],{"class":294},[277,1335,424],{"class":287},[277,1337,427],{"class":394},[277,1339,430],{"class":294},[277,1341,433],{"class":287},[277,1343,1344,1346,1348,1350,1352,1354,1356,1358,1360],{"class":279,"line":355},[277,1345,440],{"class":439},[277,1347,443],{"class":287},[277,1349,446],{"class":287},[277,1351,449],{"class":439},[277,1353,443],{"class":287},[277,1355,342],{"class":287},[277,1357,456],{"class":345},[277,1359,349],{"class":287},[277,1361,461],{"class":287},[277,1363,1364,1366,1368],{"class":279,"line":362},[277,1365,555],{"class":439},[277,1367,443],{"class":287},[277,1369,288],{"class":287},[277,1371,1372,1375,1377,1379,1382,1384],{"class":279,"line":376},[277,1373,1374],{"class":439},"    text",[277,1376,443],{"class":287},[277,1378,342],{"class":287},[277,1380,1381],{"class":345},"Contact us",[277,1383,349],{"class":287},[277,1385,298],{"class":287},[277,1387,1388,1391,1393,1395],{"class":279,"line":381},[277,1389,1390],{"class":439},"    customClasses",[277,1392,443],{"class":287},[277,1394,446],{"class":287},[277,1396,1397],{"class":294}," \n",[277,1399,1400,1403,1405,1407,1410],{"class":279,"line":403},[277,1401,1402],{"class":439},"      button",[277,1404,443],{"class":287},[277,1406,342],{"class":287},[277,1408,1409],{"class":345},"bg-red-500 text-white",[277,1411,1412],{"class":287},"'\n",[277,1414,1415],{"class":279,"line":408},[277,1416,1417],{"class":287},"    },\n",[277,1419,1420,1423,1425,1427],{"class":279,"line":436},[277,1421,1422],{"class":439},"    customStyles",[277,1424,443],{"class":287},[277,1426,446],{"class":287},[277,1428,1397],{"class":294},[277,1430,1431,1434,1436],{"class":279,"line":464},[277,1432,1433],{"class":439},"      root",[277,1435,443],{"class":287},[277,1437,288],{"class":287},[277,1439,1440,1443,1445,1447,1450],{"class":279,"line":482},[277,1441,1442],{"class":439},"        marginTop",[277,1444,443],{"class":287},[277,1446,342],{"class":287},[277,1448,1449],{"class":345},"8px",[277,1451,1412],{"class":287},[277,1453,1454,1457],{"class":279,"line":500},[277,1455,1456],{"class":287},"      }",[277,1458,1397],{"class":294},[277,1460,1461],{"class":279,"line":510},[277,1462,1417],{"class":287},[277,1464,1465],{"class":279,"line":528},[277,1466,549],{"class":287},[277,1468,1469,1471,1473],{"class":279,"line":546},[277,1470,336],{"class":287},[277,1472,581],{"class":294},[277,1474,352],{"class":287},[1476,1477,1478],"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 .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 .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}",{"title":273,"searchDepth":280,"depth":291,"links":1480},[1481,1482,1483,1484],{"id":587,"depth":291,"text":588},{"id":802,"depth":291,"text":803},{"id":983,"depth":291,"text":984},{"id":1252,"depth":291,"text":1253},"Structure of ScenaConfig and the principle of disabling components with false.",null,{},{"title":28,"description":1485},"3my7NRbI1MO0iLKDrgujVQcztdNZS8Uil3t6zD3AEpE",[1491,1493],{"title":19,"path":20,"stem":21,"description":1492,"children":-1},"Mount your first video widget in under 5 minutes.",{"title":32,"path":33,"stem":34,"description":1494,"children":-1},"Configure widget dimensions with ComponentSize — xs, sm, md, lg, xl, xxl.",1777984317791]