@loworbitstudio/visor 0.10.2 → 1.2.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-05-14T19:58:07.656Z",
+  "generated_at": "2026-05-20T04:45:51.975Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -375,6 +375,7 @@
         "--surface-error-subtle",
         "--surface-info-default",
         "--surface-info-subtle",
+        "--surface-subtle",
         "--surface-success-default",
         "--surface-success-subtle",
         "--surface-warning-default",
@@ -689,6 +690,89 @@
       ],
       "example": "<BentoGrid cols={{ base: 1, md: 2 }} gap=\"4\">\n  <BentoTile span=\"full\" aspect=\"21/9\">\n    <BentoTileMedia src=\"/projects/knowmentum.jpg\" alt=\"Knowmentum project hero\" />\n    <BentoTileBody>\n      <h3>Knowmentum</h3>\n      <p>Knowledge platform for high-performers.</p>\n    </BentoTileBody>\n  </BentoTile>\n\n  <BentoTile span=\"half\" aspect=\"2/1\" href=\"https://animal.nyc/\" target=\"_blank\">\n    <BentoTileMedia src=\"/projects/animal-nyc.jpg\" alt=\"Animal NYC\" />\n    <BentoTileBody>\n      <h3>Animal NYC</h3>\n    </BentoTileBody>\n  </BentoTile>\n\n  <BentoTile span=\"half\" aspect=\"2/1\" href=\"https://animal.la/\" target=\"_blank\">\n    <BentoTileMedia src=\"/projects/animal-la.jpg\" alt=\"Animal LA\" />\n    <BentoTileBody>\n      <h3>Animal LA</h3>\n    </BentoTileBody>\n  </BentoTile>\n\n  <BentoTile span=\"half\" aspect=\"4/3\" fit=\"contain\">\n    <BentoTileMedia src=\"/logos/client-logo.png\" alt=\"Client logo\" />\n    <BentoTileBody>\n      <p>Natural-fit logo tile</p>\n    </BentoTileBody>\n  </BentoTile>\n</BentoGrid>\n"
     },
+    "box": {
+      "category": "layout",
+      "description": "Universal layout wrapper for padding, margin, background, border, and border-radius via Visor design tokens.",
+      "when_to_use": [
+        "Wrapping a region of content to apply padding, margin, or a surface background",
+        "Adding a tokenized border or border-radius to an arbitrary container",
+        "Building the outermost wrapper of a Stack, Inline, or Grid layout when you also need spacing/surface chrome",
+        "Any place you would otherwise reach for raw Tailwind utility classes like `p-4 bg-white rounded-lg`"
+      ],
+      "when_not_to_use": [
+        "Arranging children with consistent gap (use Stack, Inline, or Grid)",
+        "Centering content with a max-width (use Container)",
+        "As a stylistic Card replacement — Card carries elevation + interaction affordances"
+      ],
+      "props": [
+        {
+          "name": "as",
+          "type": "keyof JSX.IntrinsicElements",
+          "default": "'div'",
+          "description": "HTML element to render"
+        },
+        {
+          "name": "padding",
+          "type": "SpacingToken | ResponsiveProp<SpacingToken>",
+          "description": "Shorthand padding on all sides"
+        },
+        {
+          "name": "paddingX",
+          "type": "SpacingToken | ResponsiveProp<SpacingToken>",
+          "description": "Padding on the X axis (overrides `padding`)"
+        },
+        {
+          "name": "paddingY",
+          "type": "SpacingToken | ResponsiveProp<SpacingToken>",
+          "description": "Padding on the Y axis (overrides `padding`)"
+        },
+        {
+          "name": "margin",
+          "type": "SpacingToken | ResponsiveProp<SpacingToken>",
+          "description": "Shorthand margin on all sides"
+        },
+        {
+          "name": "bg",
+          "type": "SurfaceToken",
+          "description": "Token-named background surface (e.g. `'card'`, `'subtle'`)"
+        },
+        {
+          "name": "border",
+          "type": "boolean | BorderToken",
+          "description": "When true uses `--border-default`; when a token name uses that border color"
+        },
+        {
+          "name": "borderRadius",
+          "type": "RadiusToken",
+          "description": "Token-named border radius"
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--border-default",
+        "--box-bg",
+        "--box-border-color",
+        "--box-border-width",
+        "--box-color",
+        "--box-m",
+        "--box-mb",
+        "--box-ml",
+        "--box-mr",
+        "--box-mt",
+        "--box-mx",
+        "--box-my",
+        "--box-p",
+        "--box-pb",
+        "--box-pl",
+        "--box-pr",
+        "--box-pt",
+        "--box-px",
+        "--box-py",
+        "--box-radius",
+        "--stroke-width-regular"
+      ],
+      "example": "<Box padding=\"md\" bg=\"card\" borderRadius=\"lg\" border>\n  Anything\n</Box>\n\n<Box padding={{ base: \"sm\", md: \"lg\" }} as=\"section\">\n  Responsive padding\n</Box>\n"
+    },
     "breadcrumb": {
       "category": "navigation",
       "description": "A breadcrumb navigation component showing the user's location within a page hierarchy.",
@@ -1272,6 +1356,12 @@
         "--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",
         "--interactive-primary-bg",
         "--interactive-primary-text",
@@ -1429,6 +1519,77 @@
       ],
       "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"
     },
