@synopackageland/ui 0.6.1 → 0.8.0

package/README.md

@@ -7,7 +7,7 @@ Import the components you need into your Vue application.
 
 For DSM window / full-page Portal / phone layouts, see
 [Responsive DSM application layout](docs/adaptive-layout.md). To generate UI
-as JSON (including with an AI and the `syno-ui` validate/render CLI), see
+as JSON (including with an AI and the `syno-pkg-land-ui` validate/render CLI), see
 [Declarative DSM UI](docs/json-ui.md).
 
 Synology Package Land UI provides Vue components for Synology package applications,
@@ -136,7 +136,7 @@ import { AppRoot, ToastProvider } from '@synopackageland/ui'
 - makes the app root the containing block of fixed overlays, so dialogs,
   sheets and toasts stay inside the window.
 
-`AppRoot` renders `<div data-ui-app data-syno-ui>` and routes every overlay
+`AppRoot` renders `<div data-ui-app data-syno-pkg-land-ui>` and routes every overlay
 portal (Dialog, Sheet, Toast, Popover, Select, DropdownMenu, ContextMenu,
 Tooltip) into itself, not `document.body`, where the scoped tokens
 and reset would not reach them. Each `AppRoot` teleports into its own element;

package/dist/cli.js

@@ -1,17 +1,17 @@
 #!/usr/bin/env node
-import { readFile as v, mkdtemp as E, mkdir as M, writeFile as D, rm as R } from "node:fs/promises";
+import { readFile as S, mkdtemp as E, mkdir as M, writeFile as D, rm as R } from "node:fs/promises";
 import { createServer as F } from "node:http";
 import { tmpdir as H } from "node:os";
-import { join as w, win32 as U, posix as j } from "node:path";
+import { join as g, win32 as U, posix as j } from "node:path";
 import { spawn as I } from "node:child_process";
-import { existsSync as g } from "node:fs";
+import { existsSync as f } from "node:fs";
 import { setTimeout as L } from "node:timers/promises";
 import { synoJsonAiPrompt as T, synoJsonSchema as W, describeSynoJsonComponent as _, closestSynoJsonComponent as V, listSynoJsonComponents as B, validateSynoJsonSpec as G } from "./json.js";
 const K = [
   "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
   "/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) {
+function Q(e = process.env, t = process.platform, n = f) {
   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);
 }
 function Y(e, t = process.env) {
@@ -42,28 +42,28 @@ async function Z(e) {
   }), n.stderr.on("data", (a) => {
     r = (r + a).slice(-4e3);
   });
