@synopackageland/ui 0.6.0 → 0.7.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,

package/dist/cli.js

@@ -1,83 +1,90 @@
 #!/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) {
-  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);
+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);
 }
-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 = 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 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((P, A) => {
+  const b = (a, u = {}) => 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 }));
+    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 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 S(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,25 +103,25 @@ 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(g(H(), "syno-pkg-land-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 D(u, Buffer.from(l, "base64")), i.push({ width: c, screenshot: u, issues: d });
+        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" }), 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 {
-      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 });
     }
   };
 }
-const S = `Usage: syno-ui <command> [options]
+const p = `Usage: syno-pkg-land-ui <command> [options]
 
 Commands:
   catalog [--json]                 List the JSON UI components
@@ -129,139 +136,141 @@ 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()
-`, 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 };
 }
-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 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) {
+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 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;
+    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(v).join("")), r.some((o) => J(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;
+    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), 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({
-    spec: await y(e, t),
+  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) + `
+` : v(r)), 1;
+  const o = await e.render({
+    spec: await $(e, t),
     state: s.state,
     messages: s.messages,
-    widths: f(n.widths)?.map(Number) ?? ie,
+    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: 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 ? 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}
 `).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;
+    if (!(n instanceof h)) 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) {
+  if (e.flags.help === !0)
+    return t.stdout(p), 0;
+  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-pkg-land-ui catalog".
 `), 2;
       }
-      return t.stdout(o ? JSON.stringify(i, null, 2) + `
-` : le(i)), 0;
+      return t.stdout(r ? JSON.stringify(i, null, 2) + `
+` : ue(i)), 0;
     }
     case "schema":
       return t.stdout(JSON.stringify(W(), null, 2) + `
@@ -269,14 +278,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;
+      return t.stderr(p), 2;
   }
 }
-function le(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}
@@ -287,10 +296,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"),
+  readFile: (e) => S(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/dist/index.js

@@ -2,7 +2,7 @@ import * as _l from "vue";
 import { inject as et, computed as h, defineComponent as E, openBlock as f, createElementBlock as _, normalizeStyle as $e, unref as l, createElementVNode as K, normalizeClass as le, createBlock as q, createCommentVNode as N, renderSlot as k, useAttrs as Kr, provide as Qe, watch as ve, watchEffect as lt, onBeforeUpdate as Ju, onBeforeUnmount as Ge, mergeProps as ee, shallowRef as ar, shallowReadonly as Zt, toValue as Xe, getCurrentScope as wi, onScopeDispose as vn, customRef as Qu, effectScope as Ci, getCurrentInstance as gt, isRef as zt, reactive as ct, toRefs as Fe, ref as T, nextTick as Ae, onMounted as Te, Fragment as fe, toHandlerKey as ed, camelize as ki, onUpdated as Si, triggerRef as td, toRef as ad, onUnmounted as pt, h as wt, Comment as rd, cloneVNode as od, withCtx as x, createVNode as O, withKeys as je, withDirectives as xt, vShow as ca, withModifiers as Se, Teleport as Wr, normalizeProps as Ee, guardReactiveProps as De, markRaw as nd, renderList as ke, watchSyncEffect as ld, withMemo as mn, watchPostEffect as $i, mergeDefaults as qi, resolveDynamicComponent as Ke, toHandlers as Pi, createTextVNode as ye, toDisplayString as Y, toRaw as id, useId as Ct, useTemplateRef as Ue, vModelText as Ai, resolveComponent as hn, vModelSelect as _o, useSlots as ea, createSlots as sd, shallowReactive as ud } from "vue";
 import { Minus as zo, ChevronDown as ft, Plus as No, Check as Lt, X as St, ChevronRight as dt, CalendarDays as dd, ChevronLeft as yn, CircleAlert as gn, TriangleAlert as bn, CircleCheck as Ei, Info as Hr, Ellipsis as xl, ChevronsLeft as cd, ChevronsRight as fd, RefreshCw as Er, Filter as pd, Search as vd, Trash2 as md, ChevronUp as Ti, GripVertical as wl, FolderOpen as Di, Folder as hd, File as yd, UploadCloud as gd, FileText as bd, Scissors as _d, Copy as xd, Pencil as wd, CircleHelp as Cd, Lightbulb as kd, ChevronsUpDown as Sd, Package as $d, ExternalLink as qd, Menu as Pd, Download as Ad, ArrowUpRight as Ed } from "@lucide/vue";
 import { DateFormatter as Ft, createCalendar as Td, toCalendar as Cl, CalendarDateTime as Bi, CalendarDate as Oi, getLocalTimeZone as _n, ZonedDateTime as Dd, getDayOfWeek as xn, startOfMonth as Bd, endOfMonth as kl, today as Od, isEqualMonth as Sl, isSameMonth as Ii, isSameDay as Pa, isEqualDay as Ua, isToday as Id, parseDate as Rd } from "@internationalized/date";
-const Ri = /* @__PURE__ */ Symbol("syno-ui:locale");
+const Ri = /* @__PURE__ */ Symbol("syno-pkg-land-ui:locale");
 function rr(e) {
   const a = et(Ri, null);
   return h(() => e() ?? a?.value ?? "en");
@@ -1313,7 +1313,7 @@ const Ld = ["type", "disabled", "data-disabled"], nt = /* @__PURE__ */ E({
       k(r.$slots, "default")
     ], 10, zd));
   }
