@loworbitstudio/visor 1.11.0 → 1.12.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-06-12T05:08:25.418Z",
+  "generated_at": "2026-06-25T04:18:15.839Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -1551,7 +1551,8 @@
       "variants": {
         "variant": [
           "default",
-          "outlined"
+          "outlined",
+          "filled-primary"
         ],
         "size": [
           "sm",
@@ -1562,7 +1563,7 @@
       "props": [
         {
           "name": "variant",
-          "type": "\"default\" | \"outlined\"",
+          "type": "\"default\" | \"outlined\" | \"filled-primary\"",
           "default": "\"default\""
         },
         {
@@ -1693,6 +1694,7 @@
         "--primary",
         "--primary-text",
         "--radius-full",
+        "--shadow-sm",
         "--spacing-1",
         "--spacing-2",
         "--spacing-3",
@@ -1859,6 +1861,120 @@
       ],
       "example": "<CodeBlock\n  code={`const greeting = \"Hello, world!\"\\nconsole.log(greeting)`}\n  language=\"typescript\"\n  showLineNumbers\n/>\n\n<CodeBlock code=\"npm install @loworbitstudio/visor-core\" title=\"Install\" />\n"
     },
+    "coherence-check": {
+      "category": "feedback",
+      "description": "Check group with pass/warn/fail rows for displaying coherence audit results — group header + state icon circle + title, description with inline code support, and optional ghost Fix action.",
+      "when_to_use": [
+        "Displaying a grouped list of brand or system coherence checks (pass / warn / fail)",
+        "Presenting audit results where each item has a state, a title, and an optional corrective action",
+        "Building Prove-stage UIs in a Brand Workbench flow where checks gate an export",
+        "Showing accessibility, derivation, or voice-consistency checks inline with fix affordances"
+      ],
+      "when_not_to_use": [
+        "Progress tracking across sequential steps (use Stepper)",
+        "Simple boolean on/off toggles or checkboxes (use Checkbox)",
+        "Validation errors on individual form fields (use Field error state)",
+        "Status badges on cards or list items (use StatusBadge or Badge)"
+      ],
+      "variants": {
+        "state": [
+          "pass",
+          "warn",
+          "fail"
+        ]
+      },
+      "props": [
+        {
+          "name": "heading",
+          "type": "string",
+          "description": "Group header label (rendered uppercase).",
+          "applies_to": "CheckGroup"
+        },
+        {
+          "name": "state",
+          "type": "'pass' | 'warn' | 'fail'",
+          "default": "pass",
+          "description": "Semantic state controlling the icon and tint color.",
+          "applies_to": "CheckRow"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "description": "Check title / finding label.",
+          "applies_to": "CheckRow"
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "description": "Supporting description. Accepts inline <code> elements for token names.",
+          "applies_to": "CheckRow"
+        },
+        {
+          "name": "fixLabel",
+          "type": "string",
+          "description": "Label for the ghost Fix action button. Omit to hide the button.",
+          "applies_to": "CheckRow"
+        },
+        {
+          "name": "onFix",
+          "type": "() => void",
+          "description": "Callback invoked when the Fix action button is clicked.",
+          "applies_to": "CheckRow"
+        }
+      ],
+      "sub_components": [
+        {
+          "name": "CheckGroup",
+          "description": "Groups related CheckRow items under an uppercase section heading."
+        },
+        {
+          "name": "CheckRow",
+          "description": "Individual check result row with a state icon circle, title, optional description, and optional ghost Fix action button."
+        }
+      ],
+      "dependencies": [
+        "class-variance-authority",
+        "@phosphor-icons/react"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-focus",
+        "--border-strong",
+        "--destructive",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-mono",
+        "--font-size-sm",
+        "--font-size-xs",
+        "--font-weight-bold",
+        "--font-weight-extrabold",
+        "--hairline",
+        "--motion-duration-150",
+        "--motion-easing-default",
+        "--radius-full",
+        "--radius-lg",
+        "--radius-md",
+        "--radius-sm",
+        "--shadow-sm",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--spacing-5",
+        "--spacing-6",
+        "--spacing-8",
+        "--stroke-width-thin",
+        "--success",
+        "--surface-card",
+        "--surface-muted",
+        "--text-inverse",
+        "--text-primary",
+        "--text-secondary",
+        "--text-tertiary",
+        "--warning"
+      ],
+      "example": "<CheckGroup heading=\"Accessibility — WCAG 2.1 AA\">\n  <CheckRow\n    state=\"fail\"\n    title=\"One pairing fails on small text\"\n    description={<>\n      <code>--text-tertiary</code> on <code>--surface-subtle</code> is 3.9:1 — below 4.5:1 for body text.\n    </>}\n    fixLabel=\"Suggest a fix\"\n    onFix={() => {}}\n  />\n  <CheckRow\n    state=\"pass\"\n    title=\"Primary, text, and focus rings clear AA\"\n    description=\"Body 7.1:1 · large text 4.8:1 · non-text UI 3.4:1 — all above target on both light and dark.\"\n  />\n</CheckGroup>\n"
+    },
     "collapsible": {
       "category": "layout",
       "description": "Simple expandable section with animated open/close transitions.",
@@ -2610,6 +2726,82 @@
       ],
       "example": "<ConfirmDialog\n  trigger={<Button variant=\"destructive\">Delete project</Button>}\n  severity=\"destructive\"\n  title=\"Delete project?\"\n  description=\"This action cannot be undone. All associated data will be permanently removed.\"\n  confirmText=\"acme\"\n  onConfirm={async () => {\n    await deleteProject()\n  }}\n/>\n"
     },
+    "conflict-banner": {
+      "category": "feedback",
+      "description": "Inline conflict detection and optimistic-rollback UI for concurrent edit scenarios.",
+      "when_to_use": [
+        "Detecting and surfacing concurrent edit conflicts (409 / ETag mismatch)",
+        "Presenting a \"Keep my version\" vs \"Load latest\" choice to the user",
+        "Reverting a failed optimistic update cleanly and atomically",
+        "Showing a collapsible field-level diff after a conflict is detected"
+      ],
+      "when_not_to_use": [
+        "Ephemeral success or failure notifications (use Toast)",
+        "Page-level alerts that don't require a user decision (use Alert or Banner)",
+        "Errors unrelated to concurrent edits (use Alert variant=\"destructive\")"
+      ],
+      "variants": {},
+      "props": [
+        {
+          "name": "state",
+          "type": "'pending' | 'conflict' | 'resolving' | 'resolved-local' | 'resolved-remote'",
+          "default": "conflict"
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "default": "'This record was updated by someone else.'"
+        },
+        {
+          "name": "diffs",
+          "type": "ConflictDiff[]",
+          "default": "[]"
+        },
+        {
+          "name": "onKeepMine",
+          "type": "() => void",
+          "default": "undefined"
+        },
+        {
+          "name": "onLoadLatest",
+          "type": "() => void",
+          "default": "undefined"
+        }
+      ],
+      "sub_components": [],
+      "dependencies": [
+        "@phosphor-icons/react"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-warning",
+        "--font-size-sm",
+        "--font-size-xs",
+        "--font-weight-medium",
+        "--font-weight-semibold",
+        "--motion-duration-800",
+        "--motion-duration-fast",
+        "--motion-easing-base",
+        "--motion-easing-enter",
+        "--motion-easing-linear",
+        "--opacity-50",
+        "--radius-md",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--stroke-width-medium",
+        "--stroke-width-thin",
+        "--surface-subtle",
+        "--surface-warning-subtle",
+        "--text-error",
+        "--text-primary",
+        "--text-secondary",
+        "--text-tertiary",
+        "--text-warning"
+      ],
+      "example": "<ConflictBanner\n  state=\"conflict\"\n  description=\"Jordan Kim saved changes 30 seconds ago.\"\n  diffs={[{ field: \"Title\", yours: \"Draft v2\", theirs: \"Draft v1\" }]}\n  onKeepMine={() => void 0}\n  onLoadLatest={() => void 0}\n/>\n"
+    },
     "container": {
       "category": "layout",
       "description": "Max-width centered wrapper for page content with token-driven horizontal padding.",
@@ -3374,6 +3566,109 @@
       ],
       "example": "<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button variant=\"ghost\">Actions</Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuItem>Edit</DropdownMenuItem>\n    <DropdownMenuItem>Duplicate</DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>\n"
     },
