@flanksource/clicky-ui 0.3.41 → 0.3.43

package/dist/components/json-schema-form-debug-keywords.js

@@ -0,0 +1,159 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { LabelIcon } from "../data/Icon.js";
+import { TONE_DOT_CLASS, isFieldTone } from "./json-schema-form-tone.js";
+import { cn } from "../lib/utils.js";
+import { groupKeywords } from "./json-schema-form-debug-groups.js";
+import { DebugGlyph } from "./json-schema-form-debug-glyph.js";
+import { GROUP_GLYPH, keywordGlyph, KIND_GLYPH } from "./json-schema-form-debug-glyph-map.js";
+import { ListenerList } from "./json-schema-form-debug-listeners.js";
+const GROUP_TITLE = {
+  behaviour: "Behaviour",
+  presentation: "Presentation",
+  "opt-in": "Opt-in extensions",
+  consumer: "Consumer extensions",
+  schema: "Schema"
+};
+const GROUP_NOTE = {
+  "opt-in": "read only when the host passes the matching create*FormExtensions()",
+  consumer: "not read by the form"
+};
+const STRUCTURE = /* @__PURE__ */ new Set(["properties", "items", "allOf", "anyOf", "oneOf", "$defs", "patternProperties", "additionalProperties"]);
+const ICON_KEYWORDS = /* @__PURE__ */ new Set(["x-icon", "x-input-prefix-icon", "x-input-suffix-icon"]);
+const ENUM_MAPS = ["x-enum-labels", "x-enum-icons", "x-enum-descriptions", "x-enum-tones"];
+function DebugKeywords({ prop, value }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: groupKeywords(prop).map(({ group, entries }) => {
+    const enumMaps = entries.filter(([keyword]) => ENUM_MAPS.includes(keyword));
+    const rest = entries.filter(([keyword]) => !ENUM_MAPS.includes(keyword));
+    return /* @__PURE__ */ jsxs("section", { role: "group", "aria-label": GROUP_TITLE[group], className: "space-y-0.5 border-t border-border pt-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(DebugGlyph, { glyph: GROUP_GLYPH[group] }),
+        GROUP_TITLE[group],
+        GROUP_NOTE[group] && /* @__PURE__ */ jsxs("span", { className: "font-normal normal-case tracking-normal", children: [
+          "· ",
+          GROUP_NOTE[group]
+        ] })
+      ] }),
+      enumMaps.length > 0 && /* @__PURE__ */ jsx(EnumOptionTable, { prop }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-0.5 font-mono text-[11px]", children: rest.map(([keyword, raw]) => /* @__PURE__ */ jsxs("li", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx(DebugGlyph, { glyph: keywordGlyph(keyword, raw), className: "mt-px" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 break-words", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: keyword }),
+          " ",
+          describeKeyword(keyword, raw, value)
+        ] })
+      ] }, keyword)) })
+    ] }, group);
+  }) });
+}
+function describeKeyword(keyword, raw, value) {
+  if (keyword === "x-on-change" || keyword === "x-on-load") {
+    return Array.isArray(raw) ? /* @__PURE__ */ jsx(ListenerList, { listeners: raw, subject: value }) : /* @__PURE__ */ jsx(Json, { value: raw });
+  }
+  if (keyword === "x-clicky-lookup") return /* @__PURE__ */ jsx(LookupSummary, { descriptor: raw });
+  if (keyword === "x-item") return /* @__PURE__ */ jsx(ItemSpecSummary, { spec: raw });
+  if (keyword === "x-help") return /* @__PURE__ */ jsx(HelpSummary, { help: raw });
+  if (ICON_KEYWORDS.has(keyword) && typeof raw === "string") {
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(LabelIcon, { icon: raw, className: "size-3.5" }),
+      raw
+    ] });
+  }
+  if (STRUCTURE.has(keyword)) {
+    if (Array.isArray(raw)) return `[${raw.length}]`;
+    if (typeof raw === "object" && raw !== null) return `{${Object.keys(raw).join(", ")}}`;
+  }
+  if (typeof raw === "string") return raw;
+  if (Array.isArray(raw) && raw.every((item) => typeof item === "string")) return raw.join(", ");
+  return /* @__PURE__ */ jsx(Json, { value: raw });
+}
+function Json({ value }) {
+  if (typeof value !== "object" || value === null) return /* @__PURE__ */ jsx("span", { children: JSON.stringify(value) });
+  return /* @__PURE__ */ jsx("pre", { className: "mt-0.5 max-h-40 overflow-auto whitespace-pre-wrap rounded bg-muted/60 p-1", children: JSON.stringify(value, null, 2) });
+}
+function LookupSummary({ descriptor }) {
+  const { scope, hierarchy } = descriptor;
+  const parts = [
+    `filter ${descriptor.filter}`,
+    descriptor.searchParam && `search ${descriptor.searchParam}`,
+    descriptor.multi && "multi-select",
+    scope && `scope ${scope.param} ← ${scope.from}${scope.map ? ` via ${JSON.stringify(scope.map)}` : ""}`,
+    hierarchy && `tree split on ${JSON.stringify(hierarchy.delimiters)}`
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsxs("span", { children: [
+    "GET ",
+    descriptor.url,
+    " ",
+    parts.join(" · ")
+  ] });
+}
+function ItemSpecSummary({ spec }) {
+  var _a;
+  const summary = (_a = spec.summary) == null ? void 0 : _a.map((part) => typeof part === "string" ? part : (part.pattern ?? "{}").replace("{}", part.property));
+  const parts = [
+    spec.title && `title ${spec.title.join(" | ")}${spec.fallback ? ` (else ${spec.fallback})` : ""}`,
+    summary && `summary ${summary.join(" · ")}`,
+    spec.glyph && `glyph ${spec.glyph}`,
+    spec.badge && `badge ${spec.badge}`,
+    spec.flag && `flag ${spec.flag}`,
+    spec.actions && `actions ${spec.actions.length > 0 ? spec.actions.join(", ") : "none"}`,
+    spec.noun && `noun ${spec.noun}${spec.nounPlural ? `/${spec.nounPlural}` : ""}`,
+    spec.empty && `empty "${spec.empty}"`
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsx("span", { children: parts.join(" · ") });
+}
+function HelpSummary({ help }) {
+  const origin = [help.source, help.section].filter(Boolean).join(" › ");
+  return /* @__PURE__ */ jsxs("span", { children: [
+    origin && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      "[",
+      origin,
+      "] "
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "font-sans", children: help.body })
+  ] });
+}
+function EnumOptionTable({ prop }) {
+  const labels = prop["x-enum-labels"] ?? {};
+  const icons = prop["x-enum-icons"] ?? {};
+  const descriptions = prop["x-enum-descriptions"] ?? {};
+  const tones = prop["x-enum-tones"] ?? {};
+  const enumValues = (prop.enum ?? []).map(String);
+  const mapped = [...new Set([labels, icons, descriptions, tones].flatMap((map) => Object.keys(map)))];
+  const values = [...enumValues, ...mapped.filter((value) => !enumValues.includes(value))];
+  const checkEnum = prop.enum !== void 0;
+  const hasIcons = Object.keys(icons).length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-1 font-mono text-[11px]", children: [
+    /* @__PURE__ */ jsx(DebugGlyph, { glyph: KIND_GLYPH.enum, className: "mt-px" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "x-enum-*" }),
+      /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+        /* @__PURE__ */ jsx("thead", { className: "text-left text-[10px] text-muted-foreground", children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { className: "pr-2 font-normal", children: "value" }),
+          /* @__PURE__ */ jsx("th", { className: "pr-2 font-normal", children: "label" }),
+          /* @__PURE__ */ jsx("th", { className: "pr-2 font-normal", children: "description" }),
+          /* @__PURE__ */ jsx("th", { className: "font-normal", children: "tone" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: values.map((value) => {
+          const tone = tones[value];
+          return /* @__PURE__ */ jsxs("tr", { className: "align-top", children: [
+            /* @__PURE__ */ jsx("td", { className: "pr-2", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              hasIcons && /* @__PURE__ */ jsx(LabelIcon, { icon: icons[value], className: "size-3.5" }),
+              value,
+              checkEnum && !enumValues.includes(value) && /* @__PURE__ */ jsx("span", { className: "text-amber-700 dark:text-amber-300", children: " ⚠ not in enum" })
+            ] }) }),
+            /* @__PURE__ */ jsx("td", { className: "pr-2", children: labels[value] ?? "" }),
+            /* @__PURE__ */ jsx("td", { className: "pr-2 font-sans", children: descriptions[value] ?? "" }),
+            /* @__PURE__ */ jsx("td", { children: tone && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", isFieldTone(tone) ? TONE_DOT_CLASS[tone] : "outline outline-1 outline-rose-500") }),
+              tone
+            ] }) })
+          ] }, value);
+        }) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DebugKeywords
+};
+//# sourceMappingURL=json-schema-form-debug-keywords.js.map

