@loworbitstudio/visor 1.30.0 → 1.34.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-10-03T18:10:41.404Z",
+  "generated_at": "2026-10-04T04:36:38.216Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -146,6 +146,115 @@
       ],
       "example": "<Accordion type=\"single\" collapsible>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Is it accessible?</AccordionTrigger>\n    <AccordionContent>\n      Yes. It adheres to the WAI-ARIA Accordion pattern.\n    </AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger>Is it animated?</AccordionTrigger>\n    <AccordionContent>\n      Yes. It uses CSS animations for smooth expand/collapse.\n    </AccordionContent>\n  </AccordionItem>\n</Accordion>\n"
     },
+    "action-row": {
+      "category": "data-display",
+      "description": "One tappable list row — a button or link with a leading icon, a title, an optional second line and a trailing value, badge or caret.",
+      "when_to_use": [
+        "A settings or detail list where each row opens something (a picker, a screen, a map, a billing page)",
+        "A row that reads a value on the right and a verb or caret (\"3 suggested · Review\", \"Address ›\")",
+        "A person or invitation row whose whole surface is the target",
+        "Any list that needs rest, hover, focus, selected, open and disabled states with a hairline between rows"
+      ],
+      "when_not_to_use": [
+        "A row that needs a Switch, Checkbox or second button inside it (the trailing slot is non-interactive; build a label row with the control as its own element)",
+        "A row that expands in place (use Accordion or Collapsible; ActionRow is the closed row)",
+        "A read-only label/value pair (use KeyValueList)",
+        "A token specimen (use SurfaceRow)"
+      ],
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "The title. With asChild, the one element to render as (an <a href>), with the title inside it."
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": "false",
+          "description": "Render as the single child element (a link, a router Link) instead of a <button>."
+        },
+        {
+          "name": "leading",
+          "type": "React.ReactNode",
+          "description": "Leading slot, an icon or avatar. Wrapped in an aria-hidden span; the title carries the name."
+        },
+        {
+          "name": "line",
+          "type": "React.ReactNode",
+          "description": "Optional second line under the title."
+        },
+        {
+          "name": "trailing",
+          "type": "React.ReactNode",
+          "description": "Trailing value, badge or caret. Non-interactive; a focusable element here fires a development warning."
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "default": "false",
+          "description": "The row is the current choice. Sets aria-current (\"true\", or the aria-current you pass) and aria-selected on option, tab, row, gridcell and treeitem roles."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "description": "The row has opened a picker or popover. Sets aria-expanded and data-state."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "Native disabled on a button; aria-disabled, tabIndex -1 and a blocked click under asChild."
+        }
+      ],
+      "sub_components": [
+        {
+          "name": "ActionRowList",
+          "description": "A list wrapper (ul, each row in an li) that draws a hairline between rows on --hairline-width."
+        }
+      ],
+      "dependencies": [
+        "@radix-ui/react-slot"
+      ],
+      "tokens_used": [
+        "--action-row-disabled-opacity",
+        "--action-row-gap",
+        "--action-row-hover-bg",
+        "--action-row-leading-color",
+        "--action-row-leading-size",
+        "--action-row-line-color",
+        "--action-row-min-height",
+        "--action-row-open-bg",
+        "--action-row-padding",
+        "--action-row-radius",
+        "--action-row-selected-bg",
+        "--action-row-selected-edge-color",
+        "--action-row-title-weight",
+        "--action-row-trailing-color",
+        "--border-default",
+        "--border-focus",
+        "--control-state-edge-width",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-size-base",
+        "--font-size-sm",
+        "--font-weight-medium",
+        "--hairline",
+        "--hairline-width",
+        "--line-height-snug",
+        "--motion-duration-150",
+        "--motion-easing-default",
+        "--opacity-50",
+        "--radius-md",
+        "--spacing-2",
+        "--spacing-3",
+        "--stroke-width-thin",
+        "--surface-interactive-active",
+        "--surface-interactive-hover",
+        "--text-primary",
+        "--text-secondary"
+      ],
+      "example": "<ActionRowList aria-label=\"Pass details\">\n  <ActionRow leading={<MapPin />} line=\"Open in Maps\" trailing={<CaretRight />}>\n    Address\n  </ActionRow>\n  <ActionRow leading={<Users />} trailing=\"2 riders\" selected>\n    Riders\n  </ActionRow>\n</ActionRowList>\n"
+    },
     "activity-feed": {
       "category": "admin",
       "description": "Admin compound for rendering a vertical list of timestamped events — dashboards, audit logs, and notification views.",
@@ -420,6 +529,7 @@
         "--interactive-primary-text",
         "--interactive-secondary-bg",
         "--interactive-secondary-text",
+        "--label-box-height",
         "--motion-duration-150",
         "--motion-easing-default",
         "--radius-full",
@@ -1110,24 +1220,29 @@
         "--border-focus",
         "--border-strong",
         "--button-dlg-font-size",
+        "--button-dlg-font-weight",
         "--button-dlg-letter-spacing",
         "--button-dlg-radius",
         "--button-dlg-text-transform",
+        "--button-font-weight",
         "--button-icon-ghost-color",
         "--button-icon-pad",
         "--button-icon-radius",
         "--button-icon-size",
         "--button-letter-spacing",
         "--button-lg-font-size",
+        "--button-lg-font-weight",
         "--button-lg-letter-spacing",
         "--button-lg-radius",
         "--button-lg-text-transform",
         "--button-md-font-size",
+        "--button-md-font-weight",
         "--button-md-letter-spacing",
         "--button-md-radius",
         "--button-md-text-transform",
         "--button-radius",
         "--button-sm-font-size",
+        "--button-sm-font-weight",
         "--button-sm-letter-spacing",
         "--button-sm-radius",
         "--button-sm-text-transform",
@@ -1814,6 +1929,7 @@
         "--font-size-xs",
         "--font-weight-medium",
         "--font-weight-semibold",
+        "--label-box-height",
         "--motion-duration-150",
         "--motion-easing-default",
         "--opacity-40",
@@ -3329,6 +3445,30 @@
           "name": "disabled",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "align",
+          "type": "\"start\" | \"center\" | \"end\"",
+          "default": "\"start\"",
+          "description": "Popover alignment against the trigger. Use \"end\" under a full-width trigger so the calendar does not sit against the right edge."
+        },
+        {
+          "name": "sideOffset",
+          "type": "number",
+          "default": "4",
+          "description": "Gap in px between the trigger and the popover"
+        },
+        {
+          "name": "collisionPadding",
+          "type": "number",
+          "default": "0",
+          "description": "Viewport padding in px the popover keeps clear when it collides with an edge"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Whether the popover starts open (uncontrolled)"
         }
       ],
       "dependencies": [
@@ -3340,6 +3480,9 @@
         "--border-default",
         "--border-focus",
         "--border-strong",
+        "--control-edge-color",
+        "--control-edge-style",
+        "--control-edge-width",
         "--field-menu-bg",
         "--focus-ring-offset",
         "--focus-ring-width",
@@ -3461,6 +3604,36 @@
           "default": true,
           "description": "When true, interaction with outside elements is blocked (Dialog root)"
         },
