@loworbitstudio/visor 1.5.1 → 1.10.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-06-04T02:06:36.185Z",
+  "generated_at": "2026-06-12T03:42:08.191Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -164,15 +164,16 @@
         "variant": [
           "default",
           "compact",
-          "timeline"
+          "timeline",
+          "compact-3col"
         ]
       },
       "props": [
         {
           "name": "variant",
-          "type": "'default' | 'compact' | 'timeline'",
+          "type": "'default' | 'compact' | 'timeline' | 'compact-3col'",
           "default": "default",
-          "description": "Display mode. Default is padded rows with borders, compact is denser, timeline adds a connecting rail between leading indicators."
+          "description": "Display mode. Default is padded rows with borders, compact is denser, timeline adds a connecting rail between leading indicators, compact-3col pins timestamp to the leftmost column with [time][dot][text] layout."
         },
         {
           "name": "children",
@@ -182,6 +183,7 @@
       ],
       "dependencies": [],
       "tokens_used": [
+        "--af-time-col",
         "--border-default",
         "--border-muted",
         "--font-size-sm",
@@ -359,6 +361,9 @@
           "sm",
           "md",
           "lg"
+        ],
+        "case": [
+          "sentence"
         ]
       },
       "props": [
@@ -372,6 +377,17 @@
           "type": "\"sm\" | \"md\" | \"lg\"",
           "default": "\"md\"",
           "description": "Controls token-driven padding, font-size, gap, and embedded-icon scaling. `md` (the default) reproduces the original badge sizing exactly — existing call sites are unchanged. `sm` is tighter for dense inline data contexts; `lg` is larger for editorial contexts like page headers and stat-card status pills. Icons inside the badge scale with the size step.\n"
+        },
+        {
+          "name": "case",
+          "type": "\"sentence\"",
+          "description": "`case=\"sentence\"` opts a sm/md badge OUT of the editorial uppercase + letter-spacing treatment so prose-y labels (e.g. a plan name like \"Enterprise\") read as a label, not a tag. The `lg` size already opts out intrinsically. Omit for the default, theme-driven casing.\n"
+        },
+        {
+          "name": "iconOnly",
+          "type": "boolean",
+          "default": "false",
+          "description": "Render as a circular, fixed-square chip carrying a single centered glyph (e.g. a filled-success check in a roles matrix). Collapses padding/gap and forces a perfect circle. Opt-in; sets `data-icon-only` for styling hooks. Default badges are unaffected.\n"
         }
       ],
       "dependencies": [
@@ -382,11 +398,13 @@
         "--border-focus",
         "--color-neutral-600",
         "--color-white",
+        "--destructive",
         "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-sm",
         "--font-size-xs",
         "--font-weight-medium",
+        "--info",
         "--interactive-primary-bg",
         "--interactive-primary-text",
         "--interactive-secondary-bg",
@@ -397,6 +415,8 @@
         "--spacing-1",
         "--spacing-2",
         "--spacing-3",
+        "--success",
+        "--surface-card",
         "--surface-error-default",
         "--surface-error-subtle",
         "--surface-info-default",
@@ -413,7 +433,8 @@
         "--text-primary",
         "--text-secondary",
         "--text-success",
-        "--text-warning"
+        "--text-warning",
+        "--warning"
       ],
       "example": "<Badge variant=\"default\">Active</Badge>\n<Badge variant=\"secondary\">Secondary</Badge>\n<Badge variant=\"outline\">v2.1.0</Badge>\n<Badge variant=\"neutral\">Draft</Badge>\n<Badge variant=\"destructive\">Error</Badge>\n<Badge variant=\"success\">Published</Badge>\n<Badge variant=\"warning\">Pending</Badge>\n<Badge variant=\"info\">Beta</Badge>\n<Badge variant=\"filled-destructive\">Critical</Badge>\n\n{/* Sizes — sm for dense inline data, md (default) inline, lg for headers/pills */}\n<Badge size=\"sm\" variant=\"secondary\">v2.1.0</Badge>\n<Badge size=\"md\" variant=\"success\">Published</Badge>\n<Badge size=\"lg\" variant=\"info\">Beta</Badge>\n"
     },
@@ -899,6 +920,12 @@
           "default": "false",
           "description": "Render inline (non-sticky) instead of fixed to the viewport bottom."
         },
+        {
+          "name": "flat",
+          "type": "boolean",
+          "default": "false",
+          "description": "Render flat — no shadow, no border-radius, border-top only. Use inside table cards or panels where the floating card look is wrong."
+        },
         {
           "name": "label",
           "type": "(count: number) => React.ReactNode",
@@ -936,6 +963,7 @@
         "--border-default",
         "--font-size-sm",
         "--font-weight-medium",
+        "--hairline",
         "--line-height-tight",
         "--motion-duration-moderate",
         "--motion-easing-standard",
@@ -944,8 +972,10 @@
         "--spacing-2",
         "--spacing-3",
         "--spacing-4",
+        "--spacing-5",
         "--surface-card",
-        "--text-primary"
+        "--text-primary",
+        "--text-tertiary"
       ],
       "example": "<BulkActionBar\n  count={selected.length}\n  onClear={() => setSelected([])}\n>\n  <Button variant=\"outline\" size=\"sm\">Archive</Button>\n  <Button variant=\"destructive\" size=\"sm\">Delete</Button>\n</BulkActionBar>\n"
     },
@@ -1039,14 +1069,16 @@
         "--interactive-secondary-text",
         "--motion-duration-150",
         "--motion-easing-default",
-        "--opacity-50",
+        "--opacity-40",
         "--primary",
         "--radius-md",
         "--spacing-2",
         "--spacing-3",
         "--spacing-4",
         "--spacing-6",
+        "--surface-card",
         "--surface-muted",
+        "--surface-subtle",
         "--text-primary"
       ],
       "example": "<Button variant=\"default\" size=\"md\">Save changes</Button>\n\n<Button variant=\"destructive\">Delete account</Button>\n\n<Button variant=\"ghost\" size=\"sm\">Cancel</Button>\n\n{/* Gated — no reason (tooltip suppressed) */}\n<Button gated>Delete organization</Button>\n\n{/* Gated with reason — tooltip shown on hover/focus */}\n<TooltipProvider>\n  <Button gated gatedReason=\"You can't delete this — you're not an owner\">\n    Delete organization\n  </Button>\n</TooltipProvider>\n"
@@ -1257,6 +1289,93 @@
       ],
       "example": "<Carousel>\n  <CarouselContent>\n    <CarouselItem>Slide 1</CarouselItem>\n    <CarouselItem>Slide 2</CarouselItem>\n    <CarouselItem>Slide 3</CarouselItem>\n  </CarouselContent>\n  <CarouselPrevious />\n  <CarouselNext />\n</Carousel>\n"
     },
+    "challenge-card": {
+      "category": "feedback",
+      "description": "Adversarial challenge message card — an AI pushes back on the user's input and the human holds the gate. Distinct from Alert: ChallengeCard is for messages that require an explicit human decision, not passive notices.\n",
+      "when_to_use": [
+        "Surfacing an AI-generated challenge or push-back that the user must actively accept or override",
+        "Presenting an adversarial review result (e.g. \"Is it actually only?\") where a human must decide the next action",
+        "Any context where the system is flagging user input as potentially wrong and a conscious human gate is required before proceeding",
+        "Chat or workflow UIs where the AI acts as a strategic antagonist and the human must confirm their intent"
+      ],
+      "when_not_to_use": [
+        "Use `alert` for passive notices — ChallengeCard is for adversarial prompts requiring an explicit human decision",
+        "Use Banner for persistent, page-level system notices that don't require an immediate response",
+        "Use Toast for transient feedback that auto-dismisses — ChallengeCard is persistent until the user acts"
+      ],
+      "variants": {
+        "action_variant": [
+          "primary",
+          "ghost"
+        ]
+      },
+      "props": [
+        {
+          "name": "icon",
+          "type": "React.ReactNode | null",
+          "description": "Override the default Flag icon in ChallengeCardHeader. Pass null to suppress the icon entirely.\n"
+        },
+        {
+          "name": "variant",
+          "type": "\"primary\" | \"ghost\"",
+          "default": "\"primary\"",
+          "description": "Action button visual style. primary = filled warning-toned; ghost = transparent with border.\n",
+          "component": "ChallengeCardAction"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode | null",
+          "description": "Optional icon for ChallengeCardAction. Primary defaults to a Check icon; ghost has no default icon.\n",
+          "component": "ChallengeCardAction"
+        },
+        {
+          "name": "onClick",
+          "type": "React.MouseEventHandler<HTMLButtonElement>",
+          "description": "Click handler for the action button.",
+          "component": "ChallengeCardAction"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Gate label text. Defaults to \"You hold the gate\" when no children are provided.\n",
+          "component": "ChallengeCardGate"
+        }
+      ],
+      "dependencies": [
+        "@phosphor-icons/react",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-warning",
+        "--challenge-card-action-primary-text",
+        "--color-warning-900",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--motion-duration-150",
+        "--motion-easing-default",
+        "--opacity-40",
+        "--opacity-80",
+        "--radius-lg",
+        "--radius-xl",
+        "--spacing-1",
+        "--spacing-1-5",
+        "--spacing-2",
+        "--spacing-2-5",
+        "--spacing-3",
+        "--spacing-3-5",
+        "--spacing-4",
+        "--stroke-width-thin",
+        "--surface-card",
+        "--surface-warning-subtle",
+        "--text-primary",
+        "--text-secondary",
+        "--text-tertiary",
+        "--text-warning",
+        "--warning"
+      ],
+      "example": "<ChallengeCard>\n  <ChallengeCardHeader>Is it actually only?</ChallengeCardHeader>\n  <ChallengeCardBody>\n    The word \"only\" in this claim is absolute — it invites factual rebuttal.\n    Do you have data to back it up, or would a sharper qualifier work better?\n  </ChallengeCardBody>\n  <ChallengeCardActions>\n    <ChallengeCardAction variant=\"primary\" onClick={() => {}}>\n      Use the sharper version\n    </ChallengeCardAction>\n    <ChallengeCardAction variant=\"ghost\" onClick={() => {}}>\n      I'll rewrite it\n    </ChallengeCardAction>\n    <ChallengeCardGate />\n  </ChallengeCardActions>\n</ChallengeCard>\n"
+    },
     "chart": {
       "category": "data-display",
       "description": "A Recharts wrapper providing themed chart container, tooltip, and legend components.",
@@ -1400,19 +1519,17 @@
         "--border-error",
         "--border-focus",
         "--border-strong",
-        "--checkbox-bg",
         "--checkbox-bg-checked",
-        "--checkbox-bg-hover",
-        "--checkbox-border",
         "--checkbox-border-checked",
-        "--checkbox-border-hover",
         "--focus-ring-width",
+        "--hairline-strong",
         "--interactive-primary-bg",
         "--interactive-primary-text",
         "--motion-duration-150",
         "--motion-easing-default",
         "--primary",
-        "--radius-sm"
+        "--radius-sm",
+        "--surface-subtle"
       ],
       "example": "<div style={{ display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" }}>\n  <Checkbox id=\"terms\" />\n  <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n</div>\n"
     },
@@ -1538,6 +1655,18 @@
               "type": "\"primary\" | \"neutral\"",
               "default": "\"neutral\"",
               "description": "Tone for the count pill. \"neutral\" uses muted surface; \"primary\" uses accent surface. Auto re-tones on selected state."
+            },
+            {
+              "name": "selectedTreatment",
+              "type": "\"accent\" | \"neutral\"",
+              "default": "\"accent\"",
+              "description": "Selected-state visual treatment. \"accent\" (default) uses accent-tinted bg + accent border + link text. \"neutral\" uses --surface-card bg + neutral border + primary text; the count pill renders as a solid mint pill (--surface-success-default) when selected. Use in editorial/admin contexts where accent bleed is undesirable.\n"
+            },
+            {
+              "name": "trailingIcon",
+              "type": "React.ReactNode",
+              "optional": true,
+              "description": "Muted trailing icon (e.g. a caret) rendered after the label/count for \"filter-as-dropdown\" chips. Orthogonal to count/selectedTreatment. Hidden from assistive tech (aria-hidden). Default render is unchanged when omitted.\n"
             }
           ]
         }
@@ -1549,6 +1678,7 @@
       "tokens_used": [
         "--border-default",
         "--border-focus",
+        "--border-strong",
         "--focus-ring-offset",
         "--focus-ring-width",
         "--font-body",
@@ -1556,9 +1686,12 @@
         "--font-size-sm",
         "--font-size-xs",
         "--font-weight-medium",
+        "--font-weight-semibold",
         "--motion-duration-150",
         "--motion-easing-default",
         "--opacity-40",
+        "--primary",
+        "--primary-text",
         "--radius-full",
         "--spacing-1",
         "--spacing-2",
@@ -1568,11 +1701,15 @@
         "--surface-accent-default",
         "--surface-accent-subtle",
         "--surface-card",
+        "--surface-elev",
         "--surface-interactive-hover",
         "--surface-muted",
+        "--surface-success-default",
+        "--text-inverse",
         "--text-link",
         "--text-primary",
-        "--text-secondary"
+        "--text-secondary",
+        "--text-tertiary"
       ],
       "example": "<Chip label=\"React\" />\n<Chip label=\"Featured\" onDeleted={() => removeTag(\"featured\")} />\n<ChoiceChip label=\"Compact\" selected={density === \"compact\"} onPressed={() => setDensity(\"compact\")} />\n<FilterChip label=\"Events\" selected={filters.includes(\"events\")} onPressed={() => toggleFilter(\"events\")} />\n<FilterChip label=\"All\" count={132} onPressed={() => setFilter(\"all\")} />\n<FilterChip label=\"Active\" count={47} countTone=\"primary\" selected onPressed={() => setFilter(\"active\")} />\n<FilterChip label=\"Suspended\" count={8} onPressed={() => setFilter(\"suspended\")} />\n"
     },
@@ -2214,9 +2351,82 @@
       ],
       "example": "<CommandDialog open={open} onOpenChange={setOpen}>\n  <CommandInput placeholder=\"Type a command...\" />\n  <CommandList>\n    <CommandEmpty>No results found.</CommandEmpty>\n    <CommandGroup heading=\"Actions\">\n      <CommandItem>\n        New File\n        <CommandShortcut>⌘N</CommandShortcut>\n      </CommandItem>\n      <CommandItem>Search</CommandItem>\n    </CommandGroup>\n  </CommandList>\n</CommandDialog>\n"
     },