+    "editable-block": {
+      "category": "general",
+      "description": "Canvas brand block — a card tile with an uppercase label header, value body, hover-revealed edit icon, and editing state with inline input, save button, and AI action slot.",
+      "when_to_use": [
+        "Building a free-edit canvas board where each cell in a brand record (essence, positioning, personality, etc.) is independently editable",
+        "Any situation where a small labeled data block needs in-place editing without a modal or drawer",
+        "Displaying a short AI-derived value the user can challenge or refine with a direct AI action",
+        "Showing a board of brand strategy blocks that each represent a distinct, modifiable attribute"
+      ],
+      "when_not_to_use": [
+        "Multi-field forms — use a form with labeled inputs + a single submit action instead",
+        "Long-form text editing — use a textarea or rich-text editor",
+        "Read-only display cards with no edit intent — use Card + Text",
+        "Situations where editing must be confirmed by a secondary reviewer before saving — use a review workflow instead"
+      ],
+      "variants": {
+        "state": {
+          "default": "View state — label + value body; edit icon visible only on hover.",
+          "done": "Confirmed block — adds a green check to the header; still editable.",
+          "editing": "Active edit — focus ring border, inline input + save button, AI action slot."
+        }
+      },
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "description": "Block label rendered uppercase above the value."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "The current value to display (and the initial draft value when editing opens)."
+        },
+        {
+          "name": "done",
+          "type": "boolean",
+          "default": "false",
+          "description": "Shows a success check icon in the header when true."
+        },
+        {
+          "name": "onSave",
+          "type": "(value: string) => void",
+          "description": "Called when the user saves an edited value. Parent is responsible for updating `value`."
+        },
+        {
+          "name": "aiActionLabel",
+          "type": "string | null",
+          "default": "\"Ask AI to pressure-test\"",
+          "description": "Label for the AI action button shown in editing state. Pass null to suppress the button."
+        },
+        {
+          "name": "onAiAction",
+          "type": "() => void",
+          "description": "Called when the AI action button is clicked."
+        },
+        {
+          "name": "defaultEditing",
+          "type": "boolean",
+          "default": "false",
+          "description": "Opens the block in editing state on mount. Useful for programmatic pre-open."
+        }
+      ],
+      "dependencies": [
+        "@phosphor-icons/react",
+        "class-variance-authority",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-2xs",
+        "--font-size-sm",
+        "--font-size-xs",
+        "--hairline",
+        "--interactive-primary-bg",
+        "--interactive-primary-soft",
+        "--line-height-snug",
+        "--motion-duration-150",
+        "--motion-easing-default",
+        "--opacity-80",
+        "--primary",
+        "--primary-text",
+        "--radius-lg",
+        "--radius-md",
+        "--radius-sm",
+        "--shadow-sm",
+        "--spacing-1",
+        "--spacing-1_5",
+        "--spacing-2",
+        "--spacing-2_5",
+        "--spacing-3",
+        "--spacing-3_5",
+        "--spacing-8",
+        "--stroke-width-thin",
+        "--success",
+        "--surface-card",
+        "--surface-subtle",
+        "--text-primary",
+        "--text-tertiary"
+      ],
+      "example": "<EditableBlock\n  label=\"Essence\"\n  value=\"coherent · open · yours\"\n  done={false}\n  onSave={(v) => console.log('saved:', v)}\n  onAiAction={() => console.log('AI: pressure-test')}\n/>\n"
+    },
     "elevation-card": {
       "category": "specimen",
       "description": "Shadow level display card showing a single elevation token with its name and token reference.",
@@ -3434,6 +3729,11 @@
         "variant": [
           "default",
           "editorial"
+        ],
+        "intent": [
+          "first-use",
+          "zero-results",
+          "no-access"
         ]
       },
       "props": [
@@ -3448,6 +3748,11 @@
           "type": "React.ReactNode",
           "description": "Leading visual, typically a Phosphor icon. Marked aria-hidden."
         },
