@visual-json/react 0.1.1 → 0.3.0

package/dist/index.js

@@ -25,7 +25,6 @@ __export(index_exports, {
   DiffView: () => DiffView,
   FormView: () => FormView,
   JsonEditor: () => JsonEditor,
-  PropertyEditor: () => PropertyEditor,
   SearchBar: () => SearchBar,
   StudioContext: () => StudioContext,
   TreeView: () => TreeView,
@@ -40,7 +39,175 @@ var import_react10 = require("react");
 
 // src/visual-json.tsx
 var import_react2 = require("react");
+var import_core4 = require("@visual-json/core");
+
+// ../../@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) {
+    result.push(node);
+    if (isExpanded(node.id) && (node.type === "object" || node.type === "array")) {
+      for (const child of node.children) {
+        walk(child);
+      }
+    }
+  }
+  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");
@@ -53,27 +220,122 @@ function useStudio() {
   return ctx;
 }
 
-// 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));
+// src/selection-utils.ts
+var import_core3 = require("@visual-json/core");
+function computeSelectAllIds(tree, focusedNodeId, currentlySelected) {
+  if (!focusedNodeId) return null;
+  let node = tree.nodesById.get(focusedNodeId);
+  if (!node) return null;
+  while (node) {
+    const parent = node.parentId ? tree.nodesById.get(node.parentId) : void 0;
+    const siblings = parent ? parent.children : [tree.root];
+    const siblingIds = new Set(siblings.map((s) => s.id));
+    const allSelected = siblings.every((s) => currentlySelected.has(s.id));
+    if (!allSelected) {
+      return siblingIds;
+    }
+    if (!parent || !parent.parentId) return siblingIds;
+    node = parent;
+  }
+  return null;
+}
+function computeRangeIds(visibleNodes, anchorId, targetId) {
+  const anchorIdx = visibleNodes.findIndex((n) => n.id === anchorId);
+  const targetIdx = visibleNodes.findIndex((n) => n.id === targetId);
+  if (anchorIdx === -1 || targetIdx === -1) return null;
+  const start = Math.min(anchorIdx, targetIdx);
+  const end = Math.max(anchorIdx, targetIdx);
+  const ids = /* @__PURE__ */ new Set();
+  for (let i = start; i <= end; i++) {
+    ids.add(visibleNodes[i].id);
   }
   return ids;
 }
+function deleteSelectedNodes(tree, selectedIds, visibleNodes) {
+  const idsToDelete = [...selectedIds].filter((id) => {
+    const node = tree.nodesById.get(id);
+    if (!node || node.parentId === null) return false;
+    let cur = tree.nodesById.get(node.parentId);
+    while (cur) {
+      if (selectedIds.has(cur.id)) return false;
+      cur = cur.parentId ? tree.nodesById.get(cur.parentId) : void 0;
+    }
+    return true;
+  });
+  if (idsToDelete.length === 0) return { newTree: tree, nextFocusId: null };
+  const firstDeletedIdx = visibleNodes.findIndex((n) => selectedIds.has(n.id));
+  let newTree = tree;
+  for (const id of idsToDelete) {
+    if (newTree.nodesById.has(id)) {
+      newTree = (0, import_core3.removeNode)(newTree, id);
+    }
+  }
+  let nextFocusId = null;
+  for (let i = firstDeletedIdx; i < visibleNodes.length; i++) {
+    const id = visibleNodes[i].id;
+    if (!selectedIds.has(id) && newTree.nodesById.has(id)) {
+      nextFocusId = id;
+      break;
+    }
+  }
+  if (!nextFocusId) {
+    for (let i = firstDeletedIdx - 1; i >= 0; i--) {
+      const id = visibleNodes[i].id;
+      if (!selectedIds.has(id) && newTree.nodesById.has(id)) {
+        nextFocusId = id;
+        break;
+      }
+    }
+  }
+  return { newTree, nextFocusId };
+}
+
+// src/visual-json.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 function VisualJson({
   value,
   onChange,
   schema,
   children
 }) {
-  const [tree, setTreeState] = (0, import_react2.useState)(() => (0, import_core.fromJson)(value));
-  const [selectedNodeId, setSelectedNodeId] = (0, import_react2.useState)(null);
+  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()
+  );
+  const selectedNodeIdsRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const setSelectedNodeIds = (0, import_react2.useCallback)((ids) => {
+    selectedNodeIdsRef.current = ids;
+    setSelectedNodeIdsState(ids);
+  }, []);
+  const anchorNodeIdRef = (0, import_react2.useRef)(null);
+  const [anchorNodeId, setAnchorNodeIdState] = (0, import_react2.useState)(null);
+  const [drillDownNodeId, setDrillDownNodeId] = (0, import_react2.useState)(null);
   const [expandedNodeIds, setExpandedNodeIds] = (0, import_react2.useState)(
     () => /* @__PURE__ */ new Set([tree.root.id])
   );