+        {
+          "name": "presentation",
+          "type": "'dialog' | 'sheet' | 'responsive'",
+          "default": "dialog",
+          "description": "How the content is presented (Dialog root). dialog is a centred modal, sheet is a bottom sheet, responsive is a dialog from breakpoint up and a sheet below it. Same content, focus trap and Escape handling in each.\n"
+        },
+        {
+          "name": "breakpoint",
+          "type": "number | string",
+          "default": "640",
+          "description": "Viewport width where responsive switches from sheet to dialog. A number is px; a string is any CSS length (Dialog root)"
+        },
+        {
+          "name": "container",
+          "type": "HTMLElement | null",
+          "default": "undefined",
+          "description": "Element the overlay and content portal into, covering only that element (Dialog root). Not Radix modal mode: focus is trapped in the content, the container's other children are inert, and content outside the container stays interactive. Pass the element, not a ref.\n"
+        },
+        {
+          "name": "showHandle",
+          "type": "boolean",
+          "default": false,
+          "description": "Show a drag handle on the sheet presentation; dragging down dismisses (DialogContent)"
+        },
+        {
+          "name": "back",
+          "type": "React.ReactNode",
+          "default": "undefined",
+          "description": "Leading back action rendered before the title, beside the close button (DialogHeader). See DialogBack."
+        },
         {
           "name": "className",
           "type": "string",
@@ -3491,6 +3664,10 @@
           "name": "DialogHeader",
           "description": "Container for title and description at the top."
         },