-}), Mi = /* @__PURE__ */ Symbol("syno-ui:form"), Cn = /* @__PURE__ */ Symbol("syno-ui:form-field");
+}), Mi = /* @__PURE__ */ Symbol("syno-pkg-land-ui:form"), Cn = /* @__PURE__ */ Symbol("syno-pkg-land-ui:form-field");
 function Nd() {
   return et(Mi, null);
 }
@@ -20644,7 +20644,7 @@ const m0 = ["disabled", "readonly", "placeholder", "onKeydown"], h0 = ["disabled
       ], 8, T0)) : N("", !0)
     ], 16));
   }
-}), ku = /* @__PURE__ */ Symbol("syno-ui-toast-controller");
+}), ku = /* @__PURE__ */ Symbol("syno-pkg-land-ui-toast-controller");
 function _A() {
   const e = et(ku);
   if (!e)
@@ -25859,7 +25859,7 @@ const rS = { class: "mb-3 flex flex-wrap items-start justify-between gap-3" }, o
       ])
     ], 40, kS));
   }
-}), Iu = /* @__PURE__ */ Symbol("syno-ui-notification-controller");
+}), Iu = /* @__PURE__ */ Symbol("syno-pkg-land-ui-notification-controller");
 function OS() {
   const e = et(Iu);
   if (!e)
@@ -27157,7 +27157,7 @@ const b$ = ["aria-rowcount", "aria-colcount"], _$ = { role: "row" }, x$ = ["aria
       _: 1
     }, 8, ["open", "title", "description", "width"]));
   }
-}), Ru = /* @__PURE__ */ Symbol("syno-ui-message-box");
+}), Ru = /* @__PURE__ */ Symbol("syno-pkg-land-ui-message-box");
 function H$(e = (a, t) => wn("en", a, t)) {
   const a = T([]), t = /* @__PURE__ */ new Map();
   let r = 1;
@@ -27244,7 +27244,7 @@ const EE = /* @__PURE__ */ E({
       }, null, 8, ["kind", "title", "message", "phrase", "progress", "options", "onSettle"]))), 128))
     ], 64));
   }
-}), Mu = /* @__PURE__ */ Symbol("syno-ui-wizard");
+}), Mu = /* @__PURE__ */ Symbol("syno-pkg-land-ui-wizard");
 function G$() {
   return et(Mu, null);
 }
@@ -28216,7 +28216,7 @@ const Y$ = ["aria-label"], X$ = {
       ])) : N("", !0)
     ], 64));
   }
