@treeui/mcp 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   buildCatalogFromRepo: () => buildCatalogFromRepo,
+  buildTokenEntries: () => buildTokenEntries,
   catalog: () => catalog,
   createTreeuiMcpServer: () => createTreeuiMcpServer,
   findComponent: () => findComponent,
@@ -38,18 +39,20 @@ __export(index_exports, {
   formatRecipeResults: () => formatRecipeResults,
   formatSearchResults: () => formatSearchResults,
   formatSetupGuide: () => formatSetupGuide,
+  formatTokenResults: () => formatTokenResults,
   getRepoRootFromPackageRoot: () => getRepoRootFromPackageRoot,
   recommendComponents: () => recommendComponents,
   searchComponents: () => searchComponents,
-  searchRecipes: () => searchRecipes
+  searchRecipes: () => searchRecipes,
+  searchTokens: () => searchTokens
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/generated/treeui.catalog.json
 var treeui_catalog_default = {
-  generatedAt: "2026-07-18T01:52:38.578Z",
+  generatedAt: "2026-07-18T23:35:26.876Z",
   packageName: "@treeui/vue",
-  packageVersion: "0.14.0",
+  packageVersion: "0.16.0",
   decisionGuides: [
     {
       id: "single-choice",
@@ -199,6 +202,44 @@ var treeui_catalog_default = {
         }
       ]
     },
+    {
+      id: "navigate-or-act",
+      question: "Navigate somewhere vs. perform an action",
+      options: [
+        {
+          use: "TLink",
+          when: [
+            "Activating it changes the URL \u2014 an external link, a route, or an in-page anchor.",
+            "It should be openable in a new tab, copyable, and crawlable."
+          ],
+          notes: []
+        },
+        {
+          use: "TButton",
+          when: [
+            "Activating it runs behavior on the current page \u2014 submit, open an overlay, delete, toggle.",
+            "It needs sizes, action variants, or a loading state."
+          ],
+          notes: [
+            'Use `variant="ghost"` when an action needs to look understated like a link.'
+          ]
+        },
+        {
+          use: "TNavMenu",
+          when: [
+            "The links are app-section navigation inside a shell or sidebar."
+          ],
+          notes: []
+        },
+        {
+          use: "TBreadcrumb",
+          when: [
+            "The links express where the current page sits in a hierarchy."
+          ],
+          notes: []
+        }
+      ]
+    },
     {
       id: "feedback-choice",
       question: "Communicate status or feedback",
@@ -993,6 +1034,22 @@ var treeui_catalog_default = {
           type: "boolean",
           default: "true"
         },
+        {
+          name: "showCollapseButton",
+          type: "boolean",
+          default: "true",
+          note: "Renders the built-in collapse toggle in the sidebar footer. Desktop only, and only when `collapsible` is set \u2014 no need to wire your own."
+        },
+        {
+          name: "collapseLabel",
+          type: "string",
+          default: "Collapse sidebar"
+        },
+        {
+          name: "expandLabel",
+          type: "string",
+          default: "Expand sidebar"
+        },
         {
           name: "menuLabel",
           type: "string",
@@ -1027,14 +1084,26 @@ var treeui_catalog_default = {
         {
           name: "header"
         },
+        {
+          name: "header-start"
+        },
+        {
+          name: "sidebar-header"
+        },
         {
           name: "sidebar"
         },
+        {
+          name: "sidebar-footer"
+        },
         {
           name: "default"
         },
         {
           name: "menu-icon"
+        },
+        {
+          name: "collapse-icon"
         }
       ],
       a11y: [
@@ -1062,7 +1131,10 @@ var treeui_catalog_default = {
         "left_and_right_variants: true",
         "locks_body_scroll_while_drawer_open: true",
         "overlay_click_closes_when_enabled: true",
-        "exposes_slot_props_with_mobile_collapsed_and_toggles: true"
+        "exposes_slot_props_with_mobile_collapsed_and_toggles: true",
+        "sidebar_footer_pinned_to_bottom: true",
+        "sidebar_header_and_footer_inset_to_align_with_nav_icons: true",
+        "header_mirrors_shell_columns_when_header_start_is_used: true"
       ],
       selection: {
         keywords: [
@@ -1371,6 +1443,18 @@ var treeui_catalog_default = {
           name: "type",
           type: "button | submit | reset",
           default: "button"
+        },
+        {
+          name: "block",
+          type: "boolean",
+          default: "false",
+          note: "Stretches the button to the full width of its container. Useful for menu rows and mobile CTAs."
+        },
+        {
+          name: "align",
+          type: "start | center | end",
+          default: "center",
+          note: "Content alignment; only meaningful together with `block`. Use `start` for left-aligned icon+label menu rows."
         }
       ],
       events: [
@@ -1436,7 +1520,6 @@ var treeui_catalog_default = {
           values: [
             "outline",
             "soft",
-            "solid",
             "inset"
           ]
         },
@@ -1475,7 +1558,8 @@ var treeui_catalog_default = {
       a11y: [],
       behavior: [
         "body_wrapper_class: t-card__body",
-        "solid_variant_rescopes_color_tokens_for_nested_content: true"
+        'variant_effects: {"outline":"Base surface with a default border. The styling baseline \u2014 the `t-card--outline` class is emitted but carries no CSS rule of its own.","soft":"Subtle tinted surface (bg-subtle), same border and shadow as outline.","inset":"Same tinted surface as soft, but with no shadow, so it reads as recessed inside another surface."}',
+        "note: No card variant inverts its surface, so nested content inherits the normal color tokens. For a high-emphasis card, use a brand-colored border rather than an inverted background."
       ],
       selection: {
         keywords: [
@@ -1804,6 +1888,92 @@ var treeui_catalog_default = {
       },
       recipes: []
     },
+    {
+      name: "TColorSwatch",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "form",
+      category: "Data Entry",
+      status: "available",
+      purpose: "Pick a colour from a row of preset swatches, with an optional native colour input for an arbitrary value. Built for accent/brand pickers.",
+      sourceFile: "packages/vue/src/components/TColorSwatch.vue",
+      storyFile: "apps/docs/src/stories/ColorSwatch.stories.ts",
+      storyTitle: "Components/Data Entry/ColorSwatch",
+      manifestFile: "docs/ai/COMPONENTS/color-swatch.yaml",
+      props: [
+        {
+          name: "modelValue",
+          type: "string",
+          default: "undefined",
+          note: "Selected colour as a hex string. Matching is case-insensitive."
+        },
+        {
+          name: "options",
+          type: "TColorSwatchOption[]",
+          default: "[]",
+          note: "Preset swatches, each `{ label, value }`. `label` becomes the button's accessible name."
+        },
+        {
+          name: "allowCustom",
+          type: "boolean",
+          default: "false",
+          note: 'Appends a native `<input type="color">` for values outside the presets.'
+        },
+        {
+          name: "size",
+          type: "TSize",
+          default: "md",
+          values: [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          name: "label",
+          type: "string",
+          default: "Color",
+          note: 'Accessible label for the swatch group (`role="group"`).'
+        },
+        {
+          name: "customLabel",
+          type: "string",
+          default: "Custom color"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false"
+        }
+      ],
+      events: [
+        {
+          name: "update:modelValue"
+        }
+      ],
+      slots: [],
+      a11y: [
+        'Wrapper is `role="group"` labelled by `label`.',
+        "Each swatch is a native button with `aria-pressed` reflecting selection and `aria-label` from the option label.",
+        "Selection is conveyed by an outline (not colour alone), since the swatch's own colour is the content."
+      ],
+      behavior: [
+        "emits_on_preset_click: true",
+        "emits_on_custom_input: true",
+        "blocks_interaction_when_disabled: true"
+      ],
+      selection: {
+        keywords: [],
+        useWhen: [],
+        avoidWhen: [],
+        alternatives: []
+      },
+      setup: {
+        required: [],
+        notes: []
+      },
+      recipes: []
+    },
     {
       name: "TCombobox",
       aliases: [],
@@ -2154,12 +2324,14 @@ var treeui_catalog_default = {
         {
           name: "padded",
           type: "boolean",
-          default: "true"
+          default: "true",
+          note: "Adds `.is-padded`, i.e. an inline padding of `clamp(var(--tree-space-4), 3vw, var(--tree-space-6))`.\n"
         },
         {
           name: "centered",
           type: "boolean",
-          default: "true"
+          default: "true",
+          note: "Adds `.is-centered`, i.e. `margin-inline: auto`."
         }
       ],
       events: [],
@@ -3054,6 +3226,7 @@ var treeui_catalog_default = {
         "role: menu",
         "trigger_aria_haspopup: menu",
         "trigger_aria_expanded: true",
+        "trigger_aria_controls: menu id, while open",
         "aria_disabled_on_disabled_items: true",
         "focus_visible_on_trigger: true",
         "keyboard_arrow_navigation: true",
@@ -3063,9 +3236,11 @@ var treeui_catalog_default = {
       ],
       behavior: [
         "outside_click_closes_menu: true",
-        "focus_restores_on_close: true",
+        "outside_click_restores_focus: false",
         "chevron_rotates_when_open: true",
-        "menu_grows_to_fit_items_without_wrapping: true"
+        "menu_grows_to_fit_items_without_wrapping: true",
+        "opening_focuses_first_enabled_item: true",
+        'focus_restores_on_close: {"value":true,"detail":"Focus returns to the trigger when the menu closes from inside it \u2014 selecting an item or pressing Escape. It deliberately does NOT move focus on an outside click, where the pointer has already placed focus elsewhere.\\n","applies_to_custom_trigger":true}'
       ],
       selection: {
         keywords: [
@@ -3461,7 +3636,7 @@ var treeui_catalog_default = {
           name: "htmlFor",
           type: "string",
           required: false,
-          description: "The id of the associated form control, used on the <label> for attribute."
+          description: "Rendered verbatim as the <label for> attribute. There is no id generation: when omitted, the label carries no `for` and is NOT associated with any control. The consumer must pass this AND set the same value as `id` on the child control.\n"
         },
         {
           name: "error",
@@ -3519,10 +3694,11 @@ var treeui_catalog_default = {
         }
       ],
       a11y: [
-        "Uses native <label> element with for attribute for input association.",
+        "Renders a native <label> element, but ONLY when `label` or the `label` slot is provided.",
         "Error messages are wrapped in role='alert' for screen reader announcements.",
         "Required indicator (*) is aria-hidden to avoid redundant announcements; use aria-required on the input itself.",
-        "Error takes precedence over hint to avoid conflicting messages."
+        "Error takes precedence over hint to avoid conflicting messages.",
+        "Extra attrs land on the root <div> (inheritAttrs: false), not on the child control."
       ],
       behavior: [],
       selection: {
@@ -3787,6 +3963,20 @@ var treeui_catalog_default = {
             "lg"
           ]
         },
+        {
+          name: "width",
+          type: "TFieldWidth",
+          default: "full",
+          values: [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "full"
+          ],
+          note: "Inline-size cap (max-inline-size). Fluid by default; use instead of an inline width style."
+        },
         {
           name: "disabled",
           type: "boolean",
@@ -3871,6 +4061,43 @@ var treeui_catalog_default = {
         "tag-input"
       ]
     },
+    {
+      name: "TKbd",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "primitive",
+      category: "Data Display",
+      status: "available",
+      purpose: "Keyboard-key hint (e.g. \u2318K, Esc, Ctrl) rendered as a native <kbd> with the library's chip styling.",
+      sourceFile: "packages/vue/src/components/TKbd.vue",
+      storyFile: "apps/docs/src/stories/Kbd.stories.ts",
+      storyTitle: "Components/Data Display/Kbd",
+      manifestFile: "docs/ai/COMPONENTS/kbd.yaml",
+      props: [],
+      events: [],
+      slots: [
+        {
+          name: "default"
+        }
+      ],
+      a11y: [
+        "Uses the native <kbd> element so assistive tech announces it as keyboard input."
+      ],
+      behavior: [
+        "renders_native_kbd_element: true"
+      ],
+      selection: {
+        keywords: [],
+        useWhen: [],
+        avoidWhen: [],
+        alternatives: []
+      },
+      setup: {
+        required: [],
+        notes: []
+      },
+      recipes: []
+    },
     {
       name: "TLink",
       aliases: [],
@@ -3932,10 +4159,39 @@ var treeui_catalog_default = {
       ],
       behavior: [],
       selection: {
-        keywords: [],
-        useWhen: [],
-        avoidWhen: [],
-        alternatives: []
+        keywords: [
+          "link",
+          "anchor",
+          "hyperlink",
+          "navigation",
+          "router link",
+          "external link",
+          "href",
+          "to"
+        ],
+        useWhen: [
+          "The action navigates somewhere \u2014 a URL, a route, or an anchor on the page.",
+          "You want consistent link styling with `default`, `muted`, or `danger` emphasis.",
+          "You want a component that renders RouterLink when vue-router is installed and a plain <a> when it is not, without branching in the template."
+        ],
+        avoidWhen: [
+          "The control performs an action rather than navigating (submit, open a dialog, delete) \u2014 that is a button, even if it looks like a link.",
+          "You need a full call-to-action surface with variants, sizes, and a loading state."
+        ],
+        alternatives: [
+          {
+            component: "TButton",
+            when: 'The control performs an action. Use `variant="ghost"` for a low-emphasis, link-like button.'
+          },
+          {
+            component: "TBreadcrumb",
+            when: "The links form a hierarchy trail."
+          },
+          {
+            component: "TNavMenu",
+            when: "The links are app-section navigation in a shell or sidebar."
+          }
+        ]
       },
       setup: {
         required: [],
@@ -3949,7 +4205,8 @@ var treeui_catalog_default = {
       package: "@treeui/vue",
       category: "Form",
       status: "stable",
-      description: "A rich Markdown editor with live preview, toolbar formatting, keyboard shortcuts, and image paste/drop upload support.\n",
+      description: "A Markdown editor with an always-visible side-by-side live preview, toolbar formatting, keyboard shortcuts, and image paste/drop upload support.\n",
+      sourceFile: "packages/vue/src/components/TMarkdownEditor.vue",
       storyFile: "apps/docs/src/stories/MarkdownEditor.stories.ts",
       storyTitle: "Components/Form/MarkdownEditor",
       manifestFile: "docs/ai/COMPONENTS/markdown-editor.yaml",
@@ -3985,6 +4242,12 @@ var treeui_catalog_default = {
           type: "(file: File) => Promise<string>",
           default: "undefined",
           description: "Async function that receives a File and returns the uploaded image URL. When not provided, pasting an image inserts an empty markdown image tag.\n"
+        },
+        {
+          name: "sanitize",
+          type: "(html: string) => string",
+          default: "undefined",
+          description: "Optional extra sanitizer applied to the rendered preview HTML as the final step, after the built-in rendering. It is an ADDITIVE escape hatch, not a toggle: pass DOMPurify or a stricter policy of your own instead of forking the component.\n"
         }
       ],
       events: [
@@ -4011,12 +4274,12 @@ var treeui_catalog_default = {
         }
       ],
       a11y: [
-        'Toolbar has role="toolbar" with aria-label.',
-        'Tab buttons use role="tab" and aria-selected.',
-        'Preview pane has aria-label="Markdown preview".',
+        'Toolbar has role="toolbar" with aria-label="Markdown formatting".',
+        'Toolbar groups are separated by elements with role="separator".',
+        'Preview pane carries aria-label="Markdown preview".',
         'Upload status bar uses role="status" and aria-live="polite".',
         "All toolbar buttons have title attributes describing the action.",
-        "Textarea has aria-label for screen readers."
+        "Textarea has aria-label (mirrors the placeholder text)."
       ],
       behavior: [],
       selection: {
@@ -5092,7 +5355,7 @@ var treeui_catalog_default = {
       props: [
         {
           name: "plans",
-          type: "PricingPlan[]",
+          type: "TPricingPlan[]",
           required: true,
           description: "Array of plan objects. Each plan supports the same props as PricingCard (title, description, price, currency, period, features, highlighted, badge, buttonText, disabled).\n"
         },
@@ -5113,14 +5376,14 @@ var treeui_catalog_default = {
         {
           name: "select",
           description: "Emitted when any plan's CTA is clicked. Provides the plan data and index.",
-          payload: "[plan: PricingPlan, index: number]"
+          payload: "[plan: TPricingPlan, index: number]"
         }
       ],
       slots: [
         {
           name: "plan",
           description: "Custom rendering for each plan card.",
-          note: "{ plan: PricingPlan, index: number }"
+          note: "{ plan: TPricingPlan, index: number }"
         }
       ],
       a11y: [
@@ -5279,7 +5542,7 @@ var treeui_catalog_default = {
       package: "@treeui/vue",
       category: "Feedback",
       status: "draft",
-      description: "Determinate and indeterminate progress indicator. Supports linear bar and circular ring variants.\n",
+      description: "Determinate and indeterminate progress indicator. Renders a linear bar only \u2014 there is no circular, ring, or radial variant, and no `variant`/`shape`/`type` prop. Compose one yourself if you need it.\n",
       storyFile: "apps/docs/src/stories/Progress.stories.ts",
       storyTitle: "Components/Feedback/Progress",
       manifestFile: "docs/ai/COMPONENTS/progress.yaml",
@@ -5319,7 +5582,8 @@ var treeui_catalog_default = {
         "role: progressbar",
         'attributes: ["aria-valuenow (omitted when indeterminate)","aria-valuemin (always 0)","aria-valuemax (always 100)","aria-label"]',
         "keyboard:",
-        "notes: Indeterminate state omits aria-valuenow so assistive tech announces the bar as indeterminate."
+        "notes: Indeterminate state omits aria-valuenow so assistive tech announces the bar as indeterminate.",
+        "value_is_normalized: aria-valuenow is `value / max` expressed as a 0\u2013100 percentage, not the raw `value`. aria-valuemax stays 100 regardless of the `max` prop, so the two always agree. The `label` is also repeated in a visually hidden span."
       ],
       behavior: [],
       selection: {
@@ -5521,6 +5785,20 @@ var treeui_catalog_default = {
             "lg"
           ]
         },
+        {
+          name: "width",
+          type: "TFieldWidth",
+          default: "full",
+          values: [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "full"
+          ],
+          note: "Inline-size cap (max-inline-size). Fluid by default; use instead of an inline width style."
+        },
         {
           name: "disabled",
           type: "boolean",
@@ -5675,10 +5953,13 @@ var treeui_catalog_default = {
       ],
       slots: [
         {
-          name: "item"
+          name: "item",
+          description: `Replaces the default row body (indicator, label, description, meta). Renders INSIDE the row's <button role="option">.
+`
         },
         {
-          name: "empty"
+          name: "empty",
+          description: "Replaces `emptyText` when `items` is empty."
         }
       ],
       a11y: [
@@ -5691,7 +5972,8 @@ var treeui_catalog_default = {
       ],
       behavior: [
         "can_be_controlled_or_uncontrolled: true",
-        "supports_rich_row_rendering_via_slot: true",
+        "supports_presentational_row_slot: true",
+        "supports_interactive_content_in_rows: false",
         "empty_state_text_supported: true"
       ],
       selection: {
@@ -5935,6 +6217,46 @@ var treeui_catalog_default = {
       },
       recipes: []
     },
+    {
+      name: "TSpacer",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "layout",
+      category: "Layout",
+      status: "available",
+      purpose: "Flexible spacer that absorbs free space between siblings in a flex layout (e.g. TStack), replacing hand-written margin:auto / flex:1.",
+      sourceFile: "packages/vue/src/components/TSpacer.vue",
+      storyFile: "apps/docs/src/stories/Spacer.stories.ts",
+      storyTitle: "Components/Layout/Spacer",
+      manifestFile: "docs/ai/COMPONENTS/spacer.yaml",
+      props: [
+        {
+          name: "as",
+          type: "string",
+          default: "div"
+        }
+      ],
+      events: [],
+      slots: [],
+      a11y: [
+        "Rendered with aria-hidden='true'; it is a layout-only element with no content."
+      ],
+      behavior: [
+        "grows_to_fill_free_space: true",
+        "pushes_siblings_apart_or_to_ends: true"
+      ],
+      selection: {
+        keywords: [],
+        useWhen: [],
+        avoidWhen: [],
+        alternatives: []
+      },
+      setup: {
+        required: [],
+        notes: []
+      },
+      recipes: []
+    },
     {
       name: "TSparkline",
       aliases: [],
@@ -6108,49 +6430,125 @@ var treeui_catalog_default = {
       recipes: []
     },
     {
-      name: "TStack",
+      name: "TSplit",
       aliases: [],
       package: "@treeui/vue",
       kind: "layout",
       category: "Layout",
       status: "available",
-      purpose: "One-dimensional spacing and alignment wrapper for vertical or horizontal compositions.",
-      sourceFile: "packages/vue/src/components/TStack.vue",
-      storyFile: "apps/docs/src/stories/Stack.stories.ts",
-      storyTitle: "Components/Layout/Stack",
-      manifestFile: "docs/ai/COMPONENTS/stack.yaml",
+      purpose: "Responsive two-pane layout (a wider main pane + a narrower aside) that sits side by side and stacks to one column when narrow \u2014 no media query.",
+      sourceFile: "packages/vue/src/components/TSplit.vue",
+      storyFile: "apps/docs/src/stories/Split.stories.ts",
+      storyTitle: "Components/Layout/Split",
+      manifestFile: "docs/ai/COMPONENTS/split.yaml",
       props: [
         {
           name: "as",
           type: "string",
           default: "div"
         },
-        {
-          name: "direction",
-          type: "TStackDirection",
-          default: "vertical",
-          values: [
-            "vertical",
-            "horizontal"
-          ]
-        },
         {
           name: "gap",
           type: "string",
-          default: "var(--tree-space-4)"
+          default: "var(--tree-space-5)"
         },
         {
-          name: "align",
-          type: "string",
-          default: "stretch"
+          name: "ratio",
+          type: "number",
+          default: "2",
+          note: "How many times faster the main pane grows than the aside pane."
         },
         {
-          name: "justify",
+          name: "minWidth",
           type: "string",
-          default: "flex-start"
+          default: "18rem",
+          note: "Min width each pane keeps before the layout wraps to a single column (flex-wrap, no @media)."
         },
         {
-          name: "wrap",
+          name: "side",
+          type: "start | end",
+          default: "end",
+          note: "Which side the aside pane sits on when side by side."
+        },
+        {
+          name: "align",
+          type: "string",
+          default: "start",
+          note: "Cross-axis alignment (align-items)."
+        }
+      ],
+      events: [],
+      slots: [
+        {
+          name: "default"
+        },
+        {
+          name: "aside"
+        }
+      ],
+      a11y: [
+        "Layout-only wrapper; semantics come from the slotted content."
+      ],
+      behavior: [
+        "wraps_to_single_column_when_narrow: true",
+        "media_query_free: true"
+      ],
+      selection: {
+        keywords: [],
+        useWhen: [],
+        avoidWhen: [],
+        alternatives: []
+      },
+      setup: {
+        required: [],
+        notes: []
+      },
+      recipes: []
+    },
+    {
+      name: "TStack",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "layout",
+      category: "Layout",
+      status: "available",
+      purpose: "One-dimensional spacing and alignment wrapper for vertical or horizontal compositions.",
+      sourceFile: "packages/vue/src/components/TStack.vue",
+      storyFile: "apps/docs/src/stories/Stack.stories.ts",
+      storyTitle: "Components/Layout/Stack",
+      manifestFile: "docs/ai/COMPONENTS/stack.yaml",
+      props: [
+        {
+          name: "as",
+          type: "string",
+          default: "div"
+        },
+        {
+          name: "direction",
+          type: "TStackDirection",
+          default: "vertical",
+          values: [
+            "vertical",
+            "horizontal"
+          ]
+        },
+        {
+          name: "gap",
+          type: "string",
+          default: "var(--tree-space-4)"
+        },
+        {
+          name: "align",
+          type: "string",
+          default: "stretch"
+        },
+        {
+          name: "justify",
+          type: "string",
+          default: "flex-start"
+        },
+        {
+          name: "wrap",
           type: "boolean",
           default: "false"
         },
@@ -6158,6 +6556,12 @@ var treeui_catalog_default = {
           name: "reverse",
           type: "boolean",
           default: "false"
+        },
+        {
+          name: "grow",
+          type: "boolean",
+          default: "false",
+          note: "Expands the stack to fill available space along its parent's main axis (flex: 1 with min-size 0). Use it to make a sidebar column fill its container height."
         }
       ],
       events: [],
@@ -6205,6 +6609,80 @@ var treeui_catalog_default = {
         "chart-surface"
       ]
     },
+    {
+      name: "TStackItem",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "layout",
+      category: "Layout",
+      status: "available",
+      purpose: "Per-child flex control inside a TStack \u2014 grow, shrink, basis, min width and align-self \u2014 so one item can fill the row without hand-written CSS.",
+      sourceFile: "packages/vue/src/components/TStackItem.vue",
+      storyFile: "apps/docs/src/stories/StackItem.stories.ts",
+      storyTitle: "Components/Layout/StackItem",
+      manifestFile: "docs/ai/COMPONENTS/stack-item.yaml",
+      props: [
+        {
+          name: "as",
+          type: "string",
+          default: "div"
+        },
+        {
+          name: "grow",
+          type: "boolean | number",
+          default: "false",
+          note: "true = flex-grow 1; a number sets the grow factor."
+        },
+        {
+          name: "shrink",
+          type: "boolean | number",
+          default: "undefined",
+          note: "false prevents shrinking; a number sets the shrink factor."
+        },
+        {
+          name: "basis",
+          type: "string",
+          default: "undefined",
+          note: "flex-basis (initial main-axis size)."
+        },
+        {
+          name: "minWidth",
+          type: "string",
+          default: "undefined",
+          note: "Minimum main-axis size before it wraps/shrinks."
+        },
+        {
+          name: "align",
+          type: "string",
+          default: "undefined",
+          note: "Per-item cross-axis alignment (align-self)."
+        }
+      ],
+      events: [],
+      slots: [
+        {
+          name: "default"
+        }
+      ],
+      a11y: [
+        "Layout-only wrapper; semantics come from the slotted content."
+      ],
+      behavior: [
+        "controls_single_flex_child: true",
+        "defaults_min_inline_size_zero: true"
+      ],
+      selection: {
+        keywords: [],
+        useWhen: [],
+        avoidWhen: [],
+        alternatives: []
+      },
+      setup: {
+        required: [],
+        notes: []
+      },
+      recipes: []
+    },
     {
       name: "TStat",
       aliases: [],
@@ -6676,7 +7154,7 @@ var treeui_catalog_default = {
       ],
       slots: [
         {
-          name: "unnamed"
+          name: "default"
         }
       ],
       a11y: [
@@ -6807,6 +7285,95 @@ var treeui_catalog_default = {
         "tag-input"
       ]
     },
+    {
+      name: "TText",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "primitive",
+      category: "Data Display",
+      status: "available",
+      purpose: "Typography primitive for body text, labels and headings \u2014 size, tone, weight and truncation from tokens, with no hand-written CSS.",
+      sourceFile: "packages/vue/src/components/TText.vue",
+      storyFile: "apps/docs/src/stories/Text.stories.ts",
+      storyTitle: "Components/Data Display/Text",
+      manifestFile: "docs/ai/COMPONENTS/text.yaml",
+      props: [
+        {
+          name: "as",
+          type: "string",
+          default: "span",
+          note: "Render element. Use `p`, `h1`\u2013`h6`, `label`, `small`, `strong`, \u2026 for correct semantics."
+        },
+        {
+          name: "size",
+          type: "TTextSize",
+          default: "undefined",
+          values: [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl",
+            "3xl"
+          ],
+          note: "Maps to --tree-font-size-*. Omitted = inherit."
+        },
+        {
+          name: "tone",
+          type: "TTextTone",
+          default: "default",
+          values: [
+            "default",
+            "muted",
+            "inverse",
+            "brand"
+          ],
+          note: "`default` inherits the current colour; others map to --tree-color-text-* / brand."
+        },
+        {
+          name: "weight",
+          type: "TTextWeight",
+          default: "undefined",
+          values: [
+            "regular",
+            "medium",
+            "semibold",
+            "bold"
+          ]
+        },
+        {
+          name: "truncate",
+          type: "boolean",
+          default: "false",
+          note: "Clip to a single line with an ellipsis."
+        }
+      ],
+      events: [],
+      slots: [
+        {
+          name: "default"
+        }
+      ],
+      a11y: [
+        "Choose `as` to convey the correct semantics (e.g. headings via h1\u2013h6); TText adds only visual styling."
+      ],
+      behavior: [
+        "semantic_element_controlled_by_as: true",
+        "token_driven_size_tone_weight: true"
+      ],
+      selection: {
+        keywords: [],
+        useWhen: [],
+        avoidWhen: [],
+        alternatives: []
+      },
+      setup: {
+        required: [],
+        notes: []
+      },
+      recipes: []
+    },
     {
       name: "TTextarea",
       aliases: [],
@@ -6835,6 +7402,20 @@ var treeui_catalog_default = {
             "lg"
           ]
         },
+        {
+          name: "width",
+          type: "TFieldWidth",
+          default: "full",
+          values: [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "full"
+          ],
+          note: "Inline-size cap (max-inline-size). Fluid by default; use instead of an inline width style."
+        },
         {
           name: "disabled",
           type: "boolean",
@@ -7384,54 +7965,895 @@ var treeui_catalog_default = {
         "hierarchy-picker"
       ]
     }
-  ]
-};
-
-// src/catalog.ts
-var catalog = treeui_catalog_default;
-var normalizeText = (value) => value.toLowerCase().replace(/[^a-z0-9]+/g, " ").trim();
-var tokenize = (value) => normalizeText(value).split(/\s+/).filter(Boolean);
-var stringifyFields = (values) => values.filter(Boolean).join(" ");
-var recipeSearchText = (recipe) => normalizeText(
-  stringifyFields([
-    recipe.id,
-    recipe.name,
-    recipe.useWhen.join(" "),
-    recipe.compose.join(" "),
-    recipe.notes.join(" ")
-  ])
-);
-var scoreMatch = (query, haystack) => {
-  const normalizedQuery = normalizeText(query);
-  if (!normalizedQuery) {
-    return 0;
-  }
-  if (haystack === normalizedQuery) {
-    return 120;
-  }
-  let score = 0;
-  if (haystack.includes(normalizedQuery)) {
-    score += 40;
-  }
-  const tokens = tokenize(normalizedQuery);
-  for (const token of tokens) {
-    if (haystack.includes(token)) {
-      score += token.length > 3 ? 12 : 6;
-    }
-  }
-  return score;
-};
-var scoreComponent = (component, query) => {
-  const names = normalizeText(
-    stringifyFields([component.name, component.legacyAlias, ...component.aliases])
-  );
-  const keywords = normalizeText(component.selection.keywords.join(" "));
-  const useWhen = normalizeText(component.selection.useWhen.join(" "));
-  const avoidWhen = normalizeText(component.selection.avoidWhen.join(" "));
-  const purpose = normalizeText(
-    stringifyFields([component.description, component.purpose, component.kind, component.category])
-  );
-  const api = normalizeText(
+  ],
+  tokens: [
+    {
+      cssVar: "--tree-font-family-sans",
+      path: "font.family.sans",
+      value: "'Google Sans Flex', 'Segoe UI', sans-serif",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-family-mono",
+      path: "font.family.mono",
+      value: "'Google Sans Code', 'SFMono-Regular', monospace",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-size-xs",
+      path: "font.size.xs",
+      value: "0.6875rem",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-size-sm",
+      path: "font.size.sm",
+      value: "0.8125rem",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-size-md",
+      path: "font.size.md",
+      value: "0.9375rem",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-size-base",
+      path: "font.size.base",
+      value: "0.9375rem",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-size-lg",
+      path: "font.size.lg",
+      value: "1.125rem",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-size-xl",
+      path: "font.size.xl",
+      value: "1.375rem",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-size-2xl",
+      path: "font.size.2xl",
+      value: "1.375rem",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-size-3xl",
+      path: "font.size.3xl",
+      value: "1.75rem",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-size-4xl",
+      path: "font.size.4xl",
+      value: "2.25rem",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-size-5xl",
+      path: "font.size.5xl",
+      value: "3rem",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-weight-regular",
+      path: "font.weight.regular",
+      value: "400",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-weight-medium",
+      path: "font.weight.medium",
+      value: "500",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-weight-semibold",
+      path: "font.weight.semibold",
+      value: "600",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-weight-bold",
+      path: "font.weight.bold",
+      value: "700",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-weight-extrabold",
+      path: "font.weight.extrabold",
+      value: "800",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-lineHeight-compact",
+      path: "font.lineHeight.compact",
+      value: "1.1",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-lineHeight-ui",
+      path: "font.lineHeight.ui",
+      value: "1.15",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-lineHeight-tight",
+      path: "font.lineHeight.tight",
+      value: "1.25",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-lineHeight-heading",
+      path: "font.lineHeight.heading",
+      value: "1.3",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-lineHeight-base",
+      path: "font.lineHeight.base",
+      value: "1.5",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-lineHeight-body",
+      path: "font.lineHeight.body",
+      value: "1.6",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-font-lineHeight-relaxed",
+      path: "font.lineHeight.relaxed",
+      value: "1.65",
+      category: "font",
+      description: "Typography token: font family, size, weight, or line height."
+    },
+    {
+      cssVar: "--tree-space-0",
+      path: "space.0",
+      value: "0",
+      category: "space",
+      description: "Spacing scale step for padding, margin, and gap."
+    },
+    {
+      cssVar: "--tree-space-1",
+      path: "space.1",
+      value: "0.25rem",
+      category: "space",
+      description: "Spacing scale step for padding, margin, and gap."
+    },
+    {
+      cssVar: "--tree-space-2",
+      path: "space.2",
+      value: "0.5rem",
+      category: "space",
+      description: "Spacing scale step for padding, margin, and gap."
+    },
+    {
+      cssVar: "--tree-space-3",
+      path: "space.3",
+      value: "0.75rem",
+      category: "space",
+      description: "Spacing scale step for padding, margin, and gap."
+    },
+    {
+      cssVar: "--tree-space-4",
+      path: "space.4",
+      value: "1rem",
+      category: "space",
+      description: "Spacing scale step for padding, margin, and gap."
+    },
+    {
+      cssVar: "--tree-space-5",
+      path: "space.5",
+      value: "1.25rem",
+      category: "space",
+      description: "Spacing scale step for padding, margin, and gap."
+    },
+    {
+      cssVar: "--tree-space-6",
+      path: "space.6",
+      value: "1.5rem",
+      category: "space",
+      description: "Spacing scale step for padding, margin, and gap."
+    },
+    {
+      cssVar: "--tree-space-8",
+      path: "space.8",
+      value: "2rem",
+      category: "space",
+      description: "Spacing scale step for padding, margin, and gap."
+    },
+    {
+      cssVar: "--tree-space-12",
+      path: "space.12",
+      value: "3rem",
+      category: "space",
+      description: "Spacing scale step for padding, margin, and gap."
+    },
+    {
+      cssVar: "--tree-space-16",
+      path: "space.16",
+      value: "4rem",
+      category: "space",
+      description: "Spacing scale step for padding, margin, and gap."
+    },
+    {
+      cssVar: "--tree-radius-sm",
+      path: "radius.sm",
+      value: "0.375rem",
+      category: "radius",
+      description: "Corner radius scale step."
+    },
+    {
+      cssVar: "--tree-radius-md",
+      path: "radius.md",
+      value: "0.625rem",
+      category: "radius",
+      description: "Corner radius scale step."
+    },
+    {
+      cssVar: "--tree-radius-lg",
+      path: "radius.lg",
+      value: "0.875rem",
+      category: "radius",
+      description: "Corner radius scale step."
+    },
+    {
+      cssVar: "--tree-radius-pill",
+      path: "radius.pill",
+      value: "999px",
+      category: "radius",
+      description: "Corner radius scale step."
+    },
+    {
+      cssVar: "--tree-shadow-xs",
+      path: "shadow.xs",
+      value: "0 1px 2px rgba(15, 23, 42, 0.06)",
+      category: "shadow",
+      description: "Elevation shadow."
+    },
+    {
+      cssVar: "--tree-shadow-sm",
+      path: "shadow.sm",
+      value: "0 6px 18px rgba(15, 23, 42, 0.08)",
+      category: "shadow",
+      description: "Elevation shadow."
+    },
+    {
+      cssVar: "--tree-shadow-md",
+      path: "shadow.md",
+      value: "0 14px 34px rgba(15, 23, 42, 0.12)",
+      category: "shadow",
+      description: "Elevation shadow."
+    },
+    {
+      cssVar: "--tree-gradient-brand",
+      path: "gradient.brand",
+      value: "linear-gradient(135deg, var(--tree-color-brand-primary), var(--tree-color-brand-hover))",
+      category: "gradient",
+      description: "Gradient composed from the themed brand variables."
+    },
+    {
+      cssVar: "--tree-border-width-subtle",
+      path: "border.width.subtle",
+      value: "1px",
+      category: "border",
+      description: "Border width step."
+    },
+    {
+      cssVar: "--tree-border-width-strong",
+      path: "border.width.strong",
+      value: "1.5px",
+      category: "border",
+      description: "Border width step."
+    },
+    {
+      cssVar: "--tree-motion-duration-fast",
+      path: "motion.duration.fast",
+      value: "100ms",
+      category: "motion",
+      description: "Motion duration or easing curve."
+    },
+    {
+      cssVar: "--tree-motion-duration-moderate",
+      path: "motion.duration.moderate",
+      value: "200ms",
+      category: "motion",
+      description: "Motion duration or easing curve."
+    },
+    {
+      cssVar: "--tree-motion-duration-normal",
+      path: "motion.duration.normal",
+      value: "300ms",
+      category: "motion",
+      description: "Motion duration or easing curve."
+    },
+    {
+      cssVar: "--tree-motion-duration-slow",
+      path: "motion.duration.slow",
+      value: "400ms",
+      category: "motion",
+      description: "Motion duration or easing curve."
+    },
+    {
+      cssVar: "--tree-motion-duration-slower",
+      path: "motion.duration.slower",
+      value: "500ms",
+      category: "motion",
+      description: "Motion duration or easing curve."
+    },
+    {
+      cssVar: "--tree-motion-easing-standard",
+      path: "motion.easing.standard",
+      value: "cubic-bezier(0.2, 0, 0, 1)",
+      category: "motion",
+      description: "Motion duration or easing curve."
+    },
+    {
+      cssVar: "--tree-motion-easing-easeOut",
+      path: "motion.easing.easeOut",
+      value: "cubic-bezier(0, 0, 0.2, 1)",
+      category: "motion",
+      description: "Motion duration or easing curve."
+    },
+    {
+      cssVar: "--tree-motion-easing-easeInOut",
+      path: "motion.easing.easeInOut",
+      value: "cubic-bezier(0.4, 0, 0.2, 1)",
+      category: "motion",
+      description: "Motion duration or easing curve."
+    },
+    {
+      cssVar: "--tree-motion-easing-easeIn",
+      path: "motion.easing.easeIn",
+      value: "cubic-bezier(0.4, 0, 1, 1)",
+      category: "motion",
+      description: "Motion duration or easing curve."
+    },
+    {
+      cssVar: "--tree-size-control-sm",
+      path: "size.control.sm",
+      value: "2rem",
+      category: "size",
+      description: "Control and icon sizing scale step."
+    },
+    {
+      cssVar: "--tree-size-control-md",
+      path: "size.control.md",
+      value: "2.5rem",
+      category: "size",
+      description: "Control and icon sizing scale step."
+    },
+    {
+      cssVar: "--tree-size-control-lg",
+      path: "size.control.lg",
+      value: "3rem",
+      category: "size",
+      description: "Control and icon sizing scale step."
+    },
+    {
+      cssVar: "--tree-size-icon-sm",
+      path: "size.icon.sm",
+      value: "1rem",
+      category: "size",
+      description: "Control and icon sizing scale step."
+    },
+    {
+      cssVar: "--tree-size-icon-md",
+      path: "size.icon.md",
+      value: "1.25rem",
+      category: "size",
+      description: "Control and icon sizing scale step."
+    },
+    {
+      cssVar: "--tree-size-icon-lg",
+      path: "size.icon.lg",
+      value: "1.5rem",
+      category: "size",
+      description: "Control and icon sizing scale step."
+    },
+    {
+      cssVar: "--tree-size-icon-xl",
+      path: "size.icon.xl",
+      value: "2rem",
+      category: "size",
+      description: "Control and icon sizing scale step."
+    },
+    {
+      cssVar: "--tree-size-icon-2xl",
+      path: "size.icon.2xl",
+      value: "3rem",
+      category: "size",
+      description: "Control and icon sizing scale step."
+    },
+    {
+      cssVar: "--tree-layout-grid-columns",
+      path: "layout.grid.columns",
+      value: "12",
+      category: "layout",
+      description: "Layout grid, gutter, or margin measurement."
+    },
+    {
+      cssVar: "--tree-layout-grid-base",
+      path: "layout.grid.base",
+      value: "8px",
+      category: "layout",
+      description: "Layout grid, gutter, or margin measurement."
+    },
+    {
+      cssVar: "--tree-layout-gutter-sm",
+      path: "layout.gutter.sm",
+      value: "1rem",
+      category: "layout",
+      description: "Layout grid, gutter, or margin measurement."
+    },
+    {
+      cssVar: "--tree-layout-gutter-md",
+      path: "layout.gutter.md",
+      value: "1.5rem",
+      category: "layout",
+      description: "Layout grid, gutter, or margin measurement."
+    },
+    {
+      cssVar: "--tree-layout-margin-sm",
+      path: "layout.margin.sm",
+      value: "1.5rem",
+      category: "layout",
+      description: "Layout grid, gutter, or margin measurement."
+    },
+    {
+      cssVar: "--tree-layout-margin-md",
+      path: "layout.margin.md",
+      value: "2rem",
+      category: "layout",
+      description: "Layout grid, gutter, or margin measurement."
+    },
+    {
+      cssVar: "--tree-layout-margin-lg",
+      path: "layout.margin.lg",
+      value: "3rem",
+      category: "layout",
+      description: "Layout grid, gutter, or margin measurement."
+    },
+    {
+      cssVar: "--tree-z-base",
+      path: "z.base",
+      value: "1",
+      category: "z",
+      description: "Stacking layer (z-index)."
+    },
+    {
+      cssVar: "--tree-z-dropdown",
+      path: "z.dropdown",
+      value: "1000",
+      category: "z",
+      description: "Stacking layer (z-index)."
+    },
+    {
+      cssVar: "--tree-z-popover",
+      path: "z.popover",
+      value: "1050",
+      category: "z",
+      description: "Stacking layer (z-index)."
+    },
+    {
+      cssVar: "--tree-z-sticky",
+      path: "z.sticky",
+      value: "1100",
+      category: "z",
+      description: "Stacking layer (z-index)."
+    },
+    {
+      cssVar: "--tree-z-overlay",
+      path: "z.overlay",
+      value: "1200",
+      category: "z",
+      description: "Stacking layer (z-index)."
+    },
+    {
+      cssVar: "--tree-z-modal",
+      path: "z.modal",
+      value: "1300",
+      category: "z",
+      description: "Stacking layer (z-index)."
+    },
+    {
+      cssVar: "--tree-z-toast",
+      path: "z.toast",
+      value: "1400",
+      category: "z",
+      description: "Stacking layer (z-index)."
+    },
+    {
+      cssVar: "--tree-breakpoint-sm",
+      path: "breakpoint.sm",
+      value: "640px",
+      category: "breakpoint",
+      description: "Responsive breakpoint width."
+    },
+    {
+      cssVar: "--tree-breakpoint-md",
+      path: "breakpoint.md",
+      value: "768px",
+      category: "breakpoint",
+      description: "Responsive breakpoint width."
+    },
+    {
+      cssVar: "--tree-breakpoint-lg",
+      path: "breakpoint.lg",
+      value: "1024px",
+      category: "breakpoint",
+      description: "Responsive breakpoint width."
+    },
+    {
+      cssVar: "--tree-breakpoint-xl",
+      path: "breakpoint.xl",
+      value: "1280px",
+      category: "breakpoint",
+      description: "Responsive breakpoint width."
+    },
+    {
+      cssVar: "--tree-color-bg-primary",
+      path: "color.bg.primary",
+      value: "#f6f8fa",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#f6f8fa",
+        dark: "#1c2128"
+      }
+    },
+    {
+      cssVar: "--tree-color-bg-surface",
+      path: "color.bg.surface",
+      value: "#ffffff",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#ffffff",
+        dark: "#22272e"
+      }
+    },
+    {
+      cssVar: "--tree-color-bg-subtle",
+      path: "color.bg.subtle",
+      value: "#eff2f5",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#eff2f5",
+        dark: "#2d333b"
+      }
+    },
+    {
+      cssVar: "--tree-color-border-default",
+      path: "color.border.default",
+      value: "#d0d7de",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#d0d7de",
+        dark: "#444c56"
+      }
+    },
+    {
+      cssVar: "--tree-color-border-strong",
+      path: "color.border.strong",
+      value: "#afb8c1",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#afb8c1",
+        dark: "#576270"
+      }
+    },
+    {
+      cssVar: "--tree-color-text-primary",
+      path: "color.text.primary",
+      value: "#1f2328",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#1f2328",
+        dark: "#adbac7"
+      }
+    },
+    {
+      cssVar: "--tree-color-text-muted",
+      path: "color.text.muted",
+      value: "#59636e",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#59636e",
+        dark: "#95a3b2"
+      }
+    },
+    {
+      cssVar: "--tree-color-text-inverse",
+      path: "color.text.inverse",
+      value: "#ffffff",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#ffffff",
+        dark: "#1c2128"
+      }
+    },
+    {
+      cssVar: "--tree-color-brand-primary",
+      path: "color.brand.primary",
+      value: "#0969da",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#0969da",
+        dark: "#539bf5"
+      }
+    },
+    {
+      cssVar: "--tree-color-brand-hover",
+      path: "color.brand.hover",
+      value: "#0550ae",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#0550ae",
+        dark: "#6cabf7"
+      }
+    },
+    {
+      cssVar: "--tree-color-brand-soft",
+      path: "color.brand.soft",
+      value: "#ddf4ff",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#ddf4ff",
+        dark: "#1a3453"
+      }
+    },
+    {
+      cssVar: "--tree-color-brand-contrast",
+      path: "color.brand.contrast",
+      value: "#ffffff",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#ffffff",
+        dark: "#0a1a2f"
+      }
+    },
+    {
+      cssVar: "--tree-color-status-success",
+      path: "color.status.success",
+      value: "#1a7f37",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#1a7f37",
+        dark: "#57ab5a"
+      }
+    },
+    {
+      cssVar: "--tree-color-status-warning",
+      path: "color.status.warning",
+      value: "#9a6700",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#9a6700",
+        dark: "#c69026"
+      }
+    },
+    {
+      cssVar: "--tree-color-status-error",
+      path: "color.status.error",
+      value: "#d1242f",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#d1242f",
+        dark: "#f47067"
+      }
+    },
+    {
+      cssVar: "--tree-color-status-info",
+      path: "color.status.info",
+      value: "#0969da",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#0969da",
+        dark: "#6cb6ff"
+      }
+    },
+    {
+      cssVar: "--tree-color-chart-1",
+      path: "color.chart.1",
+      value: "#2a78d6",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#2a78d6",
+        dark: "#3987e5"
+      }
+    },
+    {
+      cssVar: "--tree-color-chart-2",
+      path: "color.chart.2",
+      value: "#1baf7a",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#1baf7a",
+        dark: "#199e70"
+      }
+    },
+    {
+      cssVar: "--tree-color-chart-3",
+      path: "color.chart.3",
+      value: "#eda100",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#eda100",
+        dark: "#c98500"
+      }
+    },
+    {
+      cssVar: "--tree-color-chart-4",
+      path: "color.chart.4",
+      value: "#008300",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#008300",
+        dark: "#008300"
+      }
+    },
+    {
+      cssVar: "--tree-color-chart-5",
+      path: "color.chart.5",
+      value: "#4a3aa7",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#4a3aa7",
+        dark: "#9085e9"
+      }
+    },
+    {
+      cssVar: "--tree-color-chart-6",
+      path: "color.chart.6",
+      value: "#e34948",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#e34948",
+        dark: "#e66767"
+      }
+    },
+    {
+      cssVar: "--tree-color-chart-7",
+      path: "color.chart.7",
+      value: "#e87ba4",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#e87ba4",
+        dark: "#d55181"
+      }
+    },
+    {
+      cssVar: "--tree-color-chart-8",
+      path: "color.chart.8",
+      value: "#eb6834",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "#eb6834",
+        dark: "#d95926"
+      }
+    },
+    {
+      cssVar: "--tree-color-overlay",
+      path: "color.overlay",
+      value: "rgba(31, 35, 40, 0.5)",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "rgba(31, 35, 40, 0.5)",
+        dark: "rgba(13, 17, 23, 0.6)"
+      }
+    },
+    {
+      cssVar: "--tree-color-focus-ring",
+      path: "color.focus-ring",
+      value: "rgba(9, 105, 218, 0.32)",
+      category: "color",
+      description: "Themed semantic color, resolved per [data-tree-theme].",
+      themeValues: {
+        light: "rgba(9, 105, 218, 0.32)",
+        dark: "rgba(83, 155, 245, 0.32)"
+      }
+    }
+  ]
+};
+
+// src/catalog.ts
+var catalog = treeui_catalog_default;
+var normalizeText = (value) => value.toLowerCase().replace(/[^a-z0-9]+/g, " ").trim();
+var tokenize = (value) => normalizeText(value).split(/\s+/).filter(Boolean);
+var stringifyFields = (values) => values.filter(Boolean).join(" ");
+var recipeSearchText = (recipe) => normalizeText(
+  stringifyFields([
+    recipe.id,
+    recipe.name,
+    recipe.useWhen.join(" "),
+    recipe.compose.join(" "),
+    recipe.notes.join(" ")
+  ])
+);
+var scoreMatch = (query, haystack) => {
+  const normalizedQuery = normalizeText(query);
+  if (!normalizedQuery) {
+    return 0;
+  }
+  if (haystack === normalizedQuery) {
+    return 120;
+  }
+  let score = 0;
+  if (haystack.includes(normalizedQuery)) {
+    score += 40;
+  }
+  const tokens = tokenize(normalizedQuery);
+  for (const token of tokens) {
+    if (haystack.includes(token)) {
+      score += token.length > 3 ? 12 : 6;
+    }
+  }
+  return score;
+};
+var scoreComponent = (component, query) => {
+  const names = normalizeText(
+    stringifyFields([component.name, component.legacyAlias, ...component.aliases])
+  );
+  const keywords = normalizeText(component.selection.keywords.join(" "));
+  const useWhen = normalizeText(component.selection.useWhen.join(" "));
+  const avoidWhen = normalizeText(component.selection.avoidWhen.join(" "));
+  const purpose = normalizeText(
+    stringifyFields([component.description, component.purpose, component.kind, component.category])
+  );
+  const api = normalizeText(
     stringifyFields([
       component.props.map((prop) => `${prop.name} ${prop.description ?? ""}`).join(" "),
       component.events.map((event) => event.name).join(" "),
@@ -7629,6 +9051,43 @@ var searchRecipes = (query, limit = 6) => catalog.recipes.map((recipe) => ({
   recipe,
   score: scoreMatch(query, recipeSearchText(recipe))
 })).filter((result) => result.score > 0).sort((left, right) => right.score - left.score || left.recipe.name.localeCompare(right.recipe.name)).slice(0, limit);
+var tokenValues = (token) => [
+  token.value,
+  ...Object.values(token.themeValues ?? {})
+];
+var REM_ROOT_PX = 16;
+var lengthAliases = (query) => {
+  const match = query.trim().match(/^(\d*\.?\d+)(rem|px)$/i);
+  if (!match) {
+    return [];
+  }
+  const amount = Number(match[1]);
+  if (!Number.isFinite(amount)) {
+    return [];
+  }
+  const unit = match[2].toLowerCase();
+  const converted = unit === "rem" ? amount * REM_ROOT_PX : amount / REM_ROOT_PX;
+  return [`${Number(converted.toFixed(4))}${unit === "rem" ? "px" : "rem"}`];
+};
+var scoreToken = (token, query) => {
+  const identity = normalizeText(stringifyFields([token.cssVar, token.path]));
+  const category = normalizeText(token.category);
+  const values = normalizeText(stringifyFields(tokenValues(token)));
+  const description = normalizeText(token.description ?? "");
+  const valueScore = Math.max(
+    ...[query, ...lengthAliases(query)].map((candidate) => scoreMatch(candidate, values))
+  );
+  let score = 0;
+  score += scoreMatch(query, identity) * 3;
+  score += scoreMatch(query, category) * 2;
+  score += valueScore * 2;
+  score += scoreMatch(query, description);
+  return Math.max(score, 0);
+};
+var searchTokens = (query, limit = 12) => catalog.tokens.map((token) => ({
+  token,
+  score: scoreToken(token, query)
+})).filter((result) => result.score > 0).sort((left, right) => right.score - left.score || left.token.cssVar.localeCompare(right.token.cssVar)).slice(0, limit);
 var formatFieldList = (label, values) => values.length > 0 ? `${label}: ${values.join(", ")}` : void 0;
 var formatComponentSummary = (component) => {
   const lines = [
@@ -7673,6 +9132,12 @@ var formatRecipeResults = (results) => results.length > 0 ? results.map((result,
   const useWhen = result.recipe.useWhen[0];
   return `${index + 1}. ${result.recipe.name}: ${useWhen ?? "No recipe summary available."} Components: ${result.recipe.compose.join(", ")}.`;
 }).join("\n") : "No matching TreeUI recipes found.";
+var formatTokenResults = (results) => results.length > 0 ? results.map((result, index) => {
+  const { token } = result;
+  const themeValues = token.themeValues ? Object.entries(token.themeValues).map(([theme, value]) => `${theme} ${value}`).join(" | ") : void 0;
+  const description = token.description ? ` ${token.description}` : "";
+  return `${index + 1}. ${token.cssVar}: ${themeValues ?? token.value} (${token.category} | ${token.path}).${description}`;
+}).join("\n") : "No matching TreeUI design tokens found.";
 var formatSetupGuide = (componentName) => {
   if (!componentName) {
     return [
@@ -7700,6 +9165,291 @@ var formatSetupGuide = (componentName) => {
 var import_node_fs = __toESM(require("fs"), 1);
 var import_node_path = __toESM(require("path"), 1);
 var import_yaml = require("yaml");
+
+// ../tokens/src/tokens.ts
+var treeTokens = {
+  font: {
+    family: {
+      sans: "'Google Sans Flex', 'Segoe UI', sans-serif",
+      mono: "'Google Sans Code', 'SFMono-Regular', monospace"
+    },
+    size: {
+      xs: "0.6875rem",
+      sm: "0.8125rem",
+      md: "0.9375rem",
+      base: "0.9375rem",
+      lg: "1.125rem",
+      xl: "1.375rem",
+      "2xl": "1.375rem",
+      "3xl": "1.75rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem"
+    },
+    weight: {
+      regular: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+      extrabold: "800"
+    },
+    lineHeight: {
+      compact: "1.1",
+      ui: "1.15",
+      tight: "1.25",
+      heading: "1.3",
+      base: "1.5",
+      body: "1.6",
+      relaxed: "1.65"
+    }
+  },
+  space: {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    8: "2rem",
+    12: "3rem",
+    16: "4rem"
+  },
+  radius: {
+    sm: "0.375rem",
+    md: "0.625rem",
+    lg: "0.875rem",
+    pill: "999px"
+  },
+  shadow: {
+    xs: "0 1px 2px rgba(15, 23, 42, 0.06)",
+    sm: "0 6px 18px rgba(15, 23, 42, 0.08)",
+    md: "0 14px 34px rgba(15, 23, 42, 0.12)"
+  },
+  // Brand gradient for high-emphasis surfaces (e.g. the primary CTA).
+  // References the theme brand vars so it follows light/dark automatically;
+  // override `--tree-gradient-brand` to match a product's marketing gradient.
+  gradient: {
+    brand: "linear-gradient(135deg, var(--tree-color-brand-primary), var(--tree-color-brand-hover))"
+  },
+  border: {
+    width: {
+      subtle: "1px",
+      strong: "1.5px"
+    }
+  },
+  motion: {
+    duration: {
+      fast: "100ms",
+      moderate: "200ms",
+      normal: "300ms",
+      slow: "400ms",
+      slower: "500ms"
+    },
+    easing: {
+      standard: "cubic-bezier(0.2, 0, 0, 1)",
+      easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+      easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+      easeIn: "cubic-bezier(0.4, 0, 1, 1)"
+    }
+  },
+  size: {
+    control: {
+      sm: "2rem",
+      md: "2.5rem",
+      lg: "3rem"
+    },
+    icon: {
+      sm: "1rem",
+      md: "1.25rem",
+      lg: "1.5rem",
+      xl: "2rem",
+      "2xl": "3rem"
+    }
+  },
+  layout: {
+    grid: {
+      columns: "12",
+      base: "8px"
+    },
+    gutter: {
+      sm: "1rem",
+      md: "1.5rem"
+    },
+    margin: {
+      sm: "1.5rem",
+      md: "2rem",
+      lg: "3rem"
+    }
+  },
+  z: {
+    base: "1",
+    dropdown: "1000",
+    popover: "1050",
+    sticky: "1100",
+    overlay: "1200",
+    modal: "1300",
+    toast: "1400"
+  },
+  breakpoint: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px"
+  }
+};
+var treeThemes = {
+  light: {
+    color: {
+      bg: {
+        primary: "#f6f8fa",
+        surface: "#ffffff",
+        subtle: "#eff2f5"
+      },
+      border: {
+        default: "#d0d7de",
+        strong: "#afb8c1"
+      },
+      text: {
+        primary: "#1f2328",
+        muted: "#59636e",
+        inverse: "#ffffff"
+      },
+      brand: {
+        primary: "#0969da",
+        hover: "#0550ae",
+        soft: "#ddf4ff",
+        contrast: "#ffffff"
+      },
+      status: {
+        success: "#1a7f37",
+        warning: "#9a6700",
+        error: "#d1242f",
+        info: "#0969da"
+      },
+      // Categorical data-viz palette. Fixed hue order (blue → orange), validated
+      // for CVD separation and contrast against the light surface. Assign in order;
+      // the components cycle after 8 as a fallback, but prefer folding a 9th+
+      // category into "Other".
+      chart: {
+        1: "#2a78d6",
+        2: "#1baf7a",
+        3: "#eda100",
+        4: "#008300",
+        5: "#4a3aa7",
+        6: "#e34948",
+        7: "#e87ba4",
+        8: "#eb6834"
+      },
+      overlay: "rgba(31, 35, 40, 0.5)",
+      "focus-ring": "rgba(9, 105, 218, 0.32)"
+    }
+  },
+  dark: {
+    color: {
+      bg: {
+        primary: "#1c2128",
+        surface: "#22272e",
+        subtle: "#2d333b"
+      },
+      border: {
+        default: "#444c56",
+        strong: "#576270"
+      },
+      text: {
+        primary: "#adbac7",
+        muted: "#95a3b2",
+        inverse: "#1c2128"
+      },
+      brand: {
+        primary: "#539bf5",
+        hover: "#6cabf7",
+        soft: "#1a3453",
+        contrast: "#0a1a2f"
+      },
+      status: {
+        success: "#57ab5a",
+        warning: "#c69026",
+        error: "#f47067",
+        info: "#6cb6ff"
+      },
+      // Same hue order stepped for the dark surface (not a separate palette) —
+      // each step re-validated for the dark band and >= 3:1 on the dark surface.
+      chart: {
+        1: "#3987e5",
+        2: "#199e70",
+        3: "#c98500",
+        4: "#008300",
+        5: "#9085e9",
+        6: "#e66767",
+        7: "#d55181",
+        8: "#d95926"
+      },
+      overlay: "rgba(13, 17, 23, 0.6)",
+      "focus-ring": "rgba(83, 155, 245, 0.32)"
+    }
+  }
+};
+
+// src/token-source.ts
+var toCssVariable = (path2) => `--tree-${path2.join("-")}`;
+var flattenTokens = (record, path2 = []) => Object.entries(record).flatMap(([key, value]) => {
+  if (typeof value === "string" || typeof value === "number") {
+    return [[[...path2, key], value]];
+  }
+  return flattenTokens(value, [...path2, key]);
+});
+var DEFAULT_THEME_NAME = "light";
+var categoryDescriptions = {
+  font: "Typography token: font family, size, weight, or line height.",
+  space: "Spacing scale step for padding, margin, and gap.",
+  radius: "Corner radius scale step.",
+  shadow: "Elevation shadow.",
+  gradient: "Gradient composed from the themed brand variables.",
+  border: "Border width step.",
+  motion: "Motion duration or easing curve.",
+  size: "Control and icon sizing scale step.",
+  layout: "Layout grid, gutter, or margin measurement.",
+  z: "Stacking layer (z-index).",
+  breakpoint: "Responsive breakpoint width.",
+  color: "Themed semantic color, resolved per [data-tree-theme]."
+};
+var describeToken = (category) => categoryDescriptions[category] ?? "TreeUI design token.";
+var buildTokenEntries = () => {
+  const foundation = flattenTokens(treeTokens).map(
+    ([path2, value]) => ({
+      cssVar: toCssVariable(path2),
+      path: path2.join("."),
+      value: String(value),
+      category: path2[0],
+      description: describeToken(path2[0])
+    })
+  );
+  const themed = /* @__PURE__ */ new Map();
+  for (const [themeName, theme] of Object.entries(treeThemes)) {
+    for (const [path2, value] of flattenTokens(theme)) {
+      const cssVar = toCssVariable(path2);
+      const existing = themed.get(cssVar);
+      if (existing) {
+        existing.themeValues = { ...existing.themeValues, [themeName]: String(value) };
+        continue;
+      }
+      themed.set(cssVar, {
+        cssVar,
+        path: path2.join("."),
+        value: String(value),
+        category: path2[0],
+        description: describeToken(path2[0]),
+        themeValues: { [themeName]: String(value) }
+      });
+    }
+  }
+  for (const entry of themed.values()) {
+    entry.value = entry.themeValues?.[DEFAULT_THEME_NAME] ?? entry.value;
+  }
+  return [...foundation, ...themed.values()];
+};
+
+// src/catalog-source.ts
 var readText = (filePath) => import_node_fs.default.readFileSync(filePath, "utf8");
 var normalizeWhitespace = (value) => value.replace(/\s+/g, " ").trim();
 var stringifyValue = (value) => {
@@ -8035,7 +9785,8 @@ var buildCatalogFromRepo = (repoRoot) => {
     decisionGuides: normalizeDecisionGuides(selectionDoc.decision_guides),
     recipes,
     setup,
-    components
+    components,
+    tokens: buildTokenEntries()
   };
 };
 var getRepoRootFromPackageRoot = (packageRoot) => import_node_path.default.resolve(packageRoot, "../..");
@@ -8068,6 +9819,12 @@ var resourceList = [
     description: "Reusable multi-component composition recipes.",
     mimeType: "application/json"
   },
+  {
+    uri: "treeui://tokens",
+    name: "TreeUI design tokens",
+    description: "Flat list of --tree-* design tokens with per-theme values.",
+    mimeType: "application/json"
+  },
   ...catalog.components.map((component) => ({
     uri: `treeui://components/${component.name}`,
     name: component.name,
@@ -8095,6 +9852,9 @@ var readResourcePayload = (uri) => {
   if (uri === "treeui://recipes") {
     return catalog.recipes;
   }
+  if (uri === "treeui://tokens") {
+    return catalog.tokens;
+  }
   const componentMatch = uri.match(/^treeui:\/\/components\/([^/]+)$/);
   if (componentMatch) {
     const component = findComponent(componentMatch[1]);
@@ -8196,6 +9956,21 @@ var createTreeuiMcpServer = () => {
           },
           required: ["query"]
         }
+      },
+      {
+        name: "search_tokens",
+        description: "Search TreeUI design tokens by CSS variable, category, path, or shipped value. Use this before hardcoding any color, spacing, radius, or breakpoint value.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            query: {
+              type: "string",
+              description: "A CSS variable such as --tree-gradient-brand, a category or path such as space or color.status, or a literal value such as 64rem or #0969da."
+            },
+            limit: { type: "number", description: "Maximum number of tokens to return." }
+          },
+          required: ["query"]
+        }
       }
     ]
   }));
@@ -8236,6 +10011,13 @@ var createTreeuiMcpServer = () => {
       }
       return asTextContent(formatRecipeResults(searchRecipes(query, readNumberArg(args, "limit", 6))));
     }
+    if (name === "search_tokens") {
+      const query = readStringArg(args, "query");
+      if (!query) {
+        return asErrorTextContent('The "query" argument is required.');
+      }
+      return asTextContent(formatTokenResults(searchTokens(query, readNumberArg(args, "limit", 12))));
+    }
     return asErrorTextContent(`Unknown tool: ${name}`);
   });
   server.setRequestHandler(import_types.ListResourcesRequestSchema, async () => ({
@@ -8261,6 +10043,7 @@ var createTreeuiMcpServer = () => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   buildCatalogFromRepo,
+  buildTokenEntries,
   catalog,
   createTreeuiMcpServer,
   findComponent,
@@ -8268,8 +10051,10 @@ var createTreeuiMcpServer = () => {
   formatRecipeResults,
   formatSearchResults,
   formatSetupGuide,
+  formatTokenResults,
   getRepoRootFromPackageRoot,
   recommendComponents,
   searchComponents,
-  searchRecipes
+  searchRecipes,
+  searchTokens
 });