+    "composer": {
+      "category": "form",
+      "description": "AI-chat composer — a rounded card container with an auto-growing text field, a tools row for icon buttons and status chips, and a circular primary send button.",
+      "when_to_use": [
+        "Building an AI chat or assistant input area where users type multi-line messages",
+        "Any composer-style input that needs contextual tool buttons (attachment, mic, model picker) alongside a submit affordance",
+        "Interfaces where the field must grow with content rather than scroll within a fixed height",
+        "Placing a branded status chip (e.g. \"Claude · key active\") inside the toolbar alongside action buttons"
+      ],
+      "when_not_to_use": [
+        "Plain multi-line text entry without action affordances — use textarea instead",
+        "Single-line search or filter inputs — use search-input or input",
+        "Form fields that need validation, labels, or fieldset grouping — use field + textarea",
+        "Full-page editor surfaces where a document metaphor is more appropriate"
+      ],
+      "variants": {},
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Controlled field value."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Called when the value changes (controlled mode)."
+        },
+        {
+          "name": "onSubmit",
+          "type": "(value: string) => void",
+          "description": "Called when the user submits (Enter key or send button)."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "Disables all interactive children."
+        }
+      ],
+      "dependencies": [
+        "@phosphor-icons/react",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-strong",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-base",
+        "--line-height-normal",
+        "--motion-duration-150",
+        "--motion-easing-default",
+        "--opacity-40",
+        "--opacity-50",
+        "--primary",
+        "--primary-foreground",
+        "--radius-2xl",
+        "--radius-full",
+        "--radius-sm",
+        "--shadow-md",
+        "--shadow-sm",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--stroke-width-thin",
+        "--surface-card",
+        "--surface-hover",
+        "--text-primary",
+        "--text-secondary",
+        "--text-tertiary"
+      ],
+      "example": "<Composer onSubmit={(v) => console.log(v)}>\n  <ComposerField placeholder=\"Ask anything…\" />\n  <ComposerToolbar>\n    <ComposerToolButton icon={<Paperclip size={16} />} aria-label=\"Attach file\" />\n    <ComposerToolButton icon={<Microphone size={16} />} aria-label=\"Voice input\" />\n    <Chip size=\"sm\" leadingIcon={<StatusDot tone=\"mint\" />} label=\"Claude · key active\" />\n    <ComposerSpacer />\n    <ComposerSend />\n  </ComposerToolbar>\n</Composer>\n"
+    },
     "confirm-dialog": {
       "category": "admin",
-      "description": "Admin confirmation dialog compound wrapping Dialog with severity-driven icon/color/button variant, optional confirm-text gate, and async-aware confirm handler.",
+      "description": "Admin confirmation dialog compound wrapping Dialog with severity-driven icon/color/button variant, an editorial icon-treatment + render-mode API, optional confirm-text gate, and async-aware confirm handler.",
       "when_to_use": [
         "Confirming a destructive action like delete, revoke, or purge",
         "Gating a high-stakes action with a typed confirmation phrase",
@@ -2237,6 +2447,14 @@
         ],
         "severity_deprecated": [
           "danger"
+        ],
+        "iconTreatment": [
+          "inline",
+          "plated"
+        ],
+        "mode": [
+          "dialog",
+          "inline"
         ]
       },
       "props": [
@@ -2262,6 +2480,28 @@
           "default": "warning",
           "description": "Drives icon, tinted icon plate, and confirm button variant. Use \"info\", \"warning\", or \"destructive\". The value \"danger\" is a deprecated alias for \"destructive\" and will be removed in the next major version.\n"
         },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Custom severity icon — overrides the built-in icon for the active severity. Sizing/color is handled by the icon container, so pass a bare Phosphor icon (no explicit size).\n"
+        },
+        {
+          "name": "iconTreatment",
+          "type": "'inline' | 'plated'",
+          "description": "Severity-icon treatment. Leave unset for the canonical default — a tinted circular plate stacked above the title. Set \"plated\" for a 40px color-mix severity plate leading the title column, or \"inline\" for a small leading icon next to the title. Default rendering (unset) is unchanged.\n"
+        },
+        {
+          "name": "mode",
+          "type": "'dialog' | 'inline'",
+          "default": "dialog",
+          "description": "Rendering mode. \"dialog\" uses Radix Dialog + Portal + Overlay + auto X-close. \"inline\" renders only the content surface (no portal, no overlay, no X-close) so multiple dialogs can stack inside one shared scrim.\n"
+        },
+        {
+          "name": "cancelVariant",
+          "type": "ButtonProps[\"variant\"]",
+          "default": "outline",
+          "description": "Cancel button variant. Golden editorial screens use \"ghost\"."
+        },
         {
           "name": "trigger",
           "type": "React.ReactNode",
@@ -2324,17 +2564,29 @@
         "@phosphor-icons/react"
       ],
       "tokens_used": [
+        "--accent",
         "--border-default",
         "--border-focus",
+        "--confirm-dialog-plate-icon-size",
+        "--confirm-dialog-plate-size",
+        "--destructive",
         "--focus-ring-offset",
         "--focus-ring-width",
+        "--font-size-2xl",
+        "--font-size-lg",
         "--font-size-sm",
         "--font-weight-medium",
+        "--font-weight-semibold",
         "--line-height-normal",
         "--line-height-relaxed",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--radius-full",
+        "--radius-lg",
         "--radius-md",
+        "--radius-xl",
+        "--shadow-lg",
+        "--shadow-xl",
         "--spacing-1",
         "--spacing-10",
         "--spacing-2",
@@ -2342,6 +2594,8 @@
         "--spacing-4",
         "--spacing-5",
         "--spacing-6",
+        "--spacing-8",
+        "--surface-card",
         "--surface-error-subtle",
         "--surface-info-subtle",
         "--surface-page",
@@ -2350,7 +2604,9 @@
         "--text-info",
         "--text-primary",
         "--text-secondary",
-        "--text-warning"
+        "--text-tertiary",
+        "--text-warning",
+        "--warning"
       ],
       "example": "<ConfirmDialog\n  trigger={<Button variant=\"destructive\">Delete project</Button>}\n  severity=\"destructive\"\n  title=\"Delete project?\"\n  description=\"This action cannot be undone. All associated data will be permanently removed.\"\n  confirmText=\"acme\"\n  onConfirm={async () => {\n    await deleteProject()\n  }}\n/>\n"
     },
@@ -2632,6 +2888,11 @@
           "type": "React.ReactNode",
           "description": "Override for the default EmptyState slot rendered when data is empty."
         },
+        {
+          "name": "loadingSkeletonCell",
+          "type": "(args: { rowIndex: number; colIndex: number; columnId: string }) => React.ReactNode",
+          "description": "Opt-in per-column skeleton shapes for the loading state. When supplied, each skeleton row's cell contents come from this render prop instead of the default uniform full-width bars, letting the caller mirror the real row's silhouette (logo plates, badge pills, two-line id stacks). Returns the cell contents; DataTable still owns the `tr`/`td` structure, key, and `data-slot`. `colIndex` walks the resolved column list (the injected selection column, when present, is index 0). Return `null`/`undefined` to leave a cell empty. Default (prop omitted) is unchanged: every cell renders a full-width Skeleton bar. Pair with the Skeleton shape classes (`shapeLogo`, `shapePill`, `shapeCircle`).\n"
+        },
         {
           "name": "stickyHeader",
           "type": "boolean",
@@ -2642,7 +2903,7 @@
           "name": "density",
           "type": "\"compact\" | \"default\" | \"editorial\"",
           "default": "\"default\"",
-          "description": "Vertical row padding step. Maps to a `data-density` attribute on the root, which sets the `--dt-row-py` custom property the table's cells consume. `\"compact\"` = 8px (sub-content density: long lists, narrow viewports). `\"default\"` = 12px (current behaviour; backward-compatible with consumers that don't pass the prop). `\"editorial\"` = 20px (generous; each row reads as a card; high-design admin patterns). Themes can override per-density values without forking the component by targeting `[data-density=\"…\"]` from their own selector.\n"
+          "description": "Vertical row padding step. Maps to a `data-density` attribute on the root, which sets the `--dt-row-py` custom property the table's cells consume. `\"compact\"` = 8px (sub-content density: long lists, narrow viewports). `\"default\"` = 12px (current behaviour; backward-compatible with consumers that don't pass the prop). `\"editorial\"` = 16px (spacing-4; generous but compact enough for dense admin grids) — column headers also receive the editorial treatment: uppercase, 11px (overridable via `--dt-header-font-size`), `--text-tertiary` color, and `letter-spacing: 0.08em`; the editorial surface treatment (flush container, card/page row mix) is also applied. Themes can override per-density values without forking the component by targeting `[data-density=\"…\"]` from their own selector.\n"
         },
         {
           "name": "rowTone",
@@ -2663,6 +2924,13 @@
       "tokens_used": [
         "--border-default",
         "--border-strong",
+        "--data-table-sort-bar-radius",
+        "--dt-cell-px",
+        "--dt-container-radius",
+        "--dt-container-shadow",
+        "--dt-header-bg",
+        "--dt-header-font-size",
+        "--dt-row-bg",
         "--dt-row-py",
         "--focus-ring-color",
         "--focus-ring-offset",
@@ -2674,6 +2942,7 @@
         "--line-height-tight",
         "--motion-duration-fast",
         "--motion-easing-standard",
+        "--radius-lg",
         "--radius-md",
         "--radius-sm",
         "--spacing-1",
@@ -2688,6 +2957,7 @@
         "--surface-info-subtle",
         "--surface-interactive-active",
         "--surface-interactive-default",
+        "--surface-page",
         "--surface-selected",
         "--surface-subtle",
         "--surface-success-subtle",
@@ -2901,6 +3171,10 @@
           "name": "DialogHeader",
           "description": "Container for title and description at the top."
         },
+        {
+          "name": "DialogFooter",
+          "description": "Right-aligned action row with a hairline top border, for dialog buttons."
+        },
         {
           "name": "DialogTitle",
           "description": "Accessible dialog heading."
@@ -2928,11 +3202,16 @@
       ],
       "tokens_used": [
         "--border-focus",
+        "--border-subtle",
         "--focus-ring-offset",
         "--focus-ring-width",
+        "--font-size-2xl",
         "--font-size-lg",
         "--font-size-sm",
+        "--font-weight-bold",
         "--font-weight-semibold",
+        "--hairline",
+        "--hairline-width",
         "--motion-duration-150",
         "--motion-duration-normal",
         "--motion-easing-default",
@@ -2941,13 +3220,20 @@
         "--overlay-bg",
         "--radius-lg",
         "--radius-sm",
+        "--radius-xl",
+        "--shadow-lg",
         "--shadow-xl",
         "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
         "--spacing-4",
         "--spacing-6",
+        "--spacing-8",
+        "--surface-card",
         "--surface-page",
         "--text-primary",
-        "--text-secondary"
+        "--text-secondary",
+        "--text-tertiary"
       ],
       "example": "<Dialog>\n  <DialogTrigger asChild>\n    <Button>Edit profile</Button>\n  </DialogTrigger>\n  <DialogContent>\n    <DialogHeader>\n      <DialogTitle>Edit profile</DialogTitle>\n      <DialogDescription>Make changes to your profile here.</DialogDescription>\n    </DialogHeader>\n    {/* form content */}\n  </DialogContent>\n</Dialog>\n"
     },
@@ -3054,27 +3340,37 @@
       ],
       "tokens_used": [
         "--border-default",
+        "--border-subtle",
+        "--destructive",
         "--font-size-sm",
         "--font-size-xs",
+        "--hairline",
         "--motion-duration-fast",
         "--motion-easing-default",
         "--motion-easing-enter",
         "--motion-easing-exit",
         "--radius-lg",
         "--radius-md",
+        "--radius-sm",
         "--shadow-lg",
         "--shadow-xl",
         "--spacing-1",
         "--spacing-2",
         "--spacing-3",
         "--spacing-8",
+        "--stroke-width-thin",
         "--surface-card",
+        "--surface-elev",
         "--surface-error-subtle",
         "--surface-interactive-hover",
+        "--surface-muted",
         "--surface-popover",
+        "--surface-subtle",
         "--text-error",
+        "--text-muted",
         "--text-primary",
-        "--text-secondary"
+        "--text-secondary",
+        "--text-tertiary"
       ],
       "example": "<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"ghost\">Actions</Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuItem>Edit</DropdownMenuItem>\n    <DropdownMenuItem>Duplicate</DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>\n"
     },
@@ -3134,6 +3430,10 @@
         "tone": [
           "default",
           "subtle"
+        ],
+        "variant": [
+          "default",
+          "editorial"
         ]
       },
       "props": [
@@ -3175,6 +3475,12 @@
           "default": "default",
           "description": "Default uses a dashed border on a muted surface. Subtle is borderless."
         },
+        {
+          "name": "variant",
+          "type": "'default' | 'editorial'",
+          "default": "default",
+          "description": "Surface treatment. Default is the base placeholder (dashed/borderless per tone). Editorial is an opt-in filled card on --surface-card with a 64px circular icon chip and a larger heading; it overrides the tone surface and the size icon/heading scale.\n"
+        },
         {
           "name": "headingAs",
           "type": "'h2' | 'h3' | 'h4'",
@@ -3199,16 +3505,20 @@
         "--letter-spacing-tight",
         "--line-height-relaxed",
         "--line-height-tight",
+        "--radius-full",
         "--radius-lg",
         "--spacing-1",
         "--spacing-12",
+        "--spacing-16",
         "--spacing-2",
         "--spacing-3",
         "--spacing-4",
         "--spacing-5",
         "--spacing-6",
         "--spacing-8",
+        "--surface-card",
         "--surface-muted",
+        "--surface-subtle",
         "--text-primary",
         "--text-secondary",
         "--text-tertiary"
@@ -3253,7 +3563,7 @@
         },
         {
           "name": "FieldError",
-          "description": "Error message display with role=\"alert\". Accepts an errors array or children."
+          "description": "Error message display with role=\"alert\". Accepts an errors array or children. Optional `icon` prop renders an aria-hidden leading glyph and switches to a centered icon + message row; without it the error renders as plain inline text (default, unchanged). Typography follows the density axis: place data-density=\"editorial\" on any ancestor to activate the 13px/11px discrete ramp and tertiary color treatment.\n"
         }
       ],
       "dependencies": [
@@ -3269,7 +3579,8 @@
         "--spacing-4",
         "--text-error",
         "--text-primary",
-        "--text-secondary"
+        "--text-secondary",
+        "--text-tertiary"
       ],
       "example": "<Field>\n  <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n  <FieldDescription>We will never share your email.</FieldDescription>\n  <Input id=\"email\" type=\"email\" />\n  <FieldError errors={[{ message: \"Email is required\" }]} />\n</Field>\n"
     },
