@loworbitstudio/visor 1.30.0 → 1.34.0

package/dist/CHANGELOG.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-10-03T18:10:41.409Z",
+  "generated_at": "2026-10-04T04:36:38.223Z",
   "components": {
     "accessibility-specimen": {
       "changeType": "current",
@@ -14,6 +14,12 @@
       "breakingChange": false,
       "migrationNote": null
     },
+    "action-row": {
+      "changeType": "current",
+      "files": [],
+      "breakingChange": false,
+      "migrationNote": null
+    },
     "activity-feed": {
       "changeType": "current",
       "files": [],
@@ -554,6 +560,12 @@
       "breakingChange": false,
       "migrationNote": null
     },
+    "segmented-control": {
+      "changeType": "current",
+      "files": [],
+      "breakingChange": false,
+      "migrationNote": null
+    },
     "segmented-progress": {
       "changeType": "current",
       "files": [],
@@ -746,6 +758,12 @@
       "breakingChange": false,
       "migrationNote": null
     },
+    "time-picker": {
+      "changeType": "current",
+      "files": [],
+      "breakingChange": false,
+      "migrationNote": null
+    },
     "timeline": {
       "changeType": "current",
       "files": [],

package/dist/index.js

@@ -8802,6 +8802,50 @@ var FIXTURES = {
           ])],
         };
       })()`
+    },
+    // VI-667: bottom-sheet presentation, with the drag handle and a leading back action.
+    sheet: {
+      export: "Dialog",
+      props: `(function () {
+        var h = React.createElement;
+        return {
+          open: true,
+          presentation: "sheet",
+          children: [h(__mod.DialogTrigger, { key: "tr", asChild: true }, h("button", { type: "button" }, "Open")), h(__mod.DialogContent, { key: "c", showHandle: true }, [
+            h(__mod.DialogHeader, { key: "h", back: h(__mod.DialogBack, null) }, [
+              h(__mod.DialogTitle, { key: "t" }, "Set start time"),
+              h(__mod.DialogDescription, { key: "d" }, "Doors open one hour earlier."),
+            ]),
+            h("input", { key: "i", "aria-label": "Start", defaultValue: "21:00", style: { width: "100%", boxSizing: "border-box", padding: "8px" } }),
+            h(__mod.DialogFooter, { key: "f" }, h("button", { type: "button" }, "Save")),
+          ])],
+        };
+      })()`
+    },
+    // VI-667: dialog scoped to one pane (#root) under a scrim; the page outside it is untouched.
+    scoped: {
+      export: "Dialog",
+      props: `(function () {
+        var h = React.createElement;
+        var pane = document.getElementById("root");
+        pane.style.minHeight = "420px";
+        pane.style.position = "relative";
+        pane.style.background = "var(--surface-card, #f3f4f6)";
+        return {
+          open: true,
+          container: pane,
+          children: [
+            h("p", { key: "p", style: { margin: 0, padding: "16px" } }, "Editor pane: stays visible behind the scrim."),
+            h(__mod.DialogContent, { key: "c" }, [
+              h(__mod.DialogHeader, { key: "h", back: h(__mod.DialogBack, null) }, [
+                h(__mod.DialogTitle, { key: "t" }, "Sign back in"),
+                h(__mod.DialogDescription, { key: "d" }, "Your session timed out."),
+              ]),
+              h(__mod.DialogFooter, { key: "f" }, h("button", { type: "button" }, "Continue")),
+            ]),
+          ],
+        };
+      })()`
     }
   },
   popover: {
@@ -8838,6 +8882,49 @@ var FIXTURES = {
       })()`
     }
   },
+  // VI-669: a block, resolved from blocks/. July 2026 with a stay crossing a week
+  // edge, three overlapping spans plus a fourth ("+1"), a colour-token event, a
+  // day mark, and the week detail slot open under the selected day.
+  "month-calendar": {
+    default: {
+      export: "MonthCalendar",
+      props: `(function () {
+        var h = React.createElement;
+        return {
+          month: "2026-07-01",
+          today: "2026-07-09",
+          selectedDate: "2026-07-15",
+          weekStartsOn: 1,
+          onSelectDate: function () {},
+          events: [
+            { id: "berlin", start: "2026-07-02", end: "2026-07-05", title: "Berlin stay", series: 1 },
+            { id: "lisbon", start: "2026-07-13", end: "2026-07-19", title: "Lisbon run", color: "--chart-3" },
+            { id: "paris", start: "2026-07-20", end: "2026-07-22", title: "Paris", series: 4 },
+            { id: "a", start: "2026-07-20", end: "2026-07-21", title: "Studio hold", series: 2 },
+            { id: "b", start: "2026-07-20", end: "2026-07-24", title: "Press week", series: 5 },
+            { id: "c", start: "2026-07-21", end: "2026-07-22", title: "Fourth lane", series: 3 },
+            { id: "gig", date: "2026-07-09", title: "Soundcheck", status: "success", series: 2 },
+          ],
+          renderDayMark: function (day) { return day.date === "2026-07-17" ? "3" : null; },
+          renderWeekDetail: function (week) {
+            return h("div", null, h("strong", null, "Week of " + week.start), h("p", { style: { margin: 0 } }, "Day sheet content sits here."));
+          },
+        };
+      })()`
+    },
+    overlap: {
+      export: "MonthCalendar",
+      props: `{
+        month: "2026-07-01",
+        events: [
+          { id: "a", start: "2026-07-07", end: "2026-07-11", title: "Stay A", series: 1 },
+          { id: "b", start: "2026-07-08", end: "2026-07-12", title: "Stay B", series: 2 },
+          { id: "c", start: "2026-07-09", end: "2026-07-10", title: "Stay C", series: 3 },
+          { id: "d", start: "2026-07-09", end: "2026-07-10", title: "Stay D", series: 4 },
+        ],
+      }`
+    }
+  },
   "stat-card": {
     default: {
       export: "StatCard",
@@ -9027,7 +9114,44 @@ var FIXTURES = {
   // the edge tokens leave a default theme unchanged.
   input: {
     default: { export: "Input", interactiveTarget: "input", props: `{ placeholder: "Email address" }` },
-    invalid: { export: "Input", interactiveTarget: "input", props: `{ defaultValue: "not-an-email", "aria-invalid": true }` }
+    invalid: { export: "Input", interactiveTarget: "input", props: `{ defaultValue: "not-an-email", "aria-invalid": true }` },
+    // VI-662: fixed text inside the well, beside the value.
+    suffix: { export: "Input", interactiveTarget: "input", props: `{ "aria-label": "Address", defaultValue: "lowtide", suffix: ".epk.pro" }` },
+    prefix: { export: "Input", interactiveTarget: "input", props: `{ "aria-label": "Amount", inputMode: "decimal", defaultValue: "1,250.00", prefix: "\u20AC" }` },
+    // Descenders and accents: a native input must never clip them (text-box trim does).
+    descenders: { export: "Input", interactiveTarget: "input", props: `{ "aria-label": "Amount", defaultValue: "Typography jpq \xC9\xC5\xD1", prefix: "\u20AC", suffix: "jpy" }` },
+    both: { export: "Input", interactiveTarget: "input", props: `{ "aria-label": "Rate", inputMode: "decimal", defaultValue: "85", prefix: "$", suffix: "/ hr" }` }
+  },
+  // VI-671: a rule, a word and a rule.
+  separator: {
+    default: { export: "Separator", props: `{ style: { width: 360 } }` },
+    labelled: { export: "Separator", props: `{ label: "or", style: { width: 360 } }` }
+  },
+  "number-input": {
+    default: { export: "NumberInput", interactiveTarget: "input", props: `{ "aria-label": "Quantity", defaultValue: 4, min: 0, max: 99 }` },
+    prefix: { export: "NumberInput", interactiveTarget: "input", props: `{ "aria-label": "Fee", defaultValue: 150, prefix: "$" }` },
+    descenders: { export: "NumberInput", interactiveTarget: "input", props: `{ "aria-label": "Fee", defaultValue: 1299, prefix: "\u20AC", suffix: "jpy" }` },
+    suffix: { export: "NumberInput", interactiveTarget: "input", props: `{ "aria-label": "Hours", defaultValue: 2, suffix: "h" }` }
+  },
+  // VI-654: the calendar renders open on the month of `value` (November), not the
+  // device's month; `align-end` shows the popover right-aligned to the trigger.
+  "date-picker": {
+    default: { export: "DatePicker", interactiveTarget: "button", props: `{ value: new Date(2026, 10, 14), defaultOpen: true }` },
+    "align-end": { export: "DatePicker", interactiveTarget: "button", props: `{ value: new Date(2026, 10, 14), defaultOpen: true, align: "end", className: "w-full" }` }
+  },
+  // VI-670: invalid keeps the digits; trailing holds a working indicator or Resend.
+  "otp-input": {
+    default: { export: "OTPInput", interactiveTarget: "input", props: `{ value: "428" }` },
+    invalid: { export: "OTPInput", interactiveTarget: "input", props: `{ value: "428519", invalid: true, errorMessage: "That code didn't work. Check it and try again." }` },
+    trailing: { export: "OTPInput", interactiveTarget: "input", props: `{ value: "428519", trailing: React.createElement("button", { type: "button" }, "Resend") }` }
+  },
+  // VI-624: `default` is the closed field; the popover fixtures render open so the
+  // two-column (24-hour) and three-column (12-hour) anatomy can be inspected.
+  "time-picker": {
+    default: { export: "TimePicker", interactiveTarget: "input", props: `{ "aria-label": "Doors open", hourCycle: 12, minuteStep: 15, defaultValue: "16:00" }` },
+    "popover-24h": { export: "TimePicker", interactiveTarget: "input", props: `{ "aria-label": "Set start", hourCycle: 24, minuteStep: 15, defaultValue: "16:15", open: true }` },
+    "popover-12h": { export: "TimePicker", interactiveTarget: "input", props: `{ "aria-label": "Doors open", hourCycle: 12, minuteStep: 15, defaultValue: "16:15", open: true }` },
+    invalid: { export: "TimePicker", interactiveTarget: "input", props: `{ "aria-label": "Doors open", hourCycle: 12, defaultValue: "16:00", "aria-invalid": true }` }
   },
   textarea: {
     default: { export: "Textarea", interactiveTarget: "textarea", props: `{ placeholder: "Tell us more" }` },
@@ -9055,6 +9179,51 @@ var FIXTURES = {
     checked: { export: "Checkbox", interactiveTarget: "button", props: `{ "aria-label": "Accept", defaultChecked: true }` },
     invalid: { export: "Checkbox", interactiveTarget: "button", props: `{ "aria-label": "Accept", "aria-invalid": true }` }
   },
+  // VI-668: the card variant — icon, title, line; the third level is drawn disabled.
+  "radio-group": {
+    default: {
+      export: "RadioGroup",
+      interactiveTarget: '[role="radio"]',
+      props: `(function () {
+        var h = React.createElement;
+        return {
+          "aria-label": "Size",
+          defaultValue: "medium",
+          style: { width: 320 },
+          children: ["small", "medium", "large"].map(function (v) {
+            return h(__mod.RadioGroupItem, { key: v, value: v, "aria-label": v });
+          }),
+        };
+      })()`
+    },
+    card: {
+      export: "RadioGroup",
+      interactiveTarget: '[role="radio"]',
+      props: `(function () {
+        var h = React.createElement;
+        var icon = function (shapes) {
+          return h("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor" }, shapes);
+        };
+        var levels = [
+          ["just-you", "Just You", "Only you can see this booking.", icon([h("circle", { key: 1, cx: 12, cy: 8, r: 4 }), h("path", { key: 2, d: "M4 21a8 8 0 0 1 16 0Z" })])],
+          ["team", "Your Team", "Everyone on your team can see it.", icon([h("circle", { key: 1, cx: 8, cy: 9, r: 3.5 }), h("circle", { key: 2, cx: 16, cy: 9, r: 3.5 }), h("path", { key: 3, d: "M1 20a7 7 0 0 1 14 0ZM9 20a7 7 0 0 1 14 0Z" })])],
+          ["public", "Public", "Verified bookers only for now.", icon([h("path", { key: 1, d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 3a7 7 0 0 1 0 14 7 7 0 0 1 0-14Z", fillRule: "evenodd" })])],
+        ];
+        return {
+          variant: "card",
+          "aria-label": "Visibility",
+          defaultValue: "team",
+          style: { width: 360 },
+          children: levels.map(function (l, i) {
+            return h(__mod.RadioGroupItem, {
+              key: l[0], value: l[0], icon: l[3], title: l[1], description: l[2],
+              disabled: i === 2, "aria-describedby": i === 2 ? "radio-reason" : undefined,
+            });
+          }).concat([h("p", { key: "r", id: "radio-reason", style: { margin: 0, fontSize: 12 } }, "Public needs a verified booking.")]),
+        };
+      })()`
+    }
+  },
   switch: {
     default: { export: "Switch", interactiveTarget: "button", props: `{ "aria-label": "Notifications" }` },
     checked: { export: "Switch", interactiveTarget: "button", props: `{ "aria-label": "Notifications", defaultChecked: true }` },
@@ -9093,21 +9262,95 @@ var FIXTURES = {
       export: "InlineEdit",
       interactiveTarget: "input",
       props: `{ as: "h2", style: { margin: 0, fontSize: "21px", lineHeight: 1.25, fontWeight: 600 }, label: "Section title", value: "Track record", defaultValue: "Untitled section", onCommit: function () {}, defaultEditing: true }`
+    },
+    // VI-677: pencil={false}. The text is the button, so hover/focus drive it.
+    "no-pencil": {
+      export: "InlineEdit",
+      interactiveTarget: "button",
+      props: `{ label: "Rider title", value: "Technical rider", defaultValue: "Rider", onCommit: function () {}, pencil: false }`
+    },
+    "no-pencil-default-value": {
+      export: "InlineEdit",
+      interactiveTarget: "button",
+      props: `{ label: "Rider title", value: "", defaultValue: "Rider", onCommit: function () {}, pencil: false }`
+    },
+    // Descenders and accents must survive the cap-band trim.
+    "no-pencil-glyphs": {
+      export: "InlineEdit",
+      interactiveTarget: "button",
+      props: `{ label: "Rider title", value: "Typography jpq \xC9\xC5\xD1", defaultValue: "Rider", onCommit: function () {}, pencil: false }`
+    },
+    "no-pencil-heading": {
+      export: "InlineEdit",
+      interactiveTarget: "button",
+      props: `{ as: "h2", style: { margin: 0, fontSize: "21px", lineHeight: 1.25, fontWeight: 600 }, label: "Section title", value: "Track record", defaultValue: "Untitled section", onCommit: function () {}, pencil: false }`
     }
   },
-  // VI-657: the autosave readout in each state. It draws no edge in any of them.
+  // VI-657/VI-665: the autosave readout in each state, Unsaved as a dot too. It draws no edge in any of them.
   "save-status": {
     default: { export: "SaveStatus", props: `{ status: "saved" }` },
     saving: { export: "SaveStatus", props: `{ status: "saving" }` },
+    syncing: { export: "SaveStatus", props: `{ status: "syncing" }` },
     unsaved: { export: "SaveStatus", props: `{ status: "unsaved" }` },
+    "unsaved-dot": { export: "SaveStatus", props: `{ status: "unsaved", unsavedAs: "dot" }` },
     refused: { export: "SaveStatus", props: `{ status: "refused" }` },
-    "refused-retry": { export: "SaveStatus", interactiveTarget: "button", props: `{ status: "refused", onRetry: function () {} }` }
+    "refused-retry": { export: "SaveStatus", interactiveTarget: "button", props: `{ status: "refused", onRetry: function () {} }` },
+    dot: { export: "SaveStatus", props: `{ status: "saved", dot: true }` },
+    "dot-unsaved": { export: "SaveStatus", props: `{ status: "unsaved", dot: true }` }
+  },
+  // VI-615: the single-select pill group. `fullwidth` fills the render frame.
+  "segmented-control": {
+    default: {
+      export: "SegmentedControl",
+      interactiveTarget: "[data-slot=toggle-group-item]",
+      props: `{ "aria-label": "Payment status", defaultValue: "paid", options: [{ value: "unpaid", label: "Unpaid" }, { value: "paid", label: "Paid" }, { value: "any", label: "Any" }] }`
+    },
+    fullwidth: {
+      export: "SegmentedControl",
+      props: `{ "aria-label": "Artist scope", fullWidth: true, defaultValue: "active", options: [{ value: "active", label: "Active" }, { value: "archived", label: "Archived" }, { value: "dnb", label: "Do-not-book" }] }`
+    },
+    "disabled-option": {
+      export: "SegmentedControl",
+      props: `{ "aria-label": "View", defaultValue: "day", options: [{ value: "day", label: "Day" }, { value: "week", label: "Week" }, { value: "month", label: "Month", disabled: true }] }`
+    }
+  },
+  // VI-690: the single-select toggle group in both variants; `--state focus` drives the first item.
+  "toggle-group": {
+    default: {
+      export: "ToggleGroup",
+      interactiveTarget: "[data-slot=toggle-group-item]",
+      props: `(function () {
+        var h = React.createElement;
+        return { type: "single", "aria-label": "Text alignment", defaultValue: "center", children: [
+          h(__mod.ToggleGroupItem, { key: "l", value: "left" }, "Left"),
+          h(__mod.ToggleGroupItem, { key: "c", value: "center" }, "Center"),
+          h(__mod.ToggleGroupItem, { key: "r", value: "right" }, "Right"),
+        ] };
+      })()`
+    },
+    outline: {
+      export: "ToggleGroup",
+      interactiveTarget: "[data-slot=toggle-group-item]",
+      props: `(function () {
+        var h = React.createElement;
+        return { type: "single", variant: "outline", "aria-label": "View", defaultValue: "week", children: [
+          h(__mod.ToggleGroupItem, { key: "d", value: "day" }, "Day"),
+          h(__mod.ToggleGroupItem, { key: "w", value: "week" }, "Week"),
+          h(__mod.ToggleGroupItem, { key: "m", value: "month" }, "Month"),
+        ] };
+      })()`
+    }
   },
   "tag-input": {
     default: {
       export: "TagInput",
       interactiveTarget: "input",
       props: `{ defaultValue: ["design", "tokens"], placeholder: "Add a tag" }`
+    },
+    slot: {
+      export: "TagInput",
+      interactiveTarget: "input",
+      props: `{ defaultValue: ["design", "tokens"], placeholder: "Add a tag", entryAs: "slot" }`
     }
   },
   chip: {
@@ -9123,6 +9366,55 @@ var FIXTURES = {
     default: {
       export: "EmptyState",
       props: `{ heading: "No projects yet", description: "Create a project to get started." }`
+    },
+    error: {
+      export: "EmptyState",
+      props: `{ intent: "error", tone: "subtle", icon: ${ICON_X}, heading: "Could not load the inbox", description: "The request timed out. Check your connection and try again." }`
+    }
+  },
+  // VI-666: ActionRow. Every row is captioned (title = state, line = what it
+  // reads); `edges-off` binds both switches on the list: the resting edge and
+  // the hairline go, the selected state edge and focus stay. `--state hover|focus` drives the
+  // first row.
+  "action-row": {
+    default: {
+      export: "ActionRowList",
+      props: `(function () {
+        var h = React.createElement;
+        var row = function (key, props) {
+          return h(__mod.ActionRow, Object.assign({ key: key, leading: ${ICON_X}, trailing: h("span", null, "Value") }, props), props.title);
+        };
+        return { "aria-label": "States", style: { maxWidth: "420px" }, children: [
+          row("rest", { title: "Rest", line: "no fill, 44px floor" }),
+          row("selected", { title: "Selected", line: "lifted fill + inset edge", selected: true }),
+          row("open", { title: "Open", line: "open fill, aria-expanded", open: true }),
+          row("disabled", { title: "Disabled", line: "disabled opacity", disabled: true }),
+          h(__mod.ActionRow, { key: "bare", trailing: h("span", null, "Review") }, "Title only, trailing value"),
+          h(__mod.ActionRow, { key: "long", leading: ${ICON_X}, line: "A second line that is long enough that it has to wrap onto another line", trailing: h("span", null, "3 suggested") }, "A title long enough that it wraps to a second line at this width"),
+          h(__mod.ActionRow, { key: "glyphs", leading: ${ICON_X}, line: "Descenders jpqgy and accents \xC9\xC5\xD1", trailing: h("span", null, "jpq \xC9\xC5\xD1") }, "Typography jpq \xC9\xC5\xD1"),
+          h(__mod.ActionRow, { key: "link", asChild: true, leading: ${ICON_X}, trailing: h("span", null, "Open") }, h("a", { href: "#billing" }, "Row as a link (asChild)")),
+        ] };
+      })()`
+    },
+    interactive: {
+      export: "ActionRowList",
+      props: `(function () {
+        var h = React.createElement;
+        return { "aria-label": "Interactive", style: { maxWidth: "420px" }, children: [
+          h(__mod.ActionRow, { key: "a", leading: ${ICON_X}, line: "driven by --state", trailing: h("span", null, "Value") }, "First row"),
+          h(__mod.ActionRow, { key: "b", leading: ${ICON_X}, line: "left at rest", trailing: h("span", null, "Value") }, "Second row"),
+        ] };
+      })()`
+    },
+    "edges-off": {
+      export: "ActionRowList",
+      props: `(function () {
+        var h = React.createElement;
+        return { "aria-label": "Edges off", style: { maxWidth: "420px", "--control-edge-width": "0", "--hairline-width": "0" }, children: [
+          h(__mod.ActionRow, { key: "a", leading: ${ICON_X}, line: "edge kept, resting edge off", trailing: h("span", null, "Value"), selected: true }, "Selected"),
+          h(__mod.ActionRow, { key: "b", leading: ${ICON_X}, line: "hairline off", trailing: h("span", null, "Value") }, "Rest"),
+        ] };
+      })()`
     }
   },
   badge: {
@@ -9173,7 +9465,8 @@ function resolveComponentFile(cwd, name) {
   return firstExisting([
     resolve21(cwd, "components", "ui", name, `${name}.tsx`),
     resolve21(cwd, "components", "devtools", name, `${name}.tsx`),
-    resolve21(cwd, "components", "ui", name, "index.tsx")
+    resolve21(cwd, "components", "ui", name, "index.tsx"),
+    resolve21(cwd, "blocks", name, `${name}.tsx`)
   ]);
 }
 function resolveThemeCssFile(cwd, slug2) {
@@ -9301,7 +9594,7 @@ async function renderCommand(component, cwd, options) {
   if (!componentFile) {
     fail3(
       "COMPONENT_NOT_FOUND",
-      `Component "${component}" not found under components/ui/. Expected components/ui/${component}/${component}.tsx.`
+      `Component "${component}" not found under components/ui/ or blocks/. Expected components/ui/${component}/${component}.tsx or blocks/${component}/${component}.tsx.`
     );
   }
   const themeCssFile = resolveThemeCssFile(cwd, options.theme);