@loworbitstudio/visor 0.10.0 → 1.0.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-05-12T23:36:26.147Z",
+  "generated_at": "2026-05-18T21:20:42.445Z",
   "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",
@@ -1272,6 +1273,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 +1436,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.",
@@ -2253,6 +2331,16 @@
           "type": "boolean",
           "default": "false",
           "description": "When true, the thead is positioned sticky at the top of the scroll container."
+        },
+        {
+          "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": [
@@ -2282,7 +2370,14 @@
         "--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",
@@ -4386,12 +4481,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 +4510,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 +4522,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 +4785,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 +4799,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 +4821,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",
@@ -4877,6 +5048,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 +5702,68 @@
       ],
       "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"
+    },
     "stat-card": {
       "category": "admin",
       "description": "Admin dashboard metric card with label, value, delta, trend, and footer slots.",
@@ -5583,6 +5862,7 @@
         "--font-size-2xl",
         "--font-size-3xl",
         "--font-size-4xl",
+        "--font-size-6xl",
         "--font-size-sm",
         "--font-size-xs",
         "--font-weight-medium",
@@ -5604,8 +5884,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 +6070,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 +6090,12 @@
           "pending",
           "queued",
           "idle",
-          "complete"
+          "complete",
+          "live",
+          "warn",
+          "scheduled",
+          "sold",
+          "draft"
         ],
         "tone": [
           "subtle",
@@ -5861,6 +6149,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 +7873,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 +7883,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 +7934,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",
@@ -7693,6 +8030,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.",
@@ -7886,6 +8243,21 @@
         "Feature comparison tables without pricing"
       ]
     },
+    "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,12 +9048,15 @@
       "chart",
       "marquee",
       "name-roster",
+      "sparkline",
+      "status-dot",
       "table",
       "timeline"
     ],
     "admin": [
       "activity-feed",
       "bulk-action-bar",
+      "chrome-button",
       "confirm-dialog",
       "data-table",
       "empty-state",
@@ -8706,6 +9081,8 @@
       "navbar",
       "page-header",
       "pagination",
+      "quick-actions",
+      "section-header",
       "stepper",
       "tabs"
     ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loworbitstudio/visor",
-  "version": "0.10.0",
+  "version": "1.0.0",
   "description": "CLI for the Visor design system — add components, hooks, and utilities to your project.",
   "type": "module",
   "bin": {
@@ -45,7 +45,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1021.0",
     "@babel/parser": "^7.26.0",
-    "@loworbitstudio/visor-theme-engine": "^0.6.0",
+    "@loworbitstudio/visor-theme-engine": "^0.8.0",
     "commander": "^13.1.0",
     "diff": "^8.0.4",
     "picocolors": "^1.1.1",