[{"data":1,"prerenderedAt":523},["ShallowReactive",2],{"navigation":3,"\u002Fgetting-started":53,"\u002Fgetting-started-surround":520},[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":5,"body":55,"description":512,"extension":513,"links":514,"meta":515,"navigation":516,"path":6,"seo":517,"stem":7,"__hash__":519},"docs\u002F1.getting-started\u002F1.index.md",{"type":56,"value":57,"toc":507},"minimark",[58,63,67,125,128,132,145,461,467,475,479,503],[59,60,62],"h2",{"id":61},"installation","Installation",[64,65,66],"p",{},"Add Tres Leches to a Vue 3 project:",[68,69,70,96,111],"code-group",{},[71,72,78],"pre",{"className":73,"code":74,"filename":75,"language":76,"meta":77,"style":77},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @tresjs\u002Fleches\n","pnpm","bash","",[79,80,81],"code",{"__ignoreMap":77},[82,83,86,89,93],"span",{"class":84,"line":85},"line",1,[82,87,75],{"class":88},"sBMFI",[82,90,92],{"class":91},"sfazB"," add",[82,94,95],{"class":91}," @tresjs\u002Fleches\n",[71,97,100],{"className":73,"code":98,"filename":99,"language":76,"meta":77,"style":77},"npm install @tresjs\u002Fleches\n","npm",[79,101,102],{"__ignoreMap":77},[82,103,104,106,109],{"class":84,"line":85},[82,105,99],{"class":88},[82,107,108],{"class":91}," install",[82,110,95],{"class":91},[71,112,115],{"className":73,"code":113,"filename":114,"language":76,"meta":77,"style":77},"yarn add @tresjs\u002Fleches\n","yarn",[79,116,117],{"__ignoreMap":77},[82,118,119,121,123],{"class":84,"line":85},[82,120,114],{"class":88},[82,122,92],{"class":91},[82,124,95],{"class":91},[64,126,127],{},"The package includes its component styles, so no plugin or extra stylesheet is required.",[59,129,131],{"id":130},"your-first-controls","Your first controls",[64,133,134,135,137,138,141,142,144],{},"Call ",[79,136,45],{}," in ",[79,139,140],{},"\u003Cscript setup>"," and render one ",[79,143,40],{}," panel. Each returned value is a Vue ref.",[71,146,150],{"className":147,"code":148,"language":149,"meta":77,"style":77},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresLeches, useControls } from '@tresjs\u002Fleches'\n\nconst { visible, speed, color } = useControls({\n  visible: true,\n  speed: {\n    value: 0.5,\n    min: 0,\n    max: 2,\n    step: 0.01,\n  },\n  color: '#f59e0b',\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresLeches \u002F>\n\n  \u003Cp v-if=\"visible\">\n    Speed: {{ speed }} · Color: {{ color }}\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n","vue",[79,151,152,183,218,225,261,277,288,302,315,328,341,347,365,373,383,388,398,410,415,436,442,452],{"__ignoreMap":77},[82,153,154,158,162,166,169,172,175,178,180],{"class":84,"line":85},[82,155,157],{"class":156},"sMK4o","\u003C",[82,159,161],{"class":160},"swJcz","script",[82,163,165],{"class":164},"spNyl"," setup",[82,167,168],{"class":164}," lang",[82,170,171],{"class":156},"=",[82,173,174],{"class":156},"\"",[82,176,177],{"class":91},"ts",[82,179,174],{"class":156},[82,181,182],{"class":156},">\n",[82,184,186,190,193,197,200,203,206,209,212,215],{"class":84,"line":185},2,[82,187,189],{"class":188},"s7zQu","import",[82,191,192],{"class":156}," {",[82,194,196],{"class":195},"sTEyZ"," TresLeches",[82,198,199],{"class":156},",",[82,201,202],{"class":195}," useControls",[82,204,205],{"class":156}," }",[82,207,208],{"class":188}," from",[82,210,211],{"class":156}," '",[82,213,214],{"class":91},"@tresjs\u002Fleches",[82,216,217],{"class":156},"'\n",[82,219,221],{"class":84,"line":220},3,[82,222,224],{"emptyLinePlaceholder":223},true,"\n",[82,226,228,231,233,236,238,241,243,246,249,252,255,258],{"class":84,"line":227},4,[82,229,230],{"class":164},"const",[82,232,192],{"class":156},[82,234,235],{"class":195}," visible",[82,237,199],{"class":156},[82,239,240],{"class":195}," speed",[82,242,199],{"class":156},[82,244,245],{"class":195}," color ",[82,247,248],{"class":156},"}",[82,250,251],{"class":156}," =",[82,253,202],{"class":254},"s2Zo4",[82,256,257],{"class":195},"(",[82,259,260],{"class":156},"{\n",[82,262,264,267,270,274],{"class":84,"line":263},5,[82,265,266],{"class":160},"  visible",[82,268,269],{"class":156},":",[82,271,273],{"class":272},"sfNiH"," true",[82,275,276],{"class":156},",\n",[82,278,280,283,285],{"class":84,"line":279},6,[82,281,282],{"class":160},"  speed",[82,284,269],{"class":156},[82,286,287],{"class":156}," {\n",[82,289,291,294,296,300],{"class":84,"line":290},7,[82,292,293],{"class":160},"    value",[82,295,269],{"class":156},[82,297,299],{"class":298},"sbssI"," 0.5",[82,301,276],{"class":156},[82,303,305,308,310,313],{"class":84,"line":304},8,[82,306,307],{"class":160},"    min",[82,309,269],{"class":156},[82,311,312],{"class":298}," 0",[82,314,276],{"class":156},[82,316,318,321,323,326],{"class":84,"line":317},9,[82,319,320],{"class":160},"    max",[82,322,269],{"class":156},[82,324,325],{"class":298}," 2",[82,327,276],{"class":156},[82,329,331,334,336,339],{"class":84,"line":330},10,[82,332,333],{"class":160},"    step",[82,335,269],{"class":156},[82,337,338],{"class":298}," 0.01",[82,340,276],{"class":156},[82,342,344],{"class":84,"line":343},11,[82,345,346],{"class":156},"  },\n",[82,348,350,353,355,357,360,363],{"class":84,"line":349},12,[82,351,352],{"class":160},"  color",[82,354,269],{"class":156},[82,356,211],{"class":156},[82,358,359],{"class":91},"#f59e0b",[82,361,362],{"class":156},"'",[82,364,276],{"class":156},[82,366,368,370],{"class":84,"line":367},13,[82,369,248],{"class":156},[82,371,372],{"class":195},")\n",[82,374,376,379,381],{"class":84,"line":375},14,[82,377,378],{"class":156},"\u003C\u002F",[82,380,161],{"class":160},[82,382,182],{"class":156},[82,384,386],{"class":84,"line":385},15,[82,387,224],{"emptyLinePlaceholder":223},[82,389,391,393,396],{"class":84,"line":390},16,[82,392,157],{"class":156},[82,394,395],{"class":160},"template",[82,397,182],{"class":156},[82,399,401,404,407],{"class":84,"line":400},17,[82,402,403],{"class":156},"  \u003C",[82,405,406],{"class":160},"TresLeches",[82,408,409],{"class":156}," \u002F>\n",[82,411,413],{"class":84,"line":412},18,[82,414,224],{"emptyLinePlaceholder":223},[82,416,418,420,422,425,427,429,432,434],{"class":84,"line":417},19,[82,419,403],{"class":156},[82,421,64],{"class":160},[82,423,424],{"class":164}," v-if",[82,426,171],{"class":156},[82,428,174],{"class":156},[82,430,431],{"class":91},"visible",[82,433,174],{"class":156},[82,435,182],{"class":156},[82,437,439],{"class":84,"line":438},20,[82,440,441],{"class":195},"    Speed: {{ speed }} · Color: {{ color }}\n",[82,443,445,448,450],{"class":84,"line":444},21,[82,446,447],{"class":156},"  \u003C\u002F",[82,449,64],{"class":160},[82,451,182],{"class":156},[82,453,455,457,459],{"class":84,"line":454},22,[82,456,378],{"class":156},[82,458,395],{"class":160},[82,460,182],{"class":156},[64,462,463,464,466],{},"Tres Leches infers a checkbox for ",[79,465,431],{},", a range for the configured numeric value, and a color input for the hexadecimal color.",[468,469],"u-alert",{"color":470,"description":471,"icon":472,"title":473,"variant":474},"primary","Render TresLeches once for each panel. useControls calls can live in the same component or in any descendant that uses the same panel id.","i-lucide-info","Where to render the panel","subtle",[59,476,478],{"id":477},"next-steps","Next steps",[480,481,482,491,497],"ul",{},[483,484,485,486,490],"li",{},"Learn how values map to inputs in the ",[487,488,489],"a",{"href":22},"controls guide",".",[483,492,493,494,490],{},"Organize large panels with ",[487,495,496],{"href":27},"folders and multiple panels",[483,498,499,500,490],{},"See every signature and prop in the ",[487,501,502],{"href":32},"API reference",[504,505,506],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":77,"searchDepth":85,"depth":185,"links":508},[509,510,511],{"id":61,"depth":185,"text":62},{"id":130,"depth":185,"text":131},{"id":477,"depth":185,"text":478},"Install Tres Leches and add your first reactive control panel.","md",null,{},{"icon":10},{"description":518,"title":5},"Learn how to install and use @tresjs\u002Fleches in a Vue application.","b-Ucw6vQAcjsqVxj7lt_-z_6cYwJBH3aVvih826vcVQ",[514,521],{"title":13,"path":14,"stem":18,"description":522,"icon":19,"children":-1},"Configure controls, connect reactive state, and organize panels.",1790759286524]