@synopackageland/ui 0.5.8 → 0.6.0

package/dist/cli.js

@@ -0,0 +1,296 @@
+#!/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 { 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 { spawn as I } from "node:child_process";
+import { existsSync as g } 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);
+}
+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, [
+    "--headless=new",
+    "--disable-gpu",
+    "--hide-scrollbars",
+    "--no-first-run",
+    // 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"] : [],
+    "--remote-debugging-port=0",
+    `--user-data-dir=${e}`,
+    "about:blank"
+  ], { stdio: ["ignore", "ignore", "pipe"] });
+  let s, o = "";
+  n.once("error", (a) => {
+    s = a;
+  }), n.stderr.on("data", (a) => {
+    o = (o + 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(`
+`), 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;
+  });
+  let l = 1;
+  const u = /* @__PURE__ */ new Map();
+  d.onmessage = (a) => {
+    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 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 }));
+  });
+  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>
+<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) {
+  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;
+    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);
+    } catch {
+      r.writeHead(404).end();
+    }
+  });
+  return new Promise((o) => s.listen(0, "127.0.0.1", () => o(s)));
+}
+async function ee(e, t) {
+  await e.send("Page.navigate", { url: t });
+  const { result: n, exceptionDetails: s } = await e.send(
+    "Runtime.evaluate",
+    {
+      expression: `new Promise((done, fail) => {
+        const started = Date.now()
+        const tick = () => location.href === ${JSON.stringify(t)} && window.synoPreview
+          ? window.synoPreview.then(preview => done(preview.issues()), fail)
+          : Date.now() - started > 30000 ? fail(new Error('preview did not render within 30 seconds')) : setTimeout(tick, 50)
+        tick()
+      })`,
+      awaitPromise: !0,
+      returnByValue: !0
+    }
+  );
+  if (s) throw new Error(`Rendering failed: ${s.exception?.description ?? "unknown error"}`);
+  return n.value;
+}
+function te(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;
+    try {
+      r = await Y(o), 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 });
+      }
+      return i;
+    } finally {
+      await r?.close(), n.close(), await R(o, { recursive: !0, force: !0, maxRetries: 12, retryDelay: 250 });
+    }
+  };
+}
+const S = `Usage: syno-ui <command> [options]
+
+Commands:
+  catalog [--json]                 List the JSON UI components
+  describe <Component> [--json]    Show one component's props, slots, events and an example
+  schema                           Print the spec JSON Schema (generated from the catalog)
+  prompt                           Print the AI system prompt, rules and self-check workflow
+  validate <file...> [options]     Check specs; exit 1 on errors
+    --json                         Machine-readable output
+    --strict                       Also fail on warnings
+    --actions a,b                  Host action handlers
+    --functions f,g                Host $computed functions
+    --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)
+    --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) {
+  const t = [], n = {};
+  for (let s = 0; s < e.length; s++) {
+    const o = e[s];
+    if (!o.startsWith("--")) {
+      t.push(o);
+      continue;
+    }
+    const [r, i] = o.slice(2).split("=", 2);
+    n[r] = i ?? (ne.has(r) && 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;
+function oe(e) {
+  return `  ${e.severity} ${e.code} ${e.path || "/"}: ${e.message}${e.hint ? `
+    hint: ${e.hint}` : ""}
+`;
+}
+class p 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)}`);
+  }
+}
+async function y(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)}`);
+  }
+}
+async function x(e, t, n) {
+  const s = await C(e, t);
+  let o;
+  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: [] };
+  }
+  return G(o, n);
+}
+async function J(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
+  };
+}
+const N = (e, t) => e.errors.length > 0 || !!t.strict && e.warnings.length > 0;
+function $(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 }) {
+  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 ie = [390, 640, 960, 1350];
+async function ae(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({
+    spec: await y(e, t),
+    state: s.state,
+    messages: s.messages,
+    widths: f(n.widths)?.map(Number) ?? ie,
+    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) + `
+`);
+  else {
+    e.stdout(o.warnings.length ? $(o) : "");
+    for (const { width: i, screenshot: c, issues: d } of r)
+      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;
+}
+async function ce(e, t) {
+  try {
+    return await de(se(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;
+  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}
+`).join("")), 0;
+    }
+    case "describe": {
+      const r = s[0] ?? "", i = _(r);
+      if (!i) {
+        const c = V(r);
+        return t.stderr(`Unknown component ${JSON.stringify(r)}.${c ? ` Did you mean "${c}"?` : ""} Run "syno-ui catalog".
+`), 2;
+      }
+      return t.stdout(o ? JSON.stringify(i, null, 2) + `
+` : le(i)), 0;
+    }
+    case "schema":
+      return t.stdout(JSON.stringify(W(), null, 2) + `
+`), 0;
+    case "prompt":
+      return t.stdout(T()), 0;
+    case "validate":
+      return re(t, { positional: s, flags: e.flags });
+    case "render":
+      return ae(t, { positional: s, flags: e.flags });
+    default:
+      return t.stderr(S), 2;
+  }
+}
+function le(e) {
+  const t = Object.entries(e.props).map(([n, s]) => `  ${n}${s.required ? "" : "?"}: ${JSON.stringify(s.schema)}
+`).join("");
+  return `${e.name}: ${e.description}
+props:
+${t || `  (none)
+`}slots: ${e.slots.join(", ") || "(none)"}
+events: ${e.events.join(", ") || "(none)"}
+example: ${JSON.stringify(e.example)}
+`;
+}
+process.exitCode = await ce(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
+});