package/dist/components/json-schema-form-debug-keywords.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-debug-keywords.js","sources":["../../src/components/json-schema-form-debug-keywords.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { LabelIcon } from \"../data/Icon\";\nimport { TONE_DOT_CLASS, isFieldTone } from \"./json-schema-form-tone\";\nimport { cn } from \"../lib/utils\";\nimport { groupKeywords, type KeywordGroup } from \"./json-schema-form-debug-groups\";\nimport { DebugGlyph } from \"./json-schema-form-debug-glyph\";\nimport { GROUP_GLYPH, KIND_GLYPH, keywordGlyph } from \"./json-schema-form-debug-glyph-map\";\nimport { ListenerList } from \"./json-schema-form-debug-listeners\";\nimport type { ArrayItemSpec, ChangeListener, JsonSchemaHelpBlock, JsonSchemaProperty, LookupDescriptor } from \"./json-schema-form-types\";\n\n// The debug card's keyword list, one labelled group at a time (see\n// groupKeywords), each keyword beside its palette glyph and rendered in its own\n// vocabulary — listeners as condition/action cards, the x-enum-* maps as one\n// option table, a lookup as the request it makes — instead of as raw JSON.\n\nconst GROUP_TITLE: Record<KeywordGroup, string> = {\n  behaviour: \"Behaviour\",\n  presentation: \"Presentation\",\n  \"opt-in\": \"Opt-in extensions\",\n  consumer: \"Consumer extensions\",\n  schema: \"Schema\",\n};\nconst GROUP_NOTE: Partial<Record<KeywordGroup, string>> = {\n  \"opt-in\": \"read only when the host passes the matching create*FormExtensions()\",\n  consumer: \"not read by the form\",\n};\n\n// Keywords that shape the tree rather than source the field; listed by name.\nconst STRUCTURE = new Set([\"properties\", \"items\", \"allOf\", \"anyOf\", \"oneOf\", \"$defs\", \"patternProperties\", \"additionalProperties\"]);\nconst ICON_KEYWORDS = new Set([\"x-icon\", \"x-input-prefix-icon\", \"x-input-suffix-icon\"]);\nconst ENUM_MAPS = [\"x-enum-labels\", \"x-enum-icons\", \"x-enum-descriptions\", \"x-enum-tones\"] as const;\n\n// DebugKeywords renders a property's keywords, one labelled group at a time.\n// `value` is the field's current value: listeners are evaluated against it.\nexport function DebugKeywords({ prop, value }: { prop: JsonSchemaProperty; value?: unknown }) {\n  return (\n    <>\n      {groupKeywords(prop).map(({ group, entries }) => {\n        const enumMaps = entries.filter(([keyword]) => (ENUM_MAPS as readonly string[]).includes(keyword));\n        const rest = entries.filter(([keyword]) => !(ENUM_MAPS as readonly string[]).includes(keyword));\n        return (\n          <section key={group} role=\"group\" aria-label={GROUP_TITLE[group]} className=\"space-y-0.5 border-t border-border pt-1.5\">\n            <div className=\"flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n              <DebugGlyph glyph={GROUP_GLYPH[group]} />\n              {GROUP_TITLE[group]}\n              {GROUP_NOTE[group] && <span className=\"font-normal normal-case tracking-normal\">· {GROUP_NOTE[group]}</span>}\n            </div>\n            {enumMaps.length > 0 && <EnumOptionTable prop={prop} />}\n            <ul className=\"space-y-0.5 font-mono text-[11px]\">\n              {rest.map(([keyword, raw]) => (\n                <li key={keyword} className=\"flex gap-1\">\n                  <DebugGlyph glyph={keywordGlyph(keyword, raw)} className=\"mt-px\" />\n                  <div className=\"min-w-0 flex-1 break-words\">\n                    <span className=\"text-muted-foreground\">{keyword}</span> {describeKeyword(keyword, raw, value)}\n                  </div>\n                </li>\n              ))}\n            </ul>\n          </section>\n        );\n      })}\n    </>\n  );\n}\n\nfunction describeKeyword(keyword: string, raw: unknown, value: unknown): ReactNode {\n  if (keyword === \"x-on-change\" || keyword === \"x-on-load\") {\n    return Array.isArray(raw) ? <ListenerList listeners={raw as ChangeListener[]} subject={value} /> : <Json value={raw} />;\n  }\n  if (keyword === \"x-clicky-lookup\") return <LookupSummary descriptor={raw as LookupDescriptor} />;\n  if (keyword === \"x-item\") return <ItemSpecSummary spec={raw as ArrayItemSpec} />;\n  if (keyword === \"x-help\") return <HelpSummary help={raw as JsonSchemaHelpBlock} />;\n  if (ICON_KEYWORDS.has(keyword) && typeof raw === \"string\") {\n    return (\n      <span className=\"inline-flex items-center gap-1\">\n        <LabelIcon icon={raw} className=\"size-3.5\" />\n        {raw}\n      </span>\n    );\n  }\n  if (STRUCTURE.has(keyword)) {\n    if (Array.isArray(raw)) return `[${raw.length}]`;\n    if (typeof raw === \"object\" && raw !== null) return `{${Object.keys(raw).join(\", \")}}`;\n  }\n  if (typeof raw === \"string\") return raw;\n  if (Array.isArray(raw) && raw.every((item) => typeof item === \"string\")) return raw.join(\", \");\n  return <Json value={raw} />;\n}\n\nfunction Json({ value }: { value: unknown }) {\n  if (typeof value !== \"object\" || value === null) return <span>{JSON.stringify(value)}</span>;\n  return <pre className=\"mt-0.5 max-h-40 overflow-auto whitespace-pre-wrap rounded bg-muted/60 p-1\">{JSON.stringify(value, null, 2)}</pre>;\n}\n\nfunction LookupSummary({ descriptor }: { descriptor: LookupDescriptor }) {\n  const { scope, hierarchy } = descriptor;\n  const parts = [\n    `filter ${descriptor.filter}`,\n    descriptor.searchParam && `search ${descriptor.searchParam}`,\n    descriptor.multi && \"multi-select\",\n    scope && `scope ${scope.param} ← ${scope.from}${scope.map ? ` via ${JSON.stringify(scope.map)}` : \"\"}`,\n    hierarchy && `tree split on ${JSON.stringify(hierarchy.delimiters)}`,\n  ].filter(Boolean);\n  return (\n    <span>\n      GET {descriptor.url} {parts.join(\" · \")}\n    </span>\n  );\n}\n\nfunction ItemSpecSummary({ spec }: { spec: ArrayItemSpec }) {\n  const summary = spec.summary?.map((part) => (typeof part === \"string\" ? part : (part.pattern ?? \"{}\").replace(\"{}\", part.property)));\n  const parts = [\n    spec.title && `title ${spec.title.join(\" | \")}${spec.fallback ? ` (else ${spec.fallback})` : \"\"}`,\n    summary && `summary ${summary.join(\" · \")}`,\n    spec.glyph && `glyph ${spec.glyph}`,\n    spec.badge && `badge ${spec.badge}`,\n    spec.flag && `flag ${spec.flag}`,\n    spec.actions && `actions ${spec.actions.length > 0 ? spec.actions.join(\", \") : \"none\"}`,\n    spec.noun && `noun ${spec.noun}${spec.nounPlural ? `/${spec.nounPlural}` : \"\"}`,\n    spec.empty && `empty \"${spec.empty}\"`,\n  ].filter(Boolean);\n  return <span>{parts.join(\" · \")}</span>;\n}\n\nfunction HelpSummary({ help }: { help: JsonSchemaHelpBlock }) {\n  const origin = [help.source, help.section].filter(Boolean).join(\" › \");\n  return (\n    <span>\n      {origin && <span className=\"text-muted-foreground\">[{origin}] </span>}\n      <span className=\"font-sans\">{help.body}</span>\n    </span>\n  );\n}\n\n// EnumOptionTable joins the x-enum-* maps by value: one row per enum value,\n// then any map key the enum does not list (a typo, or a stale value).\nfunction EnumOptionTable({ prop }: { prop: JsonSchemaProperty }) {\n  const labels = prop[\"x-enum-labels\"] ?? {};\n  const icons = prop[\"x-enum-icons\"] ?? {};\n  const descriptions = prop[\"x-enum-descriptions\"] ?? {};\n  const tones = prop[\"x-enum-tones\"] ?? {};\n  const enumValues = (prop.enum ?? []).map(String);\n  const mapped = [...new Set([labels, icons, descriptions, tones].flatMap((map) => Object.keys(map)))];\n  const values = [...enumValues, ...mapped.filter((value) => !enumValues.includes(value))];\n  const checkEnum = prop.enum !== undefined;\n  const hasIcons = Object.keys(icons).length > 0;\n  return (\n    <div className=\"flex gap-1 font-mono text-[11px]\">\n      <DebugGlyph glyph={KIND_GLYPH.enum} className=\"mt-px\" />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"text-muted-foreground\">x-enum-*</div>\n        <table className=\"w-full\">\n          <thead className=\"text-left text-[10px] text-muted-foreground\">\n            <tr>\n              <th className=\"pr-2 font-normal\">value</th>\n              <th className=\"pr-2 font-normal\">label</th>\n              <th className=\"pr-2 font-normal\">description</th>\n              <th className=\"font-normal\">tone</th>\n            </tr>\n          </thead>\n          <tbody>\n            {values.map((value) => {\n              const tone = tones[value];\n              return (\n                <tr key={value} className=\"align-top\">\n                  <td className=\"pr-2\">\n                    <span className=\"inline-flex items-center gap-1\">\n                      {hasIcons && <LabelIcon icon={icons[value]} className=\"size-3.5\" />}\n                      {value}\n                      {checkEnum && !enumValues.includes(value) && <span className=\"text-amber-700 dark:text-amber-300\"> ⚠ not in enum</span>}\n                    </span>\n                  </td>\n                  <td className=\"pr-2\">{labels[value] ?? \"\"}</td>\n                  <td className=\"pr-2 font-sans\">{descriptions[value] ?? \"\"}</td>\n                  <td>\n                    {tone && (\n                      <span className=\"inline-flex items-center gap-1\">\n                        <span className={cn(\"size-2 rounded-full\", isFieldTone(tone) ? TONE_DOT_CLASS[tone] : \"outline outline-1 outline-rose-500\")} />\n                        {tone}\n                      </span>\n                    )}\n                  </td>\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/json-schema-form-debug-listeners.cjs

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const jsonSchemaFormConditionals = require("./json-schema-form-conditionals.cjs");
+const jsonSchemaFormDebugGlyph = require("./json-schema-form-debug-glyph.cjs");
+const jsonSchemaFormDebugGlyphMap = require("./json-schema-form-debug-glyph-map.cjs");
+const VERBS = ["hide", "show", "enable", "disable", "require", "optional", "reset", "set", "patch"];
+const STATE_BADGE = {
+  true: { label: "holds", className: "text-emerald-700 dark:text-emerald-300" },
+  false: { label: "does not hold", className: "text-muted-foreground" },
+  unknown: { label: "needs evaluator", className: "text-amber-700 dark:text-amber-300" }
+};
+function ListenerList({ listeners, subject }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "mt-0.5 space-y-1", children: listeners.map((listener, index) => {
+    const state = listenerState(listener.when, subject);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        "data-debug-listener": "",
+        "data-active": state,
+        className: utils.cn(
+          "space-y-0.5 rounded border px-1.5 py-1",
+          state === "true" ? "border-emerald-500/50 bg-emerald-500/5" : "border-border"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-10 shrink-0 text-sky-700 dark:text-sky-300", children: "when" }),
+            conditions(listener.when).map((condition, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-condition": "", className: "inline-flex items-center gap-1 rounded bg-muted px-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormDebugGlyph.DebugGlyph, { glyph: condition.glyph }),
+              condition.text
+            ] }, i)),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("ml-auto font-sans text-[10px]", STATE_BADGE[state].className), children: STATE_BADGE[state].label })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ActionRows, { actions: listener, branch: "then", dimmed: state === "false" }),
+          listener.else && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 text-sky-700 dark:text-sky-300", children: "else" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ActionRows, { actions: listener.else, branch: "else", dimmed: state === "true" })
+          ] })
+        ]
+      },
+      index
+    );
+  }) });
+}
+function ActionRows({ actions, branch, dimmed }) {
+  const rows = VERBS.flatMap((verb) => actionRows(verb, actions).map((row) => ({ verb, ...row })));
+  return /* @__PURE__ */ jsxRuntime.jsxs("ul", { ...{ [`data-${branch}`]: "" }, className: utils.cn("space-y-0.5 pl-2", dimmed && "opacity-50"), children: [
+    rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-muted-foreground", children: "nothing" }),
+    rows.map(({ verb, detail, targets }) => /* @__PURE__ */ jsxRuntime.jsxs("li", { "data-action": verb, className: "flex items-start gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormDebugGlyph.DebugGlyph, { glyph: jsonSchemaFormDebugGlyphMap.ACTION_GLYPH[verb], className: "mt-px" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-12 shrink-0", children: verb }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: [
+        detail !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-detail": "", className: "text-muted-foreground", children: detail }),
+        targets.map((target) => /* @__PURE__ */ jsxRuntime.jsx("span", { "data-target": "", className: "rounded bg-muted px-1", children: target }, target))
+      ] })
+    ] }, `${verb}${detail ?? ""}`))
+  ] });
+}
+function actionRows(verb, actions) {
+  if (verb === "set") return groupByDetail(Object.entries(actions.set ?? {}).map(([key, value]) => [key, `= ${JSON.stringify(value)}`]));
+  if (verb === "patch") {
+    return groupByDetail(
+      Object.entries(actions.patch ?? {}).map(([key, patch]) => [
+        key,
+        Object.entries(patch).map(([keyword, value]) => `${keyword}: ${JSON.stringify(value)}`).join(", ")
+      ])
+    );
+  }
+  const targets = actions[verb] ?? [];
+  return targets.length > 0 ? [{ targets }] : [];
+}
+function groupByDetail(entries) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const [key, detail] of entries) grouped.set(detail, [...grouped.get(detail) ?? [], key]);
+  return [...grouped].map(([detail, targets]) => ({ detail, targets }));
+}
+function conditions(when) {
+  if (!when) return [{ glyph: jsonSchemaFormDebugGlyphMap.CONDITION_GLYPH.always, text: "always" }];
+  const { const: constValue, enum: enumValues, not, expr, ...rest } = when;
+  const out = [];
+  if (constValue !== void 0) out.push({ glyph: jsonSchemaFormDebugGlyphMap.CONDITION_GLYPH.const, text: `= ${JSON.stringify(constValue)}` });
+  if (enumValues !== void 0) out.push({ glyph: jsonSchemaFormDebugGlyphMap.CONDITION_GLYPH.enum, text: `∈ ${JSON.stringify(enumValues)}` });
+  if ((not == null ? void 0 : not.const) !== void 0) out.push({ glyph: jsonSchemaFormDebugGlyphMap.CONDITION_GLYPH.not, text: `≠ ${JSON.stringify(not.const)}` });
+  if ((not == null ? void 0 : not.enum) !== void 0) out.push({ glyph: jsonSchemaFormDebugGlyphMap.CONDITION_GLYPH.not, text: `∉ ${JSON.stringify(not.enum)}` });
+  if (not && not.const === void 0 && not.enum === void 0) out.push({ glyph: jsonSchemaFormDebugGlyphMap.CONDITION_GLYPH.not, text: `not ${JSON.stringify(not)}` });
+  if (expr !== void 0) out.push({ glyph: jsonSchemaFormDebugGlyphMap.CONDITION_GLYPH.expr, text: `expr ${expr}` });
+  if (Object.keys(rest).length > 0) out.push({ glyph: jsonSchemaFormDebugGlyphMap.CONDITION_GLYPH.schema, text: JSON.stringify(rest) });
+  return out;
+}
+function listenerState(when, subject) {
+  if (!when) return "true";
+  const { expr, ...predicate } = when;
+  if (Object.keys(predicate).length > 0) {
+    const holds = jsonSchemaFormConditionals.evaluatePredicate(predicate, subject);
+    if (holds === false) return "false";
+    if (holds === void 0) return "unknown";
+  }
+  return expr === void 0 ? "true" : "unknown";
+}
+exports.ListenerList = ListenerList;
+//# sourceMappingURL=json-schema-form-debug-listeners.cjs.map

