@loworbitstudio/visor 0.7.0 → 0.9.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-05-01T00:42:09.764Z",
+  "generated_at": "2026-05-12T02:11:40.675Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -469,6 +469,226 @@
       ],
       "example": "<Banner intent=\"warning\" position=\"sticky\">\n  <BannerTitle>Scheduled maintenance</BannerTitle>\n  <BannerDescription>The system will be down Saturday 2am-4am EST.</BannerDescription>\n  <BannerAction>\n    <Button variant=\"outline\" size=\"sm\">Learn more</Button>\n  </BannerAction>\n</Banner>\n"
     },
+    "bento-grid": {
+      "category": "data-display",
+      "description": "An asymmetric tile grid primitive with full/half span variants, per-tile aspect ratios, and contain/cover media fit modes. Designed for portfolio, case-study, and showcase layouts.",
+      "when_to_use": [
+        "Asymmetric portfolio or case-study grids where tiles have different visual weights",
+        "Hero-style layouts mixing full-width feature tiles with paired half-width tiles",
+        "Showcase grids with varied aspect ratios (21:9, 2:1, 4:3) and image fit modes",
+        "Marketing pages using Apple-style \"bento\" layouts",
+        "Any grid where tiles intentionally have different sizes or spans"
+      ],
+      "when_not_to_use": [
+        "Symmetric uniform grids where all tiles are the same size (use card-grid instead)",
+        "Simple two-column content layouts (use CSS grid or flexbox directly)",
+        "List-style data displays (use Table or DataTable)",
+        "Pinterest-style masonry layouts where tile heights vary based on content"
+      ],
+      "props": [
+        {
+          "name": "cols",
+          "type": "number | { base: number; sm?: number; md?: number; lg?: number; xl?: number }",
+          "default": "2",
+          "description": "Number of grid columns. Accepts a plain number or a responsive breakpoint map."
+        },
+        {
+          "name": "gap",
+          "type": "string",
+          "default": "\"4\"",
+          "description": "Gap between tiles as a spacing token suffix. E.g. '4' resolves to var(--spacing-4)."
+        },
+        {
+          "name": "reveal",
+          "type": "boolean",
+          "default": "false",
+          "description": "Fade + rise each tile on viewport entry, staggered by DOM order. Suppressed under prefers-reduced-motion."
+        },
+        {
+          "name": "revealStepMs",
+          "type": "number",
+          "default": "110",
+          "description": "Per-tile delay in milliseconds. Each tile's actual delay is revealStepMs × index."
+        },
+        {
+          "name": "revealThreshold",
+          "type": "number",
+          "default": "0.2",
+          "description": "IntersectionObserver threshold for the entrance trigger."
+        }
+      ],
+      "sub_components": [
+        {
+          "name": "BentoTile",
+          "description": "Individual grid tile. Renders as <article> by default, or <a> when href is provided.",
+          "props": [
+            {
+              "name": "layout",
+              "type": "\"stacked\" | \"overlay\"",
+              "default": "\"stacked\"",
+              "description": "Visual layout. stacked (default): media on top with its own aspect ratio, body below as a sibling. overlay: media fills the tile (which carries the aspect ratio), body floats over the lower portion."
+            },
+            {
+              "name": "span",
+              "type": "\"full\" | \"half\" | number",
+              "default": "\"half\"",
+              "description": "Column span: full (1/-1), half (1 col), or a numeric span count."
+            },
+            {
+              "name": "aspect",
+              "type": "\"21/9\" | \"2/1\" | \"4/3\" | \"1/1\" | string",
+              "description": "Aspect ratio. In stacked mode it shapes the media; in overlay mode it shapes the entire tile root."
+            },
+            {
+              "name": "fit",
+              "type": "\"cover\" | \"contain\"",
+              "default": "\"cover\"",
+              "description": "Media fit mode. contain adds a surface-card background plate for logos/portraits."
+            },
+            {
+              "name": "href",
+              "type": "string",
+              "description": "When provided, renders the tile root as an anchor element."
+            },
+            {
+              "name": "target",
+              "type": "string",
+              "description": "Link target (e.g. _blank). Only relevant when href is set."
+            },
+            {
+              "name": "rel",
+              "type": "string",
+              "description": "Link rel attribute. Defaults to 'noopener noreferrer' when target is _blank."
+            }
+          ]
+        },
+        {
+          "name": "BentoTileMedia",
+          "description": "Image element. Zooms 1.04× on tile hover (suppressed in fit=\"contain\" mode).",
+          "props": [
+            {
+              "name": "src",
+              "type": "string",
+              "required": true,
+              "description": "Image source URL."
+            },
+            {
+              "name": "alt",
+              "type": "string",
+              "required": true,
+              "description": "Image alt text for accessibility."
+            },
+            {
+              "name": "loading",
+              "type": "\"lazy\" | \"eager\"",
+              "default": "\"lazy\"",
+              "description": "Native image loading strategy."
+            }
+          ]
+        },
+        {
+          "name": "BentoTileBody",
+          "description": "Body container. Stretches to fill the tile in stacked mode so tiles in the same row share height."
+        },
+        {
+          "name": "BentoTileMeta",
+          "description": "Eyebrow row — uppercase, tracked, with · separators between items. Accepts an `items` array shorthand or arbitrary children.",
+          "props": [
+            {
+              "name": "items",
+              "type": "ReactNode[]",
+              "description": "Array of items rendered as spans with `·` separators between siblings. When omitted, children are used as-is."
+            }
+          ]
+        },
+        {
+          "name": "BentoTileTitle",
+          "description": "Display heading with optional hover arrow that nudges on tile hover.",
+          "props": [
+            {
+              "name": "as",
+              "type": "\"h2\" | \"h3\" | \"h4\"",
+              "default": "\"h3\"",
+              "description": "Heading element."
+            },
+            {
+              "name": "showArrow",
+              "type": "boolean",
+              "default": "false",
+              "description": "Render a ↗ arrow after the title; nudges on tile hover."
+            }
+          ]
+        },
+        {
+          "name": "BentoTileDescription",
+          "description": "Muted body text with max-width 56ch for comfortable reading. Renders as <div> (not <p>) so MDX-authored multi-line children don't create invalid <p>-in-<p> nesting."
+        },
+        {
+          "name": "BentoTileFigure",
+          "description": "Non-image hero slot — drop-in replacement for BentoTileMedia when the tile's hero is a chart, large number, or custom JSX. Inherits the same hover scale + layout-mode positioning as the media slot."
+        },
+        {
+          "name": "BentoTileHeadline",
+          "description": "Larger display heading (clamp 2rem → 3.5rem) for tiles where the heading is the primary content (manifesto / statement / headline tiles).",
+          "props": [
+            {
+              "name": "as",
+              "type": "\"h1\" | \"h2\" | \"h3\"",
+              "default": "\"h2\"",
+              "description": "Heading element."
+            }
+          ]
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--bento-cols",
+        "--bento-cols-lg",
+        "--bento-cols-md",
+        "--bento-cols-sm",
+        "--bento-cols-xl",
+        "--bento-gap",
+        "--bento-reveal-step",
+        "--bento-tile-aspect",
+        "--bento-tile-body-gap",
+        "--bento-tile-body-padding-x",
+        "--bento-tile-body-padding-y",
+        "--bento-tile-lift-hover",
+        "--bento-tile-media-scale-hover",
+        "--bento-tile-radius",
+        "--bento-tile-span",
+        "--border-focus",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-sm",
+        "--font-weight-bold",
+        "--font-weight-medium",
+        "--font-weight-normal",
+        "--line-height-tight",
+        "--motion-duration-normal",
+        "--motion-duration-slow",
+        "--motion-easing-default",
+        "--motion-easing-enter",
+        "--overlay-bg",
+        "--radius-lg",
+        "--reveal-index",
+        "--shadow-md",
+        "--shadow-sm",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--spacing-5",
+        "--surface-card",
+        "--surface-subtle",
+        "--text-primary",
+        "--text-secondary",
+        "--text-tertiary"
+      ],
+      "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"
+    },
     "breadcrumb": {
       "category": "navigation",
       "description": "A breadcrumb navigation component showing the user's location within a page hierarchy.",
@@ -1061,6 +1281,154 @@
       ],
       "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"
     },