-  const historyRef = (0, import_react2.useRef)(new import_core.History());
+  const setAnchorNodeId = (0, import_react2.useCallback)((id) => {
+    anchorNodeIdRef.current = id;
+    setAnchorNodeIdState(id);
+  }, []);
+  const focusSelectAndDrillDown = (0, import_react2.useCallback)(
+    (nodeId) => {
+      setFocusedNodeId(nodeId);
+      setSelectedNodeIds(nodeId ? /* @__PURE__ */ new Set([nodeId]) : /* @__PURE__ */ new Set());
+      setAnchorNodeId(nodeId);
+      setDrillDownNodeId(nodeId);
+    },
+    [setSelectedNodeIds, setAnchorNodeId]
+  );
+  const visibleNodes = (0, import_react2.useMemo)(
+    () => getVisibleNodes(tree.root, (id) => expandedNodeIds.has(id)),
+    [tree.root, expandedNodeIds]
+  );
+  const visibleNodesOverrideRef = (0, import_react2.useRef)(null);
+  const setVisibleNodesOverride = (0, import_react2.useCallback)((nodes) => {
+    visibleNodesOverrideRef.current = nodes;
+  }, []);
+  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);
@@ -98,11 +360,11 @@ function VisualJson({
       isInternalChange.current = false;
       return;
     }
-    const newTree = (0, import_core.fromJson)(value);
+    const newTree = (0, import_core4.fromJson)(value);
     setTreeState(newTree);
     setExpandedNodeIds(/* @__PURE__ */ new Set([newTree.root.id]));
-    setSelectedNodeId(null);
-    historyRef.current = new import_core.History();
+    focusSelectAndDrillDown(null);
+    historyRef.current = new import_core4.History();
     historyRef.current.push(newTree);
     setCanUndo(false);
     setCanRedo(false);
@@ -118,7 +380,7 @@ function VisualJson({
       setCanUndo(historyRef.current.canUndo);
       setCanRedo(historyRef.current.canRedo);
       isInternalChange.current = true;
-      onChange?.((0, import_core.toJson)(newTree.root));
+      onChange?.((0, import_core4.toJson)(newTree.root));
     },
     [onChange]
   );
@@ -129,7 +391,7 @@ function VisualJson({
       setCanUndo(historyRef.current.canUndo);
       setCanRedo(historyRef.current.canRedo);
       isInternalChange.current = true;
-      onChange?.((0, import_core.toJson)(prev.root));
+      onChange?.((0, import_core4.toJson)(prev.root));
     }
   }, [onChange]);
   const redo = (0, import_react2.useCallback)(() => {
@@ -139,7 +401,7 @@ function VisualJson({
       setCanUndo(historyRef.current.canUndo);
       setCanRedo(historyRef.current.canRedo);
       isInternalChange.current = true;
-      onChange?.((0, import_core.toJson)(next.root));
+      onChange?.((0, import_core4.toJson)(next.root));
     }
   }, [onChange]);
   (0, import_react2.useEffect)(() => {
@@ -159,8 +421,66 @@ function VisualJson({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [undo, redo]);
-  const selectNode = (0, import_react2.useCallback)((nodeId) => {
-    setSelectedNodeId(nodeId);
+  const selectNode = (0, import_react2.useCallback)(
+    (nodeId) => {
+      setFocusedNodeId(nodeId);
+      setSelectedNodeIds(nodeId ? /* @__PURE__ */ new Set([nodeId]) : /* @__PURE__ */ new Set());
+      setAnchorNodeId(nodeId);
+    },
+    [setSelectedNodeIds, setAnchorNodeId]
+  );
+  const selectAndDrillDown = focusSelectAndDrillDown;
+  const toggleNodeSelection = (0, import_react2.useCallback)(
+    (nodeId) => {
+      const next = new Set(selectedNodeIdsRef.current);
+      if (next.has(nodeId)) {
+        next.delete(nodeId);
+      } else {
+        next.add(nodeId);
+      }
+      setSelectedNodeIds(next);
+      if (next.size === 0) {
+        setFocusedNodeId(null);
+        setAnchorNodeId(null);
+      } else {
+        setFocusedNodeId(nodeId);
+        setAnchorNodeId(nodeId);
+      }
+    },
+    [setSelectedNodeIds, setAnchorNodeId]
+  );
+  const selectNodeRange = (0, import_react2.useCallback)(
+    (toNodeId) => {
+      const nodes = visibleNodesOverrideRef.current ?? visibleNodes;
+      const anchor = anchorNodeIdRef.current;
+      if (!anchor) {
+        setFocusedNodeId(toNodeId);
+        setSelectedNodeIds(/* @__PURE__ */ new Set([toNodeId]));
+        setAnchorNodeId(toNodeId);
+        return;
+      }
+      const rangeIds = computeRangeIds(nodes, anchor, toNodeId);
+      if (!rangeIds) {
+        setFocusedNodeId(toNodeId);
+        setSelectedNodeIds(/* @__PURE__ */ new Set([toNodeId]));
+        setAnchorNodeId(toNodeId);
+        return;
+      }
+      setSelectedNodeIds(rangeIds);
+      setFocusedNodeId(toNodeId);
+    },
+    [visibleNodes, setSelectedNodeIds, setAnchorNodeId]
+  );
+  const setSelection = (0, import_react2.useCallback)(
+    (focusedId, newSelectedIds, newAnchorId) => {
+      setFocusedNodeId(focusedId);
+      setSelectedNodeIds(newSelectedIds);
+      setAnchorNodeId(newAnchorId);
+    },
+    [setSelectedNodeIds, setAnchorNodeId]
+  );
+  const drillDown = (0, import_react2.useCallback)((nodeId) => {
+    setDrillDownNodeId(nodeId);
   }, []);
   const toggleExpand = (0, import_react2.useCallback)((nodeId) => {
     setExpandedNodeIds((prev) => {
@@ -200,13 +520,14 @@ function VisualJson({
         setSearchMatchNodeIds(/* @__PURE__ */ new Set());
         return;
       }
-      const matches = (0, import_core.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 ancestors = (0, import_core.getAncestorIds)(
+        const firstId = matches[0].nodeId;
+        const ancestors = (0, import_core4.getAncestorIds)(
           tree,
           matches.map((m) => m.nodeId)
         );
@@ -215,7 +536,7 @@ function VisualJson({
           for (const id of ancestors) next.add(id);
           return next;
         });
-        setSelectedNodeId(matches[0].nodeId);
+        focusSelectAndDrillDown(firstId);
       }
     },
     [tree]
@@ -224,17 +545,17 @@ function VisualJson({
     if (searchMatches.length === 0) return;
     const nextIdx = (searchMatchIndex + 1) % searchMatches.length;
     setSearchMatchIndex(nextIdx);
-    setSelectedNodeId(searchMatches[nextIdx].nodeId);
-  }, [searchMatches, searchMatchIndex]);
+    focusSelectAndDrillDown(searchMatches[nextIdx].nodeId);
+  }, [searchMatches, searchMatchIndex, focusSelectAndDrillDown]);
   const prevSearchMatch = (0, import_react2.useCallback)(() => {
     if (searchMatches.length === 0) return;
     const prevIdx = (searchMatchIndex - 1 + searchMatches.length) % searchMatches.length;
     setSearchMatchIndex(prevIdx);
-    setSelectedNodeId(searchMatches[prevIdx].nodeId);
-  }, [searchMatches, searchMatchIndex]);
+    focusSelectAndDrillDown(searchMatches[prevIdx].nodeId);
+  }, [searchMatches, searchMatchIndex, focusSelectAndDrillDown]);
   (0, import_react2.useEffect)(() => {
     if (!searchQuery.trim()) return;
-    const matches = (0, import_core.searchNodes)(tree, searchQuery);
+    const matches = (0, import_core4.searchNodes)(tree, searchQuery);
     setSearchMatches(matches);
     setSearchMatchIndex(
       (prev) => Math.min(prev, Math.max(matches.length - 1, 0))
@@ -244,7 +565,10 @@ function VisualJson({
   const state = (0, import_react2.useMemo)(
     () => ({
       tree,
-      selectedNodeId,
+      focusedNodeId,
+      selectedNodeIds,
+      anchorNodeId,
+      drillDownNodeId,
       expandedNodeIds,
       schema: schema ?? null,
       searchQuery,
@@ -254,7 +578,10 @@ function VisualJson({
     }),
     [
       tree,
-      selectedNodeId,
+      focusedNodeId,
+      selectedNodeIds,
+      anchorNodeId,
+      drillDownNodeId,
       expandedNodeIds,
       schema,
       searchQuery,
@@ -267,6 +594,12 @@ function VisualJson({
     () => ({
       setTree,
       selectNode,
+      selectAndDrillDown,
+      toggleNodeSelection,
+      selectNodeRange,
+      setSelection,
+      setVisibleNodesOverride,
+      drillDown,
       toggleExpand,
       expandNode,
       collapseNode,
@@ -283,6 +616,12 @@ function VisualJson({
     [
       setTree,
       selectNode,
+      selectAndDrillDown,
+      toggleNodeSelection,
+      selectNodeRange,
+      setSelection,
+      setVisibleNodesOverride,
+      drillDown,
       toggleExpand,
       expandNode,
       collapseNode,
@@ -303,7 +642,7 @@ function VisualJson({
 
 // src/tree-view.tsx
 var import_react5 = require("react");
-var import_core3 = require("@visual-json/core");
+var import_core6 = require("@visual-json/core");
 
 // src/context-menu.tsx
 var import_react3 = require("react");
@@ -402,111 +741,81 @@ 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/get-visible-nodes.ts
-function getVisibleNodes(root, isExpanded) {
-  const result = [];
-  function walk(node) {
-    result.push(node);
-    if (isExpanded(node.id) && (node.type === "object" || node.type === "array")) {
-      for (const child of node.children) {
-        walk(child);
-      }
-    }
-  }
-  walk(root);
-  return result;
-}
-
 // src/use-drag-drop.ts
 var import_react4 = require("react");
-var import_core2 = require("@visual-json/core");
+var import_core5 = require("@visual-json/core");
+var EMPTY_SET2 = Object.freeze(/* @__PURE__ */ new Set());
 var INITIAL_DRAG_STATE = {
-  draggedNodeId: null,
+  draggedNodeIds: EMPTY_SET2,
   dropTargetNodeId: null,
   dropPosition: null
 };
-function useDragDrop() {
+function setMultiDragImage2(e, count) {
+  setMultiDragImage(e.dataTransfer, count);
+}
+function useDragDrop(visibleNodes, selectedNodeIds) {
   const { state, actions } = useStudio();
   const [dragState, setDragState] = (0, import_react4.useState)(INITIAL_DRAG_STATE);
   const dragStateRef = (0, import_react4.useRef)(dragState);
   dragStateRef.current = dragState;
-  const handleDragStart = (0, import_react4.useCallback)((nodeId) => {
-    setDragState({
-      draggedNodeId: nodeId,
-      dropTargetNodeId: null,
-      dropPosition: null
-    });
-  }, []);
-  const handleDragOver = (0, import_react4.useCallback)(
+  const visibleNodeIndexMap = (0, import_react4.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    visibleNodes.forEach((n, i) => map.set(n.id, i));
+    return map;
+  }, [visibleNodes]);
+  const handleDragStart = (0, import_react4.useCallback)(
+    (nodeId) => {
+      let ids;
+      if (selectedNodeIds.size > 0 && selectedNodeIds.has(nodeId)) {
+        ids = selectedNodeIds;
+      } else {
+        ids = /* @__PURE__ */ new Set([nodeId]);
+      }
+      setDragState({
+        draggedNodeIds: ids,
+        dropTargetNodeId: null,
+        dropPosition: null
+      });
+    },
+    [selectedNodeIds]
+  );
+  const rawDragOver = (0, import_react4.useCallback)(
     (nodeId, position) => {
+      const draggedIds = dragStateRef.current.draggedNodeIds;
+      for (const draggedId of draggedIds) {
+        if (nodeId === draggedId || (0, import_core5.isDescendant)(state.tree, nodeId, draggedId)) {
+          return;
+        }
+      }
       setDragState((prev) => ({
         ...prev,
         dropTargetNodeId: nodeId,
         dropPosition: position
       }));
     },
-    []
+    [state.tree]
+  );
+  const handleDragOver = (0, import_react4.useCallback)(
+    (nodeId, position) => {
+      if (position === "before") {
+        const idx = visibleNodeIndexMap.get(nodeId);
+        if (idx !== void 0 && idx > 0) {
+          rawDragOver(visibleNodes[idx - 1].id, "after");
+          return;
+        }
+      }
+      rawDragOver(nodeId, position);
+    },
+    [visibleNodes, visibleNodeIndexMap, rawDragOver]
   );
   const handleDragEnd = (0, import_react4.useCallback)(() => {
     setDragState(INITIAL_DRAG_STATE);
   }, []);
   const handleDrop = (0, import_react4.useCallback)(() => {
-    const { draggedNodeId, dropTargetNodeId, dropPosition } = dragStateRef.current;
-    if (!draggedNodeId || !dropTargetNodeId || !dropPosition) return;
-    const draggedNode = state.tree.nodesById.get(draggedNodeId);
-    const targetNode = state.tree.nodesById.get(dropTargetNodeId);
-    if (!draggedNode || !targetNode) return;
-    if (draggedNode.parentId && draggedNode.parentId === targetNode.parentId) {
-      const parent = state.tree.nodesById.get(draggedNode.parentId);
-      if (parent) {
-        const fromIndex = parent.children.findIndex(
-          (c) => c.id === draggedNodeId
-        );
-        let toIndex = parent.children.findIndex(
-          (c) => c.id === dropTargetNodeId
-        );
-        if (dropPosition === "after") toIndex++;
-        if (fromIndex < toIndex) toIndex--;
-        if (fromIndex !== toIndex && fromIndex >= 0 && toIndex >= 0) {
-          const newTree = (0, import_core2.reorderChildren)(
-            state.tree,
-            parent.id,
-            fromIndex,
-            toIndex
-          );
-          actions.setTree(newTree);
-        }
-      }
-    } else if (targetNode.parentId) {
-      const newParent = state.tree.nodesById.get(targetNode.parentId);
-      if (newParent) {
-        let toIndex = newParent.children.findIndex(
-          (c) => c.id === dropTargetNodeId
-        );
-        if (dropPosition === "after") toIndex++;
-        const newTree = (0, import_core2.moveNode)(
-          state.tree,
-          draggedNodeId,
-          newParent.id,
-          toIndex
-        );
-        actions.setTree(newTree);
-      }
+    const currentDragState = dragStateRef.current;
+    const newTree = computeDrop(state.tree, currentDragState);
+    if (newTree) {
+      actions.setTree(newTree);
     }
     setDragState(INITIAL_DRAG_STATE);
   }, [state.tree, actions]);
@@ -528,6 +837,7 @@ function TreeNodeRow({
   showValues,
   showCounts,
   isFocused,
+  onSelectRange,
   onDragStart,
   onDragOver,
   onDragEnd,
@@ -535,19 +845,15 @@ function TreeNodeRow({
   onContextMenu
 }) {
   const { state, actions } = useStudio();
-  const isSelected = state.selectedNodeId === node.id;
+  const isSelected = state.selectedNodeIds.has(node.id);
   const isExpanded = state.expandedNodeIds.has(node.id);
   const isContainer = node.type === "object" || node.type === "array";
   const [hovered, setHovered] = (0, import_react5.useState)(false);
   const isRoot = node.parentId === null;
   const isSearchMatch = state.searchMatchNodeIds.has(node.id);
   const isActiveMatch = state.searchMatches.length > 0 && state.searchMatches[state.searchMatchIndex]?.nodeId === node.id;
-  const schema = state.schema;
-  const nodeSchema = schema ? (0, import_core3.getPropertySchema)(schema, node.path) : void 0;
-  const validation = nodeSchema ? (0, import_core3.validateNode)(node, nodeSchema) : null;
-  const hasError = validation ? !validation.valid : false;
   const isDragTarget = dragState.dropTargetNodeId === node.id;
-  const isDraggedNode = dragState.draggedNodeId === node.id;
+  const isDraggedNode = dragState.draggedNodeIds.has(node.id);
   function displayValue() {
     if (isContainer) {
       return node.type === "array" ? `[${node.children.length}]` : `{${node.children.length}}`;
@@ -563,12 +869,12 @@ function TreeNodeRow({
     const position = e.clientY < midY ? "before" : "after";
     onDragOver(node.id, position);
   }
-  let borderTop = "none";
-  let borderBottom = "none";
+  let borderTopColor = "transparent";
+  let borderBottomColor = "transparent";
   if (isDragTarget && dragState.dropPosition === "before") {
-    borderTop = "2px solid var(--vj-accent, #007acc)";
+    borderTopColor = "var(--vj-accent, #007acc)";
   } else if (isDragTarget && dragState.dropPosition === "after") {
-    borderBottom = "2px solid var(--vj-accent, #007acc)";
+    borderBottomColor = "var(--vj-accent, #007acc)";
   }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -577,13 +883,24 @@ function TreeNodeRow({
         role: "treeitem",
         "aria-selected": isSelected,
         "aria-expanded": isContainer ? isExpanded : void 0,
-        onClick: () => actions.selectNode(node.id),
+        onClick: (e) => {
+          if (e.shiftKey) {
+            onSelectRange(node.id);
+          } else if (e.metaKey || e.ctrlKey) {
+            actions.toggleNodeSelection(node.id);
+          } else {
+            actions.selectAndDrillDown(node.id);
+          }
+        },
         onMouseEnter: () => setHovered(true),
         onMouseLeave: () => setHovered(false),
         onContextMenu: (e) => onContextMenu(e, node),
         draggable: !isRoot,
         onDragStart: (e) => {
           e.dataTransfer.effectAllowed = "move";
+          if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
+            setMultiDragImage2(e, state.selectedNodeIds.size);
+          }
           onDragStart(node.id);
         },
         onDragOver: handleDragOverEvent,
@@ -597,15 +914,16 @@ function TreeNodeRow({
           display: "flex",
           alignItems: "center",
           gap: 6,
-          padding: "3px 8px",
+          padding: "1px 8px",
           paddingLeft: 8 + depth * 16,
           cursor: "pointer",
           backgroundColor: isSelected ? isFocused ? "var(--vj-bg-selected, #2a5a1e)" : "var(--vj-bg-selected-muted, var(--vj-bg-hover, #2a2d2e))" : isActiveMatch ? "var(--vj-bg-match-active, #51502b)" : isSearchMatch ? "var(--vj-bg-match, #3a3520)" : hovered ? "var(--vj-bg-hover, #2a2d2e)" : "transparent",
           minHeight: 28,
           userSelect: "none",
           opacity: isDraggedNode ? 0.4 : 1,
-          borderTop,
-          borderBottom,
+          borderTop: `2px solid ${borderTopColor}`,
+          borderBottom: `2px solid ${borderBottomColor}`,
+          boxSizing: "border-box",
           color: isSelected && isFocused ? "var(--vj-text-selected, var(--vj-text, #cccccc))" : "var(--vj-text, #cccccc)"
         },
         children: [
@@ -688,6 +1006,7 @@ function TreeNodeRow({
         showValues,
         showCounts,
         isFocused,
+        onSelectRange,
         onDragStart,
         onDragOver,
         onDragEnd,
@@ -705,25 +1024,34 @@ function TreeView({
 }) {
   const { state, actions } = useStudio();
   const containerRef = (0, import_react5.useRef)(null);
+  const visibleNodes = (0, import_react5.useMemo)(
+    () => getVisibleNodes(state.tree.root, (id) => state.expandedNodeIds.has(id)),
+    [state.tree.root, state.expandedNodeIds]
+  );
   const {
     dragState,
     handleDragStart,
     handleDragOver,
     handleDragEnd,
     handleDrop
-  } = useDragDrop();
-  const [contextMenu, setContextMenu] = (0, import_react5.useState)(null);
-  const visibleNodes = (0, import_react5.useMemo)(
-    () => getVisibleNodes(state.tree.root, (id) => state.expandedNodeIds.has(id)),
-    [state.tree.root, state.expandedNodeIds]
+  } = useDragDrop(visibleNodes, state.selectedNodeIds);
+  const handleSelectRange = (0, import_react5.useCallback)(
+    (nodeId) => {
+      actions.setVisibleNodesOverride(visibleNodes);
+      actions.selectNodeRange(nodeId);
+    },
+    [visibleNodes, actions]
   );
+  const [contextMenu, setContextMenu] = (0, import_react5.useState)(null);
   const handleContextMenu = (0, import_react5.useCallback)(
     (e, node) => {
       e.preventDefault();
-      actions.selectNode(node.id);
+      if (!state.selectedNodeIds.has(node.id)) {
+        actions.selectAndDrillDown(node.id);
+      }
       setContextMenu({ x: e.clientX, y: e.clientY, node });
     },
-    [actions]
+    [actions, state.selectedNodeIds]
   );
   const buildContextMenuItems = (0, import_react5.useCallback)(
     (node) => {
@@ -767,7 +1095,7 @@ function TreeView({
       items.push({
         label: "Copy value as JSON",
         action: () => {
-          const val = (0, import_core3.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(() => {
           });
@@ -778,7 +1106,7 @@ function TreeView({
         items.push({
           label: "Duplicate",
           action: () => {
-            const newTree = (0, import_core3.duplicateNode)(state.tree, node.id);
+            const newTree = (0, import_core6.duplicateNode)(state.tree, node.id);
             actions.setTree(newTree);
           }
         });
@@ -792,7 +1120,7 @@ function TreeView({
         ].filter((t) => t !== node.type).map((t) => ({
           label: `Change to ${t}`,
           action: () => {
-            const newTree = (0, import_core3.changeType)(state.tree, node.id, t);
+            const newTree = (0, import_core6.changeType)(state.tree, node.id, t);
             actions.setTree(newTree);
           }
         }));
@@ -802,7 +1130,7 @@ function TreeView({
         items.push({
           label: "Delete",
           action: () => {
-            const newTree = (0, import_core3.removeNode)(state.tree, node.id);
+            const newTree = (0, import_core6.removeNode)(state.tree, node.id);
             actions.setTree(newTree);
           }
         });
@@ -814,19 +1142,31 @@ function TreeView({
   const handleKeyDown = (0, import_react5.useCallback)(
     (e) => {
       const currentIndex = visibleNodes.findIndex(
-        (n) => n.id === state.selectedNodeId
+        (n) => n.id === state.focusedNodeId
       );
       switch (e.key) {
         case "ArrowDown": {
           e.preventDefault();
           const next = visibleNodes[currentIndex + 1];
-          if (next) actions.selectNode(next.id);
+          if (next) {
+            if (e.shiftKey) {
+              handleSelectRange(next.id);
+            } else {
+              actions.selectNode(next.id);
+            }
+          }
           break;
         }
         case "ArrowUp": {
           e.preventDefault();
           const prev = visibleNodes[currentIndex - 1];
-          if (prev) actions.selectNode(prev.id);
+          if (prev) {
+            if (e.shiftKey) {
+              handleSelectRange(prev.id);
+            } else {
+              actions.selectNode(prev.id);
+            }
+          }
           break;
         }
         case "ArrowRight": {
@@ -853,17 +1193,47 @@ function TreeView({
           }
           break;
         }
+        case "a": {
+          if (e.metaKey || e.ctrlKey) {
+            e.preventDefault();
+            const ids = computeSelectAllIds(
+              state.tree,
+              state.focusedNodeId,
+              state.selectedNodeIds
+            );
+            if (ids) {
+              actions.setSelection(
+                state.focusedNodeId,
+                ids,
+                state.focusedNodeId
+              );
+            }
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          if (state.selectedNodeIds.size > 1 && state.focusedNodeId) {
+            actions.selectNode(state.focusedNodeId);
+          } else {
+            actions.setSelection(null, /* @__PURE__ */ new Set(), null);
+          }
+          break;
+        }
         case "Delete":
         case "Backspace": {
           e.preventDefault();
-          const toDelete = currentIndex >= 0 ? visibleNodes[currentIndex] : null;
-          if (toDelete && toDelete.parentId) {
-            const nextSelect = visibleNodes[currentIndex + 1] ?? visibleNodes[currentIndex - 1];
-            const newTree = (0, import_core3.removeNode)(state.tree, toDelete.id);
-            actions.setTree(newTree);
-            if (nextSelect && nextSelect.id !== toDelete.id) {
-              actions.selectNode(nextSelect.id);
-            }
+          const { newTree, nextFocusId } = deleteSelectedNodes(
+            state.tree,
+            state.selectedNodeIds,
+            visibleNodes
+          );
+          if (newTree === state.tree) break;
+          actions.setTree(newTree);
+          if (nextFocusId) {
+            actions.selectNode(nextFocusId);
+          } else {
+            actions.setSelection(null, /* @__PURE__ */ new Set(), null);
           }
           break;
         }
@@ -871,23 +1241,25 @@ function TreeView({
     },
     [
       visibleNodes,
-      state.selectedNodeId,
+      state.focusedNodeId,
+      state.selectedNodeIds,
       state.expandedNodeIds,
       state.tree,
-      actions
+      actions,
+      handleSelectRange
     ]
   );
   const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
   (0, import_react5.useEffect)(() => {
-    if (state.selectedNodeId && containerRef.current) {
+    if (state.focusedNodeId && containerRef.current) {
       const el = containerRef.current.querySelector(
-        `[data-node-id="${state.selectedNodeId}"]`
+        `[data-node-id="${state.focusedNodeId}"]`
       );
       if (el) {
         el.scrollIntoView({ block: "nearest" });
       }
     }
-  }, [state.selectedNodeId]);
+  }, [state.focusedNodeId]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
@@ -917,6 +1289,7 @@ function TreeView({
             showValues,
             showCounts,
             isFocused,
+            onSelectRange: handleSelectRange,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
             onDragEnd: handleDragEnd,
@@ -940,7 +1313,7 @@ function TreeView({
 
 // src/form-view.tsx
 var import_react8 = require("react");
-var import_core4 = require("@visual-json/core");
+var import_core7 = require("@visual-json/core");
 
 // src/breadcrumbs.tsx
 var import_react6 = require("react");
@@ -949,8 +1322,8 @@ var MAX_SUGGESTIONS = 20;
 var DROPDOWN_MAX_HEIGHT = 200;
 function Breadcrumbs({ className }) {
   const { state, actions } = useStudio();
-  const selectedNode = state.selectedNodeId ? state.tree.nodesById.get(state.selectedNodeId) : null;
-  const currentPath = selectedNode?.path ?? "/";
+  const drillDownNode = state.drillDownNodeId ? state.tree.nodesById.get(state.drillDownNodeId) : null;
+  const currentPath = drillDownNode?.path ?? "/";
   const [inputValue, setInputValue] = (0, import_react6.useState)(currentPath);
   const [open, setOpen] = (0, import_react6.useState)(false);
   const [highlightIndex, setHighlightIndex] = (0, import_react6.useState)(0);
@@ -980,7 +1353,7 @@ function Breadcrumbs({ className }) {
     (path) => {
       for (const [id, node] of state.tree.nodesById) {
         if (node.path === path) {
-          actions.selectNode(id);
+          actions.selectAndDrillDown(id);
           break;
         }
       }
@@ -1068,7 +1441,7 @@ function Breadcrumbs({ className }) {
             style: {
               width: "100%",
               boxSizing: "border-box",
-              padding: "2px 0",
+              padding: "3px 0",
               fontSize: "var(--vj-input-font-size, 13px)",
               fontFamily: "var(--vj-font, monospace)",
               color: "var(--vj-text-muted, #999999)",
@@ -1295,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_core4.getPropertySchema)(schema, path, rootSchema);
+  const raw = (0, import_core7.getPropertySchema)(schema, path, rootSchema);
   if (!raw) return void 0;
-  return (0, import_core4.resolveRef)(raw, rootSchema ?? schema);
+  return (0, import_core7.resolveRef)(raw, rootSchema ?? schema);
 }
 function getValueColor(node) {
   if (node.type === "boolean" || node.type === "null")
@@ -1318,7 +1691,6 @@ function FormField({
   depth,
   showDescriptions,
   showCounts,
-  formSelectedNodeId,
   editingNodeId,
   collapsedIds,
   maxKeyLength,
@@ -1336,26 +1708,26 @@ function FormField({
   const { state, actions } = useStudio();
   const isContainer = node.type === "object" || node.type === "array";
   const collapsed = collapsedIds.has(node.id);
-  const isSelected = formSelectedNodeId === node.id;
+  const isSelected = state.selectedNodeIds.has(node.id);
   const isEditing = editingNodeId === node.id;
   const propSchema = getResolvedSchema(schema, rootSchema, node.path);
   const isRequired = checkRequired(node, schema, rootSchema);
   const [hovered, setHovered] = (0, import_react8.useState)(false);
   const isRoot = node.parentId === null;
   const isDragTarget = dragState.dropTargetNodeId === node.id;
-  const isDraggedNode = dragState.draggedNodeId === node.id;
+  const isDraggedNode = dragState.draggedNodeIds.has(node.id);
   function handleDragOverEvent(e) {
     e.preventDefault();
     const rect = e.currentTarget.getBoundingClientRect();
     const midY = rect.top + rect.height / 2;
     onDragOver(node.id, e.clientY < midY ? "before" : "after");
   }
-  let borderTop = "none";
-  let borderBottom = "none";
+  let borderTopColor = "transparent";
+  let borderBottomColor = "transparent";
   if (isDragTarget && dragState.dropPosition === "before") {
-    borderTop = "2px solid var(--vj-accent, #007acc)";
+    borderTopColor = "var(--vj-accent, #007acc)";
   } else if (isDragTarget && dragState.dropPosition === "after") {
-    borderBottom = "2px solid var(--vj-accent, #007acc)";
+    borderBottomColor = "var(--vj-accent, #007acc)";
   }
   const valueRef = (0, import_react8.useRef)(null);
   const keyRef = (0, import_react8.useRef)(null);
@@ -1385,29 +1757,28 @@ function FormField({
       } else {
         parsed = newValue;
       }
-      const newTree = (0, import_core4.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_core4.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_core4.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_core4.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;
-  const defaultVal = propSchema?.default;
   const isDeprecated = propSchema?.deprecated;
   const fieldTitle = propSchema?.title;
   const parentIsObject = node.parentId && state.tree.nodesById.get(node.parentId)?.type === "object";
@@ -1422,6 +1793,9 @@ function FormField({
           draggable: !isRoot,
           onDragStart: (e) => {
             e.dataTransfer.effectAllowed = "move";
+            if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
+              setMultiDragImage2(e, state.selectedNodeIds.size);
+            }
             onDragStart(node.id);
           },
           onDragOver: handleDragOverEvent,
@@ -1434,20 +1808,21 @@ function FormField({
             display: "flex",
             alignItems: "center",
             gap: 6,
-            padding: "3px 8px",
+            padding: "1px 8px",
             paddingLeft: 8 + depth * 16,
             cursor: "pointer",
             backgroundColor: rowBg,
             color: rowColor,
             height: 28,
+            boxSizing: "border-box",
             userSelect: "none",
             opacity: isDeprecated ? 0.5 : isDraggedNode ? 0.4 : 1,
-            borderTop,
-            borderBottom
+            borderTop: `2px solid ${borderTopColor}`,
+            borderBottom: `2px solid ${borderBottomColor}`
           },
           onClick: (e) => {
             e.stopPropagation();
-            onSelect(node.id);
+            onSelect(node.id, e);
           },
           onDoubleClick: () => onToggleCollapse(node.id),
           onMouseEnter: () => setHovered(true),
@@ -1503,7 +1878,7 @@ function FormField({
               {
                 style: {
                   color: !isRoot && !parentIsObject && !isSelected ? "var(--vj-text-muted, #888888)" : "inherit",
-                  fontSize: 13,
+                  fontSize: "var(--vj-input-font-size, 13px)",
                   fontFamily: "var(--vj-font, monospace)",
                   fontWeight: 500,
                   flexShrink: 0,
@@ -1604,7 +1979,6 @@ function FormField({
           depth: depth + 1,
           showDescriptions,
           showCounts,
-          formSelectedNodeId,
           editingNodeId,
           collapsedIds,
           maxKeyLength,
@@ -1632,6 +2006,9 @@ function FormField({
       draggable: !isRoot,
       onDragStart: (e) => {
         e.dataTransfer.effectAllowed = "move";
+        if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
+          setMultiDragImage2(e, state.selectedNodeIds.size);
+        }
         onDragStart(node.id);
       },
       onDragOver: handleDragOverEvent,
@@ -1644,20 +2021,21 @@ function FormField({
         display: "flex",
         alignItems: "center",
         gap: 6,
-        padding: "3px 8px",
+        padding: "1px 8px",
         paddingLeft: 8 + depth * 16,
         cursor: "pointer",
         backgroundColor: rowBg,
         color: rowColor,
         height: 28,
+        boxSizing: "border-box",
         userSelect: "none",
         opacity: isDeprecated ? 0.5 : isDraggedNode ? 0.4 : 1,
-        borderTop,
-        borderBottom
+        borderTop: `2px solid ${borderTopColor}`,
+        borderBottom: `2px solid ${borderBottomColor}`
       },
       onClick: (e) => {
         e.stopPropagation();
-        onSelect(node.id);
+        onSelect(node.id, e);
       },
       onDoubleClick: () => onStartEditing(node.id),
       onMouseEnter: () => setHovered(true),
@@ -1694,7 +2072,7 @@ function FormField({
           {
             style: {
               color: !parentIsObject && !isSelected ? "var(--vj-text-muted, #888888)" : "inherit",
-              fontSize: 13,
+              fontSize: "var(--vj-input-font-size, 13px)",
               fontFamily: "var(--vj-font, monospace)",
               flexShrink: 0,
               display: "inline-block",
@@ -1738,7 +2116,7 @@ function FormField({
           {
             style: {
               color: valueColor,
-              fontSize: 13,
+              fontSize: "var(--vj-input-font-size, 13px)",
               fontFamily: "var(--vj-font, monospace)",
               overflow: "hidden",
               textOverflow: "ellipsis",
@@ -1816,7 +2194,7 @@ function renderEditInput(node, propSchema, displayValue, handleValueChange, inpu
         style: {
           color: "var(--vj-boolean, #569cd6)",
           fontFamily: "var(--vj-font, monospace)",
-          fontSize: 13,
+          fontSize: "var(--vj-input-font-size, 13px)",
           fontStyle: "italic",
           flex: 1
         },
@@ -1849,11 +2227,8 @@ function FormView({
 }) {
   const { state, actions } = useStudio();
   const rootSchema = state.schema ?? void 0;
-  const selectedNode = state.selectedNodeId ? state.tree.nodesById.get(state.selectedNodeId) : null;
-  const displayNode = selectedNode ?? state.tree.root;
-  const [formSelectedNodeId, setFormSelectedNodeId] = (0, import_react8.useState)(
-    null
-  );
+  const drillDownNode = state.drillDownNodeId ? state.tree.nodesById.get(state.drillDownNodeId) : null;
+  const displayNode = drillDownNode ?? state.tree.root;
   const [editingNodeId, setEditingNodeId] = (0, import_react8.useState)(null);
   const preEditTreeRef = (0, import_react8.useRef)(null);
   const [collapsedIds, setCollapsedIds] = (0, import_react8.useState)(
@@ -1861,15 +2236,7 @@ function FormView({
   );
   const containerRef = (0, import_react8.useRef)(null);
   const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
-  const {
-    dragState,
-    handleDragStart,
-    handleDragOver,
-    handleDragEnd,
-    handleDrop
-  } = useDragDrop();
   (0, import_react8.useEffect)(() => {
-    setFormSelectedNodeId(null);
     setEditingNodeId(null);
     setCollapsedIds(/* @__PURE__ */ new Set());
   }, [displayNode.id]);
@@ -1877,6 +2244,17 @@ function FormView({
     () => getVisibleNodes(displayNode, (id) => !collapsedIds.has(id)),
     [displayNode, collapsedIds]
   );
+  const {
+    dragState,
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd,
+    handleDrop
+  } = useDragDrop(visibleNodes, state.selectedNodeIds);
+  (0, import_react8.useEffect)(() => {
+    actions.setVisibleNodesOverride(visibleNodes);
+    return () => actions.setVisibleNodesOverride(null);
+  }, [visibleNodes, actions]);
   const { maxKeyLength, maxDepth } = (0, import_react8.useMemo)(() => {
     let maxKey = 1;
     let maxD = 0;
@@ -1890,10 +2268,20 @@ function FormView({
     }
     return { maxKeyLength: maxKey, maxDepth: maxD };
   }, [visibleNodes, displayNode.path, state.tree]);
-  const handleSelect = (0, import_react8.useCallback)((nodeId) => {
-    setFormSelectedNodeId(nodeId);
-    setEditingNodeId(null);
-  }, []);
+  const handleSelect = (0, import_react8.useCallback)(
+    (nodeId, e) => {
+      setEditingNodeId(null);
+      if (e.shiftKey) {
+        actions.setVisibleNodesOverride(visibleNodes);
+        actions.selectNodeRange(nodeId);
+      } else if (e.metaKey || e.ctrlKey) {
+        actions.toggleNodeSelection(nodeId);
+      } else {
+        actions.selectNode(nodeId);
+      }
+    },
+    [actions, visibleNodes]
+  );
   const handleToggleCollapse = (0, import_react8.useCallback)((nodeId) => {
     setCollapsedIds((prev) => {
       const next = new Set(prev);
@@ -1941,15 +2329,23 @@ function FormView({
         }
         return;
       }
-      const currentIndex = visibleNodes.findIndex(
-        (n) => n.id === formSelectedNodeId
+      let currentIndex = visibleNodes.findIndex(
+        (n) => n.id === state.focusedNodeId
       );
+      if (currentIndex === -1 && visibleNodes.length > 0) {
+        currentIndex = 0;
+      }
       switch (e.key) {
         case "ArrowDown": {
           e.preventDefault();
           const next = visibleNodes[currentIndex + 1];
           if (next) {
-            setFormSelectedNodeId(next.id);
+            if (e.shiftKey) {
+              actions.setVisibleNodesOverride(visibleNodes);
+              actions.selectNodeRange(next.id);
+            } else {
+              actions.selectNode(next.id);
+            }
             scrollToNode(next.id);
           }
           break;
@@ -1958,7 +2354,12 @@ function FormView({
           e.preventDefault();
           const prev = visibleNodes[currentIndex - 1];
           if (prev) {
-            setFormSelectedNodeId(prev.id);
+            if (e.shiftKey) {
+              actions.setVisibleNodesOverride(visibleNodes);
+              actions.selectNodeRange(prev.id);
+            } else {
+              actions.selectNode(prev.id);
+            }
             scrollToNode(prev.id);
           }
           break;
@@ -1974,7 +2375,7 @@ function FormView({
                 return next;
               });
             } else if (node.children.length > 0) {
-              setFormSelectedNodeId(node.children[0].id);
+              actions.selectNode(node.children[0].id);
               scrollToNode(node.children[0].id);
             }
           }
@@ -1996,7 +2397,7 @@ function FormView({
               (n) => n.id === current.parentId
             );
             if (parentInVisible) {
-              setFormSelectedNodeId(parentInVisible.id);
+              actions.selectNode(parentInVisible.id);
               scrollToNode(parentInVisible.id);
             }
           }
@@ -2004,30 +2405,54 @@ function FormView({
         }
         case "Enter": {
           e.preventDefault();
-          if (formSelectedNodeId) {
+          if (state.focusedNodeId) {
             preEditTreeRef.current = state.tree;
-            setEditingNodeId(formSelectedNodeId);
+            actions.selectNode(state.focusedNodeId);
+            setEditingNodeId(state.focusedNodeId);
+          }
+          break;
+        }
+        case "a": {
+          if (e.metaKey || e.ctrlKey) {
+            e.preventDefault();
+            const ids = computeSelectAllIds(
+              state.tree,
+              state.focusedNodeId,
+              state.selectedNodeIds
+            );
+            if (ids) {
+              actions.setSelection(
+                state.focusedNodeId,
+                ids,
+                state.focusedNodeId
+              );
+            }
           }
           break;
         }
         case "Escape": {
           e.preventDefault();
-          setEditingNodeId(null);
+          if (state.selectedNodeIds.size > 1 && state.focusedNodeId) {
+            actions.selectNode(state.focusedNodeId);
+          } else {
+            actions.setSelection(null, /* @__PURE__ */ new Set(), null);
+          }
           break;
         }
         case "Delete":
         case "Backspace": {
           e.preventDefault();
-          const toDelete = currentIndex >= 0 ? visibleNodes[currentIndex] : null;
-          if (toDelete && toDelete.parentId) {
-            const nextSelect = visibleNodes[currentIndex + 1] ?? visibleNodes[currentIndex - 1];
-            const newTree = (0, import_core4.removeNode)(state.tree, toDelete.id);
-            actions.setTree(newTree);
-            if (nextSelect && nextSelect.id !== toDelete.id) {
-              setFormSelectedNodeId(nextSelect.id);
-            } else {
-              setFormSelectedNodeId(null);
-            }
+          const { newTree, nextFocusId } = deleteSelectedNodes(
+            state.tree,
+            state.selectedNodeIds,
+            visibleNodes
+          );
+          if (newTree === state.tree) break;
+          actions.setTree(newTree);
+          if (nextFocusId) {
+            actions.selectNode(nextFocusId);
+          } else {
+            actions.setSelection(null, /* @__PURE__ */ new Set(), null);
           }
           break;
         }
@@ -2035,7 +2460,8 @@ function FormView({
     },
     [
       visibleNodes,
-      formSelectedNodeId,
+      state.focusedNodeId,
+      state.selectedNodeIds,
       editingNodeId,
       collapsedIds,
       scrollToNode,
@@ -2060,9 +2486,11 @@ function FormView({
           "div",
           {
             style: {
+              display: "flex",
+              alignItems: "center",
               padding: "4px 8px",
               borderBottom: "1px solid var(--vj-border, #333333)",
-              backgroundColor: "var(--vj-bg-panel, #252526)",
+              backgroundColor: "var(--vj-bg, #1e1e1e)",
               flexShrink: 0
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Breadcrumbs, {})
@@ -2095,7 +2523,6 @@ function FormView({
                 depth: 0,
                 showDescriptions,
                 showCounts,
-                formSelectedNodeId,
                 editingNodeId,
                 collapsedIds,
                 maxKeyLength,
@@ -2165,7 +2592,7 @@ function SearchBar({ className }) {
         alignItems: "center",
         gap: 6,
         padding: "4px 8px",
-        backgroundColor: "var(--vj-bg-panel, #252526)",
+        backgroundColor: "var(--vj-bg, #1e1e1e)",
         borderBottom: "1px solid var(--vj-border, #333333)"
       },
       children: [
@@ -2372,31 +2799,6 @@ function SearchBar({ className }) {
 
 // src/json-editor.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-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"
-};
 function JsonEditor({
   value,
   defaultValue,
@@ -2723,451 +3125,13 @@ function EditorLayout({
   ] });
 }
 
-// src/property-editor.tsx
+// src/diff-view.tsx
 var import_react11 = require("react");
-var import_core5 = require("@visual-json/core");
+var import_core8 = require("@visual-json/core");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var ALL_TYPES = [
-  "string",
-  "number",
-  "boolean",
-  "null",
-  "object",
-  "array"
-];
-function PropertyRow({ node, schemaProperty }) {
-  const { state, actions } = useStudio();
-  const isContainer = node.type === "object" || node.type === "array";
-  const [hoveredRow, setHoveredRow] = (0, import_react11.useState)(false);
-  const enumRef = (0, import_react11.useRef)(null);
-  function handleValueChange(newValue) {
-    let parsed;
-    if (newValue === "null") parsed = null;
-    else if (newValue === "true") parsed = true;
-    else if (newValue === "false") parsed = false;
-    else if ((node.type === "number" || schemaProperty?.type === "number" || schemaProperty?.type === "integer") && !isNaN(Number(newValue)) && newValue.trim() !== "")
-      parsed = Number(newValue);
-    else parsed = newValue;
-    const newTree = (0, import_core5.setValue)(state.tree, node.id, parsed);
-    actions.setTree(newTree);
-  }
-  function handleKeyChange(newKey) {
-    const newTree = (0, import_core5.setKey)(state.tree, node.id, newKey);
-    actions.setTree(newTree);
-  }
-  function handleRemove() {
-    const newTree = (0, import_core5.removeNode)(state.tree, node.id);
-    actions.setTree(newTree);
-  }
-  function handleAddChild() {
-    const key = node.type === "array" ? String(node.children.length) : `key${node.children.length}`;
-    const newTree = (0, import_core5.addProperty)(state.tree, node.id, key, "");
-    actions.setTree(newTree);
-  }
-  function displayValue() {
-    if (isContainer) {
-      return node.type === "array" ? `[${node.children.length} items]` : `{${node.children.length} keys}`;
-    }
-    if (node.value === null) return "";
-    if (node.value === void 0) return "";
-    if (typeof node.value === "string" && node.value === "") return "";
-    return String(node.value);
-  }
-  const hasEnumValues = schemaProperty?.enum && schemaProperty.enum.length > 0;
-  const description = schemaProperty?.description;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    "div",
-    {
-      onMouseEnter: () => setHoveredRow(true),
-      onMouseLeave: () => setHoveredRow(false),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              padding: "4px 12px",
-              borderBottom: "1px solid var(--vj-border-subtle, #2a2a2a)",
-              minHeight: 32,
-              backgroundColor: hoveredRow ? "var(--vj-bg-hover, #2a2d2e)" : "transparent"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                "input",
-                {
-                  value: node.key,
-                  onChange: (e) => handleKeyChange(e.target.value),
-                  style: {
-                    background: "none",
-                    border: "1px solid transparent",
-                    borderRadius: 3,
-                    color: "var(--vj-text, #cccccc)",
-                    fontFamily: "var(--vj-font, monospace)",
-                    fontSize: "var(--vj-input-font-size, 13px)",
-                    padding: "2px 6px",
-                    width: 140,
-                    flexShrink: 0
-                  }
-                }
-              ),
-              !isContainer ? hasEnumValues ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                EnumInput,
-                {
-                  enumValues: schemaProperty.enum,
-                  value: displayValue(),
-                  onValueChange: handleValueChange,
-                  inputRef: enumRef,
-                  inputStyle: {
-                    background: "none",
-                    border: "1px solid transparent",
-                    borderRadius: 3,
-                    color: node.type === "string" ? "var(--vj-string, #ce9178)" : "var(--vj-number, #b5cea8)",
-                    fontFamily: "var(--vj-font, monospace)",
-                    fontSize: "var(--vj-input-font-size, 13px)",
-                    padding: "2px 6px",
-                    flex: 1,
-                    outline: "none"
-                  }
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                "input",
-                {
-                  value: displayValue(),
-                  onChange: (e) => handleValueChange(e.target.value),
-                  placeholder: "<value>",
-                  style: {
-                    background: "none",
-                    border: "1px solid transparent",
-                    borderRadius: 3,
-                    color: node.type === "string" ? "var(--vj-string, #ce9178)" : "var(--vj-number, #b5cea8)",
-                    fontFamily: "var(--vj-font, monospace)",
-                    fontSize: "var(--vj-input-font-size, 13px)",
-                    padding: "2px 6px",
-                    flex: 1,
-                    textAlign: "right"
-                  }
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                "span",
-                {
-                  style: {
-                    color: "var(--vj-text-dim, #666666)",
-                    fontFamily: "var(--vj-font, monospace)",
-                    fontSize: 13,
-                    flex: 1,
-                    textAlign: "right"
-                  },
-                  children: displayValue()
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: 2,
-                    opacity: hoveredRow ? 1 : 0,
-                    transition: "opacity 0.1s",
-                    flexShrink: 0
-                  },
-                  children: [
-                    isContainer && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      "button",
-                      {
-                        onClick: handleAddChild,
-                        style: {
-                          background: "none",
-                          border: "none",
-                          color: "var(--vj-text-muted, #888888)",
-                          cursor: "pointer",
-                          padding: "2px 4px",
-                          fontSize: 15,
-                          fontFamily: "var(--vj-font, monospace)",
-                          borderRadius: 3,
-                          lineHeight: 1
-                        },
-                        title: "Add child",
-                        children: "+"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      "button",
-                      {
-                        onClick: handleRemove,
-                        style: {
-                          background: "none",
-                          border: "none",
-                          color: "var(--vj-text-muted, #888888)",
-                          cursor: "pointer",
-                          padding: "2px 4px",
-                          fontSize: 15,
-                          fontFamily: "var(--vj-font, monospace)",
-                          borderRadius: 3,
-                          lineHeight: 1
-                        },
-                        title: "Remove",
-                        children: "\xD7"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "div",
-          {
-            style: {
-              padding: "2px 12px 4px 44px",
-              fontSize: 11,
-              color: "var(--vj-text-dim, #666666)",
-              fontFamily: "var(--vj-font, monospace)",
-              borderBottom: "1px solid var(--vj-border-subtle, #2a2a2a)"
-            },
-            children: description
-          }
-        )
-      ]
-    }
-  );
-}
-function PropertyEditor({ className }) {
-  const { state, actions } = useStudio();
-  const selectedNode = state.selectedNodeId ? state.tree.nodesById.get(state.selectedNodeId) : null;
-  const handleChangeType = (0, import_react11.useCallback)(
-    (newType) => {
-      if (!selectedNode) return;
-      const newTree = (0, import_core5.changeType)(state.tree, selectedNode.id, newType);
-      actions.setTree(newTree);
-    },
-    [state.tree, selectedNode, actions]
-  );
-  const handleDuplicate = (0, import_react11.useCallback)(() => {
-    if (!selectedNode) return;
-    const newTree = (0, import_core5.duplicateNode)(state.tree, selectedNode.id);
-    actions.setTree(newTree);
-  }, [state.tree, selectedNode, actions]);
-  const handleCopyPath = (0, import_react11.useCallback)(() => {
-    if (!selectedNode) return;
-    navigator.clipboard.writeText(selectedNode.path).catch(() => {
-    });
-  }, [selectedNode]);
-  const handleCopyValue = (0, import_react11.useCallback)(() => {
-    if (!selectedNode) return;
-    const value = (0, import_core5.toJson)(selectedNode);
-    const text = typeof value === "string" ? value : JSON.stringify(value, null, 2);
-    navigator.clipboard.writeText(text).catch(() => {
-    });
-  }, [selectedNode]);
-  if (!selectedNode) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "div",
-      {
-        className,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "var(--vj-bg, #1e1e1e)",
-          color: "var(--vj-text-dimmer, #555555)",
-          fontFamily: "var(--vj-font, monospace)",
-          fontSize: 13,
-          height: "100%"
-        },
-        children: "Select a node to edit"
-      }
-    );
-  }
-  const isContainer = selectedNode.type === "object" || selectedNode.type === "array";
-  const schema = state.schema ?? void 0;
-  const schemaTitle = schema?.title;
-  function getChildSchema(childKey) {
-    if (!schema || !selectedNode) return void 0;
-    const childPath = selectedNode.path === "/" ? `/${childKey}` : `${selectedNode.path}/${childKey}`;
-    const raw = (0, import_core5.getPropertySchema)(schema, childPath);
-    return raw ? (0, import_core5.resolveRef)(raw, schema) : void 0;
-  }
-  function handleAdd() {
-    if (!selectedNode) return;
-    const key = selectedNode.type === "array" ? String(selectedNode.children.length) : `key${selectedNode.children.length}`;
-    const newTree = (0, import_core5.addProperty)(state.tree, selectedNode.id, key, "");
-    actions.setTree(newTree);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    "div",
-    {
-      className,
-      style: {
-        backgroundColor: "var(--vj-bg, #1e1e1e)",
-        color: "var(--vj-text, #cccccc)",
-        overflow: "auto",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              padding: "6px 12px",
-              borderBottom: "1px solid var(--vj-border, #333333)",
-              fontSize: 12,
-              color: "var(--vj-text-muted, #999999)",
-              fontFamily: "var(--vj-font, monospace)",
-              flexShrink: 0,
-              backgroundColor: "var(--vj-bg-panel, #252526)"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 2,
-                    flex: 1,
-                    minWidth: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Breadcrumbs, {}),
-                    schemaTitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      "span",
-                      {
-                        style: { fontSize: 10, color: "var(--vj-text-dim, #666666)" },
-                        children: schemaTitle
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 4,
-                    flexShrink: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      "select",
-                      {
-                        value: selectedNode.type,
-                        onChange: (e) => handleChangeType(e.target.value),
-                        style: {
-                          background: "var(--vj-input-bg, #3c3c3c)",
-                          border: "1px solid var(--vj-input-border, #555555)",
-                          borderRadius: 3,
-                          color: "var(--vj-text, #cccccc)",
-                          fontSize: "var(--vj-input-font-size, 13px)",
-                          fontFamily: "var(--vj-font, monospace)",
-                          padding: "1px 4px",
-                          cursor: "pointer"
-                        },
-                        title: "Change type",
-                        children: ALL_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: t, children: t }, t))
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      "button",
-                      {
-                        onClick: handleCopyPath,
-                        style: actionButtonStyle,
-                        title: "Copy path",
-                        children: "path"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      "button",
-                      {
-                        onClick: handleCopyValue,
-                        style: actionButtonStyle,
-                        title: "Copy value",
-                        children: "value"
-                      }
-                    ),
-                    selectedNode.parentId && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      "button",
-                      {
-                        onClick: handleDuplicate,
-                        style: actionButtonStyle,
-                        title: "Duplicate",
-                        children: "dup"
-                      }
-                    ),
-                    isContainer && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      "button",
-                      {
-                        onClick: handleAdd,
-                        style: {
-                          ...actionButtonStyle,
-                          border: "1px solid var(--vj-input-border, #555555)"
-                        },
-                        children: "+ Add"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: isContainer ? selectedNode.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          PropertyRow,
-          {
-            node: child,
-            schemaProperty: getChildSchema(child.key)
-          },
-          child.id
-        )) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PropertyRow, { node: selectedNode }) })
-      ]
-    }
-  );
-}
-var actionButtonStyle = {
-  background: "none",
-  border: "none",
-  borderRadius: 3,
-  color: "var(--vj-text-muted, #888888)",
-  cursor: "pointer",
-  padding: "1px 6px",
-  fontSize: 11,
-  fontFamily: "var(--vj-font, monospace)"
-};
-
-// src/diff-view.tsx
-var import_react12 = require("react");
-var import_core6 = require("@visual-json/core");
-var import_jsx_runtime10 = 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_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       style: {
@@ -3181,7 +3145,7 @@ function DiffRow({ entry }) {
         gap: 8
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             style: {
@@ -3194,7 +3158,7 @@ function DiffRow({ entry }) {
             children: colors.marker
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             style: {
@@ -3205,14 +3169,14 @@ function DiffRow({ entry }) {
             children: entry.path
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { flex: 1, display: "flex", gap: 8, overflow: "hidden" }, children: [
-          entry.type === "changed" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "var(--vj-text-dim, #666666)" }, children: "\u2192" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { flex: 1, display: "flex", gap: 8, overflow: "hidden" }, children: [
+          entry.type === "changed" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--vj-text-dim, #666666)" }, children: "\u2192" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) })
           ] }),
-          entry.type === "added" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) }),
-          entry.type === "removed" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) })
+          entry.type === "added" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) }),
+          entry.type === "removed" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) })
         ] })
       ]
     }
@@ -3223,14 +3187,14 @@ function DiffView({
   currentJson,
   className
 }) {
-  const entries = (0, import_react12.useMemo)(
-    () => (0, import_core6.computeDiff)(originalJson, currentJson),
+  const entries = (0, import_react11.useMemo)(
+    () => (0, import_core8.computeDiff)(originalJson, currentJson),
     [originalJson, currentJson]
   );
   const added = entries.filter((e) => e.type === "added").length;
   const removed = entries.filter((e) => e.type === "removed").length;
   const changed = entries.filter((e) => e.type === "changed").length;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className,
@@ -3243,7 +3207,7 @@ function DiffView({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             style: {
@@ -3258,18 +3222,18 @@ function DiffView({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "var(--vj-text-muted, #999999)" }, children: entries.length === 0 ? "No changes" : `${entries.length} changes` }),
-              added > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { color: "#4ec94e" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--vj-text-muted, #999999)" }, children: entries.length === 0 ? "No changes" : `${entries.length} changes` }),
+              added > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#4ec94e" }, children: [
                 "+",
                 added,
                 " added"
               ] }),
-              removed > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { color: "#f48771" }, children: [
+              removed > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#f48771" }, children: [
                 "-",
                 removed,
                 " removed"
               ] }),
-              changed > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { color: "#dcdcaa" }, children: [
+              changed > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#dcdcaa" }, children: [
                 "~",
                 changed,
                 " modified"
@@ -3277,7 +3241,7 @@ function DiffView({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             style: {
@@ -3291,7 +3255,7 @@ function DiffView({
             },
             children: "No differences detected"
           }
-        ) : entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DiffRow, { entry }, i)) })
+        ) : entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DiffRow, { entry }, i)) })
       ]
     }
   );
@@ -3303,7 +3267,6 @@ function DiffView({
   DiffView,
   FormView,
   JsonEditor,
-  PropertyEditor,
   SearchBar,
   StudioContext,
   TreeView,