@loworbitstudio/visor 1.6.0 → 1.11.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-06-11T14:53:30.668Z",
+  "generated_at": "2026-06-12T05:08:25.418Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -311,7 +311,7 @@
         },
         {
           "name": "AvatarStack",
-          "description": "Compound primitive for overlapping avatar groups with a `+N` overflow indicator. Accepts an array of image sources (`avatars`), a `total` count (supports server-truncated lists), a `max` cap (default 6), a `size` pass-through (`\"sm\" | \"default\" | \"lg\"`, default `\"sm\"`), and an optional accessible `label` override. Renders `role=\"img\"` with `data-slot=\"avatar-stack\"`.\n"
+          "description": "Compound primitive for overlapping avatar groups with a `+N` overflow indicator. Each entry in `avatars` is a plain image-URL string, `undefined` (renders a placeholder disc), or an `AvatarStackItem` object with `initials`, `src`, `alt`, and an optional `style` escape hatch for per-disc gradient backgrounds. Accepts a `total` count (supports server-truncated lists), a `max` cap (default 6), an explicit `overflowCount` override, a `size` pass-through (`\"sm\" | \"default\" | \"lg\"`, default `\"sm\"`), and an optional accessible `label` override. Renders `role=\"img\"` with `data-slot=\"avatar-stack\"`.\n"
         }
       ],
       "dependencies": [
@@ -361,6 +361,9 @@
           "sm",
           "md",
           "lg"
+        ],
+        "case": [
+          "sentence"
         ]
       },
       "props": [
@@ -374,22 +377,34 @@
           "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": [
         "class-variance-authority"
       ],
       "tokens_used": [
-        "--badge-text-transform",
         "--border-default",
         "--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",
@@ -400,6 +415,8 @@
         "--spacing-1",
         "--spacing-2",
         "--spacing-3",
+        "--success",
+        "--surface-card",
         "--surface-error-default",
         "--surface-error-subtle",
         "--surface-info-default",
@@ -416,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"
     },
@@ -945,6 +963,7 @@
         "--border-default",
         "--font-size-sm",
         "--font-weight-medium",
+        "--hairline",
         "--line-height-tight",
         "--motion-duration-moderate",
         "--motion-easing-standard",
@@ -953,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"
     },
@@ -1055,7 +1076,9 @@
         "--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"
@@ -1266,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.",
@@ -1409,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"
     },
@@ -1553,6 +1661,12 @@
               "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"
             }
           ]
         }
@@ -1572,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",
@@ -1584,13 +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"
     },
@@ -2232,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",
@@ -2255,6 +2447,14 @@
         ],
         "severity_deprecated": [
           "danger"
+        ],
+        "iconTreatment": [
+          "inline",
+          "plated"
+        ],
+        "mode": [
+          "dialog",
+          "inline"
         ]
       },
       "props": [
@@ -2280,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",
@@ -2342,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",
@@ -2360,6 +2594,8 @@
         "--spacing-4",
         "--spacing-5",
         "--spacing-6",
+        "--spacing-8",
+        "--surface-card",
         "--surface-error-subtle",
         "--surface-info-subtle",
         "--surface-page",
@@ -2368,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"
     },
@@ -2650,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",
@@ -2660,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) — column headers also receive the editorial treatment: uppercase, `--font-size-xs` (~11px), `--text-tertiary` color, and `letter-spacing: 0.08em`. 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",
@@ -2682,6 +2925,12 @@
         "--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",
@@ -2708,6 +2957,7 @@
         "--surface-info-subtle",
         "--surface-interactive-active",
         "--surface-interactive-default",
+        "--surface-page",
         "--surface-selected",
         "--surface-subtle",
         "--surface-success-subtle",
@@ -2921,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."
@@ -2948,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",
@@ -2961,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"
     },
@@ -3074,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"
     },
@@ -3154,6 +3430,10 @@
         "tone": [
           "default",
           "subtle"
+        ],
+        "variant": [
+          "default",
+          "editorial"
         ]
       },
       "props": [
@@ -3195,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'",
@@ -3219,22 +3505,82 @@
         "--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"
       ],
       "example": "<EmptyState\n  icon={<FolderOpen />}\n  heading=\"No profiles yet\"\n  description=\"Create your first profile to get started.\"\n  action={<Button>New profile</Button>}\n  secondaryAction={<Button variant=\"outline\">Learn more</Button>}\n/>\n"
     },