+    "chip": {
+      "category": "form",
+      "description": "Selectable chip primitive for suggestion, tag, and filter patterns with selected/unselected states and size variants. Maps to React ToggleGroup.",
+      "when_to_use": [
+        "Displaying filterable tag or category options the user can toggle on/off",
+        "Suggestion rows (search autocomplete, style recommendations)",
+        "Multi-select filter bars where individual options are toggled independently",
+        "Any UI pattern that maps to a \"toggle group\" of labelled options"
+      ],
+      "when_not_to_use": [
+        "Single binary toggle (use Switch or Checkbox)",
+        "Navigation tabs or route selectors (use TabBar)",
+        "Dismissible labels that can be removed from a list (use a deletable tag/badge)",
+        "Triggering an action rather than selecting a state (use Button)"
+      ],
+      "variants": {
+        "variant": [
+          "default",
+          "outlined"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "props": [
+        {
+          "name": "variant",
+          "type": "\"default\" | \"outlined\"",
+          "default": "\"default\""
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "\"md\""
+        },
+        {
+          "name": "avatar",
+          "type": "React.ReactNode",
+          "optional": true
+        },
+        {
+          "name": "leadingIcon",
+          "type": "React.ReactNode",
+          "optional": true
+        },
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "optional": true
+        },
+        {
+          "name": "onDeleted",
+          "type": "() => void",
+          "optional": true
+        },
+        {
+          "name": "deleteIcon",
+          "type": "React.ReactNode",
+          "optional": true
+        },
+        {
+          "name": "deleteLabel",
+          "type": "string",
+          "default": "\"Remove\""
+        }
+      ],
+      "sub_components": [
+        {
+          "name": "ChoiceChip",
+          "element": "button",
+          "description": "Radio-style single-select chip. Renders with role=\"radio\" and aria-checked. Use inside a ChipGroup with type=\"single\".",
+          "props": [
+            {
+              "name": "selected",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "onPressed",
+              "type": "() => void",
+              "optional": true
+            },
+            {
+              "name": "value",
+              "type": "string",
+              "optional": true
+            }
+          ]
+        },
+        {
+          "name": "FilterChip",
+          "element": "button",
+          "description": "Toggle-style multi-select chip. Renders with role=\"checkbox\" and aria-checked. Use inside a ChipGroup with type=\"multiple\".",
+          "props": [
+            {
+              "name": "selected",
+              "type": "boolean",
+              "default": "false"
+            },
+            {
+              "name": "onPressed",
+              "type": "() => void",
+              "optional": true
+            },
+            {
+              "name": "value",
+              "type": "string",
+              "optional": true
+            }
+          ]
+        }
+      ],
+      "dependencies": [
+        "class-variance-authority",
+        "@phosphor-icons/react"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-focus",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-body",
+        "--font-size-base",
+        "--font-size-sm",
+        "--font-size-xs",
+        "--font-weight-medium",
+        "--motion-duration-150",
+        "--motion-easing-default",
+        "--opacity-40",
+        "--radius-full",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--stroke-width-thin",
+        "--surface-accent-default",
+        "--surface-accent-subtle",
+        "--surface-card",
+        "--surface-interactive-hover",
+        "--surface-muted",
+        "--text-link",
+        "--text-primary",
+        "--text-secondary"
+      ],
+      "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"
+    },
     "code-block": {
       "category": "typography",
       "description": "A lightweight code display component with optional line numbers, copy-to-clipboard, and language badge.",
@@ -2755,7 +3123,7 @@
         "--surface-card",
         "--surface-muted",
         "--text-primary",
-        "--text-tertiary"
+        "--text-secondary"
       ],
       "example": "<FontShowcase\n  token=\"--font-heading\"\n  role=\"Heading & Body\"\n  familyName=\"Satoshi\"\n  weights={[{ label: \"Regular\", value: 400 }, { label: \"Bold\", value: 700 }]}\n/>\n"
     },