package/dist/components/json-schema-form-debug-listeners.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-debug-listeners.cjs","sources":["../../src/components/json-schema-form-debug-listeners.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { evaluatePredicate } from \"./json-schema-form-conditionals\";\nimport { DebugGlyph } from \"./json-schema-form-debug-glyph\";\nimport { ACTION_GLYPH, CONDITION_GLYPH, type DebugGlyphPair } from \"./json-schema-form-debug-glyph-map\";\nimport type { ChangeActions, ChangeCondition, ChangeListener } from \"./json-schema-form-types\";\n\n// ListenerList renders an `x-on-change` / `x-on-load` array as one card per\n// listener: its conditions as chips, one row per action with the fields it\n// touches, and its else branch. `subject` is what `when` is evaluated against\n// (the field's value, or the object for x-on-load); the branch that applies to\n// it is marked and the other dimmed. A `when.expr` needs the host's\n// ExpressionEvaluator, which the card does not have, so it stays \"unknown\".\n\ntype ListenerState = \"true\" | \"false\" | \"unknown\";\n\nconst VERBS: (keyof ChangeActions)[] = [\"hide\", \"show\", \"enable\", \"disable\", \"require\", \"optional\", \"reset\", \"set\", \"patch\"];\n\nconst STATE_BADGE: Record<ListenerState, { label: string; className: string }> = {\n  true: { label: \"holds\", className: \"text-emerald-700 dark:text-emerald-300\" },\n  false: { label: \"does not hold\", className: \"text-muted-foreground\" },\n  unknown: { label: \"needs evaluator\", className: \"text-amber-700 dark:text-amber-300\" },\n};\n\nexport function ListenerList({ listeners, subject }: { listeners: ChangeListener[]; subject: unknown }) {\n  return (\n    <ol className=\"mt-0.5 space-y-1\">\n      {listeners.map((listener, index) => {\n        const state = listenerState(listener.when, subject);\n        return (\n          <li\n            key={index}\n            data-debug-listener=\"\"\n            data-active={state}\n            className={cn(\n              \"space-y-0.5 rounded border px-1.5 py-1\",\n              state === \"true\" ? \"border-emerald-500/50 bg-emerald-500/5\" : \"border-border\",\n            )}\n          >\n            <div className=\"flex flex-wrap items-center gap-1\">\n              <span className=\"w-10 shrink-0 text-sky-700 dark:text-sky-300\">when</span>\n              {conditions(listener.when).map((condition, i) => (\n                <span key={i} data-condition=\"\" className=\"inline-flex items-center gap-1 rounded bg-muted px-1\">\n                  <DebugGlyph glyph={condition.glyph} />\n                  {condition.text}\n                </span>\n              ))}\n              <span className={cn(\"ml-auto font-sans text-[10px]\", STATE_BADGE[state].className)}>{STATE_BADGE[state].label}</span>\n            </div>\n            <ActionRows actions={listener} branch=\"then\" dimmed={state === \"false\"} />\n            {listener.else && (\n              <>\n                <div className=\"w-10 text-sky-700 dark:text-sky-300\">else</div>\n                <ActionRows actions={listener.else} branch=\"else\" dimmed={state === \"true\"} />\n              </>\n            )}\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n\nfunction ActionRows({ actions, branch, dimmed }: { actions: ChangeActions; branch: \"then\" | \"else\"; dimmed: boolean }) {\n  const rows = VERBS.flatMap((verb) => actionRows(verb, actions).map((row) => ({ verb, ...row })));\n  return (\n    <ul {...{ [`data-${branch}`]: \"\" }} className={cn(\"space-y-0.5 pl-2\", dimmed && \"opacity-50\")}>\n      {rows.length === 0 && <li className=\"text-muted-foreground\">nothing</li>}\n      {rows.map(({ verb, detail, targets }) => (\n        <li key={`${verb}${detail ?? \"\"}`} data-action={verb} className=\"flex items-start gap-1\">\n          <DebugGlyph glyph={ACTION_GLYPH[verb]} className=\"mt-px\" />\n          <span className=\"w-12 shrink-0\">{verb}</span>\n          <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1\">\n            {detail !== undefined && (\n              <span data-detail=\"\" className=\"text-muted-foreground\">\n                {detail}\n              </span>\n            )}\n            {targets.map((target) => (\n              <span key={target} data-target=\"\" className=\"rounded bg-muted px-1\">\n                {target}\n              </span>\n            ))}\n          </div>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n// actionRows lists one verb's targets. The keyed verbs gather their targets by\n// what they do to them — every field set to \"\", every field patched readOnly —\n// so a listener that touches a dozen siblings reads as a few rows.\nfunction actionRows(verb: keyof ChangeActions, actions: ChangeActions): { detail?: string; targets: string[] }[] {\n  if (verb === \"set\") return groupByDetail(Object.entries(actions.set ?? {}).map(([key, value]) => [key, `= ${JSON.stringify(value)}`]));\n  if (verb === \"patch\") {\n    return groupByDetail(\n      Object.entries(actions.patch ?? {}).map(([key, patch]) => [\n        key,\n        Object.entries(patch)\n          .map(([keyword, value]) => `${keyword}: ${JSON.stringify(value)}`)\n          .join(\", \"),\n      ]),\n    );\n  }\n  const targets = actions[verb] ?? [];\n  return targets.length > 0 ? [{ targets }] : [];\n}\n\nfunction groupByDetail(entries: [string, string][]): { detail: string; targets: string[] }[] {\n  const grouped = new Map<string, string[]>();\n  for (const [key, detail] of entries) grouped.set(detail, [...(grouped.get(detail) ?? []), key]);\n  return [...grouped].map(([detail, targets]) => ({ detail, targets }));\n}\n\nfunction conditions(when: ChangeCondition | undefined): { glyph: DebugGlyphPair; text: string }[] {\n  if (!when) return [{ glyph: CONDITION_GLYPH.always, text: \"always\" }];\n  const { const: constValue, enum: enumValues, not, expr, ...rest } = when;\n  const out: { glyph: DebugGlyphPair; text: string }[] = [];\n  if (constValue !== undefined) out.push({ glyph: CONDITION_GLYPH.const, text: `= ${JSON.stringify(constValue)}` });\n  if (enumValues !== undefined) out.push({ glyph: CONDITION_GLYPH.enum, text: `∈ ${JSON.stringify(enumValues)}` });\n  if (not?.const !== undefined) out.push({ glyph: CONDITION_GLYPH.not, text: `≠ ${JSON.stringify(not.const)}` });\n  if (not?.enum !== undefined) out.push({ glyph: CONDITION_GLYPH.not, text: `∉ ${JSON.stringify(not.enum)}` });\n  if (not && not.const === undefined && not.enum === undefined) out.push({ glyph: CONDITION_GLYPH.not, text: `not ${JSON.stringify(not)}` });\n  if (expr !== undefined) out.push({ glyph: CONDITION_GLYPH.expr, text: `expr ${expr}` });\n  if (Object.keys(rest).length > 0) out.push({ glyph: CONDITION_GLYPH.schema, text: JSON.stringify(rest) });\n  return out;\n}\n\nfunction listenerState(when: ChangeCondition | undefined, subject: unknown): ListenerState {\n  if (!when) return \"true\";\n  const { expr, ...predicate } = when;\n  if (Object.keys(predicate).length > 0) {\n    const holds = evaluatePredicate(predicate, subject);\n    if (holds === false) return \"false\";\n    if (holds === undefined) return \"unknown\";\n  }\n  return expr === undefined ? \"true\" : \"unknown\";\n}\n"],"names":["jsx","jsxs","cn","DebugGlyph","Fragment","ACTION_GLYPH","CONDITION_GLYPH","evaluatePredicate"],"mappings":";;;;;;;AAeA,MAAM,QAAiC,CAAC,QAAQ,QAAQ,UAAU,WAAW,WAAW,YAAY,SAAS,OAAO,OAAO;AAE3H,MAAM,cAA2E;AAAA,EAC/E,MAAM,EAAE,OAAO,SAAS,WAAW,yCAAA;AAAA,EACnC,OAAO,EAAE,OAAO,iBAAiB,WAAW,wBAAA;AAAA,EAC5C,SAAS,EAAE,OAAO,mBAAmB,WAAW,qCAAA;AAClD;AAEO,SAAS,aAAa,EAAE,WAAW,WAA8D;AACtG,SACEA,+BAAC,QAAG,WAAU,oBACX,oBAAU,IAAI,CAAC,UAAU,UAAU;AAClC,UAAM,QAAQ,cAAc,SAAS,MAAM,OAAO;AAClD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC,uBAAoB;AAAA,QACpB,eAAa;AAAA,QACb,WAAWC,MAAAA;AAAAA,UACT;AAAA,UACA,UAAU,SAAS,2CAA2C;AAAA,QAAA;AAAA,QAGhE,UAAA;AAAA,UAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,YAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,gDAA+C,UAAA,QAAI;AAAA,YAClE,WAAW,SAAS,IAAI,EAAE,IAAI,CAAC,WAAW,MACzCC,2BAAAA,KAAC,QAAA,EAAa,kBAAe,IAAG,WAAU,wDACxC,UAAA;AAAA,cAAAD,2BAAAA,IAACG,yBAAAA,YAAA,EAAW,OAAO,UAAU,MAAA,CAAO;AAAA,cACnC,UAAU;AAAA,YAAA,EAAA,GAFF,CAGX,CACD;AAAA,YACDH,2BAAAA,IAAC,QAAA,EAAK,WAAWE,MAAAA,GAAG,iCAAiC,YAAY,KAAK,EAAE,SAAS,GAAI,UAAA,YAAY,KAAK,EAAE,MAAA,CAAM;AAAA,UAAA,GAChH;AAAA,UACAF,+BAAC,cAAW,SAAS,UAAU,QAAO,QAAO,QAAQ,UAAU,SAAS;AAAA,UACvE,SAAS,QACRC,2BAAAA,KAAAG,WAAAA,UAAA,EACE,UAAA;AAAA,YAAAJ,2BAAAA,IAAC,OAAA,EAAI,WAAU,uCAAsC,UAAA,QAAI;AAAA,YACzDA,2BAAAA,IAAC,cAAW,SAAS,SAAS,MAAM,QAAO,QAAO,QAAQ,UAAU,OAAA,CAAQ;AAAA,UAAA,EAAA,CAC9E;AAAA,QAAA;AAAA,MAAA;AAAA,MAvBG;AAAA,IAAA;AAAA,EA2BX,CAAC,EAAA,CACH;AAEJ;AAEA,SAAS,WAAW,EAAE,SAAS,QAAQ,UAAgF;AACrH,QAAM,OAAO,MAAM,QAAQ,CAAC,SAAS,WAAW,MAAM,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,IAAA,EAAM,CAAC;AAC/F,yCACG,MAAA,EAAI,GAAG,EAAE,CAAC,QAAQ,MAAM,EAAE,GAAG,GAAA,GAAM,WAAWE,SAAG,oBAAoB,UAAU,YAAY,GACzF,UAAA;AAAA,IAAA,KAAK,WAAW,KAAKF,+BAAC,MAAA,EAAG,WAAU,yBAAwB,UAAA,WAAO;AAAA,IAClE,KAAK,IAAI,CAAC,EAAE,MAAM,QAAQ,QAAA,MACzBC,2BAAAA,KAAC,MAAA,EAAkC,eAAa,MAAM,WAAU,0BAC9D,UAAA;AAAA,MAAAD,+BAACG,yBAAAA,cAAW,OAAOE,4BAAAA,aAAa,IAAI,GAAG,WAAU,SAAQ;AAAA,MACzDL,2BAAAA,IAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,MAAK;AAAA,MACtCC,2BAAAA,KAAC,OAAA,EAAI,WAAU,oDACZ,UAAA;AAAA,QAAA,WAAW,UACVD,+BAAC,QAAA,EAAK,eAAY,IAAG,WAAU,yBAC5B,UAAA,OAAA,CACH;AAAA,QAED,QAAQ,IAAI,CAAC,WACZA,2BAAAA,IAAC,QAAA,EAAkB,eAAY,IAAG,WAAU,yBACzC,UAAA,OAAA,GADQ,MAEX,CACD;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,GAdO,GAAG,IAAI,GAAG,UAAU,EAAE,EAe/B,CACD;AAAA,EAAA,GACH;AAEJ;AAKA,SAAS,WAAW,MAA2B,SAAkE;AAC/G,MAAI,SAAS,MAAO,QAAO,cAAc,OAAO,QAAQ,QAAQ,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,KAAK,KAAK,UAAU,KAAK,CAAC,EAAE,CAAC,CAAC;AACrI,MAAI,SAAS,SAAS;AACpB,WAAO;AAAA,MACL,OAAO,QAAQ,QAAQ,SAAS,CAAA,CAAE,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAAA,QACxD;AAAA,QACA,OAAO,QAAQ,KAAK,EACjB,IAAI,CAAC,CAAC,SAAS,KAAK,MAAM,GAAG,OAAO,KAAK,KAAK,UAAU,KAAK,CAAC,EAAE,EAChE,KAAK,IAAI;AAAA,MAAA,CACb;AAAA,IAAA;AAAA,EAEL;AACA,QAAM,UAAU,QAAQ,IAAI,KAAK,CAAA;AACjC,SAAO,QAAQ,SAAS,IAAI,CAAC,EAAE,QAAA,CAAS,IAAI,CAAA;AAC9C;AAEA,SAAS,cAAc,SAAsE;AAC3F,QAAM,8BAAc,IAAA;AACpB,aAAW,CAAC,KAAK,MAAM,KAAK,iBAAiB,IAAI,QAAQ,CAAC,GAAI,QAAQ,IAAI,MAAM,KAAK,CAAA,GAAK,GAAG,CAAC;AAC9F,SAAO,CAAC,GAAG,OAAO,EAAE,IAAI,CAAC,CAAC,QAAQ,OAAO,OAAO,EAAE,QAAQ,UAAU;AACtE;AAEA,SAAS,WAAW,MAA8E;AAChG,MAAI,CAAC,KAAM,QAAO,CAAC,EAAE,OAAOM,4BAAAA,gBAAgB,QAAQ,MAAM,UAAU;AACpE,QAAM,EAAE,OAAO,YAAY,MAAM,YAAY,KAAK,MAAM,GAAG,KAAA,IAAS;AACpE,QAAM,MAAiD,CAAA;AACvD,MAAI,eAAe,OAAW,KAAI,KAAK,EAAE,OAAOA,4CAAgB,OAAO,MAAM,KAAK,KAAK,UAAU,UAAU,CAAC,IAAI;AAChH,MAAI,eAAe,OAAW,KAAI,KAAK,EAAE,OAAOA,4CAAgB,MAAM,MAAM,KAAK,KAAK,UAAU,UAAU,CAAC,IAAI;AAC/G,OAAI,2BAAK,WAAU,OAAW,KAAI,KAAK,EAAE,OAAOA,4CAAgB,KAAK,MAAM,KAAK,KAAK,UAAU,IAAI,KAAK,CAAC,IAAI;AAC7G,OAAI,2BAAK,UAAS,OAAW,KAAI,KAAK,EAAE,OAAOA,4CAAgB,KAAK,MAAM,KAAK,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI;AAC3G,MAAI,OAAO,IAAI,UAAU,UAAa,IAAI,SAAS,YAAe,KAAK,EAAE,OAAOA,4CAAgB,KAAK,MAAM,OAAO,KAAK,UAAU,GAAG,CAAC,IAAI;AACzI,MAAI,SAAS,OAAW,KAAI,KAAK,EAAE,OAAOA,4CAAgB,MAAM,MAAM,QAAQ,IAAI,GAAA,CAAI;AACtF,MAAI,OAAO,KAAK,IAAI,EAAE,SAAS,EAAG,KAAI,KAAK,EAAE,OAAOA,4BAAAA,gBAAgB,QAAQ,MAAM,KAAK,UAAU,IAAI,GAAG;AACxG,SAAO;AACT;AAEA,SAAS,cAAc,MAAmC,SAAiC;AACzF,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,EAAE,MAAM,GAAG,UAAA,IAAc;AAC/B,MAAI,OAAO,KAAK,SAAS,EAAE,SAAS,GAAG;AACrC,UAAM,QAAQC,2BAAAA,kBAAkB,WAAW,OAAO;AAClD,QAAI,UAAU,MAAO,QAAO;AAC5B,QAAI,UAAU,OAAW,QAAO;AAAA,EAClC;AACA,SAAO,SAAS,SAAY,SAAS;AACvC;;"}