+        {
+          "name": "DialogBack",
+          "description": "Leading back action for DialogHeader's back slot (labelled \"Back\" by default)."
+        },
         {
           "name": "DialogFooter",
           "description": "Right-aligned action row with a hairline top border, for dialog buttons."
@@ -3523,6 +3700,8 @@
       "tokens_used": [
         "--border-focus",
         "--border-subtle",
+        "--dialog-keyboard-inset",
+        "--dialog-viewport-height",
         "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-2xl",
@@ -3537,7 +3716,9 @@
         "--motion-easing-default",
         "--motion-easing-enter",
         "--motion-easing-exit",
+        "--opacity-40",
         "--overlay-bg",
+        "--radius-full",
         "--radius-lg",
         "--radius-sm",
         "--radius-xl",
@@ -4074,7 +4255,12 @@
         "intent": [
           "first-use",
           "zero-results",
-          "no-access"
+          "no-access",
+          "error"
+        ],
+        "fill": [
+          true,
+          false
         ]
       },
       "props": [
@@ -4129,8 +4315,14 @@
         },
         {
           "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"
+          "type": "'first-use' | 'zero-results' | 'no-access' | 'error'",
+          "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). error: a failed load; icon and heading in the destructive colour, role=\"alert\", and the icon stays unchipped unless iconWrap is set. Use ErrorPlacard for inline, in-card failures. Setting any other intent auto-activates iconWrap.\n"
+        },
+        {
+          "name": "fill",
+          "type": "boolean",
+          "default": "false",
+          "description": "Fills the container and centres the content vertically and horizontally. Use inside a flex or fixed-height parent so empty and error screens sit in the middle of the open space.\n"
         },
         {
           "name": "headingAs",
@@ -4148,11 +4340,13 @@
         "--control-drop-edge-width",
         "--control-edge-color",
         "--control-edge-width",
+        "--destructive",
         "--empty-state-actions-gap",
         "--empty-state-bg",
         "--empty-state-border",
         "--empty-state-description-color",
         "--empty-state-description-font-size",
+        "--empty-state-error-color",
         "--empty-state-gap",
         "--empty-state-heading-color",
         "--empty-state-heading-font-family",
@@ -4211,6 +4405,7 @@
         "Passive informational notices or warnings (use Alert)",
         "Site-wide or page-level announcements (use Banner)",
         "Empty states where no data exists yet (use EmptyState)",
+        "A whole region or screen whose load failed and should read like an empty state (use EmptyState intent=\"error\")",
         "Ephemeral transient notifications (use Toast)"
       ],
       "props": [
@@ -5410,7 +5605,13 @@
         {
           "name": "editLabel",
           "type": "string",
-          "description": "Accessible name of the pencil. Defaults to \"Edit {label}\"."
+          "description": "Accessible name of the pencil, or the lead of the text button's name when `pencil` is false. Defaults to \"Edit {label}\"."
+        },
+        {
+          "name": "pencil",
+          "type": "boolean",
+          "default": "true",
+          "description": "Draws the pencil after the text. With `false` the text is the control (VI-677) - a button named \"Edit {label}, {value}\" that opens on click, Enter or Space and takes focus back after Enter or Escape. It underlines on hover and shows the focus ring alone on focus, clear of the glyphs."
         },
         {
           "name": "as",
@@ -5441,11 +5642,13 @@
         "--control-state-edge-width",
         "--focus-ring-offset",
         "--focus-ring-width",
+        "--inline-edit-underline-style",
         "--motion-duration-150",
         "--motion-easing-default",
         "--radius-sm",
         "--spacing-1",
         "--spacing-2",
+        "--stroke-width-thin",
         "--text-primary",
         "--text-secondary",
         "--text-tertiary"
@@ -5485,6 +5688,16 @@
           "type": "React.ReactNode",
           "description": "Optional leading glyph rendered inside the field (e.g. a Phosphor icon). The input reserves enough left padding to clear it."
         },
+        {
+          "name": "prefix",
+          "type": "React.ReactNode",
+          "description": "Fixed text before the value, inside the same well (a currency symbol). Drawn in the secondary text colour, never part of the value or the selection, and the value never runs under it. Clicking it focuses the input; it is wired to the input with aria-describedby, so assistive tech reads it as a description, not as the value. Replaces the native `prefix` HTML attribute, which is not forwarded. When set, `className` lands on the wrapper that draws the well.\n"
+        },
+        {
+          "name": "suffix",
+          "type": "React.ReactNode",
+          "description": "Fixed text after the value, inside the same well (`.epk.pro`, a unit). Same behaviour as `prefix`."
+        },
         {
           "name": "passwordManagers",
           "type": "'ignore' | 'allow'",
@@ -5494,6 +5707,8 @@
       ],
       "dependencies": [],
       "tokens_used": [
+        "--affix-inset",
+        "--affix-pad-y",
         "--border-default",
         "--border-error",
         "--border-focus",
@@ -5501,17 +5716,28 @@
         "--control-edge-color",
         "--control-edge-style",
         "--control-edge-width",
+        "--control-invalid-halo-width",
+        "--control-invalid-ring-width",
         "--control-state-edge-width",
         "--field-control-bg",
         "--focus-ring-offset",
         "--focus-ring-width",
+        "--font-ascent",
+        "--font-descent",
         "--font-size-base",
         "--font-size-sm",
+        "--input-affix-color",
+        "--input-affix-gap",
         "--input-bg",
         "--input-bg-invalid",
         "--input-border",
+        "--input-box",
         "--input-height-lg",
         "--input-height-md",
+        "--input-md-height",
+        "--input-md-padding",
+        "--input-md-radius",
+        "--input-nudge",
         "--input-padding-lg",
         "--input-padding-md",
         "--input-padding-sm",
@@ -5523,6 +5749,7 @@
         "--radius-md",
         "--radius-sm",
         "--spacing-1",
+        "--spacing-2",
         "--spacing-3",
         "--spacing-3_5",
         "--spacing-4",
@@ -5535,7 +5762,7 @@
         "--text-primary",
         "--text-secondary"
       ],
-      "example": "<Input type=\"email\" placeholder=\"you@example.com\" />\n\n<Input type=\"password\" passwordManagers=\"allow\" aria-invalid=\"true\" />\n"
+      "example": "<Input type=\"email\" placeholder=\"you@example.com\" />\n\n<Input suffix=\".epk.pro\" aria-label=\"Address\" />\n\n<Input prefix=\"€\" inputMode=\"decimal\" aria-label=\"Amount\" />\n\n<Input type=\"password\" passwordManagers=\"allow\" aria-invalid=\"true\" />\n"
     },
     "kbd": {
       "category": "admin",
@@ -6338,6 +6565,16 @@
           "type": "number",
           "default": "1",
           "description": "Increment/decrement step size."
+        },
+        {
+          "name": "prefix",
+          "type": "React.ReactNode",
+          "description": "Fixed text before the value, inside the same well (a currency symbol). Same treatment as Input's prefix; replaces the native `prefix` attribute."
+        },
+        {
+          "name": "suffix",
+          "type": "React.ReactNode",
+          "description": "Fixed text after the value, inside the same well (a unit such as `h` or `m`)."
         }
       ],
       "dependencies": [
@@ -6346,21 +6583,31 @@
       "tokens_used": [
         "--border-default",
         "--border-focus",
+        "--control-edge-color",
+        "--control-edge-style",
+        "--control-edge-width",
+        "--control-state-edge-width",
         "--focus-ring-offset",
         "--focus-ring-width",
+        "--font-ascent",
+        "--font-descent",
         "--font-size-sm",
+        "--input-affix-color",
+        "--input-affix-gap",
+        "--input-nudge",
         "--motion-duration-150",
         "--motion-easing-default",
         "--number-input-bg",
         "--number-input-border",
         "--radius-md",
+        "--spacing-2",
         "--surface-interactive-default",
         "--surface-interactive-hover",
         "--surface-muted",
         "--text-primary",
         "--text-secondary"
       ],
-      "example": "<NumberInput defaultValue={1} min={0} max={10} step={1} />\n"
+      "example": "<NumberInput defaultValue={1} min={0} max={10} step={1} />\n\n<NumberInput prefix=\"$\" defaultValue={150} aria-label=\"Fee\" />\n\n<NumberInput suffix=\"h\" defaultValue={2} aria-label=\"Hours\" />\n"
     },
     "offline-banner": {
       "category": "feedback",
@@ -6518,23 +6765,52 @@
           "type": "boolean",
           "default": "false",
           "description": "Auto-focus the first cell on mount."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "default": "false",
+          "description": "Marks every cell aria-invalid and draws the invalid edge. The digits are kept so they can be corrected."
+        },
+        {
+          "name": "errorMessage",
+          "type": "ReactNode",
+          "description": "Shown under the cells while invalid, in the error text colour, as a role=alert live region. The component draws the message, so do not render a second error line."
+        },
+        {
+          "name": "trailing",
+          "type": "ReactNode",
+          "description": "Trailing content beside the cells, for a working indicator (Spinner) or a resend action."
         }
       ],
       "dependencies": [],
       "tokens_used": [
         "--border-default",
+        "--border-error",
         "--border-focus",
         "--border-strong",
+        "--control-edge-color",
+        "--control-edge-style",
+        "--control-edge-width",
+        "--control-invalid-halo-width",
+        "--control-invalid-ring-width",
+        "--control-state-edge-width",
+        "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-lg",
+        "--font-size-sm",
         "--font-weight-medium",
+        "--font-weight-normal",
         "--motion-duration-150",
         "--motion-easing-default",
         "--otp-bg",
+        "--otp-bg-invalid",
         "--otp-border",
         "--radius-md",
         "--spacing-2",
+        "--surface-error-subtle",
         "--surface-interactive-default",
+        "--text-error",
         "--text-primary",
         "--text-secondary"
       ],