+    "error-placard": {
+      "category": "feedback",
+      "description": "Inline failed-load placard with a destructive icon chip, title, body, and optional recovery actions.",
+      "when_to_use": [
+        "A specific section or data panel failed to load and requires user action to recover",
+        "Displaying a named error with both context and a retry or dismiss option in-place",
+        "Inline error states within cards, list items, or content panels (not page-level)"
+      ],
+      "when_not_to_use": [
+        "Passive informational notices or warnings (use Alert)",
+        "Site-wide or page-level announcements (use Banner)",
+        "Empty states where no data exists yet (use EmptyState)",
+        "Ephemeral transient notifications (use Toast)"
+      ],
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Leading visual rendered in a destructive-tinted circular chip. Typically a Phosphor icon at 22px."
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Short direct statement of the failure."
+        },
+        {
+          "name": "body",
+          "type": "ReactNode",
+          "required": true,
+          "description": "One or two sentences of explanation or recovery guidance."
+        },
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional right-aligned action cluster — typically one or more Buttons (retry, dismiss, contact support)."
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--destructive",
+        "--font-size-base",
+        "--radius-lg",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-5",
+        "--spacing-8",
+        "--surface-card",
+        "--text-tertiary"
+      ],
+      "example": "import { WarningCircle } from '@phosphor-icons/react';\n\n<ErrorPlacard\n  icon={<WarningCircle weight=\"fill\" />}\n  title=\"Could not load members\"\n  body=\"The request timed out. Check your connection and try again.\"\n  actions={\n    <>\n      <Button variant=\"ghost\" size=\"sm\">Dismiss</Button>\n      <Button variant=\"outline\" size=\"sm\">Retry</Button>\n    </>\n  }\n/>\n"
+    },
     "field": {
       "category": "form",
       "description": "A form field wrapper composing label, description, and error components.",
@@ -3273,7 +3619,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": [
@@ -3289,7 +3635,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"
     },
@@ -4187,6 +4534,7 @@
         "--border-error",
         "--border-focus",
         "--border-strong",
+        "--field-control-bg",
         "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-base",
@@ -4194,8 +4542,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",
@@ -4203,8 +4560,10 @@
         "--spacing-4",
         "--spacing-4_5",
         "--spacing-5",
+        "--surface-card",
         "--surface-error-subtle",
         "--surface-interactive-default",
+        "--surface-subtle",
         "--text-primary",
         "--text-secondary"
       ],
@@ -4544,10 +4903,11 @@
     },
     "matrix-table": {
       "category": "admin",
-      "description": "A fixed assignment grid component for members×roles patterns. Sticky-left identity column, centered boolean cells (22px filled-success check when active / muted empty when not), and multi-line centered column headers (label over count) that opt out of the uppercase header treatment. No list machinery — no selection column, no sort buttons, no pagination footer.",
+      "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",
-        "Any fixed grid where rows are identities (users, items) and columns are boolean attributes (permissions, roles, features)",
+        "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": [
@@ -4561,19 +4921,24 @@
           "name": "columns",
           "type": "MatrixColumn[]",
           "required": true,
-          "description": "Column definitions. Each column has an `id`, `label`, and optional `count` sub-label rendered below the label in the header."
+          "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`, an `identity` value passed to `renderIdentity`, an `activeColumns` set/array of column ids that should show the active check indicator, and an optional `cells` map of per-column values. A `cells` entry (`string | boolean`) overrides `activeColumns` for that column — `true`/`false` render the boolean indicator, a `string` renders as plain text in the standard cell style."
+          "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": "(identity: TIdentity) => React.ReactNode",
+          "type": "(row: MatrixRow<TIdentity>) => React.ReactNode",
           "required": true,
-          "description": "Render slot for the sticky-left identity cell. Receives the row's `identity` value — typically renders a name, avatar+name, or any identity compound."
+          "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",
@@ -4586,28 +4951,39 @@
         "@loworbitstudio/visor-core"
       ],
       "tokens_used": [
-        "--border-default",
+        "--dt-container-radius",
+        "--dt-container-shadow",
+        "--dt-header-bg",
+        "--dt-row-bg",
+        "--font-size-base",
         "--font-size-sm",
         "--font-weight-medium",
-        "--font-weight-normal",
-        "--line-height-tight",
-        "--motion-duration-fast",
-        "--motion-easing-standard",
+        "--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",
-        "--stroke-width-thin",
+        "--spacing-4",
+        "--spacing-5",
+        "--success",
         "--surface-card",
-        "--surface-muted",
-        "--surface-success-default",
-        "--text-inverse",
+        "--surface-elev",
+        "--surface-page",
+        "--surface-subtle",
+        "--text-muted",
         "--text-primary",
         "--text-tertiary"
       ],
-      "example": "const columns: MatrixColumn[] = [\n  { id: 'admin', label: 'Admin', count: 3 },\n  { id: 'editor', label: 'Editor', count: 5 },\n  { id: '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' }, activeColumns: new Set(['admin', 'editor']) },\n  { id: '2', identity: { name: 'Grace Hopper', email: 'grace@example.com' }, activeColumns: ['viewer'] },\n  // Mixed string + boolean cells via `cells` (string renders as plain text):\n  { id: '3', identity: { name: 'Storage', email: '' }, activeColumns: [], cells: { admin: '50GB', editor: true, viewer: false } },\n]\n\n<MatrixTable\n  columns={columns}\n  rows={rows}\n  renderIdentity={(identity) => <span>{identity.name}</span>}\n  aria-label=\"Member role assignments\"\n/>\n"
+      "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",
@@ -5188,6 +5564,11 @@
         },
         {
           "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"
         }
