@visual-json/vue 0.3.0

package/dist/index.mjs

@@ -0,0 +1,2313 @@
+import { defineComponent as Y, shallowRef as M, computed as T, watch as J, onMounted as G, onUnmounted as _, provide as ke, renderSlot as Be, inject as Se, openBlock as g, createElementBlock as x, Fragment as U, createElementVNode as D, withModifiers as H, normalizeStyle as R, unref as b, toDisplayString as F, createCommentVNode as A, renderList as te, createBlock as X, nextTick as ce, Teleport as Ve, createVNode as q, useModel as Fe, createTextVNode as Oe, mergeModels as he, withCtx as Ae } from "vue";
+import { getPropertySchema as Ke, resolveRef as Le, isDescendant as je, reorderChildrenMulti as Pe, removeNode as fe, insertNode as He, fromJson as ge, History as ye, searchNodes as xe, toJson as le, getAncestorIds as We, duplicateNode as Je, changeType as Ue, setValue as Ye, setKey as qe, addProperty as Qe, computeDiff as Xe } from "@visual-json/core";
+function pe(t, r) {
+  const e = [];
+  function n(a) {
+    if (e.push(a), r(a.id) && (a.type === "object" || a.type === "array"))
+      for (const s of a.children)
+        n(s);
+  }
+  return n(t), e;
+}
+var Ge = ["name", "type", "title", "id", "label", "key"];
+function se(t, r) {
+  if (t.parentId === null) return "/";
+  const e = r.nodesById.get(t.parentId);
+  if ((e == null ? void 0 : e.type) !== "array" || t.type !== "object") return t.key;
+  for (const n of Ge) {
+    const a = t.children.find((s) => s.key === n);
+    if ((a == null ? void 0 : a.value) != null && a.value !== "")
+      return String(a.value);
+  }
+  return t.key;
+}
+function Ie(t) {
+  const r = [t.id];
+  for (const e of t.children)
+    r.push(...Ie(e));
+  return r;
+}
+var re = {
+  "--vj-bg": "#1e1e1e",
+  "--vj-bg-panel": "#252526",
+  "--vj-bg-hover": "#2a2d2e",
+  "--vj-bg-selected": "#2a5a1e",
+  "--vj-bg-selected-muted": "#2a2d2e",
+  "--vj-bg-match": "#3a3520",
+  "--vj-bg-match-active": "#51502b",
+  "--vj-border": "#333333",
+  "--vj-border-subtle": "#2a2a2a",
+  "--vj-text": "#cccccc",
+  "--vj-text-muted": "#888888",
+  "--vj-text-dim": "#666666",
+  "--vj-text-dimmer": "#555555",
+  "--vj-string": "#ce9178",
+  "--vj-number": "#b5cea8",
+  "--vj-boolean": "#569cd6",
+  "--vj-accent": "#007acc",
+  "--vj-accent-muted": "#094771",
+  "--vj-input-bg": "#3c3c3c",
+  "--vj-input-border": "#555555",
+  "--vj-error": "#f48771",
+  "--vj-font": "monospace",
+  "--vj-input-font-size": "13px"
+}, _e = Object.freeze(/* @__PURE__ */ new Set()), ue = () => ({
+  draggedNodeIds: _e,
+  dropTargetNodeId: null,
+  dropPosition: null
+});
+function Ze(t, r) {
+  const e = [];
+  function n(a) {
+    r.has(a.id) && e.push(a.id);
+    for (const s of a.children) n(s);
+  }
+  return n(t), e;
+}
+function et(t, r) {
+  const { draggedNodeIds: e, dropTargetNodeId: n, dropPosition: a } = r;
+  if (e.size === 0 || !n || !a)
+    return null;
+  const s = t.nodesById.get(n);
+  if (!s || !s.parentId) return null;
+  for (const l of e)
+    if (je(t, n, l)) return null;
+  const i = s.parentId, o = t.nodesById.get(i);
+  if (!o) return null;
+  const p = o.children.filter((l) => e.has(l.id)).map((l) => l.id);
+  if (p.length === e.size && [...e].every((l) => {
+    const v = t.nodesById.get(l);
+    return (v == null ? void 0 : v.parentId) === i;
+  }))
+    return Pe(
+      t,
+      i,
+      p,
+      n,
+      a
+    );
+  const y = Ze(t.root, e), C = y.map((l) => t.nodesById.get(l)).filter((l) => !!l && l.parentId !== null).map((l) => structuredClone(l));
+  let E = t;
+  for (const l of [...y].reverse())
+    E.nodesById.has(l) && (E = fe(E, l));
+  const O = E.nodesById.get(n);
+  if (!O || !O.parentId) return null;
+  const c = E.nodesById.get(O.parentId);
+  if (!c) return null;
+  let N = c.children.findIndex(
+    (l) => l.id === n
+  );
+  a === "after" && N++;
+  for (let l = 0; l < C.length; l++)
+    E = He(
+      E,
+      c.id,
+      C[l],
+      N + l
+    );
+  return E;
+}
+function De(t, r, e) {
+  const n = document.createElement("div");
+  n.textContent = `${r} selected`;
+  const a = document.querySelector("[data-form-container], [role='tree']"), s = a ? getComputedStyle(a) : null, i = (s == null ? void 0 : s.getPropertyValue("--vj-bg-selected").trim()) || re["--vj-bg-selected"], o = (s == null ? void 0 : s.getPropertyValue("--vj-text-selected").trim()) || (s == null ? void 0 : s.getPropertyValue("--vj-text").trim()) || re["--vj-text"], d = (s == null ? void 0 : s.getPropertyValue("--vj-font").trim()) || re["--vj-font"];
+  n.style.cssText = [
+    "position:fixed",
+    "top:-1000px",
+    "left:-1000px",
+    "padding:4px 12px",
+    `background:${i}`,
+    `color:${o}`,
+    `font-family:${d}`,
+    "font-size:13px",
+    "border-radius:4px",
+    "white-space:nowrap",
+    "pointer-events:none"
+  ].join(";"), document.body.appendChild(n), t.setDragImage(n, 0, 14), requestAnimationFrame(() => n.remove());
+}
+var tt = {
+  added: { bg: "#1e3a1e", marker: "+", label: "#4ec94e" },
+  removed: { bg: "#3a1e1e", marker: "-", label: "#f48771" },
+  changed: { bg: "#3a3a1e", marker: "~", label: "#dcdcaa" }
+};
+function ae(t) {
+  if (t === void 0) return "";
+  if (t === null) return "null";
+  if (typeof t == "string") return JSON.stringify(t);
+  if (typeof t == "object") {
+    const r = JSON.stringify(t, null, 2);
+    return r.length > 80 ? JSON.stringify(t).slice(0, 77) + "..." : r;
+  }
+  return String(t);
+}
+function Ce(t, r, e) {
+  if (!t) return;
+  const n = Ke(t, e, r);
+  if (n)
+    return Le(n, r ?? t);
+}
+function nt(t) {
+  return t.type === "boolean" || t.type === "null" ? "var(--vj-boolean, #569cd6)" : t.type === "number" ? "var(--vj-number, #b5cea8)" : "var(--vj-string, #ce9178)";
+}
+function ot(t) {
+  return t.type === "null" ? "null" : t.type === "boolean" ? String(t.value) : t.value === null || t.value === void 0 ? "" : String(t.value);
+}
+function at(t, r, e) {
+  var s;
+  if (!r || !t.parentId) return !1;
+  const n = t.path.split("/").slice(0, -1).join("/") || "/", a = Ce(r, e, n);
+  return ((s = a == null ? void 0 : a.required) == null ? void 0 : s.includes(t.key)) ?? !1;
+}
+function lt(t, r, e) {
+  const n = Array.isArray(r) ? r[0] : r;
+  if (n === "boolean" || t === "true" || t === "false")
+    return t === "true";
+  if (t === "null")
+    return null;
+  if (n === "number" || n === "integer" || e === "number") {
+    const a = Number(t);
+    return isNaN(a) ? t : a;
+  }
+  return t;
+}
+const Ne = Symbol("StudioContext");
+function Me(t, r, e) {
+  if (!r) return null;
+  let n = t.nodesById.get(r);
+  if (!n) return null;
+  for (; n; ) {
+    const a = n.parentId ? t.nodesById.get(n.parentId) : void 0, s = a ? a.children : [t.root], i = new Set(s.map((d) => d.id));
+    if (!s.every((d) => e.has(d.id)) || !a || !a.parentId) return i;
+    n = a;
+  }
+  return null;
+}
+function rt(t, r, e) {
+  const n = t.findIndex((d) => d.id === r), a = t.findIndex((d) => d.id === e);
+  if (n === -1 || a === -1) return null;
+  const s = Math.min(n, a), i = Math.max(n, a), o = /* @__PURE__ */ new Set();
+  for (let d = s; d <= i; d++)
+    o.add(t[d].id);
+  return o;
+}
+function ve(t, r, e) {
+  const n = [...r].filter((o) => {
+    const d = t.nodesById.get(o);
+    if (!d || d.parentId === null) return !1;
+    let p = t.nodesById.get(d.parentId);
+    for (; p; ) {
+      if (r.has(p.id)) return !1;
+      p = p.parentId ? t.nodesById.get(p.parentId) : void 0;
+    }
+    return !0;
+  });
+  if (n.length === 0) return { newTree: t, nextFocusId: null };
+  const a = e.findIndex((o) => r.has(o.id));
+  let s = t;
+  for (const o of n)
+    s.nodesById.has(o) && (s = fe(s, o));
+  let i = null;
+  for (let o = a; o < e.length; o++) {
+    const d = e[o].id;
+    if (!r.has(d) && s.nodesById.has(d)) {
+      i = d;
+      break;
+    }
+  }
+  if (!i)
+    for (let o = a - 1; o >= 0; o--) {
+      const d = e[o].id;
+      if (!r.has(d) && s.nodesById.has(d)) {
+        i = d;
+        break;
+      }
+    }
+  return { newTree: s, nextFocusId: i };
+}
+const st = /* @__PURE__ */ Y({
+  __name: "VisualJson",
+  props: {
+    value: { type: [String, Number, Boolean, null, Array, Object] },
+    schema: { default: null }
+  },
+  emits: ["change"],
+  setup(t, { emit: r }) {
+    const e = t, n = r, a = M(ge(e.value)), s = M(null), i = M(/* @__PURE__ */ new Set()), o = M(null), d = M(null), p = M(/* @__PURE__ */ new Set([a.value.root.id])), f = T(
+      () => pe(a.value.root, (u) => p.value.has(u))
+    );
+    let y = null, C = new ye();
+    const E = M(0), O = T(() => (E.value, C.canUndo)), c = T(() => (E.value, C.canRedo)), N = M(""), l = M([]), v = M(0), k = T(
+      () => new Set(l.value.map((u) => u.nodeId))
+    );
+    let m = !1;
+    C.push(a.value);
+    function h(u) {
+      s.value = u, i.value = u ? /* @__PURE__ */ new Set([u]) : /* @__PURE__ */ new Set(), o.value = u, d.value = u;
+    }
+    J(
+      () => e.value,
+      (u) => {
+        if (m) {
+          m = !1;
+          return;
+        }
+        const j = ge(u);
+        a.value = j, p.value = /* @__PURE__ */ new Set([j.root.id]), h(null), C = new ye(), C.push(j), E.value++, N.value = "", l.value = [], v.value = 0;
+      },
+      { flush: "sync" }
+    ), J(
+      a,
+      (u) => {
+        if (!N.value.trim()) return;
+        const j = xe(u, N.value);
+        l.value = j, v.value = Math.min(
+          v.value,
+          Math.max(j.length - 1, 0)
+        );
+      },
+      { flush: "sync" }
+    );
+    function $(u) {
+      a.value = u, C.push(u), E.value++, m = !0, n("change", le(u.root));
+    }
+    function V() {
+      const u = C.undo();
+      u && (a.value = u, E.value++, m = !0, n("change", le(u.root)));
+    }
+    function W() {
+      const u = C.redo();
+      u && (a.value = u, E.value++, m = !0, n("change", le(u.root)));
+    }
+    function Q(u) {
+      const j = u.metaKey || u.ctrlKey;
+      j && u.key === "z" && !u.shiftKey ? (u.preventDefault(), V()) : (j && u.key === "z" && u.shiftKey || j && u.key === "y") && (u.preventDefault(), W());
+    }
+    G(() => document.addEventListener("keydown", Q)), _(() => document.removeEventListener("keydown", Q));
+    const S = {
+      tree: a,
+      focusedNodeId: s,
+      selectedNodeIds: i,
+      anchorNodeId: o,
+      drillDownNodeId: d,
+      expandedNodeIds: p,
+      schema: T(() => e.schema ?? null),
+      searchQuery: N,
+      searchMatches: l,
+      searchMatchIndex: v,
+      searchMatchNodeIds: k,
+      canUndo: O,
+      canRedo: c
+    };
+    return ke(Ne, { state: S, actions: {
+      setTree: $,
+      selectNode(u) {
+        s.value = u, i.value = u ? /* @__PURE__ */ new Set([u]) : /* @__PURE__ */ new Set(), o.value = u;
+      },
+      selectAndDrillDown: h,
+      toggleNodeSelection(u) {
+        const j = new Set(i.value);
+        j.has(u) ? j.delete(u) : j.add(u), i.value = j, j.size === 0 ? (s.value = null, o.value = null) : (s.value = u, o.value = u);
+      },
+      selectNodeRange(u) {
+        const j = y ?? f.value, I = o.value;
+        if (!I) {
+          s.value = u, i.value = /* @__PURE__ */ new Set([u]), o.value = u;
+          return;
+        }
+        const K = rt(j, I, u);
+        if (!K) {
+          s.value = u, i.value = /* @__PURE__ */ new Set([u]), o.value = u;
+          return;
+        }
+        i.value = K, s.value = u;
+      },
+      setSelection(u, j, I) {
+        s.value = u, i.value = j, o.value = I;
+      },
+      setVisibleNodesOverride(u) {
+        y = u;
+      },
+      drillDown(u) {
+        d.value = u;
+      },
+      toggleExpand(u) {
+        const j = new Set(p.value);
+        j.has(u) ? j.delete(u) : j.add(u), p.value = j;
+      },
+      expandNode(u) {
+        const j = new Set(p.value);
+        j.add(u), p.value = j;
+      },
+      collapseNode(u) {
+        const j = new Set(p.value);
+        j.delete(u), p.value = j;
+      },
+      expandAll() {
+        p.value = new Set(Ie(a.value.root));
+      },
+      collapseAll() {
+        p.value = /* @__PURE__ */ new Set([a.value.root.id]);
+      },
+      undo: V,
+      redo: W,
+      setSearchQuery(u) {
+        if (N.value = u, !u.trim()) {
+          l.value = [], v.value = 0;
+          return;
+        }
+        const j = xe(a.value, u);
+        if (l.value = j, v.value = 0, j.length > 0) {
+          const I = We(
+            a.value,
+            j.map((L) => L.nodeId)
+          ), K = new Set(p.value);
+          for (const L of I) K.add(L);
+          p.value = K, h(j[0].nodeId);
+        }
+      },
+      nextSearchMatch() {
+        if (l.value.length === 0) return;
+        const u = (v.value + 1) % l.value.length;
+        v.value = u, h(l.value[u].nodeId);
+      },
+      prevSearchMatch() {
+        if (l.value.length === 0) return;
+        const u = (v.value - 1 + l.value.length) % l.value.length;
+        v.value = u, h(l.value[u].nodeId);
+      }
+    } }), (u, j) => Be(u.$slots, "default");
+  }
+});
+function Z() {
+  const t = Se(Ne);
+  if (!t)
+    throw new Error("useStudio must be used within a <VisualJson> provider");
+  return t;
+}
+function Ee(t, r) {
+  const { state: e, actions: n } = Z(), a = M(ue());
+  function s(f) {
+    let y;
+    r.value.size > 0 && r.value.has(f) ? y = r.value : y = /* @__PURE__ */ new Set([f]), a.value = {
+      draggedNodeIds: y,
+      dropTargetNodeId: null,
+      dropPosition: null
+    };
+  }
+  function i(f, y) {
+    const C = a.value.draggedNodeIds;
+    for (const E of C)
+      if (f === E || je(e.tree.value, f, E))
+        return;
+    a.value = {
+      ...a.value,
+      dropTargetNodeId: f,
+      dropPosition: y
+    };
+  }
+  function o(f, y) {
+    if (y === "before") {
+      const C = t.value.findIndex((E) => E.id === f);
+      if (C > 0) {
+        i(t.value[C - 1].id, "after");
+        return;
+      }
+    }
+    i(f, y);
+  }
+  function d() {
+    a.value = ue();
+  }
+  function p() {
+    const f = et(e.tree.value, a.value);
+    f && n.setTree(f), a.value = ue();
+  }
+  return {
+    dragState: a,
+    handleDragStart: s,
+    handleDragOver: o,
+    handleDragEnd: d,
+    handleDrop: p
+  };
+}
+const it = ["aria-selected", "aria-expanded", "draggable", "data-node-id"], ut = ["aria-label"], dt = {
+  key: 1,
+  style: { width: "16px", flexShrink: 0 }
+}, Te = /* @__PURE__ */ Y({
+  __name: "TreeNodeRow",
+  props: {
+    node: {},
+    depth: {},
+    dragState: {},
+    showValues: { type: Boolean },
+    showCounts: { type: Boolean },
+    isFocused: { type: Boolean }
+  },
+  emits: ["dragStart", "dragOver", "dragEnd", "drop", "contextMenu", "selectRange"],
+  setup(t, { emit: r }) {
+    const e = t, n = r, { state: a, actions: s } = Z(), i = M(!1);
+    function o() {
+      return a.selectedNodeIds.value.has(e.node.id);
+    }
+    function d() {
+      return a.expandedNodeIds.value.has(e.node.id);
+    }
+    const p = e.node.type === "object" || e.node.type === "array", f = e.node.parentId === null;
+    function y() {
+      return a.searchMatchNodeIds.value.has(e.node.id);
+    }
+    function C() {
+      var m;
+      return a.searchMatches.value.length > 0 && ((m = a.searchMatches.value[a.searchMatchIndex.value]) == null ? void 0 : m.nodeId) === e.node.id;
+    }
+    function E() {
+      return p ? e.node.type === "array" ? `[${e.node.children.length}]` : `{${e.node.children.length}}` : e.node.value === null ? "null" : typeof e.node.value == "string" ? e.node.value : String(e.node.value);
+    }
+    function O(m) {
+      m.preventDefault();
+      const h = m.currentTarget.getBoundingClientRect(), $ = h.top + h.height / 2, V = m.clientY < $ ? "before" : "after";
+      n("dragOver", e.node.id, V);
+    }
+    function c() {
+      return e.dragState.dropTargetNodeId === e.node.id && e.dragState.dropPosition === "before" ? "var(--vj-accent, #007acc)" : "transparent";
+    }
+    function N() {
+      return e.dragState.dropTargetNodeId === e.node.id && e.dragState.dropPosition === "after" ? "var(--vj-accent, #007acc)" : "transparent";
+    }
+    function l() {
+      const m = o(), h = C(), $ = y(), V = i.value;
+      return m ? e.isFocused ? "var(--vj-bg-selected, #2a5a1e)" : "var(--vj-bg-selected-muted, var(--vj-bg-hover, #2a2d2e))" : h ? "var(--vj-bg-match-active, #51502b)" : $ ? "var(--vj-bg-match, #3a3520)" : V ? "var(--vj-bg-hover, #2a2d2e)" : "transparent";
+    }
+    function v(m) {
+      m.shiftKey ? n("selectRange", e.node.id) : m.metaKey || m.ctrlKey ? s.toggleNodeSelection(e.node.id) : s.selectAndDrillDown(e.node.id);
+    }
+    function k(m) {
+      m.dataTransfer.effectAllowed = "move", a.selectedNodeIds.value.size > 1 && a.selectedNodeIds.value.has(e.node.id) && De(m.dataTransfer, a.selectedNodeIds.value.size), n("dragStart", e.node.id);
+    }
+    return (m, h) => (g(), x(U, null, [
+      D("div", {
+        role: "treeitem",
+        "aria-selected": o(),
+        "aria-expanded": b(p) ? d() : void 0,
+        draggable: !f,
+        "data-node-id": t.node.id,
+        style: R({
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "1px 8px",
+          paddingLeft: 8 + t.depth * 16 + "px",
+          cursor: "pointer",
+          backgroundColor: l(),
+          minHeight: "28px",
+          userSelect: "none",
+          opacity: t.dragState.draggedNodeIds.has(t.node.id) ? 0.4 : 1,
+          borderTop: `2px solid ${c()}`,
+          borderBottom: `2px solid ${N()}`,
+          boxSizing: "border-box",
+          color: o() && t.isFocused ? "var(--vj-text-selected, var(--vj-text, #cccccc))" : "var(--vj-text, #cccccc)"
+        }),
+        onClick: v,
+        onMouseenter: h[1] || (h[1] = () => i.value = !0),
+        onMouseleave: h[2] || (h[2] = () => i.value = !1),
+        onContextmenu: h[3] || (h[3] = ($) => n("contextMenu", $, t.node)),
+        onDragstart: k,
+        onDragover: O,
+        onDragend: h[4] || (h[4] = () => n("dragEnd")),
+        onDrop: h[5] || (h[5] = H(() => n("drop"), ["prevent"]))
+      }, [
+        b(p) ? (g(), x("button", {
+          key: 0,
+          "aria-label": d() ? "Collapse" : "Expand",
+          style: R({
+            background: "none",
+            border: "none",
+            color: "inherit",
+            cursor: "pointer",
+            padding: 0,
+            width: "16px",
+            fontSize: "9px",
+            flexShrink: 0,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "transform 0.15s",
+            transform: d() ? "rotate(90deg)" : "rotate(0deg)"
+          }),
+          onClick: h[0] || (h[0] = H(() => b(s).toggleExpand(t.node.id), ["stop"]))
+        }, " ▶ ", 12, ut)) : (g(), x("span", dt)),
+        D("span", {
+          style: R({
+            color: "inherit",
+            fontSize: "13px",
+            fontFamily: "var(--vj-font, monospace)",
+            flexShrink: 0,
+            fontWeight: f ? 600 : 400
+          })
+        }, F(f ? "/" : b(se)(t.node, b(a).tree.value)), 5),
+        !f && b(p) && t.showCounts ? (g(), x("span", {
+          key: 2,
+          style: R({
+            color: o() ? "inherit" : "var(--vj-text-muted, #888888)",
+            fontSize: "13px",
+            fontFamily: "var(--vj-font, monospace)",
+            whiteSpace: "nowrap",
+            marginLeft: "auto"
+          })
+        }, F(E()), 5)) : A("", !0),
+        !f && !b(p) && t.showValues ? (g(), x("span", {
+          key: 3,
+          style: R({
+            color: t.node.type === "string" ? "var(--vj-string, #ce9178)" : "var(--vj-number, #b5cea8)",
+            fontSize: "13px",
+            fontFamily: "var(--vj-font, monospace)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            marginLeft: "auto"
+          })
+        }, F(E()), 5)) : A("", !0)
+      ], 44, it),
+      d() ? (g(!0), x(U, { key: 0 }, te(t.node.children, ($) => (g(), X(Te, {
+        key: $.id,
+        node: $,
+        depth: t.depth + 1,
+        "drag-state": t.dragState,
+        "show-values": t.showValues,
+        "show-counts": t.showCounts,
+        "is-focused": t.isFocused,
+        onDragStart: h[6] || (h[6] = (V) => n("dragStart", V)),
+        onDragOver: h[7] || (h[7] = (V, W) => n("dragOver", V, W)),
+        onDragEnd: h[8] || (h[8] = () => n("dragEnd")),
+        onDrop: h[9] || (h[9] = () => n("drop")),
+        onContextMenu: h[10] || (h[10] = (V, W) => n("contextMenu", V, W)),
+        onSelectRange: h[11] || (h[11] = (V) => n("selectRange", V))
+      }, null, 8, ["node", "depth", "drag-state", "show-values", "show-counts", "is-focused"]))), 128)) : A("", !0)
+    ], 64));
+  }
+}), ct = {
+  key: 0,
+  style: {
+    height: "1px",
+    backgroundColor: "var(--vj-border, #454545)",
+    margin: "4px 0"
+  }
+}, vt = ["disabled", "onClick", "onMouseenter"], ft = /* @__PURE__ */ Y({
+  __name: "ContextMenu",
+  props: {
+    x: {},
+    y: {},
+    items: {}
+  },
+  emits: ["close"],
+  setup(t, { emit: r }) {
+    const e = t, n = r, a = M(null), s = M({ left: e.x, top: e.y });
+    J(
+      () => [e.x, e.y],
+      async () => {
+        if (await ce(), !a.value) return;
+        const d = a.value.getBoundingClientRect(), p = window.innerWidth, f = window.innerHeight;
+        s.value = {
+          left: d.right > p ? Math.max(0, e.x - d.width) : e.x,
+          top: d.bottom > f ? Math.max(0, e.y - d.height) : e.y
+        };
+      },
+      { immediate: !0 }
+    );
+    function i(d) {
+      a.value && !a.value.contains(d.target) && n("close");
+    }
+    function o(d) {
+      d.key === "Escape" && n("close");
+    }
+    return G(async () => {
+      if (await ce(), a.value) {
+        const d = a.value.getBoundingClientRect(), p = window.innerWidth, f = window.innerHeight;
+        s.value = {
+          left: d.right > p ? Math.max(0, e.x - d.width) : e.x,
+          top: d.bottom > f ? Math.max(0, e.y - d.height) : e.y
+        };
+      }
+      document.addEventListener("mousedown", i), document.addEventListener("keydown", o);
+    }), _(() => {
+      document.removeEventListener("mousedown", i), document.removeEventListener("keydown", o);
+    }), (d, p) => (g(), X(Ve, { to: "body" }, [
+      D("div", {
+        ref_key: "menuRef",
+        ref: a,
+        style: R({
+          position: "fixed",
+          left: s.value.left + "px",
+          top: s.value.top + "px",
+          zIndex: 1e4,
+          backgroundColor: "var(--vj-bg-panel, #252526)",
+          border: "1px solid var(--vj-border, #454545)",
+          borderRadius: "4px",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
+          padding: "4px 0",
+          minWidth: "160px"
+        })
+      }, [
+        (g(!0), x(U, null, te(t.items, (f, y) => (g(), x(U, { key: y }, [
+          "separator" in f && f.separator ? (g(), x("div", ct)) : "label" in f ? (g(), x("button", {
+            key: 1,
+            disabled: f.disabled,
+            style: R({
+              display: "block",
+              width: "100%",
+              textAlign: "left",
+              background: "none",
+              border: "none",
+              color: f.disabled ? "var(--vj-text-dimmer, #555555)" : "var(--vj-text, #cccccc)",
+              cursor: f.disabled ? "default" : "pointer",
+              padding: "4px 16px",
+              fontSize: "12px",
+              fontFamily: "var(--vj-font, monospace)"
+            }),
+            onClick: () => {
+              f.disabled || (f.action(), n("close"));
+            },
+            onMouseenter: (C) => {
+              f.disabled || (C.target.style.backgroundColor = "var(--vj-accent-muted, #094771)");
+            },
+            onMouseleave: p[0] || (p[0] = (C) => {
+              C.target.style.backgroundColor = "transparent";
+            })
+          }, F(f.label), 45, vt)) : A("", !0)
+        ], 64))), 128))
+      ], 4)
+    ]));
+  }
+}), me = /* @__PURE__ */ Y({
+  __name: "TreeView",
+  props: {
+    class: {},
+    showValues: { type: Boolean, default: !0 },
+    showCounts: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const r = t, { state: e, actions: n } = Z(), a = M(null), s = T(
+      () => pe(
+        e.tree.value.root,
+        (l) => e.expandedNodeIds.value.has(l)
+      )
+    ), { dragState: i, handleDragStart: o, handleDragOver: d, handleDragEnd: p, handleDrop: f } = Ee(s, e.selectedNodeIds), y = M(null), C = M(!1);
+    function E(l) {
+      n.setVisibleNodesOverride(s.value), n.selectNodeRange(l);
+    }
+    J(
+      () => e.focusedNodeId.value,
+      (l) => {
+        if (l && a.value) {
+          const v = a.value.querySelector(`[data-node-id="${l}"]`);
+          v && v.scrollIntoView({ block: "nearest" });
+        }
+      }
+    );
+    function O(l, v) {
+      l.preventDefault(), e.selectedNodeIds.value.has(v.id) || n.selectAndDrillDown(v.id), y.value = { x: l.clientX, y: l.clientY, node: v };
+    }
+    function c(l) {
+      const v = [];
+      if ((l.type === "object" || l.type === "array") && (v.push({
+        label: "Expand all children",
+        action: () => {
+          function m(h) {
+            const $ = [h.id];
+            for (const V of h.children) $.push(...m(V));
+            return $;
+          }
+          for (const h of m(l)) n.expandNode(h);
+        }
+      }), v.push({
+        label: "Collapse all children",
+        action: () => {
+          function m(h) {
+            const $ = [];
+            for (const V of h.children)
+              $.push(V.id), $.push(...m(V));
+            return $;
+          }
+          for (const h of m(l)) n.collapseNode(h);
+        }
+      }), v.push({ separator: !0 })), v.push({
+        label: "Copy path",
+        action: () => navigator.clipboard.writeText(l.path).catch(() => {
+        })
+      }), v.push({
+        label: "Copy value as JSON",
+        action: () => {
+          const m = le(l), h = typeof m == "string" ? m : JSON.stringify(m, null, 2);
+          navigator.clipboard.writeText(h).catch(() => {
+          });
+        }
+      }), l.parentId) {
+        v.push({ separator: !0 }), v.push({
+          label: "Duplicate",
+          action: () => {
+            const h = Je(e.tree.value, l.id);
+            n.setTree(h);
+          }
+        });
+        const m = ["string", "number", "boolean", "null", "object", "array"].filter((h) => h !== l.type).map((h) => ({
+          label: `Change to ${h}`,
+          action: () => {
+            const $ = Ue(e.tree.value, l.id, h);
+            n.setTree($);
+          }
+        }));
+        v.push({ separator: !0 }), v.push(...m), v.push({ separator: !0 }), v.push({
+          label: "Delete",
+          action: () => {
+            const { newTree: h, nextFocusId: $ } = ve(
+              e.tree.value,
+              e.selectedNodeIds.value,
+              s.value
+            );
+            h !== e.tree.value && (n.setTree(h), $ ? n.selectNode($) : n.setSelection(null, /* @__PURE__ */ new Set(), null));
+          }
+        });
+      }
+      return v;
+    }
+    function N(l) {
+      const v = s.value.findIndex(
+        (k) => k.id === e.focusedNodeId.value
+      );
+      switch (l.key) {
+        case "ArrowDown": {
+          l.preventDefault();
+          const k = s.value[v + 1];
+          k && (l.shiftKey ? E(k.id) : n.selectNode(k.id));
+          break;
+        }
+        case "ArrowUp": {
+          l.preventDefault();
+          const k = s.value[v - 1];
+          k && (l.shiftKey ? E(k.id) : n.selectNode(k.id));
+          break;
+        }
+        case "ArrowRight": {
+          l.preventDefault();
+          const k = v >= 0 ? s.value[v] : null;
+          k && (k.type === "object" || k.type === "array") && (e.expandedNodeIds.value.has(k.id) ? k.children.length > 0 && n.selectNode(k.children[0].id) : n.expandNode(k.id));
+          break;
+        }
+        case "ArrowLeft": {
+          l.preventDefault();
+          const k = v >= 0 ? s.value[v] : null;
+          if (!k) break;
+          (k.type === "object" || k.type === "array") && e.expandedNodeIds.value.has(k.id) ? n.collapseNode(k.id) : k.parentId && n.selectNode(k.parentId);
+          break;
+        }
+        case "a": {
+          if (l.metaKey || l.ctrlKey) {
+            l.preventDefault();
+            const k = Me(
+              e.tree.value,
+              e.focusedNodeId.value,
+              e.selectedNodeIds.value
+            );
+            k && n.setSelection(
+              e.focusedNodeId.value,
+              k,
+              e.focusedNodeId.value
+            );
+          }
+          break;
+        }
+        case "Escape": {
+          l.preventDefault(), e.selectedNodeIds.value.size > 1 && e.focusedNodeId.value ? n.selectNode(e.focusedNodeId.value) : n.setSelection(null, /* @__PURE__ */ new Set(), null);
+          break;
+        }
+        case "Delete":
+        case "Backspace": {
+          l.preventDefault();
+          const { newTree: k, nextFocusId: m } = ve(
+            e.tree.value,
+            e.selectedNodeIds.value,
+            s.value
+          );
+          if (k === e.tree.value) break;
+          n.setTree(k), m ? n.selectNode(m) : n.setSelection(null, /* @__PURE__ */ new Set(), null);
+          break;
+        }
+      }
+    }
+    return (l, v) => (g(), x(U, null, [
+      D("div", {
+        ref_key: "containerRef",
+        ref: a,
+        role: "tree",
+        tabindex: "0",
+        style: {
+          overflow: "auto",
+          backgroundColor: "var(--vj-bg, #1e1e1e)",
+          color: "var(--vj-text, #cccccc)",
+          fontFamily: "var(--vj-font, monospace)",
+          fontSize: "13px",
+          outline: "none",
+          flex: 1
+        },
+        onKeydown: N,
+        onFocus: v[0] || (v[0] = () => C.value = !0),
+        onBlur: v[1] || (v[1] = () => C.value = !1)
+      }, [
+        q(Te, {
+          node: b(e).tree.value.root,
+          depth: 0,
+          "drag-state": b(i),
+          "show-values": r.showValues ?? !0,
+          "show-counts": r.showCounts ?? !1,
+          "is-focused": C.value,
+          onDragStart: b(o),
+          onDragOver: b(d),
+          onDragEnd: b(p),
+          onDrop: b(f),
+          onContextMenu: O,
+          onSelectRange: E
+        }, null, 8, ["node", "drag-state", "show-values", "show-counts", "is-focused", "onDragStart", "onDragOver", "onDragEnd", "onDrop"])
+      ], 544),
+      y.value ? (g(), X(ft, {
+        key: 0,
+        x: y.value.x,
+        y: y.value.y,
+        items: c(y.value.node),
+        onClose: v[2] || (v[2] = () => y.value = null)
+      }, null, 8, ["x", "y", "items"])) : A("", !0)
+    ], 64));
+  }
+}), $e = Symbol("FormViewContext"), pt = ["value"], ht = ["onMousedown", "onMouseenter"], gt = 20, yt = 200, xt = /* @__PURE__ */ Y({
+  __name: "Breadcrumbs",
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const { state: r, actions: e } = Z(), n = T(
+      () => r.drillDownNodeId.value ? r.tree.value.nodesById.get(r.drillDownNodeId.value) : null
+    ), a = T(() => {
+      var c;
+      return ((c = n.value) == null ? void 0 : c.path) ?? "/";
+    }), s = M(a.value), i = M(!1), o = M(0), d = M(null), p = M(null), f = M(null);
+    J(a, (c) => {
+      s.value = c;
+    });
+    const y = T(() => {
+      if (!i.value) return [];
+      const c = s.value.toLowerCase(), N = [];
+      for (const [l, v] of r.tree.value.nodesById)
+        if (v.path.toLowerCase().startsWith(c) && N.push({ id: l, path: v.path }), N.length >= gt) break;
+      return N.sort((l, v) => l.path.localeCompare(v.path)), N;
+    });
+    J(y, () => {
+      o.value = 0;
+    }), J(
+      () => [o.value, i.value],
+      ([c, N]) => {
+        const l = p.value;
+        if (!l || !N) return;
+        const v = l.children[c];
+        v == null || v.scrollIntoView({ block: "nearest" });
+      }
+    );
+    function C(c) {
+      var N;
+      for (const [l, v] of r.tree.value.nodesById)
+        if (v.path === c) {
+          e.selectAndDrillDown(l);
+          break;
+        }
+      i.value = !1, (N = d.value) == null || N.blur();
+    }
+    function E(c) {
+      var N;
+      if (!i.value) {
+        (c.key === "ArrowDown" || c.key === "Enter") && (i.value = !0, c.preventDefault());
+        return;
+      }
+      switch (c.key) {
+        case "ArrowDown":
+          c.preventDefault(), o.value = Math.min(
+            o.value + 1,
+            y.value.length - 1
+          );
+          break;
+        case "ArrowUp":
+          c.preventDefault(), o.value = Math.max(o.value - 1, 0);
+          break;
+        case "Enter":
+          c.preventDefault(), y.value.length > 0 && o.value < y.value.length ? C(y.value[o.value].path) : C(s.value.trim() || "/");
+          break;
+        case "Escape":
+          c.preventDefault(), s.value = a.value, i.value = !1, (N = d.value) == null || N.blur();
+          break;
+      }
+    }
+    function O(c) {
+      f.value && !f.value.contains(c.target) && (s.value = a.value, i.value = !1);
+    }
+    return G(() => document.addEventListener("mousedown", O)), _(
+      () => document.removeEventListener("mousedown", O)
+    ), (c, N) => (g(), x("div", {
+      ref_key: "wrapperRef",
+      ref: f,
+      style: { position: "relative", flex: 1, minWidth: 0 }
+    }, [
+      D("input", {
+        ref_key: "inputRef",
+        ref: d,
+        value: s.value,
+        spellcheck: "false",
+        autocomplete: "off",
+        style: {
+          width: "100%",
+          boxSizing: "border-box",
+          padding: "3px 0",
+          fontSize: "var(--vj-input-font-size, 13px)",
+          fontFamily: "var(--vj-font, monospace)",
+          color: "var(--vj-text-muted, #999999)",
+          background: "transparent",
+          border: "none",
+          outline: "none"
+        },
+        onInput: N[0] || (N[0] = (l) => {
+          s.value = l.target.value, i.value || (i.value = !0);
+        }),
+        onFocus: N[1] || (N[1] = (l) => {
+          l.target.select(), i.value = !0;
+        }),
+        onKeydown: E
+      }, null, 40, pt),
+      i.value && y.value.length > 0 ? (g(), x("div", {
+        key: 0,
+        ref_key: "listRef",
+        ref: p,
+        style: R({
+          position: "absolute",
+          top: "100%",
+          left: "-12px",
+          right: "-12px",
+          zIndex: 50,
+          maxHeight: yt + "px",
+          overflowY: "auto",
+          backgroundColor: "var(--vj-bg-panel, #252526)",
+          border: "1px solid var(--vj-border, #333333)",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
+        })
+      }, [
+        (g(!0), x(U, null, te(y.value, (l, v) => (g(), x("div", {
+          key: l.id,
+          style: R({
+            padding: "4px 12px",
+            fontSize: "13px",
+            fontFamily: "var(--vj-font, monospace)",
+            color: v === o.value ? "var(--vj-text, #cccccc)" : "var(--vj-text-muted, #888888)",
+            backgroundColor: v === o.value ? "var(--vj-bg-hover, #2a2d2e)" : "transparent",
+            cursor: "pointer",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }),
+          onMousedown: H(() => C(l.path), ["prevent"]),
+          onMouseenter: () => o.value = v
+        }, F(l.path), 45, ht))), 128))
+      ], 4)) : A("", !0)
+    ], 512));
+  }
+}), mt = ["value"], bt = ["onMousedown", "onMouseenter"], wt = { style: { width: "14px", flexShrink: 0, fontSize: "12px" } }, kt = 200, be = /* @__PURE__ */ Y({
+  __name: "EnumInput",
+  props: /* @__PURE__ */ he({
+    enumValues: {},
+    value: {},
+    inputStyle: {}
+  }, {
+    inputRef: {},
+    inputRefModifiers: {}
+  }),
+  emits: /* @__PURE__ */ he(["valueChange"], ["update:inputRef"]),
+  setup(t, { expose: r, emit: e }) {
+    const n = t, a = e;
+    Fe(t, "inputRef");
+    const s = M(n.value), i = M(!1), o = M(0), d = M(null), p = M(null), f = M(null);
+    J(
+      () => n.value,
+      (c) => {
+        s.value = c;
+      }
+    );
+    const y = T(() => n.enumValues.map((c) => String(c)));
+    J(y, () => {
+      o.value = 0;
+    }), J(
+      () => [o.value, i.value],
+      ([c, N]) => {
+        const l = d.value;
+        if (!l || !N) return;
+        const v = l.children[c];
+        v == null || v.scrollIntoView({ block: "nearest" });
+      }
+    );
+    function C(c) {
+      a("valueChange", c), s.value = c, i.value = !1;
+    }
+    function E(c) {
+      if (!i.value) {
+        (c.key === "ArrowDown" || c.key === "ArrowUp") && (c.preventDefault(), c.stopPropagation(), i.value = !0);
+        return;
+      }
+      switch (c.key) {
+        case "ArrowDown":
+          c.preventDefault(), c.stopPropagation(), o.value = Math.min(
+            o.value + 1,
+            y.value.length - 1
+          );
+          break;
+        case "ArrowUp":
+          c.preventDefault(), c.stopPropagation(), o.value = Math.max(o.value - 1, 0);
+          break;
+        case "Enter":
+          c.preventDefault(), c.stopPropagation(), y.value.length > 0 && o.value < y.value.length && C(y.value[o.value]);
+          break;
+        case "Escape":
+          c.preventDefault(), c.stopPropagation(), s.value = n.value, i.value = !1;
+          break;
+        case "Tab":
+          s.value = n.value, i.value = !1;
+          break;
+      }
+    }
+    function O(c) {
+      p.value && !p.value.contains(c.target) && (s.value = n.value, i.value = !1);
+    }
+    return G(() => document.addEventListener("mousedown", O)), _(
+      () => document.removeEventListener("mousedown", O)
+    ), r({ focus: () => {
+      var c;
+      return (c = f.value) == null ? void 0 : c.focus();
+    } }), (c, N) => (g(), x("div", {
+      ref_key: "wrapperRef",
+      ref: p,
+      style: { position: "relative", flex: 1, minWidth: 0 }
+    }, [
+      D("input", {
+        ref_key: "localInputRef",
+        ref: f,
+        value: s.value,
+        spellcheck: "false",
+        autocomplete: "off",
+        style: R(t.inputStyle),
+        onInput: N[0] || (N[0] = (l) => {
+          s.value = l.target.value, i.value || (i.value = !0);
+        }),
+        onFocus: N[1] || (N[1] = () => i.value = !0),
+        onKeydown: E,
+        onClick: N[2] || (N[2] = H(() => {
+        }, ["stop"]))
+      }, null, 44, mt),
+      i.value && y.value.length > 0 ? (g(), x("div", {
+        key: 0,
+        ref_key: "listRef",
+        ref: d,
+        style: R({
+          position: "absolute",
+          top: "calc(100% + 4px)",
+          left: "-32px",
+          right: 0,
+          zIndex: 50,
+          maxHeight: kt + "px",
+          overflowY: "auto",
+          backgroundColor: "var(--vj-bg-panel, #252526)",
+          border: "1px solid var(--vj-border, #333333)",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
+        })
+      }, [
+        (g(!0), x(U, null, te(y.value, (l, v) => (g(), x("div", {
+          key: l,
+          style: R({
+            padding: "4px 12px",
+            fontSize: "13px",
+            fontFamily: "var(--vj-font, monospace)",
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            color: v === o.value ? "var(--vj-text, #cccccc)" : "var(--vj-text-muted, #888888)",
+            backgroundColor: v === o.value ? "var(--vj-bg-hover, #2a2d2e)" : "transparent",
+            cursor: "pointer",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }),
+          onMousedown: H(() => C(l), ["prevent"]),
+          onMouseenter: () => o.value = v
+        }, [
+          D("span", wt, F(l === t.value ? "✓" : ""), 1),
+          Oe(" " + F(l), 1)
+        ], 44, bt))), 128))
+      ], 4)) : A("", !0)
+    ], 512));
+  }
+}), St = { key: 0 }, jt = ["data-form-node-id", "draggable"], It = ["value"], Dt = {
+  key: 2,
+  style: {
+    color: "var(--vj-text-muted, #888888)",
+    fontSize: "11px",
+    fontFamily: "var(--vj-font, monospace)"
+  }
+}, Ct = { key: 1 }, Nt = ["data-form-node-id", "draggable"], Mt = ["value"], Et = {
+  key: 2,
+  style: {
+    color: "var(--vj-error, #f48771)",
+    fontSize: "10px",
+    fontFamily: "var(--vj-font, monospace)"
+  }
+}, Tt = {
+  key: 3,
+  style: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    minWidth: 0
+  }
+}, $t = {
+  key: 2,
+  style: {
+    color: "var(--vj-boolean, #569cd6)",
+    fontFamily: "var(--vj-font, monospace)",
+    fontSize: "var(--vj-input-font-size, 13px)",
+    fontStyle: "italic",
+    flex: 1
+  }
+}, zt = ["value", "placeholder"], ze = /* @__PURE__ */ Y({
+  __name: "FormField",
+  props: {
+    node: {},
+    depth: {}
+  },
+  setup(t) {
+    const r = t, e = Se($e), { state: n, actions: a } = Z(), s = M(!1), i = M(null), o = M(null);
+    function d() {
+      i.value && typeof i.value.focus == "function" && i.value.focus();
+    }
+    const p = T(
+      () => r.node.type === "object" || r.node.type === "array"
+    ), f = T(() => r.node.parentId === null), y = T(
+      () => n.selectedNodeIds.value.has(r.node.id)
+    ), C = T(() => e.editingNodeId.value === r.node.id), E = T(() => e.collapsedIds.value.has(r.node.id)), O = T(() => {
+      var B;
+      return r.node.parentId ? ((B = n.tree.value.nodesById.get(r.node.parentId)) == null ? void 0 : B.type) === "object" : !1;
+    }), c = T(
+      () => Ce(
+        e.schema.value,
+        e.rootSchema.value,
+        r.node.path
+      )
+    ), N = T(
+      () => at(r.node, e.schema.value, e.rootSchema.value)
+    ), l = T(() => {
+      var B;
+      return (B = c.value) == null ? void 0 : B.description;
+    }), v = T(() => {
+      var B;
+      return (B = c.value) == null ? void 0 : B.deprecated;
+    }), k = T(() => {
+      var B;
+      return (B = c.value) == null ? void 0 : B.title;
+    }), m = T(
+      () => e.dragState.value.dropTargetNodeId === r.node.id
+    ), h = T(
+      () => e.dragState.value.draggedNodeIds.has(r.node.id)
+    );
+    function $() {
+      return m.value && e.dragState.value.dropPosition === "before" ? "var(--vj-accent, #007acc)" : "transparent";
+    }
+    function V() {
+      return m.value && e.dragState.value.dropPosition === "after" ? "var(--vj-accent, #007acc)" : "transparent";
+    }
+    function W() {
+      return y.value ? e.isFocused.value ? "var(--vj-bg-selected, #2a5a1e)" : "var(--vj-bg-selected-muted, var(--vj-bg-hover, #2a2d2e))" : s.value ? "var(--vj-bg-hover, #2a2d2e)" : "transparent";
+    }
+    function Q() {
+      return y.value && e.isFocused.value ? "var(--vj-text-selected, var(--vj-text, #cccccc))" : "var(--vj-text, #cccccc)";
+    }
+    function S() {
+      return nt(r.node);
+    }
+    function z() {
+      return ot(r.node);
+    }
+    function u(B) {
+      B.preventDefault();
+      const w = B.currentTarget.getBoundingClientRect(), ee = w.top + w.height / 2;
+      e.onDragOver(r.node.id, B.clientY < ee ? "before" : "after");
+    }
+    function j(B) {
+      B.dataTransfer.effectAllowed = "move", n.selectedNodeIds.value.size > 1 && n.selectedNodeIds.value.has(r.node.id) && De(B.dataTransfer, n.selectedNodeIds.value.size), e.onDragStart(r.node.id);
+    }
+    function I(B) {
+      var ne;
+      const w = lt(B, (ne = c.value) == null ? void 0 : ne.type, r.node.type), ee = Ye(n.tree.value, r.node.id, w);
+      a.setTree(ee);
+    }
+    function K(B) {
+      const w = qe(n.tree.value, r.node.id, B);
+      a.setTree(w);
+    }
+    function L() {
+      const B = fe(n.tree.value, r.node.id);
+      a.setTree(B);
+    }
+    function ie() {
+      const B = r.node.type === "array" ? String(r.node.children.length) : `newKey${r.node.children.length}`, w = Qe(n.tree.value, r.node.id, B, "");
+      a.setTree(w);
+    }
+    const Re = T(
+      () => {
+        var B;
+        return ((B = c.value) == null ? void 0 : B.enum) && c.value.enum.length > 0;
+      }
+    ), oe = T(
+      () => `calc(${(e.maxDepth.value - r.depth) * 16}px + ${e.maxKeyLength.value}ch)`
+    );
+    return J(C, async (B) => {
+      B && (await ce(), p.value ? o.value && o.value.focus() : r.node.value !== null && r.node.value !== void 0 && r.node.value !== "" && i.value ? d() : o.value && o.value.focus());
+    }), (B, w) => {
+      var ee, ne;
+      return p.value ? (g(), x("div", St, [
+        D("div", {
+          "data-form-node-id": t.node.id,
+          draggable: !f.value,
+          style: R({
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            padding: "1px 8px",
+            paddingLeft: 8 + t.depth * 16 + "px",
+            cursor: "pointer",
+            backgroundColor: W(),
+            color: Q(),
+            height: "28px",
+            boxSizing: "border-box",
+            userSelect: "none",
+            opacity: v.value ? 0.5 : h.value ? 0.4 : 1,
+            borderTop: `2px solid ${$()}`,
+            borderBottom: `2px solid ${V()}`
+          }),
+          onClick: w[3] || (w[3] = H((P) => b(e).onSelect(t.node.id, P), ["stop"])),
+          onDblclick: w[4] || (w[4] = () => b(e).onToggleCollapse(t.node.id)),
+          onMouseenter: w[5] || (w[5] = () => s.value = !0),
+          onMouseleave: w[6] || (w[6] = () => s.value = !1),
+          onDragstart: j,
+          onDragover: u,
+          onDragend: w[7] || (w[7] = () => b(e).onDragEnd()),
+          onDrop: w[8] || (w[8] = H(() => b(e).onDrop(), ["prevent"]))
+        }, [
+          D("button", {
+            style: R({
+              background: "none",
+              border: "none",
+              color: "inherit",
+              cursor: "pointer",
+              padding: 0,
+              width: "16px",
+              fontSize: "9px",
+              flexShrink: 0,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "transform 0.15s",
+              transform: E.value ? "rotate(0deg)" : "rotate(90deg)"
+            }),
+            onClick: w[0] || (w[0] = H(() => b(e).onToggleCollapse(t.node.id), ["stop"]))
+          }, " ▶ ", 4),
+          C.value && !f.value ? (g(), x("input", {
+            key: 0,
+            ref_key: "keyInputRef",
+            ref: o,
+            value: t.node.key,
+            style: R({
+              background: "none",
+              border: "none",
+              color: "inherit",
+              fontFamily: "var(--vj-font, monospace)",
+              fontSize: "var(--vj-input-font-size, 13px)",
+              fontWeight: 500,
+              padding: 0,
+              outline: "none",
+              flexShrink: 0,
+              width: oe.value
+            }),
+            onInput: w[1] || (w[1] = (P) => K(P.target.value)),
+            onClick: w[2] || (w[2] = H(() => {
+            }, ["stop"]))
+          }, null, 44, It)) : (g(), x("span", {
+            key: 1,
+            style: R({
+              color: !f.value && !O.value && !y.value ? "var(--vj-text-muted, #888888)" : "inherit",
+              fontSize: "var(--vj-input-font-size, 13px)",
+              fontFamily: "var(--vj-font, monospace)",
+              fontWeight: 500,
+              flexShrink: 0,
+              display: "inline-block",
+              width: oe.value
+            })
+          }, F(f.value ? "/" : b(se)(t.node, b(n).tree.value)), 5)),
+          b(e).showDescriptions && k.value && !y.value ? (g(), x("span", Dt, F(k.value), 1)) : A("", !0),
+          s.value ? (g(), x("button", {
+            key: 3,
+            style: R({
+              background: "none",
+              border: "none",
+              color: y.value ? "inherit" : "var(--vj-text-muted, #888888)",
+              cursor: "pointer",
+              padding: 0,
+              fontSize: "12px",
+              fontFamily: "var(--vj-font, monospace)"
+            }),
+            onClick: H(ie, ["stop"])
+          }, " + Add " + F(t.node.type === "array" ? "item" : "property"), 5)) : A("", !0),
+          b(e).showCounts ? (g(), x("span", {
+            key: 4,
+            style: R({
+              color: y.value ? "inherit" : "var(--vj-text-dim, #666666)",
+              fontSize: "12px",
+              fontFamily: "var(--vj-font, monospace)",
+              marginLeft: "auto"
+            })
+          }, F(t.node.type === "array" ? `${t.node.children.length} items` : `${t.node.children.length} properties`), 5)) : A("", !0),
+          !f.value && C.value ? (g(), x("button", {
+            key: 5,
+            style: R({
+              background: "none",
+              border: "none",
+              color: y.value ? "inherit" : "var(--vj-text-muted, #888888)",
+              cursor: "pointer",
+              padding: "2px 4px",
+              fontSize: "14px",
+              fontFamily: "var(--vj-font, monospace)",
+              ...b(e).showCounts ? {} : { marginLeft: "auto" }
+            }),
+            title: "Remove",
+            onClick: H(L, ["stop"])
+          }, " × ", 4)) : A("", !0)
+        ], 44, jt),
+        b(e).showDescriptions && l.value ? (g(), x("div", {
+          key: 0,
+          style: R({
+            padding: "2px 12px 4px",
+            paddingLeft: 8 + t.depth * 16 + 22 + "px",
+            fontSize: "11px",
+            color: "var(--vj-text-dim, #666666)",
+            fontFamily: "var(--vj-font, monospace)"
+          })
+        }, F(l.value), 5)) : A("", !0),
+        E.value ? A("", !0) : (g(), x("div", Ct, [
+          (g(!0), x(U, null, te(t.node.children, (P) => (g(), X(ze, {
+            key: P.id,
+            node: P,
+            depth: t.depth + 1
+          }, null, 8, ["node", "depth"]))), 128))
+        ]))
+      ])) : (g(), x("div", {
+        key: 1,
+        "data-form-node-id": t.node.id,
+        draggable: !f.value,
+        style: R({
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "1px 8px",
+          paddingLeft: 8 + t.depth * 16 + "px",
+          cursor: "pointer",
+          backgroundColor: W(),
+          color: Q(),
+          height: "28px",
+          boxSizing: "border-box",
+          userSelect: "none",
+          opacity: v.value ? 0.5 : h.value ? 0.4 : 1,
+          borderTop: `2px solid ${$()}`,
+          borderBottom: `2px solid ${V()}`
+        }),
+        onClick: w[14] || (w[14] = H((P) => b(e).onSelect(t.node.id, P), ["stop"])),
+        onDblclick: w[15] || (w[15] = () => b(e).onStartEditing(t.node.id)),
+        onMouseenter: w[16] || (w[16] = () => s.value = !0),
+        onMouseleave: w[17] || (w[17] = () => s.value = !1),
+        onDragstart: j,
+        onDragover: u,
+        onDragend: w[18] || (w[18] = () => b(e).onDragEnd()),
+        onDrop: w[19] || (w[19] = H(() => b(e).onDrop(), ["prevent"]))
+      }, [
+        w[20] || (w[20] = D("span", { style: { width: "16px", flexShrink: 0 } }, null, -1)),
+        C.value && O.value ? (g(), x("input", {
+          key: 0,
+          ref_key: "keyInputRef",
+          ref: o,
+          value: t.node.key,
+          style: R({
+            background: "none",
+            border: "none",
+            color: "inherit",
+            fontFamily: "var(--vj-font, monospace)",
+            fontSize: "var(--vj-input-font-size, 13px)",
+            padding: 0,
+            flexShrink: 0,
+            outline: "none",
+            width: oe.value
+          }),
+          onInput: w[9] || (w[9] = (P) => K(P.target.value)),
+          onClick: w[10] || (w[10] = H(() => {
+          }, ["stop"])),
+          onKeydown: w[11] || (w[11] = (P) => {
+            P.key === "Tab" && !P.shiftKey && i.value && (P.preventDefault(), d());
+          })
+        }, null, 44, Mt)) : (g(), x("span", {
+          key: 1,
+          style: R({
+            color: !O.value && !y.value ? "var(--vj-text-muted, #888888)" : "inherit",
+            fontSize: "var(--vj-input-font-size, 13px)",
+            fontFamily: "var(--vj-font, monospace)",
+            flexShrink: 0,
+            display: "inline-block",
+            width: oe.value
+          })
+        }, F(b(se)(t.node, b(n).tree.value)), 5)),
+        N.value && !y.value ? (g(), x("span", Et, " * ")) : A("", !0),
+        C.value ? (g(), x("div", Tt, [
+          t.node.type === "boolean" ? (g(), X(be, {
+            key: 0,
+            ref_key: "valueInputRef",
+            ref: i,
+            "enum-values": ["true", "false"],
+            value: String(t.node.value),
+            "input-style": {
+              background: "none",
+              border: "none",
+              fontFamily: "var(--vj-font, monospace)",
+              fontSize: "var(--vj-input-font-size, 13px)",
+              padding: "0",
+              flex: "1",
+              outline: "none",
+              color: S()
+            },
+            onValueChange: I
+          }, null, 8, ["value", "input-style"])) : Re.value && ((ee = c.value) != null && ee.enum) ? (g(), X(be, {
+            key: 1,
+            ref_key: "valueInputRef",
+            ref: i,
+            "enum-values": c.value.enum,
+            value: z(),
+            "input-style": {
+              background: "none",
+              border: "none",
+              fontFamily: "var(--vj-font, monospace)",
+              fontSize: "var(--vj-input-font-size, 13px)",
+              padding: "0",
+              flex: "1",
+              outline: "none",
+              color: S()
+            },
+            onValueChange: I
+          }, null, 8, ["enum-values", "value", "input-style"])) : t.node.type === "null" ? (g(), x("span", $t, " null ")) : (g(), x("input", {
+            key: 3,
+            ref_key: "valueInputRef",
+            ref: i,
+            value: z(),
+            placeholder: ((ne = c.value) == null ? void 0 : ne.default) !== void 0 ? String(c.value.default) : "<value>",
+            style: R({
+              background: "none",
+              border: "none",
+              fontFamily: "var(--vj-font, monospace)",
+              fontSize: "var(--vj-input-font-size, 13px)",
+              padding: 0,
+              flex: 1,
+              outline: "none",
+              color: S()
+            }),
+            onInput: w[12] || (w[12] = (P) => I(P.target.value)),
+            onClick: w[13] || (w[13] = H(() => {
+            }, ["stop"]))
+          }, null, 44, zt))
+        ])) : (g(), x("span", {
+          key: 4,
+          style: R({
+            color: S(),
+            fontSize: "var(--vj-input-font-size, 13px)",
+            fontFamily: "var(--vj-font, monospace)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            fontStyle: t.node.type === "null" ? "italic" : void 0
+          })
+        }, F(z()), 5)),
+        C.value ? (g(), x("button", {
+          key: 5,
+          style: R({
+            background: "none",
+            border: "none",
+            color: y.value ? "inherit" : "var(--vj-text-muted, #888888)",
+            cursor: "pointer",
+            padding: "2px 4px",
+            fontSize: "14px",
+            fontFamily: "var(--vj-font, monospace)",
+            flexShrink: 0
+          }),
+          title: "Remove",
+          onClick: H(L, ["stop"])
+        }, " × ", 4)) : A("", !0)
+      ], 44, Nt));
+    };
+  }
+}), Rt = { style: {
+  backgroundColor: "var(--vj-bg, #1e1e1e)",
+  color: "var(--vj-text, #cccccc)",
+  height: "100%",
+  fontFamily: "var(--vj-font, monospace)",
+  display: "flex",
+  flexDirection: "column"
+} }, Bt = { style: {
+  display: "flex",
+  alignItems: "center",
+  padding: "4px 8px",
+  borderBottom: "1px solid var(--vj-border, #333333)",
+  backgroundColor: "var(--vj-bg, #1e1e1e)",
+  flexShrink: 0
+} }, de = /* @__PURE__ */ Y({
+  __name: "FormView",
+  props: {
+    class: {},
+    showDescriptions: { type: Boolean, default: !1 },
+    showCounts: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const r = t, { state: e, actions: n } = Z(), a = M(null), s = M(!1), i = M(null), o = M(/* @__PURE__ */ new Set());
+    let d = e.tree.value;
+    const p = T(() => (e.drillDownNodeId.value ? e.tree.value.nodesById.get(e.drillDownNodeId.value) : null) ?? e.tree.value.root);
+    J(
+      () => p.value.id,
+      () => {
+        i.value = null, o.value = /* @__PURE__ */ new Set();
+      }
+    );
+    const f = T(
+      () => pe(p.value, (S) => !o.value.has(S))
+    ), { dragState: y, handleDragStart: C, handleDragOver: E, handleDragEnd: O, handleDrop: c } = Ee(f, e.selectedNodeIds);
+    G(() => {
+      n.setVisibleNodesOverride(f.value);
+    }), _(() => {
+      n.setVisibleNodesOverride(null);
+    }), J(f, (S) => {
+      n.setVisibleNodesOverride(S);
+    });
+    const N = T(() => {
+      let S = 1, z = 0;
+      const u = p.value.path === "/" ? 0 : p.value.path.split("/").filter(Boolean).length;
+      for (const j of f.value) {
+        const I = j.parentId === null ? "/" : se(j, e.tree.value);
+        I.length > S && (S = I.length);
+        const L = (j.path === "/" ? 0 : j.path.split("/").filter(Boolean).length) - u;
+        L > z && (z = L);
+      }
+      return { maxKeyLength: S, maxDepth: z };
+    }), l = T(() => N.value.maxKeyLength), v = T(() => N.value.maxDepth), k = T(() => e.schema.value), m = T(
+      () => e.schema.value ?? void 0
+    );
+    function h(S, z) {
+      i.value = null, z.shiftKey ? (n.setVisibleNodesOverride(f.value), n.selectNodeRange(S)) : z.metaKey || z.ctrlKey ? n.toggleNodeSelection(S) : n.selectNode(S);
+    }
+    function $(S) {
+      const z = new Set(o.value);
+      z.has(S) ? z.delete(S) : z.add(S), o.value = z;
+    }
+    function V(S) {
+      d = e.tree.value, i.value = S;
+    }
+    function W(S) {
+      requestAnimationFrame(() => {
+        var u;
+        const z = (u = a.value) == null ? void 0 : u.querySelector(
+          `[data-form-node-id="${S}"]`
+        );
+        z == null || z.scrollIntoView({ block: "nearest" });
+      });
+    }
+    function Q(S) {
+      var u, j;
+      if (i.value) {
+        S.key === "Escape" ? (S.preventDefault(), S.stopPropagation(), n.setTree(d), i.value = null, (u = a.value) == null || u.focus()) : S.key === "Enter" && (S.preventDefault(), S.stopPropagation(), i.value = null, (j = a.value) == null || j.focus());
+        return;
+      }
+      let z = f.value.findIndex(
+        (I) => I.id === e.focusedNodeId.value
+      );
+      switch (z === -1 && f.value.length > 0 && (z = 0), S.key) {
+        case "ArrowDown": {
+          S.preventDefault();
+          const I = f.value[z + 1];
+          I && (S.shiftKey ? (n.setVisibleNodesOverride(f.value), n.selectNodeRange(I.id)) : n.selectNode(I.id), W(I.id));
+          break;
+        }
+        case "ArrowUp": {
+          S.preventDefault();
+          const I = f.value[z - 1];
+          I && (S.shiftKey ? (n.setVisibleNodesOverride(f.value), n.selectNodeRange(I.id)) : n.selectNode(I.id), W(I.id));
+          break;
+        }
+        case "ArrowRight": {
+          S.preventDefault();
+          const I = z >= 0 ? f.value[z] : null;
+          if (I && (I.type === "object" || I.type === "array"))
+            if (o.value.has(I.id)) {
+              const K = new Set(o.value);
+              K.delete(I.id), o.value = K;
+            } else I.children.length > 0 && (n.selectNode(I.children[0].id), W(I.children[0].id));
+          break;
+        }
+        case "ArrowLeft": {
+          S.preventDefault();
+          const I = z >= 0 ? f.value[z] : null;
+          if (!I) break;
+          if ((I.type === "object" || I.type === "array") && !o.value.has(I.id)) {
+            const L = new Set(o.value);
+            L.add(I.id), o.value = L;
+          } else if (I.parentId) {
+            const L = f.value.find(
+              (ie) => ie.id === I.parentId
+            );
+            L && (n.selectNode(L.id), W(L.id));
+          }
+          break;
+        }
+        case "Enter": {
+          S.preventDefault(), e.focusedNodeId.value && (d = e.tree.value, n.selectNode(e.focusedNodeId.value), i.value = e.focusedNodeId.value);
+          break;
+        }
+        case "a": {
+          if (S.metaKey || S.ctrlKey) {
+            S.preventDefault();
+            const I = Me(
+              e.tree.value,
+              e.focusedNodeId.value,
+              e.selectedNodeIds.value
+            );
+            I && n.setSelection(
+              e.focusedNodeId.value,
+              I,
+              e.focusedNodeId.value
+            );
+          }
+          break;
+        }
+        case "Escape": {
+          S.preventDefault(), e.selectedNodeIds.value.size > 1 && e.focusedNodeId.value ? n.selectNode(e.focusedNodeId.value) : n.setSelection(null, /* @__PURE__ */ new Set(), null);
+          break;
+        }
+        case "Delete":
+        case "Backspace": {
+          S.preventDefault();
+          const { newTree: I, nextFocusId: K } = ve(
+            e.tree.value,
+            e.selectedNodeIds.value,
+            f.value
+          );
+          if (I === e.tree.value) break;
+          n.setTree(I), K ? n.selectNode(K) : n.setSelection(null, /* @__PURE__ */ new Set(), null);
+          break;
+        }
+      }
+    }
+    return ke($e, {
+      schema: k,
+      rootSchema: m,
+      showDescriptions: r.showDescriptions,
+      showCounts: r.showCounts,
+      editingNodeId: i,
+      collapsedIds: o,
+      maxKeyLength: l,
+      maxDepth: v,
+      isFocused: s,
+      dragState: y,
+      onSelect: h,
+      onToggleCollapse: $,
+      onStartEditing: V,
+      onDragStart: C,
+      onDragOver: E,
+      onDragEnd: O,
+      onDrop: c
+    }), (S, z) => (g(), x("div", Rt, [
+      D("div", Bt, [
+        q(xt)
+      ]),
+      D("div", {
+        ref_key: "containerRef",
+        ref: a,
+        "data-form-container": "",
+        tabindex: "0",
+        style: {
+          flex: 1,
+          overflow: "auto",
+          outline: "none"
+        },
+        onKeydown: Q,
+        onFocus: z[0] || (z[0] = () => s.value = !0),
+        onBlur: z[1] || (z[1] = (u) => {
+          u.currentTarget.contains(u.relatedTarget) || (s.value = !1);
+        })
+      }, [
+        q(ze, {
+          node: p.value,
+          depth: 0
+        }, null, 8, ["node"])
+      ], 544)
+    ]));
+  }
+}), Vt = { style: {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  padding: "4px 8px",
+  backgroundColor: "var(--vj-bg, #1e1e1e)",
+  borderBottom: "1px solid var(--vj-border, #333333)"
+} }, Ft = ["value"], Ot = { style: {
+  display: "flex",
+  alignItems: "center",
+  gap: "2px",
+  flexShrink: 0,
+  height: "18px"
+} }, At = ["disabled"], Kt = ["disabled"], we = /* @__PURE__ */ Y({
+  __name: "SearchBar",
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const { state: r, actions: e } = Z(), n = M(null);
+    function a(i) {
+      var o;
+      i.key === "Enter" && (i.preventDefault(), i.shiftKey ? e.prevSearchMatch() : e.nextSearchMatch()), i.key === "Escape" && (i.preventDefault(), e.setSearchQuery(""), (o = n.value) == null || o.blur());
+    }
+    function s(i) {
+      var d, p;
+      (i.metaKey || i.ctrlKey) && i.key === "f" && (i.preventDefault(), (d = n.value) == null || d.focus(), (p = n.value) == null || p.select());
+    }
+    return G(() => document.addEventListener("keydown", s)), _(() => document.removeEventListener("keydown", s)), (i, o) => (g(), x("div", Vt, [
+      D("input", {
+        ref_key: "inputRef",
+        ref: n,
+        type: "text",
+        value: b(r).searchQuery.value,
+        placeholder: "Search...",
+        spellcheck: "false",
+        autocomplete: "off",
+        style: {
+          flex: 1,
+          background: "none",
+          border: "none",
+          borderRadius: "3px",
+          color: "var(--vj-text, #cccccc)",
+          fontFamily: "var(--vj-font, monospace)",
+          fontSize: "var(--vj-input-font-size, 13px)",
+          padding: "3px 8px",
+          outline: "none",
+          minWidth: 0
+        },
+        onInput: o[0] || (o[0] = (d) => b(e).setSearchQuery(d.target.value)),
+        onKeydown: a
+      }, null, 40, Ft),
+      D("div", Ot, [
+        b(r).searchQuery.value ? (g(), x(U, { key: 0 }, [
+          D("span", {
+            style: R({
+              fontSize: "11px",
+              lineHeight: 1,
+              color: b(r).searchMatches.value.length > 0 ? "var(--vj-text-muted, #999999)" : "var(--vj-error, #f48771)",
+              fontFamily: "var(--vj-font, monospace)",
+              whiteSpace: "nowrap"
+            })
+          }, F(b(r).searchMatches.value.length > 0 ? `${b(r).searchMatchIndex.value + 1}/${b(r).searchMatches.value.length}` : "0/0"), 5),
+          D("button", {
+            disabled: b(r).searchMatches.value.length === 0,
+            "aria-label": "Previous match (Shift+Enter)",
+            title: "Previous match (Shift+Enter)",
+            style: R({
+              background: "none",
+              border: "none",
+              color: b(r).searchMatches.value.length > 0 ? "var(--vj-text, #cccccc)" : "var(--vj-text-dimmer, #555555)",
+              cursor: b(r).searchMatches.value.length > 0 ? "pointer" : "default",
+              padding: 0,
+              fontSize: "10px",
+              lineHeight: 1,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "18px",
+              height: "18px"
+            }),
+            onClick: o[1] || (o[1] = //@ts-ignore
+            (...d) => b(e).prevSearchMatch && b(e).prevSearchMatch(...d))
+          }, " ▲ ", 12, At),
+          D("button", {
+            disabled: b(r).searchMatches.value.length === 0,
+            "aria-label": "Next match (Enter)",
+            title: "Next match (Enter)",
+            style: R({
+              background: "none",
+              border: "none",
+              color: b(r).searchMatches.value.length > 0 ? "var(--vj-text, #cccccc)" : "var(--vj-text-dimmer, #555555)",
+              cursor: b(r).searchMatches.value.length > 0 ? "pointer" : "default",
+              padding: 0,
+              fontSize: "10px",
+              lineHeight: 1,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "18px",
+              height: "18px"
+            }),
+            onClick: o[2] || (o[2] = //@ts-ignore
+            (...d) => b(e).nextSearchMatch && b(e).nextSearchMatch(...d))
+          }, " ▼ ", 12, Kt),
+          D("button", {
+            "aria-label": "Clear search (Esc)",
+            title: "Clear search (Esc)",
+            style: {
+              background: "none",
+              border: "none",
+              color: "var(--vj-text, #cccccc)",
+              cursor: "pointer",
+              padding: 0,
+              fontSize: "14px",
+              lineHeight: 1,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "18px",
+              height: "18px"
+            },
+            onClick: o[3] || (o[3] = () => b(e).setSearchQuery(""))
+          }, " × ")
+        ], 64)) : (g(), x(U, { key: 1 }, [
+          D("button", {
+            "aria-label": "Expand all",
+            title: "Expand all",
+            style: {
+              background: "none",
+              border: "none",
+              color: "var(--vj-text-muted, #888888)",
+              cursor: "pointer",
+              padding: "2px",
+              fontSize: "12px",
+              lineHeight: 1,
+              display: "inline-flex",
+              alignItems: "center"
+            },
+            onClick: o[4] || (o[4] = //@ts-ignore
+            (...d) => b(e).expandAll && b(e).expandAll(...d))
+          }, [...o[6] || (o[6] = [
+            D("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "1.5",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              D("path", { d: "M8 2v4M5 4l3-2 3 2" }),
+              D("path", { d: "M8 14v-4M5 12l3 2 3-2" }),
+              D("path", { d: "M2 8h12" })
+            ], -1)
+          ])]),
+          D("button", {
+            "aria-label": "Collapse all",
+            title: "Collapse all",
+            style: {
+              background: "none",
+              border: "none",
+              color: "var(--vj-text-muted, #888888)",
+              cursor: "pointer",
+              padding: "2px",
+              fontSize: "12px",
+              lineHeight: 1,
+              display: "inline-flex",
+              alignItems: "center"
+            },
+            onClick: o[5] || (o[5] = //@ts-ignore
+            (...d) => b(e).collapseAll && b(e).collapseAll(...d))
+          }, [...o[7] || (o[7] = [
+            D("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "1.5",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              D("path", { d: "M8 5V1M5 3l3 2 3-2" }),
+              D("path", { d: "M8 11v4M5 13l3-2 3 2" }),
+              D("path", { d: "M2 8h12" })
+            ], -1)
+          ])])
+        ], 64))
+      ])
+    ]));
+  }
+}), Lt = {
+  key: 0,
+  style: { flex: 1, minHeight: 0 }
+}, Pt = { style: {
+  display: "flex",
+  flexShrink: 0,
+  borderBottom: "1px solid var(--vj-border, #333333)",
+  backgroundColor: "var(--vj-bg-panel, #252526)"
+} }, Ht = { style: { flex: 1, minHeight: 0, overflow: "hidden" } }, Wt = {
+  key: 0,
+  style: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%"
+  }
+}, Jt = { style: { flex: 1, minHeight: 0, overflow: "auto" } }, Ut = {
+  key: 1,
+  style: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%"
+  }
+}, Yt = { style: { flex: 1, minHeight: 0 } }, qt = { style: { flex: 1, minHeight: 0, overflow: "auto" } }, Qt = {
+  key: 0,
+  style: {
+    width: "1px",
+    flexShrink: 0,
+    backgroundColor: "var(--vj-border, #333333)",
+    position: "relative",
+    transition: "background-color 0.15s"
+  }
+}, Xt = { style: {
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minWidth: 0,
+  overflow: "hidden"
+} }, Gt = { style: { flex: 1, minHeight: 0 } }, hn = /* @__PURE__ */ Y({
+  __name: "JsonEditor",
+  props: {
+    value: { type: [String, Number, Boolean, null, Array, Object] },
+    defaultValue: { type: [String, Number, Boolean, null, Array, Object] },
+    onChange: {},
+    schema: { default: null },
+    height: { default: "100%" },
+    width: { default: "100%" },
+    class: {},
+    style: {},
+    readOnly: { type: Boolean, default: !1 },
+    treeShowValues: { type: Boolean, default: !0 },
+    treeShowCounts: { type: Boolean, default: !1 },
+    editorShowDescriptions: { type: Boolean, default: !1 },
+    editorShowCounts: { type: Boolean, default: !1 },
+    sidebarOpen: { type: Boolean, default: !0 }
+  },
+  emits: ["change"],
+  setup(t, { emit: r }) {
+    const e = t, n = r, a = e.value !== void 0, s = M(
+      a ? e.value : e.defaultValue ?? {}
+    ), i = M(0);
+    J(
+      () => e.value,
+      (k) => {
+        a && k !== s.value && (s.value = k, i.value++);
+      }
+    );
+    function o(k) {
+      var m;
+      s.value = k, e.readOnly || (n("change", k), (m = e.onChange) == null || m.call(e, k));
+    }
+    const d = M(280), p = M(!1), f = M("tree"), y = M(null);
+    let C = !1, E = 0, O = 0, c = null;
+    function N() {
+      y.value && (p.value = y.value.offsetWidth < 500);
+    }
+    G(() => {
+      N(), y.value && (c = new ResizeObserver(N), c.observe(y.value));
+    }), _(() => {
+      c == null || c.disconnect();
+    });
+    function l(k) {
+      C = !0, E = k.clientX, O = d.value, document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+      function m($) {
+        if (!C) return;
+        const V = $.clientX - E;
+        d.value = Math.max(180, Math.min(600, O + V));
+      }
+      function h() {
+        C = !1, document.body.style.cursor = "", document.body.style.userSelect = "", document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", h);
+      }
+      document.addEventListener("mousemove", m), document.addEventListener("mouseup", h);
+    }
+    const v = T(() => ({
+      height: typeof e.height == "number" ? `${e.height}px` : e.height,
+      width: typeof e.width == "number" ? `${e.width}px` : e.width,
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      ...re,
+      ...e.style ?? {}
+    }));
+    return (k, m) => (g(), x("div", {
+      "data-vj-root": "",
+      style: R(v.value)
+    }, [
+      (g(), X(st, {
+        key: i.value,
+        value: s.value,
+        schema: e.schema,
+        onChange: o
+      }, {
+        default: Ae(() => [
+          p.value ? (g(), x("div", {
+            key: 0,
+            ref_key: "containerRef",
+            ref: y,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              flex: 1,
+              minHeight: 0
+            }
+          }, [
+            e.sidebarOpen ? (g(), x(U, { key: 1 }, [
+              D("div", Pt, [
+                D("button", {
+                  style: R({
+                    flex: 1,
+                    fontSize: "11px",
+                    padding: "4px 0",
+                    cursor: "pointer",
+                    fontFamily: "var(--vj-font, monospace)",
+                    border: "none",
+                    background: f.value === "tree" ? "var(--vj-accent-muted, #094771)" : "transparent",
+                    color: f.value === "tree" ? "var(--vj-text, #cccccc)" : "var(--vj-text-muted, #999999)"
+                  }),
+                  onClick: m[0] || (m[0] = () => f.value = "tree")
+                }, " Tree ", 4),
+                D("button", {
+                  style: R({
+                    flex: 1,
+                    fontSize: "11px",
+                    padding: "4px 0",
+                    cursor: "pointer",
+                    fontFamily: "var(--vj-font, monospace)",
+                    border: "none",
+                    background: f.value === "form" ? "var(--vj-accent-muted, #094771)" : "transparent",
+                    color: f.value === "form" ? "var(--vj-text, #cccccc)" : "var(--vj-text-muted, #999999)"
+                  }),
+                  onClick: m[1] || (m[1] = () => f.value = "form")
+                }, " Form ", 4)
+              ]),
+              D("div", Ht, [
+                f.value === "tree" ? (g(), x("div", Wt, [
+                  q(we),
+                  D("div", Jt, [
+                    q(me, {
+                      "show-values": e.treeShowValues,
+                      "show-counts": e.treeShowCounts
+                    }, null, 8, ["show-values", "show-counts"])
+                  ])
+                ])) : (g(), x("div", Ut, [
+                  D("div", Yt, [
+                    q(de, {
+                      "show-descriptions": e.editorShowDescriptions,
+                      "show-counts": e.editorShowCounts
+                    }, null, 8, ["show-descriptions", "show-counts"])
+                  ])
+                ]))
+              ])
+            ], 64)) : (g(), x("div", Lt, [
+              q(de, {
+                "show-descriptions": e.editorShowDescriptions,
+                "show-counts": e.editorShowCounts
+              }, null, 8, ["show-descriptions", "show-counts"])
+            ]))
+          ], 512)) : (g(), x("div", {
+            key: 1,
+            ref_key: "containerRef",
+            ref: y,
+            style: { display: "flex", flex: 1, minHeight: 0 }
+          }, [
+            D("div", {
+              style: R({
+                flexShrink: 0,
+                overflow: "hidden",
+                display: "flex",
+                flexDirection: "column",
+                width: e.sidebarOpen ? d.value + "px" : "0",
+                transition: "width 0.2s ease"
+              })
+            }, [
+              q(we),
+              D("div", qt, [
+                q(me, {
+                  "show-values": e.treeShowValues,
+                  "show-counts": e.treeShowCounts
+                }, null, 8, ["show-values", "show-counts"])
+              ])
+            ], 4),
+            e.sidebarOpen ? (g(), x("div", Qt, [
+              D("div", {
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  bottom: 0,
+                  left: "-3px",
+                  width: "7px",
+                  cursor: "col-resize",
+                  zIndex: 10
+                },
+                onMousedown: l,
+                onMouseenter: m[2] || (m[2] = (h) => {
+                  const $ = h.currentTarget.parentElement;
+                  $ && ($.style.backgroundColor = "var(--vj-accent, #007acc)");
+                }),
+                onMouseleave: m[3] || (m[3] = (h) => {
+                  if (!b(C)) {
+                    const $ = h.currentTarget.parentElement;
+                    $ && ($.style.backgroundColor = "var(--vj-border, #333333)");
+                  }
+                })
+              }, null, 32)
+            ])) : A("", !0),
+            D("div", Xt, [
+              D("div", Gt, [
+                q(de, {
+                  "show-descriptions": e.editorShowDescriptions,
+                  "show-counts": e.editorShowCounts
+                }, null, 8, ["show-descriptions", "show-counts"])
+              ])
+            ])
+          ], 512))
+        ]),
+        _: 1
+      }, 8, ["value", "schema"]))
+    ], 4));
+  }
+}), _t = { style: {
+  backgroundColor: "var(--vj-bg, #1e1e1e)",
+  color: "var(--vj-text, #cccccc)",
+  overflow: "auto",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column"
+} }, Zt = { style: {
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+  padding: "6px 12px",
+  borderBottom: "1px solid var(--vj-border, #333333)",
+  backgroundColor: "var(--vj-bg-panel, #252526)",
+  fontFamily: "var(--vj-font, monospace)",
+  fontSize: "12px",
+  flexShrink: 0
+} }, en = { style: { color: "var(--vj-text-muted, #999999)" } }, tn = {
+  key: 0,
+  style: { color: "#4ec94e" }
+}, nn = {
+  key: 1,
+  style: { color: "#f48771" }
+}, on = {
+  key: 2,
+  style: { color: "#dcdcaa" }
+}, an = { style: { flex: 1, overflow: "auto" } }, ln = {
+  key: 0,
+  style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    color: "var(--vj-text-dimmer, #555555)",
+    fontFamily: "var(--vj-font, monospace)",
+    fontSize: "13px"
+  }
+}, rn = { style: {
+  color: "var(--vj-text, #cccccc)",
+  flexShrink: 0,
+  minWidth: "100px"
+} }, sn = { style: { flex: 1, display: "flex", gap: "8px", overflow: "hidden" } }, un = { style: { color: "#f48771", textDecoration: "line-through" } }, dn = { style: { color: "#4ec94e" } }, cn = {
+  key: 1,
+  style: { color: "#4ec94e" }
+}, vn = {
+  key: 2,
+  style: { color: "#f48771", textDecoration: "line-through" }
+}, gn = /* @__PURE__ */ Y({
+  __name: "DiffView",
+  props: {
+    originalJson: {},
+    currentJson: {},
+    class: {}
+  },
+  setup(t) {
+    const r = t, e = T(
+      () => Xe(r.originalJson, r.currentJson)
+    ), n = T(() => e.value.filter((o) => o.type === "added").length), a = T(() => e.value.filter((o) => o.type === "removed").length), s = T(() => e.value.filter((o) => o.type === "changed").length);
+    function i(o) {
+      return tt[o.type];
+    }
+    return (o, d) => (g(), x("div", _t, [
+      D("div", Zt, [
+        D("span", en, F(e.value.length === 0 ? "No changes" : `${e.value.length} changes`), 1),
+        n.value > 0 ? (g(), x("span", tn, "+" + F(n.value) + " added", 1)) : A("", !0),
+        a.value > 0 ? (g(), x("span", nn, "-" + F(a.value) + " removed", 1)) : A("", !0),
+        s.value > 0 ? (g(), x("span", on, "~" + F(s.value) + " modified", 1)) : A("", !0)
+      ]),
+      D("div", an, [
+        e.value.length === 0 ? (g(), x("div", ln, " No differences detected ")) : A("", !0),
+        (g(!0), x(U, null, te(e.value, (p, f) => (g(), x("div", {
+          key: f,
+          style: R({
+            display: "flex",
+            alignItems: "flex-start",
+            padding: "3px 12px",
+            borderBottom: "1px solid var(--vj-border-subtle, #2a2a2a)",
+            backgroundColor: i(p).bg,
+            fontFamily: "var(--vj-font, monospace)",
+            fontSize: "12px",
+            gap: "8px"
+          })
+        }, [
+          D("span", {
+            style: R({
+              color: i(p).label,
+              fontWeight: 600,
+              width: "14px",
+              flexShrink: 0,
+              textAlign: "center"
+            })
+          }, F(i(p).marker), 5),
+          D("span", rn, F(p.path), 1),
+          D("span", sn, [
+            p.type === "changed" ? (g(), x(U, { key: 0 }, [
+              D("span", un, F(b(ae)(p.oldValue)), 1),
+              d[0] || (d[0] = D("span", { style: { color: "var(--vj-text-dim, #666666)" } }, "→", -1)),
+              D("span", dn, F(b(ae)(p.newValue)), 1)
+            ], 64)) : p.type === "added" ? (g(), x("span", cn, F(b(ae)(p.newValue)), 1)) : p.type === "removed" ? (g(), x("span", vn, F(b(ae)(p.oldValue)), 1)) : A("", !0)
+          ])
+        ], 4))), 128))
+      ])
+    ]));
+  }
+});
+export {
+  xt as Breadcrumbs,
+  ft as ContextMenu,
+  gn as DiffView,
+  be as EnumInput,
+  de as FormView,
+  hn as JsonEditor,
+  we as SearchBar,
+  me as TreeView,
+  st as VisualJson,
+  se as getDisplayKey,
+  pe as getVisibleNodes,
+  Ee as useDragDrop,
+  Z as useStudio
+};