@synopackageland/ui 0.8.0 → 0.8.1

package/README.md

@@ -361,6 +361,10 @@ DSM-style application building blocks:
 `Tabs` and `SectionTabs` move a raised selection notch in 120ms. Selected labels
 are blue; main labels are bold 14px and section labels bold 13px. `Tabs` fades its
 new panel in over 160ms, with immediate selection and keyboard response.
+A strip narrower than its tabs keeps one row and scrolls sideways (trackpad,
+touch, Shift+wheel or keyboard focus) with no visible scrollbar; it never
+scrolls vertically. In a grid or flex parent, give the strip's track or item
+`min-width: 0` (`minmax(0, 1fr)`) so it can be narrower than its tabs.
 `SectionTabs` can also render content using named `panel-${value}` slots:
 
 ```vue
@@ -592,6 +596,12 @@ document, set a distinct `app.config.idPrefix` for each app.
 </ConfigProvider>
 ```
 
+FilePicker sizes (`max {size}` and each file row) follow DSM: a 1024 base
+with `B`, `KB`, `MB`, `GB`, `TB` labels and at most one decimal, so
+`:max-size="16 * 1024 ** 3"` reads `max 16 GB`, as DSM File Station would show
+it. The same rule is exported as `formatFileSize(bytes)`; use it, or the same
+DSM labels, in application text that repeats a limit, rather than `GiB`/`MiB`.
+
 FilePicker retains browser `File[]` semantics. Built-in `locale` values are
 `en`, `zh-TW`, `zh-CN`, `ja`, `ko`, `de`, `fr`, `es`, `it`; an explicit picker
 locale overrides ConfigProvider. Its `text` accepts partial overrides of

package/dist/cli.js

@@ -1,24 +1,24 @@
 #!/usr/bin/env node
-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 g, win32 as U, posix as j } from "node:path";
-import { spawn as I } from "node:child_process";
-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 = [
+import { readFile as b, mkdtemp as M, mkdir as D, writeFile as R, rm as F } from "node:fs/promises";
+import { createServer as H } from "node:http";
+import { tmpdir as U } from "node:os";
+import { join as f, win32 as I, posix as C } from "node:path";
+import { spawn as L } from "node:child_process";
+import { existsSync as y } from "node:fs";
+import { setTimeout as T } from "node:timers/promises";
+import { synoJsonAiPrompt as W, synoJsonSchema as _, describeSynoJsonComponent as V, closestSynoJsonComponent as B, listSynoJsonComponents as G, validateSynoJsonSpec as K } from "./json.js";
+const X = [
   "/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 = 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);
+], z = ["google-chrome", "google-chrome-stable", "chromium", "chromium-browser"], Q = ["ProgramFiles", "ProgramFiles(x86)", "LOCALAPPDATA"];
+function Y(e = process.env, t = process.platform, n = y) {
+  return e.CHROME ? e.CHROME : (t === "darwin" ? X : t === "win32" ? Q.flatMap((r) => e[r] ? [I.join(e[r], "Google", "Chrome", "Application", "chrome.exe")] : []) : (e.PATH ?? "").split(C.delimiter).filter(Boolean).flatMap((r) => z.map((o) => C.join(r, o)))).find(n);
 }
-function Y(e, t = process.env) {
+function Z(e, t = process.env, { scrollbars: n = !1 } = {}) {
   return [
     "--headless=new",
     "--disable-gpu",
-    "--hide-scrollbars",
+    ...n ? [] : ["--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
@@ -32,59 +32,59 @@ function Y(e, t = process.env) {
     "about:blank"
   ];
 }
-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) => {
-    r = (r + a).slice(-4e3);
+async function q(e, t = {}) {
+  const n = Y();
+  if (!n) throw new Error("Chrome or Chromium was not found; set CHROME to its executable path.");
+  const s = L(n, Z(e, process.env, t), { stdio: ["ignore", "ignore", "pipe"] });
+  let r, o = "";
+  s.once("error", (a) => {
+    r = a;
+  }), s.stderr.on("data", (a) => {
+    o = (o + a).slice(-4e3);
   });
-  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);
+  const i = f(e, "DevToolsActivePort");
+  for (let a = 0; a < 100 && !y(i) && !r && s.exitCode === null; a++) await T(100);
+  if (!y(i))
+    throw s.kill(), new Error(`Chrome failed to start: ${r?.message ?? (o || "no debugging port within 10 seconds")}`);
+  const [c] = (await b(i, "utf8")).split(`
+`), l = await (await fetch(`http://127.0.0.1:${c}/json/new?about:blank`, { method: "PUT" })).json(), d = new WebSocket(l.webSocketDebuggerUrl);
   await new Promise((a, u) => {
     d.onopen = a, d.onerror = u;
   });
-  let l = 1;
-  const m = /* @__PURE__ */ new Map();
+  let m = 1;
+  const w = /* @__PURE__ */ new Map();
   d.onmessage = (a) => {
     const u = JSON.parse(String(a.data));
-    m.get(u.id)?.(u), m.delete(u.id);
+    w.get(u.id)?.(u), w.delete(u.id);
   };
-  const b = (a, u = {}) => new Promise((A, P) => {
-    const O = l++;
-    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 }));
+  const O = (a, u = {}) => new Promise((P, E) => {
+    const j = m++;
+    w.set(j, (g) => g.error ? E(new Error(g.error.message)) : P(g.result)), d.send(JSON.stringify({ id: j, method: a, params: u }));
   });
-  await b("Emulation.setDeviceMetricsOverride", { width: 1100, height: 720, deviceScaleFactor: 1, mobile: !1 });
-  const N = new Promise((a) => n.once("exit", a));
-  return { send: b, close: () => (d.close(), n.kill(), N) };
+  await O("Emulation.setDeviceMetricsOverride", { width: 1100, height: 720, deviceScaleFactor: 1, mobile: !1 });
+  const A = new Promise((a) => s.once("exit", a));
+  return { send: O, close: () => (d.close(), s.kill(), A) };
 }
-const q = `<!doctype html>
+const ee = `<!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 ee(e, t) {
+function te(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 (r, o) => {
+  }, s = H(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 S(n[i][0]), n[i][1]];
-      o.writeHead(200, { "content-type": d }).end(c);
+      const [c, l] = i === "/" ? [ee, "text/html"] : i === "/config.json" ? [t, "application/json"] : [await b(n[i][0]), n[i][1]];
+      o.writeHead(200, { "content-type": l }).end(c);
     } catch {
       o.writeHead(404).end();
     }
   });
   return new Promise((r) => s.listen(0, "127.0.0.1", () => r(s)));
 }