-}), Vu = /* @__PURE__ */ Symbol("syno-ui:config-manager"), cl = /* @__PURE__ */ Symbol("syno-ui:config-provider");
+}), Vu = /* @__PURE__ */ Symbol("syno-pkg-land-ui:config-manager"), cl = /* @__PURE__ */ Symbol("syno-pkg-land-ui:config-provider");
 function Da(e) {
   if (typeof e != "object" || e === null || Array.isArray(e)) return !1;
   const a = Object.getPrototypeOf(e);
@@ -28947,7 +28947,7 @@ const ZE = /* @__PURE__ */ E({
     ve(
       () => a.alignItem,
       (r) => {
-        r && console.warn("[syno-ui] Space: `alignItem` is deprecated, use `alignItems` instead.");
+        r && console.warn("[syno-pkg-land-ui] Space: `alignItem` is deprecated, use `alignItems` instead.");
       },
       { immediate: !0 }
     );

package/dist/json/catalog.d.ts

@@ -905,6 +905,6 @@ export declare const synoJsonCatalog: import('@json-render/core').Catalog<{
 }>;
 export declare const synoJsonAiRules: string[];
 /** The self-check loop an AI follows after generating a spec. */
-export declare const synoJsonAiWorkflow = "## Self-check workflow\n\n1. List components with `npx syno-ui catalog`; read props with `npx syno-ui describe <Component>`.\n2. Write the spec as JSON: {\"root\", \"elements\", \"state\"}. Seed every state path you bind or read.\n3. Run `npx syno-ui validate ui.json --json` (add --actions, --functions, --state, --messages for host-provided names).\n   Fix every error at its JSON Pointer `path` using its `hint`, then validate again until it passes.\n4. Run `npx syno-ui render ui.json --out shots` to screenshot phone, DSM window and wide widths and to\n   report layout overflow; fix reported elements and repeat.\n5. Hand over the spec only when validate and render both exit 0.";
+export declare const synoJsonAiWorkflow = "## Self-check workflow\n\nInstall `@synopackageland/ui` first. Without a local install, use\n`npx -y -p @synopackageland/ui syno-pkg-land-ui <command>` (pin the package version for reproducibility).\n\n1. List components with `npx --no syno-pkg-land-ui catalog`; read props with `npx --no syno-pkg-land-ui describe <Component>`.\n2. Write the spec as JSON: {\"root\", \"elements\", \"state\"}. Seed every state path you bind or read.\n3. Run `npx --no syno-pkg-land-ui validate ui.json --json` (add --actions, --functions, --state, --messages for host-provided names).\n   Fix every error at its JSON Pointer `path` using its `hint`, then validate again until it passes.\n4. Run `npx --no syno-pkg-land-ui render ui.json --out shots` to screenshot phone, DSM window and wide widths and to\n   report layout overflow; fix reported elements and repeat.\n5. Hand over the spec only when validate and render both exit 0.";
 /** The complete AI system prompt: catalog, rules and the self-check workflow. */
 export declare function synoJsonAiPrompt(): string;

package/dist/json-ai-prompt.md

@@ -175,10 +175,13 @@ RULES:
 
 ## Self-check workflow
 
-1. List components with `npx syno-ui catalog`; read props with `npx syno-ui describe <Component>`.
+Install `@synopackageland/ui` first. Without a local install, use
+`npx -y -p @synopackageland/ui syno-pkg-land-ui <command>` (pin the package version for reproducibility).
+
+1. List components with `npx --no syno-pkg-land-ui catalog`; read props with `npx --no syno-pkg-land-ui describe <Component>`.
 2. Write the spec as JSON: {"root", "elements", "state"}. Seed every state path you bind or read.
-3. Run `npx syno-ui validate ui.json --json` (add --actions, --functions, --state, --messages for host-provided names).
+3. Run `npx --no syno-pkg-land-ui validate ui.json --json` (add --actions, --functions, --state, --messages for host-provided names).
    Fix every error at its JSON Pointer `path` using its `hint`, then validate again until it passes.
-4. Run `npx syno-ui render ui.json --out shots` to screenshot phone, DSM window and wide widths and to
+4. Run `npx --no syno-pkg-land-ui render ui.json --out shots` to screenshot phone, DSM window and wide widths and to
    report layout overflow; fix reported elements and repeat.
 5. Hand over the spec only when validate and render both exit 0.

package/dist/json-preview/preview.js

@@ -11364,7 +11364,7 @@ function jS(e, t) {
     f ? await f[1](l, u, c) : console.warn(`Unknown action: ${a}`);
   } };
 }
-const LS = /* @__PURE__ */ Symbol("syno-ui:locale");
+const LS = /* @__PURE__ */ Symbol("syno-pkg-land-ui:locale");
 function qS(e) {
   const t = Le(LS, null);
   return $(() => e() ?? t?.value ?? "en");
@@ -12644,7 +12644,7 @@ const KS = ["type", "disabled", "data-disabled"], HS = /* @__PURE__ */ V({
       B(r.$slots, "default")
     ], 10, KS));
   }