@@ -7098,7 +7374,8 @@
       "when_to_use": [
         "Selecting exactly one option from a small set (2-6 choices)",
         "Mutually exclusive choices where all options should be visible",
-        "Form fields like gender, plan selection, or priority level"
+        "Form fields like gender, plan selection, or priority level",
+        "variant=\"card\" when each option needs an icon and a sentence (visibility levels, plan tiers), including options shown disabled"
       ],
       "when_not_to_use": [
         "Multiple selections allowed (use Checkbox group)",
@@ -7106,6 +7383,12 @@
         "Binary on/off toggle (use Switch or Checkbox)"
       ],
       "props": [
+        {
+          "name": "variant",
+          "type": "'default' | 'card'",
+          "default": "default",
+          "description": "default draws a dot beside a label; card draws each item as a card with icon, title and description."
+        },
         {
           "name": "value",
           "type": "string",
@@ -7133,7 +7416,7 @@
       "sub_components": [
         {
           "name": "RadioGroupItem",
-          "description": "An individual radio button with a filled circle indicator when selected."
+          "description": "An individual radio button with a filled circle indicator when selected. In the card variant it is a card with icon, title and description slots and a check mark."
         }
       ],
       "dependencies": [
@@ -7142,16 +7425,49 @@
       ],
       "tokens_used": [
         "--border-default",
+        "--border-error",
         "--border-focus",
         "--border-strong",
+        "--control-edge-color",
+        "--control-edge-style",
+        "--control-edge-width",
+        "--control-state-edge-width",
+        "--destructive",
         "--focus-ring-width",
+        "--font-size-sm",
+        "--font-size-xs",
+        "--font-weight-semibold",
         "--interactive-primary-bg",
         "--interactive-primary-text",
+        "--line-height-snug",
+        "--line-height-tight",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--opacity-60",
         "--primary",
         "--radio-border",
-        "--spacing-2"
+        "--radio-card-bg",
+        "--radio-card-border",
+        "--radio-card-hover-bg",
+        "--radio-card-icon-size",
+        "--radio-card-mark-bg",
+        "--radio-card-mark-text",
+        "--radio-card-radius",
+        "--radio-card-selected-bg",
+        "--radio-card-selected-border",
+        "--radio-edgeless-bg",
+        "--radius-full",
+        "--radius-lg",
+        "--spacing-1",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--stroke-width-thin",
+        "--surface-card",
+        "--surface-interactive-hover",
+        "--surface-muted",
+        "--text-primary",
+        "--text-secondary"
       ],
       "example": "<RadioGroup defaultValue=\"medium\">\n  <div style={{ display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" }}>\n    <RadioGroupItem value=\"small\" id=\"small\" />\n    <Label htmlFor=\"small\">Small</Label>\n  </div>\n  <div style={{ display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" }}>\n    <RadioGroupItem value=\"medium\" id=\"medium\" />\n    <Label htmlFor=\"medium\">Medium</Label>\n  </div>\n  <div style={{ display: \"flex\", alignItems: \"center\", gap: \"0.5rem\" }}>\n    <RadioGroupItem value=\"large\" id=\"large\" />\n    <Label htmlFor=\"large\">Large</Label>\n  </div>\n</RadioGroup>\n"
     },
