@synopackageland/ui 0.9.4 → 0.9.6

package/dist/json.js

@@ -1,324 +1,359 @@
-import { z as o } from "zod";
-import { z as gt } from "zod";
+import { z as t } from "zod";
+import { z as vt } from "zod";
 import { defineCatalog as z } from "@json-render/core";
-import { createStateStore as yt, defineCatalog as wt } from "@json-render/core";
+import { createStateStore as St, defineCatalog as jt } 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 kt, useBoundProp as Ct, useStateStore as Rt } from "@json-render/vue";
+import { ActionProvider as Ot, JSONUIProvider as At, Renderer as Pt, StateProvider as kt, ValidationProvider as Ct, VisibilityProvider as It, defineRegistry as Rt, useActions as Kt, useBoundProp as Lt, useStateStore as Ut } from "@json-render/vue";
 import { schema as H } from "@json-render/vue/schema";
-import { schema as It } from "@json-render/vue/schema";
+import { schema as Tt } 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()
-})), k = o.object({
-  label: o.string(),
-  value: o.string(),
-  disabled: o.boolean().optional()
-}), Pe = k.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()
-}), _ = {
+import { LoadingArea as ee, InputGroup as te, ListItem as oe, CellStatus as ne, CellText as ie, DataTable as K, Dialog as se, Badge as ae, Progress as re, EmptyState as le, Callout as ce, Card as de, Surface as pe, SettingsRow as ue, SettingsSection as me, FormItem as he, Form as fe, RadioGroup as ge, Switch as be, Checkbox as ye, Select as we, Input as ve, Button as $e, SectionTabs as Se, AppSidebar as je, AppToolbar as xe, PageHeader as Oe, PageContent as Ae, ResponsiveView as Pe, AppLayout as ke, AppRoot as Ce, getRegisteredIcon as Ie } from "./index.js";
+const J = t.lazy(() => t.object({
+  key: t.string(),
+  label: t.string(),
+  icon: t.string().optional(),
+  badge: t.union([t.string(), t.number()]).optional(),
+  disabled: t.boolean().optional(),
+  selectable: t.boolean().optional(),
+  children: t.array(J).optional()
+})), k = t.object({
+  label: t.string(),
+  value: t.string(),
+  disabled: t.boolean().optional()
+}), Re = k.extend({
+  description: t.string().optional()
+}), L = t.object({
+  key: t.string(),
+  label: t.string(),
+  width: t.string().optional(),
+  align: t.enum(["left", "center", "right"]).optional()
+}), V = {
   AppRoot: {
-    props: o.object({
-      modalScope: o.enum(["document", "app"]).optional()
+    props: t.object({
+      modalScope: t.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()
+    props: t.object({
+      sidebarWidth: t.string().optional(),
+      minHeight: t.string().optional(),
+      responsive: t.boolean().optional(),
+      wideLayout: t.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() }),
+    props: t.object({ mode: t.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()
+    props: t.object({
+      width: t.string().optional(),
+      surface: t.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()
+    props: t.object({
+      title: t.string(),
+      description: t.string().optional()
     }),
-    slots: ["actions"],
-    description: "Page heading with optional description and page-level actions."
+    slots: ["actions", "meta"],
+    description: "Page heading with optional description and page-level actions. The meta slot sits on the title line, for a small chip such as when the data was read."
   },
   Toolbar: {
-    props: o.object({ height: o.string().optional() }),
+    props: t.object({ height: t.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)
+    props: t.object({
+      value: t.string().optional(),
+      groups: t.array(t.object({
+        label: t.string().optional(),
+        items: t.array(J)
       })),
-      searchable: o.boolean().optional(),
-      collapsible: o.boolean().optional(),
-      searchPlaceholder: o.string().optional()
+      searchable: t.boolean().optional(),
+      collapsible: t.boolean().optional(),
+      searchPlaceholder: t.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(k),
-      ariaLabel: o.string().optional()
+    props: t.object({
+      value: t.string(),
+      items: t.array(k),
+      ariaLabel: t.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()
+    props: t.object({
+      direction: t.enum(["row", "column"]).optional(),
+      gap: t.enum(["none", "xs", "sm", "md", "lg"]).optional(),
+      align: t.enum(["start", "center", "end", "stretch"]).optional(),
+      justify: t.enum(["start", "center", "end", "between"]).optional(),
+      wrap: t.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()
+    props: t.object({
+      text: t.string(),
+      variant: t.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()
+    props: t.object({
+      label: t.string(),
+      variant: t.enum(["primary", "secondary", "ghost", "danger"]).optional(),
+      size: t.enum(["sm", "md", "lg"]).optional(),
+      disabled: t.boolean().optional(),
+      loading: t.boolean().optional(),
+      icon: t.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()
+    props: t.object({
+      value: t.union([t.string(), t.number()]).optional(),
+      type: t.string().optional(),
+      placeholder: t.string().optional(),
+      disabled: t.boolean().optional(),
+      readonly: t.boolean().optional(),
+      invalid: t.boolean().optional(),
+      size: t.enum(["sm", "md", "lg"]).optional(),
+      ariaLabel: t.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(k),
-      placeholder: o.string().optional(),
-      disabled: o.boolean().optional(),
-      search: o.boolean().optional()
+    props: t.object({
+      value: t.string().optional(),
+      options: t.array(k),
+      placeholder: t.string().optional(),
+      disabled: t.boolean().optional(),
+      search: t.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()
+    props: t.object({
+      checked: t.boolean().optional(),
+      label: t.string().optional(),
+      description: t.string().optional(),
+      disabled: t.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()
+    props: t.object({
+      checked: t.boolean().optional(),
+      label: t.string().optional(),
+      disabled: t.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()
+    props: t.object({
+      value: t.string().optional(),
+      options: t.array(Re),
+      orientation: t.enum(["vertical", "horizontal"]).optional(),
+      disabled: t.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()
+    props: t.object({
+      direction: t.enum(["auto", "horizontal", "vertical"]).optional(),
+      fieldWidth: t.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()
+    props: t.object({
+      label: t.string(),
+      description: t.string().optional(),
+      help: t.string().optional(),
+      required: t.boolean().optional(),
+      fieldWidth: t.string().optional(),
+      direction: t.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()
+    props: t.object({
+      title: t.string(),
+      collapsible: t.boolean().optional(),
+      open: t.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()
+    props: t.object({
+      label: t.string(),
+      description: t.string().optional(),
+      required: t.boolean().optional(),
+      fieldWidth: t.string().optional(),
+      align: t.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()
+    props: t.object({
+      padding: t.enum(["none", "sm", "md", "lg"]).optional(),
+      border: t.boolean().optional(),
+      raised: t.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()
+    props: t.object({
+      title: t.string().optional(),
+      layoutType: t.enum(["regular", "compact"]).optional(),
+      expandable: t.boolean().optional(),
+      expanded: t.boolean().optional(),
+      footerAlign: t.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()
+    props: t.object({
+      tone: t.enum(["info", "success", "warning", "danger"]).optional(),
+      title: t.string().optional(),
+      closable: t.boolean().optional(),
+      code: t.string().optional()
     }),
     slots: ["default", "actions"],
     events: ["close"],
-    description: "Inline information, success, warning or error message."
+    description: "Inline information, success, warning or error message. Put a machine error code in `code`, not in the text."
   },
   EmptyState: {
-    props: o.object({
-      title: o.string(),
-      description: o.string().optional(),
-      icon: o.string().optional()
+    props: t.object({
+      title: t.string(),
+      description: t.string().optional(),
+      icon: t.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()
+    props: t.object({
+      value: t.number().optional(),
+      max: t.number().optional(),
+      label: t.string().optional(),
+      valueLabel: t.string().optional(),
+      tone: t.enum(["primary", "success", "warning", "danger"]).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()
+    props: t.object({
+      text: t.string(),
+      tone: t.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()
+    props: t.object({
+      open: t.boolean().optional(),
+      title: t.string().optional(),
+      description: t.string().optional(),
+      width: t.string().optional(),
+      showClose: t.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()
+    props: t.object({
+      columns: t.array(L),
+      rows: t.array(t.record(t.string(), t.unknown())),
+      rowKey: t.string().optional(),
+      emptyText: t.string().optional(),
+      compact: t.boolean().optional(),
+      mobileView: t.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()
+    props: t.object({
+      columns: t.array(L),
+      rows: t.array(t.record(t.string(), t.unknown())),
+      rowKey: t.string().optional(),
+      emptyText: t.string().optional(),
+      compact: t.boolean().optional(),
+      mobileView: t.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."
   },
+  CellText: {
+    props: t.object({
+      text: t.string(),
+      secondary: t.string().optional(),
+      layout: t.enum(["stacked", "inline"]).optional(),
+      openLabel: t.string().optional(),
+      openDisabled: t.boolean().optional()
+    }),
+    events: ["open"],
+    description: 'Main text with secondary information (size, time, path), truncated with a tooltip. With openLabel the main text is a link-styled button that emits open, e.g. "Open in File Station".'
+  },
+  CellStatus: {
+    props: t.object({
+      label: t.string(),
+      tone: t.enum(["neutral", "info", "success", "warning", "danger"]).optional(),
+      progress: t.number().optional(),
+      detail: t.string().optional()
+    }),
+    description: "Task status: a toned dot and label, a bar while progress (0–100) is running, and a detail such as speed or a reason."
+  },
+  ListItem: {
+    props: t.object({
+      title: t.string().optional(),
+      description: t.string().optional()
+    }),
+    slots: ["default", "actions"],
+    description: "One entry of a list (an extension, a tool, a rule): title, description, content and actions on the right. Consecutive entries are split by a hairline."
+  },
+  InputGroup: {
+    props: t.object({}),
+    slots: ["default"],
+    description: "A field and the buttons acting on it on one line, such as a URL and its Install button. The first child takes the room left."
+  },
   Loading: {
-    props: o.object({ text: o.string().optional() }),
+    props: t.object({ text: t.string().optional() }),
     description: "Centered loading state for a page or bounded region."
   }
 }, A = z(H, {
-  components: _,
+  components: V,
   actions: {}
-}), ke = [
+}), 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,53 +362,53 @@ 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."
-], 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: ke })}
+], Le = '## 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 pt() {
+  return `${A.prompt({ customRules: Ke })}
 
-${Ce}
+${Le}
 `;
 }
-const Re = {
+const Ue = {
   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) {
+}, De = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch" }, Te = { start: "flex-start", center: "center", end: "flex-end", between: "space-between" };
+function Ee(e) {
   return { default: () => e };
 }
 function C(e) {
-  return e ? Ae(e) : void 0;
+  return e ? Ie(e) : void 0;
 }
-function T(e) {
+function _(e) {
   return {
     ...e,
     icon: C(e.icon),
-    children: e.children?.map(T)
+    children: e.children?.map(_)
   };
 }
-function De(e) {
-  return e.map((t) => ({ ...t, items: t.items.map(T) }));
+function Ne(e) {
+  return e.map((o) => ({ ...o, items: o.items.map(_) }));
 }
-const Le = {
-  AppRoot: ({ props: e, slots: t }) => d(xe, { modalScope: e.modalScope }, t),
-  AppShell: ({ props: e, slots: t }) => d(Oe, {
+const Je = {
+  AppRoot: ({ props: e, slots: o }) => d(Ce, { modalScope: e.modalScope }, o),
+  AppShell: ({ props: e, slots: o }) => d(ke, {
     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, {
+  }, o),
+  ResponsiveView: ({ props: e, slots: o }) => d(Pe, { mode: e.mode }, o),
+  Page: ({ props: e, slots: o }) => d(Ae, { width: e.width ?? "fill", surface: e.surface }, o),
+  PageHeader: ({ props: e, slots: o }) => d(Oe, e, o),
+  Toolbar: ({ props: e, slots: o }) => d(xe, e, o),
+  SidebarNav: ({ props: e, bindings: o, emit: n }) => {
+    const [s, i] = b(e.value, o?.value);
+    return d(je, {
       modelValue: s,
-      groups: De(e.groups),
+      groups: Ne(e.groups),
       searchable: e.searchable,
       collapsible: e.collapsible,
       searchPlaceholder: e.searchPlaceholder,
@@ -382,9 +417,9 @@ const Le = {
       }
     });
   },
-  Tabs: ({ props: e, bindings: t, emit: n }) => {
-    const [s, i] = b(e.value, t?.value);
-    return d(ye, {
+  Tabs: ({ props: e, bindings: o, emit: n }) => {
+    const [s, i] = b(e.value, o?.value);
+    return d(Se, {
       modelValue: s ?? "",
       items: e.items,
       ariaLabel: e.ariaLabel,
@@ -393,36 +428,36 @@ const Le = {
       }
     });
   },
-  Stack: ({ props: e, children: t }) => d("div", {
+  Stack: ({ props: e, children: o }) => d("div", {
     "data-syno-pkg-land-ui": "",
     style: {
       display: "flex",
       flexDirection: e.direction ?? "column",
-      gap: Re[e.gap ?? "md"],
-      alignItems: Ke[e.align ?? "stretch"],
-      justifyContent: Ie[e.justify ?? "start"],
+      gap: Ue[e.gap ?? "md"],
+      alignItems: De[e.align ?? "stretch"],
+      justifyContent: Te[e.justify ?? "start"],
       flexWrap: e.wrap ? "wrap" : "nowrap"
     }
-  }, t),
+  }, o),
   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-pkg-land-ui": "" }, e.text);
+    const o = e.variant ?? "body";
+    return d(o === "heading" ? "h2" : o === "mono" ? "code" : "span", { class: o === "muted" ? "text-[13px] text-[var(--ui-text-muted)]" : o === "caption" ? "text-[12px] text-[var(--ui-text-muted)]" : o === "heading" ? "text-[16px] font-semibold text-[var(--ui-text)]" : o === "mono" ? "font-mono text-[12px] text-[var(--ui-text)]" : "text-[13px] text-[var(--ui-text)]", "data-syno-pkg-land-ui": "" }, e.text);
   },
-  Button: ({ props: e, emit: t }) => {
+  Button: ({ props: e, emit: o }) => {
     const n = C(e.icon);
-    return d(be, {
+    return d($e, {
       variant: e.variant,
       size: e.size,
       disabled: e.disabled,
       loading: e.loading,
-      onClick: () => t("press")
+      onClick: () => o("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, {
+  Input: ({ props: e, bindings: o, emit: n }) => {
+    const [s, i] = b(e.value, o?.value);
+    return d(ve, {
       modelValue: s,
       type: e.type,
       placeholder: e.placeholder,
@@ -436,9 +471,9 @@ const Le = {
       }
     });
   },
-  Select: ({ props: e, bindings: t, emit: n }) => {
-    const [s, i] = b(e.value, t?.value);
-    return d(fe, {
+  Select: ({ props: e, bindings: o, emit: n }) => {
+    const [s, i] = b(e.value, o?.value);
+    return d(we, {
       modelValue: s,
       options: e.options,
       placeholder: e.placeholder,
@@ -449,9 +484,9 @@ const Le = {
       }
     });
   },
-  Checkbox: ({ props: e, bindings: t, emit: n }) => {
-    const [s, i] = b(e.checked, t?.checked);
-    return d(he, {
+  Checkbox: ({ props: e, bindings: o, emit: n }) => {
+    const [s, i] = b(e.checked, o?.checked);
+    return d(ye, {
       modelValue: s ?? !1,
       label: e.label,
       description: e.description,
@@ -461,9 +496,9 @@ const Le = {
       }
     });
   },
-  Switch: ({ props: e, bindings: t, emit: n }) => {
-    const [s, i] = b(e.checked, t?.checked);
-    return d(me, {
+  Switch: ({ props: e, bindings: o, emit: n }) => {
+    const [s, i] = b(e.checked, o?.checked);
+    return d(be, {
       modelValue: s ?? !1,
       label: e.label,
       disabled: e.disabled,
@@ -472,9 +507,9 @@ const Le = {
       }
     });
   },
-  RadioGroup: ({ props: e, bindings: t, emit: n }) => {
-    const [s, i] = b(e.value, t?.value);
-    return d(ue, {
+  RadioGroup: ({ props: e, bindings: o, emit: n }) => {
+    const [s, i] = b(e.value, o?.value);
+    return d(ge, {
       modelValue: s,
       options: e.options,
       orientation: e.orientation,
@@ -484,22 +519,22 @@ const Le = {
       }
     });
   },
-  Form: ({ props: e, slots: t, emit: n }) => d(pe, {
+  Form: ({ props: e, slots: o, emit: n }) => d(fe, {
     direction: e.direction,
     fieldWidth: e.fieldWidth,
     onSubmit: () => n("submit")
-  }, t),
-  Field: ({ props: e, slots: t }) => d(de, {
+  }, o),
+  Field: ({ props: e, slots: o }) => d(he, {
     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, {
+  }, o),
+  SettingsSection: ({ props: e, bindings: o, slots: n, emit: s }) => {
+    const [i, a] = b(e.open, o?.open);
+    return d(me, {
       title: e.title,
       collapsible: e.collapsible,
       open: i,
@@ -508,17 +543,17 @@ const Le = {
       }
     }, n);
   },
-  SettingsField: ({ props: e, slots: t }) => d(le, {
+  SettingsField: ({ props: e, slots: o }) => d(ue, {
     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, {
+  }, o),
+  Surface: ({ props: e, slots: o }) => d(pe, e, o),
+  Card: ({ props: e, bindings: o, slots: n, emit: s }) => {
+    const [i, a] = b(e.expanded, o?.expanded);
+    return d(de, {
       title: e.title,
       layoutType: e.layoutType,
       expandable: e.expandable,
@@ -529,22 +564,23 @@ const Le = {
       }
     }, n);
   },
-  Callout: ({ props: e, slots: t, emit: n }) => d(se, {
+  Callout: ({ props: e, slots: o, emit: n }) => d(ce, {
     tone: e.tone,
     title: e.title,
     closable: e.closable,
+    code: e.code,
     onClose: () => n("close")
-  }, t),
-  EmptyState: ({ props: e, slots: t }) => d(ie, {
+  }, o),
+  EmptyState: ({ props: e, slots: o }) => d(le, {
     title: e.title,
     description: e.description,
     icon: C(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, {
+  }, o),
+  Progress: ({ props: e }) => d(re, e),
+  Badge: ({ props: e }) => d(ae, { tone: e.tone }, Ee(e.text)),
+  Dialog: ({ props: e, bindings: o, slots: n, emit: s }) => {
+    const [i, a] = b(e.open, o?.open);
+    return d(se, {
       open: i ?? !1,
       title: e.title,
       description: e.description,
@@ -555,15 +591,19 @@ const Le = {
       }
     }, n);
   },
-  DataTable: ({ props: e }) => d(I, e),
-  ResourceList: ({ props: e, slots: t }) => d("section", { class: "min-w-0", "data-syno-pkg-land-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)
+  DataTable: ({ props: e }) => d(K, e),
+  ResourceList: ({ props: e, slots: o }) => d("section", { class: "min-w-0", "data-syno-pkg-land-ui": "", "data-ui-resource-list": "" }, [
+    o.toolbar ? d("div", { class: "mb-3 flex flex-wrap items-center gap-2" }, o.toolbar()) : null,
+    d(K, e)
   ]),
+  CellText: ({ props: e, emit: o }) => d(ie, { ...e, onOpen: () => o("open") }),
+  CellStatus: ({ props: e }) => d(ne, e),
+  ListItem: ({ props: e, slots: o }) => d(oe, e, o),
+  InputGroup: ({ slots: e }) => d(te, null, e),
   Loading: ({ props: e }) => d(ee, { text: e.text })
-}, { registry: D } = B(A, {
-  components: Le
-}), lt = /* @__PURE__ */ G({
+}, { registry: U } = B(A, {
+  components: Je
+}), ut = /* @__PURE__ */ G({
   __name: "SynoJsonRenderer",
   props: {
     spec: {},
@@ -579,8 +619,8 @@ const Le = {
     fallback: {}
   },
   setup(e) {
-    return (t, n) => (X(), Y(j(M), {
-      registry: j(D),
+    return (o, n) => (X(), Y(j(M), {
+      registry: j(U),
       store: e.store,
       "initial-state": e.state ?? e.spec?.state ?? {},
       handlers: e.handlers,
@@ -593,7 +633,7 @@ const Le = {
       default: Q(() => [
         Z(j(W), {
           spec: e.spec,
-          registry: j(D),
+          registry: j(U),
           loading: e.loading,
           fallback: e.fallback
         }, null, 8, ["spec", "registry", "loading", "fallback"])
@@ -601,56 +641,56 @@ const Le = {
       _: 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}`]);
+}), Ve = ["label", "title", "description", "text", "placeholder", "emptyText", "help", "ariaLabel", "valueLabel", "searchPlaceholder"];
+function q(e, o = "") {
+  return Array.isArray(e) ? e : Object.entries(e).flatMap(([n, s]) => m(s) ? q(s, `${o}${n}.`) : [`${o}${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);
+const m = (e) => typeof e == "object" && e !== null && !Array.isArray(e), u = (...e) => e.map((o) => "/" + String(o).replaceAll("~", "~0").replaceAll("/", "~1")).join("");
+function _e(e, o) {
+  const n = Array.from({ length: o.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++) {
+    for (let a = 1; a <= o.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;
+      n[a] = Math.min(n[a] + 1, n[a - 1] + 1, i + (e[s - 1].toLowerCase() === o[a - 1].toLowerCase() ? 0 : 1)), i = r;
     }
   }
-  return n[t.length];
+  return n[o.length];
 }
-function y(e, t) {
+function y(e, o) {
   let n, s = 1 / 0;
-  for (const i of t) {
-    const a = Ne(e, i);
+  for (const i of o) {
+    const a = _e(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));
+const qe = ["$state", "$item", "$index", "$bindState", "$bindItem", "$cond", "$computed", "$template"], Fe = (e) => m(e) && qe.some((o) => Object.hasOwn(e, o)), I = (e) => Fe(e) || (Array.isArray(e) ? e.some(I) : m(e) && Object.values(e).some(I));
 function P(e) {
-  const t = e.props?.shape;
-  return m(t) ? t : void 0;
+  const o = e.props?.shape;
+  return m(o) ? o : 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(", ")}.`;
+const R = (e) => e.safeParse(void 0).success;
+function ze(e) {
+  if (e.code === "invalid_value") return `Use one of: ${e.values.map((o) => JSON.stringify(o)).join(", ")}.`;
   if (e.code === "invalid_type") return `Expected ${e.expected}.`;
 }
-const v = (e, t) => `${e}: ${t.join(", ")}`;
-class Te {
+const v = (e, o) => `${e}: ${o.join(", ")}`;
+class Be {
   errors = [];
   warnings = [];
-  error(t) {
-    this.errors.push({ severity: "error", ...t });
+  error(o) {
+    this.errors.push({ severity: "error", ...o });
   }
-  warn(t) {
-    this.warnings.push({ severity: "warning", ...t });
+  warn(o) {
+    this.warnings.push({ severity: "warning", ...o });
   }
 }
-function ct(e, t = {}) {
-  const n = t.catalog ?? A, s = n.data.components, i = new Te();
+function mt(e, o = {}) {
+  const n = o.catalog ?? A, s = n.data.components, i = new Be();
   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);
+    return i.error({ code: "invalid_spec", path: "", message: "A spec must be a JSON object.", hint: 'Return {"root": "<key>", "elements": {...}, "state": {...}}.' }), T(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 ?? {});
@@ -673,27 +713,27 @@ function ct(e, t = {}) {
       });
       continue;
     }
-    qe(i, p, h, s[h], f.props), Fe(i, p, h, s[h], f, a);
+    Me(i, p, h, s[h], f.props), We(i, p, h, s[h], f, a);
   }
-  const c = t.messages && q(t.messages), l = {
+  const c = o.messages && q(o.messages), l = {
     issues: i,
     components: s,
     actions: [
       ...(n.schema?.builtInActions ?? []).map((p) => p.name),
       ...Object.keys(n.data.actions ?? {}),
-      ...t.actions ?? []
+      ...o.actions ?? []
     ],
-    state: { ...t.state, ...m(e.state) ? e.state : {} },
+    state: { ...o.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,
+    functions: o.functions || c ? [...o.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);
+  return a && typeof e.root == "string" && Object.hasOwn(a, e.root) && He(l, e.root, a), T(i);
 }
-function qe(e, t, n, s, i) {
-  const a = (...l) => u("elements", t, "props", ...l);
+function Me(e, o, n, s, i) {
+  const a = (...l) => u("elements", o, "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.' });
+    e.error({ code: "invalid_props", path: a(), elementKey: o, message: '"props" must be an object.', hint: 'Use "props": {} when the component needs none.' });
     return;
   }
   const r = P(s);
@@ -706,82 +746,82 @@ function qe(e, t, n, s, i) {
       e.error({
         code: "unknown_prop",
         path: a(l),
-        elementKey: t,
+        elementKey: o,
         message: `${n} has no prop "${l}".`,
         hint: h ? `Did you mean "${h}"? Run "syno-pkg-land-ui describe ${n}".` : v(`${n} props`, c)
       });
       continue;
     }
-    if (R(p)) continue;
+    if (I(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,
+          elementKey: o,
           message: `${n}.${l}: ${h.message}`,
-          hint: _e(h)
+          hint: ze(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-pkg-land-ui describe ${n}" for its type.` });
+    !Object.hasOwn(i, l) && !R(r[l]) && e.error({ code: "missing_prop", path: a(l), elementKey: o, message: `${n} requires prop "${l}".`, hint: `Run "syno-pkg-land-ui describe ${n}" for its type.` });
 }
-function F(e, t) {
+function F(e, o) {
   const n = [];
-  if (Array.isArray(t.children) && t.children.forEach((s, i) => {
+  if (Array.isArray(o.children) && o.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))
+  }), m(o.slots))
+    for (const [s, i] of Object.entries(o.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) {
+function We(e, o, 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({
+  if (c !== void 0 && !(Array.isArray(c) && c.every((l) => typeof l == "string")) ? e.error({ code: "invalid_children", path: u("elements", o, "children"), elementKey: o, 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,
+    path: u("elements", o, "children"),
+    elementKey: o,
     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.' });
+      e.error({ code: "invalid_slots", path: u("elements", o, "slots"), elementKey: o, 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.` });
+          Array.isArray(p) || e.error({ code: "invalid_slots", path: u("elements", o, "slots", l), elementKey: o, 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,
+            path: u("elements", o, "slots", l),
+            elementKey: o,
             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))
+  for (const l of F(o, 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,
+        elementKey: o,
         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) {
+function He(e, o, 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);
+    Qe(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))
@@ -793,13 +833,13 @@ function ze(e, t, n) {
         a(g.child, [...c, g.child], l || h, p || w);
       }
   };
-  a(t, [t], !1, !1);
+  a(o, [o], !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) {
+function Ge(e, o) {
   let n = e;
-  for (const s of t.split("/").slice(1)) {
+  for (const s of o.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];
@@ -807,56 +847,56 @@ function Be(e, t) {
   }
   return { found: !0, value: n };
 }
-function $(e, t, n, s, { mustExist: i }) {
+function $(e, o, n, s, { mustExist: i }) {
   if (typeof n != "string" || !n.startsWith("/")) {
     e.issues.error({
       code: "invalid_state_path",
       path: s,
-      elementKey: t,
+      elementKey: o,
       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({
+  i && !Ge(e.state, n).found && e.issues.warn({
     code: "state_path_missing",
     path: s,
-    elementKey: t,
+    elementKey: o,
     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) {
+function S(e, o, n, s, i) {
   if (Array.isArray(n)) {
-    n.forEach((a, r) => S(e, t, a, s + u(r), i));
+    n.forEach((a, r) => S(e, o, 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 });
+      Object.hasOwn(n, a) && $(e, o, 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,
+        elementKey: o,
         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);
+        $(e, o, a[1], s + u("$template"), { mustExist: !0 });
+    typeof n.$computed == "string" && Xe(e, o, 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);
+      ["$state", "$bindState", "$item", "$bindItem", "$index", "$template"].includes(a) || S(e, o, r, s + u(a), i);
   }
 }
-function Me(e, t, n, s) {
+function Xe(e, o, n, s) {
   const i = n.$computed;
   if (!e.functions)
     e.issues.warn({
       code: "unverified_function",
       path: s + u("$computed"),
-      elementKey: t,
+      elementKey: o,
       message: `$computed "${i}" must be registered by the host.`,
       hint: `Pass the host function names with --functions ${i} to verify it.`
     });
@@ -865,7 +905,7 @@ function Me(e, t, n, s) {
     e.issues.error({
       code: "unknown_function",
       path: s + u("$computed"),
-      elementKey: t,
+      elementKey: o,
       message: `$computed "${i}" is not a host function.`,
       hint: `${r ? `Did you mean "${r}"? ` : ""}${v("Host functions", e.functions)}`
     });
@@ -877,27 +917,27 @@ function Me(e, t, n, s) {
     e.issues.error({
       code: "missing_i18n_key",
       path: s + u("args", "key"),
-      elementKey: t,
+      elementKey: o,
       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 Ye = ["statePath", "clearStatePath"];
+function Qe(e, o, n, s) {
+  const i = (...c) => u("elements", o, ...c);
+  if (S(e, o, n.props, i("props"), s), e.messageKeys && m(n.props))
+    for (const c of Ve) {
       const l = n.props[c];
       typeof l == "string" && l.trim() && e.issues.warn({
         code: "literal_text",
         path: i("props", c),
-        elementKey: t,
+        elementKey: o,
         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 });
+  n.visible !== void 0 && S(e, o, n.visible, i("visible"), s), m(n.repeat) && $(e, o, 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)) {
@@ -906,22 +946,22 @@ function He(e, t, n, s) {
         e.issues.error({
           code: "unknown_event",
           path: i("on", c),
-          elementKey: t,
+          elementKey: o,
           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);
+      D(e, o, 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);
+      $(e, o, c, i("watch", c), { mustExist: !1 }), D(e, o, l, i("watch", c), s);
 }
-function L(e, t, n, s, i) {
+function D(e, o, 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": {...}}.' });
+      e.issues.error({ code: "invalid_action_binding", path: l, elementKey: o, message: 'An action binding is {"action": "<name>", "params": {...}}.' });
       return;
     }
     if (!e.actions.includes(r.action)) {
@@ -929,27 +969,27 @@ function L(e, t, n, s, i) {
       e.issues.error({
         code: "unknown_action",
         path: l + u("action"),
-        elementKey: t,
+        elementKey: o,
         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);
+      for (const p of Ye)
+        Object.hasOwn(r.params, p) && $(e, o, r.params[p], l + u("params", p), { mustExist: !1 });
+      S(e, o, r.params, l + u("params"), i);
     }
   });
 }
-function E(e) {
+function T(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;
+const x = V;
+function Ze(e) {
+  const o = t.toJSONSchema(e);
+  return delete o.$schema, o;
 }
-function Xe(e) {
+function et(e) {
   if (Array.isArray(e.enum)) return e.enum[0];
   switch (e.type) {
     case "string":
@@ -965,42 +1005,42 @@ function Xe(e) {
       return {};
   }
 }
-function dt() {
-  return Object.entries(O).map(([e, t]) => ({
+function ht() {
+  return Object.entries(x).map(([e, o]) => ({
     name: e,
-    description: t.description,
-    required: Object.entries(P(t) ?? {}).filter(([, n]) => !K(n)).map(([n]) => n),
-    slots: t.slots ?? [],
-    events: t.events ?? []
+    description: o.description,
+    required: Object.entries(P(o) ?? {}).filter(([, n]) => !R(n)).map(([n]) => n),
+    slots: o.slots ?? [],
+    events: o.events ?? []
   }));
 }
-function pt(e) {
-  return y(e, Object.keys(O));
+function ft(e) {
+  return y(e, Object.keys(x));
 }
-function ut(e) {
-  if (!Object.hasOwn(O, e)) return;
-  const t = O[e], n = Object.fromEntries(Object.entries(P(t) ?? {}).map(([s, i]) => [
+function gt(e) {
+  if (!Object.hasOwn(x, e)) return;
+  const o = x[e], n = Object.fromEntries(Object.entries(P(o) ?? {}).map(([s, i]) => [
     s,
-    { required: !K(i), schema: Ge(i) }
+    { required: !R(i), schema: Ze(i) }
   ]));
   return {
     name: e,
-    description: t.description,
+    description: o.description,
     props: n,
-    slots: t.slots ?? [],
-    events: t.events ?? [],
+    slots: o.slots ?? [],
+    events: o.events ?? [],
     example: {
       type: e,
-      props: Object.fromEntries(Object.entries(n).filter(([, s]) => s.required).map(([s, { schema: i }]) => [s, Xe(i)])),
+      props: Object.fromEntries(Object.entries(n).filter(([, s]) => s.required).map(([s, { schema: i }]) => [s, et(i)])),
       children: []
     }
   };
 }
-const x = { type: "string", pattern: "^/" }, Ye = {
+const O = { type: "string", pattern: "^/" }, tt = {
   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: ["$state"], properties: { $state: O } },
+    { type: "object", required: ["$bindState"], properties: { $bindState: O } },
     { type: "object", required: ["$item"], properties: { $item: { type: "string" } } },
     { type: "object", required: ["$bindItem"], properties: { $bindItem: { type: "string" } } },
     { type: "object", required: ["$index"], properties: { $index: { const: !0 } } },
@@ -1008,7 +1048,7 @@ const x = { type: "string", pattern: "^/" }, Ye = {
     { type: "object", required: ["$computed"], properties: { $computed: { type: "string" }, args: { type: "object" } } },
     { type: "object", required: ["$cond", "$then", "$else"], properties: { $cond: {}, $then: {}, $else: {} } }
   ]
-}, Qe = {
+}, ot = {
   type: "object",
   required: ["action"],
   properties: {
@@ -1020,21 +1060,21 @@ const x = { type: "string", pattern: "^/" }, Ye = {
     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) {
+}, E = { anyOf: [{ $ref: "#/$defs/actionBinding" }, { type: "array", items: { $ref: "#/$defs/actionBinding" } }] }, N = { type: "array", items: { type: "string" } };
+function nt(e, o, 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)
+    c === "$ref" && typeof l == "string" ? l.replace("#/$defs/", `#/$defs/${o}`) : s(l)
   ])), { $defs: i, ...a } = e;
   delete a.$schema;
-  for (const [r, c] of Object.entries(i ?? {})) n[t + r] = s(c);
+  for (const [r, c] of Object.entries(i ?? {})) n[o + r] = s(c);
   return s(a);
 }
-function et(e, t, n) {
-  const s = P(t), i = t.slots ?? [];
+function it(e, o, n) {
+  const s = P(o), i = o.slots ?? [];
   let a = { type: "object" };
   if (s) {
-    const r = Ze(o.toJSONSchema(o.object(s)), `${e}__`, n), c = r.properties;
+    const r = nt(t.toJSONSchema(t.object(s)), `${e}__`, n), c = r.properties;
     a = {
       ...r,
       properties: Object.fromEntries(Object.entries(c).map(([l, p]) => [
@@ -1046,30 +1086,30 @@ function et(e, t, n) {
   return {
     if: { properties: { type: { const: e } } },
     then: {
-      ...t.description ? { description: t.description } : {},
+      ...o.description ? { description: o.description } : {},
       properties: {
         props: a,
         ...i.includes("default") ? {} : { children: { maxItems: 0 } },
         slots: { propertyNames: { enum: i.filter((r) => r !== "default") } },
-        on: { propertyNames: { enum: t.events ?? [] } }
+        on: { propertyNames: { enum: o.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));
+function bt(e = A) {
+  const o = e.data.components, n = { expression: tt, actionBinding: ot }, s = Object.entries(o).map(([i, a]) => it(i, a, n));
   return n.element = {
     type: "object",
     required: ["type", "props"],
     properties: {
-      type: { enum: Object.keys(t) },
+      type: { enum: Object.keys(o) },
       props: { type: "object" },
-      children: J,
-      slots: { type: "object", additionalProperties: J },
+      children: N,
+      slots: { type: "object", additionalProperties: N },
       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 }
+      on: { type: "object", additionalProperties: E },
+      watch: { type: "object", propertyNames: O, additionalProperties: E },
+      repeat: { type: "object", required: ["statePath"], properties: { statePath: O, key: { type: "string" } }, additionalProperties: !1 }
     },
     additionalProperties: !1,
     allOf: s
@@ -1088,30 +1128,30 @@ function mt(e = A) {
   };
 }
 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,
-  ke as synoJsonAiRules,
+  Ot as ActionProvider,
+  At as JSONUIProvider,
+  Pt as Renderer,
+  kt as StateProvider,
+  ut as SynoJsonRenderer,
+  Ct as ValidationProvider,
+  It as VisibilityProvider,
+  ft as closestSynoJsonComponent,
+  St as createStateStore,
+  jt as defineCatalog,
+  Rt as defineRegistry,
+  gt as describeSynoJsonComponent,
+  Tt as jsonRenderVueSchema,
+  ht as listSynoJsonComponents,
+  pt as synoJsonAiPrompt,
+  Ke as synoJsonAiRules,
   A as synoJsonCatalog,
-  _ as synoJsonComponentDefinitions,
-  D as synoJsonRegistry,
-  Le as synoJsonRenderers,
-  mt as synoJsonSchema,
-  kt as useActions,
-  Ct as useBoundProp,
-  Rt as useStateStore,
-  ct as validateSynoJsonSpec,
-  gt as z
+  V as synoJsonComponentDefinitions,
+  U as synoJsonRegistry,
+  Je as synoJsonRenderers,
+  bt as synoJsonSchema,
+  Kt as useActions,
+  Lt as useBoundProp,
+  Ut as useStateStore,
+  mt as validateSynoJsonSpec,
+  vt as z
 };