@@ -3364,6 +3732,98 @@
       ],
       "example": "<Lightbox\n  images={[\n    { src: \"/photo-1.jpg\", alt: \"Beach sunset\" },\n    { src: \"/photo-2.jpg\", alt: \"Mountain view\" },\n  ]}\n  open={isOpen}\n  onOpenChange={setIsOpen}\n>\n  <LightboxTrigger>\n    <button>View gallery</button>\n  </LightboxTrigger>\n  <LightboxContent />\n</Lightbox>\n"
     },
+    "marquee": {
+      "category": "data-display",
+      "description": "A multi-band counter-flow infinite-scroll primitive for continuous animated content strips.",
+      "when_to_use": [
+        "Trusted-by logo strips on marketing / landing pages",
+        "News tickers or announcement banners that cycle continuously",
+        "Tag clouds or label lists that benefit from animated browsing",
+        "Feature highlights that need ambient motion without user interaction",
+        "Counter-flow dual-band patterns that convey momentum and volume"
+      ],
+      "when_not_to_use": [
+        "Paginated or interactive content browsing (use Carousel)",
+        "Content that users need to read or click (pause-on-hover helps, but prefer static lists)",
+        "Environments where animation is not appropriate (prefers-reduced-motion renders static)",
+        "Primary navigation or critical actions (animation reduces discoverability)"
+      ],
+      "props": [
+        {
+          "name": "bands",
+          "type": "MarqueeBand[]",
+          "description": "Multi-band configuration array. When provided, top-level items/durationSec/separator are ignored.",
+          "default": "undefined"
+        },
+        {
+          "name": "items",
+          "type": "ReactNode[]",
+          "description": "Single-band shorthand: items to scroll. Used when bands is not provided.",
+          "default": "undefined"
+        },
+        {
+          "name": "durationSec",
+          "type": "number",
+          "description": "Duration of one full scroll cycle in seconds (single-band shorthand). Defaults to 40s so descender-rich items at marketing-display sizes have a calm, readable scroll. For ticker-style strips at body-text size, pass a lower value (e.g. 20).",
+          "default": 40
+        },
+        {
+          "name": "separator",
+          "type": "ReactNode | string",
+          "description": "Separator rendered between items (single-band shorthand).",
+          "default": "undefined"
+        },
+        {
+          "name": "pauseOnHover",
+          "type": "boolean",
+          "description": "When true, scrolling pauses on hover.",
+          "default": true
+        },
+        {
+          "name": "gap",
+          "type": "CSSProperties['gap']",
+          "description": "Gap between items. Accepts any CSS gap value.",
+          "default": "var(--spacing-6, 1.5rem)"
+        },
+        {
+          "name": "renderItem",
+          "type": "(item, index) => ReactNode",
+          "description": "Custom render function for each item.",
+          "default": "undefined"
+        },
+        {
+          "name": "renderSeparator",
+          "type": "(separator, index) => ReactNode",
+          "description": "Custom render function for the separator.",
+          "default": "undefined"
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--font-size-sm",
+        "--font-weight-medium",
+        "--line-height-normal",
+        "--marquee-duration",
+        "--marquee-fade-width",
+        "--marquee-gap",
+        "--marquee-item-color",
+        "--marquee-item-font-size",
+        "--marquee-item-font-weight",
+        "--marquee-item-letter-spacing",
+        "--marquee-item-line-height",
+        "--marquee-separator-color",
+        "--marquee-separator-font-size",
+        "--motion-easing-linear",
+        "--spacing-12",
+        "--spacing-4",
+        "--spacing-6",
+        "--text-primary",
+        "--text-tertiary"
+      ],
+      "example": "<Marquee\n  items={['Acme Corp', 'Vercel', 'Low Orbit Studio', 'Figma', 'Notion']}\n  durationSec={20}\n  separator=\"·\"\n/>\n\n<Marquee\n  bands={[\n    { items: clients, direction: 'left', durationSec: 40, separator: '●' },\n    { items: clientsReversed, direction: 'right', durationSec: 50, separator: '○' },\n  ]}\n  pauseOnHover\n  gap=\"2.5rem\"\n/>\n"
+    },
     "menubar": {
       "category": "overlay",
       "description": "Horizontal menu bar with dropdown menus, keyboard navigation, and full a11y support.",
@@ -3528,6 +3988,94 @@
       ],
       "example": "<MotionDuration durations={[\n  { token: \"--motion-duration-200\", name: \"200\", ms: 200 },\n  { token: \"--motion-duration-300\", name: \"300\", ms: 300 },\n]} />\n<MotionEasing easings={[\n  { token: \"--motion-easing-ease-out\", name: \"ease-out\", value: \"cubic-bezier(0, 0, 0.2, 1)\" },\n]} />\n"
     },
