@loworbitstudio/visor 1.29.0 → 1.31.0

package/dist/CHANGELOG.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-09-24T04:59:55.147Z",
+  "generated_at": "2026-10-03T23:23:41.697Z",
   "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": [],
@@ -746,6 +752,12 @@
       "breakingChange": false,
       "migrationNote": null
     },
+    "time-picker": {
+      "changeType": "current",
+      "files": [],
+      "breakingChange": false,
+      "migrationNote": null
+    },
     "timeline": {
       "changeType": "current",
       "files": [],

package/dist/index.js

@@ -8761,6 +8761,170 @@ import { existsSync as existsSync31, mkdirSync as mkdirSync14, readFileSync as r
 import { dirname as dirname15, isAbsolute as isAbsolute7, resolve as resolve21 } from "path";
 var ICON_X = `React.createElement("svg", { viewBox: "0 0 256 256", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": true }, React.createElement("path", { d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" }))`;
 var FIXTURES = {
+  // VI-680: hairline consumers. `__mod` is the component module, so a fixture can
+  // reach the compound parts a single export does not expose.
+  table: {
+    default: {
+      export: "Table",
+      props: `(function () {
+        var h = React.createElement;
+        var row = function (cells, key) {
+          return h(__mod.TableRow, { key: key }, cells.map(function (c, i) { return h(__mod.TableCell, { key: i }, c); }));
+        };
+        return {
+          children: [
+            h(__mod.TableHeader, { key: "h" }, h(__mod.TableRow, null, ["Name", "Role", "Status"].map(function (t) { return h(__mod.TableHead, { key: t }, t); }))),
+            h(__mod.TableBody, { key: "b" }, [
+              row(["Ada Lovelace", "Engineer", "Active"], 1),
+              row(["Grace Hopper", "Admiral", "Active"], 2),
+              row(["Alan Turing", "Researcher", "Away"], 3),
+            ]),
+          ],
+        };
+      })()`
+    }
+  },
+  dialog: {
+    default: {
+      export: "Dialog",
+      props: `(function () {
+        var h = React.createElement;
+        return {
+          open: true,
+          // The trigger gives #root a node; the content itself portals to <body>.
+          children: [h(__mod.DialogTrigger, { key: "tr", asChild: true }, h("button", { type: "button" }, "Open")), h(__mod.DialogContent, { key: "c" }, [
+            h(__mod.DialogHeader, { key: "h" }, [
+              h(__mod.DialogTitle, { key: "t" }, "Invite a teammate"),
+              h(__mod.DialogDescription, { key: "d" }, "They will get an email with a link to join."),
+            ]),
+            h("p", { key: "b" }, "Dialog body copy sits between the header and the footer rule."),
+            h(__mod.DialogFooter, { key: "f" }, h("button", { type: "button" }, "Send invite")),
+          ])],
+        };
+      })()`
+    },
+    // 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: {
+    selection: {
+      export: "PopoverSelectionList",
+      props: `(function () {
+        var h = React.createElement;
+        return {
+          mode: "checkbox",
+          "aria-label": "Filters",
+          children: ["Design", "Engineering", "Operations"].map(function (t, i) {
+            return h(__mod.PopoverSelectionItem, { key: t, selected: i === 0 }, t);
+          }),
+        };
+      })()`
+    }
+  },
+  tabs: {
+    line: {
+      export: "Tabs",
+      props: `(function () {
+        var h = React.createElement;
+        return {
+          defaultValue: "one",
+          children: [
+            h(__mod.TabsList, { key: "l", variant: "line" }, [
+              h(__mod.TabsTrigger, { key: "1", value: "one" }, "Overview"),
+              h(__mod.TabsTrigger, { key: "2", value: "two" }, "Activity"),
+              h(__mod.TabsTrigger, { key: "3", value: "three" }, "Settings"),
+            ]),
+            h(__mod.TabsContent, { key: "c", value: "one" }, "Overview content"),
+          ],
+        };
+      })()`
+    }
+  },
+  // 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",
@@ -8952,6 +9116,14 @@ var FIXTURES = {
     default: { export: "Input", interactiveTarget: "input", props: `{ placeholder: "Email address" }` },
     invalid: { export: "Input", interactiveTarget: "input", props: `{ defaultValue: "not-an-email", "aria-invalid": true }` }
   },
+  // 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" }` },
     invalid: { export: "Textarea", interactiveTarget: "textarea", props: `{ defaultValue: "Too short", "aria-invalid": true }` }
@@ -8978,6 +9150,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 }` },
@@ -9016,13 +9233,37 @@ 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 () {} }` }
   },
@@ -9046,6 +9287,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: {
@@ -9096,7 +9386,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) {
@@ -9112,6 +9403,12 @@ function resolveTokensCssFile(cwd) {
     resolve21(cwd, "node_modules", "@loworbitstudio", "visor-core", "dist", "tokens.css")
   ]);
 }
+function resolveResetCssFile(cwd) {
+  return firstExisting([
+    resolve21(cwd, "packages", "tokens", "dist", "reset.css"),
+    resolve21(cwd, "node_modules", "@loworbitstudio", "visor-core", "dist", "reset.css")
+  ]);
+}
 async function loadOptional(moduleName) {
   try {
     return await import(moduleName);
@@ -9135,6 +9432,9 @@ function buildHtml(opts) {
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
+<style data-visor="reset">
+${opts.resetCss}
+</style>
 <style data-visor="tokens">
 ${opts.tokensCss}
 </style>
@@ -9155,7 +9455,8 @@ html, body { margin: 0; padding: 0; }
   justify-content: center;
   background: var(--surface-page, #ffffff);
   color: var(--text-primary, #111827);
-  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+  /* Same token the nextjs adapter's origination binds to body (VI-616). */
+  font-family: var(--font-body, var(--font-sans, system-ui, -apple-system, sans-serif));
 }
 #root { width: 100%; max-width: 420px; }
 </style>
@@ -9214,7 +9515,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);
@@ -9233,6 +9534,14 @@ async function renderCommand(component, cwd, options) {
       { hint: "Run `npm run build -w packages/tokens` first." }
     );
   }
+  const resetCssFile = resolveResetCssFile(cwd);
+  if (!resetCssFile) {
+    fail3(
+      "RESET_NOT_FOUND",
+      "visor-core reset.css not found. Expected packages/tokens/dist/reset.css.",
+      { hint: "Run `npm run build -w packages/tokens` first." }
+    );
+  }
   const fixtureName = options.fixture ?? "default";
   const componentFixtures = FIXTURES[component];
   const fixture = componentFixtures?.[fixtureName] ?? { props: "{}" };
@@ -9288,6 +9597,7 @@ async function renderCommand(component, cwd, options) {
   }
   const themeClass = `${options.theme}-theme`;
   const html = buildHtml({
+    resetCss: readFileSync33(resetCssFile, "utf-8"),
     tokensCss: readFileSync33(tokensCssFile, "utf-8"),
     themeCss: readFileSync33(themeCssFile, "utf-8"),
     componentCss,