package/dist/components/json-schema-form-debug-listeners.d.ts

@@ -0,0 +1,6 @@
+import { ChangeListener } from './json-schema-form-types.js';
+export declare function ListenerList({ listeners, subject }: {
+    listeners: ChangeListener[];
+    subject: unknown;
+}): import("react").JSX.Element;
+//# sourceMappingURL=json-schema-form-debug-listeners.d.ts.map

package/dist/components/json-schema-form-debug-listeners.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-debug-listeners.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-debug-listeners.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAkC,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAmB/F,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE;IAAE,SAAS,EAAE,cAAc,EAAE,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,+BAqCrG"}

package/dist/components/json-schema-form-debug-listeners.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { evaluatePredicate } from "./json-schema-form-conditionals.js";
+import { DebugGlyph } from "./json-schema-form-debug-glyph.js";
+import { CONDITION_GLYPH, ACTION_GLYPH } from "./json-schema-form-debug-glyph-map.js";
+const VERBS = ["hide", "show", "enable", "disable", "require", "optional", "reset", "set", "patch"];
+const STATE_BADGE = {
+  true: { label: "holds", className: "text-emerald-700 dark:text-emerald-300" },
+  false: { label: "does not hold", className: "text-muted-foreground" },
+  unknown: { label: "needs evaluator", className: "text-amber-700 dark:text-amber-300" }
+};
+function ListenerList({ listeners, subject }) {
+  return /* @__PURE__ */ jsx("ol", { className: "mt-0.5 space-y-1", children: listeners.map((listener, index) => {
+    const state = listenerState(listener.when, subject);
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        "data-debug-listener": "",
+        "data-active": state,
+        className: cn(
+          "space-y-0.5 rounded border px-1.5 py-1",
+          state === "true" ? "border-emerald-500/50 bg-emerald-500/5" : "border-border"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "w-10 shrink-0 text-sky-700 dark:text-sky-300", children: "when" }),
+            conditions(listener.when).map((condition, i) => /* @__PURE__ */ jsxs("span", { "data-condition": "", className: "inline-flex items-center gap-1 rounded bg-muted px-1", children: [
+              /* @__PURE__ */ jsx(DebugGlyph, { glyph: condition.glyph }),
+              condition.text
+            ] }, i)),
+            /* @__PURE__ */ jsx("span", { className: cn("ml-auto font-sans text-[10px]", STATE_BADGE[state].className), children: STATE_BADGE[state].label })
+          ] }),
+          /* @__PURE__ */ jsx(ActionRows, { actions: listener, branch: "then", dimmed: state === "false" }),
+          listener.else && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "w-10 text-sky-700 dark:text-sky-300", children: "else" }),
+            /* @__PURE__ */ jsx(ActionRows, { actions: listener.else, branch: "else", dimmed: state === "true" })
+          ] })
+        ]
+      },
+      index
+    );
+  }) });
+}
+function ActionRows({ actions, branch, dimmed }) {
+  const rows = VERBS.flatMap((verb) => actionRows(verb, actions).map((row) => ({ verb, ...row })));
+  return /* @__PURE__ */ jsxs("ul", { ...{ [`data-${branch}`]: "" }, className: cn("space-y-0.5 pl-2", dimmed && "opacity-50"), children: [
+    rows.length === 0 && /* @__PURE__ */ jsx("li", { className: "text-muted-foreground", children: "nothing" }),
+    rows.map(({ verb, detail, targets }) => /* @__PURE__ */ jsxs("li", { "data-action": verb, className: "flex items-start gap-1", children: [
+      /* @__PURE__ */ jsx(DebugGlyph, { glyph: ACTION_GLYPH[verb], className: "mt-px" }),
+      /* @__PURE__ */ jsx("span", { className: "w-12 shrink-0", children: verb }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: [
+        detail !== void 0 && /* @__PURE__ */ jsx("span", { "data-detail": "", className: "text-muted-foreground", children: detail }),
+        targets.map((target) => /* @__PURE__ */ jsx("span", { "data-target": "", className: "rounded bg-muted px-1", children: target }, target))
+      ] })
+    ] }, `${verb}${detail ?? ""}`))
+  ] });
+}
+function actionRows(verb, actions) {
+  if (verb === "set") return groupByDetail(Object.entries(actions.set ?? {}).map(([key, value]) => [key, `= ${JSON.stringify(value)}`]));
+  if (verb === "patch") {
+    return groupByDetail(
+      Object.entries(actions.patch ?? {}).map(([key, patch]) => [
+        key,
+        Object.entries(patch).map(([keyword, value]) => `${keyword}: ${JSON.stringify(value)}`).join(", ")
+      ])
+    );
+  }
+  const targets = actions[verb] ?? [];
+  return targets.length > 0 ? [{ targets }] : [];
+}
+function groupByDetail(entries) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const [key, detail] of entries) grouped.set(detail, [...grouped.get(detail) ?? [], key]);
+  return [...grouped].map(([detail, targets]) => ({ detail, targets }));
+}
+function conditions(when) {
+  if (!when) return [{ glyph: CONDITION_GLYPH.always, text: "always" }];
+  const { const: constValue, enum: enumValues, not, expr, ...rest } = when;
+  const out = [];
+  if (constValue !== void 0) out.push({ glyph: CONDITION_GLYPH.const, text: `= ${JSON.stringify(constValue)}` });
+  if (enumValues !== void 0) out.push({ glyph: CONDITION_GLYPH.enum, text: `∈ ${JSON.stringify(enumValues)}` });
+  if ((not == null ? void 0 : not.const) !== void 0) out.push({ glyph: CONDITION_GLYPH.not, text: `≠ ${JSON.stringify(not.const)}` });
+  if ((not == null ? void 0 : not.enum) !== void 0) out.push({ glyph: CONDITION_GLYPH.not, text: `∉ ${JSON.stringify(not.enum)}` });
+  if (not && not.const === void 0 && not.enum === void 0) out.push({ glyph: CONDITION_GLYPH.not, text: `not ${JSON.stringify(not)}` });
+  if (expr !== void 0) out.push({ glyph: CONDITION_GLYPH.expr, text: `expr ${expr}` });
+  if (Object.keys(rest).length > 0) out.push({ glyph: CONDITION_GLYPH.schema, text: JSON.stringify(rest) });
+  return out;
+}
+function listenerState(when, subject) {
+  if (!when) return "true";
+  const { expr, ...predicate } = when;
+  if (Object.keys(predicate).length > 0) {
+    const holds = evaluatePredicate(predicate, subject);
+    if (holds === false) return "false";
+    if (holds === void 0) return "unknown";
+  }
+  return expr === void 0 ? "true" : "unknown";
+}
+export {
+  ListenerList
+};
+//# sourceMappingURL=json-schema-form-debug-listeners.js.map