@@ -3969,59 +4280,156 @@
       ],
       "example": "<Image\n  src=\"/photos/hero.jpg\"\n  alt=\"Mountain landscape\"\n  aspectRatio=\"video\"\n/>\n\n<Image\n  src={user.avatar}\n  alt={user.name}\n  aspectRatio=\"square\"\n  objectFit=\"cover\"\n  fallback={<span>No photo</span>}\n/>\n"
     },
-    "inline": {
-      "category": "layout",
-      "description": "Horizontal flex container with token-driven gap, alignment, optional wrap, and `as` polymorphism.",
+    "infographic-bar": {
+      "category": "admin",
+      "description": "Composable continuous stat-card band. Lays out N stat-cards as a single infographic strip — outer corners rounded, inner corners square, hairline dividers, no full per-card borders.",
       "when_to_use": [
-        "Laying out a row of buttons, chips, badges, or icons",
-        "Toolbar-style horizontal groupings",
-        "Anywhere you would write `flex items-center gap-N` in Tailwind"
+        "Rendering a KPI/metric row that should read as ONE continuous band, not separate bordered cards",
+        "Admin dashboard summary strips where several metrics share a single framed surface",
+        "Theme-portable metric rows that must look right in both bordered and borderless palettes"
       ],
       "when_not_to_use": [
-        "Vertical arrangements (use Stack)",
-        "Two-dimensional grids (use Grid)",
-        "Layouts that need to align to a specific column count (use Grid)"
+        "Showing a single metric (use StatCard directly)",
+        "Metrics that each need their own card with its own border and elevation (compose StatCards in a grid instead)",
+        "Tabular metrics across many rows (use DataTable)",
+        "Marketing feature tiles (use a marketing card pattern)"
       ],
       "props": [
         {
-          "name": "as",
-          "type": "keyof JSX.IntrinsicElements",
-          "default": "'div'",
-          "description": "HTML element to render"
+          "name": "stats",
+          "type": "InfographicBarStat[]",
+          "required": true,
+          "description": "Ordered stat cells, rendered left-to-right as a single continuous band. Each item is a subset of StatCardProps."
         },
         {
-          "name": "gap",
-          "type": "InlineSpacing | ResponsiveProp<InlineSpacing>",
-          "default": "'md'",
-          "description": "Space between children"
+          "name": "stats[].label",
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "Small uppercase label describing the metric."
         },
         {
-          "name": "align",
-          "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'",
-          "default": "'center'",
-          "description": "Cross-axis alignment"
+          "name": "stats[].value",
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "Prominent metric value."
         },
         {
-          "name": "justify",
-          "type": "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'",
-          "description": "Main-axis alignment"
+          "name": "stats[].delta",
+          "type": "StatCardDelta",
+          "description": "Change indicator with value, direction (\"up\" | \"down\" | \"flat\"), and optional label."
         },
         {
-          "name": "wrap",
-          "type": "boolean",
-          "default": "false",
-          "description": "Allow children to wrap onto multiple lines"
-        }
-      ],
-      "dependencies": [],
-      "tokens_used": [
-        "--inline-gap",
-        "--inline-gap-lg",
-        "--inline-gap-md",
-        "--inline-gap-sm",
-        "--inline-gap-xl",
-        "--spacing-4"
-      ],
+          "name": "stats[].trend",
+          "type": "React.ReactNode",
+          "description": "Slot for a sparkline, chart, or icon."
+        },
+        {
+          "name": "stats[].trendPosition",
+          "type": "'header' | 'footer'",
+          "default": "footer",
+          "description": "Where the trend slot renders within the cell."
+        },
+        {
+          "name": "stats[].footer",
+          "type": "React.ReactNode",
+          "description": "Sublabel or link rendered beneath the value."
+        },
+        {
+          "name": "stats[].variant",
+          "type": "'default' | 'highlight'",
+          "default": "default",
+          "description": "Per-cell visual emphasis. Highlight tints that cell's surface."
+        },
+        {
+          "name": "stats[].valueAs",
+          "type": "'default' | 'hero' | 'compact'",
+          "default": "default",
+          "description": "Typography scale for the cell value."
+        },
+        {
+          "name": "stats[].id",
+          "type": "string",
+          "description": "Stable React key for the cell. Falls back to the array index when omitted."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md'",
+          "default": "md",
+          "description": "Dimensional density forwarded to every cell."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional CSS class names merged onto the band element."
+        }
+      ],
+      "dependencies": [
+        "stat-card"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--hairline",
+        "--infographic-bar-divider",
+        "--radius-lg",
+        "--shadow-xs",
+        "--stroke-width-thin",
+        "--surface-card"
+      ],
+      "example": "<InfographicBar\n  stats={[\n    { label: \"Total Revenue\", value: \"$48,120\", delta: { value: \"+12.4%\", direction: \"up\", label: \"vs last month\" } },\n    { label: \"Active Users\", value: \"892\", delta: { value: \"+3.1%\", direction: \"up\" } },\n    { label: \"Churn Rate\", value: \"3.2%\", delta: { value: \"-0.4%\", direction: \"down\" } },\n    { label: \"Signups\", value: \"412\", variant: \"highlight\" },\n  ]}\n/>\n"
+    },
+    "inline": {
+      "category": "layout",
+      "description": "Horizontal flex container with token-driven gap, alignment, optional wrap, and `as` polymorphism.",
+      "when_to_use": [
+        "Laying out a row of buttons, chips, badges, or icons",
+        "Toolbar-style horizontal groupings",
+        "Anywhere you would write `flex items-center gap-N` in Tailwind"
+      ],
+      "when_not_to_use": [
+        "Vertical arrangements (use Stack)",
+        "Two-dimensional grids (use Grid)",
+        "Layouts that need to align to a specific column count (use Grid)"
+      ],
+      "props": [
+        {
+          "name": "as",
+          "type": "keyof JSX.IntrinsicElements",
+          "default": "'div'",
+          "description": "HTML element to render"
+        },
+        {
+          "name": "gap",
+          "type": "InlineSpacing | ResponsiveProp<InlineSpacing>",
+          "default": "'md'",
+          "description": "Space between children"
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'",
+          "default": "'center'",
+          "description": "Cross-axis alignment"
+        },
+        {
+          "name": "justify",
+          "type": "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'",
+          "description": "Main-axis alignment"
+        },
+        {
+          "name": "wrap",
+          "type": "boolean",
+          "default": "false",
+          "description": "Allow children to wrap onto multiple lines"
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--inline-gap",
+        "--inline-gap-lg",
+        "--inline-gap-md",
+        "--inline-gap-sm",
+        "--inline-gap-xl",
+        "--spacing-4"
+      ],
       "example": "<Inline gap=\"sm\">\n  <Button>Save</Button>\n  <Button variant=\"secondary\">Cancel</Button>\n</Inline>\n\n<Inline gap=\"xs\" wrap>\n  {tags.map(t => <Badge key={t}>{t}</Badge>)}\n</Inline>\n"
     },
     "input": {
@@ -4070,6 +4478,7 @@
         "--border-error",
         "--border-focus",
         "--border-strong",
+        "--field-control-bg",
         "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-base",
@@ -4077,8 +4486,17 @@
         "--input-bg",
         "--input-bg-invalid",
         "--input-border",
+        "--input-height-lg",
+        "--input-height-md",
+        "--input-padding-lg",
+        "--input-padding-md",
+        "--input-padding-sm",
+        "--input-placeholder-color",
+        "--input-radius-lg",
+        "--input-radius-md",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--radius-md",
         "--radius-sm",
         "--spacing-1",
         "--spacing-3",
@@ -4086,8 +4504,10 @@
         "--spacing-4",
         "--spacing-4_5",
         "--spacing-5",
+        "--surface-card",
         "--surface-error-subtle",
         "--surface-interactive-default",
+        "--surface-subtle",
         "--text-primary",
         "--text-secondary"
       ],
@@ -4425,6 +4845,90 @@
       ],
       "example": "<Marquee\n  items={['Acme Corp', 'Vercel', 'Low Orbit Studio', 'Figma', 'Notion']}\n  durationSec={20}\n  separator=\"·\"\n/>\n\n<Marquee\n  bands={[\n    { items: clients, direction: 'left', durationSec: 40, separator: '●' },\n    { items: clientsReversed, direction: 'right', durationSec: 50, separator: '○' },\n  ]}\n  pauseOnHover\n  gap=\"2.5rem\"\n/>\n"
     },
+    "matrix-table": {
+      "category": "admin",
+      "description": "A fixed members×roles assignment grid. Sticky-left identity column with an uppercase, tracked \"MEMBER\" eyebrow header; centered boolean cells rendered as a 22px filled-success disc with a check glyph (active) or a muted dash (not assigned); optional string cells render as plain text; multi-line centered role-column headers (label over count) that opt out of the uppercase header treatment; an editorial cell rhythm (spacing-5 horizontal) and hairline borders driven by the shared --dt-* table hooks (--dt-container-radius/-shadow, --dt-header-bg, --dt-row-bg, --hairline). Participates in the density axis — placing an ancestor with data-density=\"editorial\" activates the editorial surface treatment (flush container, page/card row mix). No list machinery — no selection column, no sort buttons, no pagination footer.",
+      "when_to_use": [
+        "Displaying a members × roles assignment matrix in organization settings",
+        "A plans × features monetization pricing matrix (string + boolean cells)",
+        "Any fixed grid where rows are identities (users, plans) and columns are attributes (permissions, roles, features), rendered as a sibling of the editorial data-table",
+        "When the shape is a matrix, not a sortable/pageable list — where DataTable's list machinery would fight the layout"
+      ],
+      "when_not_to_use": [
+        "Sortable, paginated lists of records (use DataTable)",
+        "Editable grids with input cells (extend or build a dedicated grid)",
+        "Simple key-value tables (use the Table primitive directly)"
+      ],
+      "variants": {},
+      "props": [
+        {
+          "name": "columns",
+          "type": "MatrixColumn[]",
+          "required": true,
+          "description": "Column (role/feature) definitions. Each column carries a `key` (stable identifier indexing the per-row cell map; `id` is accepted as a compatible alias), a `label`, an optional `count` sub-label rendered below the label, and an optional `description` shown as a tooltip when hovering an active cell in that column.\n"
+        },
+        {
+          "name": "rows",
+          "type": "MatrixRow<TIdentity>[]",
+          "required": true,
+          "description": "Row data. Each row has an `id` (React key), an optional `identity` payload passed through to `renderIdentity` via the row, and its truth values. Truth is supplied via `cells` — a map keyed by column key whose values are `string | boolean` (`true`/`false` render the boolean indicator, a `string` renders as plain text). `activeColumns` (a Set/array of column keys) is accepted as a compatible alias for the boolean half of `cells`; a `cells` entry takes precedence for the same column.\n"
+        },
+        {
+          "name": "renderIdentity",
+          "type": "(row: MatrixRow<TIdentity>) => React.ReactNode",
+          "required": true,
+          "description": "Render slot for the sticky-left identity cell. Receives the whole row (blessed shape) — read `row.identity` for structured identity data."
+        },
+        {
+          "name": "identityLabel",
+          "type": "React.ReactNode",
+          "description": "Header label for the sticky identity column. Defaults to \"Member\" (rendered with the uppercase, tracked eyebrow treatment)."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the table element."
+        }
+      ],
+      "dependencies": [
+        "@phosphor-icons/react",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--dt-container-radius",
+        "--dt-container-shadow",
+        "--dt-header-bg",
+        "--dt-row-bg",
+        "--font-size-base",
+        "--font-size-sm",
+        "--font-weight-medium",
+        "--font-weight-semibold",
+        "--hairline",
+        "--hairline-width",
+        "--motion-duration-100",
+        "--motion-easing-default",
+        "--primary-text",
+        "--radius-full",
+        "--radius-lg",
+        "--radius-sm",
+        "--shadow-md",
+        "--shadow-sm",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--spacing-5",
+        "--success",
+        "--surface-card",
+        "--surface-elev",
+        "--surface-page",
+        "--surface-subtle",
+        "--text-muted",
+        "--text-primary",
+        "--text-tertiary"
+      ],
+      "example": "const columns: MatrixColumn[] = [\n  { key: 'admin', label: 'Admin', count: 3 },\n  { key: 'editor', label: 'Editor', count: 5, description: 'Can edit content' },\n  { key: 'viewer', label: 'Viewer', count: 12 },\n]\n\nconst rows: MatrixRow<{ name: string; email: string }>[] = [\n  { id: '1', identity: { name: 'Ada Lovelace', email: 'ada@example.com' }, cells: { admin: true, editor: true } },\n  { id: '2', identity: { name: 'Grace Hopper', email: 'grace@example.com' }, cells: { viewer: true } },\n  // Mixed string + boolean cells (string renders as plain text):\n  { id: '3', identity: { name: 'Storage', email: '' }, cells: { admin: '50GB', editor: true, viewer: false } },\n  // Compatible alias: activeColumns instead of a boolean cells map:\n  { id: '4', identity: { name: 'Legacy', email: '' }, activeColumns: ['admin'] },\n]\n\n<MatrixTable\n  columns={columns}\n  rows={rows}\n  renderIdentity={(row) => <span>{row.identity?.name}</span>}\n  identityLabel=\"Member\"\n  aria-label=\"Member role assignments\"\n/>\n"
+    },
     "menubar": {
       "category": "overlay",
       "description": "Horizontal menu bar with dropdown menus, keyboard navigation, and full a11y support.",
@@ -5001,6 +5505,16 @@
           "name": "titleFamily",
           "type": "'heading' | 'display' | string",
           "description": "Title font-family override. `\"heading\"` and `\"display\"` are tokens that map to `data-title-family` attributes; `\"display\"` resolves to `var(--font-display, var(--font-family-heading, inherit))` so themes without a display font degrade to the heading family. Any other string is forwarded as a raw CSS family on an inline `--page-header-title-family` declaration.\n"
+        },
+        {
+          "name": "leading",
+          "type": "React.ReactNode",
+          "description": "Optional media/identity node rendered to the LEFT of the title block inside the title row (typically an Avatar or identity plate). When present the row forms an identity lockup and the slot top-aligns against the title/description stack (VI-539). Omit to keep the default text|actions layout, so existing call sites render unchanged.\n"
+        },
+        {
+          "name": "titleLeading",
+          "type": "string | number",
+          "description": "Title line-height override, forwarded as an inline `--page-header-title-leading` custom property (a unitless number like `1.05` or any CSS length). When omitted the title keeps its default line-height (tight for the standard title, `1` for the marquee scale), so existing call sites render unchanged.\n"
         }
       ],
       "dependencies": [
@@ -5020,7 +5534,9 @@
         "--letter-spacing-wide",
         "--line-height-relaxed",
         "--line-height-tight",
+        "--page-header-leading-gap",
         "--page-header-title-family",
+        "--page-header-title-leading",
         "--page-header-title-size",
         "--spacing-1",
         "--spacing-2",
@@ -5530,6 +6046,10 @@
         "Linear capacity bars (use Progress with size=\"thin\")"
       ],
       "variants": {
+        "variant": [
+          "ring",
+          "solid"
+        ],
         "size": [
           "sm",
           "md",
@@ -5561,6 +6081,12 @@
           "default": "100",
           "description": "Maximum value the score can reach."
         },
+        {
+          "name": "variant",
+          "type": "\"ring\" | \"solid\"",
+          "default": "\"ring\"",
+          "description": "Display treatment. \"ring\" draws the SVG track + progress arc (default). \"solid\" renders a flat filled tinted disc with no ring — the editorial health-score look."
+        },
         {
           "name": "size",
           "type": "\"sm\" | \"md\" | \"lg\"",
@@ -5597,11 +6123,13 @@
       ],
       "tokens_used": [
         "--border-default",
+        "--destructive",
         "--font-size-base",
         "--font-size-sm",
         "--font-size-xs",
         "--font-weight-regular",
         "--font-weight-semibold",
+        "--info",
         "--line-height-tight",
         "--motion-duration-150",
         "--motion-duration-500",
@@ -5609,11 +6137,14 @@
         "--radius-full",
         "--score-indicator-center-bg",
         "--score-indicator-icon-color",
+        "--score-indicator-solid-bg",
+        "--score-indicator-solid-value-color",
         "--score-indicator-stroke-color",
         "--score-indicator-track-color",
         "--score-indicator-value-color",
         "--spacing-1",
         "--spacing-2",
+        "--success",
         "--surface-card",
         "--surface-error-subtle",
         "--surface-info-subtle",
@@ -5624,7 +6155,8 @@
         "--text-primary",
         "--text-success",
         "--text-tertiary",
-        "--text-warning"
+        "--text-warning",
+        "--warning"
       ],
       "example": "<ScoreIndicator value={98} max={100} />\n<ScoreIndicator value={42} max={100} size=\"lg\" />\n<ScoreIndicator value={86} max={100} tone=\"success\" denominator=\"below\" />\n"
     },