@@ -5209,6 +5590,7 @@
         "--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",
@@ -5720,6 +6102,10 @@
         "Linear capacity bars (use Progress with size=\"thin\")"
       ],
       "variants": {
+        "variant": [
+          "ring",
+          "solid"
+        ],
         "size": [
           "sm",
           "md",
@@ -5751,6 +6137,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\"",
@@ -5787,11 +6179,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",
@@ -5799,11 +6193,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",
@@ -5814,7 +6211,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"
     },
@@ -5948,6 +6346,86 @@
       ],
       "example": "<SectionHeader title=\"Tonight's events\" meta=\"2 events\" />\n<SectionHeader title=\"Activity\" meta=\"last hour\" />\n<SectionHeader title=\"Top promoters · 30d\" />\n"
     },
+    "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": [
+        "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": [
+        "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": "eyebrow",
+          "type": "React.ReactNode",
+          "description": "Short mono uppercase label rendered above the heading. Reads color from --section-intro-eyebrow-color."
+        },
+        {
+          "name": "heading",
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "Display-font heading — the main marketing statement."
+        },
+        {
+          "name": "lede",
+          "type": "React.ReactNode",
+          "description": "Optional supporting paragraph rendered beneath the heading."
+        },
+        {
+          "name": "align",
+          "type": "'left' | 'center'",
+          "default": "left",
+          "description": "Text alignment for all three slots."
+        },
+        {
+          "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."
+        }
+      ],
+      "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.",
@@ -5976,8 +6454,8 @@
         },
         {
           "name": "icon",
-          "type": "Icon",
-          "description": "Leading Phosphor icon component (e.g. `UsersIcon`). (SectionNavItem)"
+          "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": "count",
@@ -6008,9 +6486,8 @@
         "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-sm",
-        "--font-size-xs",
         "--font-weight-medium",
-        "--line-height-tight",
+        "--hairline",
         "--motion-duration-fast",
         "--motion-easing-standard",
         "--primary",
@@ -6019,15 +6496,80 @@
         "--spacing-1",
         "--spacing-2",
         "--spacing-3",
+        "--spacing-4",
         "--stroke-width-thin",
-        "--surface-accent-subtle",
-        "--surface-muted",
-        "--text-link",
+        "--surface-subtle",
         "--text-primary",
-        "--text-secondary"
+        "--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.",
@@ -6070,7 +6612,7 @@
       "sub_components": [
         {
           "name": "SelectTrigger",
-          "description": "The button that opens the select dropdown. Accepts a size prop (\"sm\" | \"md\" | \"lg\")."
+          "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",
@@ -6106,6 +6648,7 @@
         "--border-error",
         "--border-focus",
         "--border-strong",
+        "--field-control-bg",
         "--field-menu-bg",
         "--focus-ring-width",
         "--font-size-base",
@@ -6134,6 +6677,7 @@
         "--surface-interactive-default",
         "--surface-interactive-hover",
         "--surface-popover",
+        "--surface-subtle",
         "--text-primary",
         "--text-secondary"
       ],
@@ -6472,16 +7016,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"
     },
@@ -6708,6 +7259,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.",
@@ -7200,7 +7861,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",
@@ -7213,6 +7874,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",
@@ -7233,15 +7906,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",
@@ -7264,12 +7937,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",
@@ -7282,37 +7957,128 @@
       ],
       "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"
     },