+    "name-roster": {
+      "category": "data-display",
+      "description": "A column-flow alphabetical list of named items with a dot-prefix indicator and a highlighted-row variant for featured or owned entries.",
+      "when_to_use": [
+        "Displaying a flat list of clients, contributors, alumni, or team members",
+        "Marketing pages where names need to flow across responsive column counts (1→2→3→4)",
+        "Any list where some entries should be visually distinguished (e.g. LO-owned products, featured clients)",
+        "Directory-style lists where column-flow balance is preferred over strict grid alignment"
+      ],
+      "when_not_to_use": [
+        "Lists that require click handlers, selection, or filter/search (different primitive)",
+        "Grouped lists with alphabetical separators (extend with a heading layer)",
+        "Lists that need two-letter avatars or icons next to names",
+        "Short single-item or two-item lists where layout overhead isn't worth it"
+      ],
+      "props": [
+        {
+          "name": "columns",
+          "type": "number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number }",
+          "default": "1",
+          "description": "Number of CSS columns. Pass a plain number or a breakpoint map for responsive layouts."
+        },
+        {
+          "name": "sort",
+          "type": "\"alpha\" | \"none\"",
+          "default": "\"none\"",
+          "description": "Sort order. \"alpha\" applies localeCompare client-side; \"none\" preserves insertion order."
+        },
+        {
+          "name": "items",
+          "type": "NameRosterItemData[]",
+          "default": "undefined",
+          "description": "Shorthand array of { name, highlighted? } items. Takes precedence over children when provided."
+        },
+        {
+          "name": "dot",
+          "type": "boolean",
+          "default": "true",
+          "description": "Show the dot-prefix indicator on each item."
+        },
+        {
+          "name": "as",
+          "type": "\"ul\" | \"ol\"",
+          "default": "\"ul\"",
+          "description": "HTML list element to render."
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--font-size-sm",
+        "--font-weight-medium",
+        "--font-weight-normal",
+        "--line-height-normal",
+        "--motion-duration-150",
+        "--motion-duration-300",
+        "--motion-easing-default",
+        "--radius-full",
+        "--roster-columns",
+        "--roster-columns-lg",
+        "--roster-columns-md",
+        "--roster-columns-sm",
+        "--roster-columns-xl",
+        "--roster-dot-color",
+        "--roster-dot-color-highlighted",
+        "--roster-dot-color-hover",
+        "--roster-dot-glow-hover",
+        "--roster-dot-size",
+        "--roster-item-color",
+        "--roster-item-color-highlighted",
+        "--roster-item-color-hover",
+        "--roster-item-font-size",
+        "--roster-item-font-weight",
+        "--roster-item-font-weight-highlighted",
+        "--roster-item-hover-transform",
+        "--roster-item-letter-spacing",
+        "--roster-item-line-height",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-8",
+        "--surface-accent-default",
+        "--surface-accent-strong",
+        "--text-primary",
+        "--text-secondary"
+      ],
+      "example": "{/* Shorthand with responsive columns and highlighted rows */}\n<NameRoster\n  columns={{ base: 1, sm: 2, md: 3, lg: 4 }}\n  sort=\"alpha\"\n  items={[\n    { name: 'ANIMAL' },\n    { name: 'Blacklight', highlighted: true },\n    { name: 'Knowmentum', highlighted: true },\n    { name: 'SCRUFF' },\n    { name: 'Visor', highlighted: true },\n  ]}\n/>\n\n{/* Children mode with anchor nodes */}\n<NameRoster columns={{ base: 1, md: 3 }}>\n  <NameRosterItem><a href=\"/clients/scruff\">SCRUFF</a></NameRosterItem>\n  <NameRosterItem highlighted><a href=\"/products/visor\">Visor</a></NameRosterItem>\n</NameRoster>\n"
+    },
     "navbar": {
       "category": "navigation",
       "description": "A top navigation bar with brand, content areas, links, and style variants.",
@@ -5067,6 +5615,172 @@
       ],
       "example": "<StatCard\n  label=\"Total Revenue\"\n  value=\"$48,120\"\n  delta={{ value: \"+12.4%\", direction: \"up\", label: \"vs last month\" }}\n/>\n"
     },
