@exponential-at/ui 0.0.0-stage → 0.1.0

package/catalog/macros.json

@@ -0,0 +1,3417 @@
+{
+  "$comment": "VAPP-85: the ONE declarative macro table. A macro component (core.catalog.json `kind: macro`) expands into this template before painting; the TS reference expander (src/macros.ts) and the Rust core apply the same table and fixtures/catalog-macros.json locks the output. Template node = { part, component, props?, style?, children?, slots?, $if?, $any?, $each?, $as?, $on?, $context?, $set?, $recipe?, $a11y? }. Values: `\"{props.x}\"` alone = the raw prop (a data BINDING passes through untouched, so two-way binding survives); `\"{props.x|fallback}\"` = with a default; `{…}` inside a longer string interpolates; `{id}` = the macro node's id; `{len(props.rows)}` = an array length; `{range(props.max|5)}` = the indexes 0..n-1 (for `$each`); `{index}` = the current $each index; `{!path}` negates. Value objects: $map {from, cases, default}, $cond [condition, then, else], $eq [a, b] (a number equals a string spelling it), $lt [a, b], $add [a, b], $sub [a, b], $clamp [value, min, max] (a missing bound does not clamp), $percent [value, max] (→ \"N%\"), $coalesce [a, b, …], $text value (→ the value as a string, absent when missing), $not condition, $fill [template, {name: value}] (ALWAYS emits the core `fill` call: the template is usually a `$string.<id>` sentence with `{name}` placeholders the surface's string table resolves at bind time). Object KEYS interpolate too (`\"@media (max-width: $breakpoint.{props.collapseBelow|md})\"`). `$if` = a condition or an array of conditions (all must hold); `$any` = an array where one must hold. `$each` repeats a part per item of an array (`$as` names the item, default `item`). Children: `\"$children\"` splices the author's children, `\"$slot:name\"` splices an author slot in place; `slots: {\"trigger\": \"$slot:trigger\"}` copies an author slot, `slots: {\"footer\": {template node}}` builds one as a part. `$on: {\"press\": \"change\"}` routes the author's `on.change` handler to this part's `press` (merging `$context` into an event action's context); without `$on` the author's `on` map stays on the root. `$set: {\"press\": {\"prop\": \"open\", \"value\": \"{!props.open}\"}}` = TWO-WAY BINDING (round 1): when the author's `props.open` is a data binding `{path}`, this part's `press` action also carries `functionCall: {call: \"set\", args: {path, value}}` (the value evaluated like any template value, so usually a call), key order `event` then `functionCall`; a literal prop adds nothing (the host owns the state through the routed event); when the author's routed handler is itself a FUNCTION (an Action carries one), it wins, no `set` is added and the reducer reports an issue. `$a11y: {role, label, description, level, expanded, current, selected, pressed, checked, valueNow, valueMin, valueMax, hidden, autoFocus}` = the part's ACCESSIBILITY (docs/round-1-contract.md §6): evaluated like props (a bound input emits a call) into the expanded node's `accessibility`; `role` is one of catalog/a11y.json `roles`; on the root the author's `accessibility` label/description win. Ids: the root keeps the author's id, parts get `<id>.<part>` and `<id>.<part>.<index>` under `$each`. Every expanded node carries `recipe: {macro, part, props}` where props = `recipeProps` evaluated from the author's props (+ a part's `$recipe`); the THEME (VAPP-92) keys its visual recipes on that, so nothing here states a colour, a border or a font — only structure and token-named spacing, radius and control heights. Macros may use other macros (Row → TreeGuides); expansion recurses until every node is native (innermost recipe wins). ROUND 1 (docs/round-1-contract.md §1, BOUND INPUTS): when an expression input is a data binding `{path}` or a function call, the expander does NOT evaluate — it EMITS an A2UI function call the renderer evaluates at bind time, over the core functions: interpolation → concat, `|fallback` → fallback (as an operand; a whole-string MEMBER of props/style/context passes the binding itself through, so two-way binding survives), `!` → not, len → len, $map → map, $cond → cond, $eq → eq, $lt → lt, $add → add, $sub → sub, $percent → percent, $text → text, $coalesce → coalesce, $not → not; a `$if`/`$any` whose conditions are bound emits the part WITH `visible` = the bound condition (`and{values}` over several bound `$if`s, `or{values}` over several bound `$any`s; literal conditions still decide at expansion); `$each` over a bound array emits nothing (use List with a template); a `$recipe` value may therefore be a call too (renderers resolve recipe props like props). RESPONSIVE PROPS: an author prop `{base, sm?, md?, lg?, xl?}` on a `responsive` prop is evaluated per breakpoint: a part's style is computed with the `base` values, then once per breakpoint named (ascending sm<md<lg<xl, each key inheriting the last smaller one) and every key that changed lands in a `\"@media (min-width: $breakpoint.<bp>)\"` block of that part; props and conditions see the `base` value. Strings of the form `$string.<id>` (catalog/strings.json) are built-in UI copy the renderer shows in the surface locale. Round 3 (VAPP-102): AFTER the table is applied the core runs ONE post-expansion pass, src/tree-guides.ts applyTreeGuides (Rust: tree_guides::apply): over every node's children in order, each Row root (`recipe.macro` Row, part root) contributes its numeric `recipe.props.depth` (anything else counts as depth 0 and ends every subtree), the ×4 treeGuides rule (elbow at depth-1, tee while a later sibling follows, pass-through for every ancestor level that continues) fills the Row's `guides` part (a TreeGuides) with `elbowAt`/`tee`/`passThrough`; fixtures/tree-guides.json locks the rule, catalog-macros.json the filled trees.",
+  "macros": {
+    "Stack": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": {
+            "$map": {
+              "from": "props.direction",
+              "cases": {
+                "horizontal": "row"
+              },
+              "default": "column"
+            }
+          },
+          "flexWrap": {
+            "$cond": [
+              "props.wrap",
+              "wrap",
+              "nowrap"
+            ]
+          },
+          "gap": "$spacing.{props.gap|md}",
+          "alignItems": {
+            "$coalesce": [
+              "{props.align}",
+              {
+                "$map": {
+                  "from": "props.direction",
+                  "cases": {
+                    "horizontal": "center"
+                  },
+                  "default": "stretch"
+                }
+              }
+            ]
+          },
+          "justifyContent": {
+            "$map": {
+              "from": "props.justify",
+              "cases": {
+                "between": "space-between",
+                "around": "space-around",
+                "evenly": "space-evenly"
+              },
+              "default": "{props.justify|start}"
+            }
+          }
+        },
+        "children": [
+          "$children"
+        ]
+      }
+    },
+    "Grid": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "grid",
+          "gridTemplateColumns": "repeat({props.columns|2}, minmax(0, 1fr))",
+          "gap": "$spacing.{props.gap|md}"
+        },
+        "children": [
+          "$children"
+        ]
+      }
+    },
+    "Card": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "group",
+          "label": "{props.title}"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "borderRadius": "$radius.xl",
+          "overflow": "hidden"
+        },
+        "children": [
+          {
+            "part": "header",
+            "component": "Box",
+            "$any": [
+              "props.title",
+              "props.description"
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "gap": "$spacing.xxs",
+              "paddingTop": "$spacing.lg",
+              "paddingHorizontal": "$spacing.lg"
+            },
+            "children": [
+              {
+                "part": "title",
+                "component": "Text",
+                "$if": "props.title",
+                "props": {
+                  "text": "{props.title}",
+                  "variant": "title"
+                }
+              },
+              {
+                "part": "description",
+                "component": "Text",
+                "$if": "props.description",
+                "props": {
+                  "text": "{props.description}",
+                  "variant": "muted"
+                }
+              }
+            ]
+          },
+          {
+            "part": "body",
+            "component": "Box",
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "gap": "$spacing.md",
+              "padding": {
+                "$map": {
+                  "from": "props.padded",
+                  "cases": {
+                    "false": "$spacing.none"
+                  },
+                  "default": "$spacing.lg"
+                }
+              }
+            },
+            "children": [
+              "$children"
+            ]
+          }
+        ]
+      }
+    },
+    "Separator": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "separator"
+        },
+        "style": {
+          "alignSelf": "stretch",
+          "flexShrink": 0,
+          "width": {
+            "$map": {
+              "from": "props.orientation",
+              "cases": {
+                "vertical": 1
+              },
+              "default": "auto"
+            }
+          },
+          "height": {
+            "$map": {
+              "from": "props.orientation",
+              "cases": {
+                "vertical": "auto"
+              },
+              "default": 1
+            }
+          }
+        }
+      }
+    },
+    "Section": {
+      "recipeProps": [
+        "tint",
+        "tree",
+        "open",
+        "collapsible"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.sm"
+        },
+        "children": [
+          {
+            "part": "header",
+            "component": "Box",
+            "$if": [
+              "props.title",
+              {
+                "$not": "props.collapsible"
+              }
+            ],
+            "$a11y": {
+              "role": "heading",
+              "level": 3
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.sm",
+              "height": "$control.row",
+              "paddingHorizontal": "$spacing.md",
+              "borderRadius": "$radius.md"
+            },
+            "children": [
+              {
+                "part": "chevron",
+                "component": "Icon",
+                "$if": "props.collapsible",
+                "props": {
+                  "name": "ui-chevron-right",
+                  "size": "sm",
+                  "tone": "neutral"
+                }
+              },
+              "$slot:leading",
+              {
+                "part": "icon",
+                "component": "Icon",
+                "$if": "props.icon",
+                "props": {
+                  "name": "{props.icon}",
+                  "size": "sm"
+                }
+              },
+              {
+                "part": "title",
+                "component": "Text",
+                "props": {
+                  "text": "{props.title}",
+                  "variant": "label",
+                  "lines": 1
+                },
+                "style": {
+                  "flexShrink": 1,
+                  "minWidth": 0
+                }
+              },
+              {
+                "part": "caption",
+                "component": "Text",
+                "$if": "props.caption",
+                "props": {
+                  "text": "{props.caption}",
+                  "variant": "muted",
+                  "lines": 1
+                },
+                "style": {
+                  "flexShrink": 1,
+                  "minWidth": 0
+                }
+              },
+              {
+                "part": "loading",
+                "component": "Spinner",
+                "$if": "props.loading",
+                "props": {
+                  "size": "xs",
+                  "label": "$string.loading"
+                }
+              },
+              {
+                "part": "count",
+                "component": "Text",
+                "$if": "props.count",
+                "props": {
+                  "text": {
+                    "$text": "props.count"
+                  },
+                  "variant": "muted"
+                }
+              },
+              {
+                "part": "spacer",
+                "component": "Box",
+                "style": {
+                  "flexGrow": 1,
+                  "minWidth": 0
+                }
+              },
+              "$slot:trailing"
+            ]
+          },
+          {
+            "part": "header",
+            "component": "Box",
+            "$if": [
+              "props.title",
+              "props.collapsible"
+            ],
+            "$a11y": {
+              "role": "button",
+              "expanded": "{props.open|true}"
+            },
+            "props": {
+              "pressable": true
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.sm",
+              "height": "$control.row",
+              "paddingHorizontal": "$spacing.md",
+              "borderRadius": "$radius.md"
+            },
+            "$on": {
+              "press": "change"
+            },
+            "$context": {
+              "open": {
+                "$not": "props.open|true"
+              }
+            },
+            "$set": {
+              "press": {
+                "prop": "open",
+                "value": {
+                  "$not": "props.open|true"
+                }
+              }
+            },
+            "children": [
+              {
+                "part": "chevron",
+                "component": "Icon",
+                "$if": "props.collapsible",
+                "props": {
+                  "name": "ui-chevron-right",
+                  "size": "sm",
+                  "tone": "neutral"
+                }
+              },
+              "$slot:leading",
+              {
+                "part": "icon",
+                "component": "Icon",
+                "$if": "props.icon",
+                "props": {
+                  "name": "{props.icon}",
+                  "size": "sm"
+                }
+              },
+              {
+                "part": "title",
+                "component": "Text",
+                "props": {
+                  "text": "{props.title}",
+                  "variant": "label",
+                  "lines": 1
+                },
+                "style": {
+                  "flexShrink": 1,
+                  "minWidth": 0
+                }
+              },
+              {
+                "part": "caption",
+                "component": "Text",
+                "$if": "props.caption",
+                "props": {
+                  "text": "{props.caption}",
+                  "variant": "muted",
+                  "lines": 1
+                },
+                "style": {
+                  "flexShrink": 1,
+                  "minWidth": 0
+                }
+              },
+              {
+                "part": "loading",
+                "component": "Spinner",
+                "$if": "props.loading",
+                "props": {
+                  "size": "xs",
+                  "label": "$string.loading"
+                }
+              },
+              {
+                "part": "count",
+                "component": "Text",
+                "$if": "props.count",
+                "props": {
+                  "text": {
+                    "$text": "props.count"
+                  },
+                  "variant": "muted"
+                }
+              },
+              {
+                "part": "spacer",
+                "component": "Box",
+                "style": {
+                  "flexGrow": 1,
+                  "minWidth": 0
+                }
+              },
+              "$slot:trailing"
+            ]
+          },
+          {
+            "part": "body",
+            "component": "List",
+            "$if": "props.open|true",
+            "$a11y": {
+              "role": {
+                "$cond": [
+                  "props.tree",
+                  "tree",
+                  "list"
+                ]
+              }
+            },
+            "props": {
+              "divided": true,
+              "gap": "none",
+              "style": "{props.style}"
+            },
+            "children": [
+              "$children"
+            ]
+          }
+        ]
+      }
+    },
+    "Group": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "group",
+          "label": "{props.title}",
+          "description": "{props.footer}"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.xs"
+        },
+        "children": [
+          {
+            "part": "title",
+            "component": "Text",
+            "$if": "props.title",
+            "props": {
+              "text": "{props.title}",
+              "variant": "label"
+            },
+            "style": {
+              "paddingHorizontal": "$spacing.md"
+            }
+          },
+          {
+            "part": "body",
+            "component": "Box",
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "borderRadius": "$radius.lg",
+              "overflow": "hidden"
+            },
+            "children": [
+              "$children"
+            ]
+          },
+          {
+            "part": "footer",
+            "component": "Text",
+            "$if": "props.footer",
+            "props": {
+              "text": "{props.footer}",
+              "variant": "muted"
+            },
+            "style": {
+              "paddingHorizontal": "$spacing.md"
+            }
+          }
+        ]
+      }
+    },
+    "Heading": {
+      "recipeProps": [
+        "level"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Text",
+        "$a11y": {
+          "role": "heading",
+          "level": {
+            "$map": {
+              "from": "props.level",
+              "cases": {
+                "h1": 1,
+                "h2": 2,
+                "h3": 3,
+                "h4": 4
+              },
+              "default": 2
+            }
+          }
+        },
+        "props": {
+          "text": "{props.text}",
+          "variant": "title"
+        }
+      }
+    },
+    "Collapsible": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.xs"
+        },
+        "children": [
+          {
+            "part": "trigger",
+            "component": "Box",
+            "$a11y": {
+              "role": "button",
+              "expanded": "{props.open|false}"
+            },
+            "props": {
+              "pressable": true
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.sm",
+              "minHeight": "$control.row",
+              "paddingHorizontal": "$spacing.sm",
+              "borderRadius": "$radius.md"
+            },
+            "$recipe": {
+              "open": "{props.open|false}"
+            },
+            "$on": {
+              "press": "change"
+            },
+            "$context": {
+              "open": "{!props.open}"
+            },
+            "$set": {
+              "press": {
+                "prop": "open",
+                "value": "{!props.open}"
+              }
+            },
+            "children": [
+              {
+                "part": "chevron",
+                "component": "Icon",
+                "props": {
+                  "name": "ui-chevron-right",
+                  "size": "sm",
+                  "tone": "neutral"
+                },
+                "$recipe": {
+                  "open": "{props.open|false}"
+                }
+              },
+              {
+                "part": "title",
+                "component": "Text",
+                "props": {
+                  "text": "{props.title}",
+                  "variant": "label",
+                  "lines": 1
+                },
+                "style": {
+                  "flexGrow": 1,
+                  "minWidth": 0
+                }
+              },
+              {
+                "part": "count",
+                "component": "Text",
+                "$if": "props.count",
+                "props": {
+                  "text": {
+                    "$text": "props.count"
+                  },
+                  "variant": "muted"
+                }
+              }
+            ]
+          },
+          {
+            "part": "body",
+            "component": "Box",
+            "$if": "props.open",
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "gap": "$spacing.md",
+              "paddingHorizontal": "$spacing.sm"
+            },
+            "children": [
+              "$children"
+            ]
+          }
+        ]
+      }
+    },
+    "Trace": {
+      "recipeProps": [
+        "size"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": {
+            "$map": {
+              "from": "props.size",
+              "cases": {
+                "sm": 6
+              },
+              "default": 8
+            }
+          },
+          "minWidth": 0
+        },
+        "children": [
+          "$children"
+        ]
+      }
+    },
+    "TraceItem": {
+      "recipeProps": [
+        "status",
+        "size",
+        "collapsible",
+        "open"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "minWidth": 0
+        },
+        "children": [
+          {
+            "part": "line",
+            "component": "Box",
+            "$if": {
+              "$not": "props.collapsible"
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": {
+                "$map": {
+                  "from": "props.size",
+                  "cases": {
+                    "sm": 6
+                  },
+                  "default": 8
+                }
+              },
+              "minHeight": {
+                "$map": {
+                  "from": "props.size",
+                  "cases": {
+                    "sm": 18
+                  },
+                  "default": 20
+                }
+              },
+              "alignSelf": "flex-start",
+              "maxWidth": "100%",
+              "minWidth": 0,
+              "borderRadius": "$radius.md"
+            },
+            "children": [
+              {
+                "part": "icon",
+                "component": "Icon",
+                "$if": "props.icon",
+                "props": {
+                  "name": "{props.icon}",
+                  "size": "sm"
+                },
+                "style": {
+                  "width": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 14
+                      },
+                      "default": 16
+                    }
+                  },
+                  "height": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 14
+                      },
+                      "default": 16
+                    }
+                  },
+                  "flexShrink": 0
+                }
+              },
+              {
+                "part": "title",
+                "component": "Text",
+                "props": {
+                  "text": "{props.title}",
+                  "lines": 1,
+                  "shimmer": {
+                    "$eq": [
+                      "{props.status}",
+                      "running"
+                    ]
+                  }
+                },
+                "style": {
+                  "flexShrink": 1,
+                  "minWidth": 0,
+                  "fontSize": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 12
+                      },
+                      "default": 14
+                    }
+                  },
+                  "lineHeight": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 18
+                      },
+                      "default": 20
+                    }
+                  }
+                }
+              },
+              {
+                "part": "description",
+                "component": "Text",
+                "$if": "props.description",
+                "props": {
+                  "text": "{props.description}",
+                  "lines": 1
+                },
+                "style": {
+                  "flexShrink": 0,
+                  "fontSize": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 12
+                      },
+                      "default": 14
+                    }
+                  },
+                  "lineHeight": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 18
+                      },
+                      "default": 20
+                    }
+                  }
+                }
+              }
+            ]
+          },
+          {
+            "part": "line",
+            "component": "Box",
+            "$if": "props.collapsible",
+            "$a11y": {
+              "role": "button",
+              "expanded": "{props.open|false}"
+            },
+            "props": {
+              "pressable": true
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": {
+                "$map": {
+                  "from": "props.size",
+                  "cases": {
+                    "sm": 6
+                  },
+                  "default": 8
+                }
+              },
+              "minHeight": {
+                "$map": {
+                  "from": "props.size",
+                  "cases": {
+                    "sm": 18
+                  },
+                  "default": 20
+                }
+              },
+              "alignSelf": "flex-start",
+              "maxWidth": "100%",
+              "minWidth": 0,
+              "borderRadius": "$radius.md"
+            },
+            "$on": {
+              "press": "change"
+            },
+            "$context": {
+              "open": "{!props.open}"
+            },
+            "$set": {
+              "press": {
+                "prop": "open",
+                "value": "{!props.open}"
+              }
+            },
+            "children": [
+              {
+                "part": "icon",
+                "component": "Icon",
+                "$if": "props.icon",
+                "props": {
+                  "name": "{props.icon}",
+                  "size": "sm"
+                },
+                "style": {
+                  "width": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 14
+                      },
+                      "default": 16
+                    }
+                  },
+                  "height": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 14
+                      },
+                      "default": 16
+                    }
+                  },
+                  "flexShrink": 0
+                }
+              },
+              {
+                "part": "title",
+                "component": "Text",
+                "props": {
+                  "text": "{props.title}",
+                  "lines": 1,
+                  "shimmer": {
+                    "$eq": [
+                      "{props.status}",
+                      "running"
+                    ]
+                  }
+                },
+                "style": {
+                  "flexShrink": 1,
+                  "minWidth": 0,
+                  "fontSize": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 12
+                      },
+                      "default": 14
+                    }
+                  },
+                  "lineHeight": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 18
+                      },
+                      "default": 20
+                    }
+                  }
+                }
+              },
+              {
+                "part": "description",
+                "component": "Text",
+                "$if": "props.description",
+                "props": {
+                  "text": "{props.description}",
+                  "lines": 1
+                },
+                "style": {
+                  "flexShrink": 0,
+                  "fontSize": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 12
+                      },
+                      "default": 14
+                    }
+                  },
+                  "lineHeight": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 18
+                      },
+                      "default": 20
+                    }
+                  }
+                }
+              },
+              {
+                "part": "chevron",
+                "component": "Icon",
+                "props": {
+                  "name": "trace-chevron",
+                  "size": "sm"
+                },
+                "$recipe": {
+                  "open": "{props.open|false}"
+                },
+                "style": {
+                  "width": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 14
+                      },
+                      "default": 16
+                    }
+                  },
+                  "height": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": 14
+                      },
+                      "default": 16
+                    }
+                  },
+                  "flexShrink": 0,
+                  "marginLeft": {
+                    "$map": {
+                      "from": "props.size",
+                      "cases": {
+                        "sm": -2
+                      },
+                      "default": -4
+                    }
+                  }
+                }
+              }
+            ]
+          },
+          {
+            "part": "content",
+            "component": "Box",
+            "$if": [
+              "props.collapsible",
+              "props.open"
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "gap": {
+                "$map": {
+                  "from": "props.size",
+                  "cases": {
+                    "sm": 6
+                  },
+                  "default": 8
+                }
+              },
+              "minWidth": 0,
+              "marginTop": {
+                "$map": {
+                  "from": "props.size",
+                  "cases": {
+                    "sm": 6
+                  },
+                  "default": 8
+                }
+              },
+              "marginBottom": {
+                "$map": {
+                  "from": "props.size",
+                  "cases": {
+                    "sm": 4
+                  },
+                  "default": 4
+                }
+              },
+              "marginLeft": {
+                "$map": {
+                  "from": "props.size",
+                  "cases": {
+                    "sm": 6
+                  },
+                  "default": 7
+                }
+              },
+              "borderLeftWidth": 1,
+              "paddingLeft": {
+                "$map": {
+                  "from": "props.size",
+                  "cases": {
+                    "sm": 13
+                  },
+                  "default": 16
+                }
+              },
+              "paddingRight": {
+                "$map": {
+                  "from": "props.size",
+                  "cases": {
+                    "sm": 4
+                  },
+                  "default": 4
+                }
+              }
+            },
+            "children": [
+              "$children"
+            ]
+          }
+        ]
+      }
+    },
+    "Pagination": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "navigation",
+          "label": "$string.pagination"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "alignItems": "center",
+          "gap": "$spacing.sm"
+        },
+        "children": [
+          {
+            "part": "prev",
+            "component": "Button",
+            "props": {
+              "icon": "ui-chevron-left",
+              "variant": "outline",
+              "size": "icon",
+              "label": "$string.previous",
+              "disabled": {
+                "$not": {
+                  "$lt": [
+                    1,
+                    "{props.page|1}"
+                  ]
+                }
+              }
+            },
+            "$on": {
+              "press": "change"
+            },
+            "$context": {
+              "page": {
+                "$clamp": [
+                  {
+                    "$add": [
+                      "{props.page|1}",
+                      -1
+                    ]
+                  },
+                  1,
+                  "{props.totalPages}"
+                ]
+              }
+            },
+            "$set": {
+              "press": {
+                "prop": "page",
+                "value": {
+                  "$clamp": [
+                    {
+                      "$add": [
+                        "{props.page|1}",
+                        -1
+                      ]
+                    },
+                    1,
+                    "{props.totalPages}"
+                  ]
+                }
+              }
+            }
+          },
+          {
+            "part": "label",
+            "component": "Text",
+            "props": {
+              "text": "{props.page|1} / {props.totalPages}",
+              "variant": "muted"
+            },
+            "$a11y": {
+              "role": "status",
+              "label": {
+                "$fill": [
+                  "$string.pageOf",
+                  {
+                    "page": "{props.page|1}",
+                    "total": "{props.totalPages}"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "part": "next",
+            "component": "Button",
+            "props": {
+              "icon": "ui-chevron-right",
+              "variant": "outline",
+              "size": "icon",
+              "label": "$string.next",
+              "disabled": {
+                "$not": {
+                  "$lt": [
+                    "{props.page|1}",
+                    "{props.totalPages}"
+                  ]
+                }
+              }
+            },
+            "$on": {
+              "press": "change"
+            },
+            "$context": {
+              "page": {
+                "$clamp": [
+                  {
+                    "$add": [
+                      "{props.page|1}",
+                      1
+                    ]
+                  },
+                  1,
+                  "{props.totalPages}"
+                ]
+              }
+            },
+            "$set": {
+              "press": {
+                "prop": "page",
+                "value": {
+                  "$clamp": [
+                    {
+                      "$add": [
+                        "{props.page|1}",
+                        1
+                      ]
+                    },
+                    1,
+                    "{props.totalPages}"
+                  ]
+                }
+              }
+            }
+          }
+        ]
+      }
+    },
+    "Badge": {
+      "recipeProps": [
+        "variant"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "alignItems": "center",
+          "gap": "$spacing.xxs",
+          "height": "$control.badge",
+          "paddingHorizontal": "$spacing.sm",
+          "borderRadius": "$radius.full",
+          "alignSelf": "flex-start"
+        },
+        "children": [
+          {
+            "part": "icon",
+            "component": "Icon",
+            "$if": "props.icon",
+            "props": {
+              "name": "{props.icon}",
+              "size": "sm"
+            }
+          },
+          {
+            "part": "label",
+            "component": "Text",
+            "props": {
+              "text": "{props.text}",
+              "variant": "caption",
+              "lines": 1
+            }
+          }
+        ]
+      }
+    },
+    "Alert": {
+      "recipeProps": [
+        "type"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": {
+            "$map": {
+              "from": "props.type",
+              "cases": {
+                "warning": "alert",
+                "error": "alert"
+              },
+              "default": "status"
+            }
+          }
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "alignItems": "flex-start",
+          "gap": "$spacing.sm",
+          "padding": "$spacing.md",
+          "borderRadius": "$radius.lg"
+        },
+        "children": [
+          {
+            "part": "icon",
+            "component": "Icon",
+            "props": {
+              "name": {
+                "$map": {
+                  "from": "props.type",
+                  "cases": {
+                    "success": "ui-success",
+                    "warning": "ui-warning",
+                    "error": "ui-error"
+                  },
+                  "default": "ui-info"
+                }
+              },
+              "size": "sm",
+              "tone": {
+                "$map": {
+                  "from": "props.type",
+                  "cases": {
+                    "success": "success",
+                    "warning": "warning",
+                    "error": "danger"
+                  },
+                  "default": "info"
+                }
+              }
+            }
+          },
+          {
+            "part": "body",
+            "component": "Box",
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "gap": "$spacing.xxs",
+              "flexGrow": 1,
+              "minWidth": 0
+            },
+            "children": [
+              {
+                "part": "title",
+                "component": "Text",
+                "props": {
+                  "text": "{props.title}",
+                  "variant": "label"
+                }
+              },
+              {
+                "part": "message",
+                "component": "Text",
+                "$if": "props.message",
+                "props": {
+                  "text": "{props.message}",
+                  "variant": "muted"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
+    "Chip": {
+      "recipeProps": [
+        "shape",
+        "selected",
+        "tone"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": {
+            "$cond": [
+              "props.pressable",
+              "button",
+              "none"
+            ]
+          },
+          "pressed": {
+            "$cond": [
+              "props.pressable",
+              "{props.selected|false}"
+            ]
+          }
+        },
+        "props": {
+          "pressable": "{props.pressable|false}"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "alignItems": "center",
+          "gap": "$spacing.xs",
+          "paddingHorizontal": "$spacing.sm",
+          "alignSelf": "flex-start",
+          "height": {
+            "$map": {
+              "from": "props.shape",
+              "cases": {
+                "rect": "$control.chip"
+              },
+              "default": "$control.pill"
+            }
+          },
+          "borderRadius": {
+            "$map": {
+              "from": "props.shape",
+              "cases": {
+                "rect": "$radius.md"
+              },
+              "default": "$radius.full"
+            }
+          }
+        },
+        "children": [
+          "$slot:leading",
+          {
+            "part": "dot",
+            "component": "Box",
+            "$if": "props.dot",
+            "style": {
+              "width": 8,
+              "height": 8,
+              "borderRadius": "$radius.full",
+              "backgroundColor": "{props.dot}",
+              "flexShrink": 0
+            }
+          },
+          {
+            "part": "image",
+            "component": "Image",
+            "$if": "props.image",
+            "props": {
+              "src": "{props.image}",
+              "alt": "{props.label}",
+              "width": 16,
+              "height": 16,
+              "fit": "cover"
+            },
+            "style": {
+              "borderRadius": "$radius.full"
+            }
+          },
+          {
+            "part": "icon",
+            "component": "Icon",
+            "$if": [
+              "props.icon",
+              "!props.image"
+            ],
+            "props": {
+              "name": "{props.icon}",
+              "size": "sm"
+            }
+          },
+          {
+            "part": "label",
+            "component": "Text",
+            "props": {
+              "text": "{props.label}",
+              "variant": "caption",
+              "lines": 1
+            }
+          },
+          {
+            "part": "detail",
+            "component": "Text",
+            "$if": "props.detail",
+            "props": {
+              "text": "{props.detail}",
+              "variant": "muted",
+              "lines": 1
+            }
+          },
+          {
+            "part": "remove",
+            "component": "Button",
+            "$if": "props.removable",
+            "props": {
+              "icon": "ui-close",
+              "variant": "ghost",
+              "size": "icon",
+              "label": "$string.remove"
+            },
+            "$on": {
+              "press": "remove"
+            }
+          }
+        ]
+      }
+    },
+    "EmptyState": {
+      "recipeProps": [
+        "size"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "status"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "alignItems": "center",
+          "gap": {
+            "$map": {
+              "from": "props.size",
+              "cases": {
+                "list": "$spacing.xs"
+              },
+              "default": "$spacing.md"
+            }
+          },
+          "paddingVertical": {
+            "$map": {
+              "from": "props.size",
+              "cases": {
+                "list": "$spacing.xl"
+              },
+              "default": "$spacing.xl3"
+            }
+          },
+          "paddingHorizontal": {
+            "$map": {
+              "from": "props.size",
+              "cases": {
+                "list": "$spacing.md"
+              },
+              "default": "$spacing.xl"
+            }
+          }
+        },
+        "children": [
+          {
+            "part": "disc",
+            "component": "Box",
+            "$if": {
+              "$not": {
+                "$eq": [
+                  "{props.size|page}",
+                  "list"
+                ]
+              }
+            },
+            "style": {
+              "display": "flex",
+              "alignItems": "center",
+              "justifyContent": "center",
+              "width": 48,
+              "height": 48,
+              "borderRadius": "$radius.full",
+              "flexShrink": 0
+            },
+            "children": [
+              {
+                "part": "icon",
+                "component": "Icon",
+                "props": {
+                  "name": "{props.icon}",
+                  "size": "lg",
+                  "tone": "neutral"
+                }
+              }
+            ]
+          },
+          {
+            "part": "icon",
+            "component": "Icon",
+            "$if": {
+              "$eq": [
+                "{props.size|page}",
+                "list"
+              ]
+            },
+            "props": {
+              "name": "{props.icon}",
+              "size": "default",
+              "tone": "neutral"
+            }
+          },
+          {
+            "part": "title",
+            "component": "Text",
+            "props": {
+              "text": "{props.title}",
+              "variant": {
+                "$map": {
+                  "from": "props.size",
+                  "cases": {
+                    "list": "muted"
+                  },
+                  "default": "title"
+                }
+              },
+              "align": "center"
+            }
+          },
+          {
+            "part": "description",
+            "component": "Text",
+            "$if": [
+              "props.description",
+              {
+                "$not": {
+                  "$eq": [
+                    "{props.size|page}",
+                    "list"
+                  ]
+                }
+              }
+            ],
+            "props": {
+              "text": "{props.description}",
+              "variant": "muted",
+              "align": "center"
+            }
+          },
+          {
+            "part": "action",
+            "component": "Button",
+            "$if": [
+              "props.actionLabel",
+              {
+                "$not": {
+                  "$eq": [
+                    "{props.size|page}",
+                    "list"
+                  ]
+                }
+              }
+            ],
+            "props": {
+              "label": "{props.actionLabel}",
+              "variant": "outline"
+            },
+            "$on": {
+              "press": "press"
+            }
+          }
+        ]
+      }
+    },
+    "Progress": {
+      "recipeProps": [
+        "tone"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "progressbar",
+          "label": "{props.label}",
+          "valueNow": "{props.value}",
+          "valueMin": 0,
+          "valueMax": "{props.max|100}"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.xs",
+          "width": "100%"
+        },
+        "children": [
+          {
+            "part": "label",
+            "component": "Text",
+            "$if": "props.label",
+            "props": {
+              "text": "{props.label}",
+              "variant": "caption"
+            }
+          },
+          {
+            "part": "track",
+            "component": "Box",
+            "style": {
+              "height": "$control.progress",
+              "borderRadius": "$radius.full",
+              "overflow": "hidden",
+              "width": "100%"
+            },
+            "children": [
+              {
+                "part": "fill",
+                "component": "Box",
+                "style": {
+                  "height": "100%",
+                  "width": {
+                    "$percent": [
+                      "{props.value}",
+                      "{props.max|100}"
+                    ]
+                  },
+                  "borderRadius": "$radius.full"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
+    "Meter": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "meter",
+          "label": "{props.label}"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.xs",
+          "width": "100%"
+        },
+        "children": [
+          {
+            "part": "header",
+            "component": "Box",
+            "$any": [
+              "props.label",
+              "props.value"
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.sm"
+            },
+            "children": [
+              {
+                "part": "label",
+                "component": "Text",
+                "$if": "props.label",
+                "props": {
+                  "text": "{props.label}",
+                  "variant": "caption"
+                },
+                "style": {
+                  "flexGrow": 1,
+                  "minWidth": 0
+                }
+              },
+              {
+                "part": "value",
+                "component": "Text",
+                "$if": "props.value",
+                "props": {
+                  "text": "{props.value}",
+                  "variant": "muted"
+                }
+              }
+            ]
+          },
+          {
+            "part": "track",
+            "component": "Box",
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "height": "$control.meter",
+              "borderRadius": "$radius.full",
+              "overflow": "hidden",
+              "width": "100%"
+            },
+            "children": [
+              {
+                "part": "segment",
+                "component": "Box",
+                "$each": "props.segments",
+                "$as": "item",
+                "style": {
+                  "height": "100%",
+                  "width": {
+                    "$percent": [
+                      "{item.value}",
+                      "{props.max|100}"
+                    ]
+                  }
+                },
+                "$recipe": {
+                  "tone": "{item.tone|neutral}"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
+    "Row": {
+      "recipeProps": [
+        "selected",
+        "density",
+        "surface",
+        "depth"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": {
+            "$cond": [
+              "props.pressable",
+              "button",
+              "none"
+            ]
+          },
+          "selected": {
+            "$cond": [
+              "props.pressable",
+              "{props.selected|false}"
+            ]
+          }
+        },
+        "props": {
+          "pressable": "{props.pressable|false}"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "alignItems": "center",
+          "gap": "$spacing.sm",
+          "minHeight": {
+            "$map": {
+              "from": "props.density",
+              "cases": {
+                "compact": "$control.rowCompact"
+              },
+              "default": "$control.row"
+            }
+          },
+          "paddingHorizontal": "$spacing.md",
+          "borderRadius": {
+            "$map": {
+              "from": "props.surface",
+              "cases": {
+                "card": "$radius.lg"
+              },
+              "default": "$radius.md"
+            }
+          }
+        },
+        "children": [
+          {
+            "part": "guides",
+            "component": "TreeGuides",
+            "$if": {
+              "$lt": [
+                0,
+                "{props.depth|0}"
+              ]
+            },
+            "props": {
+              "depth": "{props.depth}"
+            }
+          },
+          "$slot:leading",
+          {
+            "part": "icon",
+            "component": "Icon",
+            "$if": "props.icon",
+            "props": {
+              "name": "{props.icon}",
+              "size": "sm"
+            }
+          },
+          {
+            "part": "identifier",
+            "component": "Text",
+            "$if": "props.identifier",
+            "props": {
+              "text": "{props.identifier}",
+              "variant": "code",
+              "lines": 1
+            },
+            "style": {
+              "flexShrink": 0
+            }
+          },
+          {
+            "part": "body",
+            "component": "Box",
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "gap": "$spacing.xxs",
+              "flexGrow": 1,
+              "minWidth": 0,
+              "paddingVertical": {
+                "$map": {
+                  "from": "props.surface",
+                  "cases": {
+                    "card": "$spacing.md"
+                  },
+                  "default": "$spacing.xs"
+                }
+              }
+            },
+            "children": [
+              {
+                "part": "title",
+                "component": "Text",
+                "props": {
+                  "text": "{props.title}",
+                  "variant": "body",
+                  "lines": 1
+                }
+              },
+              {
+                "part": "subtitle",
+                "component": "Text",
+                "$if": "props.subtitle",
+                "props": {
+                  "text": "{props.subtitle}",
+                  "variant": "muted",
+                  "lines": 1
+                }
+              }
+            ]
+          },
+          {
+            "part": "meta",
+            "component": "Text",
+            "$if": "props.meta",
+            "props": {
+              "text": "{props.meta}",
+              "variant": "muted",
+              "lines": 1
+            }
+          },
+          {
+            "part": "value",
+            "component": "Text",
+            "$any": [
+              "props.value",
+              "props.placeholder"
+            ],
+            "props": {
+              "text": {
+                "$coalesce": [
+                  "{props.value}",
+                  "{props.placeholder}"
+                ]
+              },
+              "variant": {
+                "$cond": [
+                  "props.value",
+                  "body",
+                  "muted"
+                ]
+              },
+              "lines": 1,
+              "align": "end"
+            }
+          },
+          "$slot:trailing",
+          {
+            "part": "chevron",
+            "component": "Icon",
+            "$if": {
+              "$not": {
+                "$eq": [
+                  "{props.chevron|none}",
+                  "none"
+                ]
+              }
+            },
+            "props": {
+              "name": {
+                "$map": {
+                  "from": "props.chevron",
+                  "cases": {
+                    "selector": "ui-selector"
+                  },
+                  "default": "ui-chevron-right"
+                }
+              },
+              "size": "sm",
+              "tone": "neutral"
+            }
+          }
+        ]
+      }
+    },
+    "ScrollArea": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "region"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": {
+            "$map": {
+              "from": "props.direction",
+              "cases": {
+                "horizontal": "row"
+              },
+              "default": "column"
+            }
+          },
+          "overflowX": {
+            "$map": {
+              "from": "props.direction",
+              "cases": {
+                "horizontal": "auto",
+                "both": "auto"
+              },
+              "default": "hidden"
+            }
+          },
+          "overflowY": {
+            "$map": {
+              "from": "props.direction",
+              "cases": {
+                "vertical": "auto",
+                "both": "auto"
+              },
+              "default": "hidden"
+            }
+          },
+          "minWidth": 0,
+          "minHeight": 0,
+          "maxHeight": "{props.maxHeight}"
+        },
+        "children": [
+          "$children"
+        ]
+      }
+    },
+    "Sidebar": {
+      "recipeProps": [
+        "side"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": {
+            "$map": {
+              "from": "props.side",
+              "cases": {
+                "right": "row-reverse"
+              },
+              "default": "row"
+            }
+          },
+          "alignItems": "stretch",
+          "width": "100%",
+          "minHeight": 0
+        },
+        "children": [
+          {
+            "part": "sidebar",
+            "component": "Box",
+            "$if": "!props.collapsed",
+            "$a11y": {
+              "role": "navigation"
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "width": "{props.width|240}",
+              "flexShrink": 0,
+              "minHeight": 0,
+              "@media (max-width: $breakpoint.{props.collapseBelow|md})": {
+                "$cond": [
+                  {
+                    "$not": {
+                      "$eq": [
+                        "{props.collapseBelow|md}",
+                        "never"
+                      ]
+                    }
+                  },
+                  {
+                    "display": "none"
+                  }
+                ]
+              }
+            },
+            "children": [
+              "$slot:sidebar"
+            ]
+          },
+          {
+            "part": "main",
+            "component": "Box",
+            "$a11y": {
+              "role": "main"
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "flexGrow": 1,
+              "minWidth": 0,
+              "minHeight": 0
+            },
+            "children": [
+              "$children"
+            ]
+          }
+        ]
+      }
+    },
+    "AppBar": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "banner"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "alignItems": "center",
+          "gap": "$spacing.sm",
+          "height": "$control.appBar",
+          "paddingHorizontal": "$spacing.md",
+          "width": "100%"
+        },
+        "children": [
+          {
+            "part": "back",
+            "component": "Button",
+            "$if": "props.back",
+            "props": {
+              "icon": "ui-back",
+              "variant": "ghost",
+              "size": "icon",
+              "label": "$string.back"
+            },
+            "$on": {
+              "press": "back"
+            }
+          },
+          "$slot:leading",
+          {
+            "part": "body",
+            "component": "Box",
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "flexGrow": 1,
+              "minWidth": 0
+            },
+            "children": [
+              {
+                "part": "title",
+                "component": "Text",
+                "props": {
+                  "text": "{props.title}",
+                  "variant": "title",
+                  "lines": 1
+                },
+                "$a11y": {
+                  "role": "heading",
+                  "level": 1
+                }
+              },
+              {
+                "part": "subtitle",
+                "component": "Text",
+                "$if": "props.subtitle",
+                "props": {
+                  "text": "{props.subtitle}",
+                  "variant": "muted",
+                  "lines": 1
+                }
+              }
+            ]
+          },
+          "$slot:trailing"
+        ]
+      }
+    },
+    "Kbd": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "alignItems": "center",
+          "height": "$control.badge",
+          "paddingHorizontal": "$spacing.xs",
+          "borderRadius": "$radius.sm",
+          "alignSelf": "flex-start"
+        },
+        "children": [
+          {
+            "part": "label",
+            "component": "Text",
+            "props": {
+              "text": "{props.keys}",
+              "variant": "code",
+              "lines": 1
+            }
+          }
+        ]
+      }
+    },
+    "Label": {
+      "recipeProps": [
+        "required"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "alignItems": "center",
+          "gap": "$spacing.xxs"
+        },
+        "children": [
+          {
+            "part": "text",
+            "component": "Text",
+            "props": {
+              "text": "{props.text}",
+              "variant": "label"
+            }
+          },
+          {
+            "part": "mark",
+            "component": "Text",
+            "$if": "props.required",
+            "props": {
+              "text": "*",
+              "variant": "label",
+              "tone": "danger"
+            }
+          }
+        ]
+      }
+    },
+    "Breadcrumb": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "navigation",
+          "label": "$string.breadcrumb"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "alignItems": "center",
+          "flexWrap": "wrap",
+          "gap": "$spacing.xs"
+        },
+        "children": [
+          {
+            "part": "item",
+            "component": "Box",
+            "$each": "props.items",
+            "$as": "item",
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.xs"
+            },
+            "$recipe": {
+              "current": {
+                "$eq": [
+                  "{index}",
+                  {
+                    "$sub": [
+                      "{len(props.items)}",
+                      1
+                    ]
+                  }
+                ]
+              }
+            },
+            "children": [
+              {
+                "part": "separator",
+                "component": "Icon",
+                "$if": {
+                  "$lt": [
+                    0,
+                    "{index}"
+                  ]
+                },
+                "props": {
+                  "name": "ui-chevron-right",
+                  "size": "sm",
+                  "tone": "neutral"
+                },
+                "$a11y": {
+                  "hidden": true
+                }
+              },
+              {
+                "part": "link",
+                "component": "Button",
+                "$if": {
+                  "$not": {
+                    "$eq": [
+                      "{index}",
+                      {
+                        "$sub": [
+                          "{len(props.items)}",
+                          1
+                        ]
+                      }
+                    ]
+                  }
+                },
+                "props": {
+                  "label": "{item.label}",
+                  "icon": "{item.icon}",
+                  "variant": "link",
+                  "size": "sm"
+                },
+                "$on": {
+                  "press": "select"
+                },
+                "$context": {
+                  "value": "{item.value}"
+                }
+              },
+              {
+                "part": "current",
+                "component": "Text",
+                "$if": {
+                  "$eq": [
+                    "{index}",
+                    {
+                      "$sub": [
+                        "{len(props.items)}",
+                        1
+                      ]
+                    }
+                  ]
+                },
+                "props": {
+                  "text": "{item.label}",
+                  "variant": "label",
+                  "lines": 1
+                },
+                "$a11y": {
+                  "current": "page"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
+    "Stepper": {
+      "recipeProps": [
+        "orientation"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "list"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": {
+            "$map": {
+              "from": "props.orientation",
+              "cases": {
+                "vertical": "column"
+              },
+              "default": "row"
+            }
+          },
+          "alignItems": {
+            "$map": {
+              "from": "props.orientation",
+              "cases": {
+                "vertical": "stretch"
+              },
+              "default": "flex-start"
+            }
+          },
+          "gap": "$spacing.md",
+          "width": "100%"
+        },
+        "children": [
+          {
+            "part": "step",
+            "component": "Box",
+            "$each": "props.steps",
+            "$as": "step",
+            "style": {
+              "display": "flex",
+              "flexDirection": {
+                "$map": {
+                  "from": "props.orientation",
+                  "cases": {
+                    "vertical": "row"
+                  },
+                  "default": "column"
+                }
+              },
+              "alignItems": {
+                "$map": {
+                  "from": "props.orientation",
+                  "cases": {
+                    "vertical": "flex-start"
+                  },
+                  "default": "center"
+                }
+              },
+              "gap": "$spacing.xs",
+              "flexGrow": 1,
+              "flexBasis": 0,
+              "minWidth": 0
+            },
+            "$recipe": {
+              "status": {
+                "$cond": [
+                  {
+                    "$lt": [
+                      "{index}",
+                      "{props.current|0}"
+                    ]
+                  },
+                  "done",
+                  {
+                    "$cond": [
+                      {
+                        "$eq": [
+                          "{index}",
+                          "{props.current|0}"
+                        ]
+                      },
+                      "current",
+                      "upcoming"
+                    ]
+                  }
+                ]
+              }
+            },
+            "$a11y": {
+              "role": "listitem",
+              "current": {
+                "$cond": [
+                  {
+                    "$eq": [
+                      "{index}",
+                      "{props.current|0}"
+                    ]
+                  },
+                  "step",
+                  false
+                ]
+              },
+              "label": {
+                "$fill": [
+                  {
+                    "$cond": [
+                      {
+                        "$lt": [
+                          "{index}",
+                          "{props.current|0}"
+                        ]
+                      },
+                      "$string.stepDone",
+                      {
+                        "$cond": [
+                          {
+                            "$eq": [
+                              "{index}",
+                              "{props.current|0}"
+                            ]
+                          },
+                          "$string.stepCurrent",
+                          "$string.stepUpcoming"
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    "step": {
+                      "$add": [
+                        "{index}",
+                        1
+                      ]
+                    },
+                    "total": "{len(props.steps)}",
+                    "label": "{step.label}"
+                  }
+                ]
+              }
+            },
+            "children": [
+              {
+                "part": "marker",
+                "component": "Box",
+                "$a11y": {
+                  "hidden": true
+                },
+                "style": {
+                  "display": "flex",
+                  "alignItems": "center",
+                  "justifyContent": "center",
+                  "width": "$control.iconLg",
+                  "height": "$control.iconLg",
+                  "borderRadius": "$radius.full",
+                  "flexShrink": 0
+                },
+                "$recipe": {
+                  "status": {
+                    "$cond": [
+                      {
+                        "$lt": [
+                          "{index}",
+                          "{props.current|0}"
+                        ]
+                      },
+                      "done",
+                      {
+                        "$cond": [
+                          {
+                            "$eq": [
+                              "{index}",
+                              "{props.current|0}"
+                            ]
+                          },
+                          "current",
+                          "upcoming"
+                        ]
+                      }
+                    ]
+                  }
+                },
+                "children": [
+                  {
+                    "part": "check",
+                    "component": "Icon",
+                    "$if": {
+                      "$lt": [
+                        "{index}",
+                        "{props.current|0}"
+                      ]
+                    },
+                    "props": {
+                      "name": "ui-check",
+                      "size": "sm"
+                    }
+                  },
+                  {
+                    "part": "number",
+                    "component": "Text",
+                    "$if": {
+                      "$not": {
+                        "$lt": [
+                          "{index}",
+                          "{props.current|0}"
+                        ]
+                      }
+                    },
+                    "props": {
+                      "text": {
+                        "$text": {
+                          "$add": [
+                            "{index}",
+                            1
+                          ]
+                        }
+                      },
+                      "variant": "caption"
+                    },
+                    "$recipe": {
+                      "status": {
+                        "$cond": [
+                          {
+                            "$eq": [
+                              "{index}",
+                              "{props.current|0}"
+                            ]
+                          },
+                          "current",
+                          "upcoming"
+                        ]
+                      }
+                    }
+                  }
+                ]
+              },
+              {
+                "part": "body",
+                "component": "Box",
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "gap": "$spacing.xxs",
+                  "minWidth": 0
+                },
+                "children": [
+                  {
+                    "part": "label",
+                    "component": "Text",
+                    "props": {
+                      "text": "{step.label}",
+                      "variant": "label",
+                      "lines": 1
+                    },
+                    "$recipe": {
+                      "status": {
+                        "$cond": [
+                          {
+                            "$lt": [
+                              "{index}",
+                              "{props.current|0}"
+                            ]
+                          },
+                          "done",
+                          {
+                            "$cond": [
+                              {
+                                "$eq": [
+                                  "{index}",
+                                  "{props.current|0}"
+                                ]
+                              },
+                              "current",
+                              "upcoming"
+                            ]
+                          }
+                        ]
+                      }
+                    }
+                  },
+                  {
+                    "part": "description",
+                    "component": "Text",
+                    "$if": "step.description",
+                    "props": {
+                      "text": "{step.description}",
+                      "variant": "muted",
+                      "lines": 2
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    "Rating": {
+      "recipeProps": [
+        "size",
+        "readOnly"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": {
+            "$cond": [
+              "props.readOnly",
+              "img",
+              "group"
+            ]
+          },
+          "label": {
+            "$cond": [
+              "props.readOnly",
+              {
+                "$fill": [
+                  "$string.ratingValue",
+                  {
+                    "value": "{props.value|0}",
+                    "max": "{props.max|5}"
+                  }
+                ]
+              }
+            ]
+          }
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "alignItems": "center",
+          "gap": "$spacing.xxs",
+          "alignSelf": "flex-start"
+        },
+        "children": [
+          {
+            "part": "star",
+            "component": "Box",
+            "$each": "range(props.max|5)",
+            "$as": "star",
+            "props": {
+              "pressable": {
+                "$not": "props.readOnly"
+              }
+            },
+            "style": {
+              "display": "flex",
+              "alignItems": "center",
+              "justifyContent": "center"
+            },
+            "$recipe": {
+              "filled": {
+                "$lt": [
+                  "{index}",
+                  "{props.value|0}"
+                ]
+              }
+            },
+            "$a11y": {
+              "role": {
+                "$cond": [
+                  "props.readOnly",
+                  "hidden",
+                  "button"
+                ]
+              },
+              "label": {
+                "$fill": [
+                  "$string.ratingStar",
+                  {
+                    "value": {
+                      "$add": [
+                        "{index}",
+                        1
+                      ]
+                    },
+                    "max": "{props.max|5}"
+                  }
+                ]
+              },
+              "pressed": {
+                "$eq": [
+                  {
+                    "$add": [
+                      "{index}",
+                      1
+                    ]
+                  },
+                  "{props.value|0}"
+                ]
+              }
+            },
+            "$on": {
+              "press": "change"
+            },
+            "$context": {
+              "value": {
+                "$add": [
+                  "{index}",
+                  1
+                ]
+              }
+            },
+            "$set": {
+              "press": {
+                "prop": "value",
+                "value": {
+                  "$add": [
+                    "{index}",
+                    1
+                  ]
+                }
+              }
+            },
+            "children": [
+              {
+                "part": "icon",
+                "component": "Icon",
+                "props": {
+                  "name": "star",
+                  "size": "{props.size|default}"
+                },
+                "$recipe": {
+                  "filled": {
+                    "$lt": [
+                      "{index}",
+                      "{props.value|0}"
+                    ]
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
+    "AlertDialog": {
+      "recipeProps": [
+        "destructive"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Dialog",
+        "$a11y": {
+          "role": "alertdialog"
+        },
+        "props": {
+          "title": "{props.title}",
+          "description": "{props.description}",
+          "open": "{props.open|false}",
+          "dismissible": false
+        },
+        "slots": {
+          "trigger": "$slot:trigger",
+          "footer": {
+            "part": "footer",
+            "component": "Box",
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "flex-end",
+              "flexWrap": "wrap",
+              "gap": "$spacing.sm"
+            },
+            "children": [
+              {
+                "part": "cancel",
+                "component": "Button",
+                "props": {
+                  "label": "{props.cancelLabel|$string.cancel}",
+                  "variant": "outline"
+                },
+                "$a11y": {
+                  "autoFocus": true
+                },
+                "$on": {
+                  "press": "cancel"
+                },
+                "$set": {
+                  "press": {
+                    "prop": "open",
+                    "value": false
+                  }
+                }
+              },
+              {
+                "part": "confirm",
+                "component": "Button",
+                "props": {
+                  "label": "{props.confirmLabel|$string.confirm}",
+                  "variant": {
+                    "$cond": [
+                      "props.destructive",
+                      "destructive",
+                      "default"
+                    ]
+                  }
+                },
+                "$on": {
+                  "press": "confirm"
+                },
+                "$set": {
+                  "press": {
+                    "prop": "open",
+                    "value": false
+                  }
+                }
+              }
+            ]
+          }
+        },
+        "$on": {
+          "change": "change"
+        },
+        "children": [
+          "$children"
+        ]
+      }
+    },
+    "DockCard": {
+      "recipeProps": [
+        "tone"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "column"
+        },
+        "children": [
+          {
+            "part": "trigger",
+            "component": "Box",
+            "$a11y": {
+              "role": "button",
+              "label": "{props.label}: {props.title}"
+            },
+            "props": {
+              "pressable": true
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "flex-start",
+              "gap": "$spacing.sm",
+              "padding": "$spacing.md",
+              "borderRadius": "$radius.xl"
+            },
+            "$on": {
+              "press": "press"
+            },
+            "$set": {
+              "press": {
+                "prop": "open",
+                "value": true
+              }
+            },
+            "children": [
+              {
+                "part": "icon",
+                "component": "Icon",
+                "$if": "props.icon",
+                "props": {
+                  "name": "{props.icon}",
+                  "size": "sm",
+                  "tone": "{props.tone|neutral}"
+                },
+                "style": {
+                  "flexShrink": 0
+                }
+              },
+              {
+                "part": "body",
+                "component": "Box",
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "gap": "$spacing.xxs",
+                  "flexGrow": 1,
+                  "minWidth": 0
+                },
+                "children": [
+                  {
+                    "part": "header",
+                    "component": "Box",
+                    "style": {
+                      "display": "flex",
+                      "flexDirection": "row",
+                      "alignItems": "center",
+                      "gap": "$spacing.sm"
+                    },
+                    "children": [
+                      {
+                        "part": "label",
+                        "component": "Text",
+                        "props": {
+                          "text": "{props.label}",
+                          "variant": "caption",
+                          "tone": "{props.tone|neutral}",
+                          "lines": 1
+                        }
+                      },
+                      {
+                        "part": "caption",
+                        "component": "Text",
+                        "$if": "props.caption",
+                        "props": {
+                          "text": "{props.caption}",
+                          "variant": "muted",
+                          "lines": 1
+                        },
+                        "style": {
+                          "flexShrink": 1,
+                          "minWidth": 0
+                        }
+                      },
+                      {
+                        "part": "spacer",
+                        "component": "Box",
+                        "style": {
+                          "flexGrow": 1,
+                          "minWidth": 0
+                        }
+                      },
+                      {
+                        "part": "meta",
+                        "component": "Text",
+                        "$if": "props.meta",
+                        "props": {
+                          "text": "{props.meta}",
+                          "variant": "muted",
+                          "lines": 1
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    "part": "row",
+                    "component": "Box",
+                    "style": {
+                      "display": "flex",
+                      "flexDirection": "row",
+                      "alignItems": "center",
+                      "gap": "$spacing.sm"
+                    },
+                    "children": [
+                      {
+                        "part": "title",
+                        "component": "Text",
+                        "props": {
+                          "text": "{props.title}",
+                          "lines": 1
+                        },
+                        "style": {
+                          "flexGrow": 1,
+                          "minWidth": 0
+                        }
+                      },
+                      {
+                        "part": "chevron",
+                        "component": "Icon",
+                        "props": {
+                          "name": "ui-chevron-right",
+                          "size": "sm",
+                          "tone": "neutral"
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "part": "sheet",
+            "component": "Drawer",
+            "props": {
+              "title": "{props.label}",
+              "description": "{props.caption}",
+              "open": "{props.open|false}",
+              "side": "bottom"
+            },
+            "slots": {
+              "footer": "$slot:footer"
+            },
+            "$on": {
+              "change": "change"
+            },
+            "children": [
+              "$children"
+            ]
+          }
+        ]
+      }
+    },
+    "Sparkline": {
+      "recipeProps": [
+        "tone"
+      ],
+      "root": {
+        "part": "root",
+        "component": "Chart",
+        "props": {
+          "kind": "sparkline",
+          "series": [
+            {
+              "name": "",
+              "values": "{props.values}",
+              "tone": "{props.tone|primary}"
+            }
+          ],
+          "height": "{props.height|24}",
+          "showAxes": false,
+          "showGrid": false,
+          "showLegend": false
+        },
+        "style": {
+          "width": "100%"
+        }
+      }
+    },
+    "Page": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "flexGrow": 1,
+          "minHeight": 0,
+          "width": "100%"
+        },
+        "children": [
+          {
+            "part": "header",
+            "component": "AppBar",
+            "props": {
+              "title": "{props.title}",
+              "subtitle": "{props.subtitle}",
+              "back": "{props.back|false}"
+            },
+            "slots": {
+              "leading": "$slot:leading",
+              "trailing": "$slot:trailing"
+            },
+            "$on": {
+              "back": "back"
+            }
+          },
+          {
+            "part": "body",
+            "component": "Box",
+            "$a11y": {
+              "role": "main"
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "flexGrow": 1,
+              "minHeight": 0,
+              "overflowY": "auto",
+              "gap": "$spacing.lg",
+              "padding": {
+                "$map": {
+                  "from": "props.padded",
+                  "cases": {
+                    "false": "$spacing.none"
+                  },
+                  "default": "$spacing.lg"
+                }
+              }
+            },
+            "children": [
+              "$children"
+            ]
+          }
+        ]
+      }
+    },
+    "Toolbar": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "group"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "flexWrap": "wrap",
+          "alignItems": "flex-end",
+          "gap": "$spacing.{props.gap|sm}",
+          "width": "100%"
+        },
+        "children": [
+          "$children",
+          {
+            "part": "spacer",
+            "component": "Box",
+            "style": {
+              "flexGrow": 1,
+              "minWidth": 0
+            }
+          },
+          "$slot:trailing"
+        ]
+      }
+    },
+    "SplitView": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "alignItems": "stretch",
+          "width": "100%",
+          "flexGrow": 1,
+          "minHeight": 0
+        },
+        "children": [
+          {
+            "part": "list",
+            "component": "Box",
+            "$a11y": {
+              "role": "navigation"
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "width": "{props.width|320}",
+              "flexShrink": 0,
+              "minHeight": 0,
+              "overflowY": "auto",
+              "@media (max-width: $breakpoint.md)": {
+                "width": "100%",
+                "flexShrink": 1,
+                "display": {
+                  "$cond": [
+                    "props.open",
+                    "none",
+                    "flex"
+                  ]
+                }
+              }
+            },
+            "children": [
+              "$slot:list"
+            ]
+          },
+          {
+            "part": "divider",
+            "component": "Separator",
+            "props": {
+              "orientation": "vertical"
+            },
+            "style": {
+              "@media (max-width: $breakpoint.md)": {
+                "display": "none"
+              }
+            }
+          },
+          {
+            "part": "detail",
+            "component": "Box",
+            "$a11y": {
+              "role": "main"
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "flexGrow": 1,
+              "minWidth": 0,
+              "minHeight": 0,
+              "@media (max-width: $breakpoint.md)": {
+                "display": {
+                  "$cond": [
+                    "props.open",
+                    "flex",
+                    "none"
+                  ]
+                }
+              }
+            },
+            "children": [
+              {
+                "part": "backBar",
+                "component": "Box",
+                "style": {
+                  "display": "none",
+                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "height": "$control.appBar",
+                  "paddingHorizontal": "$spacing.sm",
+                  "@media (max-width: $breakpoint.md)": {
+                    "display": "flex"
+                  }
+                },
+                "children": [
+                  {
+                    "part": "back",
+                    "component": "Button",
+                    "props": {
+                      "icon": "ui-back",
+                      "variant": "ghost",
+                      "size": "icon",
+                      "label": "$string.back"
+                    },
+                    "$on": {
+                      "press": "back"
+                    },
+                    "$set": {
+                      "press": {
+                        "prop": "open",
+                        "value": false
+                      }
+                    }
+                  }
+                ]
+              },
+              "$children"
+            ]
+          }
+        ]
+      }
+    },
+    "FieldGroup": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "group"
+        },
+        "style": {
+          "display": "grid",
+          "gridTemplateColumns": "repeat(1, minmax(0, 1fr))",
+          "gap": "$spacing.md",
+          "alignItems": "start",
+          "@media (min-width: $breakpoint.md)": {
+            "gridTemplateColumns": "repeat({props.columns|2}, minmax(0, 1fr))"
+          }
+        },
+        "children": [
+          "$children"
+        ]
+      }
+    },
+    "FormActions": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "group"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "flexWrap": "wrap",
+          "justifyContent": "flex-end",
+          "alignItems": "center",
+          "gap": "$spacing.sm",
+          "width": "100%"
+        },
+        "children": [
+          "$children",
+          {
+            "part": "cancel",
+            "component": "Button",
+            "$if": "props.cancel",
+            "props": {
+              "label": "$string.cancel",
+              "variant": "outline"
+            },
+            "$on": {
+              "press": "cancel"
+            }
+          },
+          {
+            "part": "submit",
+            "component": "Button",
+            "props": {
+              "label": "{props.submit}",
+              "variant": {
+                "$cond": [
+                  "props.destructive",
+                  "destructive",
+                  "default"
+                ]
+              },
+              "submit": true
+            }
+          }
+        ]
+      }
+    },
+    "StatTile": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "group",
+          "label": "{props.label}"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "minWidth": 0
+        },
+        "children": [
+          {
+            "part": "card",
+            "component": "Card",
+            "children": [
+              {
+                "part": "header",
+                "component": "Box",
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "gap": "$spacing.sm"
+                },
+                "children": [
+                  {
+                    "part": "label",
+                    "component": "Text",
+                    "props": {
+                      "text": "{props.label}",
+                      "variant": "muted",
+                      "lines": 1
+                    },
+                    "style": {
+                      "flexGrow": 1,
+                      "flexShrink": 1,
+                      "minWidth": 0
+                    }
+                  },
+                  {
+                    "part": "delta",
+                    "component": "Text",
+                    "$if": "props.delta",
+                    "props": {
+                      "text": "{props.delta}",
+                      "variant": "caption",
+                      "tone": "{props.tone|neutral}"
+                    }
+                  }
+                ]
+              },
+              {
+                "part": "value",
+                "component": "Text",
+                "props": {
+                  "text": "{props.value}",
+                  "variant": "title",
+                  "lines": 1
+                }
+              },
+              {
+                "part": "trend",
+                "component": "Sparkline",
+                "$if": "props.trend",
+                "props": {
+                  "values": "{props.trend}",
+                  "height": 32
+                }
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}