+    "chrome-button": {
+      "category": "admin",
+      "description": "A 28px-tall button primitive for topbar and chrome contexts with an optional leading icon and trailing Kbd shortcut hint.",
+      "when_to_use": [
+        "Topbar actions in admin shells (Search, Filter, Group, Density, primary \"New X\")",
+        "Toolbar rows where Button at 32px is too tall for the chrome density",
+        "Any chrome row that pairs an action with a keyboard-shortcut hint inline"
+      ],
+      "when_not_to_use": [
+        "Primary body-content CTAs (use Button at default 40px / sm 32px)",
+        "Standalone keyboard-shortcut display without an action (use Kbd directly)",
+        "Icon-only chrome that needs a tooltip — use a separate IconButton primitive when one exists, or wrap with a tooltip and supply aria-label",
+        "Destructive confirmations (use Button variant=\"destructive\" — destructive is intentionally out of scope here)"
+      ],
+      "variants": {
+        "variant": [
+          "default",
+          "primary"
+        ]
+      },
+      "props": [
+        {
+          "name": "variant",
+          "type": "\"default\" | \"primary\"",
+          "default": "\"default\"",
+          "description": "Visual emphasis. `default` uses the muted interactive surface; `primary` uses the accent surface."
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Leading icon — typically a 14px Phosphor icon. Wrapped in an aria-hidden span."
+        },
+        {
+          "name": "keys",
+          "type": "string[]",
+          "description": "Trailing keyboard shortcut hint rendered via `<Kbd keys={keys} size=\"sm\" />`."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Button label."
+        }
+      ],
+      "dependencies": [
+        "class-variance-authority"
+      ],
+      "tokens_used": [
+        "--accent-primary",
+        "--border-focus",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-sm",
+        "--font-weight-medium",
+        "--font-weight-semibold",
+        "--interactive-primary-bg",
+        "--interactive-primary-bg-hover",
+        "--interactive-primary-text",
+        "--motion-duration-150",
+        "--motion-easing-default",
+        "--opacity-50",
+        "--radius-md",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--surface-interactive-default",
+        "--surface-interactive-hover",
+        "--text-inverse",
+        "--text-primary"
+      ],
+      "example": "<ChromeButton icon={<MagnifyingGlass size={14} weight=\"regular\" />} keys={[\"⌘\", \"K\"]}>\n  Search\n</ChromeButton>\n<ChromeButton variant=\"primary\" icon={<Plus size={14} weight=\"bold\" />}>\n  New event\n</ChromeButton>\n"
+    },
     "code-block": {
       "category": "typography",
       "description": "A lightweight code display component with optional line numbers, copy-to-clipboard, and language badge.",
@@ -1609,6 +1770,120 @@
       ],
       "example": "<ColorBar token=\"--interactive-primary-bg\" label=\"Brand Color\" />\n"
     },
+    "color-picker": {
+      "category": "form",
+      "description": "An OKLCH-based color picker with a 2D lightness/chroma plane, hue slider, hex input, and optional preset chips. Renders inline or in a Radix Popover.",
+      "when_to_use": [
+        "Letting users pick a brand color in theme creators or EPK customizers",
+        "Building color-exploration UIs (palettes, swatches, theme tuning)",
+        "Replacing the simple hex picker in the `prototype-review` block when richer selection is needed",
+        "Any form that needs a production-grade color input (not a native browser picker)"
+      ],
+      "when_not_to_use": [
+        "Picking from a small fixed list of brand colors (use Radio Group or Toggle Group with color chips)",
+        "Display-only color swatches (use ColorSwatch from the specimen group)",
+        "Picking system tokens — use the theme-creator tooling, not this primitive"
+      ],
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Controlled hex value (e.g. \"#3b82f6\")"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "default": "\"#3b82f6\"",
+          "description": "Uncontrolled initial value"
+        },
+        {
+          "name": "onChange",
+          "type": "(hex: string) => void",
+          "description": "Fired on every continuous interaction"
+        },
+        {
+          "name": "onCommit",
+          "type": "(hex: string) => void",
+          "description": "Fired on pointer-up / popover-close — for debounced consumers"
+        },
+        {
+          "name": "mode",
+          "type": "\"popover\" | \"inline\"",
+          "default": "\"popover\"",
+          "description": "Render in a Radix Popover (default) or inline"
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "\"md\"",
+          "description": "Affects trigger swatch size in popover mode"
+        },
+        {
+          "name": "showHex",
+          "type": "boolean",
+          "default": "true",
+          "description": "Show the hex input row"
+        },
+        {
+          "name": "showReadout",
+          "type": "boolean",
+          "default": "true",
+          "description": "Show the L/C/H readout row"
+        },
+        {
+          "name": "presets",
+          "type": "string[]",
+          "description": "Optional hex preset chips"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "Disables all interaction"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "description": "Forwarded to a hidden input for form submission"
+        }
+      ],
+      "dependencies": [
+        "@radix-ui/react-popover",
+        "@loworbitstudio/visor-theme-engine"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-error",
+        "--border-focus",
+        "--border-strong",
+        "--color-picker-indicator",
+        "--color-picker-indicator-shadow",
+        "--color-picker-indicator-shadow-color",
+        "--focus-ring-width",
+        "--font-size-sm",
+        "--font-size-xs",
+        "--motion-duration-150",
+        "--motion-duration-fast",
+        "--motion-easing-default",
+        "--motion-easing-enter",
+        "--motion-easing-exit",
+        "--opacity-40",
+        "--radius-sm",
+        "--shadow-md",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--stroke-width-medium",
+        "--stroke-width-thin",
+        "--surface-card",
+        "--surface-interactive-default",
+        "--surface-popover",
+        "--text-primary",
+        "--text-tertiary"
+      ],
+      "example": "// Default (popover trigger)\n<ColorPicker defaultValue=\"#3b82f6\" onChange={(hex) => console.log(hex)} />\n\n// Inline mode\n<ColorPicker mode=\"inline\" defaultValue=\"#3b82f6\" />\n\n// With presets\n<ColorPicker\n  mode=\"inline\"\n  presets={[\"#ef4444\", \"#f59e0b\", \"#10b981\", \"#3b82f6\", \"#8b5cf6\"]}\n/>\n"
+    },
     "color-swatch": {
       "category": "specimen",
       "description": "Individual color swatch with hex value display, plus grid variants for color scales and semantic color tokens.",
@@ -2011,6 +2286,47 @@
       ],
       "example": "<ConfirmDialog\n  trigger={<Button variant=\"destructive\">Delete project</Button>}\n  severity=\"danger\"\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"
     },
