[{"data":1,"prerenderedAt":3125},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-tooling-agents":703,"-docs-getting-started-tooling-agents-surround":3122},{"gettingStarted":4,"api":86,"theme":175},[5,36,56,76],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46,51],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"path":53,"stem":54,"icon":55},"AI Agents","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fagents","docs\u002Fgetting-started\u002Ftooling\u002F03.agents","i-lucide-bot",{"title":57,"icon":7,"path":58,"stem":59,"children":60,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[61,66,71],{"title":62,"path":63,"stem":64,"icon":65},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":67,"path":68,"stem":69,"icon":70},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":72,"path":73,"stem":74,"icon":75},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",{"title":77,"icon":7,"path":78,"stem":79,"children":80,"page":7},"Migrations","\u002Fdocs\u002Fgetting-started\u002Fmigration","docs\u002Fgetting-started\u002Fmigration",[81],{"title":82,"path":83,"stem":84,"icon":85},"From TailwindCSS","\u002Fdocs\u002Fgetting-started\u002Fmigration\u002Ftailwind","docs\u002Fgetting-started\u002Fmigration\u002F01.tailwind","i-simple-icons-tailwindcss",[87],{"title":88,"path":89,"stem":90,"children":91,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[92,95,100,105,110,115,120,125,130,135,140,145,160,165,170],{"title":93,"path":89,"stem":90,"icon":94},"Overview","i-lucide-book-text",{"title":96,"path":97,"stem":98,"icon":99},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":101,"path":102,"stem":103,"icon":104},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":106,"path":107,"stem":108,"icon":109},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":111,"path":112,"stem":113,"icon":114},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":116,"path":117,"stem":118,"icon":119},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":121,"path":122,"stem":123,"icon":124},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":126,"path":127,"stem":128,"icon":129},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":131,"path":132,"stem":133,"icon":134},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":136,"path":137,"stem":138,"icon":139},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":141,"path":142,"stem":143,"icon":144},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":146,"path":147,"stem":148,"children":149,"icon":159},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[150,151,155],{"title":93,"path":147,"stem":148},{"title":152,"path":153,"stem":154},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":156,"path":157,"stem":158},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":161,"path":162,"stem":163,"icon":164},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":166,"path":167,"stem":168,"icon":169},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":171,"path":172,"stem":173,"icon":174},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F14.imports","i-lucide-file-input",[176,256,370,579,656],{"title":177,"path":178,"stem":179,"children":180,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[181,182,187,192,197,202,207,212,217,222,237,241,246,251],{"title":93,"path":178,"stem":179,"icon":94},{"title":183,"path":184,"stem":185,"icon":186},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":188,"path":189,"stem":190,"icon":191},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":193,"path":194,"stem":195,"icon":196},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":198,"path":199,"stem":200,"icon":201},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":203,"path":204,"stem":205,"icon":206},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":208,"path":209,"stem":210,"icon":211},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":213,"path":214,"stem":215,"icon":216},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":218,"path":219,"stem":220,"icon":221},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":223,"path":224,"stem":225,"children":226,"icon":119,"defaultOpen":236},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[227,228,232],{"title":93,"path":224,"stem":225},{"title":229,"path":230,"stem":231},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":233,"path":234,"stem":235},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":238,"path":239,"stem":240,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":242,"path":243,"stem":244,"icon":245},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":247,"path":248,"stem":249,"icon":250},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":252,"path":253,"stem":254,"icon":255},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":257,"path":258,"stem":259,"children":260,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[261,262,265,272,294,314,326,342,354],{"title":93,"path":258,"stem":259,"icon":94},{"title":183,"path":263,"stem":264,"icon":186},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":266,"icon":255,"defaultOpen":236,"page":7,"children":267},"Base",[268],{"title":269,"path":270,"stem":271,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":247,"icon":250,"defaultOpen":236,"page":7,"children":273},[274,278,282,286,290],{"title":275,"path":276,"stem":277,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":279,"path":280,"stem":281,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":283,"path":284,"stem":285,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":287,"path":288,"stem":289,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":291,"path":292,"stem":293,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":295,"icon":296,"defaultOpen":236,"page":7,"children":297},"Inline Text","i-lucide-whole-word",[298,302,306,310],{"title":299,"path":300,"stem":301,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":303,"path":304,"stem":305,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":307,"path":308,"stem":309,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":311,"path":312,"stem":313,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":315,"icon":316,"defaultOpen":236,"page":7,"children":317},"Media & Embeds","i-lucide-image",[318,322],{"title":319,"path":320,"stem":321,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":323,"path":324,"stem":325,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":327,"icon":328,"defaultOpen":236,"page":7,"children":329},"Forms & Tables","i-lucide-table",[330,334,338],{"title":331,"path":332,"stem":333,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":335,"path":336,"stem":337,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":339,"path":340,"stem":341,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":343,"icon":344,"defaultOpen":236,"page":7,"children":345},"Structure","i-lucide-separator-horizontal",[346,350],{"title":347,"path":348,"stem":349,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":351,"path":352,"stem":353,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":355,"icon":356,"defaultOpen":236,"page":7,"children":357},"States","i-lucide-mouse-pointer-click",[358,362,366],{"title":359,"path":360,"stem":361,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":363,"path":364,"stem":365,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":367,"path":368,"stem":369,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":371,"path":372,"stem":373,"children":374,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[375,376,388,412,444,512,539,571],{"title":93,"path":372,"stem":373,"icon":94},{"title":377,"icon":378,"defaultOpen":236,"page":7,"children":379},"Actions","i-lucide-square-mouse-pointer",[380,384],{"title":381,"path":382,"stem":383,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":385,"path":386,"stem":387,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":389,"icon":390,"defaultOpen":236,"page":7,"children":391},"Navigation","i-lucide-navigation",[392,396,400,404,408],{"title":393,"path":394,"stem":395,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":397,"path":398,"stem":399,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":401,"path":402,"stem":403,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":405,"path":406,"stem":407,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":409,"path":410,"stem":411,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":413,"icon":414,"defaultOpen":236,"page":7,"children":415},"Feedback","i-lucide-megaphone",[416,420,424,428,432,436,440],{"title":417,"path":418,"stem":419,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":421,"path":422,"stem":423,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":425,"path":426,"stem":427,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":429,"path":430,"stem":431,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":433,"path":434,"stem":435,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":437,"path":438,"stem":439,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":441,"path":442,"stem":443,"icon":7},"Toast","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoast","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F06.toast",{"title":445,"icon":446,"defaultOpen":236,"page":7,"children":447},"Forms","i-lucide-text-cursor-input",[448,452,456,460,464,468,472,476,480,484,488,492,496,500,504,508],{"title":449,"path":450,"stem":451,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":453,"path":454,"stem":455,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":457,"path":458,"stem":459,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":461,"path":462,"stem":463,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":465,"path":466,"stem":467,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":469,"path":470,"stem":471,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":473,"path":474,"stem":475,"icon":7},"Input Date","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput-date","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.input-date",{"title":477,"path":478,"stem":479,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.otp",{"title":481,"path":482,"stem":483,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio",{"title":485,"path":486,"stem":487,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.radio-group",{"title":489,"path":490,"stem":491,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.select",{"title":493,"path":494,"stem":495,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.slider",{"title":497,"path":498,"stem":499,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.switch",{"title":501,"path":502,"stem":503,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.textarea",{"title":505,"path":506,"stem":507,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle",{"title":509,"path":510,"stem":511,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F15.toggle-group",{"title":513,"icon":255,"defaultOpen":236,"page":7,"children":514},"Overlays",[515,519,523,527,531,535],{"title":516,"path":517,"stem":518,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":520,"path":521,"stem":522,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":524,"path":525,"stem":526,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":528,"path":529,"stem":530,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":532,"path":533,"stem":534,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":536,"path":537,"stem":538,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":540,"icon":541,"defaultOpen":236,"page":7,"children":542},"Layout","i-lucide-layout",[543,547,551,555,559,563,567],{"title":544,"path":545,"stem":546,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":548,"path":549,"stem":550,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":552,"path":553,"stem":554,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":556,"path":557,"stem":558,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":560,"path":561,"stem":562,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":564,"path":565,"stem":566,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":568,"path":569,"stem":570,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":572,"icon":573,"defaultOpen":236,"page":7,"children":574},"AI Chat","i-lucide-message-circle",[575],{"title":576,"path":577,"stem":578,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":131,"path":580,"stem":581,"children":582,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[583,584,588,593,598,602,605,609,614,619,623,626,631,634,639,643,648,653],{"title":93,"path":580,"stem":581,"icon":94},{"title":585,"path":586,"stem":587,"icon":186},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":589,"path":590,"stem":591,"icon":592},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":594,"path":595,"stem":596,"icon":597},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":599,"path":600,"stem":601,"icon":316},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":193,"path":603,"stem":604,"icon":196},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":606,"path":607,"stem":608,"icon":134},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":610,"path":611,"stem":612,"icon":613},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":615,"path":616,"stem":617,"icon":618},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":620,"path":621,"stem":622,"icon":356},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":540,"path":624,"stem":625,"icon":541},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":627,"path":628,"stem":629,"icon":630},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":242,"path":632,"stem":633,"icon":245},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":635,"path":636,"stem":637,"icon":638},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":640,"path":641,"stem":642,"icon":328},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":644,"path":645,"stem":646,"icon":647},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":649,"path":650,"stem":651,"icon":652},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":247,"path":654,"stem":655,"icon":250},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":657,"path":658,"stem":659,"children":660,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[661,662,665,669,674,678,683,688,693,698],{"title":93,"path":658,"stem":659,"icon":94},{"title":585,"path":663,"stem":664,"icon":186},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":666,"path":667,"stem":668,"icon":592},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":670,"path":671,"stem":672,"icon":673},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":675,"path":676,"stem":677,"icon":446},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":679,"path":680,"stem":681,"icon":682},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":684,"path":685,"stem":686,"icon":687},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":689,"path":690,"stem":691,"icon":692},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":694,"path":695,"stem":696,"icon":697},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":699,"path":700,"stem":701,"icon":702},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":704,"title":705,"body":706,"description":3116,"extension":1482,"links":3117,"meta":3118,"navigation":3119,"path":53,"seo":3120,"stem":54,"__hash__":3121},"docs_gettingStarted\u002Fdocs\u002Fgetting-started\u002Ftooling\u002F03.agents.md","Using Styleframe with AI agents",{"type":707,"value":708,"toc":3100},"minimark",[709,713,717,725,728,745,748,751,876,889,1128,1144,1171,1174,1186,1191,1197,1507,1514,1518,1533,1541,1569,1573,1604,1619,1936,1943,1949,2141,2144,2252,2266,2279,2283,2297,2303,2312,2632,2636,2662,2987,2998,3002,3005,3011,3014,3018,3057,3061,3096],[710,711,93],"h2",{"id":712},"overview",[714,715,716],"p",{},"Coding agents can write a Styleframe config for you, from the tokens and themes to the utilities and recipes. They work best when every change gets an answer they can read: the CLI tells them what your config registers, checks what they wrote and fails when something is wrong.",[714,718,719,720,724],{},"Think of a recipe that points at a misspelt token, a utility that never emits a class, or a dark theme that quietly swaps your brand colour. Each of these builds with exit code ",[721,722,723],"code",{},"0",", so an agent that only looks at the exit code never finds out.",[714,726,727],{},"This page walks you through setting an agent up to get it right. We'll look at:",[729,730,731,739],"ul",{},[732,733,734,738],"li",{},[735,736,737],"strong",{},"The loop",": the commands an agent runs before and after each change, and what each one tells it.",[732,740,741,744],{},[735,742,743],{},"Common mistakes",": the ones that build without a word, and how to avoid each.",[710,746,737],{"id":747},"the-loop",[714,749,750],{},"Let's start with the loop. We recommend running these commands in this order, before and after every change an agent makes to your config:",[752,753,755,760,785,800,804,821,849,853,865],"steps",{"level":754},"4",[756,757,759],"h4",{"id":758},"inspect-whats-registered","Inspect what's registered",[761,762,767],"pre",{"className":763,"code":764,"language":765,"meta":766,"style":766},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","styleframe inspect --json\n","bash","",[721,768,769],{"__ignoreMap":766},[770,771,774,778,782],"span",{"class":772,"line":773},"line",1,[770,775,777],{"class":776},"sBMFI","styleframe",[770,779,781],{"class":780},"sfazB"," inspect",[770,783,784],{"class":780}," --json\n",[714,786,787,788,795,796,799],{},"The ",[789,790,792],"a",{"href":791},"\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli#inspect",[721,793,794],{},"inspect"," command prints every variable, theme, utility, modifier and recipe your config registers, as one JSON document. The agent reads the token names and variant options from it, instead of reading the source or the generated CSS. Pass a section, like ",[721,797,798],{},"styleframe inspect recipes --json",", to print only that part.",[756,801,803],{"id":802},"check-the-change","Check the change",[761,805,807],{"className":763,"code":806,"language":765,"meta":766,"style":766},"styleframe check --typecheck --json\n",[721,808,809],{"__ignoreMap":766},[770,810,811,813,816,819],{"class":772,"line":773},[770,812,777],{"class":776},[770,814,815],{"class":780}," check",[770,817,818],{"class":780}," --typecheck",[770,820,784],{"class":780},[714,822,787,823,829,830,833,834,837,838,840,841,844,845,848],{},[789,824,826],{"href":825},"\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli#check",[721,827,828],{},"check"," command loads the config, writes nothing and exits with ",[721,831,832],{},"1"," when it finds a problem: a reference to a token that doesn't exist, a theme that overrides a token you never defined, or a token defined twice. With ",[721,835,836],{},"--typecheck",", it also runs the TypeScript your project installs on the config, so a default variant that isn't one of the recipe's options shows up in the same call. Each problem comes back as a diagnostic with a ",[721,839,721],{},", a ",[721,842,843],{},"path"," to where it was made and a ",[721,846,847],{},"suggestion"," when a token name is close.",[756,850,852],{"id":851},"build","Build",[761,854,856],{"className":763,"code":855,"language":765,"meta":766,"style":766},"styleframe build\n",[721,857,858],{"__ignoreMap":766},[770,859,860,862],{"class":772,"line":773},[770,861,777],{"class":776},[770,863,864],{"class":780}," build\n",[714,866,787,867,872,873,875],{},[789,868,870],{"href":869},"\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli#build",[721,871,851],{}," command prints the same problems as warnings, without the TypeScript ones, and exits with ",[721,874,832],{}," when it fails, so a script or an agent can trust its exit code.",[714,877,878,879,882,883,885,886,888],{},"Next, turn the warnings into errors. With ",[721,880,881],{},"strict: true",", the build fails on any problem that ",[721,884,828],{}," reports without ",[721,887,836],{},", and writes nothing:",[761,890,895],{"className":891,"code":892,"filename":893,"language":894,"meta":766,"style":766},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport {\n    useButtonRecipe,\n    useDesignTokensPreset,\n    useModifiersPreset,\n    useUtilitiesPreset,\n} from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe({ strict: true });\n\nuseDesignTokensPreset(s, { colors: { primary: \"#4f46e5\" } });\nuseModifiersPreset(s);\nuseUtilitiesPreset(s);\nuseButtonRecipe(s);\n\nexport default s;\n","styleframe.config.ts","ts",[721,896,897,928,936,945,953,961,969,986,992,1032,1037,1078,1089,1099,1109,1114],{"__ignoreMap":766},[770,898,899,903,907,911,914,917,920,922,925],{"class":772,"line":773},[770,900,902],{"class":901},"s7zQu","import",[770,904,906],{"class":905},"sMK4o"," {",[770,908,910],{"class":909},"sTEyZ"," styleframe",[770,912,913],{"class":905}," }",[770,915,916],{"class":901}," from",[770,918,919],{"class":905}," \"",[770,921,777],{"class":780},[770,923,924],{"class":905},"\"",[770,926,927],{"class":905},";\n",[770,929,931,933],{"class":772,"line":930},2,[770,932,902],{"class":901},[770,934,935],{"class":905}," {\n",[770,937,939,942],{"class":772,"line":938},3,[770,940,941],{"class":909},"    useButtonRecipe",[770,943,944],{"class":905},",\n",[770,946,948,951],{"class":772,"line":947},4,[770,949,950],{"class":909},"    useDesignTokensPreset",[770,952,944],{"class":905},[770,954,956,959],{"class":772,"line":955},5,[770,957,958],{"class":909},"    useModifiersPreset",[770,960,944],{"class":905},[770,962,964,967],{"class":772,"line":963},6,[770,965,966],{"class":909},"    useUtilitiesPreset",[770,968,944],{"class":905},[770,970,972,975,977,979,982,984],{"class":772,"line":971},7,[770,973,974],{"class":905},"}",[770,976,916],{"class":901},[770,978,919],{"class":905},[770,980,981],{"class":780},"@styleframe\u002Ftheme",[770,983,924],{"class":905},[770,985,927],{"class":905},[770,987,989],{"class":772,"line":988},8,[770,990,991],{"emptyLinePlaceholder":236},"\n",[770,993,995,999,1002,1005,1008,1011,1014,1018,1021,1025,1027,1030],{"class":772,"line":994},9,[770,996,998],{"class":997},"spNyl","const",[770,1000,1001],{"class":909}," s ",[770,1003,1004],{"class":905},"=",[770,1006,910],{"class":1007},"s2Zo4",[770,1009,1010],{"class":909},"(",[770,1012,1013],{"class":905},"{",[770,1015,1017],{"class":1016},"swJcz"," strict",[770,1019,1020],{"class":905},":",[770,1022,1024],{"class":1023},"sfNiH"," true",[770,1026,913],{"class":905},[770,1028,1029],{"class":909},")",[770,1031,927],{"class":905},[770,1033,1035],{"class":772,"line":1034},10,[770,1036,991],{"emptyLinePlaceholder":236},[770,1038,1040,1043,1046,1049,1051,1054,1056,1058,1061,1063,1065,1068,1070,1072,1074,1076],{"class":772,"line":1039},11,[770,1041,1042],{"class":1007},"useDesignTokensPreset",[770,1044,1045],{"class":909},"(s",[770,1047,1048],{"class":905},",",[770,1050,906],{"class":905},[770,1052,1053],{"class":1016}," colors",[770,1055,1020],{"class":905},[770,1057,906],{"class":905},[770,1059,1060],{"class":1016}," primary",[770,1062,1020],{"class":905},[770,1064,919],{"class":905},[770,1066,1067],{"class":780},"#4f46e5",[770,1069,924],{"class":905},[770,1071,913],{"class":905},[770,1073,913],{"class":905},[770,1075,1029],{"class":909},[770,1077,927],{"class":905},[770,1079,1081,1084,1087],{"class":772,"line":1080},12,[770,1082,1083],{"class":1007},"useModifiersPreset",[770,1085,1086],{"class":909},"(s)",[770,1088,927],{"class":905},[770,1090,1092,1095,1097],{"class":772,"line":1091},13,[770,1093,1094],{"class":1007},"useUtilitiesPreset",[770,1096,1086],{"class":909},[770,1098,927],{"class":905},[770,1100,1102,1105,1107],{"class":772,"line":1101},14,[770,1103,1104],{"class":1007},"useButtonRecipe",[770,1106,1086],{"class":909},[770,1108,927],{"class":905},[770,1110,1112],{"class":772,"line":1111},15,[770,1113,991],{"emptyLinePlaceholder":236},[770,1115,1117,1120,1123,1126],{"class":772,"line":1116},16,[770,1118,1119],{"class":901},"export",[770,1121,1122],{"class":901}," default",[770,1124,1125],{"class":909}," s",[770,1127,927],{"class":905},[714,1129,787,1130,1133,1134,1137,1138,1143],{},[721,1131,1132],{},"strict"," option defaults to ",[721,1135,1136],{},"false",", so existing builds keep working while you fix what the warnings report. See ",[789,1139,1141],{"href":1140},"\u002Fdocs\u002Fapi\u002Finstance#strict",[721,1142,1132],{}," for the details.",[1145,1146,1148,1151,1152,1155,1156,1159,1160,1162,1163,1166,1167,1170],"tip",{"icon":1147},"i-lucide-lightbulb",[735,1149,1150],{},"Pro tip",": Tell the agent about the loop where it looks for instructions, like your project's ",[721,1153,1154],{},"AGENTS.md"," or ",[721,1157,1158],{},"CLAUDE.md",". For example: \"Before you edit ",[721,1161,893],{},", run ",[721,1164,1165],{},"styleframe inspect --json",". After each edit, run ",[721,1168,1169],{},"styleframe check --typecheck --json"," and fix every diagnostic it reports.\"",[710,1172,743],{"id":1173},"common-mistakes",[714,1175,1176,1177,1179,1180,1182,1183,1185],{},"Now let's look at the mistakes agents make most often. Some of them build without a warning, and ",[721,1178,828],{}," can't see them yet. Others stop the build with an error that doesn't say how to fix it, and they stop ",[721,1181,828],{}," too: it prints the error on stderr, exits with ",[721,1184,832],{}," and prints no JSON on stdout. Either way, it's worth telling an agent about them, or pointing it at this page.",[1187,1188,1190],"h3",{"id":1189},"call-every-utility-creator","Call every utility creator",[714,1192,787,1193,1196],{},[721,1194,1195],{},"utility()"," function returns a creator, and only the values you pass to the creator become classes. A creator that's never called produces no CSS, and nothing reports it:",[1198,1199,1200,1428],"tabs",{},[1201,1202,1204],"tabs-item",{"icon":1203,"label":303},"i-lucide-code",[761,1205,1207],{"className":891,"code":1206,"filename":893,"language":894,"meta":766,"style":766},"import { styleframe } from \"styleframe\";\n\nconst s = styleframe();\nconst { variable, ref, utility } = s;\n\nconst spacingMd = variable(\"spacing.md\", \"1rem\");\n\nconst createMarginUtility = utility(\"margin\", ({ value }) => ({\n    margin: value,\n}));\n\n\u002F\u002F Without this call, there's no _margin class at all.\ncreateMarginUtility({ md: ref(spacingMd) });\n\nexport default s;\n",[721,1208,1209,1229,1233,1248,1276,1280,1313,1317,1359,1370,1379,1383,1389,1414,1418],{"__ignoreMap":766},[770,1210,1211,1213,1215,1217,1219,1221,1223,1225,1227],{"class":772,"line":773},[770,1212,902],{"class":901},[770,1214,906],{"class":905},[770,1216,910],{"class":909},[770,1218,913],{"class":905},[770,1220,916],{"class":901},[770,1222,919],{"class":905},[770,1224,777],{"class":780},[770,1226,924],{"class":905},[770,1228,927],{"class":905},[770,1230,1231],{"class":772,"line":930},[770,1232,991],{"emptyLinePlaceholder":236},[770,1234,1235,1237,1239,1241,1243,1246],{"class":772,"line":938},[770,1236,998],{"class":997},[770,1238,1001],{"class":909},[770,1240,1004],{"class":905},[770,1242,910],{"class":1007},[770,1244,1245],{"class":909},"()",[770,1247,927],{"class":905},[770,1249,1250,1252,1254,1257,1259,1262,1264,1267,1269,1272,1274],{"class":772,"line":947},[770,1251,998],{"class":997},[770,1253,906],{"class":905},[770,1255,1256],{"class":909}," variable",[770,1258,1048],{"class":905},[770,1260,1261],{"class":909}," ref",[770,1263,1048],{"class":905},[770,1265,1266],{"class":909}," utility ",[770,1268,974],{"class":905},[770,1270,1271],{"class":905}," =",[770,1273,1125],{"class":909},[770,1275,927],{"class":905},[770,1277,1278],{"class":772,"line":955},[770,1279,991],{"emptyLinePlaceholder":236},[770,1281,1282,1284,1287,1289,1291,1293,1295,1298,1300,1302,1304,1307,1309,1311],{"class":772,"line":963},[770,1283,998],{"class":997},[770,1285,1286],{"class":909}," spacingMd ",[770,1288,1004],{"class":905},[770,1290,1256],{"class":1007},[770,1292,1010],{"class":909},[770,1294,924],{"class":905},[770,1296,1297],{"class":780},"spacing.md",[770,1299,924],{"class":905},[770,1301,1048],{"class":905},[770,1303,919],{"class":905},[770,1305,1306],{"class":780},"1rem",[770,1308,924],{"class":905},[770,1310,1029],{"class":909},[770,1312,927],{"class":905},[770,1314,1315],{"class":772,"line":971},[770,1316,991],{"emptyLinePlaceholder":236},[770,1318,1319,1321,1324,1326,1329,1331,1333,1336,1338,1340,1343,1347,1350,1353,1356],{"class":772,"line":988},[770,1320,998],{"class":997},[770,1322,1323],{"class":909}," createMarginUtility ",[770,1325,1004],{"class":905},[770,1327,1328],{"class":1007}," utility",[770,1330,1010],{"class":909},[770,1332,924],{"class":905},[770,1334,1335],{"class":780},"margin",[770,1337,924],{"class":905},[770,1339,1048],{"class":905},[770,1341,1342],{"class":905}," ({",[770,1344,1346],{"class":1345},"sHdIc"," value",[770,1348,1349],{"class":905}," })",[770,1351,1352],{"class":997}," =>",[770,1354,1355],{"class":909}," (",[770,1357,1358],{"class":905},"{\n",[770,1360,1361,1364,1366,1368],{"class":772,"line":994},[770,1362,1363],{"class":1016},"    margin",[770,1365,1020],{"class":905},[770,1367,1346],{"class":909},[770,1369,944],{"class":905},[770,1371,1372,1374,1377],{"class":772,"line":1034},[770,1373,974],{"class":905},[770,1375,1376],{"class":909},"))",[770,1378,927],{"class":905},[770,1380,1381],{"class":772,"line":1039},[770,1382,991],{"emptyLinePlaceholder":236},[770,1384,1385],{"class":772,"line":1080},[770,1386,1388],{"class":1387},"sHwdD","\u002F\u002F Without this call, there's no _margin class at all.\n",[770,1390,1391,1394,1396,1398,1401,1403,1405,1408,1410,1412],{"class":772,"line":1091},[770,1392,1393],{"class":1007},"createMarginUtility",[770,1395,1010],{"class":909},[770,1397,1013],{"class":905},[770,1399,1400],{"class":1016}," md",[770,1402,1020],{"class":905},[770,1404,1261],{"class":1007},[770,1406,1407],{"class":909},"(spacingMd) ",[770,1409,974],{"class":905},[770,1411,1029],{"class":909},[770,1413,927],{"class":905},[770,1415,1416],{"class":772,"line":1101},[770,1417,991],{"emptyLinePlaceholder":236},[770,1419,1420,1422,1424,1426],{"class":772,"line":1111},[770,1421,1119],{"class":901},[770,1423,1122],{"class":901},[770,1425,1125],{"class":909},[770,1427,927],{"class":905},[1201,1429,1430],{"icon":174,"label":339},[761,1431,1436],{"className":1432,"code":1433,"filename":1434,"language":1435,"meta":766,"style":766},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --spacing--md: 1rem;\n}\n\n._margin\\:md {\n    margin: var(--spacing--md);\n}\n","styleframe\u002Findex.css","css",[721,1437,1438,1447,1460,1465,1469,1485,1503],{"__ignoreMap":766},[770,1439,1440,1442,1445],{"class":772,"line":773},[770,1441,1020],{"class":905},[770,1443,1444],{"class":997},"root",[770,1446,935],{"class":905},[770,1448,1449,1452,1454,1458],{"class":772,"line":930},[770,1450,1451],{"class":909},"    --spacing--md",[770,1453,1020],{"class":905},[770,1455,1457],{"class":1456},"sbssI"," 1rem",[770,1459,927],{"class":905},[770,1461,1462],{"class":772,"line":938},[770,1463,1464],{"class":905},"}\n",[770,1466,1467],{"class":772,"line":947},[770,1468,991],{"emptyLinePlaceholder":236},[770,1470,1471,1474,1477,1480,1483],{"class":772,"line":955},[770,1472,1473],{"class":905},".",[770,1475,1476],{"class":776},"_margin",[770,1478,1479],{"class":909},"\\:",[770,1481,1482],{"class":776},"md",[770,1484,935],{"class":905},[770,1486,1487,1490,1492,1495,1497,1500],{"class":772,"line":963},[770,1488,1363],{"class":1489},"sqsOY",[770,1491,1020],{"class":905},[770,1493,1494],{"class":1007}," var",[770,1496,1010],{"class":905},[770,1498,1499],{"class":909},"--spacing--md",[770,1501,1502],{"class":905},");\n",[770,1504,1505],{"class":772,"line":971},[770,1506,1464],{"class":905},[714,1508,1509,1510,1513],{},"A recipe that uses a utility generates the classes it needs itself, so this only bites the utilities you use directly in your markup. See ",[789,1511,131],{"href":1512},"\u002Fdocs\u002Fapi\u002Futilities#using-utility-creators"," for both ways to call a creator.",[1187,1515,1517],{"id":1516},"load-the-design-tokens-before-the-presets-that-use-them","Load the design tokens before the presets that use them",[714,1519,1520,1521,1524,1525,1528,1529,1532],{},"The utilities preset references the design-tokens preset's token names, like ",[721,1522,1523],{},"@z-index.base"," and ",[721,1526,1527],{},"@border-style.solid",", and so do the theme's recipes, like ",[721,1530,1531],{},"@color.gray-200",". Without those tokens, the utilities preset stops the build at the first missing one:",[761,1534,1539],{"className":1535,"code":1537,"language":1538},[1536],"language-text","Error: [styleframe] Variable \"z-index.base\" is not defined. Check that the variable exists before referencing it with \"@z-index.base\".\n","text",[721,1540,1537],{"__ignoreMap":766},[714,1542,1543,1544,1547,1548,1552,1553,1556,1557,1560,1561,1564,1565,1568],{},"It reports one missing token per build, so working through them one at a time takes several attempts. It's best to call ",[721,1545,1546],{},"useDesignTokensPreset()"," first, with your own values on top of its defaults, as in the ",[789,1549,1551],{"href":1550},"#the-loop","strict example"," above. For the same reason, keep its ",[721,1554,1555],{},"meta.merge"," at ",[721,1558,1559],{},"true",": with ",[721,1562,1563],{},"merge: false",", the preset drops the defaults it references itself, like ",[721,1566,1567],{},"color.gray-200",", and fails the same way.",[1187,1570,1572],{"id":1571},"check-the-dark-theme-the-preset-adds","Check the dark theme the preset adds",[714,1574,1575,1576,1579,1580,1583,1584,1587,1588,1591,1592,1595,1596,1599,1600,1603],{},"The design-tokens preset adds a ",[721,1577,1578],{},"dark"," theme by default, even when you don't pass ",[721,1581,1582],{},"themes",". That theme sets its own ",[721,1585,1586],{},"primary",", ",[721,1589,1590],{},"secondary"," and other colours, so with only ",[721,1593,1594],{},"colors: { primary: \"#4f46e5\" }",", dark mode shows the preset's own primary, ",[721,1597,1598],{},"#007A99",", instead of yours. Run ",[721,1601,1602],{},"styleframe inspect themes --json"," to see every theme your config emits.",[714,1605,1606,1607,1610,1611,1614,1615,1618],{},"To keep your brand in dark mode, set the dark colours too. A ",[721,1608,1609],{},"colors"," object under ",[721,1612,1613],{},"themes.dark"," replaces the preset's whole dark colour set, so start from ",[721,1616,1617],{},"darkModeColorValues"," to keep its background, surface and text colours:",[1198,1620,1621,1801],{},[1201,1622,1623],{"icon":1203,"label":303},[761,1624,1626],{"className":891,"code":1625,"filename":893,"language":894,"meta":766,"style":766},"import { styleframe } from \"styleframe\";\nimport { darkModeColorValues, useDesignTokensPreset } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s, {\n    colors: { primary: \"#4f46e5\" },\n    themes: {\n        dark: { colors: { ...darkModeColorValues, primary: \"#818cf8\" } },\n    },\n});\n\nexport default s;\n",[721,1627,1628,1648,1674,1678,1692,1696,1706,1728,1737,1774,1779,1787,1791],{"__ignoreMap":766},[770,1629,1630,1632,1634,1636,1638,1640,1642,1644,1646],{"class":772,"line":773},[770,1631,902],{"class":901},[770,1633,906],{"class":905},[770,1635,910],{"class":909},[770,1637,913],{"class":905},[770,1639,916],{"class":901},[770,1641,919],{"class":905},[770,1643,777],{"class":780},[770,1645,924],{"class":905},[770,1647,927],{"class":905},[770,1649,1650,1652,1654,1657,1659,1662,1664,1666,1668,1670,1672],{"class":772,"line":930},[770,1651,902],{"class":901},[770,1653,906],{"class":905},[770,1655,1656],{"class":909}," darkModeColorValues",[770,1658,1048],{"class":905},[770,1660,1661],{"class":909}," useDesignTokensPreset",[770,1663,913],{"class":905},[770,1665,916],{"class":901},[770,1667,919],{"class":905},[770,1669,981],{"class":780},[770,1671,924],{"class":905},[770,1673,927],{"class":905},[770,1675,1676],{"class":772,"line":938},[770,1677,991],{"emptyLinePlaceholder":236},[770,1679,1680,1682,1684,1686,1688,1690],{"class":772,"line":947},[770,1681,998],{"class":997},[770,1683,1001],{"class":909},[770,1685,1004],{"class":905},[770,1687,910],{"class":1007},[770,1689,1245],{"class":909},[770,1691,927],{"class":905},[770,1693,1694],{"class":772,"line":955},[770,1695,991],{"emptyLinePlaceholder":236},[770,1697,1698,1700,1702,1704],{"class":772,"line":963},[770,1699,1042],{"class":1007},[770,1701,1045],{"class":909},[770,1703,1048],{"class":905},[770,1705,935],{"class":905},[770,1707,1708,1711,1713,1715,1717,1719,1721,1723,1725],{"class":772,"line":971},[770,1709,1710],{"class":1016},"    colors",[770,1712,1020],{"class":905},[770,1714,906],{"class":905},[770,1716,1060],{"class":1016},[770,1718,1020],{"class":905},[770,1720,919],{"class":905},[770,1722,1067],{"class":780},[770,1724,924],{"class":905},[770,1726,1727],{"class":905}," },\n",[770,1729,1730,1733,1735],{"class":772,"line":988},[770,1731,1732],{"class":1016},"    themes",[770,1734,1020],{"class":905},[770,1736,935],{"class":905},[770,1738,1739,1742,1744,1746,1748,1750,1752,1755,1757,1759,1761,1763,1765,1768,1770,1772],{"class":772,"line":994},[770,1740,1741],{"class":1016},"        dark",[770,1743,1020],{"class":905},[770,1745,906],{"class":905},[770,1747,1053],{"class":1016},[770,1749,1020],{"class":905},[770,1751,906],{"class":905},[770,1753,1754],{"class":905}," ...",[770,1756,1617],{"class":909},[770,1758,1048],{"class":905},[770,1760,1060],{"class":1016},[770,1762,1020],{"class":905},[770,1764,919],{"class":905},[770,1766,1767],{"class":780},"#818cf8",[770,1769,924],{"class":905},[770,1771,913],{"class":905},[770,1773,1727],{"class":905},[770,1775,1776],{"class":772,"line":1034},[770,1777,1778],{"class":905},"    },\n",[770,1780,1781,1783,1785],{"class":772,"line":1039},[770,1782,974],{"class":905},[770,1784,1029],{"class":909},[770,1786,927],{"class":905},[770,1788,1789],{"class":772,"line":1080},[770,1790,991],{"emptyLinePlaceholder":236},[770,1792,1793,1795,1797,1799],{"class":772,"line":1091},[770,1794,1119],{"class":901},[770,1796,1122],{"class":901},[770,1798,1125],{"class":909},[770,1800,927],{"class":905},[1201,1802,1804],{"icon":174,"label":1803},"Output (excerpt)",[761,1805,1807],{"className":1432,"code":1806,"filename":1434,"language":1435,"meta":766,"style":766},":root {\n    --color--primary: oklch(0.5105731017445265 0.2300533888866952 276.9656355146575 \u002F 1);\n}\n\n.dark-theme, [data-theme=\"dark\"] {\n    --color--primary: oklch(0.6801126030892546 0.15830254166329877 276.9349018357025 \u002F 1);\n    --color--background: oklch(0.20859664921828713 0.01279812659921767 264.24609038177596 \u002F 1);\n}\n",[721,1808,1809,1817,1845,1849,1853,1881,1906,1932],{"__ignoreMap":766},[770,1810,1811,1813,1815],{"class":772,"line":773},[770,1812,1020],{"class":905},[770,1814,1444],{"class":997},[770,1816,935],{"class":905},[770,1818,1819,1822,1824,1827,1829,1832,1835,1838,1841,1843],{"class":772,"line":930},[770,1820,1821],{"class":909},"    --color--primary",[770,1823,1020],{"class":905},[770,1825,1826],{"class":1007}," oklch",[770,1828,1010],{"class":905},[770,1830,1831],{"class":1456},"0.5105731017445265",[770,1833,1834],{"class":1456}," 0.2300533888866952",[770,1836,1837],{"class":1456}," 276.9656355146575",[770,1839,1840],{"class":909}," \u002F ",[770,1842,832],{"class":1456},[770,1844,1502],{"class":905},[770,1846,1847],{"class":772,"line":938},[770,1848,1464],{"class":905},[770,1850,1851],{"class":772,"line":947},[770,1852,991],{"emptyLinePlaceholder":236},[770,1854,1855,1857,1860,1862,1865,1868,1870,1872,1874,1876,1879],{"class":772,"line":955},[770,1856,1473],{"class":905},[770,1858,1859],{"class":776},"dark-theme",[770,1861,1048],{"class":905},[770,1863,1864],{"class":905}," [",[770,1866,1867],{"class":997},"data-theme",[770,1869,1004],{"class":905},[770,1871,924],{"class":905},[770,1873,1578],{"class":780},[770,1875,924],{"class":905},[770,1877,1878],{"class":905},"]",[770,1880,935],{"class":905},[770,1882,1883,1885,1887,1889,1891,1894,1897,1900,1902,1904],{"class":772,"line":963},[770,1884,1821],{"class":909},[770,1886,1020],{"class":905},[770,1888,1826],{"class":1007},[770,1890,1010],{"class":905},[770,1892,1893],{"class":1456},"0.6801126030892546",[770,1895,1896],{"class":1456}," 0.15830254166329877",[770,1898,1899],{"class":1456}," 276.9349018357025",[770,1901,1840],{"class":909},[770,1903,832],{"class":1456},[770,1905,1502],{"class":905},[770,1907,1908,1911,1913,1915,1917,1920,1923,1926,1928,1930],{"class":772,"line":971},[770,1909,1910],{"class":909},"    --color--background",[770,1912,1020],{"class":905},[770,1914,1826],{"class":1007},[770,1916,1010],{"class":905},[770,1918,1919],{"class":1456},"0.20859664921828713",[770,1921,1922],{"class":1456}," 0.01279812659921767",[770,1924,1925],{"class":1456}," 264.24609038177596",[770,1927,1840],{"class":909},[770,1929,832],{"class":1456},[770,1931,1502],{"class":905},[770,1933,1934],{"class":772,"line":988},[770,1935,1464],{"class":905},[1187,1937,1939,1940],{"id":1938},"write-token-references-with","Write token references with ",[721,1941,1942],{},"@",[714,1944,1945,1946,1948],{},"A string value is either a token reference or an arbitrary value, and only the ",[721,1947,1942],{}," at its start tells them apart. Take a margin utility, called with a token and an arbitrary value:",[761,1950,1952],{"className":891,"code":1951,"filename":893,"language":894,"meta":766,"style":766},"import { styleframe } from \"styleframe\";\n\nconst s = styleframe();\nconst { variable, utility } = s;\n\nvariable(\"spacing.md\", \"1rem\");\n\nconst createMarginUtility = utility(\"margin\", ({ value }) => ({\n    margin: value,\n}));\n\ncreateMarginUtility([\"@spacing.md\", \"2rem\"]);\n\nexport default s;\n",[721,1953,1954,1974,1978,1992,2012,2016,2041,2045,2077,2087,2095,2099,2127,2131],{"__ignoreMap":766},[770,1955,1956,1958,1960,1962,1964,1966,1968,1970,1972],{"class":772,"line":773},[770,1957,902],{"class":901},[770,1959,906],{"class":905},[770,1961,910],{"class":909},[770,1963,913],{"class":905},[770,1965,916],{"class":901},[770,1967,919],{"class":905},[770,1969,777],{"class":780},[770,1971,924],{"class":905},[770,1973,927],{"class":905},[770,1975,1976],{"class":772,"line":930},[770,1977,991],{"emptyLinePlaceholder":236},[770,1979,1980,1982,1984,1986,1988,1990],{"class":772,"line":938},[770,1981,998],{"class":997},[770,1983,1001],{"class":909},[770,1985,1004],{"class":905},[770,1987,910],{"class":1007},[770,1989,1245],{"class":909},[770,1991,927],{"class":905},[770,1993,1994,1996,1998,2000,2002,2004,2006,2008,2010],{"class":772,"line":947},[770,1995,998],{"class":997},[770,1997,906],{"class":905},[770,1999,1256],{"class":909},[770,2001,1048],{"class":905},[770,2003,1266],{"class":909},[770,2005,974],{"class":905},[770,2007,1271],{"class":905},[770,2009,1125],{"class":909},[770,2011,927],{"class":905},[770,2013,2014],{"class":772,"line":955},[770,2015,991],{"emptyLinePlaceholder":236},[770,2017,2018,2021,2023,2025,2027,2029,2031,2033,2035,2037,2039],{"class":772,"line":963},[770,2019,2020],{"class":1007},"variable",[770,2022,1010],{"class":909},[770,2024,924],{"class":905},[770,2026,1297],{"class":780},[770,2028,924],{"class":905},[770,2030,1048],{"class":905},[770,2032,919],{"class":905},[770,2034,1306],{"class":780},[770,2036,924],{"class":905},[770,2038,1029],{"class":909},[770,2040,927],{"class":905},[770,2042,2043],{"class":772,"line":971},[770,2044,991],{"emptyLinePlaceholder":236},[770,2046,2047,2049,2051,2053,2055,2057,2059,2061,2063,2065,2067,2069,2071,2073,2075],{"class":772,"line":988},[770,2048,998],{"class":997},[770,2050,1323],{"class":909},[770,2052,1004],{"class":905},[770,2054,1328],{"class":1007},[770,2056,1010],{"class":909},[770,2058,924],{"class":905},[770,2060,1335],{"class":780},[770,2062,924],{"class":905},[770,2064,1048],{"class":905},[770,2066,1342],{"class":905},[770,2068,1346],{"class":1345},[770,2070,1349],{"class":905},[770,2072,1352],{"class":997},[770,2074,1355],{"class":909},[770,2076,1358],{"class":905},[770,2078,2079,2081,2083,2085],{"class":772,"line":994},[770,2080,1363],{"class":1016},[770,2082,1020],{"class":905},[770,2084,1346],{"class":909},[770,2086,944],{"class":905},[770,2088,2089,2091,2093],{"class":772,"line":1034},[770,2090,974],{"class":905},[770,2092,1376],{"class":909},[770,2094,927],{"class":905},[770,2096,2097],{"class":772,"line":1039},[770,2098,991],{"emptyLinePlaceholder":236},[770,2100,2101,2103,2106,2108,2111,2113,2115,2117,2120,2122,2125],{"class":772,"line":1080},[770,2102,1393],{"class":1007},[770,2104,2105],{"class":909},"([",[770,2107,924],{"class":905},[770,2109,2110],{"class":780},"@spacing.md",[770,2112,924],{"class":905},[770,2114,1048],{"class":905},[770,2116,919],{"class":905},[770,2118,2119],{"class":780},"2rem",[770,2121,924],{"class":905},[770,2123,2124],{"class":909},"])",[770,2126,927],{"class":905},[770,2128,2129],{"class":772,"line":1091},[770,2130,991],{"emptyLinePlaceholder":236},[770,2132,2133,2135,2137,2139],{"class":772,"line":1101},[770,2134,1119],{"class":901},[770,2136,1122],{"class":901},[770,2138,1125],{"class":909},[770,2140,927],{"class":905},[714,2142,2143],{},"Here's what each form of value gives with this utility:",[2145,2146,2147,2166],"table",{},[2148,2149,2150],"thead",{},[2151,2152,2153,2157,2160,2163],"tr",{},[2154,2155,2156],"th",{},"Value",[2154,2158,2159],{},"Read as",[2154,2161,2162],{},"Class",[2154,2164,2165],{},"CSS",[2167,2168,2169,2193,2213,2232],"tbody",{},[2151,2170,2171,2177,2183,2188],{},[2172,2173,2174],"td",{},[721,2175,2176],{},"\"@spacing.md\"",[2172,2178,2179,2180,2182],{},"a reference to the ",[721,2181,1297],{}," token",[2172,2184,2185],{},[721,2186,2187],{},"_margin:spacing.md",[2172,2189,2190],{},[721,2191,2192],{},"margin: var(--spacing--md)",[2151,2194,2195,2200,2203,2208],{},[2172,2196,2197],{},[721,2198,2199],{},"\"2rem\"",[2172,2201,2202],{},"an arbitrary value",[2172,2204,2205],{},[721,2206,2207],{},"_margin:[2rem]",[2172,2209,2210],{},[721,2211,2212],{},"margin: 2rem",[2151,2214,2215,2220,2222,2227],{},[2172,2216,2217],{},[721,2218,2219],{},"\"spacing.md\"",[2172,2221,2202],{},[2172,2223,2224],{},[721,2225,2226],{},"_margin:[spacing.md]",[2172,2228,2229],{},[721,2230,2231],{},"margin: spacing.md",[2151,2233,2234,2239,2242,2247],{},[2172,2235,2236],{},[721,2237,2238],{},"\"[4px]\"",[2172,2240,2241],{},"an arbitrary value, wrapped again",[2172,2243,2244],{},[721,2245,2246],{},"_margin:[[4px]]",[2172,2248,2249],{},[721,2250,2251],{},"margin: [4px]",[714,2253,2254,2255,2257,2258,2261,2262,2265],{},"The last two rows are mistakes that build without a warning, and a browser drops both declarations. Write a token path with its ",[721,2256,1942],{},", and an arbitrary value without brackets, since Styleframe adds them to the class name itself. Recipe declarations read values the same way, so ",[721,2259,2260],{},"padding: \"[4px]\""," in a recipe gives ",[721,2263,2264],{},"padding: [4px]"," too.",[714,2267,2268,2269,2271,2272,2274,2275,2278],{},"In a utility created with an array, like the one above, or in a recipe, a reference with ",[721,2270,1942],{}," to a token that doesn't exist is the one mistake here that ",[721,2273,828],{}," does catch, as ",[721,2276,2277],{},"unresolved-reference",". In a selector, a theme declaration or a utility created with an object, the same reference throws when you define it, so the build stops there.",[1187,2280,2282],{"id":2281},"register-modifiers-before-a-recipe-uses-them","Register modifiers before a recipe uses them",[714,2284,2285,2286,1155,2289,2292,2293,2296],{},"A recipe can style a pseudo-element with a key like ",[721,2287,2288],{},"&:after",[721,2290,2291],{},"&::after",", or a state with ",[721,2294,2295],{},"&:hover",". Each key needs its modifier registered first, or the build fails:",[761,2298,2301],{"className":2299,"code":2300,"language":1538},[1536],"Error: [styleframe] Modifier \"after\" not found in registry. Make sure the modifier is registered before using it in a recipe.\n",[721,2302,2300],{"__ignoreMap":766},[714,2304,787,2305,2308,2309,1020],{},[721,2306,2307],{},"useModifiersPreset()"," function registers the pseudo-element modifiers along with the others. To register only those, call ",[721,2310,2311],{},"usePseudoElementModifiers()",[1198,2313,2314,2556],{},[1201,2315,2316],{"icon":1203,"label":303},[761,2317,2319],{"className":891,"code":2318,"filename":893,"language":894,"meta":766,"style":766},"import { styleframe } from \"styleframe\";\nimport {\n    useDesignTokensPreset,\n    useModifiersPreset,\n    useUtilitiesPreset,\n} from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { recipe } = s;\n\nuseDesignTokensPreset(s);\nuseModifiersPreset(s);\nuseUtilitiesPreset(s);\n\nrecipe({\n    name: \"card\",\n    base: {\n        position: \"relative\",\n        \"&::after\": { opacity: \"0.5\" },\n    },\n});\n\nexport default s;\n",[721,2320,2321,2341,2347,2353,2359,2365,2379,2383,2397,2414,2418,2426,2434,2442,2446,2455,2471,2481,2498,2526,2531,2540,2545],{"__ignoreMap":766},[770,2322,2323,2325,2327,2329,2331,2333,2335,2337,2339],{"class":772,"line":773},[770,2324,902],{"class":901},[770,2326,906],{"class":905},[770,2328,910],{"class":909},[770,2330,913],{"class":905},[770,2332,916],{"class":901},[770,2334,919],{"class":905},[770,2336,777],{"class":780},[770,2338,924],{"class":905},[770,2340,927],{"class":905},[770,2342,2343,2345],{"class":772,"line":930},[770,2344,902],{"class":901},[770,2346,935],{"class":905},[770,2348,2349,2351],{"class":772,"line":938},[770,2350,950],{"class":909},[770,2352,944],{"class":905},[770,2354,2355,2357],{"class":772,"line":947},[770,2356,958],{"class":909},[770,2358,944],{"class":905},[770,2360,2361,2363],{"class":772,"line":955},[770,2362,966],{"class":909},[770,2364,944],{"class":905},[770,2366,2367,2369,2371,2373,2375,2377],{"class":772,"line":963},[770,2368,974],{"class":905},[770,2370,916],{"class":901},[770,2372,919],{"class":905},[770,2374,981],{"class":780},[770,2376,924],{"class":905},[770,2378,927],{"class":905},[770,2380,2381],{"class":772,"line":971},[770,2382,991],{"emptyLinePlaceholder":236},[770,2384,2385,2387,2389,2391,2393,2395],{"class":772,"line":988},[770,2386,998],{"class":997},[770,2388,1001],{"class":909},[770,2390,1004],{"class":905},[770,2392,910],{"class":1007},[770,2394,1245],{"class":909},[770,2396,927],{"class":905},[770,2398,2399,2401,2403,2406,2408,2410,2412],{"class":772,"line":994},[770,2400,998],{"class":997},[770,2402,906],{"class":905},[770,2404,2405],{"class":909}," recipe ",[770,2407,974],{"class":905},[770,2409,1271],{"class":905},[770,2411,1125],{"class":909},[770,2413,927],{"class":905},[770,2415,2416],{"class":772,"line":1034},[770,2417,991],{"emptyLinePlaceholder":236},[770,2419,2420,2422,2424],{"class":772,"line":1039},[770,2421,1042],{"class":1007},[770,2423,1086],{"class":909},[770,2425,927],{"class":905},[770,2427,2428,2430,2432],{"class":772,"line":1080},[770,2429,1083],{"class":1007},[770,2431,1086],{"class":909},[770,2433,927],{"class":905},[770,2435,2436,2438,2440],{"class":772,"line":1091},[770,2437,1094],{"class":1007},[770,2439,1086],{"class":909},[770,2441,927],{"class":905},[770,2443,2444],{"class":772,"line":1101},[770,2445,991],{"emptyLinePlaceholder":236},[770,2447,2448,2451,2453],{"class":772,"line":1111},[770,2449,2450],{"class":1007},"recipe",[770,2452,1010],{"class":909},[770,2454,1358],{"class":905},[770,2456,2457,2460,2462,2464,2467,2469],{"class":772,"line":1116},[770,2458,2459],{"class":1016},"    name",[770,2461,1020],{"class":905},[770,2463,919],{"class":905},[770,2465,2466],{"class":780},"card",[770,2468,924],{"class":905},[770,2470,944],{"class":905},[770,2472,2474,2477,2479],{"class":772,"line":2473},17,[770,2475,2476],{"class":1016},"    base",[770,2478,1020],{"class":905},[770,2480,935],{"class":905},[770,2482,2484,2487,2489,2491,2494,2496],{"class":772,"line":2483},18,[770,2485,2486],{"class":1016},"        position",[770,2488,1020],{"class":905},[770,2490,919],{"class":905},[770,2492,2493],{"class":780},"relative",[770,2495,924],{"class":905},[770,2497,944],{"class":905},[770,2499,2501,2504,2506,2508,2510,2512,2515,2517,2519,2522,2524],{"class":772,"line":2500},19,[770,2502,2503],{"class":905},"        \"",[770,2505,2291],{"class":1016},[770,2507,924],{"class":905},[770,2509,1020],{"class":905},[770,2511,906],{"class":905},[770,2513,2514],{"class":1016}," opacity",[770,2516,1020],{"class":905},[770,2518,919],{"class":905},[770,2520,2521],{"class":780},"0.5",[770,2523,924],{"class":905},[770,2525,1727],{"class":905},[770,2527,2529],{"class":772,"line":2528},20,[770,2530,1778],{"class":905},[770,2532,2534,2536,2538],{"class":772,"line":2533},21,[770,2535,974],{"class":905},[770,2537,1029],{"class":909},[770,2539,927],{"class":905},[770,2541,2543],{"class":772,"line":2542},22,[770,2544,991],{"emptyLinePlaceholder":236},[770,2546,2548,2550,2552,2554],{"class":772,"line":2547},23,[770,2549,1119],{"class":901},[770,2551,1122],{"class":901},[770,2553,1125],{"class":909},[770,2555,927],{"class":905},[1201,2557,2558],{"icon":174,"label":1803},[761,2559,2561],{"className":1432,"code":2560,"filename":1434,"language":1435,"meta":766,"style":766},"._after\\:opacity\\:\\[0\\.5\\] {\n    &::after {\n        content: '';\n        opacity: 0.5;\n    }\n}\n",[721,2562,2563,2591,2601,2611,2623,2628],{"__ignoreMap":766},[770,2564,2565,2567,2570,2572,2575,2578,2580,2583,2586,2589],{"class":772,"line":773},[770,2566,1473],{"class":905},[770,2568,2569],{"class":776},"_after",[770,2571,1479],{"class":909},[770,2573,2574],{"class":776},"opacity",[770,2576,2577],{"class":909},"\\:\\[",[770,2579,723],{"class":776},[770,2581,2582],{"class":909},"\\.",[770,2584,2585],{"class":776},"5",[770,2587,2588],{"class":909},"\\] ",[770,2590,1358],{"class":905},[770,2592,2593,2596,2598],{"class":772,"line":930},[770,2594,2595],{"class":909},"    &",[770,2597,1020],{"class":905},[770,2599,2600],{"class":909},":after {\n",[770,2602,2603,2606,2609],{"class":772,"line":938},[770,2604,2605],{"class":909},"        content: ",[770,2607,2608],{"class":905},"''",[770,2610,927],{"class":905},[770,2612,2613,2616,2618,2621],{"class":772,"line":947},[770,2614,2615],{"class":1489},"        opacity",[770,2617,1020],{"class":905},[770,2619,2620],{"class":1456}," 0.5",[770,2622,927],{"class":905},[770,2624,2625],{"class":772,"line":955},[770,2626,2627],{"class":905},"    }\n",[770,2629,2630],{"class":772,"line":963},[770,2631,1464],{"class":909},[1187,2633,2635],{"id":2634},"colour-levels-are-fixed-values","Colour levels are fixed values",[714,2637,2638,2639,1524,2642,2645,2646,2649,2650,2653,2654,2657,2658,2661],{},"The design-tokens preset turns each colour into levels, shades and tints, like ",[721,2640,2641],{},"color.primary-50",[721,2643,2644],{},"color.primary-shade-50",". These are fixed ",[721,2647,2648],{},"oklch()"," values, computed when the config builds, not ",[721,2651,2652],{},"oklch(from var(--color--primary) …)",". So overriding ",[721,2655,2656],{},"--color--primary"," on its own, in your CSS or in a ",[721,2659,2660],{},"theme()",", leaves its levels as they were:",[1198,2663,2664,2873],{},[1201,2665,2666],{"icon":1203,"label":303},[761,2667,2669],{"className":891,"code":2668,"filename":893,"language":894,"meta":766,"style":766},"import { styleframe } from \"styleframe\";\nimport { useDesignTokensPreset } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { theme } = s;\n\nuseDesignTokensPreset(s, { colors: { primary: \"#4f46e5\" } });\n\n\u002F\u002F Overrides color.primary only. color.primary-50 and the rest keep their values.\ntheme(\"brand\", (ctx) => {\n    ctx.variable(\"color.primary\", \"#e11d48\");\n});\n\nexport default s;\n",[721,2670,2671,2691,2711,2715,2729,2746,2750,2784,2788,2793,2820,2851,2859,2863],{"__ignoreMap":766},[770,2672,2673,2675,2677,2679,2681,2683,2685,2687,2689],{"class":772,"line":773},[770,2674,902],{"class":901},[770,2676,906],{"class":905},[770,2678,910],{"class":909},[770,2680,913],{"class":905},[770,2682,916],{"class":901},[770,2684,919],{"class":905},[770,2686,777],{"class":780},[770,2688,924],{"class":905},[770,2690,927],{"class":905},[770,2692,2693,2695,2697,2699,2701,2703,2705,2707,2709],{"class":772,"line":930},[770,2694,902],{"class":901},[770,2696,906],{"class":905},[770,2698,1661],{"class":909},[770,2700,913],{"class":905},[770,2702,916],{"class":901},[770,2704,919],{"class":905},[770,2706,981],{"class":780},[770,2708,924],{"class":905},[770,2710,927],{"class":905},[770,2712,2713],{"class":772,"line":938},[770,2714,991],{"emptyLinePlaceholder":236},[770,2716,2717,2719,2721,2723,2725,2727],{"class":772,"line":947},[770,2718,998],{"class":997},[770,2720,1001],{"class":909},[770,2722,1004],{"class":905},[770,2724,910],{"class":1007},[770,2726,1245],{"class":909},[770,2728,927],{"class":905},[770,2730,2731,2733,2735,2738,2740,2742,2744],{"class":772,"line":955},[770,2732,998],{"class":997},[770,2734,906],{"class":905},[770,2736,2737],{"class":909}," theme ",[770,2739,974],{"class":905},[770,2741,1271],{"class":905},[770,2743,1125],{"class":909},[770,2745,927],{"class":905},[770,2747,2748],{"class":772,"line":963},[770,2749,991],{"emptyLinePlaceholder":236},[770,2751,2752,2754,2756,2758,2760,2762,2764,2766,2768,2770,2772,2774,2776,2778,2780,2782],{"class":772,"line":971},[770,2753,1042],{"class":1007},[770,2755,1045],{"class":909},[770,2757,1048],{"class":905},[770,2759,906],{"class":905},[770,2761,1053],{"class":1016},[770,2763,1020],{"class":905},[770,2765,906],{"class":905},[770,2767,1060],{"class":1016},[770,2769,1020],{"class":905},[770,2771,919],{"class":905},[770,2773,1067],{"class":780},[770,2775,924],{"class":905},[770,2777,913],{"class":905},[770,2779,913],{"class":905},[770,2781,1029],{"class":909},[770,2783,927],{"class":905},[770,2785,2786],{"class":772,"line":988},[770,2787,991],{"emptyLinePlaceholder":236},[770,2789,2790],{"class":772,"line":994},[770,2791,2792],{"class":1387},"\u002F\u002F Overrides color.primary only. color.primary-50 and the rest keep their values.\n",[770,2794,2795,2798,2800,2802,2805,2807,2809,2811,2814,2816,2818],{"class":772,"line":1034},[770,2796,2797],{"class":1007},"theme",[770,2799,1010],{"class":909},[770,2801,924],{"class":905},[770,2803,2804],{"class":780},"brand",[770,2806,924],{"class":905},[770,2808,1048],{"class":905},[770,2810,1355],{"class":905},[770,2812,2813],{"class":1345},"ctx",[770,2815,1029],{"class":905},[770,2817,1352],{"class":997},[770,2819,935],{"class":905},[770,2821,2822,2825,2827,2829,2831,2833,2836,2838,2840,2842,2845,2847,2849],{"class":772,"line":1039},[770,2823,2824],{"class":909},"    ctx",[770,2826,1473],{"class":905},[770,2828,2020],{"class":1007},[770,2830,1010],{"class":1016},[770,2832,924],{"class":905},[770,2834,2835],{"class":780},"color.primary",[770,2837,924],{"class":905},[770,2839,1048],{"class":905},[770,2841,919],{"class":905},[770,2843,2844],{"class":780},"#e11d48",[770,2846,924],{"class":905},[770,2848,1029],{"class":1016},[770,2850,927],{"class":905},[770,2852,2853,2855,2857],{"class":772,"line":1080},[770,2854,974],{"class":905},[770,2856,1029],{"class":909},[770,2858,927],{"class":905},[770,2860,2861],{"class":772,"line":1091},[770,2862,991],{"emptyLinePlaceholder":236},[770,2864,2865,2867,2869,2871],{"class":772,"line":1101},[770,2866,1119],{"class":901},[770,2868,1122],{"class":901},[770,2870,1125],{"class":909},[770,2872,927],{"class":905},[1201,2874,2875],{"icon":174,"label":1803},[761,2876,2878],{"className":1432,"code":2877,"filename":1434,"language":1435,"meta":766,"style":766},":root {\n    --color--primary: oklch(0.5105731017445265 0.2300533888866952 276.9656355146575 \u002F 1);\n    --color--primary-50: oklch(0.97 0.0118 276.97 \u002F 1);\n}\n\n.brand-theme, [data-theme=\"brand\"] {\n    --color--primary: #e11d48;\n}\n",[721,2879,2880,2888,2910,2936,2940,2944,2969,2983],{"__ignoreMap":766},[770,2881,2882,2884,2886],{"class":772,"line":773},[770,2883,1020],{"class":905},[770,2885,1444],{"class":997},[770,2887,935],{"class":905},[770,2889,2890,2892,2894,2896,2898,2900,2902,2904,2906,2908],{"class":772,"line":930},[770,2891,1821],{"class":909},[770,2893,1020],{"class":905},[770,2895,1826],{"class":1007},[770,2897,1010],{"class":905},[770,2899,1831],{"class":1456},[770,2901,1834],{"class":1456},[770,2903,1837],{"class":1456},[770,2905,1840],{"class":909},[770,2907,832],{"class":1456},[770,2909,1502],{"class":905},[770,2911,2912,2915,2917,2919,2921,2924,2927,2930,2932,2934],{"class":772,"line":938},[770,2913,2914],{"class":909},"    --color--primary-50",[770,2916,1020],{"class":905},[770,2918,1826],{"class":1007},[770,2920,1010],{"class":905},[770,2922,2923],{"class":1456},"0.97",[770,2925,2926],{"class":1456}," 0.0118",[770,2928,2929],{"class":1456}," 276.97",[770,2931,1840],{"class":909},[770,2933,832],{"class":1456},[770,2935,1502],{"class":905},[770,2937,2938],{"class":772,"line":947},[770,2939,1464],{"class":905},[770,2941,2942],{"class":772,"line":955},[770,2943,991],{"emptyLinePlaceholder":236},[770,2945,2946,2948,2951,2953,2955,2957,2959,2961,2963,2965,2967],{"class":772,"line":963},[770,2947,1473],{"class":905},[770,2949,2950],{"class":776},"brand-theme",[770,2952,1048],{"class":905},[770,2954,1864],{"class":905},[770,2956,1867],{"class":997},[770,2958,1004],{"class":905},[770,2960,924],{"class":905},[770,2962,2804],{"class":780},[770,2964,924],{"class":905},[770,2966,1878],{"class":905},[770,2968,935],{"class":905},[770,2970,2971,2973,2975,2978,2981],{"class":772,"line":971},[770,2972,1821],{"class":909},[770,2974,1020],{"class":905},[770,2976,2977],{"class":905}," #",[770,2979,2980],{"class":909},"e11d48",[770,2982,927],{"class":905},[770,2984,2985],{"class":772,"line":988},[770,2986,1464],{"class":905},[714,2988,2989,2990,2992,2993,2997],{},"To change a colour together with its levels, pass the new value to the preset instead, at the root or under ",[721,2991,1582],{},", as in ",[789,2994,2996],{"href":2995},"#check-the-dark-theme-the-preset-adds","the dark theme example",". The preset then computes the theme's levels from it.",[1187,2999,3001],{"id":3000},"register-utilities-before-recipes","Register utilities before recipes",[714,3003,3004],{},"A recipe turns each declaration into a utility class, so the utilities it uses must be registered before it. A recipe defined first fails the build:",[761,3006,3009],{"className":3007,"code":3008,"language":1538},[1536],"Error: [styleframe] Utility \"display\" not found in registry. Make sure the utility is registered before using it in a recipe.\n",[721,3010,3008],{"__ignoreMap":766},[714,3012,3013],{},"Keep the order of the examples on this page: design tokens, then modifiers and utilities, then recipes.",[710,3015,3017],{"id":3016},"best-practices","Best Practices",[729,3019,3020,3029,3038,3047],{},[732,3021,3022,3028],{},[735,3023,3024,3025,3027],{},"Run ",[721,3026,828],{}," after every change",": it reports every problem in one pass, so the agent fixes them all at once instead of one per build.",[732,3030,3031,3037],{},[735,3032,3033,3034,3036],{},"Turn on ",[721,3035,1132],{}," once your config is clean",": a build that fails on a problem is one an agent can't miss.",[732,3039,3040,3043,3044,3046],{},[735,3041,3042],{},"Read the registry before writing",": ",[721,3045,1165],{}," gives the real token names and variant options, which is better than guessing them from the docs.",[732,3048,3049,3052,3053,3056],{},[735,3050,3051],{},"Read the output as well as the exit code",": for the mistakes above, open the generated ",[721,3054,3055],{},"index.css"," and look for the classes and values you expect.",[710,3058,3060],{"id":3059},"faq","FAQ",[3062,3063,3064,3085,3089],"accordion",{},[3065,3066,3069,3070,3076,3077,3082,3083,1473],"accordion-item",{"icon":3067,"label":3068},"i-lucide-circle-help","Where can an agent read these docs?","At ",[789,3071,3075],{"href":3072,"rel":3073},"https:\u002F\u002Fstyleframe.dev\u002Fllms.txt",[3074],"nofollow","styleframe.dev\u002Fllms.txt",", which lists every page of these docs with a short description, this one included, and ",[789,3078,3081],{"href":3079,"rel":3080},"https:\u002F\u002Fstyleframe.dev\u002Fllms-full.txt",[3074],"styleframe.dev\u002Fllms-full.txt",", which holds the full text of every page. Point your agent at one of them, or at this page, from your project's ",[721,3084,1154],{},[3065,3086,3088],{"icon":3067,"label":3087},"Why doesn't check report an uncalled utility creator?","Because the presets register many utilities without calling them, so a check today couldn't tell your forgotten creator from theirs. Until it can, read the generated CSS for the classes you expect.",[3065,3090,3092,3093,3095],{"icon":3067,"label":3091},"Does strict change the CSS?","No. A config with no problems builds the same CSS with or without ",[721,3094,1132],{},". It only decides whether a problem is a warning or an error.",[3097,3098,3099],"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 .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 .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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":766,"searchDepth":930,"depth":930,"links":3101},[3102,3103,3104,3114,3115],{"id":712,"depth":930,"text":93},{"id":747,"depth":930,"text":737},{"id":1173,"depth":930,"text":743,"children":3105},[3106,3107,3108,3109,3111,3112,3113],{"id":1189,"depth":938,"text":1190},{"id":1516,"depth":938,"text":1517},{"id":1571,"depth":938,"text":1572},{"id":1938,"depth":938,"text":3110},"Write token references with @",{"id":2281,"depth":938,"text":2282},{"id":2634,"depth":938,"text":2635},{"id":3000,"depth":938,"text":3001},{"id":3016,"depth":930,"text":3017},{"id":3059,"depth":930,"text":3060},"Give a coding agent a loop it can trust, with check, inspect and strict builds, and the mistakes to watch for when it writes a Styleframe config.",null,{},{"title":52,"icon":55},{"title":705,"description":3116},"zuHkGE3Yoj01BdVSidpI9QH2B74Ierl2DSCKahcO9VM",[3123,3117],{"title":47,"path":48,"stem":49,"description":3124,"icon":50,"children":-1},"Automatically detect utility class names in your source files and generate the corresponding CSS at build time — no manual value definitions needed.",1792580177256]