package/dist/components/app/app-layout/AppLayout.vue.d.ts

@@ -1,20 +1,27 @@
+import { WideLayout } from '../../../lib/adaptiveLayout';
 type __VLS_Props = {
     sidebarWidth?: string;
     minHeight?: string;
+    /** Disable responsive layout if an application deliberately manages it itself. */
+    responsive?: boolean;
+    /** `web` opts a full-page Portal into the spacious layout at 1200px or wider; DSM windows keep `window`. */
+    wideLayout?: WideLayout;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+declare var __VLS_6: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    sidebar?: (props: typeof __VLS_1) => any;
+    sidebar?: (props: typeof __VLS_6) => any;
 } & {
-    toolbar?: (props: typeof __VLS_3) => any;
+    toolbar?: (props: typeof __VLS_13) => any;
 } & {
-    default?: (props: typeof __VLS_5) => any;
+    default?: (props: typeof __VLS_15) => any;
 } & {
-    footer?: (props: typeof __VLS_7) => any;
+    footer?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     minHeight: string;
     sidebarWidth: string;
+    responsive: boolean;
+    wideLayout: WideLayout;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/app/page-content/PageContent.vue.d.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
      * `--ui-page-readable-width`; any other value is a CSS maximum width.
      */
     width?: 'fill' | 'readable' | (string & {});
+    /** Web/portal mode uses a page surface by default. Set flat for card-based dashboards. */
+    surface?: 'auto' | 'flat' | 'card';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -11,6 +13,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     width: "fill" | "readable" | (string & {});
+    surface: "auto" | "flat" | "card";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/app/responsive-view/ResponsiveView.vue.d.ts

@@ -0,0 +1,24 @@
+import { AppPresentation } from '../../../lib/adaptiveLayout';
+/**
+ * Optional alternate representations for specialized views.
+ * Never silently discard functionality: if a mode has no slot, retain
+ * the default content or reuse the closest supplied representation.
+ */
+type __VLS_Props = {
+    mode?: 'auto' | AppPresentation;
+};
+declare var __VLS_2: "default" | AppPresentation, __VLS_3: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    mode: "auto" | AppPresentation;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/composite/data-table/DataTable.vue.d.ts

@@ -10,18 +10,27 @@ type __VLS_Props = {
     rowKey?: string;
     emptyText?: string;
     compact?: boolean;
+    /** Simple tables become fully labeled cards in mobile mode unless set to table. */
+    mobileView?: 'auto' | 'cards' | 'table';
 };
 declare var __VLS_2: `cell-${string}`, __VLS_3: {
     row: Record<string, unknown>;
     value: unknown;
     column: DataTableColumn;
+}, __VLS_6: `cell-${string}`, __VLS_7: {
+    row: Record<string, unknown>;
+    value: unknown;
+    column: DataTableColumn;
 };
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+} & {
+    [K in NonNullable<typeof __VLS_6>]?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     compact: boolean;
     rowKey: string;
+    mobileView: "auto" | "cards" | "table";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/index.d.ts

@@ -153,6 +153,9 @@ export type { AboutCheckState, AboutVersionInfo } from './components/composite/a
 export { default as AppRoot } from './components/app/app-root/AppRoot.vue';
 export { APP_ROOT_ATTRIBUTE, APP_ROOT_SELECTOR } from './lib/appRoot';
 export { default as AppLayout } from './components/app/app-layout/AppLayout.vue';
+export { default as ResponsiveView } from './components/app/responsive-view/ResponsiveView.vue';
+export { appPresentationForWidth, MOBILE_LAYOUT_MAX, WEB_LAYOUT_MIN } from './lib/adaptiveLayout';
+export type { AppPresentation, WideLayout } from './lib/adaptiveLayout';
 export { default as AppSidebar } from './components/app/app-sidebar/AppSidebar.vue';
 export type { AppSidebarGroup, AppSidebarItem } from './components/app/app-sidebar/AppSidebar.vue';
 export { default as AppToolbar } from './components/app/app-toolbar/AppToolbar.vue';