+    "container": {
+      "category": "layout",
+      "description": "Max-width centered wrapper for page content with token-driven horizontal padding.",
+      "when_to_use": [
+        "Constraining page content to a comfortable reading width",
+        "Wrapping marketing or documentation section content",
+        "Anywhere you would write `mx-auto max-w-screen-lg px-4` in Tailwind"
+      ],
+      "when_not_to_use": [
+        "Arranging children (use Stack, Inline, or Grid as the inner content)",
+        "Adding background or border chrome (compose with Box inside)",
+        "Full-bleed sections (use `size=\"full\"` or skip the Container entirely)"
+      ],
+      "props": [
+        {
+          "name": "as",
+          "type": "keyof JSX.IntrinsicElements",
+          "default": "'div'",
+          "description": "HTML element to render"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg' | 'xl' | 'full'",
+          "default": "'lg'",
+          "description": "Max-width preset (sm 640, md 768, lg 1024, xl 1280, full no limit)"
+        },
+        {
+          "name": "padding",
+          "type": "ContainerSpacing",
+          "default": "'md'",
+          "description": "Horizontal padding token"
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--container-max-width",
+        "--container-padding",
+        "--spacing-4"
+      ],
+      "example": "<Container>\n  <Heading>Page Title</Heading>\n  <Text>Body content constrained to lg (1024px).</Text>\n</Container>\n\n<Container size=\"md\" padding=\"lg\" as=\"article\">\n  Narrow reading column with extra horizontal padding.\n</Container>\n"
+    },
     "context-menu": {
       "category": "overlay",
       "description": "Right-click menu with actions, checkboxes, radio items, and sub-menus.",
@@ -2253,6 +2569,22 @@
           "type": "boolean",
           "default": "false",
           "description": "When true, the thead is positioned sticky at the top of the scroll container."
+        },
+        {
+          "name": "density",
+          "type": "\"compact\" | \"default\" | \"editorial\"",
+          "default": "\"default\"",
+          "description": "Vertical row padding step. Maps to a `data-density` attribute on the root, which sets the `--dt-row-py` custom property the table's cells consume. `\"compact\"` = 8px (sub-content density: long lists, narrow viewports). `\"default\"` = 12px (current behaviour; backward-compatible with consumers that don't pass the prop). `\"editorial\"` = 20px (generous; each row reads as a card; high-design admin patterns). Themes can override per-density values without forking the component by targeting `[data-density=\"…\"]` from their own selector.\n"
+        },
+        {
+          "name": "rowTone",
+          "type": "(row: TData) => \"live\" | \"warn\" | \"scheduled\" | \"sold\" | \"draft\" | \"danger\" | \"info\" | undefined",
+          "description": "Map each data row to a semantic tone for a subtle background tint. `live` and `sold` resolve to `--surface-success-subtle`, `warn` to `--surface-warning-subtle`, `danger` to `--surface-error-subtle`, `info` to `--surface-info-subtle`. `scheduled` and `draft` render on the default surface (no tint) to keep visual signal focused on actionable rows. Tone names mirror StatusBadge / StatusDot so a row tagged \"live\" reads consistently with a \"live\" badge inside the row.\n"
+        },
+        {
+          "name": "onRowClick",
+          "type": "(row: TData) => void",
+          "description": "When supplied, every data row becomes a keyboard-activatable target: `role=\"button\"` (only when `enableRowSelection` is off — see below), `tabIndex={0}`, click + Enter/Space dispatch the handler, and a `data-clickable=\"true\"` attribute drives the hover and focus affordance. The injected selection-checkbox cell stops propagation, so clicking the checkbox does not trigger the row click. When selection is enabled, the row keeps its semantic `tr` role to avoid the nested-interactive accessibility violation — click/keyboard still work via the explicit handlers.\n"
         }
       ],
       "dependencies": [
@@ -2263,6 +2595,7 @@
       "tokens_used": [
         "--border-default",
         "--border-strong",
+        "--dt-row-py",
         "--focus-ring-color",
         "--focus-ring-offset",
         "--focus-ring-width",
@@ -2279,10 +2612,18 @@
         "--spacing-2",
         "--spacing-3",
         "--spacing-4",
+        "--spacing-5",
         "--spacing-6",
         "--spacing-8",
         "--surface-card",
+        "--surface-error-subtle",
+        "--surface-info-subtle",
+        "--surface-interactive-active",
+        "--surface-interactive-default",
+        "--surface-selected",
         "--surface-subtle",
+        "--surface-success-subtle",
+        "--surface-warning-subtle",
         "--text-primary",
         "--text-quaternary",
         "--text-secondary",
@@ -3276,6 +3617,66 @@
       ],
       "example": "<FullscreenOverlay>\n  <FullscreenOverlayTrigger>Expand</FullscreenOverlayTrigger>\n  <FullscreenOverlayContent>\n    <p>Full-screen content here</p>\n  </FullscreenOverlayContent>\n</FullscreenOverlay>\n"
     },
+    "grid": {
+      "category": "layout",
+      "description": "CSS Grid wrapper with token-driven gap, responsive column count, and explicit `grid-template-columns` escape hatch.",
+      "when_to_use": [
+        "Equal-width column layouts (2-col, 3-col, 4-col, etc.)",
+        "Responsive column counts that change at breakpoints",
+        "Asymmetric layouts via a `grid-template-columns` string (e.g. `\"1fr 2fr\"`)"
+      ],
+      "when_not_to_use": [
+        "Single-axis arrangements (use Stack or Inline)",
+        "Asymmetric tile grids with explicit spans (use BentoGrid)",
+        "Form field layouts (use Stack with Field)"
+      ],
+      "props": [
+        {
+          "name": "as",
+          "type": "keyof JSX.IntrinsicElements",
+          "default": "'div'",
+          "description": "HTML element to render"
+        },
+        {
+          "name": "columns",
+          "type": "number | ResponsiveProp<number> | string",
+          "default": "1",
+          "description": "Column count (number or responsive map) or explicit `grid-template-columns` string"
+        },
+        {
+          "name": "gap",
+          "type": "GridSpacing | ResponsiveProp<GridSpacing>",
+          "default": "'md'",
+          "description": "Space between cells"
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end' | 'stretch'",
+          "description": "Block-axis (vertical) alignment within cells"
+        },
+        {
+          "name": "justify",
+          "type": "'start' | 'center' | 'end' | 'stretch'",
+          "description": "Inline-axis (horizontal) alignment within cells"
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--grid-cols",
+        "--grid-cols-lg",
+        "--grid-cols-md",
+        "--grid-cols-sm",
+        "--grid-cols-xl",
+        "--grid-gap",
+        "--grid-gap-lg",
+        "--grid-gap-md",
+        "--grid-gap-sm",
+        "--grid-gap-xl",
+        "--grid-template-columns",
+        "--spacing-4"
+      ],
+      "example": "<Grid columns={3} gap=\"md\">\n  <Card>One</Card>\n  <Card>Two</Card>\n  <Card>Three</Card>\n</Grid>\n\n<Grid columns={{ base: 1, md: 2, lg: 4 }} gap={{ base: \"sm\", md: \"md\" }}>\n  Responsive grid\n</Grid>\n\n<Grid columns=\"1fr 2fr\" gap=\"lg\">\n  Sidebar + main\n</Grid>\n"
+    },
     "heading": {
       "category": "typography",
       "description": "A semantic heading component (h1-h6) with independent size and weight variants.",
@@ -3491,6 +3892,61 @@
       ],
       "example": "<Image\n  src=\"/photos/hero.jpg\"\n  alt=\"Mountain landscape\"\n  aspectRatio=\"video\"\n/>\n\n<Image\n  src={user.avatar}\n  alt={user.name}\n  aspectRatio=\"square\"\n  objectFit=\"cover\"\n  fallback={<span>No photo</span>}\n/>\n"
     },