@@ -7185,7 +7501,7 @@
     },
     "save-status": {
       "category": "feedback",
-      "description": "Autosave readout — Saved / Saving / Unsaved / Couldn't save in a fixed-width slot that never reflows its row, with a retry mark after a failed save. aria-live polite; draws no edge.",
+      "description": "Autosave readout — Saved / Saving / Syncing / Unsaved / Couldn't save in a fixed-width slot that never reflows its row, with a retry mark after a failed save. aria-live polite; draws no edge.",
       "when_to_use": [
         "Showing where an autosaved value stands, beside the section or field it saves",
         "Any editor with no Save button, driven by the useAutosave hook",
@@ -7200,14 +7516,15 @@
         "status": {
           "saved": "Saved — muted, the resting state.",
           "saving": "Saving — a write is in flight.",
-          "unsaved": "Unsaved — a change is waiting for the debounce.",
+          "syncing": "Syncing — a first sync from an outside source is writing rows the user did not type. The consumer sets it; useAutosave never emits it.",
+          "unsaved": "Unsaved — a change is waiting for the debounce. Draw it as a dot alone with unsavedAs=\"dot\"; the label stays as the dot's accessible name.",
           "refused": "Couldn't save — validation refused the value or the write failed; shows a retry mark when onRetry is passed."
         }
       },
       "props": [
         {
           "name": "status",
-          "type": "'saved' | 'saving' | 'unsaved' | 'refused'",
+          "type": "'saved' | 'saving' | 'syncing' | 'unsaved' | 'refused'",
           "description": "Where the value stands — pass useAutosave(...).status."
         },
         {
@@ -7217,8 +7534,20 @@
         },
         {
           "name": "labels",
-          "type": "Partial<Record<'saved' | 'saving' | 'unsaved' | 'refused', string>>",
-          "description": "Override any of the four labels, e.g. to translate them."
+          "type": "Partial<Record<'saved' | 'saving' | 'syncing' | 'unsaved' | 'refused', string>>",
+          "description": "Override any of the five labels, e.g. to translate them."
+        },
+        {
+          "name": "unsavedAs",
+          "type": "'text' | 'dot'",
+          "default": "\"text\"",
+          "description": "How unsaved is drawn. dot draws a dot alone, keeping the label as visually hidden text so it is still announced."
+        },
+        {
+          "name": "dot",
+          "type": "boolean",
+          "default": "false",
+          "description": "Draws a status dot before the label in every state, in the state's ink. Its box is as wide as the larger of the two dot sizes, so the label never moves."
         },
         {
           "name": "retryLabel",
@@ -7241,10 +7570,15 @@
         "--font-size-xs",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--radius-full",
         "--radius-sm",
+        "--save-status-dot-size",
         "--save-status-font-family",
+        "--save-status-font-size",
         "--save-status-letter-spacing",
+        "--save-status-syncing-color",
         "--save-status-text-transform",
+        "--save-status-unsaved-dot-size",
         "--save-status-width",
         "--spacing-1",
         "--spacing-2",
@@ -7674,6 +8008,103 @@
       ],
       "example": "import Link from 'next/link'\nimport { UsersIcon, ShieldIcon, EnvelopeIcon } from '@phosphor-icons/react'\nimport { SectionNav, SectionNavItem } from '@/components/ui/section-nav/section-nav'\n\n<SectionNav aria-label=\"Organization sections\">\n  <SectionNavItem asChild isActive icon={UsersIcon} label=\"Detail\">\n    <Link href=\"/org/detail\" />\n  </SectionNavItem>\n  <SectionNavItem asChild icon={ShieldIcon} label=\"Roles\" count={4}>\n    <Link href=\"/org/roles\" />\n  </SectionNavItem>\n  <SectionNavItem asChild icon={EnvelopeIcon} label=\"Invites\" count={2}>\n    <Link href=\"/org/invites\" />\n  </SectionNavItem>\n</SectionNav>\n"
     },
+    "segmented-control": {
+      "category": "form",
+      "description": "A single-select pill group with a sliding active indicator, an options API and a fullWidth equal-segment layout. A thin wrapper over ToggleGroup that never goes empty.",
+      "when_to_use": [
+        "Switching a list or view filter between 2-5 mutually exclusive options (Unpaid / Paid / Any)",
+        "A scope or range selector where exactly one option is always on",
+        "Compact view-mode switches (day / week / month) that change the content below in place"
+      ],
+      "when_not_to_use": [
+        "Navigation between pages or routes (use Tabs)",
+        "Multi-select toolbar toggles (use ToggleGroup type=\"multiple\")",
+        "A form answer that is submitted with the form (use Radio Group)",
+        "A long list of options (use Select or Combobox)",
+        "Binary on/off (use Switch)"
+      ],
+      "variants": {
+        "size": [
+          "xs",
+          "sm",
+          "md",
+          "lg"
+        ],
+        "fullWidth": [
+          true,
+          false
+        ]
+      },
+      "props": [
+        {
+          "name": "options",
+          "type": "{ value: string; label: ReactNode; icon?: ReactNode; disabled?: boolean }[]",
+          "description": "The segments, in order."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Controlled value."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "description": "Uncontrolled initial value. Falls back to the first enabled option."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Fires with the new value. Never fires with an empty string."
+        },
+        {
+          "name": "size",
+          "type": "'xs' | 'sm' | 'md' | 'lg'",
+          "default": "md"
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "default": false,
+          "description": "Equal-width segments spanning the container."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": false
+        }
+      ],
+      "dependencies": [
+        "class-variance-authority"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-focus",
+        "--control-edge-color",
+        "--control-edge-style",
+        "--control-edge-width",
+        "--control-state-edge-width",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-weight-medium",
+        "--interactive-primary-bg",
+        "--interactive-primary-text",
+        "--label-box-height",
+        "--primary",
+        "--radius-lg",
+        "--radius-md",
+        "--radius-xl",
+        "--segmented-control-active-weight",
+        "--segmented-control-inactive-text",
+        "--segmented-control-indicator-bg",
+        "--segmented-control-indicator-edge",
+        "--segmented-control-indicator-text",
+        "--segmented-control-radius",
+        "--segmented-control-track-bg",
+        "--surface-page",
+        "--text-primary"
+      ],
+      "example": "<SegmentedControl\n  aria-label=\"Payment status\"\n  defaultValue=\"unpaid\"\n  options={[\n    { value: \"unpaid\", label: \"Unpaid\" },\n    { value: \"paid\", label: \"Paid\" },\n    { value: \"any\", label: \"Any\" },\n  ]}\n/>\n"
+    },
     "segmented-progress": {
       "category": "data-display",
       "description": "Discrete per-step progress meter — N equal pill segments in a row, each individually expressing done, current, or pending state. Designed for multi-step flows where individual step completion matters, not just an overall percentage.",
@@ -7821,6 +8252,8 @@
         "--control-edge-color",
         "--control-edge-style",
         "--control-edge-width",
+        "--control-invalid-halo-width",
+        "--control-invalid-ring-width",
         "--control-state-edge-width",
         "--field-control-bg",
         "--field-menu-bg",
@@ -7828,6 +8261,7 @@
         "--font-size-base",
         "--font-size-sm",
         "--font-size-xs",
+        "--label-box-height",
         "--motion-duration-150",
         "--motion-easing-default",
         "--radius-lg",
@@ -7838,6 +8272,9 @@
         "--radix-select-trigger-width",
         "--select-bg",
         "--select-border",
+        "--select-height",
+        "--select-padding",
+        "--select-radius",
         "--shadow-lg",
         "--spacing-1",
         "--spacing-2",
@@ -7882,16 +8319,25 @@
           "name": "decorative",
           "type": "boolean",
           "default": true,
-          "description": "When true, removes the separator from the accessibility tree"
+          "description": "When true, removes the separator from the accessibility tree. Ignored when a label is set."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "description": "Text centred on a horizontal rule, with the rule on both sides. A labelled separator is never decorative (role=\"separator\", named by the label). Ignored on a vertical separator."
         }
       ],
       "dependencies": [
         "@radix-ui/react-separator"
       ],
       "tokens_used": [
-        "--border-default"
+        "--border-default",
+        "--font-size-sm",
+        "--separator-color",
+        "--spacing-3",
+        "--text-secondary"
       ],
