@loworbitstudio/visor 1.30.0 → 1.31.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-03T23:23:41.691Z",
   "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",
@@ -1814,6 +1924,7 @@
         "--font-size-xs",
         "--font-weight-medium",
         "--font-weight-semibold",
+        "--label-box-height",
         "--motion-duration-150",
         "--motion-easing-default",
         "--opacity-40",
@@ -3461,6 +3572,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 +3632,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 +3668,8 @@
       "tokens_used": [
         "--border-focus",
         "--border-subtle",
+        "--dialog-keyboard-inset",
+        "--dialog-viewport-height",
         "--focus-ring-offset",
         "--focus-ring-width",
         "--font-size-2xl",
@@ -3537,7 +3684,9 @@
         "--motion-easing-default",
         "--motion-easing-enter",
         "--motion-easing-exit",
+        "--opacity-40",
         "--overlay-bg",
+        "--radius-full",
         "--radius-lg",
         "--radius-sm",
         "--radius-xl",
@@ -4074,7 +4223,12 @@
         "intent": [
           "first-use",
           "zero-results",
-          "no-access"
+          "no-access",
+          "error"
+        ],
+        "fill": [
+          true,
+          false
         ]
       },
       "props": [
@@ -4129,8 +4283,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 +4308,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 +4373,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 +5573,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 +5610,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"
@@ -5512,6 +5683,7 @@
         "--input-border",
         "--input-height-lg",
         "--input-height-md",
+        "--input-nudge",
         "--input-padding-lg",
         "--input-padding-md",
         "--input-padding-sm",
@@ -7098,7 +7270,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 +7279,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 +7312,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 +7321,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 +7397,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 +7412,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 +7430,14 @@
         },
         {
           "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": "retryLabel",
@@ -7241,9 +7460,12 @@
         "--font-size-xs",
         "--motion-duration-150",
         "--motion-easing-default",
+        "--radius-full",
         "--radius-sm",
+        "--save-status-dot-size",
         "--save-status-font-family",
         "--save-status-letter-spacing",
+        "--save-status-syncing-color",
         "--save-status-text-transform",
         "--save-status-width",
         "--spacing-1",
@@ -7828,6 +8050,7 @@
         "--font-size-base",
         "--font-size-sm",
         "--font-size-xs",
+        "--label-box-height",
         "--motion-duration-150",
         "--motion-easing-default",
         "--radius-lg",
@@ -8026,6 +8249,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 +10084,7 @@
         "--font-weight-medium",
         "--hairline",
         "--hairline-width",
+        "--label-box-height",
         "--motion-duration-150",
         "--motion-duration-normal",
         "--motion-easing-default",
@@ -10219,6 +10449,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.",
@@ -10628,6 +10979,7 @@
         "--font-weight-medium",
         "--interactive-primary-bg",
         "--interactive-primary-text",
+        "--label-box-height",
         "--motion-duration-150",
         "--motion-duration-200",
         "--motion-easing-default",
@@ -12187,11 +12539,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 +13456,7 @@
     ],
     "data-display": [
       "accordion",
+      "action-row",
       "avatar",
       "badge",
       "bento-grid",
@@ -13208,6 +13563,7 @@
       "switch",
       "tag-input",
       "textarea",
+      "time-picker",
       "tin-input",
       "toggle-group"
     ],

package/package.json

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