@almadar/ui 5.27.0 → 5.28.0

package/dist/components/core/molecules/JsonTreeEditor.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { TraitConfigValue } from '@almadar/core';
+export interface JsonTreeEditorProps {
+    /** Current value (object / array / scalar). */
+    value: TraitConfigValue;
+    /** Fired with the next value on any edit. */
+    onChange: (next: TraitConfigValue) => void;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * JsonTreeEditor — a visual, collapsible tree editor for any `TraitConfigValue`
+ * (object / array / nested / scalar). Replaces raw `JSON.stringify` text editing:
+ * each node renders a typed inline control, containers collapse, and rows can be
+ * added, removed, retyped, and (for objects) re-keyed. Self-contained — styled
+ * purely with `@almadar/ui` atoms + design tokens.
+ */
+export declare const JsonTreeEditor: React.FC<JsonTreeEditorProps>;

package/dist/components/core/molecules/index.d.ts

@@ -2,6 +2,7 @@ export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary';
 export { ArrayEditor, type ArrayEditorProps } from './ArrayEditor';
 export { ObjectEditor, type ObjectEditorProps } from './ObjectEditor';
 export { MapEditor, type MapEditorProps } from './MapEditor';
+export { JsonTreeEditor, type JsonTreeEditorProps } from './JsonTreeEditor';
 export { FileTree, type FileTreeProps, type FileTreeNode } from './FileTree';
 export { FormField, type FormFieldProps } from './FormField';
 export { EmptyState, type EmptyStateProps } from './EmptyState';

package/dist/components/index.cjs

@@ -22640,6 +22640,274 @@ var init_MapEditor = __esm({
     };
   }
 });