package/dist/components/json-schema-form-debug-listeners.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-debug-listeners.js","sources":["../../src/components/json-schema-form-debug-listeners.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { evaluatePredicate } from \"./json-schema-form-conditionals\";\nimport { DebugGlyph } from \"./json-schema-form-debug-glyph\";\nimport { ACTION_GLYPH, CONDITION_GLYPH, type DebugGlyphPair } from \"./json-schema-form-debug-glyph-map\";\nimport type { ChangeActions, ChangeCondition, ChangeListener } from \"./json-schema-form-types\";\n\n// ListenerList renders an `x-on-change` / `x-on-load` array as one card per\n// listener: its conditions as chips, one row per action with the fields it\n// touches, and its else branch. `subject` is what `when` is evaluated against\n// (the field's value, or the object for x-on-load); the branch that applies to\n// it is marked and the other dimmed. A `when.expr` needs the host's\n// ExpressionEvaluator, which the card does not have, so it stays \"unknown\".\n\ntype ListenerState = \"true\" | \"false\" | \"unknown\";\n\nconst VERBS: (keyof ChangeActions)[] = [\"hide\", \"show\", \"enable\", \"disable\", \"require\", \"optional\", \"reset\", \"set\", \"patch\"];\n\nconst STATE_BADGE: Record<ListenerState, { label: string; className: string }> = {\n  true: { label: \"holds\", className: \"text-emerald-700 dark:text-emerald-300\" },\n  false: { label: \"does not hold\", className: \"text-muted-foreground\" },\n  unknown: { label: \"needs evaluator\", className: \"text-amber-700 dark:text-amber-300\" },\n};\n\nexport function ListenerList({ listeners, subject }: { listeners: ChangeListener[]; subject: unknown }) {\n  return (\n    <ol className=\"mt-0.5 space-y-1\">\n      {listeners.map((listener, index) => {\n        const state = listenerState(listener.when, subject);\n        return (\n          <li\n            key={index}\n            data-debug-listener=\"\"\n            data-active={state}\n            className={cn(\n              \"space-y-0.5 rounded border px-1.5 py-1\",\n              state === \"true\" ? \"border-emerald-500/50 bg-emerald-500/5\" : \"border-border\",\n            )}\n          >\n            <div className=\"flex flex-wrap items-center gap-1\">\n              <span className=\"w-10 shrink-0 text-sky-700 dark:text-sky-300\">when</span>\n              {conditions(listener.when).map((condition, i) => (\n                <span key={i} data-condition=\"\" className=\"inline-flex items-center gap-1 rounded bg-muted px-1\">\n                  <DebugGlyph glyph={condition.glyph} />\n                  {condition.text}\n                </span>\n              ))}\n              <span className={cn(\"ml-auto font-sans text-[10px]\", STATE_BADGE[state].className)}>{STATE_BADGE[state].label}</span>\n            </div>\n            <ActionRows actions={listener} branch=\"then\" dimmed={state === \"false\"} />\n            {listener.else && (\n              <>\n                <div className=\"w-10 text-sky-700 dark:text-sky-300\">else</div>\n                <ActionRows actions={listener.else} branch=\"else\" dimmed={state === \"true\"} />\n              </>\n            )}\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n\nfunction ActionRows({ actions, branch, dimmed }: { actions: ChangeActions; branch: \"then\" | \"else\"; dimmed: boolean }) {\n  const rows = VERBS.flatMap((verb) => actionRows(verb, actions).map((row) => ({ verb, ...row })));\n  return (\n    <ul {...{ [`data-${branch}`]: \"\" }} className={cn(\"space-y-0.5 pl-2\", dimmed && \"opacity-50\")}>\n      {rows.length === 0 && <li className=\"text-muted-foreground\">nothing</li>}\n      {rows.map(({ verb, detail, targets }) => (\n        <li key={`${verb}${detail ?? \"\"}`} data-action={verb} className=\"flex items-start gap-1\">\n          <DebugGlyph glyph={ACTION_GLYPH[verb]} className=\"mt-px\" />\n          <span className=\"w-12 shrink-0\">{verb}</span>\n          <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1\">\n            {detail !== undefined && (\n              <span data-detail=\"\" className=\"text-muted-foreground\">\n                {detail}\n              </span>\n            )}\n            {targets.map((target) => (\n              <span key={target} data-target=\"\" className=\"rounded bg-muted px-1\">\n                {target}\n              </span>\n            ))}\n          </div>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n// actionRows lists one verb's targets. The keyed verbs gather their targets by\n// what they do to them — every field set to \"\", every field patched readOnly —\n// so a listener that touches a dozen siblings reads as a few rows.\nfunction actionRows(verb: keyof ChangeActions, actions: ChangeActions): { detail?: string; targets: string[] }[] {\n  if (verb === \"set\") return groupByDetail(Object.entries(actions.set ?? {}).map(([key, value]) => [key, `= ${JSON.stringify(value)}`]));\n  if (verb === \"patch\") {\n    return groupByDetail(\n      Object.entries(actions.patch ?? {}).map(([key, patch]) => [\n        key,\n        Object.entries(patch)\n          .map(([keyword, value]) => `${keyword}: ${JSON.stringify(value)}`)\n          .join(\", \"),\n      ]),\n    );\n  }\n  const targets = actions[verb] ?? [];\n  return targets.length > 0 ? [{ targets }] : [];\n}\n\nfunction groupByDetail(entries: [string, string][]): { detail: string; targets: string[] }[] {\n  const grouped = new Map<string, string[]>();\n  for (const [key, detail] of entries) grouped.set(detail, [...(grouped.get(detail) ?? []), key]);\n  return [...grouped].map(([detail, targets]) => ({ detail, targets }));\n}\n\nfunction conditions(when: ChangeCondition | undefined): { glyph: DebugGlyphPair; text: string }[] {\n  if (!when) return [{ glyph: CONDITION_GLYPH.always, text: \"always\" }];\n  const { const: constValue, enum: enumValues, not, expr, ...rest } = when;\n  const out: { glyph: DebugGlyphPair; text: string }[] = [];\n  if (constValue !== undefined) out.push({ glyph: CONDITION_GLYPH.const, text: `= ${JSON.stringify(constValue)}` });\n  if (enumValues !== undefined) out.push({ glyph: CONDITION_GLYPH.enum, text: `∈ ${JSON.stringify(enumValues)}` });\n  if (not?.const !== undefined) out.push({ glyph: CONDITION_GLYPH.not, text: `≠ ${JSON.stringify(not.const)}` });\n  if (not?.enum !== undefined) out.push({ glyph: CONDITION_GLYPH.not, text: `∉ ${JSON.stringify(not.enum)}` });\n  if (not && not.const === undefined && not.enum === undefined) out.push({ glyph: CONDITION_GLYPH.not, text: `not ${JSON.stringify(not)}` });\n  if (expr !== undefined) out.push({ glyph: CONDITION_GLYPH.expr, text: `expr ${expr}` });\n  if (Object.keys(rest).length > 0) out.push({ glyph: CONDITION_GLYPH.schema, text: JSON.stringify(rest) });\n  return out;\n}\n\nfunction listenerState(when: ChangeCondition | undefined, subject: unknown): ListenerState {\n  if (!when) return \"true\";\n  const { expr, ...predicate } = when;\n  if (Object.keys(predicate).length > 0) {\n    const holds = evaluatePredicate(predicate, subject);\n    if (holds === false) return \"false\";\n    if (holds === undefined) return \"unknown\";\n  }\n  return expr === undefined ? \"true\" : \"unknown\";\n}\n"],"names":[],"mappings":";;;;;AAeA,MAAM,QAAiC,CAAC,QAAQ,QAAQ,UAAU,WAAW,WAAW,YAAY,SAAS,OAAO,OAAO;AAE3H,MAAM,cAA2E;AAAA,EAC/E,MAAM,EAAE,OAAO,SAAS,WAAW,yCAAA;AAAA,EACnC,OAAO,EAAE,OAAO,iBAAiB,WAAW,wBAAA;AAAA,EAC5C,SAAS,EAAE,OAAO,mBAAmB,WAAW,qCAAA;AAClD;AAEO,SAAS,aAAa,EAAE,WAAW,WAA8D;AACtG,SACE,oBAAC,QAAG,WAAU,oBACX,oBAAU,IAAI,CAAC,UAAU,UAAU;AAClC,UAAM,QAAQ,cAAc,SAAS,MAAM,OAAO;AAClD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,uBAAoB;AAAA,QACpB,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA,UAAU,SAAS,2CAA2C;AAAA,QAAA;AAAA,QAGhE,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAK,WAAU,gDAA+C,UAAA,QAAI;AAAA,YAClE,WAAW,SAAS,IAAI,EAAE,IAAI,CAAC,WAAW,MACzC,qBAAC,QAAA,EAAa,kBAAe,IAAG,WAAU,wDACxC,UAAA;AAAA,cAAA,oBAAC,YAAA,EAAW,OAAO,UAAU,MAAA,CAAO;AAAA,cACnC,UAAU;AAAA,YAAA,EAAA,GAFF,CAGX,CACD;AAAA,YACD,oBAAC,QAAA,EAAK,WAAW,GAAG,iCAAiC,YAAY,KAAK,EAAE,SAAS,GAAI,UAAA,YAAY,KAAK,EAAE,MAAA,CAAM;AAAA,UAAA,GAChH;AAAA,UACA,oBAAC,cAAW,SAAS,UAAU,QAAO,QAAO,QAAQ,UAAU,SAAS;AAAA,UACvE,SAAS,QACR,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,uCAAsC,UAAA,QAAI;AAAA,YACzD,oBAAC,cAAW,SAAS,SAAS,MAAM,QAAO,QAAO,QAAQ,UAAU,OAAA,CAAQ;AAAA,UAAA,EAAA,CAC9E;AAAA,QAAA;AAAA,MAAA;AAAA,MAvBG;AAAA,IAAA;AAAA,EA2BX,CAAC,EAAA,CACH;AAEJ;AAEA,SAAS,WAAW,EAAE,SAAS,QAAQ,UAAgF;AACrH,QAAM,OAAO,MAAM,QAAQ,CAAC,SAAS,WAAW,MAAM,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,IAAA,EAAM,CAAC;AAC/F,8BACG,MAAA,EAAI,GAAG,EAAE,CAAC,QAAQ,MAAM,EAAE,GAAG,GAAA,GAAM,WAAW,GAAG,oBAAoB,UAAU,YAAY,GACzF,UAAA;AAAA,IAAA,KAAK,WAAW,KAAK,oBAAC,MAAA,EAAG,WAAU,yBAAwB,UAAA,WAAO;AAAA,IAClE,KAAK,IAAI,CAAC,EAAE,MAAM,QAAQ,QAAA,MACzB,qBAAC,MAAA,EAAkC,eAAa,MAAM,WAAU,0BAC9D,UAAA;AAAA,MAAA,oBAAC,cAAW,OAAO,aAAa,IAAI,GAAG,WAAU,SAAQ;AAAA,MACzD,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,MAAK;AAAA,MACtC,qBAAC,OAAA,EAAI,WAAU,oDACZ,UAAA;AAAA,QAAA,WAAW,UACV,oBAAC,QAAA,EAAK,eAAY,IAAG,WAAU,yBAC5B,UAAA,OAAA,CACH;AAAA,QAED,QAAQ,IAAI,CAAC,WACZ,oBAAC,QAAA,EAAkB,eAAY,IAAG,WAAU,yBACzC,UAAA,OAAA,GADQ,MAEX,CACD;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,GAdO,GAAG,IAAI,GAAG,UAAU,EAAE,EAe/B,CACD;AAAA,EAAA,GACH;AAEJ;AAKA,SAAS,WAAW,MAA2B,SAAkE;AAC/G,MAAI,SAAS,MAAO,QAAO,cAAc,OAAO,QAAQ,QAAQ,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,KAAK,KAAK,UAAU,KAAK,CAAC,EAAE,CAAC,CAAC;AACrI,MAAI,SAAS,SAAS;AACpB,WAAO;AAAA,MACL,OAAO,QAAQ,QAAQ,SAAS,CAAA,CAAE,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAAA,QACxD;AAAA,QACA,OAAO,QAAQ,KAAK,EACjB,IAAI,CAAC,CAAC,SAAS,KAAK,MAAM,GAAG,OAAO,KAAK,KAAK,UAAU,KAAK,CAAC,EAAE,EAChE,KAAK,IAAI;AAAA,MAAA,CACb;AAAA,IAAA;AAAA,EAEL;AACA,QAAM,UAAU,QAAQ,IAAI,KAAK,CAAA;AACjC,SAAO,QAAQ,SAAS,IAAI,CAAC,EAAE,QAAA,CAAS,IAAI,CAAA;AAC9C;AAEA,SAAS,cAAc,SAAsE;AAC3F,QAAM,8BAAc,IAAA;AACpB,aAAW,CAAC,KAAK,MAAM,KAAK,iBAAiB,IAAI,QAAQ,CAAC,GAAI,QAAQ,IAAI,MAAM,KAAK,CAAA,GAAK,GAAG,CAAC;AAC9F,SAAO,CAAC,GAAG,OAAO,EAAE,IAAI,CAAC,CAAC,QAAQ,OAAO,OAAO,EAAE,QAAQ,UAAU;AACtE;AAEA,SAAS,WAAW,MAA8E;AAChG,MAAI,CAAC,KAAM,QAAO,CAAC,EAAE,OAAO,gBAAgB,QAAQ,MAAM,UAAU;AACpE,QAAM,EAAE,OAAO,YAAY,MAAM,YAAY,KAAK,MAAM,GAAG,KAAA,IAAS;AACpE,QAAM,MAAiD,CAAA;AACvD,MAAI,eAAe,OAAW,KAAI,KAAK,EAAE,OAAO,gBAAgB,OAAO,MAAM,KAAK,KAAK,UAAU,UAAU,CAAC,IAAI;AAChH,MAAI,eAAe,OAAW,KAAI,KAAK,EAAE,OAAO,gBAAgB,MAAM,MAAM,KAAK,KAAK,UAAU,UAAU,CAAC,IAAI;AAC/G,OAAI,2BAAK,WAAU,OAAW,KAAI,KAAK,EAAE,OAAO,gBAAgB,KAAK,MAAM,KAAK,KAAK,UAAU,IAAI,KAAK,CAAC,IAAI;AAC7G,OAAI,2BAAK,UAAS,OAAW,KAAI,KAAK,EAAE,OAAO,gBAAgB,KAAK,MAAM,KAAK,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI;AAC3G,MAAI,OAAO,IAAI,UAAU,UAAa,IAAI,SAAS,YAAe,KAAK,EAAE,OAAO,gBAAgB,KAAK,MAAM,OAAO,KAAK,UAAU,GAAG,CAAC,IAAI;AACzI,MAAI,SAAS,OAAW,KAAI,KAAK,EAAE,OAAO,gBAAgB,MAAM,MAAM,QAAQ,IAAI,GAAA,CAAI;AACtF,MAAI,OAAO,KAAK,IAAI,EAAE,SAAS,EAAG,KAAI,KAAK,EAAE,OAAO,gBAAgB,QAAQ,MAAM,KAAK,UAAU,IAAI,GAAG;AACxG,SAAO;AACT;AAEA,SAAS,cAAc,MAAmC,SAAiC;AACzF,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,EAAE,MAAM,GAAG,UAAA,IAAc;AAC/B,MAAI,OAAO,KAAK,SAAS,EAAE,SAAS,GAAG;AACrC,UAAM,QAAQ,kBAAkB,WAAW,OAAO;AAClD,QAAI,UAAU,MAAO,QAAO;AAC5B,QAAI,UAAU,OAAW,QAAO;AAAA,EAClC;AACA,SAAO,SAAS,SAAY,SAAS;AACvC;"}

