@visual-json/react 0.2.0 → 0.3.1

package/dist/index.js

@@ -39,20 +39,11 @@ var import_react10 = require("react");
 
 // src/visual-json.tsx
 var import_react2 = require("react");
-var import_core2 = require("@visual-json/core");
-
-// src/context.ts
-var import_react = require("react");
-var StudioContext = (0, import_react.createContext)(null);
-function useStudio() {
-  const ctx = (0, import_react.useContext)(StudioContext);
-  if (!ctx) {
-    throw new Error("useStudio must be used within a <VisualJson> provider");
-  }
-  return ctx;
-}
+var import_core4 = require("@visual-json/core");
 
-// src/get-visible-nodes.ts
+// ../../@internal/ui/dist/index.mjs
+var import_core = require("@visual-json/core");
+var import_core2 = require("@visual-json/core");
 function getVisibleNodes(root, isExpanded) {
   const result = [];
   function walk(node) {
@@ -66,9 +57,171 @@ function getVisibleNodes(root, isExpanded) {
   walk(root);
   return result;
 }
+var LABEL_FIELDS = ["name", "type", "title", "id", "label", "key"];
+function getDisplayKey(node, state) {
+  if (node.parentId === null) return "/";
+  const parent = state.nodesById.get(node.parentId);
+  if (parent?.type !== "array" || node.type !== "object") return node.key;
+  for (const field of LABEL_FIELDS) {
+    const child = node.children.find((c) => c.key === field);
+    if (child?.value != null && child.value !== "") {
+      return String(child.value);
+    }
+  }
+  return node.key;
+}
+function collectAllIds(node) {
+  const ids = [node.id];
+  for (const child of node.children) {
+    ids.push(...collectAllIds(child));
+  }
+  return ids;
+}
+var DEFAULT_CSS_VARS = {
+  "--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"
+};
+var EMPTY_SET = Object.freeze(/* @__PURE__ */ new Set());
+function sortByTreeOrder(root, ids) {
+  const result = [];
+  function walk(node) {
+    if (ids.has(node.id)) result.push(node.id);
+    for (const child of node.children) walk(child);
+  }
+  walk(root);
+  return result;
+}
+function computeDrop(tree, drag) {
+  const { draggedNodeIds, dropTargetNodeId, dropPosition } = drag;
+  if (draggedNodeIds.size === 0 || !dropTargetNodeId || !dropPosition)
+    return null;
+  const targetNode = tree.nodesById.get(dropTargetNodeId);
+  if (!targetNode || !targetNode.parentId) return null;
+  for (const id of draggedNodeIds) {
+    if ((0, import_core.isDescendant)(tree, dropTargetNodeId, id)) return null;
+  }
+  const targetParentId = targetNode.parentId;
+  const targetParent = tree.nodesById.get(targetParentId);
+  if (!targetParent) return null;
+  const parentChildren = targetParent.children;
+  const orderedDragIds = parentChildren.filter((c) => draggedNodeIds.has(c.id)).map((c) => c.id);
+  const allSameParent = orderedDragIds.length === draggedNodeIds.size && [...draggedNodeIds].every((id) => {
+    const n = tree.nodesById.get(id);
+    return n?.parentId === targetParentId;
+  });
+  if (allSameParent) {
+    return (0, import_core.reorderChildrenMulti)(
+      tree,
+      targetParentId,
+      orderedDragIds,
+      dropTargetNodeId,
+      dropPosition
+    );
+  }
+  const orderedIds = sortByTreeOrder(tree.root, draggedNodeIds);
+  const draggedNodes = orderedIds.map((id) => tree.nodesById.get(id)).filter((n) => !!n && n.parentId !== null).map((n) => structuredClone(n));
+  let newTree = tree;
+  for (const id of [...orderedIds].reverse()) {
+    if (newTree.nodesById.has(id)) {
+      newTree = (0, import_core.removeNode)(newTree, id);
+    }
+  }
+  const updatedTarget = newTree.nodesById.get(dropTargetNodeId);
+  if (!updatedTarget || !updatedTarget.parentId) return null;
+  const updatedParent = newTree.nodesById.get(updatedTarget.parentId);
+  if (!updatedParent) return null;
+  let insertIdx = updatedParent.children.findIndex(
+    (c) => c.id === dropTargetNodeId
+  );
+  if (dropPosition === "after") insertIdx++;
+  for (let i = 0; i < draggedNodes.length; i++) {
+    newTree = (0, import_core.insertNode)(
+      newTree,
+      updatedParent.id,
+      draggedNodes[i],
+      insertIdx + i
+    );
+  }
+  return newTree;
+}
+function setMultiDragImage(dataTransfer, count, rootEl) {
+  const ghost = document.createElement("div");
+  ghost.textContent = `${count} selected`;
+  const root = rootEl ?? document.querySelector("[data-form-container], [role='tree']");
+  const cs = root ? getComputedStyle(root) : null;
+  const bg = cs?.getPropertyValue("--vj-bg-selected").trim() || DEFAULT_CSS_VARS["--vj-bg-selected"];
+  const fg = cs?.getPropertyValue("--vj-text-selected").trim() || cs?.getPropertyValue("--vj-text").trim() || DEFAULT_CSS_VARS["--vj-text"];
+  const font = cs?.getPropertyValue("--vj-font").trim() || DEFAULT_CSS_VARS["--vj-font"];
+  ghost.style.cssText = [
+    "position:fixed",
+    "top:-1000px",
+    "left:-1000px",
+    "padding:4px 12px",
+    `background:${bg}`,
+    `color:${fg}`,
+    `font-family:${font}`,
+    "font-size:13px",
+    "border-radius:4px",
+    "white-space:nowrap",
+    "pointer-events:none"
+  ].join(";");
+  document.body.appendChild(ghost);
+  dataTransfer.setDragImage(ghost, 0, 14);
+  requestAnimationFrame(() => ghost.remove());
+}
+var DIFF_COLORS = {
+  added: { bg: "#1e3a1e", marker: "+", label: "#4ec94e" },
+  removed: { bg: "#3a1e1e", marker: "-", label: "#f48771" },
+  changed: { bg: "#3a3a1e", marker: "~", label: "#dcdcaa" }
+};
+function formatValue(value) {
+  if (value === void 0) return "";
+  if (value === null) return "null";
+  if (typeof value === "string") return JSON.stringify(value);
+  if (typeof value === "object") {
+    const json = JSON.stringify(value, null, 2);
+    if (json.length > 80) {
+      return JSON.stringify(value).slice(0, 77) + "...";
+    }
+    return json;
+  }
+  return String(value);
+}
+
+// src/context.ts
+var import_react = require("react");
+var StudioContext = (0, import_react.createContext)(null);
+function useStudio() {
+  const ctx = (0, import_react.useContext)(StudioContext);
+  if (!ctx) {
+    throw new Error("useStudio must be used within a <VisualJson> provider");
+  }
+  return ctx;
+}
 
 // src/selection-utils.ts
-var import_core = require("@visual-json/core");
+var import_core3 = require("@visual-json/core");
 function computeSelectAllIds(tree, focusedNodeId, currentlySelected) {
   if (!focusedNodeId) return null;
   let node = tree.nodesById.get(focusedNodeId);
@@ -114,7 +267,7 @@ function deleteSelectedNodes(tree, selectedIds, visibleNodes) {
   let newTree = tree;
   for (const id of idsToDelete) {
     if (newTree.nodesById.has(id)) {
-      newTree = (0, import_core.removeNode)(newTree, id);
+      newTree = (0, import_core3.removeNode)(newTree, id);
     }
   }
   let nextFocusId = null;
@@ -139,20 +292,13 @@ function deleteSelectedNodes(tree, selectedIds, visibleNodes) {
 
 // src/visual-json.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function collectAllIds(node) {
-  const ids = [node.id];
-  for (const child of node.children) {
-    ids.push(...collectAllIds(child));
-  }
-  return ids;
-}
 function VisualJson({
   value,
   onChange,
   schema,
   children
 }) {
-  const [tree, setTreeState] = (0, import_react2.useState)(() => (0, import_core2.fromJson)(value));
+  const [tree, setTreeState] = (0, import_react2.useState)(() => (0, import_core4.fromJson)(value));
   const [focusedNodeId, setFocusedNodeId] = (0, import_react2.useState)(null);
   const [selectedNodeIds, setSelectedNodeIdsState] = (0, import_react2.useState)(
     () => /* @__PURE__ */ new Set()
@@ -189,7 +335,7 @@ function VisualJson({
   const setVisibleNodesOverride = (0, import_react2.useCallback)((nodes) => {
     visibleNodesOverrideRef.current = nodes;
   }, []);
-  const historyRef = (0, import_react2.useRef)(new import_core2.History());
+  const historyRef = (0, import_react2.useRef)(new import_core4.History());
   const isInternalChange = (0, import_react2.useRef)(false);
   const hasMounted = (0, import_react2.useRef)(false);
   const [canUndo, setCanUndo] = (0, import_react2.useState)(false);
@@ -214,11 +360,11 @@ function VisualJson({
       isInternalChange.current = false;
       return;
     }
-    const newTree = (0, import_core2.fromJson)(value);
+    const newTree = (0, import_core4.fromJson)(value);
     setTreeState(newTree);
     setExpandedNodeIds(/* @__PURE__ */ new Set([newTree.root.id]));
     focusSelectAndDrillDown(null);
-    historyRef.current = new import_core2.History();
+    historyRef.current = new import_core4.History();
     historyRef.current.push(newTree);
     setCanUndo(false);
     setCanRedo(false);
@@ -234,7 +380,7 @@ function VisualJson({
       setCanUndo(historyRef.current.canUndo);
       setCanRedo(historyRef.current.canRedo);
       isInternalChange.current = true;
-      onChange?.((0, import_core2.toJson)(newTree.root));
+      onChange?.((0, import_core4.toJson)(newTree.root));
     },
     [onChange]
   );
@@ -245,7 +391,7 @@ function VisualJson({
       setCanUndo(historyRef.current.canUndo);
       setCanRedo(historyRef.current.canRedo);
       isInternalChange.current = true;
-      onChange?.((0, import_core2.toJson)(prev.root));
+      onChange?.((0, import_core4.toJson)(prev.root));
     }
   }, [onChange]);
   const redo = (0, import_react2.useCallback)(() => {
@@ -255,7 +401,7 @@ function VisualJson({
       setCanUndo(historyRef.current.canUndo);
       setCanRedo(historyRef.current.canRedo);
       isInternalChange.current = true;
-      onChange?.((0, import_core2.toJson)(next.root));
+      onChange?.((0, import_core4.toJson)(next.root));
     }
   }, [onChange]);
   (0, import_react2.useEffect)(() => {
@@ -374,14 +520,14 @@ function VisualJson({
         setSearchMatchNodeIds(/* @__PURE__ */ new Set());
         return;
       }
-      const matches = (0, import_core2.searchNodes)(tree, query);
+      const matches = (0, import_core4.searchNodes)(tree, query);
       setSearchMatches(matches);
       setSearchMatchIndex(0);
       const matchIds = new Set(matches.map((m) => m.nodeId));
       setSearchMatchNodeIds(matchIds);
       if (matches.length > 0) {
         const firstId = matches[0].nodeId;
-        const ancestors = (0, import_core2.getAncestorIds)(
+        const ancestors = (0, import_core4.getAncestorIds)(
           tree,
           matches.map((m) => m.nodeId)
         );
@@ -409,7 +555,7 @@ function VisualJson({
   }, [searchMatches, searchMatchIndex, focusSelectAndDrillDown]);
   (0, import_react2.useEffect)(() => {
     if (!searchQuery.trim()) return;
-    const matches = (0, import_core2.searchNodes)(tree, searchQuery);
+    const matches = (0, import_core4.searchNodes)(tree, searchQuery);
     setSearchMatches(matches);
     setSearchMatchIndex(
       (prev) => Math.min(prev, Math.max(matches.length - 1, 0))
@@ -496,7 +642,7 @@ function VisualJson({
 
 // src/tree-view.tsx
 var import_react5 = require("react");
-var import_core4 = require("@visual-json/core");
+var import_core6 = require("@visual-json/core");
 
 // src/context-menu.tsx
 var import_react3 = require("react");
@@ -595,92 +741,17 @@ function ContextMenu({ x, y, items, onClose }) {
   );
 }
 
-// src/display-key.ts
-var LABEL_FIELDS = ["name", "type", "title", "id", "label", "key"];
-function getDisplayKey(node, state) {
-  if (node.parentId === null) return "/";
-  const parent = state.nodesById.get(node.parentId);
-  if (parent?.type !== "array" || node.type !== "object") return node.key;
-  for (const field of LABEL_FIELDS) {
-    const child = node.children.find((c) => c.key === field);
-    if (child?.value != null && child.value !== "") {
-      return String(child.value);
-    }
-  }
-  return node.key;
-}
-
 // src/use-drag-drop.ts
 var import_react4 = require("react");
-var import_core3 = require("@visual-json/core");
-
-// src/theme.ts
-var DEFAULT_CSS_VARS = {
-  "--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"
-};
-
-// src/use-drag-drop.ts
-var EMPTY_SET = Object.freeze(/* @__PURE__ */ new Set());
+var import_core5 = require("@visual-json/core");
+var EMPTY_SET2 = Object.freeze(/* @__PURE__ */ new Set());
 var INITIAL_DRAG_STATE = {
-  draggedNodeIds: EMPTY_SET,
+  draggedNodeIds: EMPTY_SET2,
   dropTargetNodeId: null,
   dropPosition: null
 };
-function sortByTreeOrder(root, ids) {
-  const result = [];
-  function walk(node) {
-    if (ids.has(node.id)) result.push(node.id);
-    for (const child of node.children) walk(child);
-  }
-  walk(root);
-  return result;
-}
-function setMultiDragImage(e, count) {
-  const ghost = document.createElement("div");
-  ghost.textContent = `${count} selected`;
-  const root = document.querySelector("[data-form-container], [role='tree']");
-  const cs = root ? getComputedStyle(root) : null;
-  const bg = cs?.getPropertyValue("--vj-bg-selected").trim() || DEFAULT_CSS_VARS["--vj-bg-selected"];
-  const fg = cs?.getPropertyValue("--vj-text-selected").trim() || cs?.getPropertyValue("--vj-text").trim() || DEFAULT_CSS_VARS["--vj-text"];
-  const font = cs?.getPropertyValue("--vj-font").trim() || DEFAULT_CSS_VARS["--vj-font"];
-  ghost.style.cssText = [
-    "position:fixed",
-    "top:-1000px",
-    "left:-1000px",
-    "padding:4px 12px",
-    `background:${bg}`,
-    `color:${fg}`,
-    `font-family:${font}`,
-    "font-size:13px",
-    "border-radius:4px",
-    "white-space:nowrap",
-    "pointer-events:none"
-  ].join(";");
-  document.body.appendChild(ghost);
-  e.dataTransfer.setDragImage(ghost, 0, 14);
-  requestAnimationFrame(() => ghost.remove());
+function setMultiDragImage2(e, count) {
+  setMultiDragImage(e.dataTransfer, count);
 }
 function useDragDrop(visibleNodes, selectedNodeIds) {
   const { state, actions } = useStudio();
@@ -712,7 +783,7 @@ function useDragDrop(visibleNodes, selectedNodeIds) {
     (nodeId, position) => {
       const draggedIds = dragStateRef.current.draggedNodeIds;
       for (const draggedId of draggedIds) {
-        if (nodeId === draggedId || (0, import_core3.isDescendant)(state.tree, nodeId, draggedId)) {
+        if (nodeId === draggedId || (0, import_core5.isDescendant)(state.tree, nodeId, draggedId)) {
           return;
         }
       }
@@ -741,62 +812,9 @@ function useDragDrop(visibleNodes, selectedNodeIds) {
     setDragState(INITIAL_DRAG_STATE);
   }, []);
   const handleDrop = (0, import_react4.useCallback)(() => {
-    const { draggedNodeIds, dropTargetNodeId, dropPosition } = dragStateRef.current;
-    if (draggedNodeIds.size === 0 || !dropTargetNodeId || !dropPosition) return;
-    const targetNode = state.tree.nodesById.get(dropTargetNodeId);
-    if (!targetNode || !targetNode.parentId) return;
-    for (const id of draggedNodeIds) {
-      if ((0, import_core3.isDescendant)(state.tree, dropTargetNodeId, id)) return;
-    }
-    const targetParentId = targetNode.parentId;
-    const targetParent = state.tree.nodesById.get(targetParentId);
-    if (!targetParent) return;
-    const parentChildren = targetParent.children;
-    const orderedDragIds = parentChildren.filter((c) => draggedNodeIds.has(c.id)).map((c) => c.id);
-    const allSameParent = orderedDragIds.length === draggedNodeIds.size && [...draggedNodeIds].every((id) => {
-      const n = state.tree.nodesById.get(id);
-      return n?.parentId === targetParentId;
-    });
-    if (allSameParent) {
-      const newTree = (0, import_core3.reorderChildrenMulti)(
-        state.tree,
-        targetParentId,
-        orderedDragIds,
-        dropTargetNodeId,
-        dropPosition
-      );
-      actions.setTree(newTree);
-    } else {
-      const orderedIds = sortByTreeOrder(state.tree.root, draggedNodeIds);
-      const draggedNodes = orderedIds.map((id) => state.tree.nodesById.get(id)).filter((n) => !!n && n.parentId !== null).map((n) => structuredClone(n));
-      let newTree = state.tree;
-      for (const id of [...orderedIds].reverse()) {
-        if (newTree.nodesById.has(id)) {
-          newTree = (0, import_core3.removeNode)(newTree, id);
-        }
-      }
-      const updatedTarget = newTree.nodesById.get(dropTargetNodeId);
-      if (!updatedTarget || !updatedTarget.parentId) {
-        setDragState(INITIAL_DRAG_STATE);
-        return;
-      }
-      const updatedParent = newTree.nodesById.get(updatedTarget.parentId);
-      if (!updatedParent) {
-        setDragState(INITIAL_DRAG_STATE);
-        return;
-      }
-      let insertIdx = updatedParent.children.findIndex(
-        (c) => c.id === dropTargetNodeId
-      );
-      if (dropPosition === "after") insertIdx++;
-      for (let i = 0; i < draggedNodes.length; i++) {
-        newTree = (0, import_core3.insertNode)(
-          newTree,
-          updatedParent.id,
-          draggedNodes[i],
-          insertIdx + i
-        );
-      }
+    const currentDragState = dragStateRef.current;
+    const newTree = computeDrop(state.tree, currentDragState);
+    if (newTree) {
       actions.setTree(newTree);
     }
     setDragState(INITIAL_DRAG_STATE);
@@ -881,7 +899,7 @@ function TreeNodeRow({
         onDragStart: (e) => {
           e.dataTransfer.effectAllowed = "move";
           if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
-            setMultiDragImage(e, state.selectedNodeIds.size);
+            setMultiDragImage2(e, state.selectedNodeIds.size);
           }
           onDragStart(node.id);
         },
@@ -1077,7 +1095,7 @@ function TreeView({
       items.push({
         label: "Copy value as JSON",
         action: () => {
-          const val = (0, import_core4.toJson)(node);
+          const val = (0, import_core6.toJson)(node);
           const text = typeof val === "string" ? val : JSON.stringify(val, null, 2);
           navigator.clipboard.writeText(text).catch(() => {
           });
@@ -1088,7 +1106,7 @@ function TreeView({
         items.push({
           label: "Duplicate",
           action: () => {
-            const newTree = (0, import_core4.duplicateNode)(state.tree, node.id);
+            const newTree = (0, import_core6.duplicateNode)(state.tree, node.id);
             actions.setTree(newTree);
           }
         });
@@ -1102,7 +1120,7 @@ function TreeView({
         ].filter((t) => t !== node.type).map((t) => ({
           label: `Change to ${t}`,
           action: () => {
-            const newTree = (0, import_core4.changeType)(state.tree, node.id, t);
+            const newTree = (0, import_core6.changeType)(state.tree, node.id, t);
             actions.setTree(newTree);
           }
         }));
@@ -1112,7 +1130,7 @@ function TreeView({
         items.push({
           label: "Delete",
           action: () => {
-            const newTree = (0, import_core4.removeNode)(state.tree, node.id);
+            const newTree = (0, import_core6.removeNode)(state.tree, node.id);
             actions.setTree(newTree);
           }
         });
@@ -1295,7 +1313,7 @@ function TreeView({
 
 // src/form-view.tsx
 var import_react8 = require("react");
-var import_core5 = require("@visual-json/core");
+var import_core7 = require("@visual-json/core");
 
 // src/breadcrumbs.tsx
 var import_react6 = require("react");
@@ -1650,9 +1668,9 @@ function EnumInput({
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function getResolvedSchema(schema, rootSchema, path) {
   if (!schema) return void 0;
-  const raw = (0, import_core5.getPropertySchema)(schema, path, rootSchema);
+  const raw = (0, import_core7.getPropertySchema)(schema, path, rootSchema);
   if (!raw) return void 0;
-  return (0, import_core5.resolveRef)(raw, rootSchema ?? schema);
+  return (0, import_core7.resolveRef)(raw, rootSchema ?? schema);
 }
 function getValueColor(node) {
   if (node.type === "boolean" || node.type === "null")
@@ -1739,25 +1757,25 @@ function FormField({
       } else {
         parsed = newValue;
       }
-      const newTree = (0, import_core5.setValue)(state.tree, node.id, parsed);
+      const newTree = (0, import_core7.setValue)(state.tree, node.id, parsed);
       actions.setTree(newTree);
     },
     [state.tree, node.id, node.type, actions, propSchema]
   );
   const handleKeyChange = (0, import_react8.useCallback)(
     (newKey) => {
-      const newTree = (0, import_core5.setKey)(state.tree, node.id, newKey);
+      const newTree = (0, import_core7.setKey)(state.tree, node.id, newKey);
       actions.setTree(newTree);
     },
     [state.tree, node.id, actions]
   );
   const handleRemove = (0, import_react8.useCallback)(() => {
-    const newTree = (0, import_core5.removeNode)(state.tree, node.id);
+    const newTree = (0, import_core7.removeNode)(state.tree, node.id);
     actions.setTree(newTree);
   }, [state.tree, node.id, actions]);
   const handleAddChild = (0, import_react8.useCallback)(() => {
     const key = node.type === "array" ? String(node.children.length) : `newKey${node.children.length}`;
-    const newTree = (0, import_core5.addProperty)(state.tree, node.id, key, "");
+    const newTree = (0, import_core7.addProperty)(state.tree, node.id, key, "");
     actions.setTree(newTree);
   }, [state.tree, node.id, node.type, node.children.length, actions]);
   const description = propSchema?.description;
@@ -1776,7 +1794,7 @@ function FormField({
           onDragStart: (e) => {
             e.dataTransfer.effectAllowed = "move";
             if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
-              setMultiDragImage(e, state.selectedNodeIds.size);
+              setMultiDragImage2(e, state.selectedNodeIds.size);
             }
             onDragStart(node.id);
           },
@@ -1989,7 +2007,7 @@ function FormField({
       onDragStart: (e) => {
         e.dataTransfer.effectAllowed = "move";
         if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
-          setMultiDragImage(e, state.selectedNodeIds.size);
+          setMultiDragImage2(e, state.selectedNodeIds.size);
         }
         onDragStart(node.id);
       },
@@ -3109,26 +3127,8 @@ function EditorLayout({
 
 // src/diff-view.tsx
 var import_react11 = require("react");
-var import_core6 = require("@visual-json/core");
+var import_core8 = require("@visual-json/core");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var DIFF_COLORS = {
-  added: { bg: "#1e3a1e", marker: "+", label: "#4ec94e" },
-  removed: { bg: "#3a1e1e", marker: "-", label: "#f48771" },
-  changed: { bg: "#3a3a1e", marker: "~", label: "#dcdcaa" }
-};
-function formatValue(value) {
-  if (value === void 0) return "";
-  if (value === null) return "null";
-  if (typeof value === "string") return JSON.stringify(value);
-  if (typeof value === "object") {
-    const json = JSON.stringify(value, null, 2);
-    if (json.length > 80) {
-      return JSON.stringify(value).slice(0, 77) + "...";
-    }
-    return json;
-  }
-  return String(value);
-}
 function DiffRow({ entry }) {
   const colors = DIFF_COLORS[entry.type];
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
@@ -3188,7 +3188,7 @@ function DiffView({
   className
 }) {
   const entries = (0, import_react11.useMemo)(
-    () => (0, import_core6.computeDiff)(originalJson, currentJson),
+    () => (0, import_core8.computeDiff)(originalJson, currentJson),
     [originalJson, currentJson]
   );
   const added = entries.filter((e) => e.type === "added").length;