@@ -5758,73 +6290,297 @@
       ],
       "example": "<SectionHeader title=\"Tonight's events\" meta=\"2 events\" />\n<SectionHeader title=\"Activity\" meta=\"last hour\" />\n<SectionHeader title=\"Top promoters · 30d\" />\n"
     },
-    "select": {
-      "category": "form",
-      "description": "An accessible select component built on Radix UI Select with all sub-components.",
+    "section-intro": {
+      "category": "general",
+      "description": "Marketing section opener with a mono uppercase eyebrow, display-font heading, and optional lede paragraph. Eyebrow color tracks a live-rewritten CSS custom property for brand-accent binding.",
       "when_to_use": [
-        "Choosing one option from a predefined list (country, role, status)",
-        "Dropdown menus for form fields with 5+ options",
-        "Replacing native <select> elements with a styled alternative"
+        "Opening a marketing section with an eyebrow + display heading pattern",
+        "Replacing hand-rolled eyebrow/heading combos that repeat across homepage sections",
+        "Binding the eyebrow color to a keyed brand accent that changes at runtime",
+        "Using left or center alignment for section intros on marketing pages"
       ],
       "when_not_to_use": [
-        "Searchable/filterable option lists (use Combobox)",
-        "Multi-select with checkboxes (use Combobox or Checkbox group)",
-        "Binary on/off choices (use Switch or Checkbox)",
-        "Navigation actions (use Dropdown Menu)"
+        "Admin page headers with actions and breadcrumbs (use PageHeader)",
+        "In-page content section dividers with meta labels (use SectionHeader)",
+        "Plain typographic headings inside body copy (use Heading)",
+        "Sections that require icon, badge, or button inside the heading area"
       ],
+      "variants": {
+        "align": [
+          "left",
+          "center"
+        ]
+      },
       "props": [
         {
-          "name": "value",
-          "type": "string",
-          "description": "Controlled selected value"
+          "name": "eyebrow",
+          "type": "React.ReactNode",
+          "description": "Short mono uppercase label rendered above the heading. Reads color from --section-intro-eyebrow-color."
         },
         {
-          "name": "defaultValue",
-          "type": "string"
+          "name": "heading",
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "Display-font heading — the main marketing statement."
         },
         {
-          "name": "onValueChange",
-          "type": "(value: string) => void"
+          "name": "lede",
+          "type": "React.ReactNode",
+          "description": "Optional supporting paragraph rendered beneath the heading."
         },
         {
-          "name": "disabled",
-          "type": "boolean",
-          "default": false
+          "name": "align",
+          "type": "'left' | 'center'",
+          "default": "left",
+          "description": "Text alignment for all three slots."
         },
         {
-          "name": "placeholder",
-          "type": "string",
-          "description": "Shown via SelectValue when no value is selected"
+          "name": "headingAs",
+          "type": "'h1' | 'h2' | 'h3'",
+          "default": "h2",
+          "description": "Heading level for the heading slot."
+        },
+        {
+          "name": "as",
+          "type": "'header' | 'div' | 'section'",
+          "default": "header",
+          "description": "Root element tag."
         }
       ],
-      "sub_components": [
-        {
-          "name": "SelectTrigger",
-          "description": "The button that opens the select dropdown. Accepts a size prop (\"sm\" | \"md\" | \"lg\")."
-        },
+      "dependencies": [],
+      "tokens_used": [
+        "--accent-default",
+        "--font-display",
+        "--font-family-heading",
+        "--font-mono",
+        "--font-size-base",
+        "--font-size-xs",
+        "--font-weight-light",
+        "--font-weight-medium",
+        "--interactive-primary-bg",
+        "--letter-spacing-tight",
+        "--letter-spacing-widest",
+        "--line-height-none",
+        "--line-height-relaxed",
+        "--line-height-tight",
+        "--section-intro-eyebrow-color",
+        "--spacing-4",
+        "--text-primary",
+        "--text-secondary"
+      ],
+      "example": "<SectionIntro\n  eyebrow=\"On the map\"\n  heading=\"Built for the world's best venues\"\n  lede=\"One platform. Every door.\"\n/>\n"
+    },
+    "section-nav": {
+      "category": "navigation",
+      "description": "A link/anchor-based section sub-navigation strip — a leading Phosphor icon + label + optional trailing count pill per item, with a static 2px primary underline on the active item. Items navigate via href (use `asChild` with `next/link` for client-side routing). Distinct from Tabs — no button triggers, no content panels, no animated indicator.",
+      "when_to_use": [
+        "A sub-navigation strip across the top of a detail view whose tabs are real routes (e.g. Organization → Detail / Roles / Invites)",
+        "When each section is its own URL and you want client-side navigation via next/link rather than in-page panel switching",
+        "When sections carry a count (member count, pending invites) you want to surface in a trailing pill"
+      ],
+      "when_not_to_use": [
+        "In-page panel switching where the content lives on the same route (use Tabs)",
+        "Top-level site navigation with brand + actions (use Navbar)",
+        "Paginated record lists (use Pagination)"
+      ],
+      "variants": {},
+      "props": [
         {
-          "name": "SelectValue",
-          "description": "Displays the selected value or placeholder text inside the trigger."
+          "name": "label",
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "The item's visible label text. (SectionNavItem)"
         },
         {
-          "name": "SelectContent",
-          "description": "The dropdown container with scroll buttons and portal positioning."
+          "name": "href",
+          "type": "string",
+          "description": "Destination URL. Applied directly when not using `asChild`. (SectionNavItem)"
         },
         {
-          "name": "SelectItem",
-          "description": "An individual selectable option with a check indicator."
+          "name": "icon",
+          "type": "Icon | React.ReactNode",
+          "description": "Leading icon, accepted in two forms — (1) a Phosphor icon component (`icon={UsersIcon}`), rendered as `<Icon className=... weight=\"regular\" />`; or (2) a rendered element (`icon={<Users size={16} weight=\"bold\" />}`), rendered as-is so its own size/weight/props are preserved, wrapped in the icon slot span. Branches on `React.isValidElement`. (SectionNavItem)\n"
         },
         {
-          "name": "SelectGroup",
-          "description": "Groups related items together."
+          "name": "count",
+          "type": "number",
+          "description": "Optional trailing count pill value. `0` is rendered; `undefined`/`null` hides the pill. (SectionNavItem)"
         },
         {
-          "name": "SelectLabel",
-          "description": "A non-selectable label for a group of items."
+          "name": "isActive",
+          "type": "boolean",
+          "default": "false",
+          "description": "Marks the item as the current section — text-primary, 2px primary underline, primary-tinted count pill, and `aria-current=\"page\"`. (SectionNavItem)"
         },
         {
-          "name": "SelectSeparator",
-          "description": "A visual divider between groups or items."
+          "name": "asChild",
+          "type": "boolean",
+          "default": "false",
+          "description": "Merge the item's chrome onto the immediate child element instead of rendering an `<a>`. Use with `next/link` for client-side navigation. (SectionNavItem)"
+        }
+      ],
+      "dependencies": [
+        "@radix-ui/react-slot",
+        "@phosphor-icons/react",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-focus",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-sm",
+        "--font-weight-medium",
+        "--hairline",
+        "--motion-duration-fast",
+        "--motion-easing-standard",
+        "--primary",
+        "--radius-full",
+        "--radius-sm",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--stroke-width-thin",
+        "--surface-subtle",
+        "--text-primary",
+        "--text-tertiary"
+      ],
+      "example": "import Link from 'next/link'\nimport { UsersIcon, ShieldIcon, EnvelopeIcon } from '@phosphor-icons/react'\nimport { SectionNav, SectionNavItem } from '@/components/ui/section-nav/section-nav'\n\n<SectionNav aria-label=\"Organization sections\">\n  <SectionNavItem asChild isActive icon={UsersIcon} label=\"Detail\">\n    <Link href=\"/org/detail\" />\n  </SectionNavItem>\n  <SectionNavItem asChild icon={ShieldIcon} label=\"Roles\" count={4}>\n    <Link href=\"/org/roles\" />\n  </SectionNavItem>\n  <SectionNavItem asChild icon={EnvelopeIcon} label=\"Invites\" count={2}>\n    <Link href=\"/org/invites\" />\n  </SectionNavItem>\n</SectionNav>\n"
+    },
+    "segmented-progress": {
+      "category": "data-display",
+      "description": "Discrete per-step progress meter — N equal pill segments in a row, each individually expressing done, current, or pending state. Designed for multi-step flows where individual step completion matters, not just an overall percentage.",
+      "when_to_use": [
+        "Multi-step onboarding or wizard flows where each discrete step needs individual visual state",
+        "Brand elicitation, survey, or questionnaire progress where step-level completion is meaningful",
+        "Short sequence indicators (≤12 steps) where a pill-per-step treatment reads clearly",
+        "Inline progress in cards or compact surfaces where a stepper is too heavy"
+      ],
+      "when_not_to_use": [
+        "Use `progress` for continuous values like upload percentage or loading progress",
+        "Use `stepper` when step labels or click-to-navigate behavior is needed",
+        "Sequences longer than ~15 segments (pills become too narrow to read)"
+      ],
+      "variants": {
+        "size": [
+          "sm",
+          "md"
+        ]
+      },
+      "props": [
+        {
+          "name": "total",
+          "type": "number",
+          "required": true,
+          "description": "Total number of segments to render."
+        },
+        {
+          "name": "value",
+          "type": "number",
+          "required": true,
+          "description": "Count of completed segments. Indices 0..value-1 render as done."
+        },
+        {
+          "name": "current",
+          "type": "number",
+          "description": "Optional 0-based index of the in-progress segment. Renders with a primary→muted gradient. Typically equals `value`."
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\"",
+          "default": "\"sm\"",
+          "description": "Segment height. sm=6px (prototype height), md=8px."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": true,
+          "description": "Accessible name for the progressbar. Required — describe the current step context (e.g. \"Step 3 of 10\")."
+        }
+      ],
+      "dependencies": [
+        "class-variance-authority",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--interactive-primary-bg",
+        "--motion-duration-150",
+        "--motion-easing-default",
+        "--primary",
+        "--radius-full",
+        "--spacing-1",
+        "--surface-muted"
+      ],
+      "example": "<SegmentedProgress total={10} value={2} current={2} aria-label=\"Step 2 of 10\" />\n<SegmentedProgress total={6} value={3} aria-label=\"Step 3 of 6\" size=\"md\" />\n"
+    },
+    "select": {
+      "category": "form",
+      "description": "An accessible select component built on Radix UI Select with all sub-components.",
+      "when_to_use": [
+        "Choosing one option from a predefined list (country, role, status)",
+        "Dropdown menus for form fields with 5+ options",
+        "Replacing native <select> elements with a styled alternative"
+      ],
+      "when_not_to_use": [
+        "Searchable/filterable option lists (use Combobox)",
+        "Multi-select with checkboxes (use Combobox or Checkbox group)",
+        "Binary on/off choices (use Switch or Checkbox)",
+        "Navigation actions (use Dropdown Menu)"
+      ],
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Controlled selected value"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string"
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "description": "Shown via SelectValue when no value is selected"
+        }
+      ],
+      "sub_components": [
+        {
+          "name": "SelectTrigger",
+          "description": "The button that opens the select dropdown. Accepts a size prop (\"sm\" | \"md\" | \"lg\") and a variant prop (\"default\" | \"borderless\"); borderless drops the border and sits on --field-control-bg to match a borderless Input in an in-dialog form."
+        },
+        {
+          "name": "SelectValue",
+          "description": "Displays the selected value or placeholder text inside the trigger."
+        },
+        {
+          "name": "SelectContent",
+          "description": "The dropdown container with scroll buttons and portal positioning."
+        },
+        {
+          "name": "SelectItem",
+          "description": "An individual selectable option with a check indicator."
+        },
+        {
+          "name": "SelectGroup",
+          "description": "Groups related items together."
+        },
+        {
+          "name": "SelectLabel",
+          "description": "A non-selectable label for a group of items."
+        },
+        {
+          "name": "SelectSeparator",
+          "description": "A visual divider between groups or items."
         }
       ],
       "dependencies": [
@@ -5836,6 +6592,7 @@
         "--border-error",
         "--border-focus",
         "--border-strong",
+        "--field-control-bg",
         "--field-menu-bg",
         "--focus-ring-width",
         "--font-size-base",
@@ -5864,6 +6621,7 @@
         "--surface-interactive-default",
         "--surface-interactive-hover",
         "--surface-popover",
+        "--surface-subtle",
         "--text-primary",
         "--text-secondary"
       ],
@@ -6202,16 +6960,23 @@
         {
           "name": "className",
           "type": "string",
-          "description": "Control dimensions and shape (e.g., \"w-full h-4 rounded\")"
+          "description": "Control dimensions and shape (e.g., \"w-full h-4 rounded\"). Opt into a preset silhouette by applying a shape modifier class from the module: shapeLogo (~104x24), shapePill (~64x18), or shapeCircle (square, fully rounded). These layer on top of the base .skeleton class.\n"
         }
       ],
       "dependencies": [],
       "tokens_used": [
         "--_shimmer-duration",
         "--motion-easing-linear",
+        "--radius-full",
         "--radius-md",
+        "--radius-sm",
         "--skeleton-from",
-        "--skeleton-to"
+        "--skeleton-logo-height",
+        "--skeleton-logo-width",
+        "--skeleton-pill-height",
+        "--skeleton-pill-width",
+        "--skeleton-to",
+        "--text-primary"
       ],
       "example": "<Skeleton className=\"h-4 w-[200px]\" />\n<Skeleton className=\"h-12 w-12 rounded-full\" />\n"
     },