package/dist/components/json-schema-form-debug.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const jsonSchemaFormDebugBadge = require("./json-schema-form-debug-badge.cjs");
+function withFieldDebug(nodes, info) {
+  const hidden = info.hiddenReason !== void 0;
+  const badge = /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormDebugBadge.FieldDebugBadge, { ...info });
+  const value = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-debug-field": info.fieldKey,
+      ...hidden ? { "data-debug-hidden": info.hiddenReason } : {},
+      className: utils.cn("min-w-0", hidden && "rounded-md opacity-60 outline-dashed outline-1 outline-offset-2 outline-muted-foreground/60"),
+      children: [
+        nodes.label === null ? badge : null,
+        nodes.value
+      ]
+    }
+  );
+  if (nodes.label === null) return { label: null, value };
+  return {
+    label: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils.cn("inline-flex min-w-0 items-center gap-1", hidden && "opacity-60"), children: [
+      nodes.label,
+      badge
+    ] }),
+    value
+  };
+}
+exports.withFieldDebug = withFieldDebug;
+//# sourceMappingURL=json-schema-form-debug.cjs.map

package/dist/components/json-schema-form-debug.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-debug.cjs","sources":["../../src/components/json-schema-form-debug.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { FieldDebugBadge, type FieldDebugInfo } from \"./json-schema-form-debug-badge\";\n\n// Debug mode (the display-options menu's Debug) renders the fields the form\n// would hide, dimmed and outlined, and gives every field a badge whose hover\n// card says where it comes from: its key and instance path, the control it\n// resolved to, why it is hidden, and the schema keywords that source its\n// value, options and state.\n\nexport type { FieldDebugInfo };\n\n// withFieldDebug decorates a field's label/value nodes: the badge beside the\n// label (or atop the value when the field has no label), and the value marked\n// `data-debug-field` / `data-debug-hidden` and dimmed when the form would hide it.\nexport function withFieldDebug(nodes: { label: ReactNode; value: ReactNode }, info: FieldDebugInfo): { label: ReactNode; value: ReactNode } {\n  const hidden = info.hiddenReason !== undefined;\n  const badge = <FieldDebugBadge {...info} />;\n  const value = (\n    <div\n      data-debug-field={info.fieldKey}\n      {...(hidden ? { \"data-debug-hidden\": info.hiddenReason } : {})}\n      className={cn(\"min-w-0\", hidden && \"rounded-md opacity-60 outline-dashed outline-1 outline-offset-2 outline-muted-foreground/60\")}\n    >\n      {nodes.label === null ? badge : null}\n      {nodes.value}\n    </div>\n  );\n  if (nodes.label === null) return { label: null, value };\n  return {\n    label: (\n      <span className={cn(\"inline-flex min-w-0 items-center gap-1\", hidden && \"opacity-60\")}>\n        {nodes.label}\n        {badge}\n      </span>\n    ),\n    value,\n  };\n}\n"],"names":["jsx","FieldDebugBadge","jsxs","cn"],"mappings":";;;;;AAeO,SAAS,eAAe,OAA+C,MAA8D;AAC1I,QAAM,SAAS,KAAK,iBAAiB;AACrC,QAAM,QAAQA,2BAAAA,IAACC,yBAAAA,iBAAA,EAAiB,GAAG,KAAA,CAAM;AACzC,QAAM,QACJC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,oBAAkB,KAAK;AAAA,MACtB,GAAI,SAAS,EAAE,qBAAqB,KAAK,aAAA,IAAiB,CAAA;AAAA,MAC3D,WAAWC,MAAAA,GAAG,WAAW,UAAU,6FAA6F;AAAA,MAE/H,UAAA;AAAA,QAAA,MAAM,UAAU,OAAO,QAAQ;AAAA,QAC/B,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGX,MAAI,MAAM,UAAU,aAAa,EAAE,OAAO,MAAM,MAAA;AAChD,SAAO;AAAA,IACL,uCACG,QAAA,EAAK,WAAWA,SAAG,0CAA0C,UAAU,YAAY,GACjF,UAAA;AAAA,MAAA,MAAM;AAAA,MACN;AAAA,IAAA,GACH;AAAA,IAEF;AAAA,EAAA;AAEJ;;"}