-    "surface-row": {
-      "category": "specimen",
-      "description": "Surface background variant display showing a surface token with its name and token reference.",
+    "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": [
-        "Displaying surface background tokens in a design system specimen",
-        "Comparing surface layers and hierarchy",
-        "Theme validation for surface tokens"
+        "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": [
-        "Actual page or card surfaces (use the surface tokens directly)",
-        "Color swatches without surface context (use ColorSwatch)"
+        "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": "token",
+          "name": "className",
           "type": "string",
-          "description": "CSS custom property for the surface background"
+          "description": "Additional CSS classes for the root card element."
         },
         {
-          "name": "name",
-          "type": "string",
-          "description": "Display name for the surface"
+          "name": "icon",
+          "type": "ReactNode",
+          "description": "(StructuredPromptHeader) Phosphor icon rendered before the eyebrow label."
         },
         {
-          "name": "lightText",
+          "name": "filled",
           "type": "boolean",
           "default": "false",
-          "description": "When true, text renders in light colors for dark surfaces"
+          "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>."
         }
       ],
-      "dependencies": [],
+      "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.",
+      "when_to_use": [
+        "Displaying surface background tokens in a design system specimen",
+        "Comparing surface layers and hierarchy",
+        "Theme validation for surface tokens"
+      ],
+      "when_not_to_use": [
+        "Actual page or card surfaces (use the surface tokens directly)",
+        "Color swatches without surface context (use ColorSwatch)"
+      ],
+      "props": [
+        {
+          "name": "token",
+          "type": "string",
+          "description": "CSS custom property for the surface background"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "description": "Display name for the surface"
+        },
+        {
+          "name": "lightText",
+          "type": "boolean",
+          "default": "false",
+          "description": "When true, text renders in light colors for dark surfaces"
+        }
+      ],
+      "dependencies": [],
       "tokens_used": [
         "--border-muted",
         "--font-mono",
@@ -7496,15 +8262,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"
       ],
@@ -7593,18 +8366,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"
@@ -8059,6 +8834,117 @@
       ],
       "example": "import { Toaster, toast } from \"@/components/ui/toast\"\n\n{/* Place once in your layout */}\n<Toaster />\n\n{/* Call imperatively */}\ntoast.success(\"Changes saved\")\ntoast.error(\"Something went wrong\")\n"
     },