@@ -6438,6 +7203,116 @@
       ],
       "example": "<Sparkline values={[12, 18, 22, 19, 27, 36, 41, 48, 54, 62, 71, 84]} />\n<Sparkline values={[12, 18, 22, 19, 27, 36, 41, 48, 54, 62, 71, 84]} width={120} height={32} />\n<Sparkline values={[12, 18, 22, 19, 27, 36, 41, 48, 54, 62, 71, 84]} color=\"var(--text-success)\" />\n<Sparkline values={[12, 18, 22, 19, 27, 36, 41, 48, 54, 62, 71, 84]} fluid />\n<Sparkline values={[12, 18, 22, 19, 27, 36, 41, 48, 54, 62, 71, 84]} aria-label=\"RSVPs over the last 12 weeks\" />\n"
     },
+    "specimen-card": {
+      "category": "specimen",
+      "description": "Labeled frame that pairs a context token + \"feel\" descriptor with arbitrary live component children — proving how a brand voice/tone renders on real components.",
+      "when_to_use": [
+        "Displaying tone-by-context previews in a brand workbench grid (e.g. \"error\" + \"warm, accountable\" above a real Alert component)",
+        "Building brand-voice proof blocks that show live components annotated with their voice/tone attribution"
+      ],
+      "when_not_to_use": [
+        "General-purpose card containers (use Card) — SpecimenCard is specifically a labeled component-specimen frame",
+        "Production UI layouts where the context/feel labeling would be confusing to end users"
+      ],
+      "variants": {
+        "footer": [
+          "with-footer",
+          "without-footer"
+        ]
+      },
+      "props": [
+        {
+          "name": "context",
+          "type": "string",
+          "required": true,
+          "description": "Context token label rendered uppercase (e.g. \"error\", \"onboarding\")."
+        },
+        {
+          "name": "feel",
+          "type": "string",
+          "description": "Italic feel descriptor rendered at the end of the label row (e.g. \"warm, accountable\")."
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--hairline",
+        "--radius-lg",
+        "--shadow-sm",
+        "--spacing-1",
+        "--spacing-1-5",
+        "--spacing-2",
+        "--spacing-3",
+        "--stroke-width-thin",
+        "--surface-card",
+        "--text-secondary",
+        "--text-tertiary"
+      ],
+      "example": "<SpecimenCard context=\"error\" feel=\"warm, accountable\">\n  <Alert variant=\"destructive\">Something went wrong — we've got it.</Alert>\n</SpecimenCard>\n\n<SpecimenCard context=\"onboarding\">\n  <Button>Get started</Button>\n  <Button variant=\"outline\">Learn more</Button>\n  <SpecimenCardFooter>voice — precise · warm · direct</SpecimenCardFooter>\n</SpecimenCard>\n"
+    },
+    "spinner": {
+      "category": "data-display",
+      "description": "Inline loading spinner — a rotating border ring with a subtle track and a tone-colored leading edge. Three sizes (xs/sm/md), two tones (default/primary), and full reduced-motion support.",
+      "when_to_use": [
+        "Indicating an async operation is in progress within a button, form field, or inline context",
+        "Replacing text or an icon while content is loading (inline, non-blocking)",
+        "Decorative loading affordance inside a card or panel where a full-page skeleton would be too heavy"
+      ],
+      "when_not_to_use": [
+        "Full-page or full-section loading states (use Skeleton instead)",
+        "Progress that can be measured and communicated as a percentage (use Progress)",
+        "Indicating indeterminate progress for a long-running task visible to the user (use a labeled progress bar)"
+      ],
+      "variants": {
+        "size": [
+          "xs",
+          "sm",
+          "md"
+        ],
+        "tone": [
+          "default",
+          "primary"
+        ]
+      },
+      "props": [
+        {
+          "name": "size",
+          "type": "\"xs\" | \"sm\" | \"md\"",
+          "default": "\"md\"",
+          "description": "Ring size. xs=12px, sm=16px, md=24px."
+        },
+        {
+          "name": "tone",
+          "type": "\"default\" | \"primary\"",
+          "default": "\"default\"",
+          "description": "Color treatment for the leading edge. default=text-tertiary, primary=primary brand token."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "Accessible label. When provided, renders role=\"status\" with visually-hidden text. When omitted, aria-hidden=\"true\" (decorative)."
+        }
+      ],
+      "dependencies": [
+        "class-variance-authority",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--motion-duration-1500",
+        "--motion-easing-linear",
+        "--primary",
+        "--radius-full",
+        "--spinner-edge-color",
+        "--spinner-track-color",
+        "--stroke-width-medium",
+        "--stroke-width-regular",
+        "--stroke-width-thin",
+        "--text-tertiary"
+      ],
+      "example": "<Spinner />\n<Spinner size=\"xs\" tone=\"primary\" />\n<Spinner size=\"sm\" label=\"Loading results…\" />\n"
+    },
     "stack": {
       "category": "layout",
       "description": "Vertical flex container with token-driven gap, alignment, and `as` polymorphism.",
@@ -6930,7 +7805,7 @@
     },
     "stepper": {
       "category": "navigation",
-      "description": "A multi-step progress indicator with horizontal and vertical orientations and auto-derived step status.",
+      "description": "A multi-step progress indicator with horizontal and vertical orientations, auto-derived step status, and a locked status for non-interactive steps.",
       "when_to_use": [
         "Multi-step forms or wizards showing progress",
         "Onboarding flows with sequential steps",
@@ -6943,6 +7818,18 @@
         "Timelines of past events (use Timeline)",
         "Pagination through pages of content (use Pagination)"
       ],
+      "variants": [
+        {
+          "name": "status",
+          "values": [
+            "complete",
+            "active",
+            "upcoming",
+            "locked"
+          ],
+          "description": "Per-item status override. \"complete\", \"active\", and \"upcoming\" can be auto-derived from activeStep; \"locked\" must always be set explicitly and is never auto-derived. A locked item renders a lock glyph in its trigger circle and its trigger is non-interactive (aria-disabled, removed from tab order).\n"
+        }
+      ],
       "props": [
         {
           "name": "activeStep",
@@ -6963,15 +7850,15 @@
         },
         {
           "name": "StepperItem",
-          "description": "Container for a single step with auto-derived status from context."
+          "description": "Container for a single step with auto-derived status from context. Pass status=\"locked\" to override."
         },
         {
           "name": "StepperTrigger",
-          "description": "Clickable step indicator circle with status-based styling and check icon."
+          "description": "Clickable step indicator circle with status-based styling; check icon for complete, lock glyph for locked."
         },
         {
           "name": "StepperTitle",
-          "description": "Step label text."
+          "description": "Step label text. Rendered in secondary color when the parent item is locked."
         },
         {
           "name": "StepperDescription",
@@ -6994,12 +7881,14 @@
         "--font-size-sm",
         "--font-size-xs",
         "--font-weight-medium",
+        "--font-weight-normal",
         "--interactive-primary-bg",
         "--interactive-primary-text",
         "--line-height-normal",
         "--line-height-snug",
         "--motion-duration-200",
         "--motion-easing-default",
+        "--opacity-60",
         "--primary",
         "--radius-full",
         "--spacing-1",
@@ -7012,6 +7901,97 @@
       ],
       "example": "<Stepper activeStep={1}>\n  <StepperItem step={0}>\n    <StepperTrigger step={0} />\n    <StepperTitle>Account</StepperTitle>\n  </StepperItem>\n  <StepperSeparator complete />\n  <StepperItem step={1}>\n    <StepperTrigger step={1} />\n    <StepperTitle>Profile</StepperTitle>\n  </StepperItem>\n  <StepperSeparator />\n  <StepperItem step={2}>\n    <StepperTrigger step={2} />\n    <StepperTitle>Review</StepperTitle>\n  </StepperItem>\n</Stepper>\n"
     },
+    "structured-prompt": {
+      "category": "form",
+      "description": "Inline \"mad-lib\" fill-in-the-blank card for structured elicitation flows. A card with an eyebrow header, flowing prose at tall line-height, and inline slot chips (filled or empty) embedded in the prose, plus a hint footer.",
+      "when_to_use": [
+        "Guiding users through structured sentence completion (e.g. \"For [audience], we are the only [category] that [differentiator]\")",
+        "Brand elicitation or onliness-statement workflows where each bracket is a fillable slot",
+        "AI-assisted prompt templates where the model pre-fills slots and the user confirms or edits them",
+        "Any pattern that mixes fixed prose with discrete editable inputs inline in a sentence"
+      ],
+      "when_not_to_use": [
+        "Free-form text entry where sentence structure is not fixed (use Textarea or Input)",
+        "Long multi-field forms (use Field + Fieldset)",
+        "Structured data entry with labels and descriptions (use KeyValueList or a form layout)"
+      ],
+      "variants": {
+        "slot_state": [
+          "filled",
+          "empty"
+        ]
+      },
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional CSS classes for the root card element."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "description": "(StructuredPromptHeader) Phosphor icon rendered before the eyebrow label."
+        },
+        {
+          "name": "filled",
+          "type": "boolean",
+          "default": "false",
+          "description": "(StructuredPromptSlot) When true, renders the primary-soft filled chip. When false, renders the dashed empty chip."
+        },
+        {
+          "name": "onClick",
+          "type": "() => void",
+          "description": "(StructuredPromptSlot) When provided, the slot renders as a focusable <button>. Without onClick it renders as a <span>."
+        }
+      ],
+      "sub_components": [
+        {
+          "name": "StructuredPromptHeader",
+          "description": "Eyebrow header bar with optional Phosphor icon and uppercase label. Renders a hairline bottom border separating it from the body."
+        },
+        {
+          "name": "StructuredPromptBody",
+          "description": "Prose container at tall line-height (2.05) so inline slot chips breathe within the sentence flow."
+        },
+        {
+          "name": "StructuredPromptSlot",
+          "description": "Inline chip embedded in prose. filled=true renders a primary-soft chip; false/absent renders a dashed empty chip. Renders a <button> when onClick is provided (interactive), otherwise a <span> (display-only)."
+        },
+        {
+          "name": "StructuredPromptHint",
+          "description": "Footer hint text at small tertiary size, rendered below the body."
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-focus",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-weight-medium",
+        "--font-weight-semibold",
+        "--hairline",
+        "--radius-md",
+        "--radius-xl",
+        "--shadow-sm",
+        "--spacing-0-5",
+        "--spacing-2",
+        "--spacing-2-5",
+        "--spacing-3",
+        "--spacing-3-5",
+        "--stroke-width-thin",
+        "--surface-accent-default",
+        "--surface-accent-subtle",
+        "--surface-card",
+        "--surface-subtle",
+        "--text-link",
+        "--text-primary",
+        "--text-tertiary"
+      ],
+      "example": "<StructuredPrompt>\n  <StructuredPromptHeader icon={<ListBullets weight=\"stroke\" />}>\n    ONLINESS · THE SPEARHEAD\n  </StructuredPromptHeader>\n  <StructuredPromptBody>\n    For <StructuredPromptSlot filled>design-led product teams</StructuredPromptSlot>,\n    Visor is the only <StructuredPromptSlot filled>component system</StructuredPromptSlot>\n    that <StructuredPromptSlot>derives every surface from one brand record</StructuredPromptSlot>.\n  </StructuredPromptBody>\n  <StructuredPromptHint>Click any slot to edit</StructuredPromptHint>\n</StructuredPrompt>\n"
+    },
     "surface-row": {
       "category": "specimen",
       "description": "Surface background variant display showing a surface token with its name and token reference.",
@@ -7055,6 +8035,57 @@
       ],
       "example": "<SurfaceRow token=\"--surface-card\" name=\"Card\" />\n<SurfaceRow token=\"--surface-overlay\" name=\"Overlay\" lightText />\n"
     },