package/dist/components/json-schema-form-debug.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { FieldDebugInfo } from './json-schema-form-debug-badge.js';
+export type { FieldDebugInfo };
+export declare function withFieldDebug(nodes: {
+    label: ReactNode;
+    value: ReactNode;
+}, info: FieldDebugInfo): {
+    label: ReactNode;
+    value: ReactNode;
+};
+//# sourceMappingURL=json-schema-form-debug.d.ts.map

package/dist/components/json-schema-form-debug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-debug.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-debug.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAQtF,YAAY,EAAE,cAAc,EAAE,CAAC;AAK/B,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,EAAE,IAAI,EAAE,cAAc,GAAG;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,CAuB1I"}

package/dist/components/json-schema-form-debug.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { FieldDebugBadge } from "./json-schema-form-debug-badge.js";
+function withFieldDebug(nodes, info) {
+  const hidden = info.hiddenReason !== void 0;
+  const badge = /* @__PURE__ */ jsx(FieldDebugBadge, { ...info });
+  const value = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-debug-field": info.fieldKey,
+      ...hidden ? { "data-debug-hidden": info.hiddenReason } : {},
+      className: cn("min-w-0", hidden && "rounded-md opacity-60 outline-dashed outline-1 outline-offset-2 outline-muted-foreground/60"),
+      children: [
+        nodes.label === null ? badge : null,
+        nodes.value
+      ]
+    }
+  );
+  if (nodes.label === null) return { label: null, value };
+  return {
+    label: /* @__PURE__ */ jsxs("span", { className: cn("inline-flex min-w-0 items-center gap-1", hidden && "opacity-60"), children: [
+      nodes.label,
+      badge
+    ] }),
+    value
+  };
+}
+export {
+  withFieldDebug
+};
+//# sourceMappingURL=json-schema-form-debug.js.map