-}), Cp = /* @__PURE__ */ Symbol("syno-ui:form"), vl = /* @__PURE__ */ Symbol("syno-ui:form-field");
+}), Cp = /* @__PURE__ */ Symbol("syno-pkg-land-ui:form"), vl = /* @__PURE__ */ Symbol("syno-pkg-land-ui:form-field");
 function JS() {
   return Le(Cp, null);
 }
@@ -20522,7 +20522,7 @@ const ys = /* @__PURE__ */ Symbol("syno-app-presentation"), X$ = ["data-ui-data-
       ])) : Q("", !0)
     ], 64));
   }
-}), QE = /* @__PURE__ */ Symbol("syno-ui:config-manager"), eP = /* @__PURE__ */ Symbol("syno-ui:config-provider");
+}), QE = /* @__PURE__ */ Symbol("syno-pkg-land-ui:config-manager"), eP = /* @__PURE__ */ Symbol("syno-pkg-land-ui:config-provider");
 function Pi(e) {
   if (typeof e != "object" || e === null || Array.isArray(e)) return !1;
   const t = Object.getPrototypeOf(e);

package/dist/json.js

@@ -3,7 +3,7 @@ import { z as gt } from "zod";
 import { defineCatalog as z } from "@json-render/core";
 import { createStateStore as yt, defineCatalog as wt } from "@json-render/core";
 import { defineRegistry as B, useBoundProp as b, JSONUIProvider as M, Renderer as W } from "@json-render/vue";
-import { ActionProvider as $t, JSONUIProvider as St, Renderer as jt, StateProvider as Ot, ValidationProvider as xt, VisibilityProvider as At, defineRegistry as Pt, useActions as Ct, useBoundProp as kt, useStateStore as Rt } from "@json-render/vue";
+import { ActionProvider as $t, JSONUIProvider as St, Renderer as jt, StateProvider as Ot, ValidationProvider as xt, VisibilityProvider as At, defineRegistry as Pt, useActions as kt, useBoundProp as Ct, useStateStore as Rt } from "@json-render/vue";
 import { schema as H } from "@json-render/vue/schema";
 import { schema as It } from "@json-render/vue/schema";
 import { h as d, defineComponent as G, openBlock as X, createBlock as Y, unref as j, withCtx as Q, createVNode as Z } from "vue";
@@ -16,11 +16,11 @@ const V = o.lazy(() => o.object({
   disabled: o.boolean().optional(),
   selectable: o.boolean().optional(),
   children: o.array(V).optional()
-})), C = o.object({
+})), k = o.object({
   label: o.string(),
   value: o.string(),
   disabled: o.boolean().optional()
-}), Pe = C.extend({
+}), Pe = k.extend({
   description: o.string().optional()
 }), U = o.object({
   key: o.string(),
@@ -88,7 +88,7 @@ const V = o.lazy(() => o.object({
   Tabs: {
     props: o.object({
       value: o.string(),
-      items: o.array(C),
+      items: o.array(k),
       ariaLabel: o.string().optional()
     }),
     events: ["change"],
@@ -141,7 +141,7 @@ const V = o.lazy(() => o.object({
   Select: {
     props: o.object({
       value: o.string().optional(),
-      options: o.array(C),
+      options: o.array(k),
       placeholder: o.string().optional(),
       disabled: o.boolean().optional(),
       search: o.boolean().optional()
@@ -318,7 +318,7 @@ const V = o.lazy(() => o.object({
 }, A = z(H, {
   components: _,
   actions: {}
-}), Ce = [
+}), ke = [
   "Prefer AppRoot > AppShell > Page as the normal DSM application hierarchy.",
   "Prefer SettingsSection and SettingsField for settings; prefer ResourceList/DataTable for ordinary scalar resource collections.",
   "Keep state in the spec and use $bindState/$bindItem for editable controls; do not invent JavaScript in props.",
@@ -327,11 +327,11 @@ const V = o.lazy(() => o.object({
   "AppShell adapts to its actual DSM window width: phone (<=600px), desktop window (601–1199px), and wide web/Portal (>=1200px). Never assume browser viewport width.",
   "For a phone-unfriendly custom view, use ResponsiveView slots: mobile alternative and default full view. Keep essential actions accessible on mobile.",
   "Use low-level Stack/Text only when a semantic component does not already express the layout."
-], ke = '## Self-check workflow\n\n1. List components with `npx syno-ui catalog`; read props with `npx syno-ui describe <Component>`.\n2. Write the spec as JSON: {"root", "elements", "state"}. Seed every state path you bind or read.\n3. Run `npx syno-ui validate ui.json --json` (add --actions, --functions, --state, --messages for host-provided names).\n   Fix every error at its JSON Pointer `path` using its `hint`, then validate again until it passes.\n4. Run `npx syno-ui render ui.json --out shots` to screenshot phone, DSM window and wide widths and to\n   report layout overflow; fix reported elements and repeat.\n5. Hand over the spec only when validate and render both exit 0.';
+], Ce = '## Self-check workflow\n\nInstall `@synopackageland/ui` first. Without a local install, use\n`npx -y -p @synopackageland/ui syno-pkg-land-ui <command>` (pin the package version for reproducibility).\n\n1. List components with `npx --no syno-pkg-land-ui catalog`; read props with `npx --no syno-pkg-land-ui describe <Component>`.\n2. Write the spec as JSON: {"root", "elements", "state"}. Seed every state path you bind or read.\n3. Run `npx --no syno-pkg-land-ui validate ui.json --json` (add --actions, --functions, --state, --messages for host-provided names).\n   Fix every error at its JSON Pointer `path` using its `hint`, then validate again until it passes.\n4. Run `npx --no syno-pkg-land-ui render ui.json --out shots` to screenshot phone, DSM window and wide widths and to\n   report layout overflow; fix reported elements and repeat.\n5. Hand over the spec only when validate and render both exit 0.';
 function rt() {
-  return `${A.prompt({ customRules: Ce })}
+  return `${A.prompt({ customRules: ke })}
 
-${ke}
+${Ce}
 `;
 }
 const Re = {
@@ -344,13 +344,13 @@ const Re = {
 function Ue(e) {
   return { default: () => e };
 }
-function k(e) {
+function C(e) {
   return e ? Ae(e) : void 0;
 }
 function T(e) {
   return {
     ...e,
-    icon: k(e.icon),
+    icon: C(e.icon),
     children: e.children?.map(T)
   };
 }
@@ -409,7 +409,7 @@ const Le = {
     return d(t === "heading" ? "h2" : t === "mono" ? "code" : "span", { class: t === "muted" ? "text-[13px] text-[var(--ui-text-muted)]" : t === "caption" ? "text-[12px] text-[var(--ui-text-muted)]" : t === "heading" ? "text-[16px] font-semibold text-[var(--ui-text)]" : t === "mono" ? "font-mono text-[12px] text-[var(--ui-text)]" : "text-[13px] text-[var(--ui-text)]", "data-syno-ui": "" }, e.text);
   },
   Button: ({ props: e, emit: t }) => {
-    const n = k(e.icon);
+    const n = C(e.icon);
     return d(be, {
       variant: e.variant,
       size: e.size,
@@ -538,7 +538,7 @@ const Le = {
   EmptyState: ({ props: e, slots: t }) => d(ie, {
     title: e.title,
     description: e.description,
-    icon: k(e.icon)
+    icon: C(e.icon)
   }, t),
   Progress: ({ props: e }) => d(ne, e),
   Badge: ({ props: e }) => d(oe, { tone: e.tone }, Ue(e.text)),
@@ -669,7 +669,7 @@ function ct(e, t = {}) {
         path: w("type"),
         elementKey: p,
         message: `Unknown component type ${JSON.stringify(h)}.`,
-        hint: g ? `Did you mean "${g}"? Run "syno-ui catalog" for every component.` : 'Run "syno-ui catalog" for every component, or register a host extension component.'
+        hint: g ? `Did you mean "${g}"? Run "syno-pkg-land-ui catalog" for every component.` : 'Run "syno-pkg-land-ui catalog" for every component, or register a host extension component.'
       });
       continue;
     }
@@ -708,7 +708,7 @@ function qe(e, t, n, s, i) {
         path: a(l),
         elementKey: t,
         message: `${n} has no prop "${l}".`,
-        hint: h ? `Did you mean "${h}"? Run "syno-ui describe ${n}".` : v(`${n} props`, c)
+        hint: h ? `Did you mean "${h}"? Run "syno-pkg-land-ui describe ${n}".` : v(`${n} props`, c)
       });
       continue;
     }
@@ -725,7 +725,7 @@ function qe(e, t, n, s, i) {
         });
   }
   for (const l of c)
-    !Object.hasOwn(i, l) && !K(r[l]) && e.error({ code: "missing_prop", path: a(l), elementKey: t, message: `${n} requires prop "${l}".`, hint: `Run "syno-ui describe ${n}" for its type.` });
+    !Object.hasOwn(i, l) && !K(r[l]) && e.error({ code: "missing_prop", path: a(l), elementKey: t, message: `${n} requires prop "${l}".`, hint: `Run "syno-pkg-land-ui describe ${n}" for its type.` });
 }
 function F(e, t) {
   const n = [];
@@ -1103,14 +1103,14 @@ export {
   It as jsonRenderVueSchema,
   dt as listSynoJsonComponents,
   rt as synoJsonAiPrompt,
-  Ce as synoJsonAiRules,
+  ke as synoJsonAiRules,
   A as synoJsonCatalog,
   _ as synoJsonComponentDefinitions,
   D as synoJsonRegistry,
   Le as synoJsonRenderers,
   mt as synoJsonSchema,
-  Ct as useActions,
-  kt as useBoundProp,
+  kt as useActions,
+  Ct as useBoundProp,
   Rt as useStateStore,
   ct as validateSynoJsonSpec,
   gt as z

package/dist/reka-runtime.json

@@ -3,7 +3,7 @@
   "version": "2.10.5",
   "delivery": "bundled-patched-esm",
   "patchManifestSha256": "14f10159b60d48ac7a0686f58faf7a30e99898dc267b3c032cf2bdd6052dc52b",
-  "bundleSha256": "56bdc1751e42657de0e1480fdd37b200166c5df1aa0498f2af4f30b66f7f0955",
+  "bundleSha256": "f91918f6eb4061e040da4ccc839184535e347f7eee4472622fbb2fc0a37f6849",
   "sourceHashes": {
     "shared/useBodyScrollLock.js": "657592f283cb6fd25454abd284a0024af21936cb56e05b762ff0d22b6a979d32",
     "DismissableLayer/DismissableLayer.js": "da05ca544d9822a8e2b71057e78c0e1ef59423aa3893534338fb58e1ecbd1a8d",

package/docs/json-ui.md

@@ -107,8 +107,11 @@ state machines stay application-owned extensions.
 
 ## AI tools
 
-The package ships a `syno-ui` command (`npx @synopackageland/ui <command>`, or
-`npx syno-ui` once installed) and the same functions from the JSON entry:
+The package ships a `syno-pkg-land-ui` command and the same functions from the JSON
+entry. After `npm install @synopackageland/ui`, run
+`npx --no syno-pkg-land-ui <command>`. To run it without installing locally, use
+`npx -y -p @synopackageland/ui syno-pkg-land-ui <command>`; pin the package version
+for reproducible automation. Since 0.7.0 the old `syno-ui` bin is removed.
 
 | Command | Purpose | Function |
 | --- | --- | --- |
@@ -125,7 +128,7 @@ references and cycles, state pointers, `$item` outside `repeat`, actions,
 `$computed` functions and i18n keys. Tell it what the host provides:
 
 ```bash
-syno-ui validate ui.json --json --actions save,refresh --functions formatBytes \
+syno-pkg-land-ui validate ui.json --json --actions save,refresh --functions formatBytes \
   --state host-state.json --messages messages/en.json
 ```
 
@@ -138,12 +141,12 @@ key and warns about literal user-facing text.
 
 ### Workflow for an AI
 
-1. Read `syno-ui prompt` once, then `syno-ui catalog` and `syno-ui describe` for
+1. Read `syno-pkg-land-ui prompt` once, then `syno-pkg-land-ui catalog` and `syno-pkg-land-ui describe` for
    the components you plan to use.
 2. Write `{ "root", "elements", "state" }`, seeding every state path you bind.
-3. Run `syno-ui validate ui.json --json` with the host's actions, functions,
+3. Run `syno-pkg-land-ui validate ui.json --json` with the host's actions, functions,
    state and messages. Fix each error at its `path` using its `hint`; repeat.
-4. Run `syno-ui render ui.json --out shots`, look at the screenshots, and fix
+4. Run `syno-pkg-land-ui render ui.json --out shots`, look at the screenshots, and fix
    every element named in an `outside_viewport` or `clipped_content` issue.
 5. Hand over the spec only when `validate` and `render` both exit 0.
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.0",
+  "version": "0.7.0",
   "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-pkg-land-ui": "./dist/cli.js"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",