+    "toast-card": {
+      "category": "feedback",
+      "description": "A static, server-renderable notification card for editorial display of toast anatomy. Use in state galleries and design documentation — not for imperative portal notifications.",
+      "when_to_use": [
+        "State gallery screens showing notification anatomy in-flow",
+        "Design documentation illustrating toast variants",
+        "Static editorial rendering of notification cards without portal or timer machinery",
+        "Layouts that need declarative, server-rendered notification cards"
+      ],
+      "when_not_to_use": [
+        "Imperative portal notifications that auto-dismiss (use Toast with Sonner instead)",
+        "Notifications triggered by user actions at runtime (use Toast)",
+        "Full-width announcement bars (use Banner)",
+        "Inline contextual callouts within content (use Alert)"
+      ],
+      "variants": {
+        "variant": [
+          "success",
+          "error",
+          "info",
+          "warning"
+        ]
+      },
+      "props": [
+        {
+          "name": "variant",
+          "type": "\"success\" | \"error\" | \"info\" | \"warning\"",
+          "default": "\"info\"",
+          "description": "Intent variant controlling the icon badge color and default glyph"
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Bold one-line headline. Required."
+        },
+        {
+          "name": "body",
+          "type": "React.ReactNode",
+          "description": "Muted supporting line beneath the title. Optional."
+        },
+        {
+          "name": "action",
+          "type": "React.ReactNode",
+          "description": "Primary-colored action affordance text. Optional. Renders as a button when onAction is provided, otherwise static text."
+        },
+        {
+          "name": "onAction",
+          "type": "React.MouseEventHandler<HTMLButtonElement>",
+          "description": "Handler for the action affordance. When omitted with action, renders action as static text."
+        },
+        {
+          "name": "onDismiss",
+          "type": "React.MouseEventHandler<HTMLButtonElement>",
+          "description": "Dismiss handler. When provided, renders a muted X dismiss control."
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Override the leading glyph. Defaults to the per-variant Phosphor icon (CheckCircle / WarningCircle / Info / Warning)."
+        }
+      ],
+      "sub_components": [
+        {
+          "name": "ToastCardStack",
+          "description": "Fixed top-right stacking container for multiple ToastCards. Declarative and server-renderable. Accepts `top` and `gap` string props that map to CSS custom properties for consumer retuning without forking. Renders `data-slot=\"toast-card-stack\"`.\n"
+        }
+      ],
+      "dependencies": [
+        "class-variance-authority",
+        "@phosphor-icons/react"
+      ],
+      "tokens_used": [
+        "--accent",
+        "--border-focus",
+        "--color-white",
+        "--destructive",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-sm",
+        "--font-weight-medium",
+        "--font-weight-semibold",
+        "--motion-duration-150",
+        "--motion-easing-default",
+        "--primary",
+        "--primary-text",
+        "--radius-full",
+        "--radius-md",
+        "--radius-sm",
+        "--shadow-lg",
+        "--spacing-1",
+        "--spacing-3",
+        "--spacing-4",
+        "--spacing-6",
+        "--success",
+        "--surface-card",
+        "--surface-elev",
+        "--text-inverse",
+        "--text-muted",
+        "--text-primary",
+        "--text-tertiary",
+        "--toast-card-body-font-size",
+        "--toast-card-icon-glyph",
+        "--toast-card-icon-size",
+        "--toast-card-stack-gap",
+        "--toast-card-stack-right",
+        "--toast-card-stack-top",
+        "--toast-card-stack-z",
+        "--warning"
+      ],
+      "example": "<ToastCard variant=\"success\" title=\"Changes saved\" body=\"Your profile has been updated.\" />\n\n<ToastCard\n  variant=\"error\"\n  title=\"Upload failed\"\n  body=\"The file exceeds the 10MB limit.\"\n  action=\"Try again\"\n  onAction={() => {}}\n  onDismiss={() => {}}\n/>\n"
+    },
     "toggle-group": {
       "category": "form",
       "description": "A toggle group component with single-select and multi-select modes using CVA variants.",
@@ -8887,6 +9773,235 @@
       "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"
+    },
+    "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": [
+        "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": [
+        "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": "liftColor",
+          "type": "string",
+          "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": "children",
+          "type": "React.ReactNode",
+          "description": "Content to wrap (typically a Card or BentoGrid tile)."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "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": [
+        "--accent",
+        "--lift-color",
+        "--shadow-"
+      ],
+      "example": "<CardLift liftColor=\"var(--accent)\">\n  <Card>\n    <CardContent>Hover me</CardContent>\n  </Card>\n</CardLift>\n"
+    },
+    "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": [
+        "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": [
+        "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": "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": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [],
+      "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"
+    },
+    "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": [
+        "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": [
+        "As a layout element — HeroGlow is purely decorative (aria-hidden, pointer-events none)",
+        {
+          "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": "glowColor",
+          "type": "string",
+          "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": [
+        "--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",
       "description": "GPU-accelerated particle sphere visualization with 256K particles, custom GLSL shaders, 6 geometry modes, 5 color schemes, and think-mode animation effects.",
@@ -8977,6 +10092,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": {
@@ -10188,6 +11347,7 @@
       "opacity-bar",
       "radius-scale",
       "spacing-scale",
+      "specimen-card",
       "surface-row",
       "surface-scale-stack",
       "type-scale-stack",
@@ -10203,7 +11363,9 @@
       "key-value-list",
       "marquee",
       "name-roster",
+      "segmented-progress",
       "sparkline",
+      "spinner",
       "status-dot",
       "table",
       "timeline"
@@ -10227,10 +11389,13 @@
     "feedback": [
       "alert",
       "banner",
+      "challenge-card",
+      "error-placard",
       "popover",
       "progress",
       "skeleton",
       "toast",
+      "toast-card",
       "tooltip"
     ],
     "layout": [
@@ -10263,6 +11428,7 @@
       "chip",
       "color-picker",
       "combobox",
+      "composer",
       "date-picker",
       "date-range-picker",
       "field",
@@ -10280,6 +11446,7 @@
       "select",
       "slider",
       "slider-control",
+      "structured-prompt",
       "switch",
       "tag-input",
       "textarea",
@@ -10304,13 +11471,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",
@@ -10375,7 +11549,12 @@
           "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",
@@ -10386,7 +11565,12 @@
             "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",
@@ -10395,7 +11579,12 @@
           "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": {
@@ -10483,7 +11672,64 @@
       "essence",
       "pillars"
     ],
-    "visibility": "public"
+    "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": [