+        {
+          "name": "iconWrap",
+          "type": "boolean",
+          "description": "Wraps the icon in a circular chip. Auto-enabled when intent is set. Can be used independently of intent to get the chip treatment without semantic coloring.\n"
+        },
         {
           "name": "description",
           "type": "React.ReactNode",
@@ -3481,6 +3786,11 @@
           "default": "default",
           "description": "Surface treatment. Default is the base placeholder (dashed/borderless per tone). Editorial is an opt-in filled card on --surface-card with a 64px circular icon chip and a larger heading; it overrides the tone surface and the size icon/heading scale.\n"
         },
+        {
+          "name": "intent",
+          "type": "'first-use' | 'zero-results' | 'no-access'",
+          "description": "Semantic intent of the empty state (Borealis global state spec §5). first-use: no items exist yet; accent-tinted icon chip; encourage creation CTA. zero-results: filter/search returned nothing; accent-tinted chip; offer clear-filter. no-access: permission gate; neutral chip; typically no CTA (terminal state). Setting intent auto-activates iconWrap.\n"
+        },
         {
           "name": "headingAs",
           "type": "'h2' | 'h3' | 'h4'",
@@ -3516,6 +3826,8 @@
         "--spacing-5",
         "--spacing-6",
         "--spacing-8",
+        "--surface-accent-default",
+        "--surface-accent-subtle",
         "--surface-card",
         "--surface-muted",
         "--surface-subtle",
@@ -3979,6 +4291,53 @@
       ],
       "example": "import { Form } from \"@/components/ui/form/form\";\nimport { FormField } from \"@/components/ui/form/form-field\";\nimport { Button } from \"@/components/ui/button/button\";\nimport { contactSchema } from \"@/lib/schemas/contact\";\nimport { contactAction } from \"./actions\";\n\n<Form schema={contactSchema} action={contactAction}>\n  {({ fields }) => (\n    <>\n      <FormField field={fields.name} label=\"Name\" placeholder=\"Your name\" />\n      <FormField field={fields.email} label=\"Email\" type=\"email\" />\n      <Button type=\"submit\">Send</Button>\n    </>\n  )}\n</Form>\n"
     },
