[{"data":1,"prerenderedAt":1568},["ShallowReactive",2],{"navigation":3,"\u002Fguide\u002Fbasics":53,"\u002Fguide\u002Fbasics-surround":1563},[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":21,"body":55,"description":1557,"extension":1227,"links":1558,"meta":1559,"navigation":1560,"path":22,"seo":1561,"stem":23,"__hash__":1562},"docs\u002F2.guide\u002F1.basics.md",{"type":56,"value":57,"toc":1544},"minimark",[58,65,70,196,279,282,286,293,296,441,444,447,453,496,499,502,512,623,626,629,642,743,746,749,752,796,799,802,810,854,857,860,865,1003,1006,1009,1012,1029,1128,1131,1134,1140,1270,1297,1300,1303,1306,1528,1537,1540],[59,60,61,64],"p",{},[62,63,45],"code",{}," accepts an object and returns an object of Vue refs with the same keys. Simple values get sensible controls automatically; configuration objects let you set constraints and presentation.",[66,67,69],"h2",{"id":68},"inferred-controls","Inferred controls",[71,72,77],"pre",{"className":73,"code":74,"language":75,"meta":76,"style":76},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const controls = useControls({\n  enabled: true, \u002F\u002F boolean\n  count: 12, \u002F\u002F number\n  title: 'Tres Leches', \u002F\u002F text\n  accent: '#f59e0b', \u002F\u002F color\n})\n","ts","",[62,78,79,106,127,144,167,187],{"__ignoreMap":76},[80,81,84,88,92,96,100,103],"span",{"class":82,"line":83},"line",1,[80,85,87],{"class":86},"spNyl","const",[80,89,91],{"class":90},"sTEyZ"," controls ",[80,93,95],{"class":94},"sMK4o","=",[80,97,99],{"class":98},"s2Zo4"," useControls",[80,101,102],{"class":90},"(",[80,104,105],{"class":94},"{\n",[80,107,109,113,116,120,123],{"class":82,"line":108},2,[80,110,112],{"class":111},"swJcz","  enabled",[80,114,115],{"class":94},":",[80,117,119],{"class":118},"sfNiH"," true",[80,121,122],{"class":94},",",[80,124,126],{"class":125},"sHwdD"," \u002F\u002F boolean\n",[80,128,130,133,135,139,141],{"class":82,"line":129},3,[80,131,132],{"class":111},"  count",[80,134,115],{"class":94},[80,136,138],{"class":137},"sbssI"," 12",[80,140,122],{"class":94},[80,142,143],{"class":125}," \u002F\u002F number\n",[80,145,147,150,152,155,159,162,164],{"class":82,"line":146},4,[80,148,149],{"class":111},"  title",[80,151,115],{"class":94},[80,153,154],{"class":94}," '",[80,156,158],{"class":157},"sfazB","Tres Leches",[80,160,161],{"class":94},"'",[80,163,122],{"class":94},[80,165,166],{"class":125}," \u002F\u002F text\n",[80,168,170,173,175,177,180,182,184],{"class":82,"line":169},5,[80,171,172],{"class":111},"  accent",[80,174,115],{"class":94},[80,176,154],{"class":94},[80,178,179],{"class":157},"#f59e0b",[80,181,161],{"class":94},[80,183,122],{"class":94},[80,185,186],{"class":125}," \u002F\u002F color\n",[80,188,190,193],{"class":82,"line":189},6,[80,191,192],{"class":94},"}",[80,194,195],{"class":90},")\n",[197,198,199,212],"table",{},[200,201,202],"thead",{},[203,204,205,209],"tr",{},[206,207,208],"th",{},"Input value",[206,210,211],{},"Control",[213,214,215,226,236,250,261],"tbody",{},[203,216,217,223],{},[218,219,220],"td",{},[62,221,222],{},"boolean",[218,224,225],{},"Checkbox",[203,227,228,233],{},[218,229,230],{},[62,231,232],{},"number",[218,234,235],{},"Numeric input",[203,237,238,247],{},[218,239,240,241,243,244],{},"Hexadecimal string such as ",[62,242,179],{}," or ",[62,245,246],{},"0xf59e0b",[218,248,249],{},"Color input",[203,251,252,258],{},[218,253,254,255],{},"Other ",[62,256,257],{},"string",[218,259,260],{},"Text input",[203,262,263,276],{},[218,264,265,268,269,268,272,275],{},[62,266,267],{},"Vector2",", ",[62,270,271],{},"Vector3",[62,273,274],{},"Euler",", or a configured array",[218,277,278],{},"Vector inputs",[280,281],"demo-inferred",{},[66,283,285],{"id":284},"configuration-objects","Configuration objects",[59,287,288,289,292],{},"Wrap a value in ",[62,290,291],{},"{ value, ...options }"," when you need more control.",[59,294,295],{},"Common options are:",[197,297,298,308],{},[200,299,300],{},[203,301,302,305],{},[206,303,304],{},"Option",[206,306,307],{},"Purpose",[213,309,310,320,357,367,377,391,407,417,431],{},[203,311,312,317],{},[218,313,314],{},[62,315,316],{},"value",[218,318,319],{},"Initial value or an existing ref. Required for a configuration object.",[203,321,322,327],{},[218,323,324],{},[62,325,326],{},"type",[218,328,329,330,268,332,268,334,268,337,268,340,268,343,268,346,268,349,352,353,356],{},"Explicit control type: ",[62,331,222],{},[62,333,232],{},[62,335,336],{},"range",[62,338,339],{},"text",[62,341,342],{},"color",[62,344,345],{},"select",[62,347,348],{},"button",[62,350,351],{},"vector",", or ",[62,354,355],{},"graph",".",[203,358,359,364],{},[218,360,361],{},[62,362,363],{},"label",[218,365,366],{},"Human-readable label shown in the panel.",[203,368,369,374],{},[218,370,371],{},[62,372,373],{},"icon",[218,375,376],{},"Icon class shown with the control label.",[203,378,379,384],{},[218,380,381],{},[62,382,383],{},"visible",[218,385,386,387,390],{},"Set to ",[62,388,389],{},"false"," to keep the control out of the panel.",[203,392,393,404],{},[218,394,395,268,398,268,401],{},[62,396,397],{},"min",[62,399,400],{},"max",[62,402,403],{},"step",[218,405,406],{},"Bounds and increment for numeric, range, and vector controls.",[203,408,409,414],{},[218,410,411],{},[62,412,413],{},"format",[218,415,416],{},"Function that formats a numeric value for display.",[203,418,419,424],{},[218,420,421],{},[62,422,423],{},"options",[218,425,426,427,430],{},"Select choices as primitive values or ",[62,428,429],{},"{ text, value }"," objects.",[203,432,433,438],{},[218,434,435],{},[62,436,437],{},"onUpdate",[218,439,440],{},"Callback used by graph controls.",[59,442,443],{},"The sections below cover each control type.",[66,445,446],{"id":222},"Boolean",[59,448,449,450,452],{},"A ",[62,451,222],{}," value renders a checkbox.",[71,454,456],{"className":73,"code":455,"language":75,"meta":76,"style":76},"const { enabled } = useControls({\n  enabled: true,\n})\n",[62,457,458,479,490],{"__ignoreMap":76},[80,459,460,462,465,468,470,473,475,477],{"class":82,"line":83},[80,461,87],{"class":86},[80,463,464],{"class":94}," {",[80,466,467],{"class":90}," enabled ",[80,469,192],{"class":94},[80,471,472],{"class":94}," =",[80,474,99],{"class":98},[80,476,102],{"class":90},[80,478,105],{"class":94},[80,480,481,483,485,487],{"class":82,"line":108},[80,482,112],{"class":111},[80,484,115],{"class":94},[80,486,119],{"class":118},[80,488,489],{"class":94},",\n",[80,491,492,494],{"class":82,"line":129},[80,493,192],{"class":94},[80,495,195],{"class":90},[497,498],"demo-boolean",{},[66,500,501],{"id":232},"Number",[59,503,504,505,507,508,511],{},"A plain ",[62,506,232],{}," renders a numeric input with drag support. Combining explicit bounds with ",[62,509,510],{},"type: 'number'"," keeps the numeric input instead of switching to a range.",[71,513,515],{"className":73,"code":514,"language":75,"meta":76,"style":76},"const { stars } = useControls({\n  stars: {\n    value: 4,\n    type: 'number',\n    min: 0,\n    max: 10,\n    step: 1,\n  },\n})\n",[62,516,517,536,546,558,573,585,597,610,616],{"__ignoreMap":76},[80,518,519,521,523,526,528,530,532,534],{"class":82,"line":83},[80,520,87],{"class":86},[80,522,464],{"class":94},[80,524,525],{"class":90}," stars ",[80,527,192],{"class":94},[80,529,472],{"class":94},[80,531,99],{"class":98},[80,533,102],{"class":90},[80,535,105],{"class":94},[80,537,538,541,543],{"class":82,"line":108},[80,539,540],{"class":111},"  stars",[80,542,115],{"class":94},[80,544,545],{"class":94}," {\n",[80,547,548,551,553,556],{"class":82,"line":129},[80,549,550],{"class":111},"    value",[80,552,115],{"class":94},[80,554,555],{"class":137}," 4",[80,557,489],{"class":94},[80,559,560,563,565,567,569,571],{"class":82,"line":146},[80,561,562],{"class":111},"    type",[80,564,115],{"class":94},[80,566,154],{"class":94},[80,568,232],{"class":157},[80,570,161],{"class":94},[80,572,489],{"class":94},[80,574,575,578,580,583],{"class":82,"line":169},[80,576,577],{"class":111},"    min",[80,579,115],{"class":94},[80,581,582],{"class":137}," 0",[80,584,489],{"class":94},[80,586,587,590,592,595],{"class":82,"line":189},[80,588,589],{"class":111},"    max",[80,591,115],{"class":94},[80,593,594],{"class":137}," 10",[80,596,489],{"class":94},[80,598,600,603,605,608],{"class":82,"line":599},7,[80,601,602],{"class":111},"    step",[80,604,115],{"class":94},[80,606,607],{"class":137}," 1",[80,609,489],{"class":94},[80,611,613],{"class":82,"line":612},8,[80,614,615],{"class":94},"  },\n",[80,617,619,621],{"class":82,"line":618},9,[80,620,192],{"class":94},[80,622,195],{"class":90},[624,625],"demo-number",{},[66,627,628],{"id":336},"Range",[59,630,631,632,268,634,352,636,638,639,641],{},"Providing ",[62,633,397],{},[62,635,400],{},[62,637,403],{}," on a numeric configuration gives it the ",[62,640,336],{}," control type.",[71,643,645],{"className":73,"code":644,"language":75,"meta":76,"style":76},"const { speed } = useControls({\n  speed: {\n    value: 1,\n    min: 0,\n    max: 5,\n    step: 0.1,\n    label: 'Animation speed',\n  },\n})\n",[62,646,647,666,675,685,695,706,717,733,737],{"__ignoreMap":76},[80,648,649,651,653,656,658,660,662,664],{"class":82,"line":83},[80,650,87],{"class":86},[80,652,464],{"class":94},[80,654,655],{"class":90}," speed ",[80,657,192],{"class":94},[80,659,472],{"class":94},[80,661,99],{"class":98},[80,663,102],{"class":90},[80,665,105],{"class":94},[80,667,668,671,673],{"class":82,"line":108},[80,669,670],{"class":111},"  speed",[80,672,115],{"class":94},[80,674,545],{"class":94},[80,676,677,679,681,683],{"class":82,"line":129},[80,678,550],{"class":111},[80,680,115],{"class":94},[80,682,607],{"class":137},[80,684,489],{"class":94},[80,686,687,689,691,693],{"class":82,"line":146},[80,688,577],{"class":111},[80,690,115],{"class":94},[80,692,582],{"class":137},[80,694,489],{"class":94},[80,696,697,699,701,704],{"class":82,"line":169},[80,698,589],{"class":111},[80,700,115],{"class":94},[80,702,703],{"class":137}," 5",[80,705,489],{"class":94},[80,707,708,710,712,715],{"class":82,"line":189},[80,709,602],{"class":111},[80,711,115],{"class":94},[80,713,714],{"class":137}," 0.1",[80,716,489],{"class":94},[80,718,719,722,724,726,729,731],{"class":82,"line":599},[80,720,721],{"class":111},"    label",[80,723,115],{"class":94},[80,725,154],{"class":94},[80,727,728],{"class":157},"Animation speed",[80,730,161],{"class":94},[80,732,489],{"class":94},[80,734,735],{"class":82,"line":612},[80,736,615],{"class":94},[80,738,739,741],{"class":82,"line":618},[80,740,192],{"class":94},[80,742,195],{"class":90},[744,745],"demo-range",{},[66,747,748],{"id":339},"Text",[59,750,751],{},"Any string that is not a hexadecimal color renders a text input.",[71,753,755],{"className":73,"code":754,"language":75,"meta":76,"style":76},"const { title } = useControls({\n  title: 'Tres Leches',\n})\n",[62,756,757,776,790],{"__ignoreMap":76},[80,758,759,761,763,766,768,770,772,774],{"class":82,"line":83},[80,760,87],{"class":86},[80,762,464],{"class":94},[80,764,765],{"class":90}," title ",[80,767,192],{"class":94},[80,769,472],{"class":94},[80,771,99],{"class":98},[80,773,102],{"class":90},[80,775,105],{"class":94},[80,777,778,780,782,784,786,788],{"class":82,"line":108},[80,779,149],{"class":111},[80,781,115],{"class":94},[80,783,154],{"class":94},[80,785,158],{"class":157},[80,787,161],{"class":94},[80,789,489],{"class":94},[80,791,792,794],{"class":82,"line":129},[80,793,192],{"class":94},[80,795,195],{"class":90},[797,798],"demo-text",{},[66,800,801],{"id":342},"Color",[59,803,804,805,243,807,809],{},"Hexadecimal strings such as ",[62,806,179],{},[62,808,246],{}," render a color picker. Pick a color below and watch the demo background follow it.",[71,811,813],{"className":73,"code":812,"language":75,"meta":76,"style":76},"const { accent } = useControls({\n  accent: '#f59e0b',\n})\n",[62,814,815,834,848],{"__ignoreMap":76},[80,816,817,819,821,824,826,828,830,832],{"class":82,"line":83},[80,818,87],{"class":86},[80,820,464],{"class":94},[80,822,823],{"class":90}," accent ",[80,825,192],{"class":94},[80,827,472],{"class":94},[80,829,99],{"class":98},[80,831,102],{"class":90},[80,833,105],{"class":94},[80,835,836,838,840,842,844,846],{"class":82,"line":108},[80,837,172],{"class":111},[80,839,115],{"class":94},[80,841,154],{"class":94},[80,843,179],{"class":157},[80,845,161],{"class":94},[80,847,489],{"class":94},[80,849,850,852],{"class":82,"line":129},[80,851,192],{"class":94},[80,853,195],{"class":90},[855,856],"demo-color",{},[66,858,859],{"id":345},"Select",[59,861,631,862,864],{},[62,863,423],{}," renders a select. Options can be primitives or labeled objects.",[71,866,868],{"className":73,"code":867,"language":75,"meta":76,"style":76},"const { renderer } = useControls({\n  renderer: {\n    value: 'webgl',\n    options: [\n      { text: 'WebGL', value: 'webgl' },\n      { text: 'WebGPU', value: 'webgpu' },\n    ],\n  },\n})\n",[62,869,870,889,898,913,923,956,986,993,997],{"__ignoreMap":76},[80,871,872,874,876,879,881,883,885,887],{"class":82,"line":83},[80,873,87],{"class":86},[80,875,464],{"class":94},[80,877,878],{"class":90}," renderer ",[80,880,192],{"class":94},[80,882,472],{"class":94},[80,884,99],{"class":98},[80,886,102],{"class":90},[80,888,105],{"class":94},[80,890,891,894,896],{"class":82,"line":108},[80,892,893],{"class":111},"  renderer",[80,895,115],{"class":94},[80,897,545],{"class":94},[80,899,900,902,904,906,909,911],{"class":82,"line":129},[80,901,550],{"class":111},[80,903,115],{"class":94},[80,905,154],{"class":94},[80,907,908],{"class":157},"webgl",[80,910,161],{"class":94},[80,912,489],{"class":94},[80,914,915,918,920],{"class":82,"line":146},[80,916,917],{"class":111},"    options",[80,919,115],{"class":94},[80,921,922],{"class":90}," [\n",[80,924,925,928,931,933,935,938,940,942,945,947,949,951,953],{"class":82,"line":169},[80,926,927],{"class":94},"      {",[80,929,930],{"class":111}," text",[80,932,115],{"class":94},[80,934,154],{"class":94},[80,936,937],{"class":157},"WebGL",[80,939,161],{"class":94},[80,941,122],{"class":94},[80,943,944],{"class":111}," value",[80,946,115],{"class":94},[80,948,154],{"class":94},[80,950,908],{"class":157},[80,952,161],{"class":94},[80,954,955],{"class":94}," },\n",[80,957,958,960,962,964,966,969,971,973,975,977,979,982,984],{"class":82,"line":189},[80,959,927],{"class":94},[80,961,930],{"class":111},[80,963,115],{"class":94},[80,965,154],{"class":94},[80,967,968],{"class":157},"WebGPU",[80,970,161],{"class":94},[80,972,122],{"class":94},[80,974,944],{"class":111},[80,976,115],{"class":94},[80,978,154],{"class":94},[80,980,981],{"class":157},"webgpu",[80,983,161],{"class":94},[80,985,955],{"class":94},[80,987,988,991],{"class":82,"line":599},[80,989,990],{"class":90},"    ]",[80,992,489],{"class":94},[80,994,995],{"class":82,"line":612},[80,996,615],{"class":94},[80,998,999,1001],{"class":82,"line":618},[80,1000,192],{"class":94},[80,1002,195],{"class":90},[59,1004,1005],{},"The returned ref preserves the selected option's original string or number value.",[1007,1008],"demo-select",{},[66,1010,1011],{"id":351},"Vector",[59,1013,1014,268,1016,268,1018,1020,1021,1024,1025,1028],{},[62,1015,267],{},[62,1017,271],{},[62,1019,274],{},", and arrays of numbers render a vector control with one number drag per axis. Drag the ",[62,1022,1023],{},"x"," and ",[62,1026,1027],{},"y"," inputs below to move the point.",[71,1030,1032],{"className":73,"code":1031,"language":75,"meta":76,"style":76},"const { point } = useControls({\n  point: {\n    value: [1, 1],\n    min: -2,\n    max: 2,\n    step: 0.1,\n  },\n})\n",[62,1033,1034,1053,1062,1083,1097,1108,1118,1122],{"__ignoreMap":76},[80,1035,1036,1038,1040,1043,1045,1047,1049,1051],{"class":82,"line":83},[80,1037,87],{"class":86},[80,1039,464],{"class":94},[80,1041,1042],{"class":90}," point ",[80,1044,192],{"class":94},[80,1046,472],{"class":94},[80,1048,99],{"class":98},[80,1050,102],{"class":90},[80,1052,105],{"class":94},[80,1054,1055,1058,1060],{"class":82,"line":108},[80,1056,1057],{"class":111},"  point",[80,1059,115],{"class":94},[80,1061,545],{"class":94},[80,1063,1064,1066,1068,1071,1074,1076,1078,1081],{"class":82,"line":129},[80,1065,550],{"class":111},[80,1067,115],{"class":94},[80,1069,1070],{"class":90}," [",[80,1072,1073],{"class":137},"1",[80,1075,122],{"class":94},[80,1077,607],{"class":137},[80,1079,1080],{"class":90},"]",[80,1082,489],{"class":94},[80,1084,1085,1087,1089,1092,1095],{"class":82,"line":146},[80,1086,577],{"class":111},[80,1088,115],{"class":94},[80,1090,1091],{"class":94}," -",[80,1093,1094],{"class":137},"2",[80,1096,489],{"class":94},[80,1098,1099,1101,1103,1106],{"class":82,"line":169},[80,1100,589],{"class":111},[80,1102,115],{"class":94},[80,1104,1105],{"class":137}," 2",[80,1107,489],{"class":94},[80,1109,1110,1112,1114,1116],{"class":82,"line":189},[80,1111,602],{"class":111},[80,1113,115],{"class":94},[80,1115,714],{"class":137},[80,1117,489],{"class":94},[80,1119,1120],{"class":82,"line":599},[80,1121,615],{"class":94},[80,1123,1124,1126],{"class":82,"line":612},[80,1125,192],{"class":94},[80,1127,195],{"class":90},[1129,1130],"demo-vector",{},[66,1132,1133],{"id":348},"Button",[59,1135,1136,1137,1139],{},"Button settings live in ",[62,1138,316],{},"; set the control type explicitly.",[71,1141,1143],{"className":73,"code":1142,"language":75,"meta":76,"style":76},"useControls({\n  reset: {\n    type: 'button',\n    value: {\n      label: 'Reset scene',\n      variant: 'primary',\n      size: 'md',\n      onClick: () => resetScene(),\n    },\n  },\n})\n",[62,1144,1145,1153,1162,1176,1184,1200,1216,1232,1253,1258,1263],{"__ignoreMap":76},[80,1146,1147,1149,1151],{"class":82,"line":83},[80,1148,45],{"class":98},[80,1150,102],{"class":90},[80,1152,105],{"class":94},[80,1154,1155,1158,1160],{"class":82,"line":108},[80,1156,1157],{"class":111},"  reset",[80,1159,115],{"class":94},[80,1161,545],{"class":94},[80,1163,1164,1166,1168,1170,1172,1174],{"class":82,"line":129},[80,1165,562],{"class":111},[80,1167,115],{"class":94},[80,1169,154],{"class":94},[80,1171,348],{"class":157},[80,1173,161],{"class":94},[80,1175,489],{"class":94},[80,1177,1178,1180,1182],{"class":82,"line":146},[80,1179,550],{"class":111},[80,1181,115],{"class":94},[80,1183,545],{"class":94},[80,1185,1186,1189,1191,1193,1196,1198],{"class":82,"line":169},[80,1187,1188],{"class":111},"      label",[80,1190,115],{"class":94},[80,1192,154],{"class":94},[80,1194,1195],{"class":157},"Reset scene",[80,1197,161],{"class":94},[80,1199,489],{"class":94},[80,1201,1202,1205,1207,1209,1212,1214],{"class":82,"line":189},[80,1203,1204],{"class":111},"      variant",[80,1206,115],{"class":94},[80,1208,154],{"class":94},[80,1210,1211],{"class":157},"primary",[80,1213,161],{"class":94},[80,1215,489],{"class":94},[80,1217,1218,1221,1223,1225,1228,1230],{"class":82,"line":599},[80,1219,1220],{"class":111},"      size",[80,1222,115],{"class":94},[80,1224,154],{"class":94},[80,1226,1227],{"class":157},"md",[80,1229,161],{"class":94},[80,1231,489],{"class":94},[80,1233,1234,1237,1239,1242,1245,1248,1251],{"class":82,"line":612},[80,1235,1236],{"class":98},"      onClick",[80,1238,115],{"class":94},[80,1240,1241],{"class":94}," ()",[80,1243,1244],{"class":86}," =>",[80,1246,1247],{"class":98}," resetScene",[80,1249,1250],{"class":90},"()",[80,1252,489],{"class":94},[80,1254,1255],{"class":82,"line":618},[80,1256,1257],{"class":94},"    },\n",[80,1259,1261],{"class":82,"line":1260},10,[80,1262,615],{"class":94},[80,1264,1266,1268],{"class":82,"line":1265},11,[80,1267,192],{"class":94},[80,1269,195],{"class":90},[59,1271,1272,1273,1024,1275,1278,1279,268,1282,268,1285,268,1287,268,1290,1293,1294,356],{},"Button variants are ",[62,1274,1211],{},[62,1276,1277],{},"secondary",". Sizes are ",[62,1280,1281],{},"xs",[62,1283,1284],{},"sm",[62,1286,1227],{},[62,1288,1289],{},"lg",[62,1291,1292],{},"xl",", and ",[62,1295,1296],{},"block",[1298,1299],"demo-button",{},[66,1301,1302],{"id":355},"Graph",[59,1304,1305],{},"Use a graph to visualize a changing numeric value, or enable the built-in FPS graph.",[71,1307,1309],{"className":73,"code":1308,"language":75,"meta":76,"style":76},"const frameTime = ref(0)\n\nuseControls({\n  frameTime: {\n    type: 'graph',\n    value: frameTime,\n  },\n})\n\nuseControls('fpsgraph')\n\n\u002F\u002F Update the ref as usual, the graph plots each new value\nconst loop = (t: number) => {\n  frameTime.value = (Math.sin(t \u002F 400) + 1) * 8 + 8\n  requestAnimationFrame(loop)\n}\nrequestAnimationFrame(loop)\n",[62,1310,1311,1330,1336,1344,1353,1367,1378,1382,1388,1392,1407,1411,1417,1447,1500,1513,1519],{"__ignoreMap":76},[80,1312,1313,1315,1318,1320,1323,1325,1328],{"class":82,"line":83},[80,1314,87],{"class":86},[80,1316,1317],{"class":90}," frameTime ",[80,1319,95],{"class":94},[80,1321,1322],{"class":98}," ref",[80,1324,102],{"class":90},[80,1326,1327],{"class":137},"0",[80,1329,195],{"class":90},[80,1331,1332],{"class":82,"line":108},[80,1333,1335],{"emptyLinePlaceholder":1334},true,"\n",[80,1337,1338,1340,1342],{"class":82,"line":129},[80,1339,45],{"class":98},[80,1341,102],{"class":90},[80,1343,105],{"class":94},[80,1345,1346,1349,1351],{"class":82,"line":146},[80,1347,1348],{"class":111},"  frameTime",[80,1350,115],{"class":94},[80,1352,545],{"class":94},[80,1354,1355,1357,1359,1361,1363,1365],{"class":82,"line":169},[80,1356,562],{"class":111},[80,1358,115],{"class":94},[80,1360,154],{"class":94},[80,1362,355],{"class":157},[80,1364,161],{"class":94},[80,1366,489],{"class":94},[80,1368,1369,1371,1373,1376],{"class":82,"line":189},[80,1370,550],{"class":111},[80,1372,115],{"class":94},[80,1374,1375],{"class":90}," frameTime",[80,1377,489],{"class":94},[80,1379,1380],{"class":82,"line":599},[80,1381,615],{"class":94},[80,1383,1384,1386],{"class":82,"line":612},[80,1385,192],{"class":94},[80,1387,195],{"class":90},[80,1389,1390],{"class":82,"line":618},[80,1391,1335],{"emptyLinePlaceholder":1334},[80,1393,1394,1396,1398,1400,1403,1405],{"class":82,"line":1260},[80,1395,45],{"class":98},[80,1397,102],{"class":90},[80,1399,161],{"class":94},[80,1401,1402],{"class":157},"fpsgraph",[80,1404,161],{"class":94},[80,1406,195],{"class":90},[80,1408,1409],{"class":82,"line":1265},[80,1410,1335],{"emptyLinePlaceholder":1334},[80,1412,1414],{"class":82,"line":1413},12,[80,1415,1416],{"class":125},"\u002F\u002F Update the ref as usual, the graph plots each new value\n",[80,1418,1420,1422,1425,1427,1430,1434,1436,1440,1443,1445],{"class":82,"line":1419},13,[80,1421,87],{"class":86},[80,1423,1424],{"class":90}," loop ",[80,1426,95],{"class":94},[80,1428,1429],{"class":94}," (",[80,1431,1433],{"class":1432},"sHdIc","t",[80,1435,115],{"class":94},[80,1437,1439],{"class":1438},"sBMFI"," number",[80,1441,1442],{"class":94},")",[80,1444,1244],{"class":86},[80,1446,545],{"class":94},[80,1448,1450,1452,1454,1456,1458,1460,1463,1465,1468,1470,1472,1475,1478,1481,1484,1486,1488,1491,1494,1497],{"class":82,"line":1449},14,[80,1451,1348],{"class":90},[80,1453,356],{"class":94},[80,1455,316],{"class":90},[80,1457,472],{"class":94},[80,1459,1429],{"class":111},[80,1461,1462],{"class":90},"Math",[80,1464,356],{"class":94},[80,1466,1467],{"class":98},"sin",[80,1469,102],{"class":111},[80,1471,1433],{"class":90},[80,1473,1474],{"class":94}," \u002F",[80,1476,1477],{"class":137}," 400",[80,1479,1480],{"class":111},") ",[80,1482,1483],{"class":94},"+",[80,1485,607],{"class":137},[80,1487,1480],{"class":111},[80,1489,1490],{"class":94},"*",[80,1492,1493],{"class":137}," 8",[80,1495,1496],{"class":94}," +",[80,1498,1499],{"class":137}," 8\n",[80,1501,1503,1506,1508,1511],{"class":82,"line":1502},15,[80,1504,1505],{"class":98},"  requestAnimationFrame",[80,1507,102],{"class":111},[80,1509,1510],{"class":90},"loop",[80,1512,195],{"class":111},[80,1514,1516],{"class":82,"line":1515},16,[80,1517,1518],{"class":94},"}\n",[80,1520,1522,1525],{"class":82,"line":1521},17,[80,1523,1524],{"class":98},"requestAnimationFrame",[80,1526,1527],{"class":90},"(loop)\n",[59,1529,1530,1531,1533,1534,1536],{},"Pass a ref as the ",[62,1532,316],{},", then change the ref from your own code. The graph samples its value on an interval. Its optional ",[62,1535,437],{}," callback receives the collected values.",[1538,1539],"demo-graph",{},[1541,1542,1543],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .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}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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":76,"searchDepth":83,"depth":108,"links":1545},[1546,1547,1548,1549,1550,1551,1552,1553,1554,1555,1556],{"id":68,"depth":108,"text":69},{"id":284,"depth":108,"text":285},{"id":222,"depth":108,"text":446},{"id":232,"depth":108,"text":501},{"id":336,"depth":108,"text":628},{"id":339,"depth":108,"text":748},{"id":342,"depth":108,"text":801},{"id":345,"depth":108,"text":859},{"id":351,"depth":108,"text":1011},{"id":348,"depth":108,"text":1133},{"id":355,"depth":108,"text":1302},"Create inferred and configured controls with useControls.",null,{},{"icon":24},{"title":21,"description":1557},"dgpj8dpxraUCwLMVBq-5iTWvihgfAjWGcTEGOHwcw_A",[1564,1566],{"title":13,"path":14,"stem":18,"description":1565,"icon":19,"children":-1},"Configure controls, connect reactive state, and organize panels.",{"title":26,"path":27,"stem":28,"description":1567,"icon":29,"children":-1},"Connect Vue state, organize controls into folders, and render several panels.",1790759287016]