@visual-json/react 0.1.0 → 0.2.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,
@@ -36,11 +35,11 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/json-editor.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/visual-json.tsx
 var import_react2 = require("react");
-var import_core = require("@visual-json/core");
+var import_core2 = require("@visual-json/core");
 
 // src/context.ts
 var import_react = require("react");
@@ -53,6 +52,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
+var import_core = 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_core.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 collectAllIds(node) {
@@ -68,12 +152,44 @@ function VisualJson({
   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_core2.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_core2.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 +214,11 @@ function VisualJson({
       isInternalChange.current = false;
       return;
     }
-    const newTree = (0, import_core.fromJson)(value);
+    const newTree = (0, import_core2.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_core2.History();
     historyRef.current.push(newTree);
     setCanUndo(false);
     setCanRedo(false);
@@ -118,7 +234,7 @@ function VisualJson({
       setCanUndo(historyRef.current.canUndo);
       setCanRedo(historyRef.current.canRedo);
       isInternalChange.current = true;
-      onChange?.((0, import_core.toJson)(newTree.root));
+      onChange?.((0, import_core2.toJson)(newTree.root));
     },
     [onChange]
   );
@@ -129,7 +245,7 @@ function VisualJson({
       setCanUndo(historyRef.current.canUndo);
       setCanRedo(historyRef.current.canRedo);
       isInternalChange.current = true;
-      onChange?.((0, import_core.toJson)(prev.root));
+      onChange?.((0, import_core2.toJson)(prev.root));
     }
   }, [onChange]);
   const redo = (0, import_react2.useCallback)(() => {
@@ -139,7 +255,7 @@ function VisualJson({
       setCanUndo(historyRef.current.canUndo);
       setCanRedo(historyRef.current.canRedo);
       isInternalChange.current = true;
-      onChange?.((0, import_core.toJson)(next.root));
+      onChange?.((0, import_core2.toJson)(next.root));
     }
   }, [onChange]);
   (0, import_react2.useEffect)(() => {
@@ -159,8 +275,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 +374,14 @@ function VisualJson({
         setSearchMatchNodeIds(/* @__PURE__ */ new Set());
         return;
       }
-      const matches = (0, import_core.searchNodes)(tree, query);
+      const matches = (0, import_core2.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_core2.getAncestorIds)(
           tree,
           matches.map((m) => m.nodeId)
         );
@@ -215,7 +390,7 @@ function VisualJson({
           for (const id of ancestors) next.add(id);
           return next;
         });
-        setSelectedNodeId(matches[0].nodeId);
+        focusSelectAndDrillDown(firstId);
       }
     },
     [tree]
@@ -224,17 +399,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_core2.searchNodes)(tree, searchQuery);
     setSearchMatches(matches);
     setSearchMatchIndex(
       (prev) => Math.min(prev, Math.max(matches.length - 1, 0))
@@ -244,7 +419,10 @@ function VisualJson({
   const state = (0, import_react2.useMemo)(
     () => ({
       tree,
-      selectedNodeId,
+      focusedNodeId,
+      selectedNodeIds,
+      anchorNodeId,
+      drillDownNodeId,
       expandedNodeIds,
       schema: schema ?? null,
       searchQuery,
@@ -254,7 +432,10 @@ function VisualJson({
     }),
     [
       tree,
-      selectedNodeId,
+      focusedNodeId,
+      selectedNodeIds,
+      anchorNodeId,
+      drillDownNodeId,
       expandedNodeIds,
       schema,
       searchQuery,
@@ -267,6 +448,12 @@ function VisualJson({
     () => ({
       setTree,
       selectNode,
+      selectAndDrillDown,
+      toggleNodeSelection,
+      selectNodeRange,
+      setSelection,
+      setVisibleNodesOverride,
+      drillDown,
       toggleExpand,
       expandNode,
       collapseNode,
@@ -283,6 +470,12 @@ function VisualJson({
     [
       setTree,
       selectNode,
+      selectAndDrillDown,
+      toggleNodeSelection,
+      selectNodeRange,
+      setSelection,
+      setVisibleNodesOverride,
+      drillDown,
       toggleExpand,
       expandNode,
       collapseNode,
@@ -303,7 +496,7 @@ function VisualJson({
 
 // src/tree-view.tsx
 var import_react5 = require("react");
-var import_core3 = require("@visual-json/core");
+var import_core4 = require("@visual-json/core");
 
 // src/context-menu.tsx
 var import_react3 = require("react");
@@ -417,96 +610,194 @@ 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
 var import_react4 = require("react");
-var import_core2 = require("@visual-json/core");
+var import_core3 = require("@visual-json/core");
+
+// src/theme.ts
+var DEFAULT_CSS_VARS = {
+  "--vj-bg": "#1e1e1e",
+  "--vj-bg-panel": "#252526",
+  "--vj-bg-hover": "#2a2d2e",
+  "--vj-bg-selected": "#2a5a1e",
+  "--vj-bg-selected-muted": "#2a2d2e",
+  "--vj-bg-match": "#3a3520",
+  "--vj-bg-match-active": "#51502b",
+  "--vj-border": "#333333",
+  "--vj-border-subtle": "#2a2a2a",
+  "--vj-text": "#cccccc",
+  "--vj-text-muted": "#888888",
+  "--vj-text-dim": "#666666",
+  "--vj-text-dimmer": "#555555",
+  "--vj-string": "#ce9178",
+  "--vj-number": "#b5cea8",
+  "--vj-boolean": "#569cd6",
+  "--vj-accent": "#007acc",
+  "--vj-accent-muted": "#094771",
+  "--vj-input-bg": "#3c3c3c",
+  "--vj-input-border": "#555555",
+  "--vj-error": "#f48771",
+  "--vj-font": "monospace",
+  "--vj-input-font-size": "13px"
+};
+
+// src/use-drag-drop.ts
+var EMPTY_SET = Object.freeze(/* @__PURE__ */ new Set());
 var 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] = (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_core3.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 { 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 = (0, import_core2.reorderChildren)(
-            state.tree,
-            parent.id,
-            fromIndex,
-            toIndex
-          );
-          actions.setTree(newTree);
+    if (!targetNode || !targetNode.parentId) return;
+    for (const id of draggedNodeIds) {
+      if ((0, import_core3.isDescendant)(state.tree, dropTargetNodeId, id)) return;
+    }
+    const targetParentId = targetNode.parentId;
+    const targetParent = state.tree.nodesById.get(targetParentId);
+    if (!targetParent) return;
+    const parentChildren = targetParent.children;
+    const orderedDragIds = parentChildren.filter((c) => draggedNodeIds.has(c.id)).map((c) => c.id);
+    const allSameParent = orderedDragIds.length === draggedNodeIds.size && [...draggedNodeIds].every((id) => {
+      const n = state.tree.nodesById.get(id);
+      return n?.parentId === targetParentId;
+    });
+    if (allSameParent) {
+      const newTree = (0, import_core3.reorderChildrenMulti)(
+        state.tree,
+        targetParentId,
+        orderedDragIds,
+        dropTargetNodeId,
+        dropPosition
+      );
+      actions.setTree(newTree);
+    } else {
+      const orderedIds = sortByTreeOrder(state.tree.root, draggedNodeIds);
+      const draggedNodes = orderedIds.map((id) => state.tree.nodesById.get(id)).filter((n) => !!n && n.parentId !== null).map((n) => structuredClone(n));
+      let newTree = state.tree;
+      for (const id of [...orderedIds].reverse()) {
+        if (newTree.nodesById.has(id)) {
+          newTree = (0, import_core3.removeNode)(newTree, id);
         }
       }
-    } 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
+      const updatedTarget = newTree.nodesById.get(dropTargetNodeId);
+      if (!updatedTarget || !updatedTarget.parentId) {
+        setDragState(INITIAL_DRAG_STATE);
+        return;
+      }
+      const updatedParent = newTree.nodesById.get(updatedTarget.parentId);
+      if (!updatedParent) {
+        setDragState(INITIAL_DRAG_STATE);
+        return;
+      }
+      let insertIdx = updatedParent.children.findIndex(
+        (c) => c.id === dropTargetNodeId
+      );
+      if (dropPosition === "after") insertIdx++;
+      for (let i = 0; i < draggedNodes.length; i++) {
+        newTree = (0, import_core3.insertNode)(
+          newTree,
+          updatedParent.id,
+          draggedNodes[i],
+          insertIdx + i
         );
-        actions.setTree(newTree);
       }
+      actions.setTree(newTree);
     }
     setDragState(INITIAL_DRAG_STATE);
   }, [state.tree, actions]);
@@ -528,6 +819,7 @@ function TreeNodeRow({
   showValues,
   showCounts,
   isFocused,
+  onSelectRange,
   onDragStart,
   onDragOver,
   onDragEnd,
@@ -535,19 +827,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 +851,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 +865,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,
@@ -597,15 +896,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 +988,7 @@ function TreeNodeRow({
         showValues,
         showCounts,
         isFocused,
+        onSelectRange,
         onDragStart,
         onDragOver,
         onDragEnd,
@@ -705,25 +1006,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 +1077,7 @@ function TreeView({
       items.push({
         label: "Copy value as JSON",
         action: () => {
-          const val = (0, import_core3.toJson)(node);
+          const val = (0, import_core4.toJson)(node);
           const text = typeof val === "string" ? val : JSON.stringify(val, null, 2);
           navigator.clipboard.writeText(text).catch(() => {
           });
@@ -778,7 +1088,7 @@ function TreeView({
         items.push({
           label: "Duplicate",
           action: () => {
-            const newTree = (0, import_core3.duplicateNode)(state.tree, node.id);
+            const newTree = (0, import_core4.duplicateNode)(state.tree, node.id);
             actions.setTree(newTree);
           }
         });
@@ -792,7 +1102,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_core4.changeType)(state.tree, node.id, t);
             actions.setTree(newTree);
           }
         }));
@@ -802,7 +1112,7 @@ function TreeView({
         items.push({
           label: "Delete",
           action: () => {
-            const newTree = (0, import_core3.removeNode)(state.tree, node.id);
+            const newTree = (0, import_core4.removeNode)(state.tree, node.id);
             actions.setTree(newTree);
           }
         });
@@ -814,19 +1124,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 +1175,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 +1223,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 +1271,7 @@ function TreeView({
             showValues,
             showCounts,
             isFocused,
+            onSelectRange: handleSelectRange,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
             onDragEnd: handleDragEnd,
@@ -939,8 +1294,8 @@ function TreeView({
 }
 
 // src/form-view.tsx
-var import_react7 = require("react");
-var import_core4 = require("@visual-json/core");
+var import_react8 = require("react");
+var import_core5 = require("@visual-json/core");
 
 // src/breadcrumbs.tsx
 var import_react6 = require("react");
@@ -949,8 +1304,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 +1335,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,8 +1423,8 @@ function Breadcrumbs({ className }) {
             style: {
               width: "100%",
               boxSizing: "border-box",
-              padding: "2px 0",
-              fontSize: 12,
+              padding: "3px 0",
+              fontSize: "var(--vj-input-font-size, 13px)",
               fontFamily: "var(--vj-font, monospace)",
               color: "var(--vj-text-muted, #999999)",
               background: "transparent",
@@ -1124,75 +1479,241 @@ function Breadcrumbs({ className }) {
   );
 }
 
-// src/form-view.tsx
+// src/enum-input.tsx
+var import_react7 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function getResolvedSchema(schema, rootSchema, path) {
-  if (!schema) return void 0;
-  const raw = (0, import_core4.getPropertySchema)(schema, path, rootSchema);
-  if (!raw) return void 0;
-  return (0, import_core4.resolveRef)(raw, rootSchema ?? schema);
-}
-function getValueColor(node) {
-  if (node.type === "boolean" || node.type === "null")
-    return "var(--vj-boolean, #569cd6)";
-  if (node.type === "number") return "var(--vj-number, #b5cea8)";
-  return "var(--vj-string, #ce9178)";
-}
-function getDisplayValue(node) {
-  if (node.type === "null") return "null";
-  if (node.type === "boolean") return String(node.value);
-  if (node.value === null || node.value === void 0) return "";
-  return String(node.value);
-}
-function FormField({
-  node,
-  schema,
-  rootSchema,
-  depth,
-  showDescriptions,
-  showCounts,
-  formSelectedNodeId,
-  editingNodeId,
-  collapsedIds,
-  maxKeyLength,
-  maxDepth,
-  isFocused,
-  dragState,
-  onSelect,
-  onToggleCollapse,
-  onStartEditing,
-  onDragStart,
-  onDragOver,
-  onDragEnd,
-  onDrop
+var DROPDOWN_MAX_HEIGHT2 = 200;
+function EnumInput({
+  enumValues,
+  value,
+  onValueChange,
+  inputRef,
+  inputStyle
 }) {
-  const { state, actions } = useStudio();
-  const isContainer = node.type === "object" || node.type === "array";
-  const collapsed = collapsedIds.has(node.id);
-  const isSelected = formSelectedNodeId === 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_react7.useState)(false);
-  const isRoot = node.parentId === null;
-  const isDragTarget = dragState.dropTargetNodeId === node.id;
-  const isDraggedNode = dragState.draggedNodeId === 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";
-  if (isDragTarget && dragState.dropPosition === "before") {
-    borderTop = "2px solid var(--vj-accent, #007acc)";
-  } else if (isDragTarget && dragState.dropPosition === "after") {
-    borderBottom = "2px solid var(--vj-accent, #007acc)";
-  }
-  const valueRef = (0, import_react7.useRef)(null);
-  const keyRef = (0, import_react7.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react7.useState)(value);
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const [highlightIndex, setHighlightIndex] = (0, import_react7.useState)(0);
+  const listRef = (0, import_react7.useRef)(null);
+  const wrapperRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    setInputValue(value);
+  }, [value]);
+  const suggestions = (0, import_react7.useMemo)(
+    () => enumValues.map((v) => String(v)),
+    [enumValues]
+  );
+  (0, import_react7.useEffect)(() => {
+    setHighlightIndex(0);
+  }, [suggestions]);
+  const selectValue = (0, import_react7.useCallback)(
+    (val) => {
+      onValueChange(val);
+      setInputValue(val);
+      setOpen(false);
+    },
+    [onValueChange]
+  );
+  const handleKeyDown = (0, import_react7.useCallback)(
+    (e) => {
+      if (!open) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          e.stopPropagation();
+          setOpen(true);
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          e.stopPropagation();
+          setHighlightIndex((i) => Math.min(i + 1, suggestions.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          e.stopPropagation();
+          setHighlightIndex((i) => Math.max(i - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          e.stopPropagation();
+          if (suggestions.length > 0 && highlightIndex < suggestions.length) {
+            selectValue(suggestions[highlightIndex]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          e.stopPropagation();
+          setInputValue(value);
+          setOpen(false);
+          break;
+        case "Tab":
+          setInputValue(value);
+          setOpen(false);
+          break;
+      }
+    },
+    [open, suggestions, highlightIndex, value, selectValue]
+  );
+  (0, import_react7.useEffect)(() => {
+    const el = listRef.current;
+    if (!el || !open) return;
+    const item = el.children[highlightIndex];
+    item?.scrollIntoView({ block: "nearest" });
+  }, [highlightIndex, open]);
   (0, import_react7.useEffect)(() => {
+    function handleClickOutside(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setInputValue(value);
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      ref: wrapperRef,
+      style: { position: "relative", flex: 1, minWidth: 0 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            value: inputValue,
+            onChange: (e) => {
+              setInputValue(e.target.value);
+              if (!open) setOpen(true);
+            },
+            onFocus: () => setOpen(true),
+            onKeyDown: handleKeyDown,
+            onClick: (e) => e.stopPropagation(),
+            spellCheck: false,
+            autoComplete: "off",
+            style: inputStyle
+          }
+        ),
+        open && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            ref: listRef,
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: -32,
+              right: 0,
+              zIndex: 50,
+              maxHeight: DROPDOWN_MAX_HEIGHT2,
+              overflowY: "auto",
+              backgroundColor: "var(--vj-bg-panel, #252526)",
+              border: "1px solid var(--vj-border, #333333)",
+              boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
+            },
+            children: suggestions.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "div",
+              {
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  selectValue(s);
+                },
+                onMouseEnter: () => setHighlightIndex(i),
+                style: {
+                  padding: "4px 12px",
+                  fontSize: 13,
+                  fontFamily: "var(--vj-font, monospace)",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
+                  color: i === highlightIndex ? "var(--vj-text, #cccccc)" : "var(--vj-text-muted, #888888)",
+                  backgroundColor: i === highlightIndex ? "var(--vj-bg-hover, #2a2d2e)" : "transparent",
+                  cursor: "pointer",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { width: 14, flexShrink: 0, fontSize: 12 }, children: s === value ? "\u2713" : "" }),
+                  s
+                ]
+              },
+              s
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/form-view.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function getResolvedSchema(schema, rootSchema, path) {
+  if (!schema) return void 0;
+  const raw = (0, import_core5.getPropertySchema)(schema, path, rootSchema);
+  if (!raw) return void 0;
+  return (0, import_core5.resolveRef)(raw, rootSchema ?? schema);
+}
+function getValueColor(node) {
+  if (node.type === "boolean" || node.type === "null")
+    return "var(--vj-boolean, #569cd6)";
+  if (node.type === "number") return "var(--vj-number, #b5cea8)";
+  return "var(--vj-string, #ce9178)";
+}
+function getDisplayValue(node) {
+  if (node.type === "null") return "null";
+  if (node.type === "boolean") return String(node.value);
+  if (node.value === null || node.value === void 0) return "";
+  return String(node.value);
+}
+function FormField({
+  node,
+  schema,
+  rootSchema,
+  depth,
+  showDescriptions,
+  showCounts,
+  editingNodeId,
+  collapsedIds,
+  maxKeyLength,
+  maxDepth,
+  isFocused,
+  dragState,
+  onSelect,
+  onToggleCollapse,
+  onStartEditing,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  onDrop
+}) {
+  const { state, actions } = useStudio();
+  const isContainer = node.type === "object" || node.type === "array";
+  const collapsed = collapsedIds.has(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.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 borderTopColor = "transparent";
+  let borderBottomColor = "transparent";
+  if (isDragTarget && dragState.dropPosition === "before") {
+    borderTopColor = "var(--vj-accent, #007acc)";
+  } else if (isDragTarget && dragState.dropPosition === "after") {
+    borderBottomColor = "var(--vj-accent, #007acc)";
+  }
+  const valueRef = (0, import_react8.useRef)(null);
+  const keyRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     if (!isEditing) return;
     if (!isContainer) {
       const hasValue = node.value !== null && node.value !== void 0 && node.value !== "";
@@ -1205,7 +1726,7 @@ function FormField({
       keyRef.current.focus();
     }
   }, [isEditing, isContainer, node.value]);
-  const handleValueChange = (0, import_react7.useCallback)(
+  const handleValueChange = (0, import_react8.useCallback)(
     (newValue) => {
       let parsed;
       if (propSchema?.type === "boolean" || newValue === "true" || newValue === "false") {
@@ -1218,43 +1739,45 @@ function FormField({
       } else {
         parsed = newValue;
       }
-      const newTree = (0, import_core4.setValue)(state.tree, node.id, parsed);
+      const newTree = (0, import_core5.setValue)(state.tree, node.id, parsed);
       actions.setTree(newTree);
     },
     [state.tree, node.id, node.type, actions, propSchema]
   );
-  const handleKeyChange = (0, import_react7.useCallback)(
+  const handleKeyChange = (0, import_react8.useCallback)(
     (newKey) => {
-      const newTree = (0, import_core4.setKey)(state.tree, node.id, newKey);
+      const newTree = (0, import_core5.setKey)(state.tree, node.id, newKey);
       actions.setTree(newTree);
     },
     [state.tree, node.id, actions]
   );
-  const handleRemove = (0, import_react7.useCallback)(() => {
-    const newTree = (0, import_core4.removeNode)(state.tree, node.id);
+  const handleRemove = (0, import_react8.useCallback)(() => {
+    const newTree = (0, import_core5.removeNode)(state.tree, node.id);
     actions.setTree(newTree);
   }, [state.tree, node.id, actions]);
-  const handleAddChild = (0, import_react7.useCallback)(() => {
+  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_core5.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";
   const rowBg = isSelected ? isFocused ? "var(--vj-bg-selected, #2a5a1e)" : "var(--vj-bg-selected-muted, var(--vj-bg-hover, #2a2d2e))" : hovered ? "var(--vj-bg-hover, #2a2d2e)" : "transparent";
   const rowColor = isSelected && isFocused ? "var(--vj-text-selected, var(--vj-text, #cccccc))" : "var(--vj-text, #cccccc)";
   if (isContainer) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "div",
         {
           "data-form-node-id": node.id,
           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,
@@ -1267,26 +1790,27 @@ 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),
           onMouseLeave: () => setHovered(false),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 onClick: (e) => {
@@ -1311,7 +1835,7 @@ function FormField({
                 children: "\u25B6"
               }
             ),
-            isEditing && !isRoot ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            isEditing && !isRoot ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "input",
               {
                 ref: keyRef,
@@ -1323,7 +1847,7 @@ function FormField({
                   border: "none",
                   color: "inherit",
                   fontFamily: "var(--vj-font, monospace)",
-                  fontSize: 13,
+                  fontSize: "var(--vj-input-font-size, 13px)",
                   fontWeight: 500,
                   padding: 0,
                   outline: "none",
@@ -1331,12 +1855,12 @@ function FormField({
                   width: `calc(${(maxDepth - depth) * 16}px + ${maxKeyLength}ch)`
                 }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 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,
@@ -1346,7 +1870,7 @@ function FormField({
                 children: isRoot ? "/" : getDisplayKey(node, state.tree)
               }
             ),
-            showDescriptions && fieldTitle && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            showDescriptions && fieldTitle && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 style: {
@@ -1357,7 +1881,7 @@ function FormField({
                 children: fieldTitle
               }
             ),
-            hovered && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            hovered && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
                 onClick: (e) => {
@@ -1379,7 +1903,7 @@ function FormField({
                 ]
               }
             ),
-            showCounts && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            showCounts && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 style: {
@@ -1391,7 +1915,7 @@ function FormField({
                 children: node.type === "array" ? `${node.children.length} items` : `${node.children.length} properties`
               }
             ),
-            !isRoot && isEditing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            !isRoot && isEditing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 onClick: (e) => {
@@ -1415,7 +1939,7 @@ function FormField({
           ]
         }
       ),
-      showDescriptions && description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      showDescriptions && description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "div",
         {
           style: {
@@ -1428,7 +1952,7 @@ function FormField({
           children: description
         }
       ),
-      !collapsed && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      !collapsed && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FormField,
         {
           node: child,
@@ -1437,7 +1961,6 @@ function FormField({
           depth: depth + 1,
           showDescriptions,
           showCounts,
-          formSelectedNodeId,
           editingNodeId,
           collapsedIds,
           maxKeyLength,
@@ -1458,13 +1981,16 @@ function FormField({
   }
   const displayValue = getDisplayValue(node);
   const valueColor = getValueColor(node);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       "data-form-node-id": node.id,
       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,
@@ -1477,27 +2003,28 @@ 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),
       onMouseLeave: () => setHovered(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { width: 16, flexShrink: 0 } }),
-        isEditing && parentIsObject ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { width: 16, flexShrink: 0 } }),
+        isEditing && parentIsObject ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           {
             ref: keyRef,
@@ -1515,19 +2042,19 @@ function FormField({
               border: "none",
               color: "inherit",
               fontFamily: "var(--vj-font, monospace)",
-              fontSize: 13,
+              fontSize: "var(--vj-input-font-size, 13px)",
               padding: 0,
               flexShrink: 0,
               outline: "none",
               width: `calc(${(maxDepth - depth) * 16}px + ${maxKeyLength}ch)`
             }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
             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",
@@ -1536,7 +2063,7 @@ function FormField({
             children: getDisplayKey(node, state.tree)
           }
         ),
-        isRequired && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isRequired && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
             style: {
@@ -1547,7 +2074,7 @@ function FormField({
             children: "*"
           }
         ),
-        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             style: {
@@ -1566,12 +2093,12 @@ function FormField({
               valueColor
             )
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
             style: {
               color: valueColor,
-              fontSize: 13,
+              fontSize: "var(--vj-input-font-size, 13px)",
               fontFamily: "var(--vj-font, monospace)",
               overflow: "hidden",
               textOverflow: "ellipsis",
@@ -1581,7 +2108,7 @@ function FormField({
             children: displayValue
           }
         ),
-        isEditing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isEditing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             onClick: (e) => {
@@ -1612,54 +2139,44 @@ function renderEditInput(node, propSchema, displayValue, handleValueChange, inpu
     background: "none",
     border: "none",
     fontFamily: "var(--vj-font, monospace)",
-    fontSize: 13,
+    fontSize: "var(--vj-input-font-size, 13px)",
     padding: 0,
     flex: 1,
     outline: "none",
     color: valueColor
   };
   if (node.type === "boolean") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "select",
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      EnumInput,
       {
-        ref: inputRef,
+        enumValues: ["true", "false"],
         value: String(node.value),
-        onChange: (e) => handleValueChange(e.target.value),
-        onClick: (e) => e.stopPropagation(),
-        style: { ...inputStyle, cursor: "pointer" },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "true", children: "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "false", children: "false" })
-        ]
+        onValueChange: handleValueChange,
+        inputRef,
+        inputStyle
       }
     );
   }
   if (hasEnumValues && propSchema?.enum) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "select",
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      EnumInput,
       {
-        ref: inputRef,
+        enumValues: propSchema.enum,
         value: displayValue,
-        onChange: (e) => handleValueChange(e.target.value),
-        onClick: (e) => e.stopPropagation(),
-        style: { ...inputStyle, cursor: "pointer" },
-        children: [
-          !propSchema.enum.some(
-            (v) => JSON.stringify(v) === JSON.stringify(node.value)
-          ) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: displayValue, children: displayValue || "(empty)" }),
-          propSchema.enum.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: String(v), children: String(v) }, i))
-        ]
+        onValueChange: handleValueChange,
+        inputRef,
+        inputStyle
       }
     );
   }
   if (node.type === "null") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "span",
       {
         style: {
           color: "var(--vj-boolean, #569cd6)",
           fontFamily: "var(--vj-font, monospace)",
-          fontSize: 13,
+          fontSize: "var(--vj-input-font-size, 13px)",
           fontStyle: "italic",
           flex: 1
         },
@@ -1667,7 +2184,7 @@ function renderEditInput(node, propSchema, displayValue, handleValueChange, inpu
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "input",
     {
       ref: inputRef,
@@ -1692,35 +2209,35 @@ 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_react7.useState)(
-    null
-  );
-  const [editingNodeId, setEditingNodeId] = (0, import_react7.useState)(null);
-  const preEditTreeRef = (0, import_react7.useRef)(null);
-  const [collapsedIds, setCollapsedIds] = (0, import_react7.useState)(
+  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)(
     () => /* @__PURE__ */ new Set()
   );
-  const containerRef = (0, import_react7.useRef)(null);
-  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
-  const {
-    dragState,
-    handleDragStart,
-    handleDragOver,
-    handleDragEnd,
-    handleDrop
-  } = useDragDrop();
-  (0, import_react7.useEffect)(() => {
-    setFormSelectedNodeId(null);
+  const containerRef = (0, import_react8.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     setEditingNodeId(null);
     setCollapsedIds(/* @__PURE__ */ new Set());
   }, [displayNode.id]);
-  const visibleNodes = (0, import_react7.useMemo)(
+  const visibleNodes = (0, import_react8.useMemo)(
     () => getVisibleNodes(displayNode, (id) => !collapsedIds.has(id)),
     [displayNode, collapsedIds]
   );
-  const { maxKeyLength, maxDepth } = (0, import_react7.useMemo)(() => {
+  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;
     const baseSegments = displayNode.path === "/" ? 0 : displayNode.path.split("/").filter(Boolean).length;
@@ -1733,11 +2250,21 @@ function FormView({
     }
     return { maxKeyLength: maxKey, maxDepth: maxD };
   }, [visibleNodes, displayNode.path, state.tree]);
-  const handleSelect = (0, import_react7.useCallback)((nodeId) => {
-    setFormSelectedNodeId(nodeId);
-    setEditingNodeId(null);
-  }, []);
-  const handleToggleCollapse = (0, import_react7.useCallback)((nodeId) => {
+  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);
       if (next.has(nodeId)) {
@@ -1748,14 +2275,14 @@ function FormView({
       return next;
     });
   }, []);
-  const handleStartEditing = (0, import_react7.useCallback)(
+  const handleStartEditing = (0, import_react8.useCallback)(
     (nodeId) => {
       preEditTreeRef.current = state.tree;
       setEditingNodeId(nodeId);
     },
     [state.tree]
   );
-  const scrollToNode = (0, import_react7.useCallback)((nodeId) => {
+  const scrollToNode = (0, import_react8.useCallback)((nodeId) => {
     requestAnimationFrame(() => {
       const el = containerRef.current?.querySelector(
         `[data-form-node-id="${nodeId}"]`
@@ -1763,7 +2290,7 @@ function FormView({
       el?.scrollIntoView({ block: "nearest" });
     });
   }, []);
-  const handleKeyDown = (0, import_react7.useCallback)(
+  const handleKeyDown = (0, import_react8.useCallback)(
     (e) => {
       if (editingNodeId) {
         if (e.key === "Escape") {
@@ -1784,15 +2311,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;
@@ -1801,7 +2336,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;
@@ -1817,7 +2357,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);
             }
           }
@@ -1839,7 +2379,7 @@ function FormView({
               (n) => n.id === current.parentId
             );
             if (parentInVisible) {
-              setFormSelectedNodeId(parentInVisible.id);
+              actions.selectNode(parentInVisible.id);
               scrollToNode(parentInVisible.id);
             }
           }
@@ -1847,30 +2387,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;
         }
@@ -1878,7 +2442,8 @@ function FormView({
     },
     [
       visibleNodes,
-      formSelectedNodeId,
+      state.focusedNodeId,
+      state.selectedNodeIds,
       editingNodeId,
       collapsedIds,
       scrollToNode,
@@ -1886,7 +2451,7 @@ function FormView({
       actions
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className,
@@ -1899,19 +2464,21 @@ function FormView({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "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_runtime5.jsx)(Breadcrumbs, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Breadcrumbs, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             ref: containerRef,
@@ -1929,7 +2496,7 @@ function FormView({
               overflow: "auto",
               outline: "none"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               FormField,
               {
                 node: displayNode,
@@ -1938,7 +2505,6 @@ function FormView({
                 depth: 0,
                 showDescriptions,
                 showCounts,
-                formSelectedNodeId,
                 editingNodeId,
                 collapsedIds,
                 maxKeyLength,
@@ -1962,12 +2528,12 @@ function FormView({
 }
 
 // src/search-bar.tsx
-var import_react8 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function SearchBar({ className }) {
   const { state, actions } = useStudio();
-  const inputRef = (0, import_react8.useRef)(null);
-  const handleKeyDown = (0, import_react8.useCallback)(
+  const inputRef = (0, import_react9.useRef)(null);
+  const handleKeyDown = (0, import_react9.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -1985,7 +2551,7 @@ function SearchBar({ className }) {
     },
     [actions]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     function handleGlobalKeyDown(e) {
       const mod = e.metaKey || e.ctrlKey;
       if (mod && e.key === "f") {
@@ -1999,7 +2565,7 @@ function SearchBar({ className }) {
   }, []);
   const matchCount = state.searchMatches.length;
   const currentMatch = matchCount > 0 ? state.searchMatchIndex + 1 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className,
@@ -2008,11 +2574,11 @@ 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: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             ref: inputRef,
@@ -2028,14 +2594,14 @@ function SearchBar({ className }) {
               borderRadius: 3,
               color: "var(--vj-text, #cccccc)",
               fontFamily: "var(--vj-font, monospace)",
-              fontSize: 12,
+              fontSize: "var(--vj-input-font-size, 13px)",
               padding: "3px 8px",
               outline: "none",
               minWidth: 0
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             style: {
@@ -2045,8 +2611,8 @@ function SearchBar({ className }) {
               flexShrink: 0,
               height: 18
             },
-            children: state.searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: state.searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "span",
                 {
                   style: {
@@ -2059,7 +2625,7 @@ function SearchBar({ className }) {
                   children: matchCount > 0 ? `${currentMatch}/${matchCount}` : "0/0"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: actions.prevSearchMatch,
@@ -2083,7 +2649,7 @@ function SearchBar({ className }) {
                   children: "\u25B2"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: actions.nextSearchMatch,
@@ -2107,7 +2673,7 @@ function SearchBar({ className }) {
                   children: "\u25BC"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: () => actions.setSearchQuery(""),
@@ -2130,8 +2696,8 @@ function SearchBar({ className }) {
                   children: "\xD7"
                 }
               )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: actions.expandAll,
@@ -2148,7 +2714,7 @@ function SearchBar({ className }) {
                     alignItems: "center"
                   },
                   title: "Expand all",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                     "svg",
                     {
                       width: "14",
@@ -2160,15 +2726,15 @@ function SearchBar({ className }) {
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 2v4M5 4l3-2 3 2" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 14v-4M5 12l3 2 3-2" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M2 8h12" })
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 2v4M5 4l3-2 3 2" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 14v-4M5 12l3 2 3-2" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M2 8h12" })
                       ]
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: actions.collapseAll,
@@ -2185,7 +2751,7 @@ function SearchBar({ className }) {
                     alignItems: "center"
                   },
                   title: "Collapse all",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                     "svg",
                     {
                       width: "14",
@@ -2197,9 +2763,9 @@ function SearchBar({ className }) {
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 5V1M5 3l3 2 3-2" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 11v4M5 13l3-2 3 2" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M2 8h12" })
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 5V1M5 3l3 2 3-2" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 11v4M5 13l3-2 3 2" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M2 8h12" })
                       ]
                     }
                   )
@@ -2214,31 +2780,7 @@ function SearchBar({ className }) {
 }
 
 // src/json-editor.tsx
-var import_jsx_runtime7 = 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"
-};
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function JsonEditor({
   value,
   defaultValue,
@@ -2257,15 +2799,15 @@ function JsonEditor({
 }) {
   const isControlled = value !== void 0;
   const initialValue = isControlled ? value : defaultValue ?? {};
-  const [editorKey, setEditorKey] = (0, import_react9.useState)(0);
-  const valueRef = (0, import_react9.useRef)(initialValue);
-  (0, import_react9.useEffect)(() => {
+  const [editorKey, setEditorKey] = (0, import_react10.useState)(0);
+  const valueRef = (0, import_react10.useRef)(initialValue);
+  (0, import_react10.useEffect)(() => {
     if (isControlled && value !== valueRef.current) {
       valueRef.current = value;
       setEditorKey((k) => k + 1);
     }
   }, [value, isControlled]);
-  const handleChange = (0, import_react9.useCallback)(
+  const handleChange = (0, import_react10.useCallback)(
     (newValue) => {
       valueRef.current = newValue;
       if (!readOnly) {
@@ -2283,25 +2825,35 @@ function JsonEditor({
     ...DEFAULT_CSS_VARS,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    VisualJson,
-    {
-      value: valueRef.current,
-      onChange: readOnly ? void 0 : handleChange,
-      schema,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        EditorLayout,
-        {
-          treeShowValues,
-          treeShowCounts,
-          editorShowDescriptions,
-          editorShowCounts,
-          sidebarOpen
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, "data-vj-root": "", style: containerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `@media(pointer:coarse){[data-vj-root]{--vj-input-font-size:16px}}`
         }
-      )
-    },
-    editorKey
-  ) });
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      VisualJson,
+      {
+        value: valueRef.current,
+        onChange: readOnly ? void 0 : handleChange,
+        schema,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          EditorLayout,
+          {
+            treeShowValues,
+            treeShowCounts,
+            editorShowDescriptions,
+            editorShowCounts,
+            sidebarOpen
+          }
+        )
+      },
+      editorKey
+    )
+  ] });
 }
 function EditorLayout({
   treeShowValues,
@@ -2310,14 +2862,14 @@ function EditorLayout({
   editorShowCounts,
   sidebarOpen
 }) {
-  const [sidebarWidth, setSidebarWidth] = (0, import_react9.useState)(280);
-  const [isNarrow, setIsNarrow] = (0, import_react9.useState)(false);
-  const [activePanel, setActivePanel] = (0, import_react9.useState)("tree");
-  const containerRef = (0, import_react9.useRef)(null);
-  const dragging = (0, import_react9.useRef)(false);
-  const startX = (0, import_react9.useRef)(0);
-  const startWidth = (0, import_react9.useRef)(0);
-  (0, import_react9.useEffect)(() => {
+  const [sidebarWidth, setSidebarWidth] = (0, import_react10.useState)(280);
+  const [isNarrow, setIsNarrow] = (0, import_react10.useState)(false);
+  const [activePanel, setActivePanel] = (0, import_react10.useState)("tree");
+  const containerRef = (0, import_react10.useRef)(null);
+  const dragging = (0, import_react10.useRef)(false);
+  const startX = (0, import_react10.useRef)(0);
+  const startWidth = (0, import_react10.useRef)(0);
+  (0, import_react10.useEffect)(() => {
     function checkWidth() {
       if (containerRef.current) {
         setIsNarrow(containerRef.current.offsetWidth < 500);
@@ -2328,7 +2880,7 @@ function EditorLayout({
     if (containerRef.current) observer.observe(containerRef.current);
     return () => observer.disconnect();
   }, []);
-  const handleMouseDown = (0, import_react9.useCallback)(
+  const handleMouseDown = (0, import_react10.useCallback)(
     (e) => {
       dragging.current = true;
       startX.current = e.clientX;
@@ -2358,7 +2910,7 @@ function EditorLayout({
   );
   if (isNarrow) {
     if (!sidebarOpen) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
           ref: containerRef,
@@ -2368,7 +2920,7 @@ function EditorLayout({
             flex: 1,
             minHeight: 0
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             FormView,
             {
               showDescriptions: editorShowDescriptions,
@@ -2378,7 +2930,7 @@ function EditorLayout({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         ref: containerRef,
@@ -2389,7 +2941,7 @@ function EditorLayout({
           minHeight: 0
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "div",
             {
               style: {
@@ -2399,7 +2951,7 @@ function EditorLayout({
                 backgroundColor: "var(--vj-bg-panel, #252526)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     onClick: () => setActivePanel("tree"),
@@ -2416,7 +2968,7 @@ function EditorLayout({
                     children: "Tree"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     onClick: () => setActivePanel("form"),
@@ -2436,7 +2988,7 @@ function EditorLayout({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "hidden" }, children: activePanel === "tree" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "hidden" }, children: activePanel === "tree" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "div",
             {
               style: {
@@ -2445,8 +2997,8 @@ function EditorLayout({
                 height: "100%"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchBar, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchBar, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   TreeView,
                   {
                     showValues: treeShowValues,
@@ -2455,7 +3007,7 @@ function EditorLayout({
                 ) })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               style: {
@@ -2463,7 +3015,7 @@ function EditorLayout({
                 flexDirection: "column",
                 height: "100%"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 FormView,
                 {
                   showDescriptions: editorShowDescriptions,
@@ -2476,8 +3028,8 @@ function EditorLayout({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: containerRef, style: { display: "flex", flex: 1, minHeight: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: containerRef, style: { display: "flex", flex: 1, minHeight: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         style: {
@@ -2489,12 +3041,12 @@ function EditorLayout({
           transition: "width 0.2s ease"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchBar, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TreeView, { showValues: treeShowValues, showCounts: treeShowCounts }) })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchBar, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TreeView, { showValues: treeShowValues, showCounts: treeShowCounts }) })
         ]
       }
     ),
-    sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         style: {
@@ -2504,7 +3056,7 @@ function EditorLayout({
           position: "relative",
           transition: "background-color 0.15s"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             onMouseDown: handleMouseDown,
@@ -2533,7 +3085,7 @@ function EditorLayout({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         style: {
@@ -2543,7 +3095,7 @@ function EditorLayout({
           minWidth: 0,
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           FormView,
           {
             showDescriptions: editorShowDescriptions,
@@ -2555,424 +3107,6 @@ function EditorLayout({
   ] });
 }
 
-// src/property-editor.tsx
-var import_react10 = require("react");
-var import_core5 = require("@visual-json/core");
-var import_jsx_runtime8 = 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_react10.useState)(false);
-  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_runtime8.jsxs)(
-    "div",
-    {
-      onMouseEnter: () => setHoveredRow(true),
-      onMouseLeave: () => setHoveredRow(false),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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: 13,
-                    padding: "2px 6px",
-                    width: 140,
-                    flexShrink: 0
-                  }
-                }
-              ),
-              !isContainer ? hasEnumValues ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                "select",
-                {
-                  value: displayValue(),
-                  onChange: (e) => handleValueChange(e.target.value),
-                  style: {
-                    background: "var(--vj-input-bg, #3c3c3c)",
-                    border: "1px solid var(--vj-input-border, #555555)",
-                    borderRadius: 3,
-                    color: node.type === "string" ? "var(--vj-string, #ce9178)" : "var(--vj-number, #b5cea8)",
-                    fontFamily: "var(--vj-font, monospace)",
-                    fontSize: 13,
-                    padding: "2px 6px",
-                    flex: 1,
-                    cursor: "pointer"
-                  },
-                  children: schemaProperty.enum.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: String(v), children: String(v) }, i))
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime8.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: 13,
-                    padding: "2px 6px",
-                    flex: 1,
-                    textAlign: "right"
-                  }
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsxs)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: 2,
-                    opacity: hoveredRow ? 1 : 0,
-                    transition: "opacity 0.1s",
-                    flexShrink: 0
-                  },
-                  children: [
-                    isContainer && /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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_runtime8.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_react10.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_react10.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_react10.useCallback)(() => {
-    if (!selectedNode) return;
-    navigator.clipboard.writeText(selectedNode.path).catch(() => {
-    });
-  }, [selectedNode]);
-  const handleCopyValue = (0, import_react10.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_runtime8.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_runtime8.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_runtime8.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_runtime8.jsxs)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 2,
-                    flex: 1,
-                    minWidth: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Breadcrumbs, {}),
-                    schemaTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "span",
-                      {
-                        style: { fontSize: 10, color: "var(--vj-text-dim, #666666)" },
-                        children: schemaTitle
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 4,
-                    flexShrink: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.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: 11,
-                          fontFamily: "var(--vj-font, monospace)",
-                          padding: "1px 4px",
-                          cursor: "pointer"
-                        },
-                        title: "Change type",
-                        children: ALL_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: t, children: t }, t))
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "button",
-                      {
-                        onClick: handleCopyPath,
-                        style: actionButtonStyle,
-                        title: "Copy path",
-                        children: "path"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "button",
-                      {
-                        onClick: handleCopyValue,
-                        style: actionButtonStyle,
-                        title: "Copy value",
-                        children: "value"
-                      }
-                    ),
-                    selectedNode.parentId && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "button",
-                      {
-                        onClick: handleDuplicate,
-                        style: actionButtonStyle,
-                        title: "Duplicate",
-                        children: "dup"
-                      }
-                    ),
-                    isContainer && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "button",
-                      {
-                        onClick: handleAdd,
-                        style: {
-                          ...actionButtonStyle,
-                          border: "1px solid var(--vj-input-border, #555555)"
-                        },
-                        children: "+ Add"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: isContainer ? selectedNode.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          PropertyRow,
-          {
-            node: child,
-            schemaProperty: getChildSchema(child.key)
-          },
-          child.id
-        )) : /* @__PURE__ */ (0, import_jsx_runtime8.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_react11 = require("react");
 var import_core6 = require("@visual-json/core");
@@ -3133,7 +3267,6 @@ function DiffView({
   DiffView,
   FormView,
   JsonEditor,
-  PropertyEditor,
   SearchBar,
   StudioContext,
   TreeView,