-  const o = w(e, "DevToolsActivePort");
-  for (let a = 0; a < 100 && !g(o) && !s && n.exitCode === null; a++) await L(100);
-  if (!g(o))
+  const o = g(e, "DevToolsActivePort");
+  for (let a = 0; a < 100 && !f(o) && !s && n.exitCode === null; a++) await L(100);
+  if (!f(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(`
+  const [i] = (await S(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;
+  await new Promise((a, u) => {
+    d.onopen = a, d.onerror = u;
   });
   let l = 1;
-  const u = /* @__PURE__ */ new Map();
+  const m = /* @__PURE__ */ new Map();
   d.onmessage = (a) => {
-    const m = JSON.parse(String(a.data));
-    u.get(m.id)?.(m), u.delete(m.id);
+    const u = JSON.parse(String(a.data));
+    m.get(u.id)?.(u), m.delete(u.id);
   };
-  const b = (a, m = {}) => new Promise((A, P) => {
+  const b = (a, u = {}) => new Promise((A, P) => {
     const O = l++;
-    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 }));
+    m.set(O, (w) => w.error ? P(new Error(w.error.message)) : A(w.result)), d.send(JSON.stringify({ id: O, method: a, params: u }));
   });
   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 N = new Promise((a) => n.once("exit", a));
+  return { send: b, close: () => (d.close(), n.kill(), N) };
 }
 const q = `<!doctype html>
 <html><head><meta charset="utf-8"><link rel="stylesheet" href="/theme.css">
@@ -76,7 +76,7 @@ function ee(e, t) {
   }, s = F(async (r, o) => {
     const i = new URL(r.url ?? "/", "http://localhost").pathname;
     try {
-      const [c, d] = i === "/" ? [q, "text/html"] : i === "/config.json" ? [t, "application/json"] : [await v(n[i][0]), n[i][1]];
+      const [c, d] = i === "/" ? [q, "text/html"] : i === "/config.json" ? [t, "application/json"] : [await S(n[i][0]), n[i][1]];
       o.writeHead(200, { "content-type": d }).end(c);
     } catch {
       o.writeHead(404).end();
@@ -105,15 +105,15 @@ async function te(e, t) {
 }
 function ne(e) {
   return async (t) => {
-    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-"));
+    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(g(H(), "syno-pkg-land-ui-render-"));
     let o;
     try {
       o = await Z(r), await M(t.out, { recursive: !0 });
       const i = [];
       for (const c of t.widths) {
         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 });
+        const d = await te(o, `${s}?width=${c}`), { data: l } = await o.send("Page.captureScreenshot", { format: "png" }), m = g(t.out, `${t.name}-${c}.png`);
+        await D(m, Buffer.from(l, "base64")), i.push({ width: c, screenshot: m, issues: d });
       }
       return i;
     } finally {
@@ -121,7 +121,7 @@ function ne(e) {
     }
   };
 }
-const S = `Usage: syno-ui <command> [options]
+const p = `Usage: syno-pkg-land-ui <command> [options]
 
 Commands:
   catalog [--json]                 List the JSON UI components
@@ -136,7 +136,7 @@ Commands:
     --state <file.json>            Host-provided state
     --messages <file.json>         Message catalog (enables i18n checks)
   render <file> [options]          Validate, screenshot and report layout overflow (needs Chrome, Node 22+)
-    --out <dir>                    Screenshot directory (default syno-ui-render)
+    --out <dir>                    Screenshot directory (default syno-pkg-land-ui-render)
     --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()
@@ -154,30 +154,30 @@ function re(e) {
   }
   return { positional: t, flags: n };
 }
-const f = (e) => typeof e == "string" ? e.split(",").map((t) => t.trim()).filter(Boolean) : void 0;
+const y = (e) => typeof e == "string" ? e.split(",").map((t) => t.trim()).filter(Boolean) : void 0;
 function oe(e) {
   return `  ${e.severity} ${e.code} ${e.path || "/"}: ${e.message}${e.hint ? `
     hint: ${e.hint}` : ""}
 `;
 }
-class p extends Error {
+class h extends Error {
 }
 async function C(e, t) {
   try {
     return await e.readFile(t);
   } catch (n) {
-    throw new p(`Cannot read ${t}: ${n instanceof Error ? n.message : String(n)}`);
+    throw new h(`Cannot read ${t}: ${n instanceof Error ? n.message : String(n)}`);
   }
 }
-async function y(e, t) {
+async function $(e, t) {
   const n = await C(e, t);
   try {
     return JSON.parse(n);
   } catch (s) {
-    throw new p(`${t} is not valid JSON: ${s instanceof Error ? s.message : String(s)}`);
+    throw new h(`${t} is not valid JSON: ${s instanceof Error ? s.message : String(s)}`);
   }
 }
-async function x(e, t, n) {
+async function k(e, t, n) {
   const s = await C(e, t);
   let r;
   try {
@@ -187,54 +187,54 @@ async function x(e, t, n) {
   }
   return G(r, n);
 }
-async function J(e, t) {
+async function x(e, t) {
   return {
-    actions: f(t.actions),
-    functions: f(t.functions),
-    state: typeof t.state == "string" ? await y(e, t.state) : void 0,
-    messages: typeof t.messages == "string" ? await y(e, t.messages) : void 0
+    actions: y(t.actions),
+    functions: y(t.functions),
+    state: typeof t.state == "string" ? await $(e, t.state) : void 0,
+    messages: typeof t.messages == "string" ? await $(e, t.messages) : void 0
   };
 }
-const N = (e, t) => e.errors.length > 0 || !!t.strict && e.warnings.length > 0;
-function $(e) {
+const J = (e, t) => e.errors.length > 0 || !!t.strict && e.warnings.length > 0;
+function v(e) {
   return e.errors.length || e.warnings.length ? `${e.file}: ${e.errors.length} error(s), ${e.warnings.length} warning(s)
 ${[...e.errors, ...e.warnings].map(oe).join("")}` : `${e.file}: OK
 `;
 }
 async function ie(e, { positional: t, flags: n }) {
   if (!t.length)
-    return e.stderr(S), 2;
-  const s = await J(e, n), r = [];
-  for (const o of t) r.push({ file: o, ...await x(e, o, s) });
+    return e.stderr(p), 2;
+  const s = await x(e, n), r = [];
+  for (const o of t) r.push({ file: o, ...await k(e, o, s) });
   return e.stdout(n.json ? JSON.stringify(r, null, 2) + `
-` : r.map($).join("")), r.some((o) => N(o, n)) ? 1 : 0;
+` : r.map(v).join("")), r.some((o) => J(o, n)) ? 1 : 0;
 }
 const ae = [390, 640, 960, 1350];
 async function ce(e, { positional: [t], flags: n }) {
   if (!t)
-    return e.stderr(S), 2;
+    return e.stderr(p), 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), r = { file: t, ...await x(e, t, s) };
-  if (N(r, n))
+  const s = await x(e, n), r = { file: t, ...await k(e, t, s) };
+  if (J(r, n))
     return e.stdout(n.json ? JSON.stringify({ file: t, validation: r, renders: [] }, null, 2) + `
-` : $(r)), 1;
+` : v(r)), 1;
   const o = await e.render({
-    spec: await y(e, t),
+    spec: await $(e, t),
     state: s.state,
     messages: s.messages,
-    widths: f(n.widths)?.map(Number) ?? ae,
+    widths: y(n.widths)?.map(Number) ?? ae,
     height: typeof n.height == "string" ? Number(n.height) : 800,
-    out: typeof n.out == "string" ? n.out : "syno-ui-render",
+    out: typeof n.out == "string" ? n.out : "syno-pkg-land-ui-render",
     name: t.split(/[\\/]/).pop().replace(/\.json$/i, "")
   }).catch((i) => {
-    throw new p(`render failed: ${i instanceof Error ? i.message : String(i)}`);
+    throw new h(`render failed: ${i instanceof Error ? i.message : String(i)}`);
   });
   if (n.json) e.stdout(JSON.stringify({ file: t, validation: r, renders: o }, null, 2) + `
 `);
   else {
-    e.stdout(r.warnings.length ? $(r) : "");
+    e.stdout(r.warnings.length ? v(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}
@@ -246,12 +246,14 @@ async function de(e, t) {
   try {
     return await le(re(e), t);
   } catch (n) {
-    if (!(n instanceof p)) throw n;
+    if (!(n instanceof h)) throw n;
     return t.stderr(`${n.message}
 `), 2;
   }
 }
 async function le(e, t) {
+  if (e.flags.help === !0)
+    return t.stdout(p), 0;
   const [n, ...s] = e.positional, r = e.flags.json === !0;
   switch (n) {
     case "catalog": {
@@ -264,11 +266,11 @@ async function le(e, t) {
       const o = s[0] ?? "", i = _(o);
       if (!i) {
         const c = V(o);
-        return t.stderr(`Unknown component ${JSON.stringify(o)}.${c ? ` Did you mean "${c}"?` : ""} Run "syno-ui catalog".
+        return t.stderr(`Unknown component ${JSON.stringify(o)}.${c ? ` Did you mean "${c}"?` : ""} Run "syno-pkg-land-ui catalog".
 `), 2;
       }
       return t.stdout(r ? JSON.stringify(i, null, 2) + `
-` : me(i)), 0;
+` : ue(i)), 0;
     }
     case "schema":
       return t.stdout(JSON.stringify(W(), null, 2) + `
@@ -280,10 +282,10 @@ async function le(e, t) {
     case "render":
       return ce(t, { positional: s, flags: e.flags });
     default:
-      return t.stderr(S), 2;
+      return t.stderr(p), 2;
   }
 }
-function me(e) {
+function ue(e) {
   const t = Object.entries(e.props).map(([n, s]) => `  ${n}${s.required ? "" : "?"}: ${JSON.stringify(s.schema)}
 `).join("");
   return `${e.name}: ${e.description}
@@ -297,7 +299,7 @@ example: ${JSON.stringify(e.example)}
 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"),
+  readFile: (e) => S(e, "utf8"),
   // The DevTools connection uses the WebSocket global of Node 22 and newer.
   render: typeof WebSocket == "function" ? ne(import.meta.url) : void 0
 });