-      "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"
+      "example": "<div>\n  <h3>Section A</h3>\n  <Separator />\n  <h3>Section B</h3>\n</div>\n\n<Separator label=\"or\" />\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",
@@ -8026,6 +8472,12 @@
         ]
       },
       "props": [
+        {
+          "name": "container",
+          "type": "HTMLElement | null",
+          "default": "undefined",
+          "description": "Element the overlay and panel portal into, covering only that element (Sheet root). Not Radix modal mode: focus is trapped in the panel, the container's other children are inert, and content outside the container stays interactive. Pass the element, not a ref.\n"
+        },
         {
           "name": "side",
           "type": "'top' | 'right' | 'bottom' | 'left'",
@@ -9855,6 +10307,7 @@
         "--font-weight-medium",
         "--hairline",
         "--hairline-width",
+        "--label-box-height",
         "--motion-duration-150",
         "--motion-duration-normal",
         "--motion-easing-default",
@@ -9936,6 +10389,12 @@
           "type": "boolean",
           "default": "false",
           "description": "Disables the tag input."
+        },
+        {
+          "name": "entryAs",
+          "type": "'text' | 'slot'",
+          "default": "\"text\"",
+          "description": "Where the next tag is typed. text types after the last tag as bare text; slot types into a dashed slot the shape of a held tag, drawn on the shared drop edge so edges off turns it off."
         }
       ],
       "dependencies": [
@@ -9945,6 +10404,8 @@
         "--border-default",
         "--border-focus",
         "--border-strong",
+        "--control-drop-edge-style",
+        "--control-drop-edge-width",
         "--control-edge-color",
         "--control-edge-style",
         "--control-edge-width",
@@ -9962,6 +10423,18 @@
         "--surface-muted",
         "--tag-input-bg",
         "--tag-input-border",
+        "--tag-input-min-height",
+        "--tag-input-padding",
+        "--tag-input-radius",
+        "--tag-input-slot-height",
+        "--tag-input-slot-min-width",
+        "--tag-input-slot-padding-x",
+        "--tag-input-slot-radius",
+        "--tag-input-tag-font-size",
+        "--tag-input-tag-font-weight",
+        "--tag-input-tag-height",
+        "--tag-input-tag-padding-x",
+        "--tag-input-tag-radius",
         "--text-primary",
         "--text-secondary"
       ],
