@loworbitstudio/visor 1.0.0 → 1.2.1

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-05-18T21:20:42.445Z",
+  "generated_at": "2026-05-20T19:48:54.653Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -690,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.",
@@ -1687,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.",
@@ -2089,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.",
@@ -2332,6 +2570,12 @@
           "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",
@@ -2351,6 +2595,7 @@
       "tokens_used": [
         "--border-default",
         "--border-strong",
+        "--dt-row-py",
         "--focus-ring-color",
         "--focus-ring-offset",
         "--focus-ring-width",
@@ -2367,6 +2612,7 @@
         "--spacing-2",
         "--spacing-3",
         "--spacing-4",
+        "--spacing-5",
         "--spacing-6",
         "--spacing-8",
         "--surface-card",
@@ -3371,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.",
@@ -3586,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.",
@@ -4964,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.",
@@ -5764,6 +6239,54 @@
       "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.",
@@ -8014,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.",
@@ -8149,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.",
@@ -8243,6 +8806,41 @@
         "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.",
@@ -9062,6 +9660,7 @@
       "empty-state",
       "filter-bar",
       "kbd",
+      "score-indicator",
       "stat-card",
       "stat-hero",
       "status-badge"
@@ -9075,6 +9674,17 @@
       "toast",
       "tooltip"
     ],
+    "layout": [
+      "box",
+      "collapsible",
+      "container",
+      "grid",
+      "inline",
+      "scroll-area",
+      "separator",
+      "sidebar",
+      "stack"
+    ],
     "navigation": [
       "breadcrumb",
       "command",
@@ -9091,6 +9701,7 @@
       "calendar",
       "checkbox",
       "chip",
+      "color-picker",
       "combobox",
       "date-picker",
       "date-range-picker",
@@ -9124,12 +9735,6 @@
       "heading",
       "text"
     ],
-    "layout": [
-      "collapsible",
-      "scroll-area",
-      "separator",
-      "sidebar"
-    ],
     "overlay": [
       "context-menu",
       "dialog",