-async function te(e, t) {
+async function ne(e, t) {
   await e.send("Page.navigate", { url: t });
   const { result: n, exceptionDetails: s } = await e.send(
     "Runtime.evaluate",
@@ -103,21 +103,21 @@ async function te(e, t) {
   if (s) throw new Error(`Rendering failed: ${s.exception?.description ?? "unknown error"}`);
   return n.value;
 }
-function ne(e) {
+function se(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(g(H(), "syno-pkg-land-ui-render-"));
+    const n = await te(e, JSON.stringify({ spec: t.spec, state: t.state, messages: t.messages })), s = `http://127.0.0.1:${n.address().port}/`, r = await M(f(U(), "syno-pkg-land-ui-render-"));
     let o;
     try {
-      o = await Z(r), await M(t.out, { recursive: !0 });
+      o = await q(r), await D(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" }), m = g(t.out, `${t.name}-${c}.png`);
-        await D(m, Buffer.from(l, "base64")), i.push({ width: c, screenshot: m, issues: d });
+        const l = await ne(o, `${s}?width=${c}`), { data: d } = await o.send("Page.captureScreenshot", { format: "png" }), m = f(t.out, `${t.name}-${c}.png`);
+        await R(m, Buffer.from(d, "base64")), i.push({ width: c, screenshot: m, issues: l });
       }
       return i;
     } finally {
-      await o?.close(), n.close(), await R(r, { recursive: !0, force: !0, maxRetries: 12, retryDelay: 250 });
+      await o?.close(), n.close(), await F(r, { recursive: !0, force: !0, maxRetries: 12, retryDelay: 250 });
     }
   };
 }
@@ -140,8 +140,8 @@ 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()
-`, se = /* @__PURE__ */ new Set(["actions", "functions", "state", "messages", "out", "widths", "height", "wide"]);
-function re(e) {
+`, re = /* @__PURE__ */ new Set(["actions", "functions", "state", "messages", "out", "widths", "height", "wide"]);
+function oe(e) {
   const t = [], n = {};
   for (let s = 0; s < e.length; s++) {
     const r = e[s];
@@ -150,19 +150,19 @@ function re(e) {
       continue;
     }
     const [o, i] = r.slice(2).split("=", 2);
-    n[o] = i ?? (se.has(o) && e[s + 1] !== void 0 ? e[++s] : !0);
+    n[o] = i ?? (re.has(o) && e[s + 1] !== void 0 ? e[++s] : !0);
   }
   return { positional: t, flags: n };
 }
-const y = (e) => typeof e == "string" ? e.split(",").map((t) => t.trim()).filter(Boolean) : void 0;
-function oe(e) {
+const v = (e) => typeof e == "string" ? e.split(",").map((t) => t.trim()).filter(Boolean) : void 0;
+function ie(e) {
   return `  ${e.severity} ${e.code} ${e.path || "/"}: ${e.message}${e.hint ? `
     hint: ${e.hint}` : ""}
 `;
 }
 class h extends Error {
 }
-async function C(e, t) {
+async function k(e, t) {
   try {
     return await e.readFile(t);
   } catch (n) {
@@ -170,61 +170,61 @@ async function C(e, t) {
   }
 }
 async function $(e, t) {
-  const n = await C(e, t);
+  const n = await k(e, t);
   try {
     return JSON.parse(n);
   } catch (s) {
     throw new h(`${t} is not valid JSON: ${s instanceof Error ? s.message : String(s)}`);
   }
 }
-async function k(e, t, n) {
-  const s = await C(e, t);
+async function x(e, t, n) {
+  const s = await k(e, t);
   let r;
   try {
     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(r, n);
+  return K(r, n);
 }
-async function x(e, t) {
+async function J(e, t) {
   return {
-    actions: y(t.actions),
-    functions: y(t.functions),
+    actions: v(t.actions),
+    functions: v(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 J = (e, t) => e.errors.length > 0 || !!t.strict && e.warnings.length > 0;
-function v(e) {
+const N = (e, t) => e.errors.length > 0 || !!t.strict && e.warnings.length > 0;
+function S(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
+${[...e.errors, ...e.warnings].map(ie).join("")}` : `${e.file}: OK
 `;
 }
-async function ie(e, { positional: t, flags: n }) {
+async function ae(e, { positional: t, flags: n }) {
   if (!t.length)
     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) });
+  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(v).join("")), r.some((o) => J(o, n)) ? 1 : 0;
+` : r.map(S).join("")), r.some((o) => N(o, n)) ? 1 : 0;
 }
-const ae = [390, 640, 960, 1350];
-async function ce(e, { positional: [t], flags: n }) {
+const ce = [390, 640, 960, 1350];
+async function de(e, { positional: [t], flags: n }) {
   if (!t)
     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 x(e, n), r = { file: t, ...await k(e, t, s) };
-  if (J(r, n))
+  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) + `
-` : v(r)), 1;
+` : S(r)), 1;
   const o = await e.render({
     spec: await $(e, t),
     state: s.state,
     messages: s.messages,
-    widths: y(n.widths)?.map(Number) ?? ae,
+    widths: v(n.widths)?.map(Number) ?? ce,
     height: typeof n.height == "string" ? Number(n.height) : 800,
     out: typeof n.out == "string" ? n.out : "syno-pkg-land-ui-render",
     name: t.split(/[\\/]/).pop().replace(/\.json$/i, "")
@@ -234,58 +234,58 @@ async function ce(e, { positional: [t], flags: n }) {
   if (n.json) e.stdout(JSON.stringify({ file: t, validation: r, renders: o }, null, 2) + `
 `);
   else {
-    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}
+    e.stdout(r.warnings.length ? S(r) : "");
+    for (const { width: i, screenshot: c, issues: l } of o)
+      e.stdout(`${t} @${i}px: ${l.length ? `${l.length} layout issue(s)` : "OK"} ${c}
+` + l.map((d) => `  ${d.kind} ${d.key ?? "(outside the spec)"}: ${d.detail}
 `).join(""));
   }
   return o.some((i) => i.issues.length) ? 1 : 0;
 }
-async function de(e, t) {
+async function le(e, t) {
   try {
-    return await le(re(e), t);
+    return await ue(oe(e), t);
   } catch (n) {
     if (!(n instanceof h)) throw n;
     return t.stderr(`${n.message}
 `), 2;
   }
 }
-async function le(e, t) {
+async function ue(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 o = B();
+      const o = G();
       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 o = s[0] ?? "", i = _(o);
+      const o = s[0] ?? "", i = V(o);
       if (!i) {
-        const c = V(o);
+        const c = B(o);
         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) + `
-` : ue(i)), 0;
+` : me(i)), 0;
     }
     case "schema":
-      return t.stdout(JSON.stringify(W(), null, 2) + `
+      return t.stdout(JSON.stringify(_(), null, 2) + `
 `), 0;
     case "prompt":
-      return t.stdout(T()), 0;
+      return t.stdout(W()), 0;
     case "validate":
-      return ie(t, { positional: s, flags: e.flags });
+      return ae(t, { positional: s, flags: e.flags });
     case "render":
-      return ce(t, { positional: s, flags: e.flags });
+      return de(t, { positional: s, flags: e.flags });
     default:
       return t.stderr(p), 2;
   }
 }
-function ue(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}
@@ -296,10 +296,10 @@ events: ${e.events.join(", ") || "(none)"}
 example: ${JSON.stringify(e.example)}
 `;
 }
-process.exitCode = await de(process.argv.slice(2), {
+process.exitCode = await le(process.argv.slice(2), {
   stdout: (e) => process.stdout.write(e),
   stderr: (e) => process.stderr.write(e),
-  readFile: (e) => S(e, "utf8"),
+  readFile: (e) => b(e, "utf8"),
   // The DevTools connection uses the WebSocket global of Node 22 and newer.
-  render: typeof WebSocket == "function" ? ne(import.meta.url) : void 0
+  render: typeof WebSocket == "function" ? se(import.meta.url) : void 0
 });

package/dist/index.d.ts

@@ -94,6 +94,7 @@ export { default as FormActions } from './components/composite/form-actions/Form
 export { default as RepeatRows } from './components/composite/repeat-rows/RepeatRows.vue';
 export { default as RepeatRow } from './components/composite/repeat-rows/RepeatRow.vue';
 export { default as FieldCell } from './components/composite/repeat-rows/FieldCell.vue';
+export { formatFileSize } from './lib/fileSize';
 export { resolveFieldWidth } from './lib/fieldWidth';
 export type { FieldWidth } from './lib/fieldWidth';
 export { default as SettingsSection } from './components/composite/settings-section/SettingsSection.vue';