+    "inline": {
+      "category": "layout",
+      "description": "Horizontal flex container with token-driven gap, alignment, optional wrap, and `as` polymorphism.",
+      "when_to_use": [
+        "Laying out a row of buttons, chips, badges, or icons",
+        "Toolbar-style horizontal groupings",
+        "Anywhere you would write `flex items-center gap-N` in Tailwind"
+      ],
+      "when_not_to_use": [
+        "Vertical arrangements (use Stack)",
+        "Two-dimensional grids (use Grid)",
+        "Layouts that need to align to a specific column count (use Grid)"
+      ],
+      "props": [
+        {
+          "name": "as",
+          "type": "keyof JSX.IntrinsicElements",
+          "default": "'div'",
+          "description": "HTML element to render"
+        },
+        {
+          "name": "gap",
+          "type": "InlineSpacing | ResponsiveProp<InlineSpacing>",
+          "default": "'md'",
+          "description": "Space between children"
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'",
+          "default": "'center'",
+          "description": "Cross-axis alignment"
+        },
+        {
+          "name": "justify",
+          "type": "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'",
+          "description": "Main-axis alignment"
+        },
+        {
+          "name": "wrap",
+          "type": "boolean",
+          "default": "false",
+          "description": "Allow children to wrap onto multiple lines"
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--inline-gap",
+        "--inline-gap-lg",
+        "--inline-gap-md",
+        "--inline-gap-sm",
+        "--inline-gap-xl",
+        "--spacing-4"
+      ],
+      "example": "<Inline gap=\"sm\">\n  <Button>Save</Button>\n  <Button variant=\"secondary\">Cancel</Button>\n</Inline>\n\n<Inline gap=\"xs\" wrap>\n  {tags.map(t => <Badge key={t}>{t}</Badge>)}\n</Inline>\n"
+    },
     "input": {
       "category": "form",
       "description": "A text input component with focus and validation states.",
@@ -4386,12 +4842,23 @@
           "type": "'sm' | 'md' | 'lg'",
           "default": "md",
           "description": "Controls vertical rhythm and title size."
-        }
-      ],
+        },
+        {
+          "name": "titleSize",
+          "type": "'default' | 'marquee' | string",
+          "description": "Title font-size override, orthogonal to `size`. `\"default\"` and `\"marquee\"` are tokens that map to `data-title-size` attributes (marquee renders at the `--page-header-title-size` custom property, defaulting to 3.5rem). Any other string is forwarded as a raw CSS length on an inline `--page-header-title-size` declaration and rendered with the marquee rule.\n"
+        },
+        {
+          "name": "titleFamily",
+          "type": "'heading' | 'display' | string",
+          "description": "Title font-family override. `\"heading\"` and `\"display\"` are tokens that map to `data-title-family` attributes; `\"display\"` resolves to `var(--font-display, var(--font-family-heading, inherit))` so themes without a display font degrade to the heading family. Any other string is forwarded as a raw CSS family on an inline `--page-header-title-family` declaration.\n"
+        }
+      ],
       "dependencies": [
         "class-variance-authority"
       ],
       "tokens_used": [
+        "--font-display",
         "--font-family-heading",
         "--font-size-2xl",
         "--font-size-3xl",
@@ -4404,6 +4871,8 @@
         "--letter-spacing-wide",
         "--line-height-relaxed",
         "--line-height-tight",
+        "--page-header-title-family",
+        "--page-header-title-size",
         "--spacing-1",
         "--spacing-2",
         "--spacing-3",
@@ -4414,7 +4883,7 @@
         "--text-secondary",
         "--text-tertiary"
       ],
-      "example": "<PageHeader\n  eyebrow=\"Blacklight Admin\"\n  title=\"Customers\"\n  description=\"Manage customer accounts, billing, and access.\"\n  actions={\n    <>\n      <Button variant=\"outline\">Export</Button>\n      <Button>New customer</Button>\n    </>\n  }\n/>\n"
+      "example": "<PageHeader\n  eyebrow=\"Blacklight Admin\"\n  title=\"Customers\"\n  description=\"Manage customer accounts, billing, and access.\"\n  actions={\n    <>\n      <Button variant=\"outline\">Export</Button>\n      <Button>New customer</Button>\n    </>\n  }\n/>\n\n// Marquee title, display font (editorial admin hero)\n<PageHeader\n  eyebrow=\"Sat · Apr 27 · 22:00 — 04:00 · Two events\"\n  title=\"Tonight\"\n  titleSize=\"marquee\"\n  titleFamily=\"display\"\n/>\n"
     },
     "pagination": {
       "category": "navigation",
@@ -4677,7 +5146,8 @@
         "File upload progress",
         "Multi-step form or wizard completion",
         "Loading or processing indicators with known progress",
-        "Profile completeness or quota usage"
+        "Profile completeness or quota usage",
+        "Static admin-chrome capacity meters (KPI strips, time-until indicators) — use `size=\"thin\"` and `animate={false}`"
       ],
       "when_not_to_use": [
         "Indeterminate loading with no known progress (use Skeleton or a spinner)",
@@ -4690,6 +5160,18 @@
           "name": "value",
           "type": "number",
           "description": "Current progress value from 0 to 100"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"thin\"",
+          "default": "\"default\"",
+          "description": "Track size. `\"thin\"` renders a 4px-tall capacity bar for static admin chrome."
+        },
+        {
+          "name": "animate",
+          "type": "boolean",
+          "default": "true",
+          "description": "Whether the indicator transitions on value change. Set to `false` for static chrome."
         }
       ],
       "dependencies": [
@@ -4700,9 +5182,59 @@
         "--motion-duration-300",
         "--motion-easing-default",
         "--radius-full",
+        "--surface-interactive-active",
         "--surface-muted"
       ],
-      "example": "<Progress value={65} />\n"
+      "example": "<Progress value={65} />\n\n{/* Static 4px chrome (e.g. door-open capacity meter — caller normalizes 0-1 to 0-100) */}\n<Progress\n  value={Math.round(ratio * 100)}\n  size=\"thin\"\n  animate={false}\n  aria-label=\"Time until door opens\"\n/>\n"
+    },
+    "quick-actions": {
+      "category": "navigation",
+      "description": "Vertical list of action rows pairing a left-aligned label with a right-aligned Kbd shortcut.",
+      "when_to_use": [
+        "Dashboard side-rail \"quick\" panels surfacing keyboard discoverability",
+        "Inline help cards beneath a section header (\"What can I do here\")",
+        "Command-palette preview lists showing the top shortcuts",
+        "Anywhere a short list of label + hotkey pairs needs consistent alignment"
+      ],
+      "when_not_to_use": [
+        "Rows with leading icons, counts, or trailing meta data (use RightRailList)",
+        "Modal command palette with filtering (use the Command primitive)",
+        "Single-key shortcut chrome inline with text (use Kbd directly)",
+        "Long lists where keyboard activation is the primary affordance (use a menu)"
+      ],
+      "props": [
+        {
+          "name": "actions",
+          "type": "QuickAction[]",
+          "description": "Array of { id, label, keys } entries. Each row renders the label on the left and a Kbd composed from `keys` on the right.\n"
+        },
+        {
+          "name": "onActivate",
+          "type": "(id: string) => void",
+          "description": "When supplied, rows render as activatable buttons. Click, Enter, and Space all fire the handler with the row's id. When omitted, rows are display-only list items.\n"
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--border-focus",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-sm",
+        "--motion-duration-150",
+        "--motion-easing-default",
+        "--radius-sm",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--surface-card",
+        "--surface-muted",
+        "--text-primary",
+        "--text-secondary"
+      ],
+      "example": "<QuickActions\n  aria-label=\"Quick actions\"\n  actions={[\n    { id: \"new\", label: \"New event\", keys: [\"N\"] },\n    { id: \"cmd\", label: \"Open command\", keys: [\"⌘\", \"K\"] },\n    { id: \"switch\", label: \"Switch venue\", keys: [\"⌘\", \"O\"] },\n    { id: \"help\", label: \"Help\", keys: [\"?\"] },\n  ]}\n/>\n"
     },
     "radio-group": {
       "category": "form",
@@ -4793,6 +5325,120 @@
       ],
       "example": "<RadiusScale steps={[\n  { token: \"--radius-sm\", name: \"sm\", px: 2 },\n  { token: \"--radius-md\", name: \"md\", px: 4 },\n  { token: \"--radius-full\", name: \"full\", px: 9999 },\n]} />\n"
     },
+    "score-indicator": {
+      "category": "admin",
+      "description": "Compact circular ring visualization for percentage or ratio metrics — health score, uptime, engagement, capacity.",
+      "when_to_use": [
+        "Rendering a percentage / ratio metric inside an admin dashboard facts row",
+        "Health, uptime, engagement, capacity, and other \"x out of y\" indicators",
+        "Compact placement next to a value where a full Progress bar would be too tall",
+        "Auto-toned status display where the color should track the underlying ratio"
+      ],
+      "when_not_to_use": [
+        "Long-form completion progress (use Progress)",
+        "Multi-segment pie / donut breakdowns (use a chart primitive)",
+        "Animated count-up reveals (out of scope — wrap with your own animation)",
+        "Linear capacity bars (use Progress with size=\"thin\")"
+      ],
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "tone": [
+          "success",
+          "warning",
+          "destructive",
+          "info",
+          "neutral"
+        ],
+        "denominator": [
+          "none",
+          "trailing",
+          "below"
+        ]
+      },
+      "props": [
+        {
+          "name": "value",
+          "type": "number",
+          "required": true,
+          "description": "Current value."
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "default": "100",
+          "description": "Maximum value the score can reach."
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "\"md\"",
+          "description": "Ring size. sm=24px, md=36px, lg=56px."
+        },
+        {
+          "name": "tone",
+          "type": "\"auto\" | \"success\" | \"warning\" | \"destructive\" | \"info\" | \"neutral\"",
+          "default": "\"auto\"",
+          "description": "Color treatment. \"auto\" derives from the value/max ratio."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "description": "Override the default \"X out of Y\" aria-label."
+        },
+        {
+          "name": "denominator",
+          "type": "\"none\" | \"trailing\" | \"below\"",
+          "default": "\"trailing\"",
+          "description": "Where to render the \"/ N\" denominator label."
+        },
+        {
+          "name": "format",
+          "type": "(value: number, max: number) => string",
+          "description": "Custom formatter for the displayed value. Defaults to rounded integer."
+        }
+      ],
+      "dependencies": [
+        "class-variance-authority",
+        "@phosphor-icons/react",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--font-size-base",
+        "--font-size-sm",
+        "--font-size-xs",
+        "--font-weight-regular",
+        "--font-weight-semibold",
+        "--line-height-tight",
+        "--motion-duration-150",
+        "--motion-duration-500",
+        "--motion-easing-default",
+        "--radius-full",
+        "--score-indicator-center-bg",
+        "--score-indicator-icon-color",
+        "--score-indicator-stroke-color",
+        "--score-indicator-track-color",
+        "--score-indicator-value-color",
+        "--spacing-1",
+        "--spacing-2",
+        "--surface-card",
+        "--surface-error-subtle",
+        "--surface-info-subtle",
+        "--surface-success-subtle",
+        "--surface-warning-subtle",
+        "--text-error",
+        "--text-info",
+        "--text-primary",
+        "--text-success",
+        "--text-tertiary",
+        "--text-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"
+    },
     "scroll-area": {
       "category": "layout",
       "description": "Custom-styled scrollable container with thin scrollbar overlays.",
@@ -4877,6 +5523,52 @@
       ],
       "example": "<SearchInput placeholder=\"Search...\" onClear={() => setValue('')} />\n"
     },
+    "section-header": {
+      "category": "navigation",
+      "description": "Compact section-divider primitive with an uppercase title and optional right-aligned meta label. Sized for in-page content sectioning, distinct from the page-level PageHeader.",
+      "when_to_use": [
+        "Dividing a page body into stacked sections (dashboard \"Tonight's events\", \"Activity\", \"This week\")",
+        "Pairing a small uppercase label with a count, timestamp, or status on the right",
+        "Establishing visual rhythm across 3-8 sections on a single page",
+        "Replacing repeated inline eyebrow-row markup with a single primitive"
+      ],
+      "when_not_to_use": [
+        "Page-level hero with title, description, breadcrumb, and actions (use PageHeader)",
+        "In-content typographic headings — h2 / h3 inside an article (use Heading)",
+        "Action-bearing headers with buttons or menus (use PageHeader)",
+        "Sticky table-section headers with sorting controls"
+      ],
+      "props": [
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "Uppercase tracking label rendered on the left."
+        },
+        {
+          "name": "meta",
+          "type": "React.ReactNode",
+          "description": "Optional right-aligned meta — count, timestamp, status."
+        },
+        {
+          "name": "as",
+          "type": "'header' | 'div' | 'section'",
+          "default": "header",
+          "description": "Root element tag."
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--font-size-sm",
+        "--font-size-xs",
+        "--font-weight-medium",
+        "--spacing-3",
+        "--spacing-4",
+        "--surface-subtle",
+        "--text-tertiary"
+      ],
+      "example": "<SectionHeader title=\"Tonight's events\" meta=\"2 events\" />\n<SectionHeader title=\"Activity\" meta=\"last hour\" />\n<SectionHeader title=\"Top promoters · 30d\" />\n"
+    },
     "select": {
       "category": "form",
       "description": "An accessible select component built on Radix UI Select with all sub-components.",
@@ -5485,6 +6177,116 @@
       ],
       "example": "<SpacingScale steps={[\n  { token: \"--spacing-1\", name: \"1\", px: 4, rem: \"0.25rem\" },\n  { token: \"--spacing-2\", name: \"2\", px: 8, rem: \"0.5rem\" },\n  { token: \"--spacing-4\", name: \"4\", px: 16, rem: \"1rem\" },\n]} />\n"
     },