+function kindOf(v) {
+  if (v === null) return "null";
+  if (isArr(v)) return "array";
+  if (isObj(v)) return "object";
+  if (typeof v === "number") return "number";
+  if (typeof v === "boolean") return "boolean";
+  return "string";
+}
+function emptyOf(kind) {
+  switch (kind) {
+    case "object":
+      return {};
+    case "array":
+      return [];
+    case "number":
+      return 0;
+    case "boolean":
+      return false;
+    case "null":
+      return null;
+    default:
+      return "";
+  }
+}
+function templateFrom(arr) {
+  if (arr.length === 0) return "";
+  const first = arr[0];
+  if (isObj(first)) {
+    const blank = {};
+    for (const k of Object.keys(first)) blank[k] = isObj(first[k]) ? {} : isArr(first[k]) ? [] : first[k];
+    return blank;
+  }
+  if (isArr(first)) return [];
+  return emptyOf(kindOf(first));
+}
+function ScalarControl2({
+  value,
+  onChange
+}) {
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsxRuntime.jsx(exports.Switch, { checked: value, onChange: (c) => onChange(c) });
+  }
+  const numeric = typeof value === "number";
+  const initial = value === null ? "" : String(value);
+  const [draft, setDraft] = React74__namespace.default.useState(initial);
+  React74__namespace.default.useEffect(() => setDraft(initial), [initial]);
+  const commit = () => {
+    if (numeric) {
+      const n = draft.trim() === "" ? 0 : Number(draft);
+      onChange(Number.isNaN(n) ? 0 : n);
+    } else {
+      onChange(draft);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    exports.Input,
+    {
+      inputType: numeric ? "number" : "text",
+      value: draft,
+      placeholder: value === null ? "null" : void 0,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+      }
+    }
+  );
+}
+function KindSelect({
+  kind,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      value: kind === "null" ? "string" : kind,
+      onChange: (e) => onChange(e.target.value),
+      "aria-label": "Value type",
+      className: cn(
+        "h-6 rounded-sm bg-muted text-muted-foreground text-[10px] font-mono px-1",
+        "border-[length:var(--border-width-thin)] border-border",
+        "hover:bg-card focus:outline-none focus:ring-1 focus:ring-ring"
+      ),
+      children: KIND_OPTIONS.map((k) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: k, children: TYPE_LABEL[k] }, k))
+    }
+  );
+}
+function ValueNode({
+  value,
+  onChange,
+  depth
+}) {
+  const kind = kindOf(value);
+  if (kind === "object" || kind === "array") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ContainerNode, { value, onChange, depth });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ScalarControl2, { value, onChange });
+}
+function Row({
+  rowKey,
+  isArrayItem,
+  value,
+  depth,
+  onValue,
+  onRenameKey,
+  onChangeKind,
+  onRemove
+}) {
+  const [keyDraft, setKeyDraft] = React74__namespace.default.useState(rowKey);
+  React74__namespace.default.useEffect(() => setKeyDraft(rowKey), [rowKey]);
+  const container = isObj(value) || isArr(value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "none", className: "group", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", className: "py-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(KindSelect, { kind: kindOf(value), onChange: onChangeKind }),
+      isArrayItem ? /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "muted", className: "w-7 shrink-0 font-mono", children: rowKey }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-28 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        exports.Input,
+        {
+          inputType: "text",
+          value: keyDraft,
+          onChange: (e) => setKeyDraft(e.target.value),
+          onBlur: () => keyDraft !== rowKey && onRenameKey(keyDraft),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && keyDraft !== rowKey) onRenameKey(keyDraft);
+          },
+          className: "font-mono"
+        }
+      ) }),
+      !container && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) }),
+      container && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        exports.Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          icon: "x",
+          onClick: onRemove,
+          "aria-label": "Remove",
+          className: "opacity-0 group-hover:opacity-100 transition-opacity"
+        }
+      )
+    ] }),
+    container && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3", children: /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) })
+  ] });
+}
+function ContainerNode({
+  value,
+  onChange,
+  depth
+}) {
+  const [open, setOpen] = React74__namespace.default.useState(depth < 2);
+  const array = isArr(value);
+  const entries = array ? value.map((v, i) => [String(i), v]) : Object.entries(value);
+  const setObjValue = (key, next) => {
+    onChange({ ...value, [key]: next });
+  };
+  const renameKey = (oldKey, newKey) => {
+    if (!newKey || newKey === oldKey) return;
+    const out = {};
+    for (const [k, v] of Object.entries(value)) out[k === oldKey ? newKey : k] = v;
+    onChange(out);
+  };
+  const removeObjKey = (key) => {
+    const out = {};
+    for (const [k, v] of Object.entries(value)) if (k !== key) out[k] = v;
+    onChange(out);
+  };
+  const changeObjKind = (key, k) => setObjValue(key, emptyOf(k));
+  const setArrValue = (idx, next) => {
+    const copy = [...value];
+    copy[idx] = next;
+    onChange(copy);
+  };
+  const removeArrIdx = (idx) => onChange(value.filter((_, i) => i !== idx));
+  const changeArrKind = (idx, k) => setArrValue(idx, emptyOf(k));
+  const add = () => {
+    if (array) {
+      onChange([...value, templateFrom(value)]);
+    } else {
+      const obj = value;
+      let key = "key";
+      let n = 1;
+      while (key in obj) {
+        key = `key${n}`;
+        n += 1;
+      }
+      onChange({ ...obj, [key]: "" });
+    }
+  };
+  const summary = array ? `${entries.length} item${entries.length === 1 ? "" : "s"}` : `${entries.length} field${entries.length === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "none", className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", align: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        className: "flex items-center gap-1 text-muted-foreground hover:text-foreground",
+        "aria-label": open ? "Collapse" : "Expand",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: open ? "chevron-down" : "chevron-right", size: "sm" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs", children: array ? "[ ]" : "{ }" }),
+          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "muted", children: summary })
+        ]
+      }
+    ) }),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      exports.VStack,
+      {
+        gap: "none",
+        className: cn("ml-2 pl-2 border-l-[length:var(--border-width-thin)] border-border"),
+        children: [
+          entries.map(([k, v], idx) => /* @__PURE__ */ jsxRuntime.jsx(
+            Row,
+            {
+              rowKey: k,
+              isArrayItem: array,
+              value: v,
+              depth,
+              onValue: (next) => array ? setArrValue(idx, next) : setObjValue(k, next),
+              onRenameKey: (nk) => renameKey(k, nk),
+              onChangeKind: (kind) => array ? changeArrKind(idx, kind) : changeObjKind(k, kind),
+              onRemove: () => array ? removeArrIdx(idx) : removeObjKey(k)
+            },
+            array ? idx : k
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            exports.Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              icon: "plus",
+              label: array ? "Add item" : "Add field",
+              onClick: add,
+              className: "self-start text-muted-foreground"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var isObj, isArr, TYPE_LABEL, KIND_OPTIONS; exports.JsonTreeEditor = void 0;
+var init_JsonTreeEditor = __esm({
+  "components/core/molecules/JsonTreeEditor.tsx"() {
+    "use client";
+    init_Stack();
+    init_Button();
+    init_Input();
+    init_Switch();
+    init_Typography();
+    init_Icon();
+    init_cn();
+    isObj = (v) => v !== null && typeof v === "object" && !Array.isArray(v);
+    isArr = (v) => Array.isArray(v);
+    TYPE_LABEL = {
+      object: "{}",
+      array: "[]",
+      string: "abc",
+      number: "123",
+      boolean: "on/off",
+      null: "\u2014"
+    };
+    KIND_OPTIONS = ["string", "number", "boolean", "object", "array"];
+    exports.JsonTreeEditor = ({ value, onChange, className }) => {
+      const root = value ?? "";
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full rounded-sm bg-card/40 p-2 border-[length:var(--border-width-thin)] border-border", className), children: /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { value: root, onChange, depth: 0 }) });
+    };
+  }
+});
 function fileIcon(name) {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
   switch (ext) {
@@ -35402,30 +35670,10 @@ function FieldControl({
     control = /* @__PURE__ */ jsxRuntime.jsx(TextLikeControl, { field: name, numeric: false, value, onCommit: onChange });
   } else if (decl.type.startsWith("[") || Array.isArray(effectiveValue)) {
     const arr = Array.isArray(effectiveValue) ? effectiveValue : [];
-    control = /* @__PURE__ */ jsxRuntime.jsx(
-      exports.ArrayEditor,
-      {
-        value: arr,
-        onChange: (next) => onChange(name, next)
-      }
-    );
-  } else if (decl.type === "object" && isTraitConfigObject4(effectiveValue)) {
-    control = /* @__PURE__ */ jsxRuntime.jsx(
-      exports.ObjectEditor,
-      {
-        value: effectiveValue,
-        onChange: (next) => onChange(name, next)
-      }
-    );
-  } else if (decl.type.startsWith("Map ") || !SCALAR_TYPES.has(decl.type) && isTraitConfigObject4(effectiveValue)) {
+    control = /* @__PURE__ */ jsxRuntime.jsx(exports.JsonTreeEditor, { value: arr, onChange: (next) => onChange(name, next) });
+  } else if (decl.type === "object" || decl.type.startsWith("Map ") || !SCALAR_TYPES.has(decl.type) && isTraitConfigObject4(effectiveValue)) {
     const obj = isTraitConfigObject4(effectiveValue) ? effectiveValue : {};
-    control = /* @__PURE__ */ jsxRuntime.jsx(
-      exports.MapEditor,
-      {
-        value: obj,
-        onChange: (next) => onChange(name, next)
-      }
-    );
+    control = /* @__PURE__ */ jsxRuntime.jsx(exports.JsonTreeEditor, { value: obj, onChange: (next) => onChange(name, next) });
   } else {
     control = /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", color: "muted", children: [
       decl.type,
@@ -35452,9 +35700,7 @@ var init_PropertyInspector = __esm({
     init_FormSection();
     init_IconPicker();
     init_AssetPicker();
-    init_ArrayEditor();
-    init_ObjectEditor();
-    init_MapEditor();
+    init_JsonTreeEditor();
     TIER_ORDER = ["presentation", "domain", "policy", "infra", "internal"];
     SCALAR_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "icon", "asset"]);
     exports.PropertyInspector = ({
@@ -37353,6 +37599,7 @@ var init_molecules2 = __esm({
     init_ArrayEditor();
     init_ObjectEditor();
     init_MapEditor();
+    init_JsonTreeEditor();
     init_FileTree();
     init_FormField();
     init_EmptyState();

package/dist/components/index.js

@@ -22592,6 +22592,274 @@ var init_MapEditor = __esm({
     };
   }
 });
+function kindOf(v) {
+  if (v === null) return "null";
+  if (isArr(v)) return "array";
+  if (isObj(v)) return "object";
+  if (typeof v === "number") return "number";
+  if (typeof v === "boolean") return "boolean";
+  return "string";
+}
+function emptyOf(kind) {
+  switch (kind) {
+    case "object":
+      return {};
+    case "array":
+      return [];
+    case "number":
+      return 0;
+    case "boolean":
+      return false;
+    case "null":
+      return null;
+    default:
+      return "";
+  }
+}
+function templateFrom(arr) {
+  if (arr.length === 0) return "";
+  const first = arr[0];
+  if (isObj(first)) {
+    const blank = {};
+    for (const k of Object.keys(first)) blank[k] = isObj(first[k]) ? {} : isArr(first[k]) ? [] : first[k];
+    return blank;
+  }
+  if (isArr(first)) return [];
+  return emptyOf(kindOf(first));
+}
+function ScalarControl2({
+  value,
+  onChange
+}) {
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx(Switch, { checked: value, onChange: (c) => onChange(c) });
+  }
+  const numeric = typeof value === "number";
+  const initial = value === null ? "" : String(value);
+  const [draft, setDraft] = React74__default.useState(initial);
+  React74__default.useEffect(() => setDraft(initial), [initial]);
+  const commit = () => {
+    if (numeric) {
+      const n = draft.trim() === "" ? 0 : Number(draft);
+      onChange(Number.isNaN(n) ? 0 : n);
+    } else {
+      onChange(draft);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      inputType: numeric ? "number" : "text",
+      value: draft,
+      placeholder: value === null ? "null" : void 0,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+      }
+    }
+  );
+}
+function KindSelect({
+  kind,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      value: kind === "null" ? "string" : kind,
+      onChange: (e) => onChange(e.target.value),
+      "aria-label": "Value type",
+      className: cn(
+        "h-6 rounded-sm bg-muted text-muted-foreground text-[10px] font-mono px-1",
+        "border-[length:var(--border-width-thin)] border-border",
+        "hover:bg-card focus:outline-none focus:ring-1 focus:ring-ring"
+      ),
+      children: KIND_OPTIONS.map((k) => /* @__PURE__ */ jsx("option", { value: k, children: TYPE_LABEL[k] }, k))
+    }
+  );
+}
+function ValueNode({
+  value,
+  onChange,
+  depth
+}) {
+  const kind = kindOf(value);
+  if (kind === "object" || kind === "array") {
+    return /* @__PURE__ */ jsx(ContainerNode, { value, onChange, depth });
+  }
+  return /* @__PURE__ */ jsx(ScalarControl2, { value, onChange });
+}
+function Row({
+  rowKey,
+  isArrayItem,
+  value,
+  depth,
+  onValue,
+  onRenameKey,
+  onChangeKind,
+  onRemove
+}) {
+  const [keyDraft, setKeyDraft] = React74__default.useState(rowKey);
+  React74__default.useEffect(() => setKeyDraft(rowKey), [rowKey]);
+  const container = isObj(value) || isArr(value);
+  return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "group", children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", className: "py-0.5", children: [
+      /* @__PURE__ */ jsx(KindSelect, { kind: kindOf(value), onChange: onChangeKind }),
+      isArrayItem ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "w-7 shrink-0 font-mono", children: rowKey }) : /* @__PURE__ */ jsx("div", { className: "w-28 shrink-0", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          inputType: "text",
+          value: keyDraft,
+          onChange: (e) => setKeyDraft(e.target.value),
+          onBlur: () => keyDraft !== rowKey && onRenameKey(keyDraft),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && keyDraft !== rowKey) onRenameKey(keyDraft);
+          },
+          className: "font-mono"
+        }
+      ) }),
+      !container && /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) }),
+      container && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          icon: "x",
+          onClick: onRemove,
+          "aria-label": "Remove",
+          className: "opacity-0 group-hover:opacity-100 transition-opacity"
+        }
+      )
+    ] }),
+    container && /* @__PURE__ */ jsx("div", { className: "pl-3", children: /* @__PURE__ */ jsx(ValueNode, { value, onChange: onValue, depth: depth + 1 }) })
+  ] });
+}
+function ContainerNode({
+  value,
+  onChange,
+  depth
+}) {
+  const [open, setOpen] = React74__default.useState(depth < 2);
+  const array = isArr(value);
+  const entries = array ? value.map((v, i) => [String(i), v]) : Object.entries(value);
+  const setObjValue = (key, next) => {
+    onChange({ ...value, [key]: next });
+  };
+  const renameKey = (oldKey, newKey) => {
+    if (!newKey || newKey === oldKey) return;
+    const out = {};
+    for (const [k, v] of Object.entries(value)) out[k === oldKey ? newKey : k] = v;
+    onChange(out);
+  };
+  const removeObjKey = (key) => {
+    const out = {};
+    for (const [k, v] of Object.entries(value)) if (k !== key) out[k] = v;
+    onChange(out);
+  };
+  const changeObjKind = (key, k) => setObjValue(key, emptyOf(k));
+  const setArrValue = (idx, next) => {
+    const copy = [...value];
+    copy[idx] = next;
+    onChange(copy);
+  };
+  const removeArrIdx = (idx) => onChange(value.filter((_, i) => i !== idx));
+  const changeArrKind = (idx, k) => setArrValue(idx, emptyOf(k));
+  const add = () => {
+    if (array) {
+      onChange([...value, templateFrom(value)]);
+    } else {
+      const obj = value;
+      let key = "key";
+      let n = 1;
+      while (key in obj) {
+        key = `key${n}`;
+        n += 1;
+      }
+      onChange({ ...obj, [key]: "" });
+    }
+  };
+  const summary = array ? `${entries.length} item${entries.length === 1 ? "" : "s"}` : `${entries.length} field${entries.length === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "w-full", children: [
+    /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        className: "flex items-center gap-1 text-muted-foreground hover:text-foreground",
+        "aria-label": open ? "Collapse" : "Expand",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: open ? "chevron-down" : "chevron-right", size: "sm" }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: array ? "[ ]" : "{ }" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: summary })
+        ]
+      }
+    ) }),
+    open && /* @__PURE__ */ jsxs(
+      VStack,
+      {
+        gap: "none",
+        className: cn("ml-2 pl-2 border-l-[length:var(--border-width-thin)] border-border"),
+        children: [
+          entries.map(([k, v], idx) => /* @__PURE__ */ jsx(
+            Row,
+            {
+              rowKey: k,
+              isArrayItem: array,
+              value: v,
+              depth,
+              onValue: (next) => array ? setArrValue(idx, next) : setObjValue(k, next),
+              onRenameKey: (nk) => renameKey(k, nk),
+              onChangeKind: (kind) => array ? changeArrKind(idx, kind) : changeObjKind(k, kind),
+              onRemove: () => array ? removeArrIdx(idx) : removeObjKey(k)
+            },
+            array ? idx : k
+          )),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              icon: "plus",
+              label: array ? "Add item" : "Add field",
+              onClick: add,
+              className: "self-start text-muted-foreground"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var isObj, isArr, TYPE_LABEL, KIND_OPTIONS, JsonTreeEditor;
+var init_JsonTreeEditor = __esm({
+  "components/core/molecules/JsonTreeEditor.tsx"() {
+    "use client";
+    init_Stack();
+    init_Button();
+    init_Input();
+    init_Switch();
+    init_Typography();
+    init_Icon();
+    init_cn();
+    isObj = (v) => v !== null && typeof v === "object" && !Array.isArray(v);
+    isArr = (v) => Array.isArray(v);
+    TYPE_LABEL = {
+      object: "{}",
+      array: "[]",
+      string: "abc",
+      number: "123",
+      boolean: "on/off",
+      null: "\u2014"
+    };
+    KIND_OPTIONS = ["string", "number", "boolean", "object", "array"];
+    JsonTreeEditor = ({ value, onChange, className }) => {
+      const root = value ?? "";
+      return /* @__PURE__ */ jsx("div", { className: cn("w-full rounded-sm bg-card/40 p-2 border-[length:var(--border-width-thin)] border-border", className), children: /* @__PURE__ */ jsx(ValueNode, { value: root, onChange, depth: 0 }) });
+    };
+  }
+});
 function fileIcon(name) {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
   switch (ext) {
@@ -35354,30 +35622,10 @@ function FieldControl({
     control = /* @__PURE__ */ jsx(TextLikeControl, { field: name, numeric: false, value, onCommit: onChange });
   } else if (decl.type.startsWith("[") || Array.isArray(effectiveValue)) {
     const arr = Array.isArray(effectiveValue) ? effectiveValue : [];
-    control = /* @__PURE__ */ jsx(
-      ArrayEditor,
-      {
-        value: arr,
-        onChange: (next) => onChange(name, next)
-      }
-    );
-  } else if (decl.type === "object" && isTraitConfigObject4(effectiveValue)) {
-    control = /* @__PURE__ */ jsx(
-      ObjectEditor,
-      {
-        value: effectiveValue,
-        onChange: (next) => onChange(name, next)
-      }
-    );
-  } else if (decl.type.startsWith("Map ") || !SCALAR_TYPES.has(decl.type) && isTraitConfigObject4(effectiveValue)) {
+    control = /* @__PURE__ */ jsx(JsonTreeEditor, { value: arr, onChange: (next) => onChange(name, next) });
+  } else if (decl.type === "object" || decl.type.startsWith("Map ") || !SCALAR_TYPES.has(decl.type) && isTraitConfigObject4(effectiveValue)) {
     const obj = isTraitConfigObject4(effectiveValue) ? effectiveValue : {};
-    control = /* @__PURE__ */ jsx(
-      MapEditor,
-      {
-        value: obj,
-        onChange: (next) => onChange(name, next)
-      }
-    );
+    control = /* @__PURE__ */ jsx(JsonTreeEditor, { value: obj, onChange: (next) => onChange(name, next) });
   } else {
     control = /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
       decl.type,
@@ -35404,9 +35652,7 @@ var init_PropertyInspector = __esm({
     init_FormSection();
     init_IconPicker();
     init_AssetPicker();
-    init_ArrayEditor();
-    init_ObjectEditor();
-    init_MapEditor();
+    init_JsonTreeEditor();
     TIER_ORDER = ["presentation", "domain", "policy", "infra", "internal"];
     SCALAR_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "icon", "asset"]);
     PropertyInspector = ({
@@ -37305,6 +37551,7 @@ var init_molecules2 = __esm({
     init_ArrayEditor();
     init_ObjectEditor();
     init_MapEditor();
+    init_JsonTreeEditor();
     init_FileTree();
     init_FormField();
     init_EmptyState();
@@ -49933,4 +50180,4 @@ init_AboutPageTemplate();
 // components/index.ts
 init_cn();
 
-export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArrayEditor, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HealthPanel, HeroOrganism, HeroSection, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapEditor, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectEditor, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, toCodeLanguage, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };
+export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArrayEditor, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HealthPanel, HeroOrganism, HeroSection, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapEditor, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectEditor, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, toCodeLanguage, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.27.0",
+  "version": "5.28.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [