@visual-json/react 0.2.0 → 0.3.1

package/dist/index.mjs

@@ -22,18 +22,17 @@ import {
   getAncestorIds
 } from "@visual-json/core";
 
-// src/context.ts
-import { createContext, useContext } from "react";
-var StudioContext = createContext(null);
-function useStudio() {
-  const ctx = useContext(StudioContext);
-  if (!ctx) {
-    throw new Error("useStudio must be used within a <VisualJson> provider");
-  }
-  return ctx;
-}
-
-// src/get-visible-nodes.ts
+// ../../@internal/ui/dist/index.mjs
+import {
+  reorderChildrenMulti,
+  removeNode,
+  insertNode,
+  isDescendant
+} from "@visual-json/core";
+import {
+  getPropertySchema,
+  resolveRef
+} from "@visual-json/core";
 function getVisibleNodes(root, isExpanded) {
   const result = [];
   function walk(node) {
@@ -47,9 +46,171 @@ function getVisibleNodes(root, isExpanded) {
   walk(root);
   return result;
 }
+var LABEL_FIELDS = ["name", "type", "title", "id", "label", "key"];
+function getDisplayKey(node, state) {
+  if (node.parentId === null) return "/";
+  const parent = state.nodesById.get(node.parentId);
+  if (parent?.type !== "array" || node.type !== "object") return node.key;
+  for (const field of LABEL_FIELDS) {
+    const child = node.children.find((c) => c.key === field);
+    if (child?.value != null && child.value !== "") {
+      return String(child.value);
+    }
+  }
+  return node.key;
+}
+function collectAllIds(node) {
+  const ids = [node.id];
+  for (const child of node.children) {
+    ids.push(...collectAllIds(child));
+  }
+  return ids;
+}
+var DEFAULT_CSS_VARS = {
+  "--vj-bg": "#1e1e1e",
+  "--vj-bg-panel": "#252526",
+  "--vj-bg-hover": "#2a2d2e",
+  "--vj-bg-selected": "#2a5a1e",
+  "--vj-bg-selected-muted": "#2a2d2e",
+  "--vj-bg-match": "#3a3520",
+  "--vj-bg-match-active": "#51502b",
+  "--vj-border": "#333333",
+  "--vj-border-subtle": "#2a2a2a",
+  "--vj-text": "#cccccc",
+  "--vj-text-muted": "#888888",
+  "--vj-text-dim": "#666666",
+  "--vj-text-dimmer": "#555555",
+  "--vj-string": "#ce9178",
+  "--vj-number": "#b5cea8",
+  "--vj-boolean": "#569cd6",
+  "--vj-accent": "#007acc",
+  "--vj-accent-muted": "#094771",
+  "--vj-input-bg": "#3c3c3c",
+  "--vj-input-border": "#555555",
+  "--vj-error": "#f48771",
+  "--vj-font": "monospace",
+  "--vj-input-font-size": "13px"
+};
+var EMPTY_SET = Object.freeze(/* @__PURE__ */ new Set());
+function sortByTreeOrder(root, ids) {
+  const result = [];
+  function walk(node) {
+    if (ids.has(node.id)) result.push(node.id);
+    for (const child of node.children) walk(child);
+  }
+  walk(root);
+  return result;
+}
+function computeDrop(tree, drag) {
+  const { draggedNodeIds, dropTargetNodeId, dropPosition } = drag;
+  if (draggedNodeIds.size === 0 || !dropTargetNodeId || !dropPosition)
+    return null;
+  const targetNode = tree.nodesById.get(dropTargetNodeId);
+  if (!targetNode || !targetNode.parentId) return null;
+  for (const id of draggedNodeIds) {
+    if (isDescendant(tree, dropTargetNodeId, id)) return null;
+  }
+  const targetParentId = targetNode.parentId;
+  const targetParent = tree.nodesById.get(targetParentId);
+  if (!targetParent) return null;
+  const parentChildren = targetParent.children;
+  const orderedDragIds = parentChildren.filter((c) => draggedNodeIds.has(c.id)).map((c) => c.id);
+  const allSameParent = orderedDragIds.length === draggedNodeIds.size && [...draggedNodeIds].every((id) => {
+    const n = tree.nodesById.get(id);
+    return n?.parentId === targetParentId;
+  });
+  if (allSameParent) {
+    return reorderChildrenMulti(
+      tree,
+      targetParentId,
+      orderedDragIds,
+      dropTargetNodeId,
+      dropPosition
+    );
+  }
+  const orderedIds = sortByTreeOrder(tree.root, draggedNodeIds);
+  const draggedNodes = orderedIds.map((id) => tree.nodesById.get(id)).filter((n) => !!n && n.parentId !== null).map((n) => structuredClone(n));
+  let newTree = tree;
+  for (const id of [...orderedIds].reverse()) {
+    if (newTree.nodesById.has(id)) {
+      newTree = removeNode(newTree, id);
+    }
+  }
+  const updatedTarget = newTree.nodesById.get(dropTargetNodeId);
+  if (!updatedTarget || !updatedTarget.parentId) return null;
+  const updatedParent = newTree.nodesById.get(updatedTarget.parentId);
+  if (!updatedParent) return null;
+  let insertIdx = updatedParent.children.findIndex(
+    (c) => c.id === dropTargetNodeId
+  );
+  if (dropPosition === "after") insertIdx++;
+  for (let i = 0; i < draggedNodes.length; i++) {
+    newTree = insertNode(
+      newTree,
+      updatedParent.id,
+      draggedNodes[i],
+      insertIdx + i
+    );
+  }
+  return newTree;
+}
+function setMultiDragImage(dataTransfer, count, rootEl) {
+  const ghost = document.createElement("div");
+  ghost.textContent = `${count} selected`;
+  const root = rootEl ?? document.querySelector("[data-form-container], [role='tree']");
+  const cs = root ? getComputedStyle(root) : null;
+  const bg = cs?.getPropertyValue("--vj-bg-selected").trim() || DEFAULT_CSS_VARS["--vj-bg-selected"];
+  const fg = cs?.getPropertyValue("--vj-text-selected").trim() || cs?.getPropertyValue("--vj-text").trim() || DEFAULT_CSS_VARS["--vj-text"];
+  const font = cs?.getPropertyValue("--vj-font").trim() || DEFAULT_CSS_VARS["--vj-font"];
+  ghost.style.cssText = [
+    "position:fixed",
+    "top:-1000px",
+    "left:-1000px",
+    "padding:4px 12px",
+    `background:${bg}`,
+    `color:${fg}`,
+    `font-family:${font}`,
+    "font-size:13px",
+    "border-radius:4px",
+    "white-space:nowrap",
+    "pointer-events:none"
+  ].join(";");
+  document.body.appendChild(ghost);
+  dataTransfer.setDragImage(ghost, 0, 14);
+  requestAnimationFrame(() => ghost.remove());
+}
+var DIFF_COLORS = {
+  added: { bg: "#1e3a1e", marker: "+", label: "#4ec94e" },
+  removed: { bg: "#3a1e1e", marker: "-", label: "#f48771" },
+  changed: { bg: "#3a3a1e", marker: "~", label: "#dcdcaa" }
+};
+function formatValue(value) {
+  if (value === void 0) return "";
+  if (value === null) return "null";
+  if (typeof value === "string") return JSON.stringify(value);
+  if (typeof value === "object") {
+    const json = JSON.stringify(value, null, 2);
+    if (json.length > 80) {
+      return JSON.stringify(value).slice(0, 77) + "...";
+    }
+    return json;
+  }
+  return String(value);
+}
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var StudioContext = createContext(null);
+function useStudio() {
+  const ctx = useContext(StudioContext);
+  if (!ctx) {
+    throw new Error("useStudio must be used within a <VisualJson> provider");
+  }
+  return ctx;
+}
 
 // src/selection-utils.ts
-import { removeNode } from "@visual-json/core";
+import { removeNode as removeNode2 } from "@visual-json/core";
 function computeSelectAllIds(tree, focusedNodeId, currentlySelected) {
   if (!focusedNodeId) return null;
   let node = tree.nodesById.get(focusedNodeId);
@@ -95,7 +256,7 @@ function deleteSelectedNodes(tree, selectedIds, visibleNodes) {
   let newTree = tree;
   for (const id of idsToDelete) {
     if (newTree.nodesById.has(id)) {
-      newTree = removeNode(newTree, id);
+      newTree = removeNode2(newTree, id);
     }
   }
   let nextFocusId = null;
@@ -120,13 +281,6 @@ function deleteSelectedNodes(tree, selectedIds, visibleNodes) {
 
 // src/visual-json.tsx
 import { jsx } from "react/jsx-runtime";
-function collectAllIds(node) {
-  const ids = [node.id];
-  for (const child of node.children) {
-    ids.push(...collectAllIds(child));
-  }
-  return ids;
-}
 function VisualJson({
   value,
   onChange,
@@ -581,97 +735,17 @@ function ContextMenu({ x, y, items, onClose }) {
   );
 }
 
-// src/display-key.ts
-var LABEL_FIELDS = ["name", "type", "title", "id", "label", "key"];
-function getDisplayKey(node, state) {
-  if (node.parentId === null) return "/";
-  const parent = state.nodesById.get(node.parentId);
-  if (parent?.type !== "array" || node.type !== "object") return node.key;
-  for (const field of LABEL_FIELDS) {
-    const child = node.children.find((c) => c.key === field);
-    if (child?.value != null && child.value !== "") {
-      return String(child.value);
-    }
-  }
-  return node.key;
-}
-
 // src/use-drag-drop.ts
 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
-var EMPTY_SET = Object.freeze(/* @__PURE__ */ new Set());
+import { isDescendant as isDescendant2 } from "@visual-json/core";
+var EMPTY_SET2 = Object.freeze(/* @__PURE__ */ new Set());
 var INITIAL_DRAG_STATE = {
-  draggedNodeIds: EMPTY_SET,
+  draggedNodeIds: EMPTY_SET2,
   dropTargetNodeId: null,
   dropPosition: null
 };
-function sortByTreeOrder(root, ids) {
-  const result = [];
-  function walk(node) {
-    if (ids.has(node.id)) result.push(node.id);
-    for (const child of node.children) walk(child);
-  }
-  walk(root);
-  return result;
-}
-function setMultiDragImage(e, count) {
-  const ghost = document.createElement("div");
-  ghost.textContent = `${count} selected`;
-  const root = document.querySelector("[data-form-container], [role='tree']");
-  const cs = root ? getComputedStyle(root) : null;
-  const bg = cs?.getPropertyValue("--vj-bg-selected").trim() || DEFAULT_CSS_VARS["--vj-bg-selected"];
-  const fg = cs?.getPropertyValue("--vj-text-selected").trim() || cs?.getPropertyValue("--vj-text").trim() || DEFAULT_CSS_VARS["--vj-text"];
-  const font = cs?.getPropertyValue("--vj-font").trim() || DEFAULT_CSS_VARS["--vj-font"];
-  ghost.style.cssText = [
-    "position:fixed",
-    "top:-1000px",
-    "left:-1000px",
-    "padding:4px 12px",
-    `background:${bg}`,
-    `color:${fg}`,
-    `font-family:${font}`,
-    "font-size:13px",
-    "border-radius:4px",
-    "white-space:nowrap",
-    "pointer-events:none"
-  ].join(";");
-  document.body.appendChild(ghost);
-  e.dataTransfer.setDragImage(ghost, 0, 14);
-  requestAnimationFrame(() => ghost.remove());
+function setMultiDragImage2(e, count) {
+  setMultiDragImage(e.dataTransfer, count);
 }
 function useDragDrop(visibleNodes, selectedNodeIds) {
   const { state, actions } = useStudio();
@@ -703,7 +777,7 @@ function useDragDrop(visibleNodes, selectedNodeIds) {
     (nodeId, position) => {
       const draggedIds = dragStateRef.current.draggedNodeIds;
       for (const draggedId of draggedIds) {
-        if (nodeId === draggedId || isDescendant(state.tree, nodeId, draggedId)) {
+        if (nodeId === draggedId || isDescendant2(state.tree, nodeId, draggedId)) {
           return;
         }
       }
@@ -732,62 +806,9 @@ function useDragDrop(visibleNodes, selectedNodeIds) {
     setDragState(INITIAL_DRAG_STATE);
   }, []);
   const handleDrop = useCallback2(() => {
-    const { draggedNodeIds, dropTargetNodeId, dropPosition } = dragStateRef.current;
-    if (draggedNodeIds.size === 0 || !dropTargetNodeId || !dropPosition) return;
-    const targetNode = state.tree.nodesById.get(dropTargetNodeId);
-    if (!targetNode || !targetNode.parentId) return;
-    for (const id of draggedNodeIds) {
-      if (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);
-        }
-      }
-      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
-        );
-      }
+    const currentDragState = dragStateRef.current;
+    const newTree = computeDrop(state.tree, currentDragState);
+    if (newTree) {
       actions.setTree(newTree);
     }
     setDragState(INITIAL_DRAG_STATE);
@@ -872,7 +893,7 @@ function TreeNodeRow({
         onDragStart: (e) => {
           e.dataTransfer.effectAllowed = "move";
           if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
-            setMultiDragImage(e, state.selectedNodeIds.size);
+            setMultiDragImage2(e, state.selectedNodeIds.size);
           }
           onDragStart(node.id);
         },
@@ -1291,8 +1312,8 @@ import {
   setKey,
   addProperty,
   removeNode as removeNode4,
-  getPropertySchema,
-  resolveRef
+  getPropertySchema as getPropertySchema2,
+  resolveRef as resolveRef2
 } from "@visual-json/core";
 
 // src/breadcrumbs.tsx
@@ -1654,9 +1675,9 @@ function EnumInput({
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function getResolvedSchema(schema, rootSchema, path) {
   if (!schema) return void 0;
-  const raw = getPropertySchema(schema, path, rootSchema);
+  const raw = getPropertySchema2(schema, path, rootSchema);
   if (!raw) return void 0;
-  return resolveRef(raw, rootSchema ?? schema);
+  return resolveRef2(raw, rootSchema ?? schema);
 }
 function getValueColor(node) {
   if (node.type === "boolean" || node.type === "null")
@@ -1780,7 +1801,7 @@ function FormField({
           onDragStart: (e) => {
             e.dataTransfer.effectAllowed = "move";
             if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
-              setMultiDragImage(e, state.selectedNodeIds.size);
+              setMultiDragImage2(e, state.selectedNodeIds.size);
             }
             onDragStart(node.id);
           },
@@ -1993,7 +2014,7 @@ function FormField({
       onDragStart: (e) => {
         e.dataTransfer.effectAllowed = "move";
         if (state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id)) {
-          setMultiDragImage(e, state.selectedNodeIds.size);
+          setMultiDragImage2(e, state.selectedNodeIds.size);
         }
         onDragStart(node.id);
       },
@@ -3115,24 +3136,6 @@ function EditorLayout({
 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 = {
-  added: { bg: "#1e3a1e", marker: "+", label: "#4ec94e" },
-  removed: { bg: "#3a1e1e", marker: "-", label: "#f48771" },
-  changed: { bg: "#3a3a1e", marker: "~", label: "#dcdcaa" }
-};
-function formatValue(value) {
-  if (value === void 0) return "";
-  if (value === null) return "null";
-  if (typeof value === "string") return JSON.stringify(value);
-  if (typeof value === "object") {
-    const json = JSON.stringify(value, null, 2);
-    if (json.length > 80) {
-      return JSON.stringify(value).slice(0, 77) + "...";
-    }
-    return json;
-  }
-  return String(value);
-}
 function DiffRow({ entry }) {
   const colors = DIFF_COLORS[entry.type];
   return /* @__PURE__ */ jsxs7(