[{"data":1,"prerenderedAt":1321},["ShallowReactive",2],{"navigation":3,"\u002Fguide\u002Fadvanced":53,"\u002Fguide\u002Fadvanced-surround":1316},[4,12,30],{"title":5,"path":6,"stem":7,"children":8,"icon":10,"titleTemplate":11},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9],{"title":5,"path":6,"stem":7,"icon":10},"i-lucide-rocket","%s · Get Started with TresJS",{"title":13,"path":14,"stem":15,"children":16},"Guide","\u002Fguide","2.guide",[17,20,25],{"title":13,"path":14,"stem":18,"icon":19},"2.guide\u002Findex","i-lucide-book-open",{"title":21,"path":22,"stem":23,"icon":24},"Controls","\u002Fguide\u002Fbasics","2.guide\u002F1.basics","i-lucide-sliders-horizontal",{"title":26,"path":27,"stem":28,"icon":29},"Panels and state","\u002Fguide\u002Fadvanced","2.guide\u002F2.advanced","i-lucide-panels-top-left",{"title":31,"path":32,"stem":33,"children":34},"Api","\u002Fapi","3.api",[35,39,44,49],{"title":36,"path":32,"stem":37,"icon":38},"API Reference","3.api\u002Findex","i-lucide-code-xml",{"title":40,"path":41,"stem":42,"icon":43},"\u003CTresLeches \u002F>","\u002Fapi\u002Ftres-leches","3.api\u002F1.tres-leches","i-lucide-box",{"title":45,"path":46,"stem":47,"icon":48},"useControls","\u002Fapi\u002Fuse-controls","3.api\u002F2.use-controls","i-lucide-braces",{"title":50,"path":51,"stem":52,"icon":48},"useControlsProvider","\u002Fapi\u002Fuse-controls-provider","3.api\u002F3.use-controls-provider",{"id":54,"title":26,"body":55,"description":1309,"extension":1310,"links":1311,"meta":1312,"navigation":1313,"path":27,"seo":1314,"stem":28,"__hash__":1315},"docs\u002F2.guide\u002F2.advanced.md",{"type":56,"value":57,"toc":1300},"minimark",[58,63,91,94,151,154,157,161,164,270,276,361,364,368,371,452,459,462,466,469,640,654,657,661,664,677,684,873,876,955,964,967,970,974,992,1195,1198,1201,1205,1218,1244,1251,1267,1270,1296],[59,60,62],"h2",{"id":61},"dark-mode","Dark mode",[64,65,66,67,71,72,75,76,79,80,83,84,87,88,90],"p",{},"Each panel follows the nearest ",[68,69,70],"code",{},"dark"," or ",[68,73,74],{},"light"," class on its ancestors, and falls back to ",[68,77,78],{},"\u003Chtml>",". Most color mode tools (for example Nuxt's ",[68,81,82],{},"@nuxtjs\u002Fcolor-mode"," or VueUse's ",[68,85,86],{},"useDark",") set that class on ",[68,89,78],{},", so the panel follows your app with no setup.",[64,92,93],{},"To give one panel its own theme, wrap it in an element with the class:",[95,96,101],"pre",{"className":97,"code":98,"language":99,"meta":100,"style":100},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"dark\">\n  \u003CTresLeches \u002F>\n\u003C\u002Fdiv>\n","vue","",[68,102,103,134,141],{"__ignoreMap":100},[104,105,108,112,116,120,123,126,129,131],"span",{"class":106,"line":107},"line",1,[104,109,111],{"class":110},"sMK4o","\u003C",[104,113,115],{"class":114},"swJcz","div",[104,117,119],{"class":118},"spNyl"," class",[104,121,122],{"class":110},"=",[104,124,125],{"class":110},"\"",[104,127,70],{"class":128},"sfazB",[104,130,125],{"class":110},[104,132,133],{"class":110},">\n",[104,135,137],{"class":106,"line":136},2,[104,138,140],{"class":139},"sTEyZ","  \u003CTresLeches \u002F>\n",[104,142,144,147,149],{"class":106,"line":143},3,[104,145,146],{"class":110},"\u003C\u002F",[104,148,115],{"class":114},[104,150,133],{"class":110},[64,152,153],{},"Drag the handle to compare both themes:",[155,156],"demo-theme-compare",{},[59,158,160],{"id":159},"existing-refs","Existing refs",[64,162,163],{},"Pass a ref directly to keep the panel and the rest of your application on the same source of truth.",[95,165,169],{"className":166,"code":167,"language":168,"meta":100,"style":100},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const intensity = ref(2)\n\nuseControls({ intensity })\n\nwatchEffect(() => {\n  console.log(intensity.value)\n})\n","ts",[68,170,171,195,201,217,222,239,263],{"__ignoreMap":100},[104,172,173,176,179,181,185,188,192],{"class":106,"line":107},[104,174,175],{"class":118},"const",[104,177,178],{"class":139}," intensity ",[104,180,122],{"class":110},[104,182,184],{"class":183},"s2Zo4"," ref",[104,186,187],{"class":139},"(",[104,189,191],{"class":190},"sbssI","2",[104,193,194],{"class":139},")\n",[104,196,197],{"class":106,"line":136},[104,198,200],{"emptyLinePlaceholder":199},true,"\n",[104,202,203,205,207,210,212,215],{"class":106,"line":143},[104,204,45],{"class":183},[104,206,187],{"class":139},[104,208,209],{"class":110},"{",[104,211,178],{"class":139},[104,213,214],{"class":110},"}",[104,216,194],{"class":139},[104,218,220],{"class":106,"line":219},4,[104,221,200],{"emptyLinePlaceholder":199},[104,223,225,228,230,233,236],{"class":106,"line":224},5,[104,226,227],{"class":183},"watchEffect",[104,229,187],{"class":139},[104,231,232],{"class":110},"()",[104,234,235],{"class":118}," =>",[104,237,238],{"class":110}," {\n",[104,240,242,245,248,251,253,256,258,261],{"class":106,"line":241},6,[104,243,244],{"class":139},"  console",[104,246,247],{"class":110},".",[104,249,250],{"class":183},"log",[104,252,187],{"class":114},[104,254,255],{"class":139},"intensity",[104,257,247],{"class":110},[104,259,260],{"class":139},"value",[104,262,194],{"class":114},[104,264,266,268],{"class":106,"line":265},7,[104,267,214],{"class":110},[104,269,194],{"class":139},[64,271,272,273,275],{},"You can also use a ref as the ",[68,274,260],{}," in a configuration object:",[95,277,279],{"className":166,"code":278,"language":168,"meta":100,"style":100},"useControls({\n  intensity: {\n    value: intensity,\n    min: 0,\n    max: 10,\n    step: 0.1,\n  },\n})\n",[68,280,281,290,300,313,325,337,349,354],{"__ignoreMap":100},[104,282,283,285,287],{"class":106,"line":107},[104,284,45],{"class":183},[104,286,187],{"class":139},[104,288,289],{"class":110},"{\n",[104,291,292,295,298],{"class":106,"line":136},[104,293,294],{"class":114},"  intensity",[104,296,297],{"class":110},":",[104,299,238],{"class":110},[104,301,302,305,307,310],{"class":106,"line":143},[104,303,304],{"class":114},"    value",[104,306,297],{"class":110},[104,308,309],{"class":139}," intensity",[104,311,312],{"class":110},",\n",[104,314,315,318,320,323],{"class":106,"line":219},[104,316,317],{"class":114},"    min",[104,319,297],{"class":110},[104,321,322],{"class":190}," 0",[104,324,312],{"class":110},[104,326,327,330,332,335],{"class":106,"line":224},[104,328,329],{"class":114},"    max",[104,331,297],{"class":110},[104,333,334],{"class":190}," 10",[104,336,312],{"class":110},[104,338,339,342,344,347],{"class":106,"line":241},[104,340,341],{"class":114},"    step",[104,343,297],{"class":110},[104,345,346],{"class":190}," 0.1",[104,348,312],{"class":110},[104,350,351],{"class":106,"line":265},[104,352,353],{"class":110},"  },\n",[104,355,357,359],{"class":106,"line":356},8,[104,358,214],{"class":110},[104,360,194],{"class":139},[362,363],"demo-refs",{},[59,365,367],{"id":366},"reactive-objects","Reactive objects",[64,369,370],{},"Passing a reactive object connects each top-level property to a control.",[95,372,374],{"className":166,"code":373,"language":168,"meta":100,"style":100},"const settings = reactive({\n  enabled: true,\n  exposure: 1,\n  background: '#111827',\n})\n\nuseControls(settings)\n",[68,375,376,392,405,417,435,441,445],{"__ignoreMap":100},[104,377,378,380,383,385,388,390],{"class":106,"line":107},[104,379,175],{"class":118},[104,381,382],{"class":139}," settings ",[104,384,122],{"class":110},[104,386,387],{"class":183}," reactive",[104,389,187],{"class":139},[104,391,289],{"class":110},[104,393,394,397,399,403],{"class":106,"line":136},[104,395,396],{"class":114},"  enabled",[104,398,297],{"class":110},[104,400,402],{"class":401},"sfNiH"," true",[104,404,312],{"class":110},[104,406,407,410,412,415],{"class":106,"line":143},[104,408,409],{"class":114},"  exposure",[104,411,297],{"class":110},[104,413,414],{"class":190}," 1",[104,416,312],{"class":110},[104,418,419,422,424,427,430,433],{"class":106,"line":219},[104,420,421],{"class":114},"  background",[104,423,297],{"class":110},[104,425,426],{"class":110}," '",[104,428,429],{"class":128},"#111827",[104,431,432],{"class":110},"'",[104,434,312],{"class":110},[104,436,437,439],{"class":106,"line":224},[104,438,214],{"class":110},[104,440,194],{"class":139},[104,442,443],{"class":106,"line":241},[104,444,200],{"emptyLinePlaceholder":199},[104,446,447,449],{"class":106,"line":265},[104,448,45],{"class":183},[104,450,451],{"class":139},"(settings)\n",[64,453,454,455,458],{},"Edits from the panel update ",[68,456,457],{},"settings"," directly.",[460,461],"demo-reactive",{},[59,463,465],{"id":464},"folders","Folders",[64,467,468],{},"Use the folder overload to put related controls in a collapsible folder.",[95,470,472],{"className":166,"code":471,"language":168,"meta":100,"style":100},"const camera = useControls('Camera', {\n  fov: { value: 45, min: 10, max: 120, step: 1 },\n  near: { value: 0.1, min: 0.01, max: 10, step: 0.01 },\n  far: { value: 1000, min: 10, max: 5000, step: 10 },\n})\n",[68,473,474,500,549,591,634],{"__ignoreMap":100},[104,475,476,478,481,483,486,488,490,493,495,498],{"class":106,"line":107},[104,477,175],{"class":118},[104,479,480],{"class":139}," camera ",[104,482,122],{"class":110},[104,484,485],{"class":183}," useControls",[104,487,187],{"class":139},[104,489,432],{"class":110},[104,491,492],{"class":128},"Camera",[104,494,432],{"class":110},[104,496,497],{"class":110},",",[104,499,238],{"class":110},[104,501,502,505,507,510,513,515,518,520,523,525,527,529,532,534,537,539,542,544,546],{"class":106,"line":136},[104,503,504],{"class":114},"  fov",[104,506,297],{"class":110},[104,508,509],{"class":110}," {",[104,511,512],{"class":114}," value",[104,514,297],{"class":110},[104,516,517],{"class":190}," 45",[104,519,497],{"class":110},[104,521,522],{"class":114}," min",[104,524,297],{"class":110},[104,526,334],{"class":190},[104,528,497],{"class":110},[104,530,531],{"class":114}," max",[104,533,297],{"class":110},[104,535,536],{"class":190}," 120",[104,538,497],{"class":110},[104,540,541],{"class":114}," step",[104,543,297],{"class":110},[104,545,414],{"class":190},[104,547,548],{"class":110}," },\n",[104,550,551,554,556,558,560,562,564,566,568,570,573,575,577,579,581,583,585,587,589],{"class":106,"line":143},[104,552,553],{"class":114},"  near",[104,555,297],{"class":110},[104,557,509],{"class":110},[104,559,512],{"class":114},[104,561,297],{"class":110},[104,563,346],{"class":190},[104,565,497],{"class":110},[104,567,522],{"class":114},[104,569,297],{"class":110},[104,571,572],{"class":190}," 0.01",[104,574,497],{"class":110},[104,576,531],{"class":114},[104,578,297],{"class":110},[104,580,334],{"class":190},[104,582,497],{"class":110},[104,584,541],{"class":114},[104,586,297],{"class":110},[104,588,572],{"class":190},[104,590,548],{"class":110},[104,592,593,596,598,600,602,604,607,609,611,613,615,617,619,621,624,626,628,630,632],{"class":106,"line":219},[104,594,595],{"class":114},"  far",[104,597,297],{"class":110},[104,599,509],{"class":110},[104,601,512],{"class":114},[104,603,297],{"class":110},[104,605,606],{"class":190}," 1000",[104,608,497],{"class":110},[104,610,522],{"class":114},[104,612,297],{"class":110},[104,614,334],{"class":190},[104,616,497],{"class":110},[104,618,531],{"class":114},[104,620,297],{"class":110},[104,622,623],{"class":190}," 5000",[104,625,497],{"class":110},[104,627,541],{"class":114},[104,629,297],{"class":110},[104,631,334],{"class":190},[104,633,548],{"class":110},[104,635,636,638],{"class":106,"line":224},[104,637,214],{"class":110},[104,639,194],{"class":139},[64,641,642,643,646,647,650,651,247],{},"Folder names are included in the returned keys to keep them unique. In this example, the refs are ",[68,644,645],{},"CameraFov",", ",[68,648,649],{},"CameraNear",", and ",[68,652,653],{},"CameraFar",[655,656],"demo-folders",{},[59,658,660],{"id":659},"panel-actions","Panel actions",[64,662,663],{},"An expanded panel has search and copy actions in its top-left corner. Search for a control key, its displayed label, or a folder name. A matching control keeps its parent folder visible and temporarily opens it; a matching folder keeps all of its controls visible.",[64,665,666,667,671,672,676],{},"Click the search button to expand the ",[668,669,670],"strong",{},"Search stuff"," input. Click it again, or press ",[673,674,675],"kbd",{},"Escape",", to close the input and clear the query.",[64,678,679,680,683],{},"The copy button's ",[668,681,682],{},"Copy values for AI"," tooltip describes its purpose. It writes every current panel value to the clipboard as formatted JSON, even when a search is active. Controls outside a folder are written at the root, named folders become nested objects, and each property uses its stable control key rather than its displayed label. Button and graph controls are omitted because they do not hold editable values.",[95,685,687],{"className":166,"code":686,"language":168,"meta":100,"style":100},"const fov = ref(45)\n\nuseControls({\n  exposure: { value: 1, label: 'Exposure' },\n}, { uuid: 'panel-actions' })\n\nuseControls('Camera', {\n  fov: { value: fov, label: 'Field of view' },\n  enabled: { value: true, label: 'Enabled' },\n}, { uuid: 'panel-actions' })\n",[68,688,689,707,711,719,749,772,776,792,822,852],{"__ignoreMap":100},[104,690,691,693,696,698,700,702,705],{"class":106,"line":107},[104,692,175],{"class":118},[104,694,695],{"class":139}," fov ",[104,697,122],{"class":110},[104,699,184],{"class":183},[104,701,187],{"class":139},[104,703,704],{"class":190},"45",[104,706,194],{"class":139},[104,708,709],{"class":106,"line":136},[104,710,200],{"emptyLinePlaceholder":199},[104,712,713,715,717],{"class":106,"line":143},[104,714,45],{"class":183},[104,716,187],{"class":139},[104,718,289],{"class":110},[104,720,721,723,725,727,729,731,733,735,738,740,742,745,747],{"class":106,"line":219},[104,722,409],{"class":114},[104,724,297],{"class":110},[104,726,509],{"class":110},[104,728,512],{"class":114},[104,730,297],{"class":110},[104,732,414],{"class":190},[104,734,497],{"class":110},[104,736,737],{"class":114}," label",[104,739,297],{"class":110},[104,741,426],{"class":110},[104,743,744],{"class":128},"Exposure",[104,746,432],{"class":110},[104,748,548],{"class":110},[104,750,751,754,756,759,761,763,765,767,770],{"class":106,"line":224},[104,752,753],{"class":110},"},",[104,755,509],{"class":110},[104,757,758],{"class":114}," uuid",[104,760,297],{"class":110},[104,762,426],{"class":110},[104,764,659],{"class":128},[104,766,432],{"class":110},[104,768,769],{"class":110}," }",[104,771,194],{"class":139},[104,773,774],{"class":106,"line":241},[104,775,200],{"emptyLinePlaceholder":199},[104,777,778,780,782,784,786,788,790],{"class":106,"line":265},[104,779,45],{"class":183},[104,781,187],{"class":139},[104,783,432],{"class":110},[104,785,492],{"class":128},[104,787,432],{"class":110},[104,789,497],{"class":110},[104,791,238],{"class":110},[104,793,794,796,798,800,802,804,807,809,811,813,815,818,820],{"class":106,"line":356},[104,795,504],{"class":114},[104,797,297],{"class":110},[104,799,509],{"class":110},[104,801,512],{"class":114},[104,803,297],{"class":110},[104,805,806],{"class":139}," fov",[104,808,497],{"class":110},[104,810,737],{"class":114},[104,812,297],{"class":110},[104,814,426],{"class":110},[104,816,817],{"class":128},"Field of view",[104,819,432],{"class":110},[104,821,548],{"class":110},[104,823,825,827,829,831,833,835,837,839,841,843,845,848,850],{"class":106,"line":824},9,[104,826,396],{"class":114},[104,828,297],{"class":110},[104,830,509],{"class":110},[104,832,512],{"class":114},[104,834,297],{"class":110},[104,836,402],{"class":401},[104,838,497],{"class":110},[104,840,737],{"class":114},[104,842,297],{"class":110},[104,844,426],{"class":110},[104,846,847],{"class":128},"Enabled",[104,849,432],{"class":110},[104,851,548],{"class":110},[104,853,855,857,859,861,863,865,867,869,871],{"class":106,"line":854},10,[104,856,753],{"class":110},[104,858,509],{"class":110},[104,860,758],{"class":114},[104,862,297],{"class":110},[104,864,426],{"class":110},[104,866,659],{"class":128},[104,868,432],{"class":110},[104,870,769],{"class":110},[104,872,194],{"class":139},[64,874,875],{},"For these controls, the copied JSON has this shape:",[95,877,881],{"className":878,"code":879,"language":880,"meta":100,"style":100},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"exposure\": 1,\n  \"Camera\": {\n    \"CameraFov\": 45,\n    \"CameraEnabled\": true\n  }\n}\n","json",[68,882,883,887,903,915,931,945,950],{"__ignoreMap":100},[104,884,885],{"class":106,"line":107},[104,886,289],{"class":110},[104,888,889,892,895,897,899,901],{"class":106,"line":136},[104,890,891],{"class":110},"  \"",[104,893,894],{"class":118},"exposure",[104,896,125],{"class":110},[104,898,297],{"class":110},[104,900,414],{"class":190},[104,902,312],{"class":110},[104,904,905,907,909,911,913],{"class":106,"line":143},[104,906,891],{"class":110},[104,908,492],{"class":118},[104,910,125],{"class":110},[104,912,297],{"class":110},[104,914,238],{"class":110},[104,916,917,920,923,925,927,929],{"class":106,"line":219},[104,918,919],{"class":110},"    \"",[104,921,645],{"class":922},"sBMFI",[104,924,125],{"class":110},[104,926,297],{"class":110},[104,928,517],{"class":190},[104,930,312],{"class":110},[104,932,933,935,938,940,942],{"class":106,"line":224},[104,934,919],{"class":110},[104,936,937],{"class":922},"CameraEnabled",[104,939,125],{"class":110},[104,941,297],{"class":110},[104,943,944],{"class":110}," true\n",[104,946,947],{"class":106,"line":241},[104,948,949],{"class":110},"  }\n",[104,951,952],{"class":106,"line":265},[104,953,954],{"class":110},"}\n",[64,956,957,958,71,961,963],{},"Try searching for ",[68,959,960],{},"camera",[68,962,894],{},", then use the copy action:",[965,966],"demo-panel-actions",{},[64,968,969],{},"The actions appear only while the panel is expanded. Their staggered entrance follows the panel expansion and respects the operating system's reduced-motion preference.",[59,971,973],{"id":972},"independent-panels","Independent panels",[64,975,976,977,980,981,983,984,987,988,991],{},"The default panel id is ",[68,978,979],{},"default",". Pass the same panel id to ",[68,982,45],{}," and ",[68,985,986],{},"TresLeches"," (through the ",[68,989,990],{},"uuid"," option and prop) when you need more than one panel.",[95,993,995],{"className":97,"code":994,"language":99,"meta":100,"style":100},"\u003Cscript setup lang=\"ts\">\nimport { TresLeches, useControls } from '@tresjs\u002Fleches'\n\nuseControls({ exposure: 1 }, { uuid: 'lighting' })\nuseControls('Camera', { fov: 45 }, { uuid: 'camera' })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresLeches uuid=\"lighting\" \u002F>\n  \u003CTresLeches uuid=\"camera\" \u002F>\n\u003C\u002Ftemplate>\n",[68,996,997,1020,1048,1052,1087,1127,1135,1139,1148,1168,1186],{"__ignoreMap":100},[104,998,999,1001,1004,1007,1010,1012,1014,1016,1018],{"class":106,"line":107},[104,1000,111],{"class":110},[104,1002,1003],{"class":114},"script",[104,1005,1006],{"class":118}," setup",[104,1008,1009],{"class":118}," lang",[104,1011,122],{"class":110},[104,1013,125],{"class":110},[104,1015,168],{"class":128},[104,1017,125],{"class":110},[104,1019,133],{"class":110},[104,1021,1022,1026,1028,1031,1033,1035,1037,1040,1042,1045],{"class":106,"line":136},[104,1023,1025],{"class":1024},"s7zQu","import",[104,1027,509],{"class":110},[104,1029,1030],{"class":139}," TresLeches",[104,1032,497],{"class":110},[104,1034,485],{"class":139},[104,1036,769],{"class":110},[104,1038,1039],{"class":1024}," from",[104,1041,426],{"class":110},[104,1043,1044],{"class":128},"@tresjs\u002Fleches",[104,1046,1047],{"class":110},"'\n",[104,1049,1050],{"class":106,"line":143},[104,1051,200],{"emptyLinePlaceholder":199},[104,1053,1054,1056,1058,1060,1063,1065,1067,1070,1072,1074,1076,1078,1081,1083,1085],{"class":106,"line":219},[104,1055,45],{"class":183},[104,1057,187],{"class":139},[104,1059,209],{"class":110},[104,1061,1062],{"class":114}," exposure",[104,1064,297],{"class":110},[104,1066,414],{"class":190},[104,1068,1069],{"class":110}," },",[104,1071,509],{"class":110},[104,1073,758],{"class":114},[104,1075,297],{"class":110},[104,1077,426],{"class":110},[104,1079,1080],{"class":128},"lighting",[104,1082,432],{"class":110},[104,1084,769],{"class":110},[104,1086,194],{"class":139},[104,1088,1089,1091,1093,1095,1097,1099,1101,1103,1105,1107,1109,1111,1113,1115,1117,1119,1121,1123,1125],{"class":106,"line":224},[104,1090,45],{"class":183},[104,1092,187],{"class":139},[104,1094,432],{"class":110},[104,1096,492],{"class":128},[104,1098,432],{"class":110},[104,1100,497],{"class":110},[104,1102,509],{"class":110},[104,1104,806],{"class":114},[104,1106,297],{"class":110},[104,1108,517],{"class":190},[104,1110,1069],{"class":110},[104,1112,509],{"class":110},[104,1114,758],{"class":114},[104,1116,297],{"class":110},[104,1118,426],{"class":110},[104,1120,960],{"class":128},[104,1122,432],{"class":110},[104,1124,769],{"class":110},[104,1126,194],{"class":139},[104,1128,1129,1131,1133],{"class":106,"line":241},[104,1130,146],{"class":110},[104,1132,1003],{"class":114},[104,1134,133],{"class":110},[104,1136,1137],{"class":106,"line":265},[104,1138,200],{"emptyLinePlaceholder":199},[104,1140,1141,1143,1146],{"class":106,"line":356},[104,1142,111],{"class":110},[104,1144,1145],{"class":114},"template",[104,1147,133],{"class":110},[104,1149,1150,1153,1155,1157,1159,1161,1163,1165],{"class":106,"line":824},[104,1151,1152],{"class":110},"  \u003C",[104,1154,986],{"class":114},[104,1156,758],{"class":118},[104,1158,122],{"class":110},[104,1160,125],{"class":110},[104,1162,1080],{"class":128},[104,1164,125],{"class":110},[104,1166,1167],{"class":110}," \u002F>\n",[104,1169,1170,1172,1174,1176,1178,1180,1182,1184],{"class":106,"line":854},[104,1171,1152],{"class":110},[104,1173,986],{"class":114},[104,1175,758],{"class":118},[104,1177,122],{"class":110},[104,1179,125],{"class":110},[104,1181,960],{"class":128},[104,1183,125],{"class":110},[104,1185,1167],{"class":110},[104,1187,1189,1191,1193],{"class":106,"line":1188},11,[104,1190,146],{"class":110},[104,1192,1145],{"class":114},[104,1194,133],{"class":110},[64,1196,1197],{},"A panel disposes the controls registered to its panel id when it unmounts.",[1199,1200],"demo-panels",{},[59,1202,1204],{"id":1203},"panel-presentation","Panel presentation",[64,1206,1207,1209,1210,1213,1214,1217],{},[68,1208,40],{}," floats by default. Set ",[68,1211,1212],{},"float"," to ",[68,1215,1216],{},"false"," to place it in normal document flow.",[95,1219,1221],{"className":97,"code":1220,"language":99,"meta":100,"style":100},"\u003CTresLeches :float=\"false\" \u002F>\n",[68,1222,1223],{"__ignoreMap":100},[104,1224,1225,1227,1229,1232,1234,1236,1238,1240,1242],{"class":106,"line":107},[104,1226,111],{"class":110},[104,1228,986],{"class":114},[104,1230,1231],{"class":110}," :",[104,1233,1212],{"class":118},[104,1235,122],{"class":110},[104,1237,125],{"class":110},[104,1239,1216],{"class":401},[104,1241,125],{"class":110},[104,1243,1167],{"class":110},[64,1245,1246,1247,1250],{},"The ",[68,1248,1249],{},"collapsed"," prop sets the initial collapsed state of a floating panel:",[95,1252,1254],{"className":97,"code":1253,"language":99,"meta":100,"style":100},"\u003CTresLeches collapsed \u002F>\n",[68,1255,1256],{"__ignoreMap":100},[104,1257,1258,1260,1262,1265],{"class":106,"line":107},[104,1259,111],{"class":110},[104,1261,986],{"class":114},[104,1263,1264],{"class":118}," collapsed",[104,1266,1167],{"class":110},[64,1268,1269],{},"You can place custom content after generated controls with the default slot:",[95,1271,1273],{"className":97,"code":1272,"language":99,"meta":100,"style":100},"\u003CTresLeches>\n  \u003Csmall>Changes are applied immediately.\u003C\u002Fsmall>\n\u003C\u002FTresLeches>\n",[68,1274,1275,1283,1288],{"__ignoreMap":100},[104,1276,1277,1279,1281],{"class":106,"line":107},[104,1278,111],{"class":110},[104,1280,986],{"class":114},[104,1282,133],{"class":110},[104,1284,1285],{"class":106,"line":136},[104,1286,1287],{"class":139},"  \u003Csmall>Changes are applied immediately.\u003C\u002Fsmall>\n",[104,1289,1290,1292,1294],{"class":106,"line":143},[104,1291,146],{"class":110},[104,1293,986],{"class":114},[104,1295,133],{"class":110},[1297,1298,1299],"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 pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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}",{"title":100,"searchDepth":107,"depth":136,"links":1301},[1302,1303,1304,1305,1306,1307,1308],{"id":61,"depth":136,"text":62},{"id":159,"depth":136,"text":160},{"id":366,"depth":136,"text":367},{"id":464,"depth":136,"text":465},{"id":659,"depth":136,"text":660},{"id":972,"depth":136,"text":973},{"id":1203,"depth":136,"text":1204},"Connect Vue state, organize controls into folders, and render several panels.","md",null,{},{"icon":29},{"title":26,"description":1309},"qWezfQgYfhB4dbwfNUfQubgo3FEf1mDPWh2HZw_jMI8",[1317,1319],{"title":21,"path":22,"stem":23,"description":1318,"icon":24,"children":-1},"Create inferred and configured controls with useControls.",{"title":36,"path":32,"stem":37,"description":1320,"icon":38,"children":-1},"Component props and composable signatures exported by @tresjs\u002Fleches.",1790759286729]