@synopackageland/ui 0.5.8 → 0.6.0

package/dist/json.js

@@ -0,0 +1,1117 @@
+import { z as o } from "zod";
+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 { 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";
+import { LoadingArea as ee, DataTable as I, Dialog as te, Badge as oe, Progress as ne, EmptyState as ie, Callout as se, Card as ae, Surface as re, SettingsRow as le, SettingsSection as ce, FormItem as de, Form as pe, RadioGroup as ue, Switch as me, Checkbox as he, Select as fe, Input as ge, Button as be, SectionTabs as ye, AppSidebar as we, AppToolbar as ve, PageHeader as $e, PageContent as Se, ResponsiveView as je, AppLayout as Oe, AppRoot as xe, getRegisteredIcon as Ae } from "./index.js";
+const V = o.lazy(() => o.object({
+  key: o.string(),
+  label: o.string(),
+  icon: o.string().optional(),
+  badge: o.union([o.string(), o.number()]).optional(),
+  disabled: o.boolean().optional(),
+  selectable: o.boolean().optional(),
+  children: o.array(V).optional()
+})), C = o.object({
+  label: o.string(),
+  value: o.string(),
+  disabled: o.boolean().optional()
+}), Pe = C.extend({
+  description: o.string().optional()
+}), U = o.object({
+  key: o.string(),
+  label: o.string(),
+  width: o.string().optional(),
+  align: o.enum(["left", "center", "right"]).optional()
+}), _ = {
+  AppRoot: {
+    props: o.object({
+      modalScope: o.enum(["document", "app"]).optional()
+    }),
+    slots: ["default"],
+    description: 'Root of a DSM application. Use once around the application shell. Dialogs stay inside the app by default (modalScope "app"); "document" is only for full-page web/Portal apps.'
+  },
+  AppShell: {
+    props: o.object({
+      sidebarWidth: o.string().optional(),
+      minHeight: o.string().optional(),
+      responsive: o.boolean().optional(),
+      wideLayout: o.enum(["window", "web"]).optional()
+    }),
+    slots: ["default", "sidebar", "toolbar", "footer"],
+    description: 'DSM application interior with optional sidebar, toolbar, main content and footer regions. Set wideLayout "web" only for a standalone Portal page; DSM windows keep the default "window" at every width.'
+  },
+  ResponsiveView: {
+    props: o.object({ mode: o.enum(["auto", "mobile", "window", "web"]).optional() }),
+    slots: ["default", "mobile", "window", "web"],
+    description: 'Optionally replace a specialized element with a phone-friendly alternative. mobile/window/web slots follow AppShell container width (web only with AppShell wideLayout "web"); default is always the fallback.'
+  },
+  Page: {
+    props: o.object({
+      width: o.string().optional(),
+      surface: o.enum(["auto", "flat", "card"]).optional()
+    }),
+    slots: ["default"],
+    description: 'Page content area. Use width "fill" for data-heavy screens and "readable" for forms/settings.'
+  },
+  PageHeader: {
+    props: o.object({
+      title: o.string(),
+      description: o.string().optional()
+    }),
+    slots: ["actions"],
+    description: "Page heading with optional description and page-level actions."
+  },
+  Toolbar: {
+    props: o.object({ height: o.string().optional() }),
+    slots: ["default", "leading", "actions"],
+    description: "Application toolbar. Put primary page-independent actions in the actions slot."
+  },
+  SidebarNav: {
+    props: o.object({
+      value: o.string().optional(),
+      groups: o.array(o.object({
+        label: o.string().optional(),
+        items: o.array(V)
+      })),
+      searchable: o.boolean().optional(),
+      collapsible: o.boolean().optional(),
+      searchPlaceholder: o.string().optional()
+    }),
+    events: ["change"],
+    description: "DSM sidebar navigation. Icon values are names registered by the host application."
+  },
+  Tabs: {
+    props: o.object({
+      value: o.string(),
+      items: o.array(C),
+      ariaLabel: o.string().optional()
+    }),
+    events: ["change"],
+    description: "Section tabs for switching a local mode or filter. Bind value to state for two-way updates."
+  },
+  Stack: {
+    props: o.object({
+      direction: o.enum(["row", "column"]).optional(),
+      gap: o.enum(["none", "xs", "sm", "md", "lg"]).optional(),
+      align: o.enum(["start", "center", "end", "stretch"]).optional(),
+      justify: o.enum(["start", "center", "end", "between"]).optional(),
+      wrap: o.boolean().optional()
+    }),
+    slots: ["default"],
+    description: "Simple layout composition. Prefer semantic components first and use Stack only for local arrangement."
+  },
+  Text: {
+    props: o.object({
+      text: o.string(),
+      variant: o.enum(["body", "muted", "caption", "heading", "mono"]).optional()
+    }),
+    description: "Short application text. Do not use it when a semantic component already owns the label/description."
+  },
+  Button: {
+    props: o.object({
+      label: o.string(),
+      variant: o.enum(["primary", "secondary", "ghost", "danger"]).optional(),
+      size: o.enum(["sm", "md", "lg"]).optional(),
+      disabled: o.boolean().optional(),
+      loading: o.boolean().optional(),
+      icon: o.string().optional()
+    }),
+    events: ["press"],
+    description: "User action. Use one primary action per local task when possible. Icon is an optional host-registered icon name."
+  },
+  Input: {
+    props: o.object({
+      value: o.union([o.string(), o.number()]).optional(),
+      type: o.string().optional(),
+      placeholder: o.string().optional(),
+      disabled: o.boolean().optional(),
+      readonly: o.boolean().optional(),
+      invalid: o.boolean().optional(),
+      size: o.enum(["sm", "md", "lg"]).optional(),
+      ariaLabel: o.string().optional()
+    }),
+    events: ["change"],
+    description: "Single-line input. Use $bindState/$bindItem on value for editable state."
+  },
+  Select: {
+    props: o.object({
+      value: o.string().optional(),
+      options: o.array(C),
+      placeholder: o.string().optional(),
+      disabled: o.boolean().optional(),
+      search: o.boolean().optional()
+    }),
+    events: ["change"],
+    description: "Single-choice select. Use $bindState/$bindItem on value."
+  },
+  Checkbox: {
+    props: o.object({
+      checked: o.boolean().optional(),
+      label: o.string().optional(),
+      description: o.string().optional(),
+      disabled: o.boolean().optional()
+    }),
+    events: ["change"],
+    description: "Boolean choice. Use $bindState/$bindItem on checked."
+  },
+  Switch: {
+    props: o.object({
+      checked: o.boolean().optional(),
+      label: o.string().optional(),
+      disabled: o.boolean().optional()
+    }),
+    events: ["change"],
+    description: "Immediate on/off setting. Use $bindState/$bindItem on checked."
+  },
+  RadioGroup: {
+    props: o.object({
+      value: o.string().optional(),
+      options: o.array(Pe),
+      orientation: o.enum(["vertical", "horizontal"]).optional(),
+      disabled: o.boolean().optional()
+    }),
+    events: ["change"],
+    description: "Choose one of a small visible set of mutually-exclusive options."
+  },
+  Form: {
+    props: o.object({
+      direction: o.enum(["auto", "horizontal", "vertical"]).optional(),
+      fieldWidth: o.string().optional()
+    }),
+    slots: ["default"],
+    events: ["submit"],
+    description: "Form container. Put Field components inside and bind controls to state."
+  },
+  Field: {
+    props: o.object({
+      label: o.string(),
+      description: o.string().optional(),
+      help: o.string().optional(),
+      required: o.boolean().optional(),
+      fieldWidth: o.string().optional(),
+      direction: o.enum(["auto", "horizontal", "vertical"]).optional()
+    }),
+    slots: ["default"],
+    description: "Labeled form field for create/edit dialogs and forms."
+  },
+  SettingsSection: {
+    props: o.object({
+      title: o.string(),
+      collapsible: o.boolean().optional(),
+      open: o.boolean().optional()
+    }),
+    slots: ["default", "actions"],
+    events: ["openChange"],
+    description: "Section of related settings. Prefer this plus SettingsField for DSM settings pages."
+  },
+  SettingsField: {
+    props: o.object({
+      label: o.string(),
+      description: o.string().optional(),
+      required: o.boolean().optional(),
+      fieldWidth: o.string().optional(),
+      align: o.enum(["start", "center"]).optional()
+    }),
+    slots: ["default"],
+    description: "DSM settings row with label, description and one control/content region."
+  },
+  Surface: {
+    props: o.object({
+      padding: o.enum(["none", "sm", "md", "lg"]).optional(),
+      border: o.boolean().optional(),
+      raised: o.boolean().optional()
+    }),
+    slots: ["default"],
+    description: "Neutral bordered/raised content surface when Card semantics are not needed."
+  },
+  Card: {
+    props: o.object({
+      title: o.string().optional(),
+      layoutType: o.enum(["regular", "compact"]).optional(),
+      expandable: o.boolean().optional(),
+      expanded: o.boolean().optional(),
+      footerAlign: o.enum(["start", "end", "between"]).optional()
+    }),
+    slots: ["default", "header-actions", "footer"],
+    events: ["expandedChange"],
+    description: "Grouped content with optional header/actions/footer. Do not use a Card just to add spacing."
+  },
+  Callout: {
+    props: o.object({
+      tone: o.enum(["info", "success", "warning", "danger"]).optional(),
+      title: o.string().optional(),
+      closable: o.boolean().optional()
+    }),
+    slots: ["default", "actions"],
+    events: ["close"],
+    description: "Inline information, success, warning or error message."
+  },
+  EmptyState: {
+    props: o.object({
+      title: o.string(),
+      description: o.string().optional(),
+      icon: o.string().optional()
+    }),
+    slots: ["actions"],
+    description: "Empty/no-results state with optional recovery or create actions."
+  },
+  Progress: {
+    props: o.object({
+      value: o.number().optional(),
+      max: o.number().optional(),
+      label: o.string().optional(),
+      valueLabel: o.string().optional()
+    }),
+    description: "Linear determinate progress. Domain-specific progress visualizations should be custom components."
+  },
+  Badge: {
+    props: o.object({
+      text: o.string(),
+      tone: o.enum(["neutral", "info", "success", "warning", "danger"]).optional()
+    }),
+    description: "Short status/category badge."
+  },
+  Dialog: {
+    props: o.object({
+      open: o.boolean().optional(),
+      title: o.string().optional(),
+      description: o.string().optional(),
+      width: o.string().optional(),
+      showClose: o.boolean().optional()
+    }),
+    slots: ["default", "footer"],
+    events: ["openChange"],
+    description: "Modal task/dialog. Bind open to state. Put confirmation or form actions in footer."
+  },
+  DataTable: {
+    props: o.object({
+      columns: o.array(U),
+      rows: o.array(o.record(o.string(), o.unknown())),
+      rowKey: o.string().optional(),
+      emptyText: o.string().optional(),
+      compact: o.boolean().optional(),
+      mobileView: o.enum(["auto", "cards", "table"]).optional()
+    }),
+    description: "Simple resource table where cells display scalar row fields. Use an app extension component for rich/custom cells and row actions."
+  },
+  ResourceList: {
+    props: o.object({
+      columns: o.array(U),
+      rows: o.array(o.record(o.string(), o.unknown())),
+      rowKey: o.string().optional(),
+      emptyText: o.string().optional(),
+      compact: o.boolean().optional(),
+      mobileView: o.enum(["auto", "cards", "table"]).optional()
+    }),
+    slots: ["toolbar"],
+    description: "Common resource collection pattern: optional toolbar plus a simple table. For domain-specific row rendering, extend the catalog with a custom list/table component."
+  },
+  Loading: {
+    props: o.object({ text: o.string().optional() }),
+    description: "Centered loading state for a page or bounded region."
+  }
+}, A = z(H, {
+  components: _,
+  actions: {}
+}), Ce = [
+  "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.",
+  "Use host-declared actions for side effects. Never encode fetch, timers, filesystem operations, or business logic as UI expressions.",
+  "If a domain view needs custom rendering or behavior (for example a treemap, terminal, rich download row, NAS path picker), use a host extension component instead of forcing it into generic components.",
+  "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.';
+function rt() {
+  return `${A.prompt({ customRules: Ce })}
+
+${ke}
+`;
+}
+const Re = {
+  none: "0",
+  xs: "var(--ui-space-1)",
+  sm: "var(--ui-space-2)",
+  md: "var(--ui-space-3)",
+  lg: "var(--ui-space-4)"
+}, Ke = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch" }, Ie = { start: "flex-start", center: "center", end: "flex-end", between: "space-between" };
+function Ue(e) {
+  return { default: () => e };
+}
+function k(e) {
+  return e ? Ae(e) : void 0;
+}
+function T(e) {
+  return {
+    ...e,
+    icon: k(e.icon),
+    children: e.children?.map(T)
+  };
+}
+function De(e) {
+  return e.map((t) => ({ ...t, items: t.items.map(T) }));
+}
+const Le = {
+  AppRoot: ({ props: e, slots: t }) => d(xe, { modalScope: e.modalScope }, t),
+  AppShell: ({ props: e, slots: t }) => d(Oe, {
+    sidebarWidth: e.sidebarWidth,
+    minHeight: e.minHeight,
+    responsive: e.responsive,
+    wideLayout: e.wideLayout
+  }, t),
+  ResponsiveView: ({ props: e, slots: t }) => d(je, { mode: e.mode }, t),
+  Page: ({ props: e, slots: t }) => d(Se, { width: e.width ?? "fill", surface: e.surface }, t),
+  PageHeader: ({ props: e, slots: t }) => d($e, e, t),
+  Toolbar: ({ props: e, slots: t }) => d(ve, e, t),
+  SidebarNav: ({ props: e, bindings: t, emit: n }) => {
+    const [s, i] = b(e.value, t?.value);
+    return d(we, {
+      modelValue: s,
+      groups: De(e.groups),
+      searchable: e.searchable,
+      collapsible: e.collapsible,
+      searchPlaceholder: e.searchPlaceholder,
+      "onUpdate:modelValue": (a) => {
+        i(a), n("change");
+      }
+    });
+  },
+  Tabs: ({ props: e, bindings: t, emit: n }) => {
+    const [s, i] = b(e.value, t?.value);
+    return d(ye, {
+      modelValue: s ?? "",
+      items: e.items,
+      ariaLabel: e.ariaLabel,
+      "onUpdate:modelValue": (a) => {
+        i(a), n("change");
+      }
+    });
+  },
+  Stack: ({ props: e, children: t }) => d("div", {
+    "data-syno-ui": "",
+    style: {
+      display: "flex",
+      flexDirection: e.direction ?? "column",
+      gap: Re[e.gap ?? "md"],
+      alignItems: Ke[e.align ?? "stretch"],
+      justifyContent: Ie[e.justify ?? "start"],
+      flexWrap: e.wrap ? "wrap" : "nowrap"
+    }
+  }, t),
+  Text: ({ props: e }) => {
+    const t = e.variant ?? "body";
+    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);
+    return d(be, {
+      variant: e.variant,
+      size: e.size,
+      disabled: e.disabled,
+      loading: e.loading,
+      onClick: () => t("press")
+    }, {
+      default: () => [n ? d(n, { class: "size-4", "aria-hidden": "true" }) : null, e.label]
+    });
+  },
+  Input: ({ props: e, bindings: t, emit: n }) => {
+    const [s, i] = b(e.value, t?.value);
+    return d(ge, {
+      modelValue: s,
+      type: e.type,
+      placeholder: e.placeholder,
+      disabled: e.disabled,
+      readonly: e.readonly,
+      invalid: e.invalid,
+      size: e.size,
+      ariaLabel: e.ariaLabel,
+      "onUpdate:modelValue": (a) => {
+        i(e.type === "number" && a !== "" ? Number(a) : a), n("change");
+      }
+    });
+  },
+  Select: ({ props: e, bindings: t, emit: n }) => {
+    const [s, i] = b(e.value, t?.value);
+    return d(fe, {
+      modelValue: s,
+      options: e.options,
+      placeholder: e.placeholder,
+      disabled: e.disabled,
+      search: e.search,
+      "onUpdate:modelValue": (a) => {
+        i(a), n("change");
+      }
+    });
+  },
+  Checkbox: ({ props: e, bindings: t, emit: n }) => {
+    const [s, i] = b(e.checked, t?.checked);
+    return d(he, {
+      modelValue: s ?? !1,
+      label: e.label,
+      description: e.description,
+      disabled: e.disabled,
+      "onUpdate:modelValue": (a) => {
+        i(a), n("change");
+      }
+    });
+  },
+  Switch: ({ props: e, bindings: t, emit: n }) => {
+    const [s, i] = b(e.checked, t?.checked);
+    return d(me, {
+      modelValue: s ?? !1,
+      label: e.label,
+      disabled: e.disabled,
+      "onUpdate:modelValue": (a) => {
+        i(a), n("change");
+      }
+    });
+  },
+  RadioGroup: ({ props: e, bindings: t, emit: n }) => {
+    const [s, i] = b(e.value, t?.value);
+    return d(ue, {
+      modelValue: s,
+      options: e.options,
+      orientation: e.orientation,
+      disabled: e.disabled,
+      "onUpdate:modelValue": (a) => {
+        i(a), n("change");
+      }
+    });
+  },
+  Form: ({ props: e, slots: t, emit: n }) => d(pe, {
+    direction: e.direction,
+    fieldWidth: e.fieldWidth,
+    onSubmit: () => n("submit")
+  }, t),
+  Field: ({ props: e, slots: t }) => d(de, {
+    label: e.label,
+    description: e.description,
+    help: e.help,
+    requiredMark: e.required,
+    fieldWidth: e.fieldWidth,
+    direction: e.direction
+  }, t),
+  SettingsSection: ({ props: e, bindings: t, slots: n, emit: s }) => {
+    const [i, a] = b(e.open, t?.open);
+    return d(ce, {
+      title: e.title,
+      collapsible: e.collapsible,
+      open: i,
+      "onUpdate:open": (r) => {
+        a(r), s("openChange");
+      }
+    }, n);
+  },
+  SettingsField: ({ props: e, slots: t }) => d(le, {
+    label: e.label,
+    description: e.description,
+    required: e.required,
+    fieldWidth: e.fieldWidth,
+    align: e.align
+  }, t),
+  Surface: ({ props: e, slots: t }) => d(re, e, t),
+  Card: ({ props: e, bindings: t, slots: n, emit: s }) => {
+    const [i, a] = b(e.expanded, t?.expanded);
+    return d(ae, {
+      title: e.title,
+      layoutType: e.layoutType,
+      expandable: e.expandable,
+      expanded: i,
+      footerAlign: e.footerAlign,
+      "onUpdate:expanded": (r) => {
+        a(r), s("expandedChange");
+      }
+    }, n);
+  },
+  Callout: ({ props: e, slots: t, emit: n }) => d(se, {
+    tone: e.tone,
+    title: e.title,
+    closable: e.closable,
+    onClose: () => n("close")
+  }, t),
+  EmptyState: ({ props: e, slots: t }) => d(ie, {
+    title: e.title,
+    description: e.description,
+    icon: k(e.icon)
+  }, t),
+  Progress: ({ props: e }) => d(ne, e),
+  Badge: ({ props: e }) => d(oe, { tone: e.tone }, Ue(e.text)),
+  Dialog: ({ props: e, bindings: t, slots: n, emit: s }) => {
+    const [i, a] = b(e.open, t?.open);
+    return d(te, {
+      open: i ?? !1,
+      title: e.title,
+      description: e.description,
+      width: e.width,
+      showClose: e.showClose,
+      "onUpdate:open": (r) => {
+        a(r), s("openChange");
+      }
+    }, n);
+  },
+  DataTable: ({ props: e }) => d(I, e),
+  ResourceList: ({ props: e, slots: t }) => d("section", { class: "min-w-0", "data-syno-ui": "", "data-ui-resource-list": "" }, [
+    t.toolbar ? d("div", { class: "mb-3 flex flex-wrap items-center gap-2" }, t.toolbar()) : null,
+    d(I, e)
+  ]),
+  Loading: ({ props: e }) => d(ee, { text: e.text })
+}, { registry: D } = B(A, {
+  components: Le
+}), lt = /* @__PURE__ */ G({
+  __name: "SynoJsonRenderer",
+  props: {
+    spec: {},
+    store: {},
+    state: {},
+    handlers: {},
+    navigate: { type: Function },
+    functions: {},
+    directives: {},
+    validationFunctions: {},
+    onStateChange: { type: Function },
+    loading: { type: Boolean },
+    fallback: {}
+  },
+  setup(e) {
+    return (t, n) => (X(), Y(j(M), {
+      registry: j(D),
+      store: e.store,
+      "initial-state": e.state ?? e.spec?.state ?? {},
+      handlers: e.handlers,
+      navigate: e.navigate,
+      functions: e.functions,
+      directives: e.directives,
+      "validation-functions": e.validationFunctions,
+      "on-state-change": e.onStateChange
+    }, {
+      default: Q(() => [
+        Z(j(W), {
+          spec: e.spec,
+          registry: j(D),
+          loading: e.loading,
+          fallback: e.fallback
+        }, null, 8, ["spec", "registry", "loading", "fallback"])
+      ]),
+      _: 1
+    }, 8, ["registry", "store", "initial-state", "handlers", "navigate", "functions", "directives", "validation-functions", "on-state-change"]));
+  }
+}), Ee = ["label", "title", "description", "text", "placeholder", "emptyText", "help", "ariaLabel", "valueLabel", "searchPlaceholder"];
+function q(e, t = "") {
+  return Array.isArray(e) ? e : Object.entries(e).flatMap(([n, s]) => m(s) ? q(s, `${t}${n}.`) : [`${t}${n}`]);
+}
+const m = (e) => typeof e == "object" && e !== null && !Array.isArray(e), u = (...e) => e.map((t) => "/" + String(t).replaceAll("~", "~0").replaceAll("/", "~1")).join("");
+function Ne(e, t) {
+  const n = Array.from({ length: t.length + 1 }, (s, i) => i);
+  for (let s = 1; s <= e.length; s++) {
+    let i = n[0];
+    n[0] = s;
+    for (let a = 1; a <= t.length; a++) {
+      const r = n[a];
+      n[a] = Math.min(n[a] + 1, n[a - 1] + 1, i + (e[s - 1].toLowerCase() === t[a - 1].toLowerCase() ? 0 : 1)), i = r;
+    }
+  }
+  return n[t.length];
+}
+function y(e, t) {
+  let n, s = 1 / 0;
+  for (const i of t) {
+    const a = Ne(e, i);
+    a < s && ([n, s] = [i, a]);
+  }
+  return n !== void 0 && s <= Math.max(2, Math.floor(e.length / 3)) ? n : void 0;
+}
+const Je = ["$state", "$item", "$index", "$bindState", "$bindItem", "$cond", "$computed", "$template"], Ve = (e) => m(e) && Je.some((t) => Object.hasOwn(e, t)), R = (e) => Ve(e) || (Array.isArray(e) ? e.some(R) : m(e) && Object.values(e).some(R));
+function P(e) {
+  const t = e.props?.shape;
+  return m(t) ? t : void 0;
+}
+const K = (e) => e.safeParse(void 0).success;
+function _e(e) {
+  if (e.code === "invalid_value") return `Use one of: ${e.values.map((t) => JSON.stringify(t)).join(", ")}.`;
+  if (e.code === "invalid_type") return `Expected ${e.expected}.`;
+}
+const v = (e, t) => `${e}: ${t.join(", ")}`;
+class Te {
+  errors = [];
+  warnings = [];
+  error(t) {
+    this.errors.push({ severity: "error", ...t });
+  }
+  warn(t) {
+    this.warnings.push({ severity: "warning", ...t });
+  }
+}
+function ct(e, t = {}) {
+  const n = t.catalog ?? A, s = n.data.components, i = new Te();
+  if (!m(e))
+    return i.error({ code: "invalid_spec", path: "", message: "A spec must be a JSON object.", hint: 'Return {"root": "<key>", "elements": {...}, "state": {...}}.' }), E(i);
+  const a = m(e.elements) ? e.elements : void 0;
+  a || i.error({ code: "invalid_elements", path: "/elements", message: '"elements" must be an object keyed by element id.', hint: 'Use a flat map: {"elements": {"root": {"type": "AppRoot", "props": {}, "children": []}}}.' });
+  const r = Object.keys(a ?? {});
+  typeof e.root != "string" || e.root === "" ? i.error({ code: "missing_root", path: "/root", message: '"root" must name the top element.', hint: r.length ? v('Set "root" to one of', r) : 'Add "root" and the element it names.' }) : a && !Object.hasOwn(a, e.root) && i.error({ code: "root_not_found", path: "/root", message: `Root "${e.root}" is not in "elements".`, hint: v("Existing element keys", r) });
+  for (const [p, f] of Object.entries(a ?? {})) {
+    const w = (...g) => u("elements", p, ...g);
+    if (!m(f)) {
+      i.error({ code: "invalid_element", path: w(), elementKey: p, message: 'An element must be an object with "type", "props" and "children".' });
+      continue;
+    }
+    const h = f.type;
+    if (typeof h != "string" || !Object.hasOwn(s, h)) {
+      const g = typeof h == "string" ? y(h, Object.keys(s)) : void 0;
+      i.error({
+        code: "unknown_component",
+        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.'
+      });
+      continue;
+    }
+    qe(i, p, h, s[h], f.props), Fe(i, p, h, s[h], f, a);
+  }
+  const c = t.messages && q(t.messages), l = {
+    issues: i,
+    components: s,
+    actions: [
+      ...(n.schema?.builtInActions ?? []).map((p) => p.name),
+      ...Object.keys(n.data.actions ?? {}),
+      ...t.actions ?? []
+    ],
+    state: { ...t.state, ...m(e.state) ? e.state : {} },
+    // A message catalog implies the host registers the `t` function.
+    functions: t.functions || c ? [...t.functions ?? [], ...c ? ["t"] : []] : void 0,
+    messageKeys: c
+  };
+  return a && typeof e.root == "string" && Object.hasOwn(a, e.root) && ze(l, e.root, a), E(i);
+}
+function qe(e, t, n, s, i) {
+  const a = (...l) => u("elements", t, "props", ...l);
+  if (!m(i)) {
+    e.error({ code: "invalid_props", path: a(), elementKey: t, message: '"props" must be an object.', hint: 'Use "props": {} when the component needs none.' });
+    return;
+  }
+  const r = P(s);
+  if (!r) return;
+  const c = Object.keys(r);
+  for (const [l, p] of Object.entries(i)) {
+    const f = r[l];
+    if (!f) {
+      const h = y(l, c);
+      e.error({
+        code: "unknown_prop",
+        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)
+      });
+      continue;
+    }
+    if (R(p)) continue;
+    const w = f.safeParse(p);
+    if (!w.success)
+      for (const h of w.error.issues)
+        e.error({
+          code: "invalid_prop",
+          path: a(l, ...h.path.map((g) => String(g))),
+          elementKey: t,
+          message: `${n}.${l}: ${h.message}`,
+          hint: _e(h)
+        });
+  }
+  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.` });
+}
+function F(e, t) {
+  const n = [];
+  if (Array.isArray(t.children) && t.children.forEach((s, i) => {
+    typeof s == "string" && n.push({ child: s, path: u("elements", e, "children", i) });
+  }), m(t.slots))
+    for (const [s, i] of Object.entries(t.slots))
+      Array.isArray(i) && i.forEach((a, r) => {
+        typeof a == "string" && n.push({ child: a, path: u("elements", e, "slots", s, r) });
+      });
+  return n;
+}
+function Fe(e, t, n, s, i, a) {
+  const r = s.slots ?? [], { children: c } = i;
+  if (c !== void 0 && !(Array.isArray(c) && c.every((l) => typeof l == "string")) ? e.error({ code: "invalid_children", path: u("elements", t, "children"), elementKey: t, message: '"children" must be an array of element keys.' }) : c?.length && !r.includes("default") && e.error({
+    code: "children_not_allowed",
+    path: u("elements", t, "children"),
+    elementKey: t,
+    message: `${n} does not render children.`,
+    hint: r.length ? v(`Put them in a named slot of ${n}`, r) : 'Use "children": [] and put the content in a sibling or parent container.'
+  }), i.slots !== void 0)
+    if (!m(i.slots))
+      e.error({ code: "invalid_slots", path: u("elements", t, "slots"), elementKey: t, message: '"slots" must map slot names to arrays of element keys.' });
+    else
+      for (const [l, p] of Object.entries(i.slots))
+        if (r.includes(l))
+          Array.isArray(p) || e.error({ code: "invalid_slots", path: u("elements", t, "slots", l), elementKey: t, message: `Slot "${l}" must be an array of element keys.` });
+        else {
+          const f = y(l, r);
+          e.error({
+            code: "unknown_slot",
+            path: u("elements", t, "slots", l),
+            elementKey: t,
+            message: `${n} has no slot "${l}".`,
+            hint: f ? `Did you mean "${f}"?` : r.length ? v(`${n} slots`, r) : `${n} has no slots.`
+          });
+        }
+  for (const l of F(t, i))
+    if (!Object.hasOwn(a, l.child)) {
+      const p = y(l.child, Object.keys(a));
+      e.error({
+        code: "missing_child",
+        path: l.path,
+        elementKey: t,
+        message: `"${l.child}" is not in "elements".`,
+        hint: p ? `Did you mean "${p}"? Otherwise add the element.` : "Add the element or remove the reference."
+      });
+    }
+}
+function ze(e, t, n) {
+  const { issues: s } = e, i = /* @__PURE__ */ new Set(), a = (r, c, l, p) => {
+    const f = n[r];
+    if (!m(f)) return;
+    i.add(r);
+    const w = m(f.repeat);
+    He(e, r, f, p || w);
+    const h = f.type === "AppRoot";
+    h && l && s.error({ code: "nested_app_root", path: u("elements", r), elementKey: r, message: "AppRoot cannot be nested inside another AppRoot.", hint: "Use a single AppRoot at the top of the spec." });
+    for (const g of F(r, f))
+      if (Object.hasOwn(n, g.child)) {
+        if (c.includes(g.child)) {
+          s.error({ code: "cycle", path: g.path, elementKey: r, message: `"${g.child}" is its own ancestor.`, hint: "Element references must form a tree." });
+          continue;
+        }
+        a(g.child, [...c, g.child], l || h, p || w);
+      }
+  };
+  a(t, [t], !1, !1);
+  for (const r of Object.keys(n))
+    i.has(r) || s.warn({ code: "orphaned_element", path: u("elements", r), elementKey: r, message: `"${r}" is not reachable from the root.`, hint: "Reference it from a parent or delete it." });
+}
+function Be(e, t) {
+  let n = e;
+  for (const s of t.split("/").slice(1)) {
+    const i = s.replaceAll("~1", "/").replaceAll("~0", "~");
+    if (Array.isArray(n) && /^\d+$/.test(i)) n = n[Number(i)];
+    else if (m(n) && Object.hasOwn(n, i)) n = n[i];
+    else return { found: !1 };
+  }
+  return { found: !0, value: n };
+}
+function $(e, t, n, s, { mustExist: i }) {
+  if (typeof n != "string" || !n.startsWith("/")) {
+    e.issues.error({
+      code: "invalid_state_path",
+      path: s,
+      elementKey: t,
+      message: `State paths are JSON Pointers; got ${JSON.stringify(n)}.`,
+      hint: typeof n == "string" ? `Use "/${n.replace(/^\.?\/?/, "").replaceAll(".", "/")}".` : 'Use a string such as "/settings/enabled".'
+    });
+    return;
+  }
+  i && !Be(e.state, n).found && e.issues.warn({
+    code: "state_path_missing",
+    path: s,
+    elementKey: t,
+    message: `State "${n}" has no initial value.`,
+    hint: `Seed it in the spec's "state", or pass the host state with --state, so the first render has a value.`
+  });
+}
+function S(e, t, n, s, i) {
+  if (Array.isArray(n)) {
+    n.forEach((a, r) => S(e, t, a, s + u(r), i));
+    return;
+  }
+  if (m(n)) {
+    for (const a of ["$state", "$bindState"])
+      Object.hasOwn(n, a) && $(e, t, n[a], s + u(a), { mustExist: !0 });
+    for (const a of ["$item", "$bindItem", "$index"])
+      Object.hasOwn(n, a) && !i && e.issues.error({
+        code: "item_outside_repeat",
+        path: s + u(a),
+        elementKey: t,
+        message: `${a} only works inside an element with "repeat" or its descendants.`,
+        hint: 'Add "repeat": {"statePath": "/list"} to an ancestor, or read the value with $state.'
+      });
+    if (typeof n.$template == "string")
+      for (const a of n.$template.matchAll(/\$\{([^}]*)\}/g))
+        $(e, t, a[1], s + u("$template"), { mustExist: !0 });
+    typeof n.$computed == "string" && Me(e, t, n, s);
+    for (const [a, r] of Object.entries(n))
+      ["$state", "$bindState", "$item", "$bindItem", "$index", "$template"].includes(a) || S(e, t, r, s + u(a), i);
+  }
+}
+function Me(e, t, n, s) {
+  const i = n.$computed;
+  if (!e.functions)
+    e.issues.warn({
+      code: "unverified_function",
+      path: s + u("$computed"),
+      elementKey: t,
+      message: `$computed "${i}" must be registered by the host.`,
+      hint: `Pass the host function names with --functions ${i} to verify it.`
+    });
+  else if (!e.functions.includes(i)) {
+    const r = y(i, e.functions);
+    e.issues.error({
+      code: "unknown_function",
+      path: s + u("$computed"),
+      elementKey: t,
+      message: `$computed "${i}" is not a host function.`,
+      hint: `${r ? `Did you mean "${r}"? ` : ""}${v("Host functions", e.functions)}`
+    });
+  }
+  if (i !== "t" || !e.messageKeys) return;
+  const a = m(n.args) ? n.args.key : void 0;
+  if (typeof a != "string" || !e.messageKeys.includes(a)) {
+    const r = typeof a == "string" ? y(a, e.messageKeys) : void 0;
+    e.issues.error({
+      code: "missing_i18n_key",
+      path: s + u("args", "key"),
+      elementKey: t,
+      message: `Message key ${JSON.stringify(a)} is not in the message catalog.`,
+      hint: r ? `Did you mean "${r}"? Otherwise add the key to every locale.` : "Add the key to every locale, or use an existing key."
+    });
+  }
+}
+const We = ["statePath", "clearStatePath"];
+function He(e, t, n, s) {
+  const i = (...c) => u("elements", t, ...c);
+  if (S(e, t, n.props, i("props"), s), e.messageKeys && m(n.props))
+    for (const c of Ee) {
+      const l = n.props[c];
+      typeof l == "string" && l.trim() && e.issues.warn({
+        code: "literal_text",
+        path: i("props", c),
+        elementKey: t,
+        message: `Literal text ${JSON.stringify(l)} is not localized.`,
+        hint: 'Use {"$computed": "t", "args": {"key": "<message key>"}}.'
+      });
+    }
+  n.visible !== void 0 && S(e, t, n.visible, i("visible"), s), m(n.repeat) && $(e, t, n.repeat.statePath, i("repeat", "statePath"), { mustExist: !0 });
+  const a = typeof n.type == "string" ? n.type : "", r = e.components[a]?.events ?? [];
+  if (m(n.on))
+    for (const [c, l] of Object.entries(n.on)) {
+      if (!r.includes(c)) {
+        const p = y(c, r);
+        e.issues.error({
+          code: "unknown_event",
+          path: i("on", c),
+          elementKey: t,
+          message: `${a} does not emit "${c}".`,
+          hint: p ? `Did you mean "${p}"?` : r.length ? v(`${a} events`, r) : `${a} emits no events.`
+        });
+      }
+      L(e, t, l, i("on", c), s);
+    }
+  if (m(n.watch))
+    for (const [c, l] of Object.entries(n.watch))
+      $(e, t, c, i("watch", c), { mustExist: !1 }), L(e, t, l, i("watch", c), s);
+}
+function L(e, t, n, s, i) {
+  (Array.isArray(n) ? n : [n]).forEach((r, c) => {
+    const l = Array.isArray(n) ? s + u(c) : s;
+    if (!m(r) || typeof r.action != "string") {
+      e.issues.error({ code: "invalid_action_binding", path: l, elementKey: t, message: 'An action binding is {"action": "<name>", "params": {...}}.' });
+      return;
+    }
+    if (!e.actions.includes(r.action)) {
+      const p = y(r.action, e.actions);
+      e.issues.error({
+        code: "unknown_action",
+        path: l + u("action"),
+        elementKey: t,
+        message: `Action "${r.action}" is not declared.`,
+        hint: `${p ? `Did you mean "${p}"? ` : ""}Declare it in the app catalog, or pass host handlers with --actions ${r.action}. ${v("Known actions", e.actions)}`
+      });
+    }
+    if (m(r.params)) {
+      for (const p of We)
+        Object.hasOwn(r.params, p) && $(e, t, r.params[p], l + u("params", p), { mustExist: !1 });
+      S(e, t, r.params, l + u("params"), i);
+    }
+  });
+}
+function E(e) {
+  return { valid: e.errors.length === 0, errors: e.errors, warnings: e.warnings };
+}
+const O = _;
+function Ge(e) {
+  const t = o.toJSONSchema(e);
+  return delete t.$schema, t;
+}
+function Xe(e) {
+  if (Array.isArray(e.enum)) return e.enum[0];
+  switch (e.type) {
+    case "string":
+      return "…";
+    case "number":
+    case "integer":
+      return 0;
+    case "boolean":
+      return !1;
+    case "array":
+      return [];
+    default:
+      return {};
+  }
+}
+function dt() {
+  return Object.entries(O).map(([e, t]) => ({
+    name: e,
+    description: t.description,
+    required: Object.entries(P(t) ?? {}).filter(([, n]) => !K(n)).map(([n]) => n),
+    slots: t.slots ?? [],
+    events: t.events ?? []
+  }));
+}
+function pt(e) {
+  return y(e, Object.keys(O));
+}
+function ut(e) {
+  if (!Object.hasOwn(O, e)) return;
+  const t = O[e], n = Object.fromEntries(Object.entries(P(t) ?? {}).map(([s, i]) => [
+    s,
+    { required: !K(i), schema: Ge(i) }
+  ]));
+  return {
+    name: e,
+    description: t.description,
+    props: n,
+    slots: t.slots ?? [],
+    events: t.events ?? [],
+    example: {
+      type: e,
+      props: Object.fromEntries(Object.entries(n).filter(([, s]) => s.required).map(([s, { schema: i }]) => [s, Xe(i)])),
+      children: []
+    }
+  };
+}
+const x = { type: "string", pattern: "^/" }, Ye = {
+  description: "A json-render expression resolved at render time.",
+  anyOf: [
+    { type: "object", required: ["$state"], properties: { $state: x } },
+    { type: "object", required: ["$bindState"], properties: { $bindState: x } },
+    { type: "object", required: ["$item"], properties: { $item: { type: "string" } } },
+    { type: "object", required: ["$bindItem"], properties: { $bindItem: { type: "string" } } },
+    { type: "object", required: ["$index"], properties: { $index: { const: !0 } } },
+    { type: "object", required: ["$template"], properties: { $template: { type: "string" } } },
+    { type: "object", required: ["$computed"], properties: { $computed: { type: "string" }, args: { type: "object" } } },
+    { type: "object", required: ["$cond", "$then", "$else"], properties: { $cond: {}, $then: {}, $else: {} } }
+  ]
+}, Qe = {
+  type: "object",
+  required: ["action"],
+  properties: {
+    action: { type: "string" },
+    params: { type: "object" },
+    confirm: { type: "object" },
+    onSuccess: { type: "object" },
+    onError: { type: "object" },
+    preventDefault: { type: "boolean" }
+  },
+  additionalProperties: !1
+}, N = { anyOf: [{ $ref: "#/$defs/actionBinding" }, { type: "array", items: { $ref: "#/$defs/actionBinding" } }] }, J = { type: "array", items: { type: "string" } };
+function Ze(e, t, n) {
+  const s = (r) => Array.isArray(r) ? r.map(s) : !r || typeof r != "object" ? r : Object.fromEntries(Object.entries(r).map(([c, l]) => [
+    c,
+    c === "$ref" && typeof l == "string" ? l.replace("#/$defs/", `#/$defs/${t}`) : s(l)
+  ])), { $defs: i, ...a } = e;
+  delete a.$schema;
+  for (const [r, c] of Object.entries(i ?? {})) n[t + r] = s(c);
+  return s(a);
+}
+function et(e, t, n) {
+  const s = P(t), i = t.slots ?? [];
+  let a = { type: "object" };
+  if (s) {
+    const r = Ze(o.toJSONSchema(o.object(s)), `${e}__`, n), c = r.properties;
+    a = {
+      ...r,
+      properties: Object.fromEntries(Object.entries(c).map(([l, p]) => [
+        l,
+        { anyOf: [p, { $ref: "#/$defs/expression" }] }
+      ]))
+    }, r.required?.length || delete a.required;
+  }
+  return {
+    if: { properties: { type: { const: e } } },
+    then: {
+      ...t.description ? { description: t.description } : {},
+      properties: {
+        props: a,
+        ...i.includes("default") ? {} : { children: { maxItems: 0 } },
+        slots: { propertyNames: { enum: i.filter((r) => r !== "default") } },
+        on: { propertyNames: { enum: t.events ?? [] } }
+      }
+    }
+  };
+}
+function mt(e = A) {
+  const t = e.data.components, n = { expression: Ye, actionBinding: Qe }, s = Object.entries(t).map(([i, a]) => et(i, a, n));
+  return n.element = {
+    type: "object",
+    required: ["type", "props"],
+    properties: {
+      type: { enum: Object.keys(t) },
+      props: { type: "object" },
+      children: J,
+      slots: { type: "object", additionalProperties: J },
+      visible: {},
+      on: { type: "object", additionalProperties: N },
+      watch: { type: "object", propertyNames: x, additionalProperties: N },
+      repeat: { type: "object", required: ["statePath"], properties: { statePath: x, key: { type: "string" } }, additionalProperties: !1 }
+    },
+    additionalProperties: !1,
+    allOf: s
+  }, {
+    $schema: "https://json-schema.org/draft/2020-12/schema",
+    title: "Synology Package Land JSON UI spec",
+    type: "object",
+    required: ["root", "elements"],
+    properties: {
+      root: { type: "string", minLength: 1 },
+      elements: { type: "object", additionalProperties: { $ref: "#/$defs/element" } },
+      state: { type: "object" }
+    },
+    additionalProperties: !1,
+    $defs: n
+  };
+}
+export {
+  $t as ActionProvider,
+  St as JSONUIProvider,
+  jt as Renderer,
+  Ot as StateProvider,
+  lt as SynoJsonRenderer,
+  xt as ValidationProvider,
+  At as VisibilityProvider,
+  pt as closestSynoJsonComponent,
+  yt as createStateStore,
+  wt as defineCatalog,
+  Pt as defineRegistry,
+  ut as describeSynoJsonComponent,
+  It as jsonRenderVueSchema,
+  dt as listSynoJsonComponents,
+  rt as synoJsonAiPrompt,
+  Ce as synoJsonAiRules,
+  A as synoJsonCatalog,
+  _ as synoJsonComponentDefinitions,
+  D as synoJsonRegistry,
+  Le as synoJsonRenderers,
+  mt as synoJsonSchema,
+  Ct as useActions,
+  kt as useBoundProp,
+  Rt as useStateStore,
+  ct as validateSynoJsonSpec,
+  gt as z
+};