+    "stat-hero": {
+      "category": "admin",
+      "description": "Hero-scale animated metric banner for flagship KPI display on admin dashboards. A 35/65 grid banner with a large headline value on the left and a full-height animated trendline on the right.",
+      "when_to_use": [
+        "Displaying a single flagship KPI at the top of an admin dashboard",
+        "Showing a headline metric (e.g. total revenue, active users) with an animated trendline",
+        "Anchoring a dashboard page with a visually dominant, brand-colored data visualization",
+        "Providing a \"marquee\" number that sets the tone for the rest of the dashboard"
+      ],
+      "when_not_to_use": [
+        "Dense metric grids where multiple KPIs share equal visual weight (use stat-card instead)",
+        "Narrow sidebars or compact panels where the 35/65 layout cannot breathe",
+        "Marketing or landing pages (use a marketing hero pattern instead)",
+        "When you need more than one metric in the same banner (compose multiple stat-cards instead)"
+      ],
+      "props": [
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "Small uppercase label describing the metric, e.g. \"Monthly Recurring Revenue\"."
+        },
+        {
+          "name": "value",
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "Hero-scale metric value, e.g. \"$1,240,000\"."
+        },
+        {
+          "name": "delta",
+          "type": "StatHeroDelta",
+          "description": "Change indicator with value and direction. Drives color and accessible glyph."
+        },
+        {
+          "name": "values",
+          "type": "number[]",
+          "required": true,
+          "description": "Array of numeric data points (min 2) driving the animated trendline SVG."
+        },
+        {
+          "name": "caption",
+          "type": "React.ReactNode",
+          "description": "Optional caption rendered beneath the delta row, e.g. \"vs same period last year\"."
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--border-default",
+        "--font-family-heading",
+        "--font-size-lg",
+        "--font-size-sm",
+        "--font-size-xs",
+        "--font-weight-medium",
+        "--font-weight-semibold",
+        "--interactive-primary-bg",
+        "--letter-spacing-tight",
+        "--letter-spacing-wide",
+        "--line-height-normal",
+        "--line-height-tight",
+        "--motion-duration-800",
+        "--motion-easing-ease-out",
+        "--radius-lg",
+        "--shadow-sm",
+        "--spacing-1",
+        "--spacing-20",
+        "--spacing-3",
+        "--spacing-8",
+        "--stat-hero-value-size",
+        "--stroke-width-medium",
+        "--surface-card",
+        "--text-danger",
+        "--text-primary",
+        "--text-secondary",
+        "--text-success",
+        "--text-tertiary"
+      ],
+      "example": "<StatHero\n  label=\"Monthly Recurring Revenue\"\n  value=\"$1,240,000\"\n  delta={{ value: \"+18.2%\", direction: \"up\" }}\n  values={[820000, 910000, 870000, 980000, 1050000, 1120000, 1240000]}\n  caption=\"vs same period last year\"\n/>\n"
+    },
+    "station-spectrum": {
+      "category": "visual-elements",
+      "description": "Animated N-station progress diagram with a hairline rail that draws on scroll-entry and dots that illuminate sequentially via CSS transition delays. Designed for \"process / phases / pipeline\" marketing diagrams.",
+      "when_to_use": [
+        "Illustrating a multi-step process, pipeline, or phased journey on marketing or landing pages",
+        "Showing the stages of an engagement model (e.g. discovery → brand → engineering → infrastructure)",
+        "Animating a sequential workflow diagram that reveals on scroll",
+        "Decorating a section header with a visual representation of sequential phases"
+      ],
+      "when_not_to_use": [
+        "When the user needs to navigate between steps — use `stepper` instead",
+        "When stations need icons or custom rendering per dot — extend the component for that use case",
+        "In compact admin layouts where the horizontal rail cannot breathe (use a text list or timeline instead)",
+        "For vertical orientation — this component is horizontal-only in v1"
+      ],
+      "props": [
+        {
+          "name": "stations",
+          "type": "Station[]",
+          "required": true,
+          "description": "Array of station objects. Each station has `num` (string label, e.g. \"01\"), `title` (string), and optional `description` (string). Minimum 2 stations recommended.\n"
+        },
+        {
+          "name": "density",
+          "type": "'compact' | 'default'",
+          "required": false,
+          "default": "'default'",
+          "description": "Visual density of the diagram. `compact` reduces dot size and hides descriptions for tighter horizontal spaces.\n"
+        },
+        {
+          "name": "inView",
+          "type": "boolean",
+          "required": false,
+          "description": "When `autoTrigger` is false, this prop drives the animation. Set to `true` to activate the rail draw and dot illumination.\n"
+        },
+        {
+          "name": "autoTrigger",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "When true (default), the component auto-wires an IntersectionObserver to trigger the animation when the component enters the viewport. Set to false to control the trigger manually via the `inView` prop and your own ref/hook.\n"
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--dot-delay-step",
+        "--font-size-sm",
+        "--font-size-xs",
+        "--font-weight-semibold",
+        "--idx",
+        "--interactive-primary-bg",
+        "--letter-spacing-wide",
+        "--line-height-normal",
+        "--line-height-tight",
+        "--motion-duration-normal",
+        "--motion-duration-slow",
+        "--motion-easing-default",
+        "--motion-easing-enter",
+        "--rail-delay",
+        "--rail-duration",
+        "--rail-easing",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--station-count",
+        "--station-spectrum-desc-color",
+        "--station-spectrum-dot-border-color",
+        "--station-spectrum-dot-border-color-on",
+        "--station-spectrum-dot-color-off",
+        "--station-spectrum-dot-color-on",
+        "--station-spectrum-dot-size",
+        "--station-spectrum-dot-size-compact",
+        "--station-spectrum-num-color",
+        "--station-spectrum-rail-color",
+        "--station-spectrum-rail-thickness",
+        "--station-spectrum-title-color",
+        "--stroke-width-thin",
+        "--surface-card",
+        "--text-primary",
+        "--text-secondary",
+        "--text-tertiary"
+      ],
+      "example": "<StationSpectrum\n  stations={[\n    { num: '01', title: 'Discovery', description: 'Goals, audience, constraints, what success looks like.' },\n    { num: '02', title: 'Brand',     description: 'Name, identity, voice, and a design system that scales.' },\n    { num: '03', title: 'Product design', description: 'Wireframes, screens, interactions, prototypes you can hold.' },\n    { num: '04', title: 'Engineering',    description: 'Apps, websites, APIs. Built, shipped, and live in production.' },\n    { num: '05', title: 'Infrastructure', description: 'Logs, metrics, deploys, on-call. The boring parts.' },\n  ]}\n/>\n"
+    },
     "status-badge": {
       "category": "admin",
       "description": "Semantic wrapper over Badge that maps admin status names to visual variants with an optional colored indicator dot.",
@@ -6963,6 +7677,22 @@
         "Single-record inline edits (use admin-detail-drawer)"
       ]
     },