+    "surface-scale-stack": {
+      "category": "specimen",
+      "description": "Multi-tier stacked surface aggregator block. Composes ordered SurfaceRow specimens into a rounded vertical stack with an optional use-note column.",
+      "when_to_use": [
+        "Documenting a full surface scale (e.g. page → screen → panel → panel-2 → panel-3)",
+        "Design system foundation pages showing tier hierarchy",
+        "Theme validation for a complete surface token set"
+      ],
+      "when_not_to_use": [
+        "Displaying a single surface tier (use SurfaceRow)",
+        "Actual page or card surfaces (use the surface tokens directly)"
+      ],
+      "props": [
+        {
+          "name": "surfaces",
+          "type": "SurfaceScaleItem[]",
+          "description": "Ordered array of surface tiers — each with token, name, and optional note"
+        },
+        {
+          "name": "surfaces[].token",
+          "type": "string",
+          "description": "CSS custom property for the surface background (e.g. \"--surface-page\")"
+        },
+        {
+          "name": "surfaces[].name",
+          "type": "string",
+          "description": "Display name for the surface tier"
+        },
+        {
+          "name": "surfaces[].note",
+          "type": "string",
+          "description": "Optional use-note shown in the right-aligned column"
+        },
+        {
+          "name": "surfaces[].lightText",
+          "type": "boolean",
+          "default": "false",
+          "description": "When true, text renders in light colors for dark surfaces"
+        }
+      ],
+      "dependencies": [
+        "surface-row"
+      ],
+      "tokens_used": [
+        "--font-size-xs",
+        "--radius-md",
+        "--spacing-4",
+        "--text-tertiary"
+      ],
+      "example": "<SurfaceScaleStack\n  surfaces={[\n    { token: \"--surface-page\", name: \"Page\", note: \"Root canvas\" },\n    { token: \"--surface-screen\", name: \"Screen\", note: \"Full-bleed section\" },\n    { token: \"--surface-card\", name: \"Card\", note: \"Primary content card\" },\n    { token: \"--surface-raised\", name: \"Raised\", note: \"Elevated card\" },\n    { token: \"--surface-overlay\", name: \"Overlay\", note: \"Modal / sheet\", lightText: true },\n  ]}\n/>\n"
+    },
     "switch": {
       "category": "form",
       "description": "An accessible toggle switch component built on Radix UI Switch.",
@@ -7175,15 +8206,22 @@
       "dependencies": [],
       "tokens_used": [
         "--border-default",
+        "--dt-container-radius",
+        "--dt-container-shadow",
+        "--dt-header-bg",
+        "--dt-row-bg",
         "--font-size-sm",
         "--font-weight-medium",
+        "--hairline",
         "--motion-duration-150",
         "--motion-easing-default",
         "--radius-lg",
         "--shadow-sm",
         "--spacing-3",
         "--spacing-4",
+        "--surface-card",
         "--surface-muted",
+        "--surface-page",
         "--text-primary",
         "--text-secondary"
       ],
@@ -7272,18 +8310,20 @@
         "--font-size-sm",
         "--font-size-xs",
         "--font-weight-medium",
+        "--hairline",
         "--motion-duration-150",
         "--motion-duration-normal",
         "--motion-easing-default",
+        "--primary",
         "--radius-full",
         "--radius-md",
         "--shadow-sm",
         "--spacing-1",
         "--spacing-2",
+        "--spacing-3",
         "--surface-accent-subtle",
         "--surface-muted",
         "--surface-page",
-        "--tabs-indicator-color",
         "--text-link",
         "--text-primary",
         "--text-secondary"
@@ -7893,6 +8933,37 @@
       ],
       "example": "<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <Button variant=\"ghost\" size=\"sm\"><TrashIcon /></Button>\n    </TooltipTrigger>\n    <TooltipContent>Delete item</TooltipContent>\n  </Tooltip>\n</TooltipProvider>\n"
     },
+    "type-scale-stack": {
+      "category": "specimen",
+      "description": "Discrete N-tier type-scale aggregator that wraps an ordered list of TypeSpecimen rows in a rounded, screen-tier, borderless vertical stack.",
+      "when_to_use": [
+        "Documenting a discrete N-tier type scale on a foundation or design system page",
+        "Displaying a full project type scale (e.g. 11-tier V7 scale) as a single visual block",
+        "Theme validation for the complete set of font size tokens at once"
+      ],
+      "when_not_to_use": [
+        "Rendering actual page content (use Heading or Text)",
+        "Continuous or modular-scale rendering",
+        "Single type scale rows (use TypeSpecimen directly)"
+      ],
+      "props": [
+        {
+          "name": "steps",
+          "type": "TypeScaleStepProps[]",
+          "description": "Ordered array of type scale steps — each with token, label, sizePx, and sample"
+        }
+      ],
+      "dependencies": [
+        "type-specimen"
+      ],
+      "tokens_used": [
+        "--radius-lg",
+        "--spacing-3",
+        "--spacing-4",
+        "--surface-screen"
+      ],
+      "example": "<TypeScaleStack steps={[\n  { token: \"--font-size-xs\", label: \"xs\", sizePx: 12, sample: \"Caption / helper text\" },\n  { token: \"--font-size-sm\", label: \"sm\", sizePx: 14, sample: \"Small body text\" },\n  { token: \"--font-size-md\", label: \"md\", sizePx: 16, sample: \"Base body text\" },\n  { token: \"--font-size-lg\", label: \"lg\", sizePx: 18, sample: \"Large body text\" },\n  { token: \"--font-size-xl\", label: \"xl\", sizePx: 20, sample: \"Subsection heading\" },\n]} />\n"
+    },
     "type-specimen": {
       "category": "specimen",
       "description": "A single typography row displaying sample text at a given font-size token with weight and size metadata.",
@@ -8440,100 +9511,329 @@
         "--text-on-dark",
         "--text-primary"
       ],