@@ -10124,6 +10597,8 @@
         "--control-edge-color",
         "--control-edge-style",
         "--control-edge-width",
+        "--control-invalid-halo-width",
+        "--control-invalid-ring-width",
         "--control-state-edge-width",
         "--focus-ring-width",
         "--font-size-base",
@@ -10140,7 +10615,9 @@
         "--text-primary",
         "--text-secondary",
         "--textarea-bg",
-        "--textarea-border"
+        "--textarea-border",
+        "--textarea-padding",
+        "--textarea-radius"
       ],
       "example": "<Textarea placeholder=\"Write your message...\" rows={4} />\n\n<Textarea aria-invalid=\"true\" />\n"
     },
@@ -10219,6 +10696,127 @@
       ],
       "example": "import { ThemeSwitcher } from \"@/components/ui/theme-switcher/theme-switcher\"\nimport { SourceInspectorToggle } from \"@/components/devtools/source-inspector/source-inspector-toggle\"\n\n<ThemeSwitcher\n  themes={[\n    { id: \"default\", label: \"Default\", bodyClass: \"\" },\n    { id: \"blackout\", label: \"Blackout\", bodyClass: \"blackout-theme\" },\n  ]}\n  extras={<SourceInspectorToggle />}\n/>\n"
     },
+    "time-picker": {
+      "category": "form",
+      "description": "A time picker with a typeable field and a popover of hour and minute columns, shown in a 12- or 24-hour cycle with a configurable minute step.",
+      "when_to_use": [
+        "A wall-clock time of day in a form (doors open, start time, reminder time)",
+        "Times where only a few minute values make sense (15- or 30-minute steps)",
+        "Fields that must show AM/PM or 24-hour regardless of the browser's locale"
+      ],
+      "when_not_to_use": [
+        "A date and a time together (use DatePicker beside a TimePicker, or a dedicated datetime picker)",
+        "Durations or elapsed time (use NumberInput)",
+        "Time zones; values are venue-local wall-clock times with no zone",
+        "A native time input is acceptable and the browser locale is the right one"
+      ],
+      "props": [
+        {
+          "name": "value",
+          "type": "string | undefined",
+          "description": "Selected time as 24-hour \"HH:MM\""
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "description": "Initial \"HH:MM\" when uncontrolled"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string | undefined) => void",
+          "description": "Called with 24-hour \"HH:MM\", or undefined when the field is cleared"
+        },
+        {
+          "name": "hourCycle",
+          "type": "12 | 24",
+          "default": "from locale",
+          "description": "12 shows \"4:30 PM\" and adds an AM/PM column; 24 shows \"16:30\""
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "default": "document language",
+          "description": "BCP 47 locale that decides the default hour cycle"
+        },
+        {
+          "name": "minuteStep",
+          "type": "number",
+          "default": "1",
+          "description": "Minutes between popover choices; typed times snap to the nearest step"
+        },
+        {
+          "name": "placeholder",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "description": "Controlled popover state"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void"
+        },
+        {
+          "name": "container",
+          "type": "HTMLElement | null",
+          "description": "Element the popover portals into (defaults to document.body)"
+        },
+        {
+          "name": "triggerLabel",
+          "type": "string",
+          "default": "\"Choose time\"",
+          "description": "Accessible name of the clock button"
+        }
+      ],
+      "dependencies": [
+        "@radix-ui/react-popover",
+        "@phosphor-icons/react"
+      ],
+      "tokens_used": [
+        "--border-default",
+        "--border-error",
+        "--border-focus",
+        "--border-strong",
+        "--control-edge-color",
+        "--control-edge-style",
+        "--control-edge-width",
+        "--control-state-edge-width",
+        "--field-control-bg",
+        "--field-menu-bg",
+        "--focus-ring-width",
+        "--font-body",
+        "--font-size-sm",
+        "--hairline-strong",
+        "--hairline-width",
+        "--input-bg",
+        "--input-border",
+        "--input-placeholder-color",
+        "--interactive-primary-text",
+        "--motion-duration-150",
+        "--motion-easing-default",
+        "--primary",
+        "--radius-lg",
+        "--radius-md",
+        "--radius-sm",
+        "--shadow-md",
+        "--spacing-1",
+        "--spacing-3",
+        "--stroke-width-thin",
+        "--surface-card",
+        "--surface-interactive-default",
+        "--surface-popover",
+        "--surface-subtle",
+        "--text-primary",
+        "--text-secondary"
+      ],
+      "example": "<TimePicker value={opensAt} onChange={setOpensAt} aria-label=\"Doors open\" />\n\n<TimePicker\n  hourCycle={24}\n  minuteStep={15}\n  value={start}\n  onChange={setStart}\n  aria-label=\"Set start\"\n/>\n"
+    },
     "timeline": {
       "category": "data-display",
       "description": "A vertical timeline with status-based styling, optional icons, timestamps, and connector lines.",
@@ -10621,6 +11219,7 @@
       "tokens_used": [
         "--border-default",
         "--border-focus",
+        "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-base",
         "--font-size-sm",
@@ -10628,6 +11227,7 @@
         "--font-weight-medium",
         "--interactive-primary-bg",
         "--interactive-primary-text",
+        "--label-box-height",
         "--motion-duration-150",
         "--motion-duration-200",
         "--motion-easing-default",
@@ -12187,11 +12787,13 @@
     },
     "month-calendar": {
       "category": "data-display",
-      "description": "A theme-portable month event-grid (scheduler) block. Renders a 6×7 day-cell grid under a localized weekday header, with prev/next month navigation, a view-mode segmented control (Month / Week / Day), and per-cell event chips. Each chip carries a status-dot slot (success / warning / danger / info) and an optional series tint (1–5) keyed to the theme's chart ramp for color-coding a recurring series or resource lane. Days outside the displayed month are dimmed; optional today and selected-day highlighting. Fully token-driven — every color, spacing, stroke, radius, shadow, opacity, and motion value binds to a Visor token, so the grid adopts the active theme without modification.",
+      "description": "A theme-portable month event-grid (scheduler) block. Renders a 6×7 day-cell grid under a localized weekday header, with prev/next month navigation, a view-mode segmented control (Month / Week / Day), and per-cell event chips. Each chip carries a status-dot slot (success / warning / danger / info) and an optional series tint (1–5) keyed to the theme's chart ramp for color-coding a recurring series or resource lane. Days outside the displayed month are dimmed; optional today and selected-day highlighting. Events with an `end` draw as one bar across the days they span, cut at week edges with a continued mark and stacked in lanes (with \"+N\" past `maxLanes`). `renderWeekDetail` opens a slot under the week that holds the selected day; `renderDayMark` puts a consumer mark in each day cell. Dates are plain YYYY-MM-DD calendar dates. The month is an ARIA grid with arrow-key day movement. Fully token-driven — every color, spacing, stroke, radius, shadow, opacity, and motion value binds to a Visor token, so the grid adopts the active theme without modification.",
       "components_used": [],
       "when_to_use": [
         "Admin or booking surfaces that show events-in-a-month (the most common scheduling view)",
         "Color-coding recurring series or resource lanes via the per-chip series tint",
+        "Stays, trips and availability that span several days, drawn as one bar and coloured per event",
+        "A day sheet opening under the selected week",
         "Status-at-a-glance calendars where each event needs a success / warning / danger / info dot"
       ],
       "when_not_to_use": [
@@ -13102,6 +13704,7 @@
     ],
     "data-display": [
       "accordion",
+      "action-row",
       "avatar",
       "badge",
       "bento-grid",
@@ -13201,6 +13804,7 @@
       "phone-input",
       "radio-group",
       "search-input",
+      "segmented-control",
       "select",
       "slider",
       "slider-control",
@@ -13208,6 +13812,7 @@
       "switch",
       "tag-input",
       "textarea",
+      "time-picker",
       "tin-input",
       "toggle-group"
     ],