+    "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.",
+      "components_used": [
+        "chip"
+      ],
+      "when_to_use": [
+        "Filter bars where users toggle multiple category chips",
+        "Settings pickers for density, theme, or display preferences (radio-style)",
+        "Tag filters on events, content, or data list pages"
+      ],
+      "when_not_to_use": [
+        "Plain visual chip lists without selection (use Chip directly)",
+        "Large option lists with search (use Select or Combobox)"
+      ]
+    },
     "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.",
@@ -7941,8 +8671,11 @@
       "accordion",
       "avatar",
       "badge",
+      "bento-grid",
       "card",
       "chart",
+      "marquee",
+      "name-roster",
       "table",
       "timeline"
     ],
@@ -7955,6 +8688,7 @@
       "filter-bar",
       "kbd",
       "stat-card",
+      "stat-hero",
       "status-badge"
     ],
     "feedback": [
@@ -7979,6 +8713,7 @@
       "button",
       "calendar",
       "checkbox",
+      "chip",
       "combobox",
       "date-picker",
       "date-range-picker",
@@ -8027,6 +8762,10 @@
       "menubar",
       "sheet"
     ],
+    "visual-elements": [
+      "sphere",
+      "station-spectrum"
+    ],
     "general": [
       "theme-switcher"
     ],
@@ -8045,9 +8784,6 @@
       "deck-toc-slide",
       "slide",
       "slide-theme-context"
-    ],
-    "visual-elements": [
-      "sphere"
     ]
   },
   "tokens": {