+    "sparkline": {
+      "category": "data-display",
+      "description": "A decorative inline SVG mini-trend chart for stat-card trend slots and dense data contexts. Renders a single polyline from a numeric series with zero dependencies.",
+      "when_to_use": [
+        "Trend slot inside a StatCard or KpiCard (e.g. \"RSVPs tonight\" with a 12-point series)",
+        "Compact at-a-glance trend cues in dense tables, dashboards, or admin surfaces",
+        "Multi-card KPI strips where each card needs a tiny visual trend hint",
+        "Anywhere a 50-line decorative trend SVG would otherwise be rebuilt locally"
+      ],
+      "when_not_to_use": [
+        "Interactive charts with tooltips, hover state, or axis labels (use the `chart` primitive)",
+        "Multi-series overlays or stacked datasets",
+        "Standalone data visualizations that need to be independently navigable by assistive tech",
+        "Area fills, sparkbars, sparkdots — these are separate primitives"
+      ],
+      "props": [
+        {
+          "name": "values",
+          "type": "number[]",
+          "required": true,
+          "description": "Numeric series. Minimum 2 values required — anything shorter renders nothing."
+        },
+        {
+          "name": "width",
+          "type": "number",
+          "default": 96,
+          "description": "SVG width in px."
+        },
+        {
+          "name": "height",
+          "type": "number",
+          "default": 22,
+          "description": "SVG height in px."
+        },
+        {
+          "name": "color",
+          "type": "string",
+          "default": "var(--accent-primary)",
+          "description": "Stroke color. Accepts any CSS color string — token, hex, hsl, oklch."
+        },
+        {
+          "name": "strokeWidth",
+          "type": "number",
+          "default": 1.5,
+          "description": "Stroke width in px."
+        },
+        {
+          "name": "fluid",
+          "type": "boolean",
+          "default": false,
+          "description": "When true, the rendered `<svg>` omits its `width` attribute so it fills its container (the `viewBox` preserves the aspect ratio). A CSS class forces `width 100%`, `height auto`, `display block`. Use inside flexible cards where the consumer would otherwise force `width 100%` via CSS.\n"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "When supplied, the SVG becomes a labeled image and is announced. Omit for decorative use."
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [],
+      "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"
+    },
+    "stack": {
+      "category": "layout",
+      "description": "Vertical flex container with token-driven gap, alignment, and `as` polymorphism.",
+      "when_to_use": [
+        "Stacking content vertically with a consistent token-spaced gap",
+        "Form sections, card bodies, page content blocks",
+        "Anywhere you would write `flex flex-col gap-N` in Tailwind"
+      ],
+      "when_not_to_use": [
+        "Horizontal arrangements (use Inline)",
+        "Two-dimensional grids (use Grid)",
+        "When you need centered max-width chrome (use Container)"
+      ],
+      "props": [
+        {
+          "name": "as",
+          "type": "keyof JSX.IntrinsicElements",
+          "default": "'div'",
+          "description": "HTML element to render"
+        },
+        {
+          "name": "gap",
+          "type": "StackSpacing | ResponsiveProp<StackSpacing>",
+          "default": "'md'",
+          "description": "Space between children"
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end' | 'stretch'",
+          "description": "Cross-axis alignment"
+        },
+        {
+          "name": "justify",
+          "type": "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'",
+          "description": "Main-axis alignment"
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--spacing-4",
+        "--stack-gap",
+        "--stack-gap-lg",
+        "--stack-gap-md",
+        "--stack-gap-sm",
+        "--stack-gap-xl"
+      ],
+      "example": "<Stack gap=\"md\">\n  <Heading>Title</Heading>\n  <Text>Body copy</Text>\n  <Button>Action</Button>\n</Stack>\n\n<Stack gap={{ base: \"sm\", md: \"lg\" }} align=\"center\">\n  Responsive gap, centered\n</Stack>\n"
+    },
     "stat-card": {
       "category": "admin",
       "description": "Admin dashboard metric card with label, value, delta, trend, and footer slots.",
@@ -5583,6 +6385,7 @@
         "--font-size-2xl",
         "--font-size-3xl",
         "--font-size-4xl",
+        "--font-size-6xl",
         "--font-size-sm",
         "--font-size-xs",
         "--font-weight-medium",
@@ -5604,8 +6407,10 @@
         "--spacing-3",
         "--spacing-4",
         "--spacing-5",
+        "--stat-card-trend-padding-top",
         "--stat-card-value-font",
         "--stat-card-value-size",
+        "--stat-card-value-size-hero",
         "--surface-card",
         "--text-danger",
         "--text-primary",
@@ -5788,6 +6593,7 @@
         "Communicating operational state in admin tables, detail pages, and dashboards",
         "Labeling service health (healthy, degraded, down)",
         "Labeling job or task lifecycle (queued, running, pending, complete, failed, idle)",
+        "Labeling admin-ui event state (live, warn, scheduled, sold, draft)",
         {
           "Any place you want a consistent \"Status": "X\" accessible announcement"
         }
@@ -5807,7 +6613,12 @@
           "pending",
           "queued",
           "idle",
-          "complete"
+          "complete",
+          "live",
+          "warn",
+          "scheduled",
+          "sold",
+          "draft"
         ],
         "tone": [
           "subtle",
@@ -5861,6 +6672,54 @@
       ],
       "example": "<StatusBadge status=\"healthy\" />\n<StatusBadge status=\"running\" pulse />\n<StatusBadge status=\"failed\" tone=\"filled\" />\n"
     },
+    "status-dot": {
+      "category": "data-display",
+      "description": "A 6×6px tone-tinted indicator dot — composes inside badges, table rows, activity feed items, and inline status text.",
+      "when_to_use": [
+        "As the leading slot of an ActivityFeed item to convey activity tone",
+        "Inside a Badge to add a colored status indicator without StatusBadge's chrome",
+        "In table cells to mark row status without a full label",
+        "Inline with status text where the surrounding label already announces meaning"
+      ],
+      "when_not_to_use": [
+        "Standalone status without an adjacent label — prefer StatusBadge for a full labelled control",
+        "Larger callouts or hero-scale indicators — single 6px size is intentional",
+        "As an interactive affordance — StatusDot is a pure indicator with no behaviour"
+      ],
+      "variants": {
+        "tone": [
+          "mint",
+          "warn",
+          "muted",
+          "danger",
+          "info"
+        ]
+      },
+      "props": [
+        {
+          "name": "tone",
+          "type": "\"mint\" | \"warn\" | \"muted\" | \"danger\" | \"info\"",
+          "default": "\"muted\"",
+          "description": "Tone. Drives the dot fill via a Visor semantic token."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "optional": true,
+          "description": "When supplied, the dot is announced as a labeled image (role=\"img\"). Omit when the dot is paired with adjacent status text — surrounding labels carry the semantic meaning and the dot stays decorative.\n"
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--radius-full",
+        "--surface-error-default",
+        "--surface-info-default",
+        "--surface-success-default",
+        "--surface-warning-default",
+        "--text-tertiary"
+      ],
+      "example": "<StatusDot tone=\"mint\" />\n<Badge>\n  <StatusDot tone=\"warn\" />\n  96% capacity\n</Badge>\n<StatusDot tone=\"danger\" aria-label=\"Service down\" />\n"
+    },
     "stepper": {
       "category": "navigation",
       "description": "A multi-step progress indicator with horizontal and vertical orientations and auto-derived step status.",
@@ -7537,7 +8396,7 @@
   "blocks": {
     "admin-dashboard": {
       "category": "admin",
-      "description": "Drop-in admin overview composition — PageHeader, responsive stat grid, optional secondary region, and ActivityFeed with empty-state fallback. Composes existing admin compounds, nothing to configure.",
+      "description": "Drop-in admin overview composition — PageHeader, responsive stat grid, optional secondary region, and ActivityFeed with empty-state fallback. Supports a 2-column body layout via `layout=\"split\"` (mainCol + sideCol slots) for density-rich operator screens.",
       "components_used": [
         "page-header",
         "stat-card",
@@ -7547,7 +8406,8 @@
       "when_to_use": [
         "Landing page for an admin or back-office app",
         "Overview-at-a-glance screens mixing KPIs and recent events",
-        "Any dashboard needing a title, metrics, and a recent-activity feed"
+        "Any dashboard needing a title, metrics, and a recent-activity feed",
+        "Operator screens needing a main column + right rail below the KPI strip (use `layout=\"split\"`)"
       ],
       "when_not_to_use": [
         "Data-heavy list or table pages (use admin-list-page)",
@@ -7597,7 +8457,7 @@
     },
     "admin-settings-page": {
       "category": "admin",
-      "description": "Long scrollable settings archetype with labeled sections and an optional sticky left-side nav that sync-scrolls via intersection observer. Supports flat or grouped (categorical) nav with eyebrow labels above section clusters. Supports two mutually-exclusive modes — a single global sticky save/cancel footer (default) or per-section save/revert footer rows. Composes PageHeader, Separator, Heading, Text, Button, and ConfirmDialog.",
+      "description": "Long scrollable settings archetype with labeled sections and an optional sticky left-side nav that sync-scrolls via intersection observer. Supports flat or grouped (categorical) nav with eyebrow labels above section clusters. Supports two mutually-exclusive modes — a single global sticky save/cancel footer (default) or per-section save/revert footer rows. The default footer can also be replaced entirely via the `customFooter` slot (mirrors `admin-detail-drawer`'s `customHeader` precedent) when callers need full control over the savebar layout. Composes PageHeader, Separator, Heading, Text, Button, and ConfirmDialog.",
       "components_used": [
         "page-header",
         "separator",
@@ -7677,6 +8537,23 @@
         "Single-record inline edits (use admin-detail-drawer)"
       ]
     },
+    "avatar-stack": {
+      "category": "data-display",
+      "description": "Overlapping avatar group with a `+N more` overflow indicator. Pure composition of the Avatar primitive, no new tokens or ARIA pattern.",
+      "components_used": [
+        "avatar"
+      ],
+      "when_to_use": [
+        "Compact summary of multiple members on a card or facts row",
+        "Member presence indicators on org-detail, project, or workspace summaries",
+        "Server-truncated lists where the total count is known but only the first few avatar URLs were sent down"
+      ],
+      "when_not_to_use": [
+        "Single-user contexts (use Avatar directly)",
+        "Full member directories (use a paginated list or table)",
+        "Interactive selection of members (use a list block with checkboxes)"
+      ]
+    },
     "chip-group": {
       "category": "form",
       "description": "A composable container managing selection state for ChoiceChip (single-select) and FilterChip (multi-select) chips. Mirrors Flutter Material's chip selection model.",
@@ -7693,6 +8570,26 @@
         "Large option lists with search (use Select or Combobox)"
       ]
     },
+    "command-dialog": {
+      "category": "navigation",
+      "description": "⌘K command palette block composing Visor's Command + Dialog primitives. Exposes named slots for a scope chip, grouped results with hit-highlighting, per-item meta + Kbd shortcut, and a footer hint row with result count. Binds ⌘K / Ctrl+K to toggle open by default.",
+      "components_used": [
+        "command",
+        "dialog",
+        "kbd"
+      ],
+      "when_to_use": [
+        "App-wide quick-search palette opened with ⌘K / Ctrl+K",
+        "Grouped, keyboard-driven action menus (Events / Guests / Actions)",
+        "Replacing multi-level menus with one searchable list"
+      ],
+      "when_not_to_use": [
+        "Simple dropdown selection from a short list (use Select or Combobox)",
+        "Form field autocomplete with free text input (use Combobox)",
+        "Modal confirmations or destructive prompts (use Dialog or ConfirmDialog)",
+        "Persistent inline search (use Input + filtered list directly)"
+      ]
+    },
     "configuration-panel": {
       "category": "configuration",
       "description": "A floating, glassmorphic configuration panel for organizing controls into labeled sections. Supports collapse animation, positional anchoring, and responsive stacking. Composed from Visor form components.",
@@ -7792,6 +8689,29 @@
         "Production user-facing pages"
       ]
     },
+    "export-menu": {
+      "category": "admin",
+      "description": "Export button + popover composing a format-picker radio group, optional scope checkboxes, and an async-aware Cancel/Export footer. Drop-in for any admin list's export affordance.",
+      "components_used": [
+        "button",
+        "popover",
+        "radio-group",
+        "checkbox",
+        "label",
+        "tooltip"
+      ],
+      "when_to_use": [
+        "Admin list pages with an Export button (org lists, member tables, invitation tables, roles tables, audit logs)",
+        "Anywhere a single button needs to surface format choice (CSV / JSON / PDF / XLSX) and optional scope toggles (Include archived, Include suspended) before kicking off an export",
+        "When async export work needs a built-in loading state on the submit button and a popover that stays open until the work resolves"
+      ],
+      "when_not_to_use": [
+        "Single-format exports without scope or option choices — use a plain `<Button>` instead",
+        "Scheduled / recurring exports — out of scope; needs a dedicated scheduled-export block",
+        "Email-the-export workflows where the popover needs an email recipient input (extend on the consumer side, or file a new ticket)",
+        "Public marketing pages — this is an admin-only affordance"
+      ]
+    },
     "features-grid": {
       "category": "marketing",
       "description": "A responsive grid of feature cards with icons, titles, and descriptions. Demonstrates Card + icon composition in a configurable grid layout.",
@@ -7886,6 +8806,56 @@
         "Feature comparison tables without pricing"
       ]
     },
+    "profile-menu": {
+      "category": "admin",
+      "description": "Sidebar-footer profile menu — avatar + identity row + upward-opening dropdown of account, notifications, appearance, keyboard, help, and sign-out items. Drop-in for the AdminShell sidebarFooter slot.",
+      "components_used": [
+        "avatar",
+        "dropdown-menu"
+      ],
+      "when_to_use": [
+        "Admin and dashboard apps with persistent sidebar navigation",
+        "The sidebar footer area of `AdminShell` — drop into the `sidebarFooter` prop",
+        "Anywhere you need a Mac-style user menu with shortcuts, badges, and a destructive sign-out"
+      ],
+      "when_not_to_use": [
+        "Public marketing pages (no signed-in user context)",
+        "Topbar user menus where downward opening is the convention (compose `DropdownMenu` + `Avatar` directly)",
+        "Single-action sign-out buttons (use `Button` with `variant=\"ghost\"` instead)",
+        "Loading or skeleton states (consumer renders their own skeleton until user data is ready)"
+      ]
+    },
+    "prototype-review": {
+      "category": "documentation",
+      "description": "Drop-in chrome for design-review prototypes — theme switcher, light/dark mode toggle, brand color picker, treatment tabs, viewport switcher, and a multi-viewport iframe grid. Replaces hand-rolled review HTML (BL-193 style) with a Visor-native block.",
+      "components_used": [],
+      "when_to_use": [
+        "Phase 2+ design-review prototypes that need to evaluate one or more iframe-loaded treatments",
+        "Any UI exploration where reviewers must compare treatments across themes, modes, brand colors, and viewports",
+        "Internal \"design spike\" docs where 3-4 candidate UIs must render side-by-side with shared chrome",
+        "As the visual entry point for a Linear ticket's prototype directory (replaces hand-rolled static HTML)"
+      ],
+      "when_not_to_use": [
+        "Production user-facing pages (use marketing or admin blocks)",
+        "Prototypes that already live inside a richer doc system with its own chrome (e.g. Storybook, fumadocs MDX pages)",
+        "Single-treatment reviews with no need for per-treatment switching (just embed the iframe directly)"
+      ]
+    },
+    "right-rail-list": {
+      "category": "data-display",
+      "description": "Compact vertical list block tuned for admin dashboard side rails. Each row pairs an optional leading slot (short label, avatar, badge, status dot), a primary label (typically a link), and an optional trailing meta value (count, value, tone-tinted status word). Trailing accepts default / mint / muted / warn tones that bind to the shared semantic text tokens. Supports compact density and ul / ol / div root element variants.",
+      "components_used": [],
+      "when_to_use": [
+        "Side-rail summary panels in dashboards (this-week digests, top-N rankings, status callouts)",
+        "Stacking multiple short list panels in a single column",
+        "Any compact label-plus-value row pattern where each row carries an optional leading stamp"
+      ],
+      "when_not_to_use": [
+        "Timestamped activity streams (use activity-feed)",
+        "Sortable / paginated tabular data (use data-table)",
+        "Long-form ranked lists with rich row content (use a full table or card grid)"
+      ]
+    },
     "sphere-playground": {
       "category": "visual-elements",
       "description": "An interactive demo composing the Sphere visualization with a Configuration Panel for real-time parameter control. The signature showcase for Visual Elements.",
@@ -8676,17 +9646,21 @@
       "chart",
       "marquee",
       "name-roster",
+      "sparkline",
+      "status-dot",
       "table",
       "timeline"
     ],
     "admin": [
       "activity-feed",
       "bulk-action-bar",
+      "chrome-button",
       "confirm-dialog",
       "data-table",
       "empty-state",
       "filter-bar",
       "kbd",
+      "score-indicator",
       "stat-card",
       "stat-hero",
       "status-badge"
@@ -8700,12 +9674,25 @@
       "toast",
       "tooltip"
     ],
+    "layout": [
+      "box",
+      "collapsible",
+      "container",
+      "grid",
+      "inline",
+      "scroll-area",
+      "separator",
+      "sidebar",
+      "stack"
+    ],
     "navigation": [
       "breadcrumb",
       "command",
       "navbar",
       "page-header",
       "pagination",
+      "quick-actions",
+      "section-header",
       "stepper",
       "tabs"
     ],
@@ -8714,6 +9701,7 @@
       "calendar",
       "checkbox",
       "chip",
+      "color-picker",
       "combobox",
       "date-picker",
       "date-range-picker",
@@ -8747,12 +9735,6 @@
       "heading",
       "text"
     ],
-    "layout": [
-      "collapsible",
-      "scroll-area",
-      "separator",
-      "sidebar"
-    ],
     "overlay": [
       "context-menu",
       "dialog",