@godxjp/ui 33.12.8 → 33.13.0

package/dist/tokens/components/table.css

@@ -84,7 +84,7 @@
 
 :root {
   --table-stacked-collection-card-padding-y: var(--space-stack-sm);
-  --table-stacked-collection-card-padding-x: var(--space-inline-md);
+  --table-stacked-collection-card-padding-x: initial;
   --table-stacked-collection-card-gap: var(--space-stack-sm);
   --table-stacked-collection-cell-padding-y: var(--space-stack-xs);
 

package/docs/TOKENS.md

@@ -2,6 +2,17 @@
 
 Every visual dimension has **one canonical owner**. Apps never patch spacing, density, typography, or color ad hoc.
 
+## Stacked records and calendar sizing
+
+`--table-stacked-collection-card-padding-x` defaults to `initial`. At each stacked row it
+resolves to `calc(var(--card-space-inset) - var(--stroke-hairline))`: the row border plus
+padding lands on the CardTitle keyline. Scoped Card density and theme overrides therefore
+remain live. Set the stacked token explicitly to choose an independent row padding.
+
+Calendar columns retain the control-height tier at their natural width. In a narrow container,
+the grid shares the available width between seven dates (the optional week-number label keeps its intrinsic measure),
+keeping each date target at least `--touch-target-min`. `width="full"` retains its embedded sizing.
+
 ## Architecture
 
 ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "33.12.8",
-  "godxUiMcp": "33.12.8",
+  "version": "33.13.0",
+  "godxUiMcp": "33.13.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/scripts/cli.mjs

@@ -106,7 +106,7 @@ const HELP = {
     --dry-run   list every change without writing
   What it cannot decide (a component move that changes props, an AppProvider that relied on the
   old vi default) is printed as a "note" for you to finish.`,
-  "visual-audit": `godxjp-ui visual-audit [--format json] [--strict] [--widths WxH,…] [--storage-state FILE] [--text-spacing] [--text-zoom 200] [--screenshots DIR] <baseUrl> [route …]
+  "visual-audit": `godxjp-ui visual-audit [--format json] [--strict] [--widths WxH,…] [--storage-state FILE] [--text-spacing] [--text-zoom 200] [--screenshots DIR] [--playwright-module PATH] [--executable-path CHROME] <baseUrl> [route …]
 
   Runtime audit (Playwright) against an app you are ALREADY running locally, at six widths.
     baseUrl         the running app, e.g. http://localhost:5173
@@ -121,6 +121,11 @@ const HELP = {
                     Each reports the geometry delta against the unmodified render; a delta of
                     zero is an error ("override not applied"), never a pass
     --screenshots   a directory for the base + override render of each evidence mode
+    --playwright-module PATH
+                    a playwright or playwright-core package dir (or its entry file) to use, e.g.
+                    one in the npx cache. Without it: the playwright peer, then playwright-core
+    --executable-path CHROME
+                    the Chromium/Chrome binary to launch (else PLAYWRIGHT_CHROMIUM_EXECUTABLE)
     --strict       exit non-zero on any finding, not only errors
     --format json   machine-readable: findings (viewport, element, threshold + origin), unmapped
                     items (reviewer required), per-width rule status + reviewer checklist
@@ -128,7 +133,8 @@ const HELP = {
   Responsive probes C01–C12 are advisory; thresholds are repo-chosen unless marked WCAG. A clean
   run ends "probes passed; independent acceptance pending" — the checklist still needs a reviewer.
   Map your own components with data-audit-role (search, search-trigger, account-name, editor,
-  task-actions, rail-toggle, content-column, section-label, metadata). Needs the playwright peer.`,
+  task-actions, rail-toggle, content-column, section-label, metadata). Needs the playwright peer
+  or playwright-core (--playwright-module).`,
 };
 
 const USAGE = `usage: godxjp-ui <command> [args]

package/scripts/visual-audit.mjs

@@ -5,6 +5,7 @@
  */
 import { existsSync, mkdirSync, realpathSync } from "node:fs";
 import path from "node:path";
+import { createRequire } from "node:module";
 import { fileURLToPath } from "node:url";
 import {
   VISUAL_RULES,
@@ -431,7 +432,7 @@ export const PROBE_RULES = [
     category: "layout",
     standard: `WCAG 2.2 SC 1.4.10 / 1.4.4 / 1.4.12; 1.5px tolerance ${RC}`,
     kind: "probe",
-    fix: "Nothing may be cut off: no horizontal scroll on the document or the app's main region, and no text/icon partly hidden by an overflow:hidden/clip ancestor. Let the container shrink its content (min-width:0 + wrap), or truncate with a recoverable full value (title / aria-label).",
+    fix: "Nothing may be cut off: no horizontal scroll on the document or the app's main region, and no text/icon partly hidden by an overflow:hidden/clip ancestor. Let the container shrink its content (min-width:0 + wrap), or truncate with a recoverable full value (title / aria-label). Kit Breadcrumb ellipsis requires the complete label in both title and aria-label on its clipping element; a tooltip alone or a partial label is insufficient.",
   },
   {
     id: "c02-search-usable",
@@ -1056,11 +1057,21 @@ export function collectProbes(opts) {
       if (it.kind === "text" && truncating) {
         const full = snippet(it.owner.textContent).slice(0, 20);
         const carrier = it.owner.closest("[title], [aria-label], [data-audit-recoverable]");
-        recoverable =
-          !!carrier &&
-          (carrier.hasAttribute("data-audit-recoverable") ||
-            snippet(carrier.getAttribute("title")).includes(full) ||
-            snippet(carrier.getAttribute("aria-label")).includes(full));
+        const crumb = it.owner.closest(".ui-breadcrumb-ellipsis");
+        const crumbText = crumb?.cloneNode(true);
+        crumbText
+          ?.querySelectorAll('[aria-hidden="true"], [hidden]')
+          .forEach((child) => child.remove());
+        const crumbLabel = crumbText?.textContent?.replace(/\s+/g, " ").trim();
+        const kitCrumb = crumb?.closest(".ui-breadcrumb-list > .ui-breadcrumb-item");
+        recoverable = kitCrumb
+          ? !!crumbLabel &&
+            crumb.getAttribute("title")?.replace(/\s+/g, " ").trim() === crumbLabel &&
+            crumb.getAttribute("aria-label")?.replace(/\s+/g, " ").trim() === crumbLabel
+          : !!carrier &&
+            (carrier.hasAttribute("data-audit-recoverable") ||
+              snippet(carrier.getAttribute("title")).includes(full) ||
+              snippet(carrier.getAttribute("aria-label")).includes(full));
       }
       worst = { px, axis: dx >= dy ? "x" : "y", clipper: desc(a), recoverable };
     }
@@ -1838,20 +1849,74 @@ async function runProbes(page, url, viewport) {
 }
 /* c8 ignore stop */
 
-/** Optional-peer loader — throws a tagged bootstrap error instead of a raw stack. */
-async function loadDeps() {
-  try {
-    const { chromium } = await import("playwright");
-    return { chromium };
-  } catch (cause) {
-    const err = new Error("visual-audit needs the optional peer `playwright`");
-    err.bootstrap = true;
-    err.hint =
-      "pnpm add -D playwright && pnpm exec playwright install chromium " +
-      "(or set PLAYWRIGHT_CHROMIUM_EXECUTABLE to a system Chromium).";
-    err.cause = cause;
-    throw err;
+/**
+ * Optional-peer loader — throws a tagged bootstrap error instead of a raw stack (gh#1390).
+ *
+ * Resolution order: an explicit `--playwright-module` path (a directory or an entry file that
+ * exports `chromium`) → the `playwright` peer → `playwright-core`. The two package names are
+ * looked up from this script AND from the consumer's cwd: under pnpm's strict layout a
+ * consumer-root `playwright-core` is not reachable from the installed script. An explicit path that
+ * fails is an error, never a silent fall-through to another engine.
+ */
+export async function loadDeps({ playwrightModule, bases } = {}) {
+  const tried = [];
+  // `require`, not `import()`: the path comes from require.resolve (playwright and playwright-core
+  // are CJS), and a computed import() makes vite's test transform prepend a helper above the shebang.
+  const load = (resolved, label) => {
+    const mod = createRequire(import.meta.url)(resolved);
+    const chromium = mod.chromium ?? mod.default?.chromium;
+    if (!chromium?.launch) throw new Error(`${label} does not export chromium`);
+    return chromium;
+  };
+  if (playwrightModule) {
+    const abs = path.resolve(playwrightModule);
+    const label = `${abs} (--playwright-module)`;
+    try {
+      const resolved = createRequire(path.join(process.cwd(), "noop.js")).resolve(abs);
+      return { chromium: load(resolved, label), source: abs };
+    } catch (cause) {
+      const err = new Error(
+        `visual-audit could not load --playwright-module: tried ${label}: ${cause.message}`,
+      );
+      err.bootstrap = true;
+      err.hint = "pass the playwright or playwright-core package directory (or its index.js).";
+      err.cause = cause;
+      throw err;
+    }
   }
+  const from = bases ?? [import.meta.url, path.join(process.cwd(), "package.json")];
+  for (const name of ["playwright", "playwright-core"]) {
+    for (const base of from) {
+      const where = base.startsWith("file:") ? fileURLToPath(base) : base;
+      const label = `${name} (from ${path.dirname(where)})`;
+      let resolved;
+      try {
+        resolved = createRequire(base).resolve(name);
+      } catch {
+        tried.push(label);
+        continue;
+      }
+      try {
+        return { chromium: load(resolved, label), source: resolved };
+      } catch (cause) {
+        tried.push(`${label}: ${cause.message}`);
+      }
+    }
+  }
+  const err = new Error(
+    `visual-audit needs the optional peer \`playwright\` (or \`playwright-core\`); tried: ${tried.join("; ")}`,
+  );
+  err.bootstrap = true;
+  err.hint =
+    "pnpm add -D playwright && pnpm exec playwright install chromium, or point at an existing " +
+    "install: --playwright-module /abs/path/playwright-core --executable-path /path/to/chrome " +
+    "(or set PLAYWRIGHT_CHROMIUM_EXECUTABLE).";
+  throw err;
+}
+
+/** Options for `chromium.launch` — `--executable-path` wins over PLAYWRIGHT_CHROMIUM_EXECUTABLE. */
+export function launchOptions({ executablePath, env = process.env } = {}) {
+  return { executablePath: executablePath || env.PLAYWRIGHT_CHROMIUM_EXECUTABLE || undefined };
 }
 
 /**
@@ -1863,7 +1928,7 @@ async function audit(
   targets,
   { chromium },
   viewports = DEFAULT_VIEWPORTS,
-  { storageState, modes = [], zoom = 200, screenshots } = {},
+  { storageState, modes = [], zoom = 200, screenshots, executablePath } = {},
 ) {
   const findings = [];
   const errors = [];
@@ -1875,15 +1940,13 @@ async function audit(
   let context;
   try {
     try {
-      browser = await chromium.launch({
-        executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE || undefined,
-      });
+      browser = await chromium.launch(launchOptions({ executablePath }));
     } catch (cause) {
       const err = new Error(`could not launch Chromium: ${cause.message}`);
       err.bootstrap = true;
       err.hint =
         "install a browser: pnpm exec playwright install chromium " +
-        "(or set PLAYWRIGHT_CHROMIUM_EXECUTABLE to a system Chromium).";
+        "(or pass --executable-path / set PLAYWRIGHT_CHROMIUM_EXECUTABLE to a system Chromium).";
       throw err;
     }
     context = await browser.newContext({ viewport: viewports[0], storageState });
@@ -2197,11 +2260,39 @@ async function main() {
     }
   }
 
-  const VALUED = ["--format", "--widths", "--storage-state", "--text-zoom", "--screenshots"];
+  // `--playwright-module <path>` / `--executable-path <chrome>` (gh#1390): reuse a playwright-core +
+  // Chrome the app already has instead of installing the `playwright` peer.
+  const pmIdx = args.indexOf("--playwright-module");
+  const playwrightModule = pmIdx === -1 ? undefined : args[pmIdx + 1];
+  const epIdx = args.indexOf("--executable-path");
+  const executablePath = epIdx === -1 ? undefined : args[epIdx + 1];
+  for (const [flag, idx, value] of [
+    ["--playwright-module", pmIdx, playwrightModule],
+    ["--executable-path", epIdx, executablePath],
+  ]) {
+    if (idx !== -1 && (!value || value.startsWith("--") || !existsSync(value))) {
+      finish(buildBootstrapError(`${flag}: "${value ?? ""}" does not exist`), {
+        asJson,
+        strict,
+        pages: 0,
+      });
+      return;
+    }
+  }
+
+  const VALUED = [
+    "--format",
+    "--widths",
+    "--storage-state",
+    "--text-zoom",
+    "--screenshots",
+    "--playwright-module",
+    "--executable-path",
+  ];
   const urls = args.filter((a, i) => !a.startsWith("--") && !VALUED.includes(args[i - 1]));
   if (urls.length === 0) {
     const msg =
-      "no baseUrl given — usage: visual-audit.mjs [--format json] [--strict] [--widths 390x844,1280x900] [--storage-state state.json] [--text-spacing] [--text-zoom 200] [--screenshots DIR] <baseUrl> [route …] " +
+      "no baseUrl given — usage: visual-audit.mjs [--format json] [--strict] [--widths 390x844,1280x900] [--storage-state state.json] [--text-spacing] [--text-zoom 200] [--screenshots DIR] [--playwright-module PATH] [--executable-path CHROME] <baseUrl> [route …] " +
       "(baseUrl is the running app; extra args are routes appended to it)";
     finish(buildBootstrapError(msg), { asJson, strict, pages: 0 });
     return;
@@ -2215,7 +2306,7 @@ async function main() {
 
   let deps;
   try {
-    deps = await loadDeps();
+    deps = await loadDeps({ playwrightModule });
   } catch (e) {
     finish(buildBootstrapError(e.message, e.hint), { asJson, strict, pages: targets.length });
     return;
@@ -2227,6 +2318,7 @@ async function main() {
       modes,
       zoom,
       screenshots: screenshots && path.resolve(screenshots),
+      executablePath,
     });
     finish(result, { asJson, strict, pages: targets.length });
   } catch (e) {