@loworbitstudio/visor 1.31.0 → 1.35.0

package/dist/CHANGELOG.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-10-03T23:23:41.697Z",
+  "generated_at": "2026-10-04T07:08:34.776Z",
   "components": {
     "accessibility-specimen": {
       "changeType": "current",
@@ -56,6 +56,12 @@
       "breakingChange": false,
       "migrationNote": null
     },
+    "bottom-nav": {
+      "changeType": "current",
+      "files": [],
+      "breakingChange": false,
+      "migrationNote": null
+    },
     "box": {
       "changeType": "current",
       "files": [],
@@ -494,6 +500,12 @@
       "breakingChange": false,
       "migrationNote": null
     },
+    "position-picker": {
+      "changeType": "current",
+      "files": [],
+      "breakingChange": false,
+      "migrationNote": null
+    },
     "progress": {
       "changeType": "current",
       "files": [],
@@ -560,6 +572,12 @@
       "breakingChange": false,
       "migrationNote": null
     },
+    "segmented-control": {
+      "changeType": "current",
+      "files": [],
+      "breakingChange": false,
+      "migrationNote": null
+    },
     "segmented-progress": {
       "changeType": "current",
       "files": [],

package/dist/index.js

@@ -8760,6 +8760,9 @@ function spawnCommand(cwd, options) {
 import { existsSync as existsSync31, mkdirSync as mkdirSync14, readFileSync as readFileSync33 } from "fs";
 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 navIcon = (shape) => `function (p) { return React.createElement("svg", { viewBox: "0 0 256 256", width: p.size || 24, height: p.size || 24, className: p.className, fill: p.weight === "fill" ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 16, strokeLinejoin: "round", "aria-hidden": true }, React.createElement("path", { d: ${JSON.stringify(shape)} })); }`;
+var NAV_SHAPES = ["M40 56h176v144H40z", "M128 32l96 176H32z", "M128 32a96 96 0 1 0 0 192a96 96 0 0 0 0-192z", "M48 64h160v128H48zM48 112h160", "M40 200V120M104 200V64M168 200V96M216 200V152", "M64 216V96l64-64l64 64v120z", "M128 40a40 40 0 1 0 0 80a40 40 0 0 0 0-80zM48 216c0-44 36-72 80-72s80 28 80 72z"];
+var NAV_ICONS = NAV_SHAPES.map(navIcon);
 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.
@@ -9114,7 +9117,57 @@ 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-672: `default` is the grid on its own ground; `on-image` draws it over a busy
+  // synthetic photograph (turbulence, one light half and one dark half) so each
+  // target's scrim ring is checked against both. The picker is its own frame here:
+  // `position: relative` and a size stand in for the positioned photo frame.
+  "position-picker": {
+    default: { export: "PositionPicker", interactiveTarget: '[role="radio"]', props: `{ "aria-label": "Focal point", defaultValue: { y: "center", x: "center" } }` },
+    "on-image": {
+      export: "PositionPicker",
+      interactiveTarget: '[role="radio"]',
+      props: `(function () {
+        var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='480' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='4' seed='7'/><feColorMatrix values='1.4 0 0 0 0.05 0 1.2 0 0 0.05 0 0 1.1 0 0.05 0 0 0 1 0'/></filter><rect width='480' height='300' fill='#d9c8a6'/><rect width='480' height='300' filter='url(#n)'/><rect x='0' y='0' width='240' height='300' fill='#f4efe4' opacity='0.55'/><rect x='240' y='0' width='240' height='300' fill='#0b0b14' opacity='0.6'/></svg>";
+        return {
+          variant: "on-image",
+          "aria-label": "Focal point",
+          defaultValue: { y: "top", x: "right" },
+          style: { position: "relative", inset: "auto", width: 480, height: 300, backgroundImage: "url('data:image/svg+xml;utf8," + encodeURIComponent(svg).replace(/'/g, "%27") + "')", backgroundSize: "cover" },
+        };
+      })()`
+    },
+    thumbnail: { export: "PositionPicker", interactiveTarget: '[role="radio"]', props: `{ variant: "on-image", "aria-label": "Focal point", defaultValue: { y: "bottom", x: "left" }, style: { position: "relative", inset: "auto", width: 40, height: 28, background: "#667" } }` }
   },
   // 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.
@@ -9143,6 +9196,54 @@ var FIXTURES = {
       export: "Select",
       interactiveTarget: "button",
       props: `{ children: React.createElement(__mod.SelectTrigger, { variant: "borderless" }, React.createElement(__mod.SelectValue, { placeholder: "Pick a plan" })) }`
+    },
+    // VI-692: forced open so the portaled listbox is in the shot.
+    open: {
+      export: "Select",
+      props: `{ open: true, defaultValue: "pro", children: [React.createElement(__mod.SelectTrigger, { key: "t" }, React.createElement(__mod.SelectValue, { placeholder: "Pick a plan" })), React.createElement(__mod.SelectContent, { key: "c" }, [React.createElement(__mod.SelectItem, { key: "a", value: "free" }, "Free"), React.createElement(__mod.SelectItem, { key: "b", value: "pro" }, "Pro"), React.createElement(__mod.SelectItem, { key: "d", value: "team" }, "Team")])] }`
+    }
+  },
+  // VI-692: forced open so the portaled tip is in the shot.
+  tooltip: {
+    default: { export: "TooltipProvider", props: `{ children: React.createElement(__mod.Tooltip, { open: true }, [React.createElement(__mod.TooltipTrigger, { key: "t", asChild: true }, React.createElement("button", { type: "button" }, "Hover me")), React.createElement(__mod.TooltipContent, { key: "c" }, "Tooltip on the theme")]) }` }
+  },
+  // VI-683: an icon rail under an app bar (position="contained"), collapsed to
+  // icons. Render with `--width 1024 --state focus` to open the first item's
+  // tooltip (the sidebar is mobile at or below 768px, and mobile never shows
+  // it); the second item wears the unread dot.
+  sidebar: {
+    default: {
+      export: "SidebarProvider",
+      interactiveTarget: '[data-sidebar="menu-button"]',
+      props: `(function () {
+        var h = React.createElement;
+        var glyph = function (d) {
+          return h("svg", { viewBox: "0 0 256 256", width: 20, height: 20, fill: "currentColor", "aria-hidden": true }, h("path", { d: d }));
+        };
+        var items = [
+          ["Edit EPK", "M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63Z"],
+          ["Inbox, 3 unread", "M32,136v56a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V136l-32-72a16,16,0,0,0-14.6-9.5H78.6A16,16,0,0,0,64,64Z", true],
+          ["Calendar", "M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Z"],
+        ];
+        return {
+          defaultOpen: false,
+          style: { flexDirection: "column", minHeight: 360, width: 420 },
+          children: [
+            h("div", { key: "bar", style: { height: 48, display: "flex", alignItems: "center", padding: "0 16px", background: "var(--surface-card)", color: "var(--text-primary)", fontSize: 14 } }, "App bar"),
+            h("div", { key: "body", style: { display: "flex", flex: 1 } }, [
+              h(__mod.Sidebar, { key: "rail", collapsible: "icon", position: "contained" },
+                h(__mod.SidebarMenu, null, items.map(function (it) {
+                  return h(__mod.SidebarMenuItem, { key: it[0] }, [
+                    h(__mod.SidebarMenuButton, { key: "b", asChild: true, tooltip: it[0] }, h("a", { href: "#" }, glyph(it[1]))),
+                    it[2] ? h(__mod.SidebarMenuBadge, { key: "d", "aria-hidden": true, style: { top: 4, right: 4, minWidth: 8, height: 8, padding: 0, borderRadius: "50%", background: "var(--text-primary)" } }) : null,
+                  ]);
+                }))
+              ),
+              h(__mod.SidebarInset, { key: "main" }, h("div", { style: { padding: 16, fontSize: 14 } }, "Page content")),
+            ]),
+          ],
+        };
+      })()`
     }
   },
   checkbox: {
@@ -9265,13 +9366,75 @@ var FIXTURES = {
     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-673: the phone foot bar. `fixed: false` lays it in the render frame instead of pinning it.
+  "bottom-nav": {
+    default: {
+      export: "BottomNav",
+      interactiveTarget: "a",
+      props: `{ "aria-label": "Workspace", fixed: false, items: [{ label: "Edit", icon: ${NAV_ICONS[0]}, href: "#edit", active: true }, { label: "Inbox", icon: ${NAV_ICONS[1]}, href: "#inbox", mark: 3 }, { label: "Calendar", icon: ${NAV_ICONS[2]}, href: "#calendar" }, { label: "Invoices", icon: ${NAV_ICONS[3]}, href: "#invoices" }, { label: "Analytics", icon: ${NAV_ICONS[4]}, href: "#analytics" }, { label: "Team", icon: ${NAV_ICONS[6]}, href: "#team", group: "admin" }, { label: "Settings", icon: ${NAV_ICONS[5]}, href: "#settings", group: "admin" }] }`
+    },
+    labelled: {
+      export: "BottomNav",
+      props: `{ "aria-label": "Workspace", fixed: false, showLabels: true, items: [{ label: "Home", icon: ${NAV_ICONS[5]}, href: "#home", active: true }, { label: "Inbox", icon: ${NAV_ICONS[1]}, href: "#inbox", mark: true }, { label: "Settings", icon: ${NAV_ICONS[5]}, href: "#settings" }] }`
+    }
+  },
+  // 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: {
@@ -9446,6 +9609,11 @@ ${opts.componentCss}
 </style>
 <style data-visor="harness">
 html, body { margin: 0; padding: 0; }
+body {
+  color: var(--text-primary, #111827);
+  /* 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));
+}
 #theme-scope {
   box-sizing: border-box;
   min-height: 100vh;
@@ -9454,15 +9622,12 @@ html, body { margin: 0; padding: 0; }
   align-items: center;
   justify-content: center;
   background: var(--surface-page, #ffffff);
-  color: var(--text-primary, #111827);
-  /* 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>
 </head>
-<body>
-<div id="theme-scope" class="${opts.themeClass}">
+<body class="${opts.themeClass}">
+<div id="theme-scope">
 <div id="root"></div>
 </div>
 <script>
@@ -9629,11 +9794,12 @@ async function renderCommand(component, cwd, options) {
     probe = await page.evaluate(
       `(function () {
         var scope = document.getElementById("theme-scope");
+        var body = document.body;
         var html = document.documentElement;
         var read = function (el, prop) {
           return getComputedStyle(el).getPropertyValue(prop).trim();
         };
-        var themed = read(scope, "--surface-card");
+        var themed = read(body, "--surface-card");
         var base = read(html, "--surface-card");
         return {
           themedSurfaceCard: themed,