@visual-json/react 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
 // src/json-editor.tsx
 import {
-  useState as useState7,
-  useRef as useRef8,
-  useCallback as useCallback7,
-  useEffect as useEffect7
+  useState as useState8,
+  useRef as useRef9,
+  useCallback as useCallback8,
+  useEffect as useEffect8
 } from "react";
 
 // src/visual-json.tsx
@@ -33,6 +33,91 @@ function useStudio() {
   return ctx;
 }
 
+// src/get-visible-nodes.ts
+function getVisibleNodes(root, isExpanded) {
+  const result = [];
+  function walk(node) {
+    result.push(node);
+    if (isExpanded(node.id) && (node.type === "object" || node.type === "array")) {
+      for (const child of node.children) {
+        walk(child);
+      }
+    }
+  }
+  walk(root);
+  return result;
+}
+
+// src/selection-utils.ts
+import { removeNode } from "@visual-json/core";
+function computeSelectAllIds(tree, focusedNodeId, currentlySelected) {
+  if (!focusedNodeId) return null;
+  let node = tree.nodesById.get(focusedNodeId);
+  if (!node) return null;
+  while (node) {
+    const parent = node.parentId ? tree.nodesById.get(node.parentId) : void 0;
+    const siblings = parent ? parent.children : [tree.root];
+    const siblingIds = new Set(siblings.map((s) => s.id));
+    const allSelected = siblings.every((s) => currentlySelected.has(s.id));
+    if (!allSelected) {
+      return siblingIds;
+    }
+    if (!parent || !parent.parentId) return siblingIds;
+    node = parent;
+  }
+  return null;
+}
+function computeRangeIds(visibleNodes, anchorId, targetId) {
+  const anchorIdx = visibleNodes.findIndex((n) => n.id === anchorId);
+  const targetIdx = visibleNodes.findIndex((n) => n.id === targetId);
+  if (anchorIdx === -1 || targetIdx === -1) return null;
+  const start = Math.min(anchorIdx, targetIdx);
+  const end = Math.max(anchorIdx, targetIdx);
+  const ids = /* @__PURE__ */ new Set();
+  for (let i = start; i <= end; i++) {
+    ids.add(visibleNodes[i].id);
+  }
+  return ids;
+}
+function deleteSelectedNodes(tree, selectedIds, visibleNodes) {
+  const idsToDelete = [...selectedIds].filter((id) => {
+    const node = tree.nodesById.get(id);
+    if (!node || node.parentId === null) return false;
+    let cur = tree.nodesById.get(node.parentId);
+    while (cur) {
+      if (selectedIds.has(cur.id)) return false;
+      cur = cur.parentId ? tree.nodesById.get(cur.parentId) : void 0;
+    }
+    return true;
+  });
+  if (idsToDelete.length === 0) return { newTree: tree, nextFocusId: null };
+  const firstDeletedIdx = visibleNodes.findIndex((n) => selectedIds.has(n.id));
+  let newTree = tree;
+  for (const id of idsToDelete) {
+    if (newTree.nodesById.has(id)) {
+      newTree = removeNode(newTree, id);
+    }
+  }
+  let nextFocusId = null;
+  for (let i = firstDeletedIdx; i < visibleNodes.length; i++) {
+    const id = visibleNodes[i].id;
+    if (!selectedIds.has(id) && newTree.nodesById.has(id)) {
+      nextFocusId = id;
+      break;
+    }
+  }
+  if (!nextFocusId) {
+    for (let i = firstDeletedIdx - 1; i >= 0; i--) {
+      const id = visibleNodes[i].id;
+      if (!selectedIds.has(id) && newTree.nodesById.has(id)) {
+        nextFocusId = id;
+        break;
+      }
+    }
+  }
+  return { newTree, nextFocusId };
+}
+
 // src/visual-json.tsx
 import { jsx } from "react/jsx-runtime";
 function collectAllIds(node) {
@@ -49,10 +134,42 @@ function VisualJson({
   children
 }) {
   const [tree, setTreeState] = useState(() => fromJson(value));
-  const [selectedNodeId, setSelectedNodeId] = useState(null);
+  const [focusedNodeId, setFocusedNodeId] = useState(null);
+  const [selectedNodeIds, setSelectedNodeIdsState] = useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const selectedNodeIdsRef = useRef(/* @__PURE__ */ new Set());
+  const setSelectedNodeIds = useCallback((ids) => {
+    selectedNodeIdsRef.current = ids;
+    setSelectedNodeIdsState(ids);
+  }, []);
+  const anchorNodeIdRef = useRef(null);
+  const [anchorNodeId, setAnchorNodeIdState] = useState(null);
+  const [drillDownNodeId, setDrillDownNodeId] = useState(null);
   const [expandedNodeIds, setExpandedNodeIds] = useState(
     () => /* @__PURE__ */ new Set([tree.root.id])
   );
+  const setAnchorNodeId = useCallback((id) => {
+    anchorNodeIdRef.current = id;
+    setAnchorNodeIdState(id);
+  }, []);
+  const focusSelectAndDrillDown = useCallback(
+    (nodeId) => {
+      setFocusedNodeId(nodeId);
+      setSelectedNodeIds(nodeId ? /* @__PURE__ */ new Set([nodeId]) : /* @__PURE__ */ new Set());
+      setAnchorNodeId(nodeId);
+      setDrillDownNodeId(nodeId);
+    },
+    [setSelectedNodeIds, setAnchorNodeId]
+  );
+  const visibleNodes = useMemo(
+    () => getVisibleNodes(tree.root, (id) => expandedNodeIds.has(id)),
+    [tree.root, expandedNodeIds]
+  );
+  const visibleNodesOverrideRef = useRef(null);
+  const setVisibleNodesOverride = useCallback((nodes) => {
+    visibleNodesOverrideRef.current = nodes;
+  }, []);
   const historyRef = useRef(new History());
   const isInternalChange = useRef(false);
   const hasMounted = useRef(false);
@@ -81,7 +198,7 @@ function VisualJson({
     const newTree = fromJson(value);
     setTreeState(newTree);
     setExpandedNodeIds(/* @__PURE__ */ new Set([newTree.root.id]));
-    setSelectedNodeId(null);
+    focusSelectAndDrillDown(null);
     historyRef.current = new History();
     historyRef.current.push(newTree);
     setCanUndo(false);
@@ -139,8 +256,66 @@ function VisualJson({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [undo, redo]);
-  const selectNode = useCallback((nodeId) => {
-    setSelectedNodeId(nodeId);
+  const selectNode = useCallback(
+    (nodeId) => {
+      setFocusedNodeId(nodeId);
+      setSelectedNodeIds(nodeId ? /* @__PURE__ */ new Set([nodeId]) : /* @__PURE__ */ new Set());
+      setAnchorNodeId(nodeId);
+    },
+    [setSelectedNodeIds, setAnchorNodeId]
+  );
+  const selectAndDrillDown = focusSelectAndDrillDown;
+  const toggleNodeSelection = useCallback(
+    (nodeId) => {
+      const next = new Set(selectedNodeIdsRef.current);
+      if (next.has(nodeId)) {
+        next.delete(nodeId);
+      } else {
+        next.add(nodeId);
+      }
+      setSelectedNodeIds(next);
+      if (next.size === 0) {
+        setFocusedNodeId(null);
+        setAnchorNodeId(null);
+      } else {
+        setFocusedNodeId(nodeId);
+        setAnchorNodeId(nodeId);
+      }
+    },
+    [setSelectedNodeIds, setAnchorNodeId]
+  );
+  const selectNodeRange = useCallback(
+    (toNodeId) => {
+      const nodes = visibleNodesOverrideRef.current ?? visibleNodes;
+      const anchor = anchorNodeIdRef.current;
+      if (!anchor) {
+        setFocusedNodeId(toNodeId);
+        setSelectedNodeIds(/* @__PURE__ */ new Set([toNodeId]));
+        setAnchorNodeId(toNodeId);
+        return;
+      }
+      const rangeIds = computeRangeIds(nodes, anchor, toNodeId);
+      if (!rangeIds) {
+        setFocusedNodeId(toNodeId);
+        setSelectedNodeIds(/* @__PURE__ */ new Set([toNodeId]));
+        setAnchorNodeId(toNodeId);
+        return;
+      }
+      setSelectedNodeIds(rangeIds);
+      setFocusedNodeId(toNodeId);
+    },
+    [visibleNodes, setSelectedNodeIds, setAnchorNodeId]
+  );
+  const setSelection = useCallback(
+    (focusedId, newSelectedIds, newAnchorId) => {
+      setFocusedNodeId(focusedId);
+      setSelectedNodeIds(newSelectedIds);
+      setAnchorNodeId(newAnchorId);
+    },
+    [setSelectedNodeIds, setAnchorNodeId]
+  );
+  const drillDown = useCallback((nodeId) => {
+    setDrillDownNodeId(nodeId);
   }, []);
   const toggleExpand = useCallback((nodeId) => {
     setExpandedNodeIds((prev) => {
@@ -186,6 +361,7 @@ function VisualJson({
       const matchIds = new Set(matches.map((m) => m.nodeId));
       setSearchMatchNodeIds(matchIds);
       if (matches.length > 0) {
+        const firstId = matches[0].nodeId;
         const ancestors = getAncestorIds(
           tree,
           matches.map((m) => m.nodeId)
@@ -195,7 +371,7 @@ function VisualJson({
           for (const id of ancestors) next.add(id);
           return next;
         });
-        setSelectedNodeId(matches[0].nodeId);
+        focusSelectAndDrillDown(firstId);
       }
     },
     [tree]
@@ -204,14 +380,14 @@ function VisualJson({
     if (searchMatches.length === 0) return;
     const nextIdx = (searchMatchIndex + 1) % searchMatches.length;
     setSearchMatchIndex(nextIdx);
-    setSelectedNodeId(searchMatches[nextIdx].nodeId);
-  }, [searchMatches, searchMatchIndex]);
+    focusSelectAndDrillDown(searchMatches[nextIdx].nodeId);
+  }, [searchMatches, searchMatchIndex, focusSelectAndDrillDown]);
   const prevSearchMatch = useCallback(() => {
     if (searchMatches.length === 0) return;
     const prevIdx = (searchMatchIndex - 1 + searchMatches.length) % searchMatches.length;
     setSearchMatchIndex(prevIdx);
-    setSelectedNodeId(searchMatches[prevIdx].nodeId);
-  }, [searchMatches, searchMatchIndex]);
+    focusSelectAndDrillDown(searchMatches[prevIdx].nodeId);
+  }, [searchMatches, searchMatchIndex, focusSelectAndDrillDown]);
   useEffect(() => {
     if (!searchQuery.trim()) return;
     const matches = searchNodes(tree, searchQuery);
@@ -224,7 +400,10 @@ function VisualJson({
   const state = useMemo(
     () => ({
       tree,
-      selectedNodeId,
+      focusedNodeId,
+      selectedNodeIds,
+      anchorNodeId,
+      drillDownNodeId,
       expandedNodeIds,
       schema: schema ?? null,
       searchQuery,
@@ -234,7 +413,10 @@ function VisualJson({
     }),
     [
       tree,
-      selectedNodeId,
+      focusedNodeId,
+      selectedNodeIds,
+      anchorNodeId,
+      drillDownNodeId,
       expandedNodeIds,
       schema,
       searchQuery,
@@ -247,6 +429,12 @@ function VisualJson({
     () => ({
       setTree,
       selectNode,
+      selectAndDrillDown,
+      toggleNodeSelection,
+      selectNodeRange,
+      setSelection,
+      setVisibleNodesOverride,
+      drillDown,
       toggleExpand,
       expandNode,
       collapseNode,
@@ -263,6 +451,12 @@ function VisualJson({
     [
       setTree,
       selectNode,
+      selectAndDrillDown,
+      toggleNodeSelection,
+      selectNodeRange,
+      setSelection,
+      setVisibleNodesOverride,
+      drillDown,
       toggleExpand,
       expandNode,
       collapseNode,
@@ -282,11 +476,9 @@ function VisualJson({
 }
 
 // src/tree-view.tsx
-import { useState as useState4, useMemo as useMemo2, useRef as useRef4, useCallback as useCallback3, useEffect as useEffect3 } from "react";
+import { useState as useState4, useMemo as useMemo3, useRef as useRef4, useCallback as useCallback3, useEffect as useEffect3 } from "react";
 import {
-  removeNode,
-  getPropertySchema,
-  validateNode,
+  removeNode as removeNode3,
   duplicateNode,
   changeType,
   toJson as toJson2
@@ -404,96 +596,199 @@ function getDisplayKey(node, state) {
   return node.key;
 }
 
-// src/get-visible-nodes.ts
-function getVisibleNodes(root, isExpanded) {
-  const result = [];
-  function walk(node) {
-    result.push(node);
-    if (isExpanded(node.id) && (node.type === "object" || node.type === "array")) {
-      for (const child of node.children) {
-        walk(child);
-      }
-    }
-  }
-  walk(root);
-  return result;
-}
+// src/use-drag-drop.ts
+import { useState as useState3, useCallback as useCallback2, useRef as useRef3, useMemo as useMemo2 } from "react";
+import {
+  removeNode as removeNode2,
+  insertNode,
+  reorderChildrenMulti,
+  isDescendant
+} from "@visual-json/core";
+
+// src/theme.ts
+var DEFAULT_CSS_VARS = {
+  "--vj-bg": "#1e1e1e",
+  "--vj-bg-panel": "#252526",
+  "--vj-bg-hover": "#2a2d2e",
+  "--vj-bg-selected": "#2a5a1e",
+  "--vj-bg-selected-muted": "#2a2d2e",
+  "--vj-bg-match": "#3a3520",
+  "--vj-bg-match-active": "#51502b",
+  "--vj-border": "#333333",
+  "--vj-border-subtle": "#2a2a2a",
+  "--vj-text": "#cccccc",
+  "--vj-text-muted": "#888888",
+  "--vj-text-dim": "#666666",
+  "--vj-text-dimmer": "#555555",
+  "--vj-string": "#ce9178",
+  "--vj-number": "#b5cea8",
+  "--vj-boolean": "#569cd6",
+  "--vj-accent": "#007acc",
+  "--vj-accent-muted": "#094771",
+  "--vj-input-bg": "#3c3c3c",
+  "--vj-input-border": "#555555",
+  "--vj-error": "#f48771",
+  "--vj-font": "monospace",
+  "--vj-input-font-size": "13px"
+};
 
 // src/use-drag-drop.ts
-import { useState as useState3, useCallback as useCallback2, useRef as useRef3 } from "react";
-import { reorderChildren, moveNode } from "@visual-json/core";
+var EMPTY_SET = Object.freeze(/* @__PURE__ */ new Set());
 var INITIAL_DRAG_STATE = {
-  draggedNodeId: null,
+  draggedNodeIds: EMPTY_SET,
   dropTargetNodeId: null,
   dropPosition: null
 };
-function useDragDrop() {
+function sortByTreeOrder(root, ids) {
+  const result = [];
+  function walk(node) {
+    if (ids.has(node.id)) result.push(node.id);
+    for (const child of node.children) walk(child);
+  }
+  walk(root);
+  return result;
+}
+function setMultiDragImage(e, count) {
+  const ghost = document.createElement("div");
+  ghost.textContent = `${count} selected`;
+  const root = document.querySelector("[data-form-container], [role='tree']");
+  const cs = root ? getComputedStyle(root) : null;
+  const bg = cs?.getPropertyValue("--vj-bg-selected").trim() || DEFAULT_CSS_VARS["--vj-bg-selected"];
+  const fg = cs?.getPropertyValue("--vj-text-selected").trim() || cs?.getPropertyValue("--vj-text").trim() || DEFAULT_CSS_VARS["--vj-text"];
+  const font = cs?.getPropertyValue("--vj-font").trim() || DEFAULT_CSS_VARS["--vj-font"];
+  ghost.style.cssText = [
+    "position:fixed",
+    "top:-1000px",
+    "left:-1000px",
+    "padding:4px 12px",
+    `background:${bg}`,
+    `color:${fg}`,
+    `font-family:${font}`,
+    "font-size:13px",
+    "border-radius:4px",
+    "white-space:nowrap",
+    "pointer-events:none"
+  ].join(";");
+  document.body.appendChild(ghost);
+  e.dataTransfer.setDragImage(ghost, 0, 14);
+  requestAnimationFrame(() => ghost.remove());
+}
+function useDragDrop(visibleNodes, selectedNodeIds) {
   const { state, actions } = useStudio();
   const [dragState, setDragState] = useState3(INITIAL_DRAG_STATE);
   const dragStateRef = useRef3(dragState);
   dragStateRef.current = dragState;
-  const handleDragStart = useCallback2((nodeId) => {
-    setDragState({
-      draggedNodeId: nodeId,
-      dropTargetNodeId: null,
-      dropPosition: null
-    });
-  }, []);
-  const handleDragOver = useCallback2(
+  const visibleNodeIndexMap = useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    visibleNodes.forEach((n, i) => map.set(n.id, i));
+    return map;
+  }, [visibleNodes]);
+  const handleDragStart = useCallback2(
+    (nodeId) => {
+      let ids;
+      if (selectedNodeIds.size > 0 && selectedNodeIds.has(nodeId)) {
+        ids = selectedNodeIds;
+      } else {
+        ids = /* @__PURE__ */ new Set([nodeId]);
+      }
+      setDragState({
+        draggedNodeIds: ids,
+        dropTargetNodeId: null,
+        dropPosition: null
+      });
+    },
+    [selectedNodeIds]
+  );
+  const rawDragOver = useCallback2(
     (nodeId, position) => {
+      const draggedIds = dragStateRef.current.draggedNodeIds;
+      for (const draggedId of draggedIds) {
+        if (nodeId === draggedId || isDescendant(state.tree, nodeId, draggedId)) {
+          return;
+        }
+      }
       setDragState((prev) => ({
         ...prev,
         dropTargetNodeId: nodeId,
         dropPosition: position
       }));
     },
-    []
+    [state.tree]
+  );
+  const handleDragOver = useCallback2(
+    (nodeId, position) => {
+      if (position === "before") {
+        const idx = visibleNodeIndexMap.get(nodeId);
+        if (idx !== void 0 && idx > 0) {
+          rawDragOver(visibleNodes[idx - 1].id, "after");
+          return;
+        }
+      }
+      rawDragOver(nodeId, position);
+    },
+    [visibleNodes, visibleNodeIndexMap, rawDragOver]
   );
   const handleDragEnd = useCallback2(() => {
     setDragState(INITIAL_DRAG_STATE);
   }, []);
   const handleDrop = useCallback2(() => {
-    const { draggedNodeId, dropTargetNodeId, dropPosition } = dragStateRef.current;
-    if (!draggedNodeId || !dropTargetNodeId || !dropPosition) return;
-    const draggedNode = state.tree.nodesById.get(draggedNodeId);
+    const { draggedNodeIds, dropTargetNodeId, dropPosition } = dragStateRef.current;
+    if (draggedNodeIds.size === 0 || !dropTargetNodeId || !dropPosition) return;
     const targetNode = state.tree.nodesById.get(dropTargetNodeId);
-    if (!draggedNode || !targetNode) return;
-    if (draggedNode.parentId && draggedNode.parentId === targetNode.parentId) {
-      const parent = state.tree.nodesById.get(draggedNode.parentId);
-      if (parent) {
-        const fromIndex = parent.children.findIndex(
-          (c) => c.id === draggedNodeId
-        );
-        let toIndex = parent.children.findIndex(
-          (c) => c.id === dropTargetNodeId
-        );
-        if (dropPosition === "after") toIndex++;
-        if (fromIndex < toIndex) toIndex--;
-        if (fromIndex !== toIndex && fromIndex >= 0 && toIndex >= 0) {
-          const newTree = reorderChildren(
-            state.tree,
-            parent.id,
-            fromIndex,
-            toIndex
-          );
-          actions.setTree(newTree);
+    if (!targetNode || !targetNode.parentId) return;
+    for (const id of draggedNodeIds) {
+      if (isDescendant(state.tree, dropTargetNodeId, id)) return;
+    }
+    const targetParentId = targetNode.parentId;
+    const targetParent = state.tree.nodesById.get(targetParentId);
+    if (!targetParent) return;
+    const parentChildren = targetParent.children;
+    const orderedDragIds = parentChildren.filter((c) => draggedNodeIds.has(c.id)).map((c) => c.id);
+    const allSameParent = orderedDragIds.length === draggedNodeIds.size && [...draggedNodeIds].every((id) => {
+      const n = state.tree.nodesById.get(id);
+      return n?.parentId === targetParentId;
+    });
+    if (allSameParent) {
+      const newTree = reorderChildrenMulti(
+        state.tree,
+        targetParentId,
+        orderedDragIds,
+        dropTargetNodeId,
+        dropPosition
+      );
+      actions.setTree(newTree);
+    } else {
+      const orderedIds = sortByTreeOrder(state.tree.root, draggedNodeIds);
+      const draggedNodes = orderedIds.map((id) => state.tree.nodesById.get(id)).filter((n) => !!n && n.parentId !== null).map((n) => structuredClone(n));
+      let newTree = state.tree;
+      for (const id of [...orderedIds].reverse()) {
+        if (newTree.nodesById.has(id)) {
+          newTree = removeNode2(newTree, id);
         }
       }
-    } else if (targetNode.parentId) {
-      const newParent = state.tree.nodesById.get(targetNode.parentId);
-      if (newParent) {
-        let toIndex = newParent.children.findIndex(
-          (c) => c.id === dropTargetNodeId
-        );
-        if (dropPosition === "after") toIndex++;
-        const newTree = moveNode(
-          state.tree,
-          draggedNodeId,
-          newParent.id,
-          toIndex
+      const updatedTarget = newTree.nodesById.get(dropTargetNodeId);
+      if (!updatedTarget || !updatedTarget.parentId) {
+        setDragState(INITIAL_DRAG_STATE);
+        return;
+      }
+      const updatedParent = newTree.nodesById.get(updatedTarget.parentId);
+      if (!updatedParent) {
+        setDragState(INITIAL_DRAG_STATE);
+        return;
+      }
+      let insertIdx = updatedParent.children.findIndex(
+        (c) => c.id === dropTargetNodeId
+      );
+      if (dropPosition === "after") insertIdx++;
+      for (let i = 0; i < draggedNodes.length; i++) {
+        newTree = insertNode(
+          newTree,
+          updatedParent.id,
+          draggedNodes[i],
+          insertIdx + i
         );
-        actions.setTree(newTree);
       }
+      actions.setTree(newTree);
     }
     setDragState(INITIAL_DRAG_STATE);
   }, [state.tree, actions]);
@@ -515,6 +810,7 @@ function TreeNodeRow({
   showValues,
   showCounts,
   isFocused,
+  onSelectRange,
   onDragStart,
   onDragOver,
   onDragEnd,
@@ -522,19 +818,15 @@ function TreeNodeRow({
   onContextMenu
 }) {
   const { state, actions } = useStudio();
-  const isSelected = state.selectedNodeId === node.id;
+  const isSelected = state.selectedNodeIds.has(node.id);
   const isExpanded = state.expandedNodeIds.has(node.id);
   const isContainer = node.type === "object" || node.type === "array";
   const [hovered, setHovered] = useState4(false);
   const isRoot = node.parentId === null;
   const isSearchMatch = state.searchMatchNodeIds.has(node.id);
   const isActiveMatch = state.searchMatches.length > 0 && state.searchMatches[state.searchMatchIndex]?.nodeId === node.id;
-  const schema = state.schema;
-  const nodeSchema = schema ? getPropertySchema(schema, node.path) : void 0;
-  const validation = nodeSchema ? validateNode(node, nodeSchema) : null;
-  const hasError = validation ? !validation.valid : false;
   const isDragTarget = dragState.dropTargetNodeId === node.id;
-  const isDraggedNode = dragState.draggedNodeId === node.id;
+  const isDraggedNode = dragState.draggedNodeIds.has(node.id);
   function displayValue() {
     if (isContainer) {
       return node.type === "array" ? `[${node.children.length}]` : `{${node.children.length}}`;
@@ -550,12 +842,12 @@ function TreeNodeRow({
     const position = e.clientY < midY ? "before" : "after";
     onDragOver(node.id, position);
   }
-  let borderTop = "none";
-  let borderBottom = "none";
+  let borderTopColor = "transparent";
+  let borderBottomColor = "transparent";
   if (isDragTarget && dragState.dropPosition === "before") {
-    borderTop = "2px solid var(--vj-accent, #007acc)";
+    borderTopColor = "var(--vj-accent, #007acc)";
   } else if (isDragTarget && dragState.dropPosition === "after") {
-    borderBottom = "2px solid var(--vj-accent, #007acc)";
+    borderBottomColor = "var(--vj-accent, #007acc)";
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
@@ -564,13 +856,24 @@ function TreeNodeRow({
         role: "treeitem",
         "aria-selected": isSelected,
         "aria-expanded": isContainer ? isExpanded : void 0,
-        onClick: () => actions.selectNode(node.id),
+        onClick: (e) => {
+          if (e.shiftKey) {
+            onSelectRange(node.id);
+          } else if (e.metaKey || e.ctrlKey) {
+            actions.toggleNodeSelection(node.id);
+          } else {
+            actions.selectAndDrillDown(node.id);
+          }
+        },
         onMouseEnter: () => setHovered(true),
         onMouseLeave: () => setHovered(false),
         onContextMenu: (e) => onContextMenu(e, node),
         draggable: !isRoot,
         onDragStart: (e) => {
           e.dataTransfer.effectAllowed = "move";
+          if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
+            setMultiDragImage(e, state.selectedNodeIds.size);
+          }
           onDragStart(node.id);
         },
         onDragOver: handleDragOverEvent,
@@ -584,15 +887,16 @@ function TreeNodeRow({
           display: "flex",
           alignItems: "center",
           gap: 6,
-          padding: "3px 8px",
+          padding: "1px 8px",
           paddingLeft: 8 + depth * 16,
           cursor: "pointer",
           backgroundColor: isSelected ? isFocused ? "var(--vj-bg-selected, #2a5a1e)" : "var(--vj-bg-selected-muted, var(--vj-bg-hover, #2a2d2e))" : isActiveMatch ? "var(--vj-bg-match-active, #51502b)" : isSearchMatch ? "var(--vj-bg-match, #3a3520)" : hovered ? "var(--vj-bg-hover, #2a2d2e)" : "transparent",
           minHeight: 28,
           userSelect: "none",
           opacity: isDraggedNode ? 0.4 : 1,
-          borderTop,
-          borderBottom,
+          borderTop: `2px solid ${borderTopColor}`,
+          borderBottom: `2px solid ${borderBottomColor}`,
+          boxSizing: "border-box",
           color: isSelected && isFocused ? "var(--vj-text-selected, var(--vj-text, #cccccc))" : "var(--vj-text, #cccccc)"
         },
         children: [
@@ -675,6 +979,7 @@ function TreeNodeRow({
         showValues,
         showCounts,
         isFocused,
+        onSelectRange,
         onDragStart,
         onDragOver,
         onDragEnd,
@@ -692,25 +997,34 @@ function TreeView({
 }) {
   const { state, actions } = useStudio();
   const containerRef = useRef4(null);
+  const visibleNodes = useMemo3(
+    () => getVisibleNodes(state.tree.root, (id) => state.expandedNodeIds.has(id)),
+    [state.tree.root, state.expandedNodeIds]
+  );
   const {
     dragState,
     handleDragStart,
     handleDragOver,
     handleDragEnd,
     handleDrop
-  } = useDragDrop();
-  const [contextMenu, setContextMenu] = useState4(null);
-  const visibleNodes = useMemo2(
-    () => getVisibleNodes(state.tree.root, (id) => state.expandedNodeIds.has(id)),
-    [state.tree.root, state.expandedNodeIds]
+  } = useDragDrop(visibleNodes, state.selectedNodeIds);
+  const handleSelectRange = useCallback3(
+    (nodeId) => {
+      actions.setVisibleNodesOverride(visibleNodes);
+      actions.selectNodeRange(nodeId);
+    },
+    [visibleNodes, actions]
   );
+  const [contextMenu, setContextMenu] = useState4(null);
   const handleContextMenu = useCallback3(
     (e, node) => {
       e.preventDefault();
-      actions.selectNode(node.id);
+      if (!state.selectedNodeIds.has(node.id)) {
+        actions.selectAndDrillDown(node.id);
+      }
       setContextMenu({ x: e.clientX, y: e.clientY, node });
     },
-    [actions]
+    [actions, state.selectedNodeIds]
   );
   const buildContextMenuItems = useCallback3(
     (node) => {
@@ -789,7 +1103,7 @@ function TreeView({
         items.push({
           label: "Delete",
           action: () => {
-            const newTree = removeNode(state.tree, node.id);
+            const newTree = removeNode3(state.tree, node.id);
             actions.setTree(newTree);
           }
         });
@@ -801,19 +1115,31 @@ function TreeView({
   const handleKeyDown = useCallback3(
     (e) => {
       const currentIndex = visibleNodes.findIndex(
-        (n) => n.id === state.selectedNodeId
+        (n) => n.id === state.focusedNodeId
       );
       switch (e.key) {
         case "ArrowDown": {
           e.preventDefault();
           const next = visibleNodes[currentIndex + 1];
-          if (next) actions.selectNode(next.id);
+          if (next) {
+            if (e.shiftKey) {
+              handleSelectRange(next.id);
+            } else {
+              actions.selectNode(next.id);
+            }
+          }
           break;
         }
         case "ArrowUp": {
           e.preventDefault();
           const prev = visibleNodes[currentIndex - 1];
-          if (prev) actions.selectNode(prev.id);
+          if (prev) {
+            if (e.shiftKey) {
+              handleSelectRange(prev.id);
+            } else {
+              actions.selectNode(prev.id);
+            }
+          }
           break;
         }
         case "ArrowRight": {
@@ -840,17 +1166,47 @@ function TreeView({
           }
           break;
         }
+        case "a": {
+          if (e.metaKey || e.ctrlKey) {
+            e.preventDefault();
+            const ids = computeSelectAllIds(
+              state.tree,
+              state.focusedNodeId,
+              state.selectedNodeIds
+            );
+            if (ids) {
+              actions.setSelection(
+                state.focusedNodeId,
+                ids,
+                state.focusedNodeId
+              );
+            }
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          if (state.selectedNodeIds.size > 1 && state.focusedNodeId) {
+            actions.selectNode(state.focusedNodeId);
+          } else {
+            actions.setSelection(null, /* @__PURE__ */ new Set(), null);
+          }
+          break;
+        }
         case "Delete":
         case "Backspace": {
           e.preventDefault();
-          const toDelete = currentIndex >= 0 ? visibleNodes[currentIndex] : null;
-          if (toDelete && toDelete.parentId) {
-            const nextSelect = visibleNodes[currentIndex + 1] ?? visibleNodes[currentIndex - 1];
-            const newTree = removeNode(state.tree, toDelete.id);
-            actions.setTree(newTree);
-            if (nextSelect && nextSelect.id !== toDelete.id) {
-              actions.selectNode(nextSelect.id);
-            }
+          const { newTree, nextFocusId } = deleteSelectedNodes(
+            state.tree,
+            state.selectedNodeIds,
+            visibleNodes
+          );
+          if (newTree === state.tree) break;
+          actions.setTree(newTree);
+          if (nextFocusId) {
+            actions.selectNode(nextFocusId);
+          } else {
+            actions.setSelection(null, /* @__PURE__ */ new Set(), null);
           }
           break;
         }
@@ -858,23 +1214,25 @@ function TreeView({
     },
     [
       visibleNodes,
-      state.selectedNodeId,
+      state.focusedNodeId,
+      state.selectedNodeIds,
       state.expandedNodeIds,
       state.tree,
-      actions
+      actions,
+      handleSelectRange
     ]
   );
   const [isFocused, setIsFocused] = useState4(false);
   useEffect3(() => {
-    if (state.selectedNodeId && containerRef.current) {
+    if (state.focusedNodeId && containerRef.current) {
       const el = containerRef.current.querySelector(
-        `[data-node-id="${state.selectedNodeId}"]`
+        `[data-node-id="${state.focusedNodeId}"]`
       );
       if (el) {
         el.scrollIntoView({ block: "nearest" });
       }
     }
-  }, [state.selectedNodeId]);
+  }, [state.focusedNodeId]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx3(
       "div",
@@ -904,6 +1262,7 @@ function TreeView({
             showValues,
             showCounts,
             isFocused,
+            onSelectRange: handleSelectRange,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
             onDragEnd: handleDragEnd,
@@ -926,25 +1285,25 @@ function TreeView({
 }
 
 // src/form-view.tsx
-import { useState as useState6, useCallback as useCallback5, useRef as useRef6, useEffect as useEffect5, useMemo as useMemo4 } from "react";
+import { useState as useState7, useCallback as useCallback6, useRef as useRef7, useEffect as useEffect6, useMemo as useMemo6 } from "react";
 import {
   setValue,
   setKey,
   addProperty,
-  removeNode as removeNode2,
-  getPropertySchema as getPropertySchema2,
+  removeNode as removeNode4,
+  getPropertySchema,
   resolveRef
 } from "@visual-json/core";
 
 // src/breadcrumbs.tsx
-import { useState as useState5, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback4, useMemo as useMemo3 } from "react";
+import { useState as useState5, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback4, useMemo as useMemo4 } from "react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var MAX_SUGGESTIONS = 20;
 var DROPDOWN_MAX_HEIGHT = 200;
 function Breadcrumbs({ className }) {
   const { state, actions } = useStudio();
-  const selectedNode = state.selectedNodeId ? state.tree.nodesById.get(state.selectedNodeId) : null;
-  const currentPath = selectedNode?.path ?? "/";
+  const drillDownNode = state.drillDownNodeId ? state.tree.nodesById.get(state.drillDownNodeId) : null;
+  const currentPath = drillDownNode?.path ?? "/";
   const [inputValue, setInputValue] = useState5(currentPath);
   const [open, setOpen] = useState5(false);
   const [highlightIndex, setHighlightIndex] = useState5(0);
@@ -954,7 +1313,7 @@ function Breadcrumbs({ className }) {
   useEffect4(() => {
     setInputValue(currentPath);
   }, [currentPath]);
-  const suggestions = useMemo3(() => {
+  const suggestions = useMemo4(() => {
     if (!open) return [];
     const query = inputValue.toLowerCase();
     const matches = [];
@@ -974,7 +1333,7 @@ function Breadcrumbs({ className }) {
     (path) => {
       for (const [id, node] of state.tree.nodesById) {
         if (node.path === path) {
-          actions.selectNode(id);
+          actions.selectAndDrillDown(id);
           break;
         }
       }
@@ -1062,8 +1421,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",
@@ -1118,88 +1477,260 @@ function Breadcrumbs({ className }) {
   );
 }
 
-// src/form-view.tsx
+// src/enum-input.tsx
+import {
+  useState as useState6,
+  useRef as useRef6,
+  useEffect as useEffect5,
+  useCallback as useCallback5,
+  useMemo as useMemo5
+} from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function getResolvedSchema(schema, rootSchema, path) {
-  if (!schema) return void 0;
-  const raw = getPropertySchema2(schema, path, rootSchema);
-  if (!raw) return void 0;
-  return 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] = useState6(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 = useRef6(null);
-  const keyRef = useRef6(null);
+  const [inputValue, setInputValue] = useState6(value);
+  const [open, setOpen] = useState6(false);
+  const [highlightIndex, setHighlightIndex] = useState6(0);
+  const listRef = useRef6(null);
+  const wrapperRef = useRef6(null);
   useEffect5(() => {
-    if (!isEditing) return;
-    if (!isContainer) {
-      const hasValue = node.value !== null && node.value !== void 0 && node.value !== "";
-      if (hasValue && valueRef.current) {
-        valueRef.current.focus();
-      } else if (keyRef.current) {
-        keyRef.current.focus();
+    setInputValue(value);
+  }, [value]);
+  const suggestions = useMemo5(
+    () => enumValues.map((v) => String(v)),
+    [enumValues]
+  );
+  useEffect5(() => {
+    setHighlightIndex(0);
+  }, [suggestions]);
+  const selectValue = useCallback5(
+    (val) => {
+      onValueChange(val);
+      setInputValue(val);
+      setOpen(false);
+    },
+    [onValueChange]
+  );
+  const handleKeyDown = useCallback5(
+    (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]
+  );
+  useEffect5(() => {
+    const el = listRef.current;
+    if (!el || !open) return;
+    const item = el.children[highlightIndex];
+    item?.scrollIntoView({ block: "nearest" });
+  }, [highlightIndex, open]);
+  useEffect5(() => {
+    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__ */ jsxs3(
+    "div",
+    {
+      ref: wrapperRef,
+      style: { position: "relative", flex: 1, minWidth: 0 },
+      children: [
+        /* @__PURE__ */ jsx5(
+          "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__ */ jsx5(
+          "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__ */ jsxs3(
+              "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__ */ jsx5("span", { style: { width: 14, flexShrink: 0, fontSize: 12 }, children: s === value ? "\u2713" : "" }),
+                  s
+                ]
+              },
+              s
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/form-view.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function getResolvedSchema(schema, rootSchema, path) {
+  if (!schema) return void 0;
+  const raw = getPropertySchema(schema, path, rootSchema);
+  if (!raw) return void 0;
+  return 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] = useState7(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 = useRef7(null);
+  const keyRef = useRef7(null);
+  useEffect6(() => {
+    if (!isEditing) return;
+    if (!isContainer) {
+      const hasValue = node.value !== null && node.value !== void 0 && node.value !== "";
+      if (hasValue && valueRef.current) {
+        valueRef.current.focus();
+      } else if (keyRef.current) {
+        keyRef.current.focus();
       }
     } else if (keyRef.current) {
       keyRef.current.focus();
     }
   }, [isEditing, isContainer, node.value]);
-  const handleValueChange = useCallback5(
+  const handleValueChange = useCallback6(
     (newValue) => {
       let parsed;
       if (propSchema?.type === "boolean" || newValue === "true" || newValue === "false") {
@@ -1217,38 +1748,40 @@ function FormField({
     },
     [state.tree, node.id, node.type, actions, propSchema]
   );
-  const handleKeyChange = useCallback5(
+  const handleKeyChange = useCallback6(
     (newKey) => {
       const newTree = setKey(state.tree, node.id, newKey);
       actions.setTree(newTree);
     },
     [state.tree, node.id, actions]
   );
-  const handleRemove = useCallback5(() => {
-    const newTree = removeNode2(state.tree, node.id);
+  const handleRemove = useCallback6(() => {
+    const newTree = removeNode4(state.tree, node.id);
     actions.setTree(newTree);
   }, [state.tree, node.id, actions]);
-  const handleAddChild = useCallback5(() => {
+  const handleAddChild = useCallback6(() => {
     const key = node.type === "array" ? String(node.children.length) : `newKey${node.children.length}`;
     const newTree = 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__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsxs4(
         "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,
@@ -1261,26 +1794,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__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 onClick: (e) => {
@@ -1305,7 +1839,7 @@ function FormField({
                 children: "\u25B6"
               }
             ),
-            isEditing && !isRoot ? /* @__PURE__ */ jsx5(
+            isEditing && !isRoot ? /* @__PURE__ */ jsx6(
               "input",
               {
                 ref: keyRef,
@@ -1317,7 +1851,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",
@@ -1325,12 +1859,12 @@ function FormField({
                   width: `calc(${(maxDepth - depth) * 16}px + ${maxKeyLength}ch)`
                 }
               }
-            ) : /* @__PURE__ */ jsx5(
+            ) : /* @__PURE__ */ jsx6(
               "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,
@@ -1340,7 +1874,7 @@ function FormField({
                 children: isRoot ? "/" : getDisplayKey(node, state.tree)
               }
             ),
-            showDescriptions && fieldTitle && !isSelected && /* @__PURE__ */ jsx5(
+            showDescriptions && fieldTitle && !isSelected && /* @__PURE__ */ jsx6(
               "span",
               {
                 style: {
@@ -1351,7 +1885,7 @@ function FormField({
                 children: fieldTitle
               }
             ),
-            hovered && /* @__PURE__ */ jsxs3(
+            hovered && /* @__PURE__ */ jsxs4(
               "button",
               {
                 onClick: (e) => {
@@ -1373,7 +1907,7 @@ function FormField({
                 ]
               }
             ),
-            showCounts && /* @__PURE__ */ jsx5(
+            showCounts && /* @__PURE__ */ jsx6(
               "span",
               {
                 style: {
@@ -1385,7 +1919,7 @@ function FormField({
                 children: node.type === "array" ? `${node.children.length} items` : `${node.children.length} properties`
               }
             ),
-            !isRoot && isEditing && /* @__PURE__ */ jsx5(
+            !isRoot && isEditing && /* @__PURE__ */ jsx6(
               "button",
               {
                 onClick: (e) => {
@@ -1409,7 +1943,7 @@ function FormField({
           ]
         }
       ),
-      showDescriptions && description && /* @__PURE__ */ jsx5(
+      showDescriptions && description && /* @__PURE__ */ jsx6(
         "div",
         {
           style: {
@@ -1422,7 +1956,7 @@ function FormField({
           children: description
         }
       ),
-      !collapsed && /* @__PURE__ */ jsx5("div", { children: node.children.map((child) => /* @__PURE__ */ jsx5(
+      !collapsed && /* @__PURE__ */ jsx6("div", { children: node.children.map((child) => /* @__PURE__ */ jsx6(
         FormField,
         {
           node: child,
@@ -1431,7 +1965,6 @@ function FormField({
           depth: depth + 1,
           showDescriptions,
           showCounts,
-          formSelectedNodeId,
           editingNodeId,
           collapsedIds,
           maxKeyLength,
@@ -1452,13 +1985,16 @@ function FormField({
   }
   const displayValue = getDisplayValue(node);
   const valueColor = getValueColor(node);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "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,
@@ -1471,27 +2007,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__ */ jsx5("span", { style: { width: 16, flexShrink: 0 } }),
-        isEditing && parentIsObject ? /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("span", { style: { width: 16, flexShrink: 0 } }),
+        isEditing && parentIsObject ? /* @__PURE__ */ jsx6(
           "input",
           {
             ref: keyRef,
@@ -1509,19 +2046,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__ */ jsx5(
+        ) : /* @__PURE__ */ jsx6(
           "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",
@@ -1530,7 +2067,7 @@ function FormField({
             children: getDisplayKey(node, state.tree)
           }
         ),
-        isRequired && !isSelected && /* @__PURE__ */ jsx5(
+        isRequired && !isSelected && /* @__PURE__ */ jsx6(
           "span",
           {
             style: {
@@ -1541,7 +2078,7 @@ function FormField({
             children: "*"
           }
         ),
-        isEditing ? /* @__PURE__ */ jsx5(
+        isEditing ? /* @__PURE__ */ jsx6(
           "div",
           {
             style: {
@@ -1560,12 +2097,12 @@ function FormField({
               valueColor
             )
           }
-        ) : /* @__PURE__ */ jsx5(
+        ) : /* @__PURE__ */ jsx6(
           "span",
           {
             style: {
               color: valueColor,
-              fontSize: 13,
+              fontSize: "var(--vj-input-font-size, 13px)",
               fontFamily: "var(--vj-font, monospace)",
               overflow: "hidden",
               textOverflow: "ellipsis",
@@ -1575,7 +2112,7 @@ function FormField({
             children: displayValue
           }
         ),
-        isEditing && /* @__PURE__ */ jsx5(
+        isEditing && /* @__PURE__ */ jsx6(
           "button",
           {
             onClick: (e) => {
@@ -1606,54 +2143,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__ */ jsxs3(
-      "select",
+    return /* @__PURE__ */ jsx6(
+      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__ */ jsx5("option", { value: "true", children: "true" }),
-          /* @__PURE__ */ jsx5("option", { value: "false", children: "false" })
-        ]
+        onValueChange: handleValueChange,
+        inputRef,
+        inputStyle
       }
     );
   }
   if (hasEnumValues && propSchema?.enum) {
-    return /* @__PURE__ */ jsxs3(
-      "select",
+    return /* @__PURE__ */ jsx6(
+      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__ */ jsx5("option", { value: displayValue, children: displayValue || "(empty)" }),
-          propSchema.enum.map((v, i) => /* @__PURE__ */ jsx5("option", { value: String(v), children: String(v) }, i))
-        ]
+        onValueChange: handleValueChange,
+        inputRef,
+        inputStyle
       }
     );
   }
   if (node.type === "null") {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       "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
         },
@@ -1661,7 +2188,7 @@ function renderEditInput(node, propSchema, displayValue, handleValueChange, inpu
       }
     );
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "input",
     {
       ref: inputRef,
@@ -1686,35 +2213,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] = useState6(
-    null
-  );
-  const [editingNodeId, setEditingNodeId] = useState6(null);
-  const preEditTreeRef = useRef6(null);
-  const [collapsedIds, setCollapsedIds] = useState6(
+  const drillDownNode = state.drillDownNodeId ? state.tree.nodesById.get(state.drillDownNodeId) : null;
+  const displayNode = drillDownNode ?? state.tree.root;
+  const [editingNodeId, setEditingNodeId] = useState7(null);
+  const preEditTreeRef = useRef7(null);
+  const [collapsedIds, setCollapsedIds] = useState7(
     () => /* @__PURE__ */ new Set()
   );
-  const containerRef = useRef6(null);
-  const [isFocused, setIsFocused] = useState6(false);
-  const {
-    dragState,
-    handleDragStart,
-    handleDragOver,
-    handleDragEnd,
-    handleDrop
-  } = useDragDrop();
-  useEffect5(() => {
-    setFormSelectedNodeId(null);
+  const containerRef = useRef7(null);
+  const [isFocused, setIsFocused] = useState7(false);
+  useEffect6(() => {
     setEditingNodeId(null);
     setCollapsedIds(/* @__PURE__ */ new Set());
   }, [displayNode.id]);
-  const visibleNodes = useMemo4(
+  const visibleNodes = useMemo6(
     () => getVisibleNodes(displayNode, (id) => !collapsedIds.has(id)),
     [displayNode, collapsedIds]
   );
-  const { maxKeyLength, maxDepth } = useMemo4(() => {
+  const {
+    dragState,
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd,
+    handleDrop
+  } = useDragDrop(visibleNodes, state.selectedNodeIds);
+  useEffect6(() => {
+    actions.setVisibleNodesOverride(visibleNodes);
+    return () => actions.setVisibleNodesOverride(null);
+  }, [visibleNodes, actions]);
+  const { maxKeyLength, maxDepth } = useMemo6(() => {
     let maxKey = 1;
     let maxD = 0;
     const baseSegments = displayNode.path === "/" ? 0 : displayNode.path.split("/").filter(Boolean).length;
@@ -1727,11 +2254,21 @@ function FormView({
     }
     return { maxKeyLength: maxKey, maxDepth: maxD };
   }, [visibleNodes, displayNode.path, state.tree]);
-  const handleSelect = useCallback5((nodeId) => {
-    setFormSelectedNodeId(nodeId);
-    setEditingNodeId(null);
-  }, []);
-  const handleToggleCollapse = useCallback5((nodeId) => {
+  const handleSelect = useCallback6(
+    (nodeId, e) => {
+      setEditingNodeId(null);
+      if (e.shiftKey) {
+        actions.setVisibleNodesOverride(visibleNodes);
+        actions.selectNodeRange(nodeId);
+      } else if (e.metaKey || e.ctrlKey) {
+        actions.toggleNodeSelection(nodeId);
+      } else {
+        actions.selectNode(nodeId);
+      }
+    },
+    [actions, visibleNodes]
+  );
+  const handleToggleCollapse = useCallback6((nodeId) => {
     setCollapsedIds((prev) => {
       const next = new Set(prev);
       if (next.has(nodeId)) {
@@ -1742,14 +2279,14 @@ function FormView({
       return next;
     });
   }, []);
-  const handleStartEditing = useCallback5(
+  const handleStartEditing = useCallback6(
     (nodeId) => {
       preEditTreeRef.current = state.tree;
       setEditingNodeId(nodeId);
     },
     [state.tree]
   );
-  const scrollToNode = useCallback5((nodeId) => {
+  const scrollToNode = useCallback6((nodeId) => {
     requestAnimationFrame(() => {
       const el = containerRef.current?.querySelector(
         `[data-form-node-id="${nodeId}"]`
@@ -1757,7 +2294,7 @@ function FormView({
       el?.scrollIntoView({ block: "nearest" });
     });
   }, []);
-  const handleKeyDown = useCallback5(
+  const handleKeyDown = useCallback6(
     (e) => {
       if (editingNodeId) {
         if (e.key === "Escape") {
@@ -1778,15 +2315,23 @@ function FormView({
         }
         return;
       }
-      const currentIndex = visibleNodes.findIndex(
-        (n) => n.id === formSelectedNodeId
+      let currentIndex = visibleNodes.findIndex(
+        (n) => n.id === state.focusedNodeId
       );
+      if (currentIndex === -1 && visibleNodes.length > 0) {
+        currentIndex = 0;
+      }
       switch (e.key) {
         case "ArrowDown": {
           e.preventDefault();
           const next = visibleNodes[currentIndex + 1];
           if (next) {
-            setFormSelectedNodeId(next.id);
+            if (e.shiftKey) {
+              actions.setVisibleNodesOverride(visibleNodes);
+              actions.selectNodeRange(next.id);
+            } else {
+              actions.selectNode(next.id);
+            }
             scrollToNode(next.id);
           }
           break;
@@ -1795,7 +2340,12 @@ function FormView({
           e.preventDefault();
           const prev = visibleNodes[currentIndex - 1];
           if (prev) {
-            setFormSelectedNodeId(prev.id);
+            if (e.shiftKey) {
+              actions.setVisibleNodesOverride(visibleNodes);
+              actions.selectNodeRange(prev.id);
+            } else {
+              actions.selectNode(prev.id);
+            }
             scrollToNode(prev.id);
           }
           break;
@@ -1811,7 +2361,7 @@ function FormView({
                 return next;
               });
             } else if (node.children.length > 0) {
-              setFormSelectedNodeId(node.children[0].id);
+              actions.selectNode(node.children[0].id);
               scrollToNode(node.children[0].id);
             }
           }
@@ -1833,7 +2383,7 @@ function FormView({
               (n) => n.id === current.parentId
             );
             if (parentInVisible) {
-              setFormSelectedNodeId(parentInVisible.id);
+              actions.selectNode(parentInVisible.id);
               scrollToNode(parentInVisible.id);
             }
           }
@@ -1841,30 +2391,54 @@ function FormView({
         }
         case "Enter": {
           e.preventDefault();
-          if (formSelectedNodeId) {
+          if (state.focusedNodeId) {
             preEditTreeRef.current = state.tree;
-            setEditingNodeId(formSelectedNodeId);
+            actions.selectNode(state.focusedNodeId);
+            setEditingNodeId(state.focusedNodeId);
+          }
+          break;
+        }
+        case "a": {
+          if (e.metaKey || e.ctrlKey) {
+            e.preventDefault();
+            const ids = computeSelectAllIds(
+              state.tree,
+              state.focusedNodeId,
+              state.selectedNodeIds
+            );
+            if (ids) {
+              actions.setSelection(
+                state.focusedNodeId,
+                ids,
+                state.focusedNodeId
+              );
+            }
           }
           break;
         }
         case "Escape": {
           e.preventDefault();
-          setEditingNodeId(null);
+          if (state.selectedNodeIds.size > 1 && state.focusedNodeId) {
+            actions.selectNode(state.focusedNodeId);
+          } else {
+            actions.setSelection(null, /* @__PURE__ */ new Set(), null);
+          }
           break;
         }
         case "Delete":
         case "Backspace": {
           e.preventDefault();
-          const toDelete = currentIndex >= 0 ? visibleNodes[currentIndex] : null;
-          if (toDelete && toDelete.parentId) {
-            const nextSelect = visibleNodes[currentIndex + 1] ?? visibleNodes[currentIndex - 1];
-            const newTree = removeNode2(state.tree, toDelete.id);
-            actions.setTree(newTree);
-            if (nextSelect && nextSelect.id !== toDelete.id) {
-              setFormSelectedNodeId(nextSelect.id);
-            } else {
-              setFormSelectedNodeId(null);
-            }
+          const { newTree, nextFocusId } = deleteSelectedNodes(
+            state.tree,
+            state.selectedNodeIds,
+            visibleNodes
+          );
+          if (newTree === state.tree) break;
+          actions.setTree(newTree);
+          if (nextFocusId) {
+            actions.selectNode(nextFocusId);
+          } else {
+            actions.setSelection(null, /* @__PURE__ */ new Set(), null);
           }
           break;
         }
@@ -1872,7 +2446,8 @@ function FormView({
     },
     [
       visibleNodes,
-      formSelectedNodeId,
+      state.focusedNodeId,
+      state.selectedNodeIds,
       editingNodeId,
       collapsedIds,
       scrollToNode,
@@ -1880,7 +2455,7 @@ function FormView({
       actions
     ]
   );
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className,
@@ -1893,19 +2468,21 @@ function FormView({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "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__ */ jsx5(Breadcrumbs, {})
+            children: /* @__PURE__ */ jsx6(Breadcrumbs, {})
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "div",
           {
             ref: containerRef,
@@ -1923,7 +2500,7 @@ function FormView({
               overflow: "auto",
               outline: "none"
             },
-            children: /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsx6(
               FormField,
               {
                 node: displayNode,
@@ -1932,7 +2509,6 @@ function FormView({
                 depth: 0,
                 showDescriptions,
                 showCounts,
-                formSelectedNodeId,
                 editingNodeId,
                 collapsedIds,
                 maxKeyLength,
@@ -1956,12 +2532,12 @@ function FormView({
 }
 
 // src/search-bar.tsx
-import { useRef as useRef7, useEffect as useEffect6, useCallback as useCallback6 } from "react";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useRef as useRef8, useEffect as useEffect7, useCallback as useCallback7 } from "react";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function SearchBar({ className }) {
   const { state, actions } = useStudio();
-  const inputRef = useRef7(null);
-  const handleKeyDown = useCallback6(
+  const inputRef = useRef8(null);
+  const handleKeyDown = useCallback7(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -1979,7 +2555,7 @@ function SearchBar({ className }) {
     },
     [actions]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     function handleGlobalKeyDown(e) {
       const mod = e.metaKey || e.ctrlKey;
       if (mod && e.key === "f") {
@@ -1993,7 +2569,7 @@ function SearchBar({ className }) {
   }, []);
   const matchCount = state.searchMatches.length;
   const currentMatch = matchCount > 0 ? state.searchMatchIndex + 1 : 0;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className,
@@ -2002,11 +2578,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__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "input",
           {
             ref: inputRef,
@@ -2022,14 +2598,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__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             style: {
@@ -2039,8 +2615,8 @@ function SearchBar({ className }) {
               flexShrink: 0,
               height: 18
             },
-            children: state.searchQuery ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              /* @__PURE__ */ jsx6(
+            children: state.searchQuery ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+              /* @__PURE__ */ jsx7(
                 "span",
                 {
                   style: {
@@ -2053,7 +2629,7 @@ function SearchBar({ className }) {
                   children: matchCount > 0 ? `${currentMatch}/${matchCount}` : "0/0"
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   onClick: actions.prevSearchMatch,
@@ -2077,7 +2653,7 @@ function SearchBar({ className }) {
                   children: "\u25B2"
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   onClick: actions.nextSearchMatch,
@@ -2101,7 +2677,7 @@ function SearchBar({ className }) {
                   children: "\u25BC"
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   onClick: () => actions.setSearchQuery(""),
@@ -2124,8 +2700,8 @@ function SearchBar({ className }) {
                   children: "\xD7"
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              /* @__PURE__ */ jsx6(
+            ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   onClick: actions.expandAll,
@@ -2142,7 +2718,7 @@ function SearchBar({ className }) {
                     alignItems: "center"
                   },
                   title: "Expand all",
-                  children: /* @__PURE__ */ jsxs4(
+                  children: /* @__PURE__ */ jsxs5(
                     "svg",
                     {
                       width: "14",
@@ -2154,15 +2730,15 @@ function SearchBar({ className }) {
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
                       children: [
-                        /* @__PURE__ */ jsx6("path", { d: "M8 2v4M5 4l3-2 3 2" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M8 14v-4M5 12l3 2 3-2" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M2 8h12" })
+                        /* @__PURE__ */ jsx7("path", { d: "M8 2v4M5 4l3-2 3 2" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M8 14v-4M5 12l3 2 3-2" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M2 8h12" })
                       ]
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   onClick: actions.collapseAll,
@@ -2179,7 +2755,7 @@ function SearchBar({ className }) {
                     alignItems: "center"
                   },
                   title: "Collapse all",
-                  children: /* @__PURE__ */ jsxs4(
+                  children: /* @__PURE__ */ jsxs5(
                     "svg",
                     {
                       width: "14",
@@ -2191,9 +2767,9 @@ function SearchBar({ className }) {
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
                       children: [
-                        /* @__PURE__ */ jsx6("path", { d: "M8 5V1M5 3l3 2 3-2" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M8 11v4M5 13l3-2 3 2" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M2 8h12" })
+                        /* @__PURE__ */ jsx7("path", { d: "M8 5V1M5 3l3 2 3-2" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M8 11v4M5 13l3-2 3 2" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M2 8h12" })
                       ]
                     }
                   )
@@ -2208,31 +2784,7 @@ function SearchBar({ className }) {
 }
 
 // src/json-editor.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var DEFAULT_CSS_VARS = {
-  "--vj-bg": "#1e1e1e",
-  "--vj-bg-panel": "#252526",
-  "--vj-bg-hover": "#2a2d2e",
-  "--vj-bg-selected": "#2a5a1e",
-  "--vj-bg-selected-muted": "#2a2d2e",
-  "--vj-bg-match": "#3a3520",
-  "--vj-bg-match-active": "#51502b",
-  "--vj-border": "#333333",
-  "--vj-border-subtle": "#2a2a2a",
-  "--vj-text": "#cccccc",
-  "--vj-text-muted": "#888888",
-  "--vj-text-dim": "#666666",
-  "--vj-text-dimmer": "#555555",
-  "--vj-string": "#ce9178",
-  "--vj-number": "#b5cea8",
-  "--vj-boolean": "#569cd6",
-  "--vj-accent": "#007acc",
-  "--vj-accent-muted": "#094771",
-  "--vj-input-bg": "#3c3c3c",
-  "--vj-input-border": "#555555",
-  "--vj-error": "#f48771",
-  "--vj-font": "monospace"
-};
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function JsonEditor({
   value,
   defaultValue,
@@ -2251,15 +2803,15 @@ function JsonEditor({
 }) {
   const isControlled = value !== void 0;
   const initialValue = isControlled ? value : defaultValue ?? {};
-  const [editorKey, setEditorKey] = useState7(0);
-  const valueRef = useRef8(initialValue);
-  useEffect7(() => {
+  const [editorKey, setEditorKey] = useState8(0);
+  const valueRef = useRef9(initialValue);
+  useEffect8(() => {
     if (isControlled && value !== valueRef.current) {
       valueRef.current = value;
       setEditorKey((k) => k + 1);
     }
   }, [value, isControlled]);
-  const handleChange = useCallback7(
+  const handleChange = useCallback8(
     (newValue) => {
       valueRef.current = newValue;
       if (!readOnly) {
@@ -2277,25 +2829,35 @@ function JsonEditor({
     ...DEFAULT_CSS_VARS,
     ...style
   };
-  return /* @__PURE__ */ jsx7("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx7(
-    VisualJson,
-    {
-      value: valueRef.current,
-      onChange: readOnly ? void 0 : handleChange,
-      schema,
-      children: /* @__PURE__ */ jsx7(
-        EditorLayout,
-        {
-          treeShowValues,
-          treeShowCounts,
-          editorShowDescriptions,
-          editorShowCounts,
-          sidebarOpen
+  return /* @__PURE__ */ jsxs6("div", { className, "data-vj-root": "", style: containerStyle, children: [
+    /* @__PURE__ */ jsx8(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `@media(pointer:coarse){[data-vj-root]{--vj-input-font-size:16px}}`
         }
-      )
-    },
-    editorKey
-  ) });
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      VisualJson,
+      {
+        value: valueRef.current,
+        onChange: readOnly ? void 0 : handleChange,
+        schema,
+        children: /* @__PURE__ */ jsx8(
+          EditorLayout,
+          {
+            treeShowValues,
+            treeShowCounts,
+            editorShowDescriptions,
+            editorShowCounts,
+            sidebarOpen
+          }
+        )
+      },
+      editorKey
+    )
+  ] });
 }
 function EditorLayout({
   treeShowValues,
@@ -2304,14 +2866,14 @@ function EditorLayout({
   editorShowCounts,
   sidebarOpen
 }) {
-  const [sidebarWidth, setSidebarWidth] = useState7(280);
-  const [isNarrow, setIsNarrow] = useState7(false);
-  const [activePanel, setActivePanel] = useState7("tree");
-  const containerRef = useRef8(null);
-  const dragging = useRef8(false);
-  const startX = useRef8(0);
-  const startWidth = useRef8(0);
-  useEffect7(() => {
+  const [sidebarWidth, setSidebarWidth] = useState8(280);
+  const [isNarrow, setIsNarrow] = useState8(false);
+  const [activePanel, setActivePanel] = useState8("tree");
+  const containerRef = useRef9(null);
+  const dragging = useRef9(false);
+  const startX = useRef9(0);
+  const startWidth = useRef9(0);
+  useEffect8(() => {
     function checkWidth() {
       if (containerRef.current) {
         setIsNarrow(containerRef.current.offsetWidth < 500);
@@ -2322,7 +2884,7 @@ function EditorLayout({
     if (containerRef.current) observer.observe(containerRef.current);
     return () => observer.disconnect();
   }, []);
-  const handleMouseDown = useCallback7(
+  const handleMouseDown = useCallback8(
     (e) => {
       dragging.current = true;
       startX.current = e.clientX;
@@ -2352,7 +2914,7 @@ function EditorLayout({
   );
   if (isNarrow) {
     if (!sidebarOpen) {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         "div",
         {
           ref: containerRef,
@@ -2362,7 +2924,7 @@ function EditorLayout({
             flex: 1,
             minHeight: 0
           },
-          children: /* @__PURE__ */ jsx7("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx8("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx8(
             FormView,
             {
               showDescriptions: editorShowDescriptions,
@@ -2372,7 +2934,7 @@ function EditorLayout({
         }
       );
     }
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         ref: containerRef,
@@ -2383,7 +2945,7 @@ function EditorLayout({
           minHeight: 0
         },
         children: [
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs6(
             "div",
             {
               style: {
@@ -2393,7 +2955,7 @@ function EditorLayout({
                 backgroundColor: "var(--vj-bg-panel, #252526)"
               },
               children: [
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     onClick: () => setActivePanel("tree"),
@@ -2410,7 +2972,7 @@ function EditorLayout({
                     children: "Tree"
                   }
                 ),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     onClick: () => setActivePanel("form"),
@@ -2430,7 +2992,7 @@ function EditorLayout({
               ]
             }
           ),
-          /* @__PURE__ */ jsx7("div", { style: { flex: 1, minHeight: 0, overflow: "hidden" }, children: activePanel === "tree" ? /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsx8("div", { style: { flex: 1, minHeight: 0, overflow: "hidden" }, children: activePanel === "tree" ? /* @__PURE__ */ jsxs6(
             "div",
             {
               style: {
@@ -2439,8 +3001,8 @@ function EditorLayout({
                 height: "100%"
               },
               children: [
-                /* @__PURE__ */ jsx7(SearchBar, {}),
-                /* @__PURE__ */ jsx7("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(SearchBar, {}),
+                /* @__PURE__ */ jsx8("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx8(
                   TreeView,
                   {
                     showValues: treeShowValues,
@@ -2449,7 +3011,7 @@ function EditorLayout({
                 ) })
               ]
             }
-          ) : /* @__PURE__ */ jsx7(
+          ) : /* @__PURE__ */ jsx8(
             "div",
             {
               style: {
@@ -2457,7 +3019,7 @@ function EditorLayout({
                 flexDirection: "column",
                 height: "100%"
               },
-              children: /* @__PURE__ */ jsx7("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx8(
                 FormView,
                 {
                   showDescriptions: editorShowDescriptions,
@@ -2470,8 +3032,8 @@ function EditorLayout({
       }
     );
   }
-  return /* @__PURE__ */ jsxs5("div", { ref: containerRef, style: { display: "flex", flex: 1, minHeight: 0 }, children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6("div", { ref: containerRef, style: { display: "flex", flex: 1, minHeight: 0 }, children: [
+    /* @__PURE__ */ jsxs6(
       "div",
       {
         style: {
@@ -2483,12 +3045,12 @@ function EditorLayout({
           transition: "width 0.2s ease"
         },
         children: [
-          /* @__PURE__ */ jsx7(SearchBar, {}),
-          /* @__PURE__ */ jsx7("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx7(TreeView, { showValues: treeShowValues, showCounts: treeShowCounts }) })
+          /* @__PURE__ */ jsx8(SearchBar, {}),
+          /* @__PURE__ */ jsx8("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx8(TreeView, { showValues: treeShowValues, showCounts: treeShowCounts }) })
         ]
       }
     ),
-    sidebarOpen && /* @__PURE__ */ jsx7(
+    sidebarOpen && /* @__PURE__ */ jsx8(
       "div",
       {
         style: {
@@ -2498,7 +3060,7 @@ function EditorLayout({
           position: "relative",
           transition: "background-color 0.15s"
         },
-        children: /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsx8(
           "div",
           {
             onMouseDown: handleMouseDown,
@@ -2527,7 +3089,7 @@ function EditorLayout({
         )
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         style: {
@@ -2537,7 +3099,7 @@ function EditorLayout({
           minWidth: 0,
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx7("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsx8("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx8(
           FormView,
           {
             showDescriptions: editorShowDescriptions,
@@ -2549,436 +3111,8 @@ function EditorLayout({
   ] });
 }
 
-// src/property-editor.tsx
-import { useState as useState8, useCallback as useCallback8 } from "react";
-import {
-  setValue as setValue2,
-  setKey as setKey2,
-  addProperty as addProperty2,
-  removeNode as removeNode3,
-  changeType as changeType2,
-  duplicateNode as duplicateNode2,
-  toJson as toJson3,
-  getPropertySchema as getPropertySchema3,
-  resolveRef as resolveRef2
-} from "@visual-json/core";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var ALL_TYPES = [
-  "string",
-  "number",
-  "boolean",
-  "null",
-  "object",
-  "array"
-];
-function PropertyRow({ node, schemaProperty }) {
-  const { state, actions } = useStudio();
-  const isContainer = node.type === "object" || node.type === "array";
-  const [hoveredRow, setHoveredRow] = useState8(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 = setValue2(state.tree, node.id, parsed);
-    actions.setTree(newTree);
-  }
-  function handleKeyChange(newKey) {
-    const newTree = setKey2(state.tree, node.id, newKey);
-    actions.setTree(newTree);
-  }
-  function handleRemove() {
-    const newTree = removeNode3(state.tree, node.id);
-    actions.setTree(newTree);
-  }
-  function handleAddChild() {
-    const key = node.type === "array" ? String(node.children.length) : `key${node.children.length}`;
-    const newTree = addProperty2(state.tree, node.id, key, "");
-    actions.setTree(newTree);
-  }
-  function displayValue() {
-    if (isContainer) {
-      return node.type === "array" ? `[${node.children.length} items]` : `{${node.children.length} keys}`;
-    }
-    if (node.value === null) return "";
-    if (node.value === void 0) return "";
-    if (typeof node.value === "string" && node.value === "") return "";
-    return String(node.value);
-  }
-  const hasEnumValues = schemaProperty?.enum && schemaProperty.enum.length > 0;
-  const description = schemaProperty?.description;
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      onMouseEnter: () => setHoveredRow(true),
-      onMouseLeave: () => setHoveredRow(false),
-      children: [
-        /* @__PURE__ */ jsxs6(
-          "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__ */ jsx8(
-                "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__ */ jsx8(
-                "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__ */ jsx8("option", { value: String(v), children: String(v) }, i))
-                }
-              ) : /* @__PURE__ */ jsx8(
-                "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__ */ jsx8(
-                "span",
-                {
-                  style: {
-                    color: "var(--vj-text-dim, #666666)",
-                    fontFamily: "var(--vj-font, monospace)",
-                    fontSize: 13,
-                    flex: 1,
-                    textAlign: "right"
-                  },
-                  children: displayValue()
-                }
-              ),
-              /* @__PURE__ */ jsxs6(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: 2,
-                    opacity: hoveredRow ? 1 : 0,
-                    transition: "opacity 0.1s",
-                    flexShrink: 0
-                  },
-                  children: [
-                    isContainer && /* @__PURE__ */ jsx8(
-                      "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__ */ jsx8(
-                      "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__ */ jsx8(
-          "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 = useCallback8(
-    (newType) => {
-      if (!selectedNode) return;
-      const newTree = changeType2(state.tree, selectedNode.id, newType);
-      actions.setTree(newTree);
-    },
-    [state.tree, selectedNode, actions]
-  );
-  const handleDuplicate = useCallback8(() => {
-    if (!selectedNode) return;
-    const newTree = duplicateNode2(state.tree, selectedNode.id);
-    actions.setTree(newTree);
-  }, [state.tree, selectedNode, actions]);
-  const handleCopyPath = useCallback8(() => {
-    if (!selectedNode) return;
-    navigator.clipboard.writeText(selectedNode.path).catch(() => {
-    });
-  }, [selectedNode]);
-  const handleCopyValue = useCallback8(() => {
-    if (!selectedNode) return;
-    const value = toJson3(selectedNode);
-    const text = typeof value === "string" ? value : JSON.stringify(value, null, 2);
-    navigator.clipboard.writeText(text).catch(() => {
-    });
-  }, [selectedNode]);
-  if (!selectedNode) {
-    return /* @__PURE__ */ jsx8(
-      "div",
-      {
-        className,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "var(--vj-bg, #1e1e1e)",
-          color: "var(--vj-text-dimmer, #555555)",
-          fontFamily: "var(--vj-font, monospace)",
-          fontSize: 13,
-          height: "100%"
-        },
-        children: "Select a node to edit"
-      }
-    );
-  }
-  const isContainer = selectedNode.type === "object" || selectedNode.type === "array";
-  const schema = state.schema ?? void 0;
-  const schemaTitle = schema?.title;
-  function getChildSchema(childKey) {
-    if (!schema || !selectedNode) return void 0;
-    const childPath = selectedNode.path === "/" ? `/${childKey}` : `${selectedNode.path}/${childKey}`;
-    const raw = getPropertySchema3(schema, childPath);
-    return raw ? resolveRef2(raw, schema) : void 0;
-  }
-  function handleAdd() {
-    if (!selectedNode) return;
-    const key = selectedNode.type === "array" ? String(selectedNode.children.length) : `key${selectedNode.children.length}`;
-    const newTree = addProperty2(state.tree, selectedNode.id, key, "");
-    actions.setTree(newTree);
-  }
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      className,
-      style: {
-        backgroundColor: "var(--vj-bg, #1e1e1e)",
-        color: "var(--vj-text, #cccccc)",
-        overflow: "auto",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column"
-      },
-      children: [
-        /* @__PURE__ */ jsxs6(
-          "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__ */ jsxs6(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 2,
-                    flex: 1,
-                    minWidth: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx8(Breadcrumbs, {}),
-                    schemaTitle && /* @__PURE__ */ jsx8(
-                      "span",
-                      {
-                        style: { fontSize: 10, color: "var(--vj-text-dim, #666666)" },
-                        children: schemaTitle
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs6(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 4,
-                    flexShrink: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx8(
-                      "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__ */ jsx8("option", { value: t, children: t }, t))
-                      }
-                    ),
-                    /* @__PURE__ */ jsx8(
-                      "button",
-                      {
-                        onClick: handleCopyPath,
-                        style: actionButtonStyle,
-                        title: "Copy path",
-                        children: "path"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx8(
-                      "button",
-                      {
-                        onClick: handleCopyValue,
-                        style: actionButtonStyle,
-                        title: "Copy value",
-                        children: "value"
-                      }
-                    ),
-                    selectedNode.parentId && /* @__PURE__ */ jsx8(
-                      "button",
-                      {
-                        onClick: handleDuplicate,
-                        style: actionButtonStyle,
-                        title: "Duplicate",
-                        children: "dup"
-                      }
-                    ),
-                    isContainer && /* @__PURE__ */ jsx8(
-                      "button",
-                      {
-                        onClick: handleAdd,
-                        style: {
-                          ...actionButtonStyle,
-                          border: "1px solid var(--vj-input-border, #555555)"
-                        },
-                        children: "+ Add"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx8("div", { style: { flex: 1, overflow: "auto" }, children: isContainer ? selectedNode.children.map((child) => /* @__PURE__ */ jsx8(
-          PropertyRow,
-          {
-            node: child,
-            schemaProperty: getChildSchema(child.key)
-          },
-          child.id
-        )) : /* @__PURE__ */ jsx8(PropertyRow, { node: selectedNode }) })
-      ]
-    }
-  );
-}
-var actionButtonStyle = {
-  background: "none",
-  border: "none",
-  borderRadius: 3,
-  color: "var(--vj-text-muted, #888888)",
-  cursor: "pointer",
-  padding: "1px 6px",
-  fontSize: 11,
-  fontFamily: "var(--vj-font, monospace)"
-};
-
 // src/diff-view.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo7 } from "react";
 import { computeDiff } from "@visual-json/core";
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var DIFF_COLORS = {
@@ -3057,7 +3191,7 @@ function DiffView({
   currentJson,
   className
 }) {
-  const entries = useMemo5(
+  const entries = useMemo7(
     () => computeDiff(originalJson, currentJson),
     [originalJson, currentJson]
   );
@@ -3136,7 +3270,6 @@ export {
   DiffView,
   FormView,
   JsonEditor,
-  PropertyEditor,
   SearchBar,
   StudioContext,
   TreeView,