package/dist/components/json-schema-form-debug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-debug.js","sources":["../../src/components/json-schema-form-debug.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { FieldDebugBadge, type FieldDebugInfo } from \"./json-schema-form-debug-badge\";\n\n// Debug mode (the display-options menu's Debug) renders the fields the form\n// would hide, dimmed and outlined, and gives every field a badge whose hover\n// card says where it comes from: its key and instance path, the control it\n// resolved to, why it is hidden, and the schema keywords that source its\n// value, options and state.\n\nexport type { FieldDebugInfo };\n\n// withFieldDebug decorates a field's label/value nodes: the badge beside the\n// label (or atop the value when the field has no label), and the value marked\n// `data-debug-field` / `data-debug-hidden` and dimmed when the form would hide it.\nexport function withFieldDebug(nodes: { label: ReactNode; value: ReactNode }, info: FieldDebugInfo): { label: ReactNode; value: ReactNode } {\n  const hidden = info.hiddenReason !== undefined;\n  const badge = <FieldDebugBadge {...info} />;\n  const value = (\n    <div\n      data-debug-field={info.fieldKey}\n      {...(hidden ? { \"data-debug-hidden\": info.hiddenReason } : {})}\n      className={cn(\"min-w-0\", hidden && \"rounded-md opacity-60 outline-dashed outline-1 outline-offset-2 outline-muted-foreground/60\")}\n    >\n      {nodes.label === null ? badge : null}\n      {nodes.value}\n    </div>\n  );\n  if (nodes.label === null) return { label: null, value };\n  return {\n    label: (\n      <span className={cn(\"inline-flex min-w-0 items-center gap-1\", hidden && \"opacity-60\")}>\n        {nodes.label}\n        {badge}\n      </span>\n    ),\n    value,\n  };\n}\n"],"names":[],"mappings":";;;AAeO,SAAS,eAAe,OAA+C,MAA8D;AAC1I,QAAM,SAAS,KAAK,iBAAiB;AACrC,QAAM,QAAQ,oBAAC,iBAAA,EAAiB,GAAG,KAAA,CAAM;AACzC,QAAM,QACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,oBAAkB,KAAK;AAAA,MACtB,GAAI,SAAS,EAAE,qBAAqB,KAAK,aAAA,IAAiB,CAAA;AAAA,MAC3D,WAAW,GAAG,WAAW,UAAU,6FAA6F;AAAA,MAE/H,UAAA;AAAA,QAAA,MAAM,UAAU,OAAO,QAAQ;AAAA,QAC/B,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGX,MAAI,MAAM,UAAU,aAAa,EAAE,OAAO,MAAM,MAAA;AAChD,SAAO;AAAA,IACL,4BACG,QAAA,EAAK,WAAW,GAAG,0CAA0C,UAAU,YAAY,GACjF,UAAA;AAAA,MAAA,MAAM;AAAA,MACN;AAAA,IAAA,GACH;AAAA,IAEF;AAAA,EAAA;AAEJ;"}