+    "form-error": {
+      "category": "form",
+      "description": "Form-level submission error banner — appears inside a form card when submission is blocked by field validation failures.",
+      "when_to_use": [
+        "A form submit is blocked by one or more invalid fields and the user needs to know there are errors to fix",
+        "Server-side validation returns field-keyed errors (422) that need a top-of-form summary",
+        "You want a visible anchor point at the top of the form alongside per-field FieldError messages"
+      ],
+      "when_not_to_use": [
+        "Single-field inline validation — use FieldError on its own",
+        "Page-level or section-level error announcements unrelated to a form (use Banner or ErrorPlacard)",
+        "Ephemeral transient notifications (use Toast)",
+        "Inside a dialog or overlay where space is constrained (prefer just FieldError)"
+      ],
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional leading icon (e.g. a Phosphor WarningCircle). Rendered at the destructive color. aria-hidden — role=\"alert\" carries the semantic weight."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS class names merged onto the container element."
+        }
+      ],
+      "dependencies": [
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--border-error",
+        "--destructive",
+        "--font-size-sm",
+        "--font-weight-normal",
+        "--font-weight-semibold",
+        "--radius-md",
+        "--spacing-1",
+        "--spacing-3",
+        "--spacing-4",
+        "--surface-card",
+        "--text-primary",
+        "--text-secondary"
+      ],
+      "example": "import { WarningCircle } from '@phosphor-icons/react';\nimport { FormError, FormErrorTitle, FormErrorDescription } from '@/components/ui/form-error/form-error';\nimport { Field, FieldLabel, FieldError } from '@/components/ui/field/field';\nimport { Input } from '@/components/ui/input/input';\n\n{submitError && (\n  <FormError icon={<WarningCircle size={18} weight=\"fill\" />}>\n    <FormErrorTitle>Please fix the errors below before continuing</FormErrorTitle>\n    <FormErrorDescription>2 fields need your attention.</FormErrorDescription>\n  </FormError>\n)}\n\n<Field>\n  <FieldLabel htmlFor=\"name\">Full name</FieldLabel>\n  <Input\n    id=\"name\"\n    aria-invalid={nameError ? 'true' : undefined}\n    aria-describedby={nameError ? 'name-error' : undefined}\n  />\n  {nameError && <FieldError id=\"name-error\">{nameError}</FieldError>}\n</Field>\n"
+    },
     "fullscreen-overlay": {
       "category": "overlay",
       "description": "A full-viewport overlay for expanding content to fill the screen. Built on Radix Dialog with close button, Escape to dismiss, focus trap, and body scroll lock.",
@@ -5394,6 +5753,92 @@
       ],
       "example": "<NumberInput defaultValue={1} min={0} max={10} step={1} />\n"
     },