-      "example": "<Slide id=\"s-intro\" theme=\"dark\" hero heroImage=\"/hero.jpg\">\n  <SlideHeader subtitle=\"Welcome\" title=\"Our Vision\" />\n</Slide>\n"
+      "example": "<Slide id=\"s-intro\" theme=\"dark\" hero heroImage=\"/hero.jpg\">\n  <SlideHeader subtitle=\"Welcome\" title=\"Our Vision\" />\n</Slide>\n"
+    },
+    "deck-slide-header": {
+      "category": "deck",
+      "description": "Slide section header with animated subtitle, title, and optional description. Used at the top of content slides to establish section context.",
+      "when_to_use": [
+        "Opening content slides where a section title and subtitle are needed",
+        "Any slide that requires a consistent heading hierarchy with staggered entrance animations"
+      ],
+      "when_not_to_use": [
+        "Hero slides (use HeroSlide which has its own heading layout)",
+        "Slides where the heading needs custom layout or typography"
+      ],
+      "props": [
+        {
+          "name": "subtitle",
+          "type": "string",
+          "description": "Section label displayed above the title"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "description": "Main heading text"
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "description": "Optional paragraph below the title"
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [],
+      "example": "<SlideHeader\n  subtitle=\"Phase 1\"\n  title=\"Discovery & Research\"\n  description=\"Understanding the problem space before committing to solutions.\"\n/>\n"
+    },
+    "slide-theme-context": {
+      "category": "deck",
+      "description": "React context provider that propagates the active slide theme (\"light\" | \"dark\") to child components within a slide.",
+      "when_to_use": [
+        "Building slide sub-components that need to adapt styling to the parent slide's theme",
+        "Any component inside a <Slide> that calls useSlideTheme()"
+      ],
+      "when_not_to_use": [
+        "Outside of a <Slide> wrapper (returns \"light\" as default, not an error, but context is meaningless)",
+        "Choosing between light/dark themes — that is controlled by the slide's theme prop"
+      ],
+      "props": [
+        {
+          "name": "theme",
+          "type": "'light' | 'dark'",
+          "description": "Theme variant propagated to all slide descendants"
+        }
+      ],
+      "dependencies": [
+        "react",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [],
+      "example": "// Consumed via useSlideTheme() inside any child of <Slide>\nfunction SlideCard() {\n  const theme = useSlideTheme()\n  return <div data-theme={theme}>...</div>\n}\n"
+    },
+    "deck-toc-slide": {
+      "category": "deck",
+      "description": "Auto-generated table of contents slide with clickable section + item links for deep navigation. Rendered automatically by DeckRenderer when showTOC is true.",
+      "when_to_use": [
+        "Decks with 3+ sections where an upfront overview helps orientation",
+        "Any deck where users need to jump non-linearly to specific slides"
+      ],
+      "when_not_to_use": [
+        "Short decks (under 6 slides) where a TOC adds noise",
+        "Decks built with DeckRenderer (showTOC=true handles this automatically)"
+      ],
+      "props": [
+        {
+          "name": "sections",
+          "type": "TOCSection[]",
+          "description": "Array of { section: string; items: { id: string; title: string }[] }"
+        },
+        {
+          "name": "backgroundImage",
+          "type": "string",
+          "description": "Optional background image (activates dark theme on the slide)"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "default": "s-toc"
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [],
+      "example": "<TOCSlide\n  sections={[\n    {\n      section: \"Strategy\",\n      items: [\n        { id: \"s-vision\", title: \"Vision\" },\n        { id: \"s-goals\",  title: \"Goals\" },\n      ],\n    },\n  ]}\n/>\n"
+    },
+    "ambient-glow": {
+      "category": "visual-elements",
+      "description": "Absolutely-positioned drifting radial glow with live CSS-var-driven color. Decorative only — aria-hidden, pointer-events-none. Ported from the Blacklight marketing depth system (BL-326).",
+      "when_to_use": [
+        "Atmospheric background lighting behind hero sections or focal objects",
+        "Live color-reactive glows that track a dynamically rewritten CSS custom property (e.g. hero crossfade accent)",
+        "Marketing and landing pages that need depth via subtle light fields",
+        "Pro/premium surface accents (gold variant)"
+      ],
+      "when_not_to_use": [
+        "Functional UI elements — AmbientGlow is purely decorative",
+        "When the user prefers reduced motion and you need a visible element (the glow becomes static but stays visible)",
+        {
+          "Inside overflow": "hidden containers without adjusting inset values"
+        }
+      ],
+      "props": [
+        {
+          "name": "variant",
+          "type": "'keyed' | 'gold'",
+          "default": "keyed",
+          "description": "keyed — color-mix from --glow-color (live-rewritable); gold — static warm gold at 7% opacity"
+        },
+        {
+          "name": "glowColor",
+          "type": "string",
+          "description": "Static glow color override — sets --glow-color as an inline custom property. For live runtime rewrites use a parent-element CSS variable instead."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional class names for positioning and sizing (position/inset/width/height)."
+        },
+        {
+          "name": "style",
+          "type": "React.CSSProperties",
+          "description": "Inline styles, typically inset/width/height. --glow-color can also be set here."
+        }
+      ],
+      "dependencies": [
+        "class-variance-authority",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--accent",
+        "--glow-color",
+        "--interactive-primary-bg"
+      ],
+      "example": "<div style={{ position: 'relative', width: 400, height: 300 }}>\n  <AmbientGlow style={{ inset: 0 }} />\n  <p style={{ position: 'relative' }}>Content above the glow</p>\n</div>\n"
+    },
+    "browser-frame": {
+      "category": "visual-elements",
+      "description": "Browser-chrome mockup frame with traffic-light dots and a URL pill. Wraps arbitrary content for marketing and landing surfaces. Elevation-free — compose with .lit / .lit-soft / .lit-strong for depth.",
+      "when_to_use": [
+        "Showing a product screenshot or live embed inside a browser mockup on a marketing or landing page",
+        "EPK-style artist/product demos where the \"in-browser\" framing provides context",
+        "Any dark surface that needs a browser-chrome visual metaphor without hand-rolling the chrome bar"
+      ],
+      "when_not_to_use": [
+        "Real browser chrome or app shells — this is a decorative mockup, not a functional navigation component",
+        "Light-mode surfaces (the default deep-dark background will clash; override --browser-frame-bg to adapt)",
+        "Nested inside another BrowserFrame (a browser inside a browser is confusing)"
+      ],
+      "props": [
+        {
+          "name": "url",
+          "type": "string",
+          "required": true,
+          "description": "Display URL shown in the chrome bar, e.g. \"sharlese.epk.pro\"."
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "required": false,
+          "description": "Optional real link target. When set, the URL pill becomes a clickable <a> with a focus ring."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "Content rendered inside the frame below the chrome bar."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional class name applied to the outer wrapper (e.g. to set --lit-color or --browser-frame-focus-color)."
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core",
+        "@phosphor-icons/react"
+      ],
+      "tokens_used": [
+        "--accent",
+        "--browser-frame-bg",
+        "--browser-frame-focus-color",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-weight-light",
+        "--hairline",
+        "--hairline-strong",
+        "--motion-duration-fast",
+        "--motion-easing-standard",
+        "--opacity-10",
+        "--opacity-12",
+        "--opacity-5",
+        "--opacity-60",
+        "--opacity-80",
+        "--radius-md",
+        "--radius-xl",
+        "--spacing-1",
+        "--spacing-10",
+        "--spacing-3",
+        "--spacing-3_5",
+        "--stroke-width-thin"
+      ],
+      "example": "{/* Static display-only */}\n<BrowserFrame url=\"myproduct.example.com\">\n  <img src=\"/screenshot.png\" alt=\"Product screenshot\" />\n</BrowserFrame>\n\n{/* Clickable URL pill */}\n<BrowserFrame url=\"sharlese.epk.pro\" href=\"https://sharlese.epk.pro\">\n  <div style={{ padding: '24px' }}>Artist EPK content</div>\n</BrowserFrame>\n\n{/* With lit elevation from visor-core/utilities */}\n<BrowserFrame\n  url=\"sharlese.epk.pro\"\n  href=\"https://sharlese.epk.pro\"\n  className=\"lit\"\n  style={{ '--browser-frame-focus-color': '#c8ff00' }}\n>\n  <div style={{ padding: '24px' }}>Artist EPK content</div>\n</BrowserFrame>\n"
     },
-    "deck-slide-header": {
-      "category": "deck",
-      "description": "Slide section header with animated subtitle, title, and optional description. Used at the top of content slides to establish section context.",
+    "card-lift": {
+      "category": "visual-elements",
+      "description": "CSS-only hover-lift wrapper — translateY(-4px) + deep shadow + live-keyed color-mix halo on hover. Port of .bl-card-lift from blacklight-website (BL-326).",
       "when_to_use": [
-        "Opening content slides where a section title and subtitle are needed",
-        "Any slide that requires a consistent heading hierarchy with staggered entrance animations"
+        "Adding hover-lift affordance to cards, tiles, or any clickable surface",
+        "Marketing pages and showcase walls where surfaces should \"catch the light\" on hover",
+        "Keying the halo color to a live CSS variable (e.g. artist accent color) that changes at runtime"
       ],
       "when_not_to_use": [
-        "Hero slides (use HeroSlide which has its own heading layout)",
-        "Slides where the heading needs custom layout or typography"
+        "Standard admin/app UI where motion-heavy hover effects are distracting",
+        "When you need the entire hover interaction (border, background, text) — CardLift is a motion-only layer",
+        "Contexts where `prefers-reduced-motion` users will miss the affordance (pair with a visible focus style on the inner element)"
       ],
       "props": [
         {
-          "name": "subtitle",
+          "name": "liftColor",
           "type": "string",
-          "description": "Section label displayed above the title"
+          "default": "var(--accent, #6366f1)",
+          "description": "CSS color for the halo on hover. Accepts any CSS color or a `var()` reference. Written to `--lift-color` inline; the halo tracks live rewrites at paint time.\n"
         },
         {
-          "name": "title",
-          "type": "string",
-          "description": "Main heading text"
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to wrap (typically a Card or BentoGrid tile)."
         },
         {
-          "name": "description",
+          "name": "className",
           "type": "string",
-          "description": "Optional paragraph below the title"
+          "description": "Additional CSS class names to merge onto the wrapper."
+        },
+        {
+          "name": "style",
+          "type": "React.CSSProperties",
+          "description": "Inline styles merged onto the wrapper (after `--lift-color`)."
         }
       ],
       "dependencies": [
         "@loworbitstudio/visor-core"
       ],
-      "tokens_used": [],
-      "example": "<SlideHeader\n  subtitle=\"Phase 1\"\n  title=\"Discovery & Research\"\n  description=\"Understanding the problem space before committing to solutions.\"\n/>\n"
+      "tokens_used": [
+        "--accent",
+        "--lift-color",
+        "--shadow-"
+      ],
+      "example": "<CardLift liftColor=\"var(--accent)\">\n  <Card>\n    <CardContent>Hover me</CardContent>\n  </Card>\n</CardLift>\n"
     },
-    "slide-theme-context": {
-      "category": "deck",
-      "description": "React context provider that propagates the active slide theme (\"light\" | \"dark\") to child components within a slide.",
+    "grain-overlay": {
+      "category": "visual-elements",
+      "description": "Fixed, full-viewport film-grain noise layer. Ported from Blacklight's bl-grain depth-system primitive (BL-326). Decorative only — pointer-events-none, aria-hidden.",
       "when_to_use": [
-        "Building slide sub-components that need to adapt styling to the parent slide's theme",
-        "Any component inside a <Slide> that calls useSlideTheme()"
+        "Dark marketing surfaces where large near-black fills read as flat and digital",
+        "Hero sections or landing pages with a cinema/atmospheric aesthetic",
+        "Any surface using the Blacklight or similar dark depth-system look"
       ],
       "when_not_to_use": [
-        "Outside of a <Slide> wrapper (returns \"light\" as default, not an error, but context is meaningless)",
-        "Choosing between light/dark themes — that is controlled by the slide's theme prop"
+        "Light-mode surfaces (grain is near-invisible and adds nothing)",
+        "Pages where every byte of bundle size counts (the SVG data URI is ~250 bytes — fine in practice)",
+        "Animated grain effects (this is intentionally static; animated grain repaints the full viewport every frame)"
       ],
       "props": [
         {
-          "name": "theme",
-          "type": "'light' | 'dark'",
-          "description": "Theme variant propagated to all slide descendants"
+          "name": "opacity",
+          "type": "number",
+          "default": "0.035",
+          "description": "Grain opacity (0–1). Default matches the Blacklight bl-grain reference."
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "default": "30",
+          "description": "z-index of the overlay layer. Default 30 sits above page sections but below modals (z-100)."
         }
       ],
       "dependencies": [
-        "react",
         "@loworbitstudio/visor-core"
       ],
       "tokens_used": [],
-      "example": "// Consumed via useSlideTheme() inside any child of <Slide>\nfunction SlideCard() {\n  const theme = useSlideTheme()\n  return <div data-theme={theme}>...</div>\n}\n"
+      "example": "{/* Drop at the top of your dark page layout — renders nothing visible on its own */}\n<GrainOverlay />\n\n{/* Custom opacity for a more prominent grain */}\n<GrainOverlay opacity={0.06} />\n"
     },
-    "deck-toc-slide": {
-      "category": "deck",
-      "description": "Auto-generated table of contents slide with clickable section + item links for deep navigation. Rendered automatically by DeckRenderer when showTOC is true.",
+    "hero-glow": {
+      "category": "visual-elements",
+      "description": "Breathing radial glow band for hero media. Color is driven by a live CSS custom property (--glow-color) so the caller can rewrite it every rAF frame without triggering a React re-render.",
       "when_to_use": [
-        "Decks with 3+ sections where an upfront overview helps orientation",
-        "Any deck where users need to jump non-linearly to specific slides"
+        "Behind hero images or carousels to cast a color-keyed ambient glow",
+        "When the glow color must track a live value (e.g. current artist color, active palette)",
+        "Marketing hero sections that need atmospheric depth without a heavy shader"
       ],
       "when_not_to_use": [
-        "Short decks (under 6 slides) where a TOC adds noise",
-        "Decks built with DeckRenderer (showTOC=true handles this automatically)"
-      ],
-      "props": [
-        {
-          "name": "sections",
-          "type": "TOCSection[]",
-          "description": "Array of { section: string; items: { id: string; title: string }[] }"
-        },
+        "As a layout element — HeroGlow is purely decorative (aria-hidden, pointer-events none)",
         {
-          "name": "backgroundImage",
-          "type": "string",
-          "description": "Optional background image (activates dark theme on the slide)"
+          "When the parent is not position": "relative (the negative inset will be clipped or invisible)"
         },
+        "When a static, non-breathing glow is preferred (use a box-shadow or plain gradient instead)"
+      ],
+      "props": [
         {
-          "name": "id",
+          "name": "glowColor",
           "type": "string",
-          "default": "s-toc"
+          "description": "CSS color value applied as --glow-color. Accepts any CSS color (hex, oklch, rgb, custom property reference). When omitted, --glow-color must be set by an ancestor for the glow to appear; the fallback is transparent.\n",
+          "default": "undefined"
         }
       ],
       "dependencies": [
         "@loworbitstudio/visor-core"
       ],
-      "tokens_used": [],
-      "example": "<TOCSlide\n  sections={[\n    {\n      section: \"Strategy\",\n      items: [\n        { id: \"s-vision\", title: \"Vision\" },\n        { id: \"s-goals\",  title: \"Goals\" },\n      ],\n    },\n  ]}\n/>\n"
+      "tokens_used": [
+        "--glow-color"
+      ],
+      "example": "{/* Static color */}\n<div style={{ position: 'relative', height: 400 }}>\n  <HeroGlow glowColor=\"oklch(70% 0.3 145)\" />\n  <img src=\"hero.jpg\" alt=\"Hero\" />\n</div>\n\n{/* Live rAF-driven color (no React re-render) */}\n<div\n  ref={(el) => {\n    if (!el) return;\n    const glow = el.querySelector('[data-slot=\"hero-glow\"]');\n    let frame: number;\n    const tick = () => {\n      glow?.style.setProperty('--glow-color', computeArtistColor());\n      frame = requestAnimationFrame(tick);\n    };\n    frame = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(frame);\n  }}\n  style={{ position: 'relative' }}\n>\n  <HeroGlow />\n  <img src=\"hero.jpg\" alt=\"Hero\" />\n</div>\n"
     },
     "sphere": {
       "category": "visual-elements",
@@ -8625,6 +9925,50 @@
       ],
       "tokens_used": [],
       "example": "<Sphere\n  mode=\"sphere\"\n  colorScheme=\"solar\"\n  speed={1}\n  style={{ width: \"100%\", height: \"400px\" }}\n/>\n"
+    },
+    "vignette": {
+      "category": "visual-elements",
+      "description": "Fixed, full-viewport radial vignette layer. Decorative atmosphere atom — pointer-events-none, aria-hidden, static. Ported from Blacklight bl-vignette (BL-326).",
+      "when_to_use": [
+        "Adding cinematic depth to dark-background hero sections",
+        "Creating stage-lighting atmosphere on full-viewport canvases",
+        "Softening hard edges on near-black page backgrounds"
+      ],
+      "when_not_to_use": [
+        "Light-mode pages (the dark falloff color will be jarring)",
+        "Content-heavy pages where the dark vignette obscures readable text at the edges",
+        "When you need a scrolling (non-fixed) overlay — Vignette is always fixed"
+      ],
+      "props": [
+        {
+          "name": "zIndex",
+          "type": "number",
+          "default": 20,
+          "description": "CSS z-index for the vignette layer"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional class names"
+        },
+        {
+          "name": "style",
+          "type": "React.CSSProperties",
+          "description": "Inline styles; use CSS custom properties to tune the gradient: --vignette-transparent-stop (52%), --vignette-color-stop (100%), --vignette-color (rgba(0,0,6,0.5)), --vignette-size-x (120%), --vignette-size-y (90%), --vignette-position (50% 38%)\n"
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--vignette-color",
+        "--vignette-color-stop",
+        "--vignette-position",
+        "--vignette-size-x",
+        "--vignette-size-y",
+        "--vignette-transparent-stop"
+      ],
+      "example": "<div style={{ position: 'relative', height: '400px', background: '#020214' }}>\n  <Vignette />\n</div>\n"
     }
   },
   "blocks": {
@@ -9062,7 +10406,7 @@
     },
     "right-rail-list": {
       "category": "data-display",
-      "description": "Compact vertical list block tuned for admin dashboard side rails. Each row pairs an optional leading slot (short label, avatar, badge, status dot), a primary label (typically a link), and an optional trailing meta value (count, value, tone-tinted status word). Trailing accepts default / mint / muted / warn tones that bind to the shared semantic text tokens. Supports compact density and ul / ol / div root element variants.",
+      "description": "Compact vertical list block tuned for admin dashboard side rails. Each row pairs an optional leading slot (short label, avatar, badge, status dot), a primary label (typically a link), and an optional trailing meta value (count, value, tone-tinted status word). Trailing accepts default / mint / muted / warn tones that bind to the shared semantic text tokens. Supports compact density, xs row text size for dense rails, and ul / ol / div root element variants.",
       "components_used": [],
       "when_to_use": [
         "Side-rail summary panels in dashboards (this-week digests, top-N rankings, status callouts)",
@@ -9605,6 +10949,10 @@
         "Sign-in and sign-up pages",
         "Forgot password and reset password flows",
         "Invitation acceptance screens"
+      ],
+      "when_not_to_use": [
+        "Collecting setup preferences after the user is already signed in — use onboarding-flow",
+        "A standalone validated form that is not authentication — use form-with-validation"
       ]
     },
     "card-grid": {
@@ -9621,30 +10969,19 @@
         "Displaying a collection of items as visual tiles (projects, products, team members)",
         "When a table layout is too data-dense and card previews are more scannable",
         "Catalog or gallery pages with paginated content"
-      ]
-    },
-    "crud-table": {
-      "description": "Data table with row actions, confirmation dialog, and pagination for managing collections of records.",
-      "components_used": [
-        "table",
-        "button",
-        "dropdown-menu",
-        "dialog",
-        "alert",
-        "pagination",
-        "badge"
       ],
-      "when_to_use": [
-        "Admin pages listing and managing resources (users, orders, products)",
-        "Any collection view with create, read, update, delete operations",
-        "Data tables needing row-level actions and bulk operations"
+      "when_not_to_use": [
+        "Results driven by a search query or type-ahead — use search-results",
+        "Tabular records needing sorting and filtering rather than cards — use data-table-with-filters"
       ]
     },
     "dashboard-layout": {
-      "description": "App shell with collapsible sidebar navigation, top navbar, and content area with cards and tabs.",
+      "description": "Responsive app shell — a persistent sidebar on desktop that collapses to a Sheet drawer on mobile — with a top navbar and a content area of cards and tabs.",
       "components_used": [
         "sidebar",
+        "sheet",
         "navbar",
+        "button",
         "card",
         "tabs",
         "separator",
@@ -9652,12 +10989,17 @@
       ],
       "when_to_use": [
         "Admin dashboards and internal tools",
-        "Multi-section apps with persistent navigation",
-        "Content-heavy layouts needing sidebar + main area structure"
+        "Multi-section apps with persistent navigation that must also work on mobile",
+        "Content-heavy layouts needing sidebar + main area structure",
+        "Any app shell where the desktop sidebar should collapse to a drawer without duplicating nav markup"
+      ],
+      "when_not_to_use": [
+        "A single configuration screen rather than the whole app shell — use settings-page",
+        "Just the tabular data inside the shell — use data-table-with-filters or data-table-row-actions"
       ]
     },
     "data-table-row-actions": {
-      "description": "A data table with per-row action menus, bulk selection with a bulk action bar, confirmation dialogs, and toast feedback for destructive operations.",
+      "description": "A data table for managing collections of records (CRUD) — per-row action menus, bulk selection with a bulk action bar, confirmation dialogs, and toast feedback for destructive operations.",
       "components_used": [
         "data-table",
         "dropdown-menu",
@@ -9667,9 +11009,13 @@
         "bulk-action-bar"
       ],
       "when_to_use": [
+        "Admin pages listing and managing resources (users, orders, products)",
         "Admin lists where rows have contextual actions (edit, archive, delete)",
         "When supporting both single-row and bulk operations on the same table",
-        "Any CRUD interface where destructive actions require confirmation"
+        "Any CRUD interface (create, read, update, delete) where destructive actions require confirmation"
+      ],
+      "when_not_to_use": [
+        "Read-heavy lists whose main need is search, filtering, and sorting rather than row mutations — use data-table-with-filters"
       ]
     },
     "data-table-with-filters": {
@@ -9687,21 +11033,9 @@
         "Data-heavy pages where users need to find specific records",
         "Admin dashboards with sortable, filterable lists",
         "Search result pages with faceted filtering"
-      ]
-    },
-    "empty-state": {
-      "description": "Placeholder shown when a page, list, or search has no content to display.",
-      "components_used": [
-        "card",
-        "button",
-        "heading",
-        "text"
       ],
-      "when_to_use": [
-        "Empty lists or tables (no data yet)",
-        "Search results returning zero matches",
-        "First-time user onboarding (no content created yet)",
-        "Error states where content failed to load"
+      "when_not_to_use": [
+        "Per-row action menus, bulk selection, and confirm-on-delete on the table — use data-table-row-actions"
       ]
     },
     "form-with-validation": {
@@ -9718,6 +11052,10 @@
         "Any form collecting user input (settings, profile, onboarding)",
         "Forms needing inline validation feedback",
         "Multi-field forms with consistent spacing and error display"
+      ],
+      "when_not_to_use": [
+        "A form presented inside a modal or dialog overlay — use modal-form",
+        "A multi-step guided flow rather than a single form — use onboarding-flow"
       ]
     },
     "modal-form": {
@@ -9735,6 +11073,10 @@
         "Creating or editing a record without leaving the current page",
         "Collecting a small set of inputs (fewer than 8 fields)",
         "When the action is contextual to the parent list or table"
+      ],
+      "when_not_to_use": [
+        "A full-page or inline form that is not in an overlay — use form-with-validation",
+        "A multi-step guided flow — use onboarding-flow"
       ]
     },
     "notification-center": {
@@ -9750,10 +11092,14 @@
         "Apps with persistent in-app notifications or activity alerts",
         "When users need to review, dismiss, or act on multiple notifications at once",
         "Combining real-time toast feedback with a browsable notification history"
+      ],
+      "when_not_to_use": [
+        "A single transient confirmation after one action — use a bare Toast, not the full center",
+        "A command palette for navigation or search — use search-results"
       ]
     },
     "onboarding-flow": {
-      "description": "A step-by-step welcome flow that collects user preferences and setup choices using progress tracking, cards, and inline forms with checkbox selections.",
+      "description": "A multi-step guided flow — first-run onboarding, setup wizards, or checkout — that breaks a long or gated process into validated steps with progress tracking, cards, and inline forms.",
       "components_used": [
         "stepper",
         "progress",
@@ -9767,23 +11113,14 @@
       "when_to_use": [
         "First-run experiences after account creation",
         "Feature setup flows where configuration choices shape the initial workspace",
-        "Product tours that collect preferences before showing the main dashboard"
-      ]
-    },
-    "responsive-sidebar-layout": {
-      "description": "A full-app shell that renders a persistent sidebar on desktop and a Sheet-based drawer on mobile, sharing the same navigation content.",
-      "components_used": [
-        "sidebar",
-        "sheet",
-        "navbar",
-        "button",
-        "separator",
-        "scroll-area"
+        "Product tours that collect preferences before showing the main dashboard",
+        "Checkout or other multi-step sequences that stage a long process",
+        "When a single long form would overwhelm the user — break into logical steps",
+        "Flows where earlier steps gate or inform later steps"
       ],
-      "when_to_use": [
-        "Any multi-section app needing sidebar navigation that must work on mobile",
-        "When the desktop sidebar should collapse to a drawer without duplicating nav markup",
-        "Admin tools, dashboards, or SaaS apps requiring a responsive shell"
+      "when_not_to_use": [
+        "Login or signup itself — use auth-flow",
+        "A single validated form rather than a multi-step flow — use form-with-validation"
       ]
     },
     "search-results": {
@@ -9800,6 +11137,9 @@
         "Search pages where users need to filter and browse a large dataset",
         "When combining free-text search with faceted category filters",
         "Directory, catalog, or discovery interfaces with card-based result display"
+      ],
+      "when_not_to_use": [
+        "A static grid of cards not driven by a query — use card-grid"
       ]
     },
     "settings-page": {
@@ -9821,23 +11161,10 @@
         "User profile and account settings",
         "Application preferences and configuration",
         "Team or organization settings"
-      ]
-    },
-    "wizard-flow": {
-      "description": "A multi-step guided flow with per-step validation, progress tracking, and a linear navigation structure for complex data collection.",
-      "components_used": [
-        "stepper",
-        "field",
-        "input",
-        "button",
-        "alert",
-        "progress",
-        "separator"
       ],
-      "when_to_use": [
-        "Onboarding flows, setup wizards, or checkout sequences",
-        "When a single long form would overwhelm the user — break into logical steps",
-        "Flows where earlier steps gate or inform later steps"
+      "when_not_to_use": [
+        "The whole app shell and navigation chrome — use dashboard-layout",
+        "A single focused form rather than grouped settings sections — use form-with-validation"
       ]
     }
   },
@@ -9853,7 +11180,10 @@
       "opacity-bar",
       "radius-scale",
       "spacing-scale",
+      "specimen-card",
       "surface-row",
+      "surface-scale-stack",
+      "type-scale-stack",
       "type-specimen"
     ],
     "data-display": [
@@ -9866,7 +11196,9 @@
       "key-value-list",
       "marquee",
       "name-roster",
+      "segmented-progress",
       "sparkline",
+      "spinner",
       "status-dot",
       "table",
       "timeline"
@@ -9879,7 +11211,9 @@
       "data-table",
       "empty-state",
       "filter-bar",
+      "infographic-bar",
       "kbd",
+      "matrix-table",
       "score-indicator",
       "stat-card",
       "stat-hero",
@@ -9888,6 +11222,7 @@
     "feedback": [
       "alert",
       "banner",
+      "challenge-card",
       "popover",
       "progress",
       "skeleton",
@@ -9913,6 +11248,7 @@
       "pagination",
       "quick-actions",
       "section-header",
+      "section-nav",
       "stepper",
       "tabs"
     ],
@@ -9923,6 +11259,7 @@
       "chip",
       "color-picker",
       "combobox",
+      "composer",
       "date-picker",
       "date-range-picker",
       "field",
@@ -9940,6 +11277,7 @@
       "select",
       "slider",
       "slider-control",
+      "structured-prompt",
       "switch",
       "tag-input",
       "textarea",
@@ -9964,13 +11302,20 @@
       "menubar",
       "sheet"
     ],
-    "visual-elements": [
-      "sphere",
-      "station-spectrum"
-    ],
     "general": [
+      "section-intro",
       "theme-switcher"
     ],
+    "visual-elements": [
+      "ambient-glow",
+      "browser-frame",
+      "card-lift",
+      "grain-overlay",
+      "hero-glow",
+      "sphere",
+      "station-spectrum",
+      "vignette"
+    ],
     "deck": [
       "deck-card-grid",
       "deck-carousel-gallery",
@@ -9988,6 +11333,235 @@
       "slide-theme-context"
     ]
   },
+  "brand_strategy": {
+    "positioning": {
+      "onliness": "The only design system that compiles a complete brand — visual and verbal — from one portable file, for humans and agents alike.",
+      "category": "design system",
+      "differentiation": "brand strategy, visual and verbal, as derivable machine-readable data"
+    },
+    "essence": [
+      "coherent",
+      "open",
+      "yours"
+    ],
+    "personality": [
+      {
+        "trait": "precise",
+        "not": "fussy"
+      },
+      {
+        "trait": "candid",
+        "not": "cold"
+      },
+      {
+        "trait": "generous",
+        "not": "indulgent"
+      },
+      {
+        "trait": "warm",
+        "not": "saccharine"
+      }
+    ],
+    "archetype": {
+      "primary": "sage",
+      "secondary": "creator",
+      "tertiary": "everyman"
+    },
+    "pillars": [
+      {
+        "id": "coherence",
+        "statement": "Every layer derives from the one above it.",
+        "governs": {
+          "tokens": [
+            "--primary",
+            "--surface-card",
+            "--text-primary"
+          ],
+          "components": [
+            "*"
+          ]
+        },
+        "proof": [
+          "Switch theme or mode and the entire surface re-resolves — nothing is pinned to a hard-coded value.",
+          "Every component reads tokens, never literals: --primary flows to semantic, then adaptive, then the rendered pixel.",
+          "Change one .visor.yaml file and the whole system follows — the file is the single source the cascade derives from."
+        ]
+      },
+      {
+        "id": "openness",
+        "statement": "The whole system is open — readable by humans and agents, and free to take.",
+        "governs": {
+          "surfaces": [
+            "manifest",
+            "cli",
+            "component-metadata"
+          ]
+        },
+        "proof": [
+          "An agent can discover, select, and compose a component from structured data alone — the manifest, when_to_use metadata, and an agent-first CLI.",
+          "The source is open and free to take; the same file an engineer reads is the one an agent queries.",
+          "Even brand strategy ships as readable data — this record — not a locked PDF."
+        ]
+      },
+      {
+        "id": "ownership",
+        "statement": "Copy-and-own. You hold the source; there's no lock-in, ever.",
+        "governs": {
+          "components": [
+            "*"
+          ]
+        },
+        "proof": [
+          "npx visor add button copies real source into your project — yours to edit, with nothing to eject from.",
+          "Tokens still update via npm update, so you keep design consistency without surrendering control.",
+          "Copy-and-own is the starting state, not an escape hatch — there's no wrapper to fight."
+        ]
+      }
+    ],
+    "voice": {
+      "traits": [
+        {
+          "name": "plainspoken",
+          "do": "Say it in one clause. Lead with the answer.",
+          "dont": "Bury the point under qualifiers and throat-clearing.",
+          "example": "Copy-and-own is just that — the source is yours. Edit anything; there's no wrapper to fight."
+        },
+        {
+          "name": "candid",
+          "do": "Name the tradeoff and the cost before the reader hits it.",
+          "dont": "Oversell, hide the sharp edges, or hedge to sound safe.",
+          "example": "Heads up — this theme fails WCAG AA on small text. Bump the contrast a notch, or keep the warning if that's intentional."
+        },
+        {
+          "name": "generous",
+          "do": "Give the why. Show the worked example. Assume the reader will go further than you did.",
+          "dont": "Gatekeep, wave at best practices, or make them read the source to understand.",
+          "example": "Fallbacks use Gray, not Slate — so an un-themed component lands on a neutral that fits your palette instead of clashing. Small thing, but it's what keeps a theme feeling whole."
+        },
+        {
+          "name": "warm",
+          "do": "Greet the reader like a peer you're glad to help. A little delight is welcome.",
+          "dont": "Go cold and transactional — or paper over it with forced cheer.",
+          "example": "Welcome — let's get your first theme on the screen. It takes about a minute."
+        }
+      ]
+    },
+    "tone": {
+      "error": {
+        "feeling": "warm, accountable, already holding the fix",
+        "example": "That didn't save — looks like the theme name's taken. Pick another and we'll keep everything else just as you left it."
+      },
+      "success": {
+        "feeling": "a real, small celebration — a little confetti is fine",
+        "example": "Saved! Your theme's live across every component — go take a look."
+      },
+      "empty": {
+        "feeling": "inviting, a friendly nudge to start",
+        "example": "Nothing here yet — let's change that. Start from a blank file, or clone one and make it yours."
+      },
+      "loading": {
+        "feeling": "unhurried and friendly, honest about the wait",
+        "example": "Compiling your tokens — just a moment…"
+      },
+      "validation-warning": {
+        "feeling": "a friend flagging a smell, never a scold",
+        "example": "Quick one — your primary and accent are nearly twins. Themes can read a little flat this close, so nudge one if it's not on purpose."
+      }
+    },
+    "lexicon": [
+      {
+        "use": "theme",
+        "avoid": "skin"
+      },
+      {
+        "use": "copy-and-own",
+        "avoid": "fork"
+      },
+      {
+        "use": "compose",
+        "avoid": "drag-and-drop"
+      },
+      {
+        "use": "token",
+        "avoid": "variable"
+      },
+      {
+        "use": "adapter",
+        "avoid": "plugin"
+      },
+      {
+        "use": "transform",
+        "avoid": "restyle"
+      },
+      {
+        "use": "portable",
+        "avoid": "exportable"
+      }
+    ],
+    "core": [
+      "positioning",
+      "essence",
+      "pillars"
+    ],
+    "visibility": "public",
+    "messaging": {
+      "roof": "Design intent as data — all the way up to brand."
+    },
+    "taglines": [
+      "Your entire brand system, created and encoded in one file."
+    ],
+    "boilerplate": {
+      "short": "Visor is an open design system that compiles a complete brand — visual and verbal — from one portable file, legible to humans and agents alike. Components are yours to copy and own; shared tokens keep every layer coherent.",
+      "long": "Visor is Low Orbit Studio's open design system, built on one idea: design intent should live as data — typed, portable, and machine-readable — from a single color token all the way up to a brand's voice. Components are copy-and-own, so `npx visor add` drops real source into your project for you to edit, while shared tokens keep design consistent across every app through `npm update`. A theme is a complete design system carried in one `.visor.yaml` file; change the file and the whole surface re-resolves, light to dark, one brand to another. And because that same file reads cleanly to people and agents alike, Visor is as legible to the engineer editing it as to the agent composing against it — coherent, open, and yours."
+    },
+    "colorUsage": {
+      "pairings": [
+        {
+          "use": "--primary",
+          "with": "--surface-card / --surface-base",
+          "rule": "Primary is the one emphatic action per view — reserve it for the single most important action and let everything else recede to surfaces and text tokens."
+        },
+        {
+          "use": "--accent",
+          "with": "--primary",
+          "rule": "Accent is a supporting highlight, never a second primary. Keep accent and primary visibly distinct — Visor flags them when they're near-twins, because a theme reads flat when they sit too close."
+        },
+        {
+          "use": "--text-primary / --text-secondary",
+          "with": "--surface-card / --surface-base",
+          "rule": "Text always uses the semantic text tokens against a surface token, never raw hex, so contrast tracks the active theme instead of being pinned."
+        },
+        {
+          "use": "--destructive",
+          "with": "--surface-card",
+          "rule": "Destructive is reserved for irreversible or error states; it is never a decorative or emphasis color."
+        },
+        {
+          "use": "fallback neutral (Gray)",
+          "with": "any un-themed surface",
+          "rule": "Fallbacks use Gray, not Slate, so an un-themed component lands on a neutral that fits the palette instead of clashing."
+        }
+      ]
+    },
+    "accessibility": {
+      "standard": "WCAG 2.1 AA",
+      "contrast": [
+        {
+          "context": "Body text and other normal-size text",
+          "ratio": "4.5:1"
+        },
+        {
+          "context": "Large text (≥ 24px, or ≥ 18.66px bold)",
+          "ratio": "3:1"
+        },
+        {
+          "context": "Non-text UI — icons, focus rings, control boundaries",
+          "ratio": "3:1"
+        }
+      ],
+      "intent": "Every stock Visor theme is meant to clear WCAG 2.1 AA against these targets. The theme validator surfaces pairings that fall short as a candid, non-blocking warning — 'this theme fails AA on small text' — so the author can bump the contrast or keep the warning if it's intentional."
+    }
+  },
   "tokens": {
     "primitives": [
       {
@@ -11357,6 +12931,20 @@
         "defaultLight": "var(--spacing-24)",
         "defaultDark": "var(--spacing-24)"
       },
+      {
+        "name": "--layout-section-padding",
+        "tier": "semantic",
+        "description": "Semantic spacing: layout-section-padding",
+        "defaultLight": "var(--spacing-24)",
+        "defaultDark": "var(--spacing-24)"
+      },
+      {
+        "name": "--layout-section-padding-mobile",
+        "tier": "semantic",
+        "description": "Semantic spacing: layout-section-padding-mobile",
+        "defaultLight": "var(--spacing-16)",
+        "defaultDark": "var(--spacing-16)"
+      },
       {
         "name": "--motion-duration-fast",
         "tier": "semantic",
@@ -12180,7 +13768,7 @@
       }
     ],
     "summary": {
-      "total": 312
+      "total": 314
     }
   }
 }