@visual-json/react 0.1.1 → 0.2.0

package/dist/index.mjs

@@ -33,6 +33,91 @@ function useStudio() {
   return ctx;
 }
 
+// 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/selection-utils.ts
+import { removeNode } from "@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 = 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
 import { jsx } from "react/jsx-runtime";
 function collectAllIds(node) {
@@ -49,10 +134,42 @@ function VisualJson({
   children
 }) {
   const [tree, setTreeState] = useState(() => fromJson(value));
-  const [selectedNodeId, setSelectedNodeId] = useState(null);
+  const [focusedNodeId, setFocusedNodeId] = useState(null);
+  const [selectedNodeIds, setSelectedNodeIdsState] = useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const selectedNodeIdsRef = useRef(/* @__PURE__ */ new Set());
+  const setSelectedNodeIds = useCallback((ids) => {
+    selectedNodeIdsRef.current = ids;
+    setSelectedNodeIdsState(ids);
+  }, []);
+  const anchorNodeIdRef = useRef(null);
+  const [anchorNodeId, setAnchorNodeIdState] = useState(null);
+  const [drillDownNodeId, setDrillDownNodeId] = useState(null);
   const [expandedNodeIds, setExpandedNodeIds] = useState(
     () => /* @__PURE__ */ new Set([tree.root.id])
   );
+  const setAnchorNodeId = useCallback((id) => {
+    anchorNodeIdRef.current = id;
+    setAnchorNodeIdState(id);
+  }, []);
+  const focusSelectAndDrillDown = useCallback(
+    (nodeId) => {
+      setFocusedNodeId(nodeId);
+      setSelectedNodeIds(nodeId ? /* @__PURE__ */ new Set([nodeId]) : /* @__PURE__ */ new Set());
+      setAnchorNodeId(nodeId);
+      setDrillDownNodeId(nodeId);
+    },
+    [setSelectedNodeIds, setAnchorNodeId]
+  );
+  const visibleNodes = useMemo(
+    () => getVisibleNodes(tree.root, (id) => expandedNodeIds.has(id)),
+    [tree.root, expandedNodeIds]
+  );
+  const visibleNodesOverrideRef = useRef(null);
+  const setVisibleNodesOverride = useCallback((nodes) => {
+    visibleNodesOverrideRef.current = nodes;
+  }, []);
   const historyRef = useRef(new History());
   const isInternalChange = useRef(false);
   const hasMounted = useRef(false);
@@ -81,7 +198,7 @@ function VisualJson({
     const newTree = fromJson(value);
     setTreeState(newTree);
     setExpandedNodeIds(/* @__PURE__ */ new Set([newTree.root.id]));
-    setSelectedNodeId(null);
+    focusSelectAndDrillDown(null);
     historyRef.current = new History();
     historyRef.current.push(newTree);
     setCanUndo(false);
@@ -139,8 +256,66 @@ function VisualJson({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [undo, redo]);
-  const selectNode = useCallback((nodeId) => {
-    setSelectedNodeId(nodeId);
+  const selectNode = useCallback(
+    (nodeId) => {
+      setFocusedNodeId(nodeId);
+      setSelectedNodeIds(nodeId ? /* @__PURE__ */ new Set([nodeId]) : /* @__PURE__ */ new Set());
+      setAnchorNodeId(nodeId);
+    },
+    [setSelectedNodeIds, setAnchorNodeId]
+  );
+  const selectAndDrillDown = focusSelectAndDrillDown;
+  const toggleNodeSelection = 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 = 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 = useCallback(
+    (focusedId, newSelectedIds, newAnchorId) => {
+      setFocusedNodeId(focusedId);
+      setSelectedNodeIds(newSelectedIds);
+      setAnchorNodeId(newAnchorId);
+    },
+    [setSelectedNodeIds, setAnchorNodeId]
+  );
+  const drillDown = useCallback((nodeId) => {
+    setDrillDownNodeId(nodeId);
   }, []);
   const toggleExpand = useCallback((nodeId) => {
     setExpandedNodeIds((prev) => {
@@ -186,6 +361,7 @@ function VisualJson({
       const matchIds = new Set(matches.map((m) => m.nodeId));
       setSearchMatchNodeIds(matchIds);
       if (matches.length > 0) {
+        const firstId = matches[0].nodeId;
         const ancestors = getAncestorIds(
           tree,
           matches.map((m) => m.nodeId)
@@ -195,7 +371,7 @@ function VisualJson({
           for (const id of ancestors) next.add(id);
           return next;
         });
-        setSelectedNodeId(matches[0].nodeId);
+        focusSelectAndDrillDown(firstId);
       }
     },
     [tree]
@@ -204,14 +380,14 @@ 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 = 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]);
   useEffect(() => {
     if (!searchQuery.trim()) return;
     const matches = searchNodes(tree, searchQuery);
@@ -224,7 +400,10 @@ function VisualJson({
   const state = useMemo(
     () => ({
       tree,
-      selectedNodeId,
+      focusedNodeId,
+      selectedNodeIds,
+      anchorNodeId,
+      drillDownNodeId,
       expandedNodeIds,
       schema: schema ?? null,
       searchQuery,
@@ -234,7 +413,10 @@ function VisualJson({
     }),
     [
       tree,
-      selectedNodeId,
+      focusedNodeId,
+      selectedNodeIds,
+      anchorNodeId,
+      drillDownNodeId,
       expandedNodeIds,
       schema,
       searchQuery,
@@ -247,6 +429,12 @@ function VisualJson({
     () => ({
       setTree,
       selectNode,
+      selectAndDrillDown,
+      toggleNodeSelection,
+      selectNodeRange,
+      setSelection,
+      setVisibleNodesOverride,
+      drillDown,
       toggleExpand,
       expandNode,
       collapseNode,
@@ -263,6 +451,12 @@ function VisualJson({
     [
       setTree,
       selectNode,
+      selectAndDrillDown,
+      toggleNodeSelection,
+      selectNodeRange,
+      setSelection,
+      setVisibleNodesOverride,
+      drillDown,
       toggleExpand,
       expandNode,
       collapseNode,
@@ -282,11 +476,9 @@ function VisualJson({
 }
 
 // src/tree-view.tsx
-import { useState as useState4, useMemo as useMemo2, useRef as useRef4, useCallback as useCallback3, useEffect as useEffect3 } from "react";
+import { useState as useState4, useMemo as useMemo3, useRef as useRef4, useCallback as useCallback3, useEffect as useEffect3 } from "react";
 import {
-  removeNode,
-  getPropertySchema,
-  validateNode,
+  removeNode as removeNode3,
   duplicateNode,
   changeType,
   toJson as toJson2
@@ -404,96 +596,199 @@ function getDisplayKey(node, state) {
   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
+import { useState as useState3, useCallback as useCallback2, useRef as useRef3, useMemo as useMemo2 } from "react";
+import {
+  removeNode as removeNode2,
+  insertNode,
+  reorderChildrenMulti,
+  isDescendant
+} from "@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
-import { useState as useState3, useCallback as useCallback2, useRef as useRef3 } from "react";
-import { reorderChildren, moveNode } from "@visual-json/core";
+var EMPTY_SET = Object.freeze(/* @__PURE__ */ new Set());
 var INITIAL_DRAG_STATE = {
-  draggedNodeId: null,
+  draggedNodeIds: EMPTY_SET,
   dropTargetNodeId: null,
   dropPosition: null
 };
-function useDragDrop() {
+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 useDragDrop(visibleNodes, selectedNodeIds) {
   const { state, actions } = useStudio();
   const [dragState, setDragState] = useState3(INITIAL_DRAG_STATE);
   const dragStateRef = useRef3(dragState);
   dragStateRef.current = dragState;
-  const handleDragStart = useCallback2((nodeId) => {
-    setDragState({
-      draggedNodeId: nodeId,
-      dropTargetNodeId: null,
-      dropPosition: null
-    });
-  }, []);
-  const handleDragOver = useCallback2(
+  const visibleNodeIndexMap = useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    visibleNodes.forEach((n, i) => map.set(n.id, i));
+    return map;
+  }, [visibleNodes]);
+  const handleDragStart = useCallback2(
+    (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 = useCallback2(
     (nodeId, position) => {
+      const draggedIds = dragStateRef.current.draggedNodeIds;
+      for (const draggedId of draggedIds) {
+        if (nodeId === draggedId || isDescendant(state.tree, nodeId, draggedId)) {
+          return;
+        }
+      }
       setDragState((prev) => ({
         ...prev,
         dropTargetNodeId: nodeId,
         dropPosition: position
       }));
     },
-    []
+    [state.tree]
+  );
+  const handleDragOver = useCallback2(
+    (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 = useCallback2(() => {
     setDragState(INITIAL_DRAG_STATE);
   }, []);
   const handleDrop = useCallback2(() => {
-    const { draggedNodeId, dropTargetNodeId, dropPosition } = dragStateRef.current;
-    if (!draggedNodeId || !dropTargetNodeId || !dropPosition) return;
-    const draggedNode = state.tree.nodesById.get(draggedNodeId);
+    const { draggedNodeIds, dropTargetNodeId, dropPosition } = dragStateRef.current;
+    if (draggedNodeIds.size === 0 || !dropTargetNodeId || !dropPosition) return;
     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 = reorderChildren(
-            state.tree,
-            parent.id,
-            fromIndex,
-            toIndex
-          );
-          actions.setTree(newTree);
+    if (!targetNode || !targetNode.parentId) return;
+    for (const id of draggedNodeIds) {
+      if (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 = 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 = removeNode2(newTree, id);
         }
       }
-    } 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 = moveNode(
-          state.tree,
-          draggedNodeId,
-          newParent.id,
-          toIndex
+      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 = insertNode(
+          newTree,
+          updatedParent.id,
+          draggedNodes[i],
+          insertIdx + i
         );
-        actions.setTree(newTree);
       }
+      actions.setTree(newTree);
     }
     setDragState(INITIAL_DRAG_STATE);
   }, [state.tree, actions]);
@@ -515,6 +810,7 @@ function TreeNodeRow({
   showValues,
   showCounts,
   isFocused,
+  onSelectRange,
   onDragStart,
   onDragOver,
   onDragEnd,
@@ -522,19 +818,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] = useState4(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 ? getPropertySchema(schema, node.path) : void 0;
-  const validation = nodeSchema ? 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}}`;
@@ -550,12 +842,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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
@@ -564,13 +856,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)) {
+            setMultiDragImage(e, state.selectedNodeIds.size);
+          }
           onDragStart(node.id);
         },
         onDragOver: handleDragOverEvent,
@@ -584,15 +887,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: [
@@ -675,6 +979,7 @@ function TreeNodeRow({
         showValues,
         showCounts,
         isFocused,
+        onSelectRange,
         onDragStart,
         onDragOver,
         onDragEnd,
@@ -692,25 +997,34 @@ function TreeView({
 }) {
   const { state, actions } = useStudio();
   const containerRef = useRef4(null);
+  const visibleNodes = useMemo3(
+    () => getVisibleNodes(state.tree.root, (id) => state.expandedNodeIds.has(id)),
+    [state.tree.root, state.expandedNodeIds]
+  );
   const {
     dragState,
     handleDragStart,
     handleDragOver,
     handleDragEnd,
     handleDrop
-  } = useDragDrop();
-  const [contextMenu, setContextMenu] = useState4(null);
-  const visibleNodes = useMemo2(
-    () => getVisibleNodes(state.tree.root, (id) => state.expandedNodeIds.has(id)),
-    [state.tree.root, state.expandedNodeIds]
+  } = useDragDrop(visibleNodes, state.selectedNodeIds);
+  const handleSelectRange = useCallback3(
+    (nodeId) => {
+      actions.setVisibleNodesOverride(visibleNodes);
+      actions.selectNodeRange(nodeId);
+    },
+    [visibleNodes, actions]
   );
+  const [contextMenu, setContextMenu] = useState4(null);
   const handleContextMenu = useCallback3(
     (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 = useCallback3(
     (node) => {
@@ -789,7 +1103,7 @@ function TreeView({
         items.push({
           label: "Delete",
           action: () => {
-            const newTree = removeNode(state.tree, node.id);
+            const newTree = removeNode3(state.tree, node.id);
             actions.setTree(newTree);
           }
         });
@@ -801,19 +1115,31 @@ function TreeView({
   const handleKeyDown = useCallback3(
     (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": {
@@ -840,17 +1166,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 = 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;
         }
@@ -858,23 +1214,25 @@ function TreeView({
     },
     [
       visibleNodes,
-      state.selectedNodeId,
+      state.focusedNodeId,
+      state.selectedNodeIds,
       state.expandedNodeIds,
       state.tree,
-      actions
+      actions,
+      handleSelectRange
     ]
   );
   const [isFocused, setIsFocused] = useState4(false);
   useEffect3(() => {
-    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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx3(
       "div",
@@ -904,6 +1262,7 @@ function TreeView({
             showValues,
             showCounts,
             isFocused,
+            onSelectRange: handleSelectRange,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
             onDragEnd: handleDragEnd,
@@ -926,25 +1285,25 @@ function TreeView({
 }
 
 // src/form-view.tsx
-import { useState as useState7, useCallback as useCallback6, useRef as useRef7, useEffect as useEffect6, useMemo as useMemo5 } from "react";
+import { useState as useState7, useCallback as useCallback6, useRef as useRef7, useEffect as useEffect6, useMemo as useMemo6 } from "react";
 import {
   setValue,
   setKey,
   addProperty,
-  removeNode as removeNode2,
-  getPropertySchema as getPropertySchema2,
+  removeNode as removeNode4,
+  getPropertySchema,
   resolveRef
 } from "@visual-json/core";
 
 // src/breadcrumbs.tsx
-import { useState as useState5, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback4, useMemo as useMemo3 } from "react";
+import { useState as useState5, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback4, useMemo as useMemo4 } from "react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 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] = useState5(currentPath);
   const [open, setOpen] = useState5(false);
   const [highlightIndex, setHighlightIndex] = useState5(0);
@@ -954,7 +1313,7 @@ function Breadcrumbs({ className }) {
   useEffect4(() => {
     setInputValue(currentPath);
   }, [currentPath]);
-  const suggestions = useMemo3(() => {
+  const suggestions = useMemo4(() => {
     if (!open) return [];
     const query = inputValue.toLowerCase();
     const matches = [];
@@ -974,7 +1333,7 @@ function Breadcrumbs({ className }) {
     (path) => {
       for (const [id, node] of state.tree.nodesById) {
         if (node.path === path) {
-          actions.selectNode(id);
+          actions.selectAndDrillDown(id);
           break;
         }
       }
@@ -1062,7 +1421,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)",
@@ -1124,7 +1483,7 @@ import {
   useRef as useRef6,
   useEffect as useEffect5,
   useCallback as useCallback5,
-  useMemo as useMemo4
+  useMemo as useMemo5
 } from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var DROPDOWN_MAX_HEIGHT2 = 200;
@@ -1143,7 +1502,7 @@ function EnumInput({
   useEffect5(() => {
     setInputValue(value);
   }, [value]);
-  const suggestions = useMemo4(
+  const suggestions = useMemo5(
     () => enumValues.map((v) => String(v)),
     [enumValues]
   );
@@ -1295,7 +1654,7 @@ function EnumInput({
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function getResolvedSchema(schema, rootSchema, path) {
   if (!schema) return void 0;
-  const raw = getPropertySchema2(schema, path, rootSchema);
+  const raw = getPropertySchema(schema, path, rootSchema);
   if (!raw) return void 0;
   return resolveRef(raw, rootSchema ?? schema);
 }
@@ -1318,7 +1677,6 @@ function FormField({
   depth,
   showDescriptions,
   showCounts,
-  formSelectedNodeId,
   editingNodeId,
   collapsedIds,
   maxKeyLength,
@@ -1336,26 +1694,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] = useState7(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 = useRef7(null);
   const keyRef = useRef7(null);
@@ -1398,7 +1756,7 @@ function FormField({
     [state.tree, node.id, actions]
   );
   const handleRemove = useCallback6(() => {
-    const newTree = removeNode2(state.tree, node.id);
+    const newTree = removeNode4(state.tree, node.id);
     actions.setTree(newTree);
   }, [state.tree, node.id, actions]);
   const handleAddChild = useCallback6(() => {
@@ -1407,7 +1765,6 @@ function FormField({
     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 +1779,9 @@ function FormField({
           draggable: !isRoot,
           onDragStart: (e) => {
             e.dataTransfer.effectAllowed = "move";
+            if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
+              setMultiDragImage(e, state.selectedNodeIds.size);
+            }
             onDragStart(node.id);
           },
           onDragOver: handleDragOverEvent,
@@ -1434,20 +1794,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 +1864,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 +1965,6 @@ function FormField({
           depth: depth + 1,
           showDescriptions,
           showCounts,
-          formSelectedNodeId,
           editingNodeId,
           collapsedIds,
           maxKeyLength,
@@ -1632,6 +1992,9 @@ function FormField({
       draggable: !isRoot,
       onDragStart: (e) => {
         e.dataTransfer.effectAllowed = "move";
+        if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
+          setMultiDragImage(e, state.selectedNodeIds.size);
+        }
         onDragStart(node.id);
       },
       onDragOver: handleDragOverEvent,
@@ -1644,20 +2007,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 +2058,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 +2102,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 +2180,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 +2213,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] = useState7(
-    null
-  );
+  const drillDownNode = state.drillDownNodeId ? state.tree.nodesById.get(state.drillDownNodeId) : null;
+  const displayNode = drillDownNode ?? state.tree.root;
   const [editingNodeId, setEditingNodeId] = useState7(null);
   const preEditTreeRef = useRef7(null);
   const [collapsedIds, setCollapsedIds] = useState7(
@@ -1861,23 +2222,26 @@ function FormView({
   );
   const containerRef = useRef7(null);
   const [isFocused, setIsFocused] = useState7(false);
-  const {
-    dragState,
-    handleDragStart,
-    handleDragOver,
-    handleDragEnd,
-    handleDrop
-  } = useDragDrop();
   useEffect6(() => {
-    setFormSelectedNodeId(null);
     setEditingNodeId(null);
     setCollapsedIds(/* @__PURE__ */ new Set());
   }, [displayNode.id]);
-  const visibleNodes = useMemo5(
+  const visibleNodes = useMemo6(
     () => getVisibleNodes(displayNode, (id) => !collapsedIds.has(id)),
     [displayNode, collapsedIds]
   );
-  const { maxKeyLength, maxDepth } = useMemo5(() => {
+  const {
+    dragState,
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd,
+    handleDrop
+  } = useDragDrop(visibleNodes, state.selectedNodeIds);
+  useEffect6(() => {
+    actions.setVisibleNodesOverride(visibleNodes);
+    return () => actions.setVisibleNodesOverride(null);
+  }, [visibleNodes, actions]);
+  const { maxKeyLength, maxDepth } = useMemo6(() => {
     let maxKey = 1;
     let maxD = 0;
     const baseSegments = displayNode.path === "/" ? 0 : displayNode.path.split("/").filter(Boolean).length;
@@ -1890,10 +2254,20 @@ function FormView({
     }
     return { maxKeyLength: maxKey, maxDepth: maxD };
   }, [visibleNodes, displayNode.path, state.tree]);
-  const handleSelect = useCallback6((nodeId) => {
-    setFormSelectedNodeId(nodeId);
-    setEditingNodeId(null);
-  }, []);
+  const handleSelect = useCallback6(
+    (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 = useCallback6((nodeId) => {
     setCollapsedIds((prev) => {
       const next = new Set(prev);
@@ -1941,15 +2315,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 +2340,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 +2361,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 +2383,7 @@ function FormView({
               (n) => n.id === current.parentId
             );
             if (parentInVisible) {
-              setFormSelectedNodeId(parentInVisible.id);
+              actions.selectNode(parentInVisible.id);
               scrollToNode(parentInVisible.id);
             }
           }
@@ -2004,30 +2391,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 = removeNode2(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 +2446,8 @@ function FormView({
     },
     [
       visibleNodes,
-      formSelectedNodeId,
+      state.focusedNodeId,
+      state.selectedNodeIds,
       editingNodeId,
       collapsedIds,
       scrollToNode,
@@ -2060,9 +2472,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__ */ jsx6(Breadcrumbs, {})
@@ -2095,7 +2509,6 @@ function FormView({
                 depth: 0,
                 showDescriptions,
                 showCounts,
-                formSelectedNodeId,
                 editingNodeId,
                 collapsedIds,
                 maxKeyLength,
@@ -2165,7 +2578,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 +2785,6 @@ function SearchBar({ className }) {
 
 // src/json-editor.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "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,440 +3111,10 @@ function EditorLayout({
   ] });
 }
 
-// src/property-editor.tsx
-import { useState as useState9, useCallback as useCallback9, useRef as useRef10 } from "react";
-import {
-  setValue as setValue2,
-  setKey as setKey2,
-  addProperty as addProperty2,
-  removeNode as removeNode3,
-  changeType as changeType2,
-  duplicateNode as duplicateNode2,
-  toJson as toJson3,
-  getPropertySchema as getPropertySchema3,
-  resolveRef as resolveRef2
-} from "@visual-json/core";
-import { jsx as jsx9, jsxs as jsxs7 } from "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] = useState9(false);
-  const enumRef = useRef10(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 = setValue2(state.tree, node.id, parsed);
-    actions.setTree(newTree);
-  }
-  function handleKeyChange(newKey) {
-    const newTree = setKey2(state.tree, node.id, newKey);
-    actions.setTree(newTree);
-  }
-  function handleRemove() {
-    const newTree = removeNode3(state.tree, node.id);
-    actions.setTree(newTree);
-  }
-  function handleAddChild() {
-    const key = node.type === "array" ? String(node.children.length) : `key${node.children.length}`;
-    const newTree = addProperty2(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__ */ jsxs7(
-    "div",
-    {
-      onMouseEnter: () => setHoveredRow(true),
-      onMouseLeave: () => setHoveredRow(false),
-      children: [
-        /* @__PURE__ */ jsxs7(
-          "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__ */ jsx9(
-                "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__ */ jsx9(
-                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__ */ jsx9(
-                "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__ */ jsx9(
-                "span",
-                {
-                  style: {
-                    color: "var(--vj-text-dim, #666666)",
-                    fontFamily: "var(--vj-font, monospace)",
-                    fontSize: 13,
-                    flex: 1,
-                    textAlign: "right"
-                  },
-                  children: displayValue()
-                }
-              ),
-              /* @__PURE__ */ jsxs7(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: 2,
-                    opacity: hoveredRow ? 1 : 0,
-                    transition: "opacity 0.1s",
-                    flexShrink: 0
-                  },
-                  children: [
-                    isContainer && /* @__PURE__ */ jsx9(
-                      "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__ */ jsx9(
-                      "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__ */ jsx9(
-          "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 = useCallback9(
-    (newType) => {
-      if (!selectedNode) return;
-      const newTree = changeType2(state.tree, selectedNode.id, newType);
-      actions.setTree(newTree);
-    },
-    [state.tree, selectedNode, actions]
-  );
-  const handleDuplicate = useCallback9(() => {
-    if (!selectedNode) return;
-    const newTree = duplicateNode2(state.tree, selectedNode.id);
-    actions.setTree(newTree);
-  }, [state.tree, selectedNode, actions]);
-  const handleCopyPath = useCallback9(() => {
-    if (!selectedNode) return;
-    navigator.clipboard.writeText(selectedNode.path).catch(() => {
-    });
-  }, [selectedNode]);
-  const handleCopyValue = useCallback9(() => {
-    if (!selectedNode) return;
-    const value = toJson3(selectedNode);
-    const text = typeof value === "string" ? value : JSON.stringify(value, null, 2);
-    navigator.clipboard.writeText(text).catch(() => {
-    });
-  }, [selectedNode]);
-  if (!selectedNode) {
-    return /* @__PURE__ */ jsx9(
-      "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 = getPropertySchema3(schema, childPath);
-    return raw ? resolveRef2(raw, schema) : void 0;
-  }
-  function handleAdd() {
-    if (!selectedNode) return;
-    const key = selectedNode.type === "array" ? String(selectedNode.children.length) : `key${selectedNode.children.length}`;
-    const newTree = addProperty2(state.tree, selectedNode.id, key, "");
-    actions.setTree(newTree);
-  }
-  return /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      className,
-      style: {
-        backgroundColor: "var(--vj-bg, #1e1e1e)",
-        color: "var(--vj-text, #cccccc)",
-        overflow: "auto",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column"
-      },
-      children: [
-        /* @__PURE__ */ jsxs7(
-          "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__ */ jsxs7(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 2,
-                    flex: 1,
-                    minWidth: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx9(Breadcrumbs, {}),
-                    schemaTitle && /* @__PURE__ */ jsx9(
-                      "span",
-                      {
-                        style: { fontSize: 10, color: "var(--vj-text-dim, #666666)" },
-                        children: schemaTitle
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs7(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 4,
-                    flexShrink: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx9(
-                      "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__ */ jsx9("option", { value: t, children: t }, t))
-                      }
-                    ),
-                    /* @__PURE__ */ jsx9(
-                      "button",
-                      {
-                        onClick: handleCopyPath,
-                        style: actionButtonStyle,
-                        title: "Copy path",
-                        children: "path"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx9(
-                      "button",
-                      {
-                        onClick: handleCopyValue,
-                        style: actionButtonStyle,
-                        title: "Copy value",
-                        children: "value"
-                      }
-                    ),
-                    selectedNode.parentId && /* @__PURE__ */ jsx9(
-                      "button",
-                      {
-                        onClick: handleDuplicate,
-                        style: actionButtonStyle,
-                        title: "Duplicate",
-                        children: "dup"
-                      }
-                    ),
-                    isContainer && /* @__PURE__ */ jsx9(
-                      "button",
-                      {
-                        onClick: handleAdd,
-                        style: {
-                          ...actionButtonStyle,
-                          border: "1px solid var(--vj-input-border, #555555)"
-                        },
-                        children: "+ Add"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx9("div", { style: { flex: 1, overflow: "auto" }, children: isContainer ? selectedNode.children.map((child) => /* @__PURE__ */ jsx9(
-          PropertyRow,
-          {
-            node: child,
-            schemaProperty: getChildSchema(child.key)
-          },
-          child.id
-        )) : /* @__PURE__ */ jsx9(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
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 import { computeDiff } from "@visual-json/core";
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var DIFF_COLORS = {
   added: { bg: "#1e3a1e", marker: "+", label: "#4ec94e" },
   removed: { bg: "#3a1e1e", marker: "-", label: "#f48771" },
@@ -3177,7 +3135,7 @@ function formatValue(value) {
 }
 function DiffRow({ entry }) {
   const colors = DIFF_COLORS[entry.type];
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       style: {
@@ -3191,7 +3149,7 @@ function DiffRow({ entry }) {
         gap: 8
       },
       children: [
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(
           "span",
           {
             style: {
@@ -3204,7 +3162,7 @@ function DiffRow({ entry }) {
             children: colors.marker
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(
           "span",
           {
             style: {
@@ -3215,14 +3173,14 @@ function DiffRow({ entry }) {
             children: entry.path
           }
         ),
-        /* @__PURE__ */ jsxs8("span", { style: { flex: 1, display: "flex", gap: 8, overflow: "hidden" }, children: [
-          entry.type === "changed" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-            /* @__PURE__ */ jsx10("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) }),
-            /* @__PURE__ */ jsx10("span", { style: { color: "var(--vj-text-dim, #666666)" }, children: "\u2192" }),
-            /* @__PURE__ */ jsx10("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) })
+        /* @__PURE__ */ jsxs7("span", { style: { flex: 1, display: "flex", gap: 8, overflow: "hidden" }, children: [
+          entry.type === "changed" && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+            /* @__PURE__ */ jsx9("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) }),
+            /* @__PURE__ */ jsx9("span", { style: { color: "var(--vj-text-dim, #666666)" }, children: "\u2192" }),
+            /* @__PURE__ */ jsx9("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) })
           ] }),
-          entry.type === "added" && /* @__PURE__ */ jsx10("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) }),
-          entry.type === "removed" && /* @__PURE__ */ jsx10("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) })
+          entry.type === "added" && /* @__PURE__ */ jsx9("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) }),
+          entry.type === "removed" && /* @__PURE__ */ jsx9("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) })
         ] })
       ]
     }
@@ -3233,14 +3191,14 @@ function DiffView({
   currentJson,
   className
 }) {
-  const entries = useMemo6(
+  const entries = useMemo7(
     () => 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__ */ jsxs8(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className,
@@ -3253,7 +3211,7 @@ function DiffView({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             style: {
@@ -3268,18 +3226,18 @@ function DiffView({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ jsx10("span", { style: { color: "var(--vj-text-muted, #999999)" }, children: entries.length === 0 ? "No changes" : `${entries.length} changes` }),
-              added > 0 && /* @__PURE__ */ jsxs8("span", { style: { color: "#4ec94e" }, children: [
+              /* @__PURE__ */ jsx9("span", { style: { color: "var(--vj-text-muted, #999999)" }, children: entries.length === 0 ? "No changes" : `${entries.length} changes` }),
+              added > 0 && /* @__PURE__ */ jsxs7("span", { style: { color: "#4ec94e" }, children: [
                 "+",
                 added,
                 " added"
               ] }),
-              removed > 0 && /* @__PURE__ */ jsxs8("span", { style: { color: "#f48771" }, children: [
+              removed > 0 && /* @__PURE__ */ jsxs7("span", { style: { color: "#f48771" }, children: [
                 "-",
                 removed,
                 " removed"
               ] }),
-              changed > 0 && /* @__PURE__ */ jsxs8("span", { style: { color: "#dcdcaa" }, children: [
+              changed > 0 && /* @__PURE__ */ jsxs7("span", { style: { color: "#dcdcaa" }, children: [
                 "~",
                 changed,
                 " modified"
@@ -3287,7 +3245,7 @@ function DiffView({
             ]
           }
         ),
-        /* @__PURE__ */ jsx10("div", { style: { flex: 1, overflow: "auto" }, children: entries.length === 0 ? /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9("div", { style: { flex: 1, overflow: "auto" }, children: entries.length === 0 ? /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -3301,7 +3259,7 @@ function DiffView({
             },
             children: "No differences detected"
           }
-        ) : entries.map((entry, i) => /* @__PURE__ */ jsx10(DiffRow, { entry }, i)) })
+        ) : entries.map((entry, i) => /* @__PURE__ */ jsx9(DiffRow, { entry }, i)) })
       ]
     }
   );
@@ -3312,7 +3270,6 @@ export {
   DiffView,
   FormView,
   JsonEditor,
-  PropertyEditor,
   SearchBar,
   StudioContext,
   TreeView,