@synopackageland/ui 0.6.0 → 0.6.1

package/dist/cli.js

@@ -12,34 +12,41 @@ const K = [
   "/Applications/Chromium.app/Contents/MacOS/Chromium"
 ], X = ["google-chrome", "google-chrome-stable", "chromium", "chromium-browser"], z = ["ProgramFiles", "ProgramFiles(x86)", "LOCALAPPDATA"];
 function Q(e = process.env, t = process.platform, n = g) {
-  return e.CHROME ? e.CHROME : (t === "darwin" ? K : t === "win32" ? z.flatMap((o) => e[o] ? [U.join(e[o], "Google", "Chrome", "Application", "chrome.exe")] : []) : (e.PATH ?? "").split(j.delimiter).filter(Boolean).flatMap((o) => X.map((r) => j.join(o, r)))).find(n);
+  return e.CHROME ? e.CHROME : (t === "darwin" ? K : t === "win32" ? z.flatMap((r) => e[r] ? [U.join(e[r], "Google", "Chrome", "Application", "chrome.exe")] : []) : (e.PATH ?? "").split(j.delimiter).filter(Boolean).flatMap((r) => X.map((o) => j.join(r, o)))).find(n);
 }
-async function Y(e) {
-  const t = Q();
-  if (!t) throw new Error("Chrome or Chromium was not found; set CHROME to its executable path.");
-  const n = I(t, [
+function Y(e, t = process.env) {
+  return [
     "--headless=new",
     "--disable-gpu",
     "--hide-scrollbars",
     "--no-first-run",
+    // Repaint whole tiles: partial raster redraws only the invalidated rect, and
+    // the anti-aliased edges it touches can come out one colour level apart, so
+    // the same page could otherwise screenshot differently from run to run.
+    "--disable-partial-raster",
     // GitHub's Ubuntu AppArmor policy blocks the unprivileged Chromium sandbox.
     // Match Playwright's CI launch defaults for these repository-only fixtures.
-    ...process.env.CI ? ["--no-sandbox", "--disable-dev-shm-usage"] : [],
+    ...t.CI ? ["--no-sandbox", "--disable-dev-shm-usage"] : [],
     "--remote-debugging-port=0",
     `--user-data-dir=${e}`,
     "about:blank"
-  ], { stdio: ["ignore", "ignore", "pipe"] });
-  let s, o = "";
+  ];
+}
+async function Z(e) {
+  const t = Q();
+  if (!t) throw new Error("Chrome or Chromium was not found; set CHROME to its executable path.");
+  const n = I(t, Y(e), { stdio: ["ignore", "ignore", "pipe"] });
+  let s, r = "";
   n.once("error", (a) => {
     s = a;
   }), n.stderr.on("data", (a) => {
-    o = (o + a).slice(-4e3);
+    r = (r + a).slice(-4e3);
   });
-  const r = w(e, "DevToolsActivePort");
-  for (let a = 0; a < 100 && !g(r) && !s && n.exitCode === null; a++) await L(100);
-  if (!g(r))
-    throw n.kill(), new Error(`Chrome failed to start: ${s?.message ?? (o || "no debugging port within 10 seconds")}`);
-  const [i] = (await v(r, "utf8")).split(`
+  const o = w(e, "DevToolsActivePort");
+  for (let a = 0; a < 100 && !g(o) && !s && n.exitCode === null; a++) await L(100);
+  if (!g(o))
+    throw n.kill(), new Error(`Chrome failed to start: ${s?.message ?? (r || "no debugging port within 10 seconds")}`);
+  const [i] = (await v(o, "utf8")).split(`
 `), c = await (await fetch(`http://127.0.0.1:${i}/json/new?about:blank`, { method: "PUT" })).json(), d = new WebSocket(c.webSocketDebuggerUrl);
   await new Promise((a, m) => {
     d.onopen = a, d.onerror = m;
@@ -50,34 +57,34 @@ async function Y(e) {
     const m = JSON.parse(String(a.data));
     u.get(m.id)?.(m), u.delete(m.id);
   };
-  const b = (a, m = {}) => new Promise((P, A) => {
+  const b = (a, m = {}) => new Promise((A, P) => {
     const O = l++;
-    u.set(O, (h) => h.error ? A(new Error(h.error.message)) : P(h.result)), d.send(JSON.stringify({ id: O, method: a, params: m }));
+    u.set(O, (h) => h.error ? P(new Error(h.error.message)) : A(h.result)), d.send(JSON.stringify({ id: O, method: a, params: m }));
   });
   await b("Emulation.setDeviceMetricsOverride", { width: 1100, height: 720, deviceScaleFactor: 1, mobile: !1 });
   const k = new Promise((a) => n.once("exit", a));
   return { send: b, close: () => (d.close(), n.kill(), k) };
 }
-const Z = `<!doctype html>
+const q = `<!doctype html>
 <html><head><meta charset="utf-8"><link rel="stylesheet" href="/theme.css">
 <style>html, body, #app { margin: 0; height: 100%; }</style></head>
 <body><div id="app"></div><script type="module" src="/preview.js"><\/script></body></html>`;
-function q(e, t) {
+function ee(e, t) {
   const n = {
     "/theme.css": [new URL("theme.css", e), "text/css"],
     "/preview.js": [new URL("json-preview/preview.js", e), "text/javascript"]
-  }, s = F(async (o, r) => {
-    const i = new URL(o.url ?? "/", "http://localhost").pathname;
+  }, s = F(async (r, o) => {
+    const i = new URL(r.url ?? "/", "http://localhost").pathname;
     try {
-      const [c, d] = i === "/" ? [Z, "text/html"] : i === "/config.json" ? [t, "application/json"] : [await v(n[i][0]), n[i][1]];
-      r.writeHead(200, { "content-type": d }).end(c);
+      const [c, d] = i === "/" ? [q, "text/html"] : i === "/config.json" ? [t, "application/json"] : [await v(n[i][0]), n[i][1]];
+      o.writeHead(200, { "content-type": d }).end(c);
     } catch {
-      r.writeHead(404).end();
+      o.writeHead(404).end();
     }
   });
-  return new Promise((o) => s.listen(0, "127.0.0.1", () => o(s)));
+  return new Promise((r) => s.listen(0, "127.0.0.1", () => r(s)));
 }
-async function ee(e, t) {
+async function te(e, t) {
   await e.send("Page.navigate", { url: t });
   const { result: n, exceptionDetails: s } = await e.send(
     "Runtime.evaluate",
@@ -96,21 +103,21 @@ async function ee(e, t) {
   if (s) throw new Error(`Rendering failed: ${s.exception?.description ?? "unknown error"}`);
   return n.value;
 }
-function te(e) {
+function ne(e) {
   return async (t) => {
-    const n = await q(e, JSON.stringify({ spec: t.spec, state: t.state, messages: t.messages })), s = `http://127.0.0.1:${n.address().port}/`, o = await E(w(H(), "syno-ui-render-"));
-    let r;
+    const n = await ee(e, JSON.stringify({ spec: t.spec, state: t.state, messages: t.messages })), s = `http://127.0.0.1:${n.address().port}/`, r = await E(w(H(), "syno-ui-render-"));
+    let o;
     try {
-      r = await Y(o), await M(t.out, { recursive: !0 });
+      o = await Z(r), await M(t.out, { recursive: !0 });
       const i = [];
       for (const c of t.widths) {
-        await r.send("Emulation.setDeviceMetricsOverride", { width: c, height: t.height, deviceScaleFactor: 1, mobile: !1 });
-        const d = await ee(r, `${s}?width=${c}`), { data: l } = await r.send("Page.captureScreenshot", { format: "png" }), u = w(t.out, `${t.name}-${c}.png`);
+        await o.send("Emulation.setDeviceMetricsOverride", { width: c, height: t.height, deviceScaleFactor: 1, mobile: !1 });
+        const d = await te(o, `${s}?width=${c}`), { data: l } = await o.send("Page.captureScreenshot", { format: "png" }), u = w(t.out, `${t.name}-${c}.png`);
         await D(u, Buffer.from(l, "base64")), i.push({ width: c, screenshot: u, issues: d });
       }
       return i;
     } finally {
-      await r?.close(), n.close(), await R(o, { recursive: !0, force: !0, maxRetries: 12, retryDelay: 250 });
+      await o?.close(), n.close(), await R(r, { recursive: !0, force: !0, maxRetries: 12, retryDelay: 250 });
     }
   };
 }
@@ -133,17 +140,17 @@ Commands:
     --widths 390,640,960,1350      Viewport widths: phone, narrow window, DSM window, wide
     --height <px>                  Viewport height (default 800)
     --state, --messages            As for validate; messages also back $computed t()
-`, ne = /* @__PURE__ */ new Set(["actions", "functions", "state", "messages", "out", "widths", "height", "wide"]);
-function se(e) {
+`, se = /* @__PURE__ */ new Set(["actions", "functions", "state", "messages", "out", "widths", "height", "wide"]);
+function re(e) {
   const t = [], n = {};
   for (let s = 0; s < e.length; s++) {
-    const o = e[s];
-    if (!o.startsWith("--")) {
-      t.push(o);
+    const r = e[s];
+    if (!r.startsWith("--")) {
+      t.push(r);
       continue;
     }
-    const [r, i] = o.slice(2).split("=", 2);
-    n[r] = i ?? (ne.has(r) && e[s + 1] !== void 0 ? e[++s] : !0);
+    const [o, i] = r.slice(2).split("=", 2);
+    n[o] = i ?? (se.has(o) && e[s + 1] !== void 0 ? e[++s] : !0);
   }
   return { positional: t, flags: n };
 }
@@ -172,13 +179,13 @@ async function y(e, t) {
 }
 async function x(e, t, n) {
   const s = await C(e, t);
-  let o;
+  let r;
   try {
-    o = JSON.parse(s);
-  } catch (r) {
-    return { valid: !1, errors: [{ severity: "error", code: "invalid_json", path: "", message: r instanceof Error ? r.message : String(r), hint: "Return a single JSON object without comments or trailing commas." }], warnings: [] };
+    r = JSON.parse(s);
+  } catch (o) {
+    return { valid: !1, errors: [{ severity: "error", code: "invalid_json", path: "", message: o instanceof Error ? o.message : String(o), hint: "Return a single JSON object without comments or trailing commas." }], warnings: [] };
   }
-  return G(o, n);
+  return G(r, n);
 }
 async function J(e, t) {
   return {
@@ -194,74 +201,74 @@ function $(e) {
 ${[...e.errors, ...e.warnings].map(oe).join("")}` : `${e.file}: OK
 `;
 }
-async function re(e, { positional: t, flags: n }) {
+async function ie(e, { positional: t, flags: n }) {
   if (!t.length)
     return e.stderr(S), 2;
-  const s = await J(e, n), o = [];
-  for (const r of t) o.push({ file: r, ...await x(e, r, s) });
-  return e.stdout(n.json ? JSON.stringify(o, null, 2) + `
-` : o.map($).join("")), o.some((r) => N(r, n)) ? 1 : 0;
+  const s = await J(e, n), r = [];
+  for (const o of t) r.push({ file: o, ...await x(e, o, s) });
+  return e.stdout(n.json ? JSON.stringify(r, null, 2) + `
+` : r.map($).join("")), r.some((o) => N(o, n)) ? 1 : 0;
 }
-const ie = [390, 640, 960, 1350];
-async function ae(e, { positional: [t], flags: n }) {
+const ae = [390, 640, 960, 1350];
+async function ce(e, { positional: [t], flags: n }) {
   if (!t)
     return e.stderr(S), 2;
   if (!e.render)
     return e.stderr(`render needs a local Chrome or Chromium (set CHROME to its path) and Node 22 or newer.
 `), 2;
-  const s = await J(e, n), o = { file: t, ...await x(e, t, s) };
-  if (N(o, n))
-    return e.stdout(n.json ? JSON.stringify({ file: t, validation: o, renders: [] }, null, 2) + `
-` : $(o)), 1;
-  const r = await e.render({
+  const s = await J(e, n), r = { file: t, ...await x(e, t, s) };
+  if (N(r, n))
+    return e.stdout(n.json ? JSON.stringify({ file: t, validation: r, renders: [] }, null, 2) + `
+` : $(r)), 1;
+  const o = await e.render({
     spec: await y(e, t),
     state: s.state,
     messages: s.messages,
-    widths: f(n.widths)?.map(Number) ?? ie,
+    widths: f(n.widths)?.map(Number) ?? ae,
     height: typeof n.height == "string" ? Number(n.height) : 800,
     out: typeof n.out == "string" ? n.out : "syno-ui-render",
     name: t.split(/[\\/]/).pop().replace(/\.json$/i, "")
   }).catch((i) => {
     throw new p(`render failed: ${i instanceof Error ? i.message : String(i)}`);
   });
-  if (n.json) e.stdout(JSON.stringify({ file: t, validation: o, renders: r }, null, 2) + `
+  if (n.json) e.stdout(JSON.stringify({ file: t, validation: r, renders: o }, null, 2) + `
 `);
   else {
-    e.stdout(o.warnings.length ? $(o) : "");
-    for (const { width: i, screenshot: c, issues: d } of r)
+    e.stdout(r.warnings.length ? $(r) : "");
+    for (const { width: i, screenshot: c, issues: d } of o)
       e.stdout(`${t} @${i}px: ${d.length ? `${d.length} layout issue(s)` : "OK"} ${c}
 ` + d.map((l) => `  ${l.kind} ${l.key ?? "(outside the spec)"}: ${l.detail}
 `).join(""));
   }
-  return r.some((i) => i.issues.length) ? 1 : 0;
+  return o.some((i) => i.issues.length) ? 1 : 0;
 }
-async function ce(e, t) {
+async function de(e, t) {
   try {
-    return await de(se(e), t);
+    return await le(re(e), t);
   } catch (n) {
     if (!(n instanceof p)) throw n;
     return t.stderr(`${n.message}
 `), 2;
   }
 }
-async function de(e, t) {
-  const [n, ...s] = e.positional, o = e.flags.json === !0;
+async function le(e, t) {
+  const [n, ...s] = e.positional, r = e.flags.json === !0;
   switch (n) {
     case "catalog": {
-      const r = B();
-      return t.stdout(o ? JSON.stringify({ components: r }, null, 2) + `
-` : r.map((i) => `${i.name}${i.required.length ? ` (${i.required.join(", ")})` : ""}: ${i.description}
+      const o = B();
+      return t.stdout(r ? JSON.stringify({ components: o }, null, 2) + `
+` : o.map((i) => `${i.name}${i.required.length ? ` (${i.required.join(", ")})` : ""}: ${i.description}
 `).join("")), 0;
     }
     case "describe": {
-      const r = s[0] ?? "", i = _(r);
+      const o = s[0] ?? "", i = _(o);
       if (!i) {
-        const c = V(r);
-        return t.stderr(`Unknown component ${JSON.stringify(r)}.${c ? ` Did you mean "${c}"?` : ""} Run "syno-ui catalog".
+        const c = V(o);
+        return t.stderr(`Unknown component ${JSON.stringify(o)}.${c ? ` Did you mean "${c}"?` : ""} Run "syno-ui catalog".
 `), 2;
       }
-      return t.stdout(o ? JSON.stringify(i, null, 2) + `
-` : le(i)), 0;
+      return t.stdout(r ? JSON.stringify(i, null, 2) + `
+` : me(i)), 0;
     }
     case "schema":
       return t.stdout(JSON.stringify(W(), null, 2) + `
@@ -269,14 +276,14 @@ async function de(e, t) {
     case "prompt":
       return t.stdout(T()), 0;
     case "validate":
-      return re(t, { positional: s, flags: e.flags });
+      return ie(t, { positional: s, flags: e.flags });
     case "render":
-      return ae(t, { positional: s, flags: e.flags });
+      return ce(t, { positional: s, flags: e.flags });
     default:
       return t.stderr(S), 2;
   }
 }
-function le(e) {
+function me(e) {
   const t = Object.entries(e.props).map(([n, s]) => `  ${n}${s.required ? "" : "?"}: ${JSON.stringify(s.schema)}
 `).join("");
   return `${e.name}: ${e.description}
@@ -287,10 +294,10 @@ events: ${e.events.join(", ") || "(none)"}
 example: ${JSON.stringify(e.example)}
 `;
 }
-process.exitCode = await ce(process.argv.slice(2), {
+process.exitCode = await de(process.argv.slice(2), {
   stdout: (e) => process.stdout.write(e),
   stderr: (e) => process.stderr.write(e),
   readFile: (e) => v(e, "utf8"),
   // The DevTools connection uses the WebSocket global of Node 22 and newer.
-  render: typeof WebSocket == "function" ? te(import.meta.url) : void 0
+  render: typeof WebSocket == "function" ? ne(import.meta.url) : void 0
 });

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -16,6 +16,9 @@
     "docs/component-defaults-0.5.7.md",
     "docs/json-ui.md"
   ],
+  "bin": {
+    "syno-ui": "./dist/cli.js"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",