+    "offline-banner": {
+      "category": "feedback",
+      "description": "App-shell sticky banner for network connectivity loss with offline, reconnecting, and restored states.",
+      "when_to_use": [
+        "When the app must signal network connectivity loss to the user non-intrusively",
+        "As the primary offline indicator below the navigation bar in a full-page shell",
+        "When stale data should remain visible and the app should remain navigable while offline",
+        "When you need a manual retry action that checks connectivity without forcing a page reload"
+      ],
+      "when_not_to_use": [
+        "For generic informational messages unrelated to network status (use Banner or Alert)",
+        "When the failure is a server error, not a connectivity issue (use Alert with error intent)",
+        "As an overlay that blocks content (use Dialog or a full-screen overlay instead)",
+        "For ephemeral success/failure notifications (use Toast)"
+      ],
+      "variants": {
+        "networkState": [
+          "online",
+          "offline",
+          "reconnecting",
+          "restored"
+        ]
+      },
+      "props": [
+        {
+          "name": "networkState",
+          "type": "'online' | 'offline' | 'reconnecting' | 'restored'",
+          "required": true
+        },
+        {
+          "name": "onRetry",
+          "type": "() => void"
+        },
+        {
+          "name": "offlineLabel",
+          "type": "string",
+          "default": "You're offline"
+        },
+        {
+          "name": "reconnectingLabel",
+          "type": "string",
+          "default": "Reconnecting…"
+        },
+        {
+          "name": "restoredLabel",
+          "type": "string",
+          "default": "Back online"
+        },
+        {
+          "name": "retryLabel",
+          "type": "string",
+          "default": "Retry"
+        }
+      ],
+      "dependencies": [
+        "@phosphor-icons/react"
+      ],
+      "tokens_used": [
+        "--accent",
+        "--border-focus",
+        "--border-success",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-sm",
+        "--font-weight-medium",
+        "--font-weight-semibold",
+        "--motion-duration-150",
+        "--motion-duration-800",
+        "--motion-duration-normal",
+        "--motion-easing-default",
+        "--motion-easing-enter",
+        "--motion-easing-linear",
+        "--radius-full",
+        "--radius-sm",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-4",
+        "--stroke-width-regular",
+        "--stroke-width-thin",
+        "--surface-overlay",
+        "--surface-success-subtle",
+        "--text-inverse",
+        "--text-success"
+      ],
+      "example": "const { networkState, retry } = useNetworkStatus();\n<OfflineBanner networkState={networkState} onRetry={retry} />\n"
+    },
     "opacity-bar": {
       "category": "specimen",
       "description": "Opacity level visualization showing bars at varying opacity values with token names.",
@@ -6719,6 +7164,114 @@
       ],
       "example": "<div>\n  <h3>Section A</h3>\n  <Separator />\n  <h3>Section B</h3>\n</div>\n\n<div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n  <span>Item 1</span>\n  <Separator orientation=\"vertical\" />\n  <span>Item 2</span>\n</div>\n"
     },
+    "session-timeout": {
+      "category": "overlay",
+      "description": "Non-dismissible full-screen overlay for auth session expiry. Renders at portal root, blurs app content, and presents a centered card with a primary Sign in CTA and an optional Return home escape hatch. ESC key and backdrop click are inert.",
+      "when_to_use": [
+        "JWT expiry detected client-side (exp claim check)",
+        "401 response from API with error=invalid_token",
+        "Supabase SIGNED_OUT event with reason TOKEN_REFRESHED_FAILED",
+        "Any scenario where an auth session expires mid-flow and you must redirect to login"
+      ],
+      "when_not_to_use": [
+        "Confirmable dialogs (use ConfirmDialog)",
+        "Standard authentication gates (use a route guard / redirect instead)",
+        "Dismissible notifications (use Banner or Toast)",
+        "Inline inline auth errors in a form (use field-level validation)"
+      ],
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "default": "false",
+          "description": "Whether the session timeout overlay is visible. Drive from your auth event listener."
+        },
+        {
+          "name": "onSignIn",
+          "type": "() => void | Promise<void>",
+          "default": "undefined",
+          "description": "Called when the user clicks \"Sign in\". Returning a Promise triggers the redirecting state (spinner + disabled CTA) automatically."
+        },
+        {
+          "name": "onReturnHome",
+          "type": "() => void",
+          "default": "undefined",
+          "description": "Called when the user clicks \"Return home\". If omitted, the ghost link is not rendered."
+        },
+        {
+          "name": "signInLabel",
+          "type": "React.ReactNode",
+          "default": "\"Sign in\"",
+          "description": "Label for the primary CTA."
+        },
+        {
+          "name": "returnHomeLabel",
+          "type": "React.ReactNode",
+          "default": "\"Return home\"",
+          "description": "Label for the optional ghost link."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": "undefined",
+          "description": "Additional class name applied to the card surface."
+        }
+      ],
+      "dependencies": [
+        "@radix-ui/react-dialog",
+        "@phosphor-icons/react",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-focus",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-sm",
+        "--font-size-xl",
+        "--font-weight-bold",
+        "--font-weight-medium",
+        "--font-weight-semibold",
+        "--interactive-primary-bg",
+        "--interactive-primary-bg-hover",
+        "--interactive-primary-text",
+        "--motion-duration-150",
+        "--motion-duration-1500",
+        "--motion-duration-fast",
+        "--motion-duration-normal",
+        "--motion-easing-default",
+        "--motion-easing-enter",
+        "--motion-easing-exit",
+        "--motion-easing-linear",
+        "--opacity-10",
+        "--opacity-40",
+        "--opacity-60",
+        "--opacity-80",
+        "--overlay-bg",
+        "--primary",
+        "--radius-full",
+        "--radius-md",
+        "--radius-sm",
+        "--radius-xl",
+        "--shadow-lg",
+        "--spacing-1",
+        "--spacing-10",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--spacing-6",
+        "--spacing-7",
+        "--spacing-9",
+        "--stroke-width-regular",
+        "--stroke-width-thin",
+        "--surface-card",
+        "--text-inverse",
+        "--text-primary",
+        "--text-secondary",
+        "--text-tertiary"
+      ],
+      "example": "<SessionTimeout\n  open={isExpired}\n  onSignIn={() => {\n    const redirect = window.location.pathname;\n    router.push(`/login?redirect=${encodeURIComponent(redirect)}`);\n  }}\n  onReturnHome={() => router.push('/')}\n/>\n"
+    },
     "sheet": {
       "category": "overlay",
       "description": "Slide-over panel that enters from any edge of the screen.",
@@ -7022,6 +7575,7 @@
       "dependencies": [],
       "tokens_used": [
         "--_shimmer-duration",
+        "--border-default",
         "--motion-easing-linear",
         "--radius-full",
         "--radius-md",
@@ -7032,6 +7586,9 @@
         "--skeleton-pill-height",
         "--skeleton-pill-width",
         "--skeleton-to",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
         "--text-primary"
       ],
       "example": "<Skeleton className=\"h-4 w-[200px]\" />\n<Skeleton className=\"h-12 w-12 rounded-full\" />\n"
@@ -7161,6 +7718,52 @@
       ],
       "example": "<SliderControl\n  label=\"Size\"\n  value={scale}\n  onValueChange={setScale}\n  displayValue={scale.toFixed(1)}\n  min={0.2}\n  max={3.0}\n  step={0.05}\n/>\n"
     },
+    "slow-network-bar": {
+      "category": "feedback",
+      "description": "4px indeterminate progress bar that appears after a threshold delay (~3 s) to indicate a slow or stalled network request.",
+      "when_to_use": [
+        "A fetch or mutation is still pending after ~3 000 ms",
+        "An upload or download has produced no progress event for 5 s",
+        "Communicating \"still working\" without blocking interaction"
+      ],
+      "when_not_to_use": [
+        "Initial page load (use Skeleton instead — never both in the same zone)",
+        "Determinate progress with a known percentage (use Progress)",
+        "Operation that has succeeded or failed (dismiss the bar; let the result pattern take over)",
+        "Short operations that complete in < 3 s (the threshold prevents this bar from appearing)"
+      ],
+      "props": [
+        {
+          "name": "state",
+          "type": "'hidden' | 'visible' | 'resolving'",
+          "default": "'hidden'",
+          "description": "Visibility state. hidden = not rendered; visible = indeterminate animation; resolving = sweep completes then fades out."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": "'Loading, please wait…'",
+          "description": "Accessible label announced to screen readers when the bar becomes visible."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional CSS class names to merge onto the element."
+        }
+      ],
+      "dependencies": [],
+      "tokens_used": [
+        "--accent",
+        "--motion-duration-1500",
+        "--motion-duration-300",
+        "--motion-easing-ease-in",
+        "--motion-easing-ease-in-out",
+        "--motion-easing-ease-out",
+        "--opacity-40",
+        "--primary"
+      ],
+      "example": "// Controlled via useSlowRequest hook\nconst { state, trigger, resolve } = useSlowRequest(3000);\n\nconst handleSave = async () => {\n  trigger();\n  try {\n    await saveData();\n  } finally {\n    resolve();\n  }\n};\n\n<SlowNetworkBar state={state} />\n<button onClick={handleSave}>Save</button>\n"
+    },
     "spacing-scale": {
       "category": "specimen",
       "description": "Visual spacing scale displaying token names, proportional bars, and pixel/rem values.",
@@ -7875,6 +8478,14 @@
         "Pagination through pages of content (use Pagination)"
       ],
       "variants": [
+        {
+          "name": "variant",
+          "values": [
+            "default",
+            "prominent"
+          ],
+          "description": "Visual treatment for the entire Stepper. \"default\" is the standard step indicator for multi-step forms and linear wizards. \"prominent\" is designed for vertical derivation spines and primary-navigation surfaces: the active row gets a primary-soft tint, the active bullet renders a concentric halo and filled pulse dot (replacing the step number), and complete-to-next rails render in a primary-line tint. Token surface: --interactive-primary-bg (border + fill + pulse dot), --interactive-primary-soft (row tint + halo), color-mix(in srgb, --interactive-primary-bg 34%, transparent) (rail tint). All values are fully theme-agnostic.\n"
+        },
         {
           "name": "status",
           "values": [
@@ -7939,6 +8550,7 @@
         "--font-weight-medium",
         "--font-weight-normal",
         "--interactive-primary-bg",
+        "--interactive-primary-soft",
         "--interactive-primary-text",
         "--line-height-normal",
         "--line-height-snug",
@@ -7947,6 +8559,7 @@
         "--opacity-60",
         "--primary",
         "--radius-full",
+        "--radius-lg",
         "--spacing-1",
         "--spacing-2",
         "--spacing-4",
@@ -8048,6 +8661,46 @@
       ],
       "example": "<StructuredPrompt>\n  <StructuredPromptHeader icon={<ListBullets weight=\"stroke\" />}>\n    ONLINESS · THE SPEARHEAD\n  </StructuredPromptHeader>\n  <StructuredPromptBody>\n    For <StructuredPromptSlot filled>design-led product teams</StructuredPromptSlot>,\n    Visor is the only <StructuredPromptSlot filled>component system</StructuredPromptSlot>\n    that <StructuredPromptSlot>derives every surface from one brand record</StructuredPromptSlot>.\n  </StructuredPromptBody>\n  <StructuredPromptHint>Click any slot to edit</StructuredPromptHint>\n</StructuredPrompt>\n"
     },
+    "success-feedback": {
+      "category": "feedback",
+      "description": "App-wide success/transition feedback pattern. Provides useSuccessToast() hook and SuccessLiveRegion a11y component built on the Toast primitive.",
+      "when_to_use": [
+        "After a CRUD operation completes successfully (create, update, delete, archive)",
+        "When a file upload or export finishes",
+        "After settings are saved",
+        "When an invite is sent or a link is copied",
+        "Any transient confirmation that a user action succeeded"
+      ],
+      "when_not_to_use": [
+        "Error conditions (use inline validation or error Banner)",
+        "Warnings that require user attention (use Banner)",
+        "Persistent messages that must stay visible (use Banner or Alert)",
+        "Content that requires user acknowledgment (use Dialog)"
+      ],
+      "props": [
+        {
+          "name": "message",
+          "type": "string",
+          "required": false,
+          "description": "SuccessLiveRegion only — the success text to announce to screen readers. Updates trigger a re-announcement. Defaults to empty string."
+        }
+      ],
+      "sub_components": [
+        {
+          "name": "useSuccessToast",
+          "description": "Hook returning showSuccess(title, options) that fires a Sonner toast.success() with Borealis-spec defaults."
+        },
+        {
+          "name": "SuccessLiveRegion",
+          "description": "Visually-hidden role=status aria-live=polite node for screen-reader announcements."
+        }
+      ],
+      "dependencies": [
+        "sonner"
+      ],
+      "tokens_used": [],
+      "example": "import { useSuccessToast, SuccessLiveRegion } from \"@/components/ui/success-feedback/success-feedback\"\nimport { Toaster } from \"@/components/ui/toast/toast\"\n\n{/* Mount both once in your root layout */}\n<Toaster />\n<SuccessLiveRegion message=\"\" />\n\n{/* In any component */}\nconst { showSuccess } = useSuccessToast()\nshowSuccess(\"Project saved\", { description: \"All changes have been saved.\" })\n"
+    },
     "surface-row": {
       "category": "specimen",
       "description": "Surface background variant display showing a surface token with its name and token reference.",
@@ -8802,7 +9455,6 @@
         "--border-default",
         "--border-error",
         "--border-info",
-        "--border-success",
         "--border-warning",
         "--font-family-sans",
         "--font-size-sm",
@@ -8816,6 +9468,7 @@
         "--motion-easing-enter",
         "--motion-easing-exit",
         "--primary",
+        "--primary-text",
         "--radius-lg",
         "--radius-md",
         "--shadow-lg",
@@ -8823,12 +9476,15 @@
         "--spacing-2",
         "--spacing-3",
         "--spacing-4",
+        "--stroke-width-thin",
         "--surface-card",
         "--surface-error-subtle",
         "--surface-info-subtle",
+        "--surface-inverse",
         "--surface-popover",
-        "--surface-success-subtle",
         "--surface-warning-subtle",
+        "--text-inverse",
+        "--text-inverse-secondary",
         "--text-primary",
         "--text-secondary"
       ],
@@ -11390,10 +12046,15 @@
       "alert",
       "banner",
       "challenge-card",
+      "coherence-check",
+      "conflict-banner",
       "error-placard",
+      "offline-banner",
       "popover",
       "progress",
       "skeleton",
+      "slow-network-bar",
+      "success-feedback",
       "toast",
       "toast-card",
       "tooltip"
@@ -11435,6 +12096,7 @@
       "fieldset",
       "file-upload",
       "form",
+      "form-error",
       "input",
       "label",
       "number-input",
@@ -11469,9 +12131,11 @@
       "fullscreen-overlay",
       "hover-card",
       "menubar",
+      "session-timeout",
       "sheet"
     ],
     "general": [
+      "editable-block",
       "section-intro",
       "theme-switcher"
     ],