@treeui/mcp 0.3.0 → 0.4.1

package/dist/cli.cjs

@@ -34,9 +34,9 @@ var import_server = require("@modelcontextprotocol/sdk/server/index.js");
 
 // src/generated/treeui.catalog.json
 var treeui_catalog_default = {
-  generatedAt: "2026-07-15T22:47:49.302Z",
+  generatedAt: "2026-07-18T19:02:09.022Z",
   packageName: "@treeui/vue",
-  packageVersion: "0.13.0",
+  packageVersion: "0.15.0",
   decisionGuides: [
     {
       id: "single-choice",
@@ -980,6 +980,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",
@@ -1014,14 +1030,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: [
@@ -1049,7 +1077,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: [
@@ -1321,15 +1352,17 @@ var treeui_catalog_default = {
         },
         {
           name: "variant",
-          type: "TVariant",
+          type: "TVariant | brand",
           default: "solid",
           values: [
             "solid",
             "outline",
             "ghost",
             "soft",
-            "danger"
-          ]
+            "danger",
+            "brand"
+          ],
+          note: "`brand` is a button-only, high-emphasis gradient variant driven by the `--tree-gradient-brand` token. Use it for the single primary CTA of a screen."
         },
         {
           name: "size",
@@ -1356,6 +1389,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: [
@@ -1421,7 +1466,6 @@ var treeui_catalog_default = {
           values: [
             "outline",
             "soft",
-            "solid",
             "inset"
           ]
         },
@@ -1460,7 +1504,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: [
@@ -1789,6 +1834,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: [],
@@ -2174,9 +2305,14 @@ var treeui_catalog_default = {
           "The page shell should stay full-width while content stays readable."
         ],
         avoidWhen: [
-          "You need internal spacing between children."
+          "You need internal spacing between children.",
+          "You are laying out a whole screen \u2014 reach for TPage, which adds page padding and vertical rhythm."
         ],
         alternatives: [
+          {
+            component: "TPage",
+            when: "You want a full page region with block padding and vertical spacing between sections, not just a width constraint."
+          },
           {
             component: "TStack",
             when: "The main need is vertical or horizontal spacing."
@@ -3175,7 +3311,7 @@ var treeui_catalog_default = {
       kind: "form",
       category: "Form",
       status: "available",
-      purpose: "Composable dropzone and file picker with browse, drag-and-drop, and Ctrl+V paste support.",
+      purpose: "Composable dropzone and file picker with browse, drag-and-drop, and Ctrl+V paste support, plus per-file upload state: progress, remaining time, thumbnails, and independent per-file retry/resume.",
       sourceFile: "packages/vue/src/components/TFileUpload.vue",
       storyFile: "apps/docs/src/stories/FileUpload.stories.ts",
       storyTitle: "Components/Form/FileUpload",
@@ -3199,12 +3335,14 @@ var treeui_catalog_default = {
         {
           name: "disabled",
           type: "boolean",
-          default: "false"
+          default: "false",
+          description: "The ONLY prop that gates interaction. Disables the dropzone, the native input, Clear all, and every per-row Remove/Retry."
         },
         {
           name: "loading",
           type: "boolean",
-          default: "false"
+          default: "false",
+          description: "Presentational only. Applies `is-loading`, `aria-busy` on the dropzone, and the corner spinner. It gates NO interaction \u2014 see behavior.loading_is_presentational."
         },
         {
           name: "invalid",
@@ -3265,44 +3403,142 @@ var treeui_catalog_default = {
           name: "showFileList",
           type: "boolean",
           default: "true"
+        },
+        {
+          name: "uploadState",
+          type: "TFileUploadStateSource",
+          default: "none",
+          description: "Per-file transport state, keyed by File OBJECT IDENTITY. Accepts a ReadonlyMap<File, TFileUploadState> or a (file, index) => TFileUploadState | undefined resolver. Omit it and the component renders exactly as before: no bars, no status lines, no retry."
+        },
+        {
+          name: "dragLabel",
+          type: "string",
+          default: "Release to upload",
+          description: "Replaces `label` in the dropzone while an acceptable drag is over it. Set it to the same value as `label` to opt out of the text swap."
+        },
+        {
+          name: "dragRejectLabel",
+          type: "string",
+          default: "This file type is not accepted",
+          description: "Replaces `label` while a drag that cannot work is over the dropzone. Only reachable when drag-reject detection is possible \u2014 see behavior.drag_reject_detection_is_mime_only."
+        },
+        {
+          name: "thumbnails",
+          type: "boolean",
+          default: "true",
+          description: "Mint object-URL previews and decode dimensions for image/* files. Set false when you always supply `state.thumbnailUrl` yourself."
+        },
+        {
+          name: "maxThumbnailSize",
+          type: "number | null",
+          default: "10 * 1024 * 1024",
+          description: "Skip auto-thumbnailing above this byte size. null removes the cap."
+        },
+        {
+          name: "retryLabel",
+          type: "string",
+          default: "Retry"
+        },
+        {
+          name: "resumeLabel",
+          type: "(percent: number) => string",
+          default: "(percent) => `Resume from ${percent}%`",
+          description: "Receives Math.round(state.progress). Used only when state.resumable === true AND state.progress is a number."
+        },
+        {
+          name: "remainingTimeFormat",
+          type: "(remainingMs: number) => string",
+          default: "5s/60s/60min thresholds \u2014 see behavior.remaining_time_strings",
+          description: "Formats state.remainingMs. Ignored for a row that supplies state.remainingLabel."
+        },
+        {
+          name: "statusLabels",
+          type: "Partial<Record<TFileUploadStatus, string>>",
+          default: "{}",
+          description: "MERGED over the defaults { pending: Waiting, uploading: Uploading, paused: Paused, error: Upload failed, success: Uploaded } \u2014 pass only the keys you override."
         }
       ],
       events: [
         {
-          name: "update:modelValue"
+          name: "update:modelValue",
+          description: "Emitted with the next file list when files are added, removed, or cleared.",
+          payload: "File[]"
+        },
+        {
+          name: "files-accepted",
+          description: "Emitted with only the newly accepted files, after accept/maxFiles/maxFileSize validation.",
+          payload: "File[]"
+        },
+        {
+          name: "files-rejected",
+          description: "Pre-acceptance validation failures. Unrelated to transport errors, which you report through `uploadState`.",
+          payload: "TFileUploadRejection[]"
         },
         {
-          name: "files-accepted"
+          name: "retry",
+          description: "Emitted when a row's retry affordance is activated. Pure intent \u2014 the component performs no upload. Use `payload.mode` ('resume' | 'restart'); it reports the affordance the component ACTUALLY DREW, so never re-derive it from your own state.",
+          payload: "TFileUploadRetryPayload"
         },
         {
-          name: "files-rejected"
+          name: "cancel",
+          description: "Emitted ONLY for rows whose status is 'uploading' or 'paused', immediately BEFORE the `update:modelValue` that drops them \u2014 so the file is still in the list when your handler runs and you can abort the request. `reason` is 'remove' for one row or 'clear' (one event per in-flight file) for Clear all.",
+          payload: "TFileUploadCancelPayload"
         }
       ],
       slots: [
         {
-          name: "icon"
+          name: "icon",
+          description: "Replaces the dropzone icon."
         },
         {
-          name: "default"
+          name: "default",
+          description: "Replaces the dropzone body. Receives `{ files, isDragActive, isDragReject, openFileDialog, clearFiles }`."
         },
         {
-          name: "file"
+          name: "file",
+          description: "Full row override. Receives all of TFileUploadFileSlotProps, including every derived label, so a custom row re-derives nothing."
         },
         {
-          name: "actions"
+          name: "file-status",
+          description: "Replaces ONLY the progress bar + status line + error block inside the default row. Receives TFileUploadFileSlotProps. Name, meta, thumbnail, Retry, and Remove keep rendering. Ignored when the `file` slot is provided."
+        },
+        {
+          name: "actions",
+          description: "Footer actions. Receives `{ files, openFileDialog, clearFiles }` \u2014 no upload state."
         }
       ],
       a11y: [
         "dropzone_role: button",
         "keyboard_activation: Enter_and_Space_open_the_file_picker",
         "supports_paste_when_component_is_focused: true",
-        "file_feedback_announced_via_live_region: true"
+        "file_feedback_announced_via_live_region: true",
+        "aria_busy_on_dropzone_tracks_loading_prop: true",
+        "aria_busy_on_row_tracks_that_rows_uploading_status: true",
+        "per_row_progressbar_is_labelled_with_status_and_filename: e.g. 'Uploading hero.png' \u2014 every row's bar has a distinct accessible name.",
+        "terminal_transitions_announced_with_filenames: One polite root live region (`role=log`) announces only success/error, e.g. 'alpha.txt uploaded.' / 'alpha.txt failed. Connection lost.'",
+        "repeated_identical_messages_are_still_announced: The log appends each message as a new node rather than overwriting one string, so a retry that fails with the byte-identical error still mutates the region and is announced. It is not aria-atomic: only the appended message is read, and the trimmed history (5 most recent) is not.",
+        "percentages_are_never_announced: Percent and ETA live in non-live text; the value reaches assistive tech through the progressbar's aria-valuenow.",
+        "retry_button_is_described_by_its_row_error: Announces 'Resume from 90%, Connection lost at 90%'.",
+        "focus_is_rescued_when_retry_unmounts: Flipping error -> uploading removes the focused Retry; focus moves to that row's Remove (or the dropzone), and only when it was genuinely lost.",
+        "remove_and_retry_meet_the_44px_target: true"
       ],
       behavior: [
         "accepts_files_from_input_drop_and_paste: true",
         "multiple_false_replaces_existing_selection: true",
         "accept_maxFiles_and_maxFileSize_apply_to_all_entry_points: true",
-        "selected_files_can_be_removed_or_cleared: true"
+        "selected_files_can_be_removed_or_cleared: true",
+        "upload_state_is_keyed_by_file_identity: Both source shapes key on the File object, never on index or name. Key your own store with the File objects you receive from `files-accepted`.",
+        "a_lookup_miss_renders_nothing: An unknown File yields `undefined` and the row falls back to name + meta only \u2014 no bar, no status, no retry. This fail-blank is deliberate: it is the back-compat path and it fails loudly instead of showing another file's percentage.",
+        "loading_is_presentational: BREAKING since 0.14.0 \u2014 `loading` no longer disables anything. It was freezing the dropzone, Clear all, and every Remove, which blocked removing file 1 while file 4 uploaded. Use `:disabled` to reproduce the old behavior; prefer `uploadState` and freeze nothing.",
+        "each_file_has_an_independent_track: One row's error, progress, or retry never gates another's. Remove stays enabled for in-flight rows and emits `cancel` so you can abort.",
+        "errors_are_per_row: Transport errors go in `state.error` and render under their own row. They never enter the dropzone feedback list, which Remove and Clear all wipe.",
+        "drag_feedback_has_three_signals: Border, glow, and a text swap to `dragLabel` \u2014 all three fire together, including when files are already listed.",
+        "drag_reject_detection_is_mime_only: `is-drag-reject` + `dragRejectLabel` require every `accept` token to be a MIME token; with any `.ext` token the dropzone stays neutral, because a drag exposes only `.type`. A mixed drag (one good file, one bad) is NOT rejected, and the drop is never blocked \u2014 rejected files always get the normal `files-rejected` explanation.",
+        "progress_bar_visibility: Shown on uploading/paused/error, and on success only with numeric progress. 'uploading' without progress is indeterminate; paused/error without progress is a determinate 0 \u2014 an errored bar must never animate.",
+        "the_bar_is_never_reset_on_error: It holds `state.progress` in the error tone. That retained 90% is what makes the resume promise legible.",
+        "remaining_time_strings: < 5000ms -> 'Less than 5s left'; < 60s -> 'About 12s left'; < 60min -> 'About 2 min left'; else 'About 2h left'. Negative, NaN, and Infinity render nothing.",
+        "status_line_composition: Joins the present parts with ' \xB7 ': 'Uploading \xB7 62% \xB7 About 12s left' while uploading, 'Upload failed \xB7 2.1 MB of 2.4 MB uploaded' on a resumable error.",
+        "thumbnails_are_client_only: Object URLs are minted after mount and revoked on removal and unmount. SSR and the hydrating render both show the extension chip, so there is no mismatch."
       ],
       selection: {
         keywords: [],
@@ -3667,6 +3903,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",
@@ -3751,6 +4001,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: [],
@@ -4357,7 +4644,7 @@ var treeui_catalog_default = {
           name: "items",
           type: "TNavMenuItem[]",
           default: "[]",
-          note: "Array of `{ label, value, shortLabel?, description?, icon?, to?, badge?, disabled? }`."
+          note: "Array of `{ label, value, shortLabel?, description?, icon?, to?, badge?, disabled?, exact? }`."
         },
         {
           name: "size",
@@ -4378,6 +4665,12 @@ var treeui_catalog_default = {
           name: "disabled",
           type: "boolean",
           default: "false"
+        },
+        {
+          name: "exact",
+          type: "boolean",
+          default: "true",
+          note: "Default active-match strategy for router-link items. `true` keeps only the exactly-active route highlighted (prevents prefix matches from lighting up several items at once). Override per item via `TNavMenuItem.exact`."
         }
       ],
       events: [
@@ -4552,75 +4845,262 @@ var treeui_catalog_default = {
       recipes: []
     },
     {
-      name: "TPagination",
+      name: "TPage",
       aliases: [],
       package: "@treeui/vue",
-      kind: "primitive",
-      category: "Navigation",
+      kind: "layout",
+      category: "Layout",
       status: "available",
-      purpose: "Page controls with previous/next navigation, numbered page buttons, and ellipsis for large page ranges. Supports v-model for the active page.\n",
-      sourceFile: "packages/vue/src/components/TPagination.vue",
-      storyFile: "apps/docs/src/stories/Pagination.stories.ts",
-      storyTitle: "Components/Navigation/Pagination",
-      manifestFile: "docs/ai/COMPONENTS/pagination.yaml",
+      purpose: "Semantic page region under the app shell: block padding, a centered max-width content column, and standardized vertical rhythm between sections.",
+      sourceFile: "packages/vue/src/components/TPage.vue",
+      storyFile: "apps/docs/src/stories/Page.stories.ts",
+      storyTitle: "Components/Layout/Page",
+      manifestFile: "docs/ai/COMPONENTS/page.yaml",
       props: [
         {
-          name: "modelValue",
-          type: "number",
-          default: "1",
-          description: "Current active page (1-based). Use with v-model."
-        },
-        {
-          name: "totalPages",
-          type: "number",
-          required: true,
-          description: "Total number of pages."
-        },
-        {
-          name: "siblings",
-          type: "number",
-          default: "1",
-          description: "Number of sibling page buttons shown around the current page."
+          name: "as",
+          type: "string",
+          default: "div"
         },
         {
-          name: "size",
-          type: "TSize",
-          default: "md",
+          name: "width",
+          type: "TContainerSize",
+          default: "lg",
           values: [
             "sm",
             "md",
-            "lg"
+            "lg",
+            "xl",
+            "full"
           ],
-          description: "Size variant for the pagination controls."
+          note: "Max-width of the centered content column. Mirrors TContainer sizes."
         },
         {
-          name: "disabled",
+          name: "padded",
           type: "boolean",
-          default: "false",
-          description: "Disables all pagination controls."
+          default: "true",
+          note: "Adds vertical (block) padding on the region and horizontal padding on the inner column."
         },
         {
-          name: "label",
-          type: "string",
-          default: "Pagination",
-          description: "Accessible label for the nav element."
-        }
-      ],
-      events: [
-        {
-          name: "update:modelValue",
-          description: "Emitted when the active page changes. Enables v-model binding.",
-          payload: "[page: number]"
+          name: "gap",
+          type: "TPageGap",
+          default: "lg",
+          values: [
+            "sm",
+            "md",
+            "lg"
+          ],
+          note: "Vertical spacing between direct children (e.g. a TPageHeader and content sections)."
         }
       ],
+      events: [],
       slots: [
         {
-          name: "previous",
-          description: "Custom content for the previous button."
-        },
-        {
-          name: "next",
-          description: "Custom content for the next button."
+          name: "default"
+        }
+      ],
+      a11y: [
+        "Structural wrapper only; landmark semantics come from `as` and the surrounding app shell (avoid nesting a second `main`)."
+      ],
+      behavior: [
+        "centers_content_column_by_width: true",
+        "applies_block_padding_when_padded: true",
+        "spaces_children_vertically_by_gap: true"
+      ],
+      selection: {
+        keywords: [
+          "page",
+          "page shell",
+          "content column",
+          "screen layout"
+        ],
+        useWhen: [
+          "You want a standard screen region under the app shell with consistent max width, page padding, and vertical rhythm between sections."
+        ],
+        avoidWhen: [
+          "You only need a bare width constraint with no page padding or child spacing."
+        ],
+        alternatives: [
+          {
+            component: "TContainer",
+            when: "You just need a centered max-width wrapper without page-level block padding or child spacing."
+          },
+          {
+            component: "TStack",
+            when: "You only need to space a group of children, not lay out a whole page."
+          }
+        ]
+      },
+      setup: {
+        required: [],
+        notes: []
+      },
+      recipes: []
+    },
+    {
+      name: "TPageHeader",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "layout",
+      category: "Layout",
+      status: "available",
+      purpose: "Canonical page title block: heading, optional subtitle, and a right-aligned actions area, so title hierarchy and alignment stay consistent across screens.",
+      sourceFile: "packages/vue/src/components/TPageHeader.vue",
+      storyFile: "apps/docs/src/stories/PageHeader.stories.ts",
+      storyTitle: "Components/Layout/PageHeader",
+      manifestFile: "docs/ai/COMPONENTS/page-header.yaml",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          default: "",
+          note: "Rendered inside the heading element. Overridden by the `title` slot."
+        },
+        {
+          name: "subtitle",
+          type: "string",
+          default: ""
+        },
+        {
+          name: "level",
+          type: "1 | 2 | 3 | 4 | 5 | 6",
+          default: "1",
+          note: "Heading level for the title element. Default `1` treats it as the page title; lower it when the page already has an h1."
+        },
+        {
+          name: "as",
+          type: "string",
+          default: "header"
+        }
+      ],
+      events: [],
+      slots: [
+        {
+          name: "breadcrumb"
+        },
+        {
+          name: "title"
+        },
+        {
+          name: "subtitle"
+        },
+        {
+          name: "actions"
+        },
+        {
+          name: "default"
+        }
+      ],
+      a11y: [
+        "Title renders as a real heading element (`h1`\u2013`h6`) chosen by `level`; keep one h1 per page.",
+        "Actions area holds standard focusable controls (e.g. TButton) \u2014 no custom roles added."
+      ],
+      behavior: [
+        "title_and_subtitle_optional: true",
+        "heading_level_controlled_by_level: true",
+        "actions_area_right_aligned_and_wraps: true",
+        "default_slot_renders_below_heading: true"
+      ],
+      selection: {
+        keywords: [
+          "page header",
+          "title bar",
+          "page title",
+          "heading and actions"
+        ],
+        useWhen: [
+          "A screen needs a title (and optional subtitle) with a right-aligned actions area in a consistent hierarchy."
+        ],
+        avoidWhen: [
+          "You need cross-page hierarchy or navigation trails rather than a single page title."
+        ],
+        alternatives: [
+          {
+            component: "TBreadcrumb",
+            when: "You are showing where the page sits in a hierarchy, not its title."
+          },
+          {
+            component: "TNavbar",
+            when: "You need a top application bar, not a per-page title block."
+          }
+        ]
+      },
+      setup: {
+        required: [],
+        notes: []
+      },
+      recipes: []
+    },
+    {
+      name: "TPagination",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "primitive",
+      category: "Navigation",
+      status: "available",
+      purpose: "Page controls with previous/next navigation, numbered page buttons, and ellipsis for large page ranges. Supports v-model for the active page.\n",
+      sourceFile: "packages/vue/src/components/TPagination.vue",
+      storyFile: "apps/docs/src/stories/Pagination.stories.ts",
+      storyTitle: "Components/Navigation/Pagination",
+      manifestFile: "docs/ai/COMPONENTS/pagination.yaml",
+      props: [
+        {
+          name: "modelValue",
+          type: "number",
+          default: "1",
+          description: "Current active page (1-based). Use with v-model."
+        },
+        {
+          name: "totalPages",
+          type: "number",
+          required: true,
+          description: "Total number of pages."
+        },
+        {
+          name: "siblings",
+          type: "number",
+          default: "1",
+          description: "Number of sibling page buttons shown around the current page."
+        },
+        {
+          name: "size",
+          type: "TSize",
+          default: "md",
+          values: [
+            "sm",
+            "md",
+            "lg"
+          ],
+          description: "Size variant for the pagination controls."
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Disables all pagination controls."
+        },
+        {
+          name: "label",
+          type: "string",
+          default: "Pagination",
+          description: "Accessible label for the nav element."
+        }
+      ],
+      events: [
+        {
+          name: "update:modelValue",
+          description: "Emitted when the active page changes. Enables v-model binding.",
+          payload: "[page: number]"
+        }
+      ],
+      slots: [
+        {
+          name: "previous",
+          description: "Custom content for the previous button."
+        },
+        {
+          name: "next",
+          description: "Custom content for the next button."
         }
       ],
       a11y: [
@@ -5208,6 +5688,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",
@@ -5622,6 +6116,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: [],
@@ -5794,6 +6328,82 @@ var treeui_catalog_default = {
       },
       recipes: []
     },
+    {
+      name: "TSplit",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "layout",
+      category: "Layout",
+      status: "available",
+      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: "gap",
+          type: "string",
+          default: "var(--tree-space-5)"
+        },
+        {
+          name: "ratio",
+          type: "number",
+          default: "2",
+          note: "How many times faster the main pane grows than the aside pane."
+        },
+        {
+          name: "minWidth",
+          type: "string",
+          default: "18rem",
+          note: "Min width each pane keeps before the layout wraps to a single column (flex-wrap, no @media)."
+        },
+        {
+          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: [],
@@ -5845,6 +6455,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: [],
@@ -5892,6 +6508,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: [],
@@ -6494,6 +7184,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: [],
@@ -6522,6 +7301,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",