npm - @visual-json/react - Versions diffs - 0.1.0 → 0.1.1 - Mend

@visual-json/react 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.js CHANGED Viewed

@@ -36,7 +36,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 // src/json-editor.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 // src/visual-json.tsx
 var import_react2 = require("react");
@@ -939,7 +939,7 @@ function TreeView({
 }
 // src/form-view.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_core4 = require("@visual-json/core");
 // src/breadcrumbs.tsx
@@ -1069,7 +1069,7 @@ function Breadcrumbs({ className }) {
               width: "100%",
               boxSizing: "border-box",
               padding: "2px 0",
-              fontSize: 12,
+              fontSize: "var(--vj-input-font-size, 13px)",
               fontFamily: "var(--vj-font, monospace)",
               color: "var(--vj-text-muted, #999999)",
               background: "transparent",
@@ -1124,8 +1124,175 @@ function Breadcrumbs({ className }) {
   );
 }
-// src/form-view.tsx
+// src/enum-input.tsx
+var import_react7 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var DROPDOWN_MAX_HEIGHT2 = 200;
+function EnumInput({
+  enumValues,
+  value,
+  onValueChange,
+  inputRef,
+  inputStyle
+}) {
+  const [inputValue, setInputValue] = (0, import_react7.useState)(value);
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const [highlightIndex, setHighlightIndex] = (0, import_react7.useState)(0);
+  const listRef = (0, import_react7.useRef)(null);
+  const wrapperRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    setInputValue(value);
+  }, [value]);
+  const suggestions = (0, import_react7.useMemo)(
+    () => enumValues.map((v) => String(v)),
+    [enumValues]
+  );
+  (0, import_react7.useEffect)(() => {
+    setHighlightIndex(0);
+  }, [suggestions]);
+  const selectValue = (0, import_react7.useCallback)(
+    (val) => {
+      onValueChange(val);
+      setInputValue(val);
+      setOpen(false);
+    },
+    [onValueChange]
+  );
+  const handleKeyDown = (0, import_react7.useCallback)(
+    (e) => {
+      if (!open) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          e.stopPropagation();
+          setOpen(true);
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          e.stopPropagation();
+          setHighlightIndex((i) => Math.min(i + 1, suggestions.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          e.stopPropagation();
+          setHighlightIndex((i) => Math.max(i - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          e.stopPropagation();
+          if (suggestions.length > 0 && highlightIndex < suggestions.length) {
+            selectValue(suggestions[highlightIndex]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          e.stopPropagation();
+          setInputValue(value);
+          setOpen(false);
+          break;
+        case "Tab":
+          setInputValue(value);
+          setOpen(false);
+          break;
+      }
+    },
+    [open, suggestions, highlightIndex, value, selectValue]
+  );
+  (0, import_react7.useEffect)(() => {
+    const el = listRef.current;
+    if (!el || !open) return;
+    const item = el.children[highlightIndex];
+    item?.scrollIntoView({ block: "nearest" });
+  }, [highlightIndex, open]);
+  (0, import_react7.useEffect)(() => {
+    function handleClickOutside(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setInputValue(value);
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      ref: wrapperRef,
+      style: { position: "relative", flex: 1, minWidth: 0 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            value: inputValue,
+            onChange: (e) => {
+              setInputValue(e.target.value);
+              if (!open) setOpen(true);
+            },
+            onFocus: () => setOpen(true),
+            onKeyDown: handleKeyDown,
+            onClick: (e) => e.stopPropagation(),
+            spellCheck: false,
+            autoComplete: "off",
+            style: inputStyle
+          }
+        ),
+        open && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            ref: listRef,
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: -32,
+              right: 0,
+              zIndex: 50,
+              maxHeight: DROPDOWN_MAX_HEIGHT2,
+              overflowY: "auto",
+              backgroundColor: "var(--vj-bg-panel, #252526)",
+              border: "1px solid var(--vj-border, #333333)",
+              boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
+            },
+            children: suggestions.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "div",
+              {
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  selectValue(s);
+                },
+                onMouseEnter: () => setHighlightIndex(i),
+                style: {
+                  padding: "4px 12px",
+                  fontSize: 13,
+                  fontFamily: "var(--vj-font, monospace)",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
+                  color: i === highlightIndex ? "var(--vj-text, #cccccc)" : "var(--vj-text-muted, #888888)",
+                  backgroundColor: i === highlightIndex ? "var(--vj-bg-hover, #2a2d2e)" : "transparent",
+                  cursor: "pointer",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { width: 14, flexShrink: 0, fontSize: 12 }, children: s === value ? "\u2713" : "" }),
+                  s
+                ]
+              },
+              s
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+// src/form-view.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function getResolvedSchema(schema, rootSchema, path) {
   if (!schema) return void 0;
   const raw = (0, import_core4.getPropertySchema)(schema, path, rootSchema);
@@ -1173,7 +1340,7 @@ function FormField({
   const isEditing = editingNodeId === node.id;
   const propSchema = getResolvedSchema(schema, rootSchema, node.path);
   const isRequired = checkRequired(node, schema, rootSchema);
-  const [hovered, setHovered] = (0, import_react7.useState)(false);
+  const [hovered, setHovered] = (0, import_react8.useState)(false);
   const isRoot = node.parentId === null;
   const isDragTarget = dragState.dropTargetNodeId === node.id;
   const isDraggedNode = dragState.draggedNodeId === node.id;
@@ -1190,9 +1357,9 @@ function FormField({
   } else if (isDragTarget && dragState.dropPosition === "after") {
     borderBottom = "2px solid var(--vj-accent, #007acc)";
   }
-  const valueRef = (0, import_react7.useRef)(null);
-  const keyRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const valueRef = (0, import_react8.useRef)(null);
+  const keyRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     if (!isEditing) return;
     if (!isContainer) {
       const hasValue = node.value !== null && node.value !== void 0 && node.value !== "";
@@ -1205,7 +1372,7 @@ function FormField({
       keyRef.current.focus();
     }
   }, [isEditing, isContainer, node.value]);
-  const handleValueChange = (0, import_react7.useCallback)(
+  const handleValueChange = (0, import_react8.useCallback)(
     (newValue) => {
       let parsed;
       if (propSchema?.type === "boolean" || newValue === "true" || newValue === "false") {
@@ -1223,18 +1390,18 @@ function FormField({
     },
     [state.tree, node.id, node.type, actions, propSchema]
   );
-  const handleKeyChange = (0, import_react7.useCallback)(
+  const handleKeyChange = (0, import_react8.useCallback)(
     (newKey) => {
       const newTree = (0, import_core4.setKey)(state.tree, node.id, newKey);
       actions.setTree(newTree);
     },
     [state.tree, node.id, actions]
   );
-  const handleRemove = (0, import_react7.useCallback)(() => {
+  const handleRemove = (0, import_react8.useCallback)(() => {
     const newTree = (0, import_core4.removeNode)(state.tree, node.id);
     actions.setTree(newTree);
   }, [state.tree, node.id, actions]);
-  const handleAddChild = (0, import_react7.useCallback)(() => {
+  const handleAddChild = (0, import_react8.useCallback)(() => {
     const key = node.type === "array" ? String(node.children.length) : `newKey${node.children.length}`;
     const newTree = (0, import_core4.addProperty)(state.tree, node.id, key, "");
     actions.setTree(newTree);
@@ -1247,8 +1414,8 @@ function FormField({
   const rowBg = isSelected ? isFocused ? "var(--vj-bg-selected, #2a5a1e)" : "var(--vj-bg-selected-muted, var(--vj-bg-hover, #2a2d2e))" : hovered ? "var(--vj-bg-hover, #2a2d2e)" : "transparent";
   const rowColor = isSelected && isFocused ? "var(--vj-text-selected, var(--vj-text, #cccccc))" : "var(--vj-text, #cccccc)";
   if (isContainer) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "div",
         {
           "data-form-node-id": node.id,
@@ -1286,7 +1453,7 @@ function FormField({
           onMouseEnter: () => setHovered(true),
           onMouseLeave: () => setHovered(false),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 onClick: (e) => {
@@ -1311,7 +1478,7 @@ function FormField({
                 children: "\u25B6"
               }
             ),
-            isEditing && !isRoot ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            isEditing && !isRoot ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "input",
               {
                 ref: keyRef,
@@ -1323,7 +1490,7 @@ function FormField({
                   border: "none",
                   color: "inherit",
                   fontFamily: "var(--vj-font, monospace)",
-                  fontSize: 13,
+                  fontSize: "var(--vj-input-font-size, 13px)",
                   fontWeight: 500,
                   padding: 0,
                   outline: "none",
@@ -1331,7 +1498,7 @@ function FormField({
                   width: `calc(${(maxDepth - depth) * 16}px + ${maxKeyLength}ch)`
                 }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 style: {
@@ -1346,7 +1513,7 @@ function FormField({
                 children: isRoot ? "/" : getDisplayKey(node, state.tree)
               }
             ),
-            showDescriptions && fieldTitle && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            showDescriptions && fieldTitle && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 style: {
@@ -1357,7 +1524,7 @@ function FormField({
                 children: fieldTitle
               }
             ),
-            hovered && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            hovered && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
                 onClick: (e) => {
@@ -1379,7 +1546,7 @@ function FormField({
                 ]
               }
             ),
-            showCounts && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            showCounts && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 style: {
@@ -1391,7 +1558,7 @@ function FormField({
                 children: node.type === "array" ? `${node.children.length} items` : `${node.children.length} properties`
               }
             ),
-            !isRoot && isEditing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            !isRoot && isEditing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 onClick: (e) => {
@@ -1415,7 +1582,7 @@ function FormField({
           ]
         }
       ),
-      showDescriptions && description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      showDescriptions && description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "div",
         {
           style: {
@@ -1428,7 +1595,7 @@ function FormField({
           children: description
         }
       ),
-      !collapsed && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      !collapsed && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         FormField,
         {
           node: child,
@@ -1458,7 +1625,7 @@ function FormField({
   }
   const displayValue = getDisplayValue(node);
   const valueColor = getValueColor(node);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       "data-form-node-id": node.id,
@@ -1496,8 +1663,8 @@ function FormField({
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { width: 16, flexShrink: 0 } }),
-        isEditing && parentIsObject ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { width: 16, flexShrink: 0 } }),
+        isEditing && parentIsObject ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           {
             ref: keyRef,
@@ -1515,14 +1682,14 @@ function FormField({
               border: "none",
               color: "inherit",
               fontFamily: "var(--vj-font, monospace)",
-              fontSize: 13,
+              fontSize: "var(--vj-input-font-size, 13px)",
               padding: 0,
               flexShrink: 0,
               outline: "none",
               width: `calc(${(maxDepth - depth) * 16}px + ${maxKeyLength}ch)`
             }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
             style: {
@@ -1536,7 +1703,7 @@ function FormField({
             children: getDisplayKey(node, state.tree)
           }
         ),
-        isRequired && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isRequired && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
             style: {
@@ -1547,7 +1714,7 @@ function FormField({
             children: "*"
           }
         ),
-        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             style: {
@@ -1566,7 +1733,7 @@ function FormField({
               valueColor
             )
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
             style: {
@@ -1581,7 +1748,7 @@ function FormField({
             children: displayValue
           }
         ),
-        isEditing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isEditing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             onClick: (e) => {
@@ -1612,48 +1779,38 @@ function renderEditInput(node, propSchema, displayValue, handleValueChange, inpu
     background: "none",
     border: "none",
     fontFamily: "var(--vj-font, monospace)",
-    fontSize: 13,
+    fontSize: "var(--vj-input-font-size, 13px)",
     padding: 0,
     flex: 1,
     outline: "none",
     color: valueColor
   };
   if (node.type === "boolean") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "select",
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      EnumInput,
       {
-        ref: inputRef,
+        enumValues: ["true", "false"],
         value: String(node.value),
-        onChange: (e) => handleValueChange(e.target.value),
-        onClick: (e) => e.stopPropagation(),
-        style: { ...inputStyle, cursor: "pointer" },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "true", children: "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "false", children: "false" })
-        ]
+        onValueChange: handleValueChange,
+        inputRef,
+        inputStyle
       }
     );
   }
   if (hasEnumValues && propSchema?.enum) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "select",
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      EnumInput,
       {
-        ref: inputRef,
+        enumValues: propSchema.enum,
         value: displayValue,
-        onChange: (e) => handleValueChange(e.target.value),
-        onClick: (e) => e.stopPropagation(),
-        style: { ...inputStyle, cursor: "pointer" },
-        children: [
-          !propSchema.enum.some(
-            (v) => JSON.stringify(v) === JSON.stringify(node.value)
-          ) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: displayValue, children: displayValue || "(empty)" }),
-          propSchema.enum.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: String(v), children: String(v) }, i))
-        ]
+        onValueChange: handleValueChange,
+        inputRef,
+        inputStyle
       }
     );
   }
   if (node.type === "null") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "span",
       {
         style: {
@@ -1667,7 +1824,7 @@ function renderEditInput(node, propSchema, displayValue, handleValueChange, inpu
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "input",
     {
       ref: inputRef,
@@ -1694,16 +1851,16 @@ function FormView({
   const rootSchema = state.schema ?? void 0;
   const selectedNode = state.selectedNodeId ? state.tree.nodesById.get(state.selectedNodeId) : null;
   const displayNode = selectedNode ?? state.tree.root;
-  const [formSelectedNodeId, setFormSelectedNodeId] = (0, import_react7.useState)(
+  const [formSelectedNodeId, setFormSelectedNodeId] = (0, import_react8.useState)(
     null
   );
-  const [editingNodeId, setEditingNodeId] = (0, import_react7.useState)(null);
-  const preEditTreeRef = (0, import_react7.useRef)(null);
-  const [collapsedIds, setCollapsedIds] = (0, import_react7.useState)(
+  const [editingNodeId, setEditingNodeId] = (0, import_react8.useState)(null);
+  const preEditTreeRef = (0, import_react8.useRef)(null);
+  const [collapsedIds, setCollapsedIds] = (0, import_react8.useState)(
     () => /* @__PURE__ */ new Set()
   );
-  const containerRef = (0, import_react7.useRef)(null);
-  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
+  const containerRef = (0, import_react8.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
   const {
     dragState,
     handleDragStart,
@@ -1711,16 +1868,16 @@ function FormView({
     handleDragEnd,
     handleDrop
   } = useDragDrop();
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setFormSelectedNodeId(null);
     setEditingNodeId(null);
     setCollapsedIds(/* @__PURE__ */ new Set());
   }, [displayNode.id]);
-  const visibleNodes = (0, import_react7.useMemo)(
+  const visibleNodes = (0, import_react8.useMemo)(
     () => getVisibleNodes(displayNode, (id) => !collapsedIds.has(id)),
     [displayNode, collapsedIds]
   );
-  const { maxKeyLength, maxDepth } = (0, import_react7.useMemo)(() => {
+  const { maxKeyLength, maxDepth } = (0, import_react8.useMemo)(() => {
     let maxKey = 1;
     let maxD = 0;
     const baseSegments = displayNode.path === "/" ? 0 : displayNode.path.split("/").filter(Boolean).length;
@@ -1733,11 +1890,11 @@ function FormView({
     }
     return { maxKeyLength: maxKey, maxDepth: maxD };
   }, [visibleNodes, displayNode.path, state.tree]);
-  const handleSelect = (0, import_react7.useCallback)((nodeId) => {
+  const handleSelect = (0, import_react8.useCallback)((nodeId) => {
     setFormSelectedNodeId(nodeId);
     setEditingNodeId(null);
   }, []);
-  const handleToggleCollapse = (0, import_react7.useCallback)((nodeId) => {
+  const handleToggleCollapse = (0, import_react8.useCallback)((nodeId) => {
     setCollapsedIds((prev) => {
       const next = new Set(prev);
       if (next.has(nodeId)) {
@@ -1748,14 +1905,14 @@ function FormView({
       return next;
     });
   }, []);
-  const handleStartEditing = (0, import_react7.useCallback)(
+  const handleStartEditing = (0, import_react8.useCallback)(
     (nodeId) => {
       preEditTreeRef.current = state.tree;
       setEditingNodeId(nodeId);
     },
     [state.tree]
   );
-  const scrollToNode = (0, import_react7.useCallback)((nodeId) => {
+  const scrollToNode = (0, import_react8.useCallback)((nodeId) => {
     requestAnimationFrame(() => {
       const el = containerRef.current?.querySelector(
         `[data-form-node-id="${nodeId}"]`
@@ -1763,7 +1920,7 @@ function FormView({
       el?.scrollIntoView({ block: "nearest" });
     });
   }, []);
-  const handleKeyDown = (0, import_react7.useCallback)(
+  const handleKeyDown = (0, import_react8.useCallback)(
     (e) => {
       if (editingNodeId) {
         if (e.key === "Escape") {
@@ -1886,7 +2043,7 @@ function FormView({
       actions
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className,
@@ -1899,7 +2056,7 @@ function FormView({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             style: {
@@ -1908,10 +2065,10 @@ function FormView({
               backgroundColor: "var(--vj-bg-panel, #252526)",
               flexShrink: 0
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Breadcrumbs, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Breadcrumbs, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             ref: containerRef,
@@ -1929,7 +2086,7 @@ function FormView({
               overflow: "auto",
               outline: "none"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               FormField,
               {
                 node: displayNode,
@@ -1962,12 +2119,12 @@ function FormView({
 }
 // src/search-bar.tsx
-var import_react8 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function SearchBar({ className }) {
   const { state, actions } = useStudio();
-  const inputRef = (0, import_react8.useRef)(null);
-  const handleKeyDown = (0, import_react8.useCallback)(
+  const inputRef = (0, import_react9.useRef)(null);
+  const handleKeyDown = (0, import_react9.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -1985,7 +2142,7 @@ function SearchBar({ className }) {
     },
     [actions]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     function handleGlobalKeyDown(e) {
       const mod = e.metaKey || e.ctrlKey;
       if (mod && e.key === "f") {
@@ -1999,7 +2156,7 @@ function SearchBar({ className }) {
   }, []);
   const matchCount = state.searchMatches.length;
   const currentMatch = matchCount > 0 ? state.searchMatchIndex + 1 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className,
@@ -2012,7 +2169,7 @@ function SearchBar({ className }) {
         borderBottom: "1px solid var(--vj-border, #333333)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             ref: inputRef,
@@ -2028,14 +2185,14 @@ function SearchBar({ className }) {
               borderRadius: 3,
               color: "var(--vj-text, #cccccc)",
               fontFamily: "var(--vj-font, monospace)",
-              fontSize: 12,
+              fontSize: "var(--vj-input-font-size, 13px)",
               padding: "3px 8px",
               outline: "none",
               minWidth: 0
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             style: {
@@ -2045,8 +2202,8 @@ function SearchBar({ className }) {
               flexShrink: 0,
               height: 18
             },
-            children: state.searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: state.searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "span",
                 {
                   style: {
@@ -2059,7 +2216,7 @@ function SearchBar({ className }) {
                   children: matchCount > 0 ? `${currentMatch}/${matchCount}` : "0/0"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: actions.prevSearchMatch,
@@ -2083,7 +2240,7 @@ function SearchBar({ className }) {
                   children: "\u25B2"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: actions.nextSearchMatch,
@@ -2107,7 +2264,7 @@ function SearchBar({ className }) {
                   children: "\u25BC"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: () => actions.setSearchQuery(""),
@@ -2130,8 +2287,8 @@ function SearchBar({ className }) {
                   children: "\xD7"
                 }
               )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: actions.expandAll,
@@ -2148,7 +2305,7 @@ function SearchBar({ className }) {
                     alignItems: "center"
                   },
                   title: "Expand all",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                     "svg",
                     {
                       width: "14",
@@ -2160,15 +2317,15 @@ function SearchBar({ className }) {
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 2v4M5 4l3-2 3 2" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 14v-4M5 12l3 2 3-2" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M2 8h12" })
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 2v4M5 4l3-2 3 2" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 14v-4M5 12l3 2 3-2" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M2 8h12" })
                       ]
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: actions.collapseAll,
@@ -2185,7 +2342,7 @@ function SearchBar({ className }) {
                     alignItems: "center"
                   },
                   title: "Collapse all",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                     "svg",
                     {
                       width: "14",
@@ -2197,9 +2354,9 @@ function SearchBar({ className }) {
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 5V1M5 3l3 2 3-2" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 11v4M5 13l3-2 3 2" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M2 8h12" })
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 5V1M5 3l3 2 3-2" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 11v4M5 13l3-2 3 2" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M2 8h12" })
                       ]
                     }
                   )
@@ -2214,7 +2371,7 @@ function SearchBar({ className }) {
 }
 // src/json-editor.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DEFAULT_CSS_VARS = {
   "--vj-bg": "#1e1e1e",
   "--vj-bg-panel": "#252526",
@@ -2237,7 +2394,8 @@ var DEFAULT_CSS_VARS = {
   "--vj-input-bg": "#3c3c3c",
   "--vj-input-border": "#555555",
   "--vj-error": "#f48771",
-  "--vj-font": "monospace"
+  "--vj-font": "monospace",
+  "--vj-input-font-size": "13px"
 };
 function JsonEditor({
   value,
@@ -2257,15 +2415,15 @@ function JsonEditor({
 }) {
   const isControlled = value !== void 0;
   const initialValue = isControlled ? value : defaultValue ?? {};
-  const [editorKey, setEditorKey] = (0, import_react9.useState)(0);
-  const valueRef = (0, import_react9.useRef)(initialValue);
-  (0, import_react9.useEffect)(() => {
+  const [editorKey, setEditorKey] = (0, import_react10.useState)(0);
+  const valueRef = (0, import_react10.useRef)(initialValue);
+  (0, import_react10.useEffect)(() => {
     if (isControlled && value !== valueRef.current) {
       valueRef.current = value;
       setEditorKey((k) => k + 1);
     }
   }, [value, isControlled]);
-  const handleChange = (0, import_react9.useCallback)(
+  const handleChange = (0, import_react10.useCallback)(
     (newValue) => {
       valueRef.current = newValue;
       if (!readOnly) {
@@ -2283,25 +2441,35 @@ function JsonEditor({
     ...DEFAULT_CSS_VARS,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    VisualJson,
-    {
-      value: valueRef.current,
-      onChange: readOnly ? void 0 : handleChange,
-      schema,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        EditorLayout,
-        {
-          treeShowValues,
-          treeShowCounts,
-          editorShowDescriptions,
-          editorShowCounts,
-          sidebarOpen
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, "data-vj-root": "", style: containerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `@media(pointer:coarse){[data-vj-root]{--vj-input-font-size:16px}}`
         }
-      )
-    },
-    editorKey
-  ) });
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      VisualJson,
+      {
+        value: valueRef.current,
+        onChange: readOnly ? void 0 : handleChange,
+        schema,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          EditorLayout,
+          {
+            treeShowValues,
+            treeShowCounts,
+            editorShowDescriptions,
+            editorShowCounts,
+            sidebarOpen
+          }
+        )
+      },
+      editorKey
+    )
+  ] });
 }
 function EditorLayout({
   treeShowValues,
@@ -2310,14 +2478,14 @@ function EditorLayout({
   editorShowCounts,
   sidebarOpen
 }) {
-  const [sidebarWidth, setSidebarWidth] = (0, import_react9.useState)(280);
-  const [isNarrow, setIsNarrow] = (0, import_react9.useState)(false);
-  const [activePanel, setActivePanel] = (0, import_react9.useState)("tree");
-  const containerRef = (0, import_react9.useRef)(null);
-  const dragging = (0, import_react9.useRef)(false);
-  const startX = (0, import_react9.useRef)(0);
-  const startWidth = (0, import_react9.useRef)(0);
-  (0, import_react9.useEffect)(() => {
+  const [sidebarWidth, setSidebarWidth] = (0, import_react10.useState)(280);
+  const [isNarrow, setIsNarrow] = (0, import_react10.useState)(false);
+  const [activePanel, setActivePanel] = (0, import_react10.useState)("tree");
+  const containerRef = (0, import_react10.useRef)(null);
+  const dragging = (0, import_react10.useRef)(false);
+  const startX = (0, import_react10.useRef)(0);
+  const startWidth = (0, import_react10.useRef)(0);
+  (0, import_react10.useEffect)(() => {
     function checkWidth() {
       if (containerRef.current) {
         setIsNarrow(containerRef.current.offsetWidth < 500);
@@ -2328,7 +2496,7 @@ function EditorLayout({
     if (containerRef.current) observer.observe(containerRef.current);
     return () => observer.disconnect();
   }, []);
-  const handleMouseDown = (0, import_react9.useCallback)(
+  const handleMouseDown = (0, import_react10.useCallback)(
     (e) => {
       dragging.current = true;
       startX.current = e.clientX;
@@ -2358,7 +2526,7 @@ function EditorLayout({
   );
   if (isNarrow) {
     if (!sidebarOpen) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
           ref: containerRef,
@@ -2368,7 +2536,7 @@ function EditorLayout({
             flex: 1,
             minHeight: 0
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             FormView,
             {
               showDescriptions: editorShowDescriptions,
@@ -2378,7 +2546,7 @@ function EditorLayout({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         ref: containerRef,
@@ -2389,7 +2557,7 @@ function EditorLayout({
           minHeight: 0
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "div",
             {
               style: {
@@ -2399,7 +2567,7 @@ function EditorLayout({
                 backgroundColor: "var(--vj-bg-panel, #252526)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     onClick: () => setActivePanel("tree"),
@@ -2416,7 +2584,7 @@ function EditorLayout({
                     children: "Tree"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     onClick: () => setActivePanel("form"),
@@ -2436,7 +2604,7 @@ function EditorLayout({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "hidden" }, children: activePanel === "tree" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "hidden" }, children: activePanel === "tree" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "div",
             {
               style: {
@@ -2445,8 +2613,8 @@ function EditorLayout({
                 height: "100%"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchBar, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchBar, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   TreeView,
                   {
                     showValues: treeShowValues,
@@ -2455,7 +2623,7 @@ function EditorLayout({
                 ) })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               style: {
@@ -2463,7 +2631,7 @@ function EditorLayout({
                 flexDirection: "column",
                 height: "100%"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 FormView,
                 {
                   showDescriptions: editorShowDescriptions,
@@ -2476,8 +2644,8 @@ function EditorLayout({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: containerRef, style: { display: "flex", flex: 1, minHeight: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: containerRef, style: { display: "flex", flex: 1, minHeight: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         style: {
@@ -2489,12 +2657,12 @@ function EditorLayout({
           transition: "width 0.2s ease"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchBar, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TreeView, { showValues: treeShowValues, showCounts: treeShowCounts }) })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchBar, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TreeView, { showValues: treeShowValues, showCounts: treeShowCounts }) })
         ]
       }
     ),
-    sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         style: {
@@ -2504,7 +2672,7 @@ function EditorLayout({
           position: "relative",
           transition: "background-color 0.15s"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             onMouseDown: handleMouseDown,
@@ -2533,7 +2701,7 @@ function EditorLayout({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         style: {
@@ -2543,7 +2711,7 @@ function EditorLayout({
           minWidth: 0,
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           FormView,
           {
             showDescriptions: editorShowDescriptions,
@@ -2556,9 +2724,9 @@ function EditorLayout({
 }
 // src/property-editor.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_core5 = require("@visual-json/core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ALL_TYPES = [
   "string",
   "number",
@@ -2570,7 +2738,8 @@ var ALL_TYPES = [
 function PropertyRow({ node, schemaProperty }) {
   const { state, actions } = useStudio();
   const isContainer = node.type === "object" || node.type === "array";
-  const [hoveredRow, setHoveredRow] = (0, import_react10.useState)(false);
+  const [hoveredRow, setHoveredRow] = (0, import_react11.useState)(false);
+  const enumRef = (0, import_react11.useRef)(null);
   function handleValueChange(newValue) {
     let parsed;
     if (newValue === "null") parsed = null;
@@ -2606,13 +2775,13 @@ function PropertyRow({ node, schemaProperty }) {
   }
   const hasEnumValues = schemaProperty?.enum && schemaProperty.enum.length > 0;
   const description = schemaProperty?.description;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       onMouseEnter: () => setHoveredRow(true),
       onMouseLeave: () => setHoveredRow(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             style: {
@@ -2625,7 +2794,7 @@ function PropertyRow({ node, schemaProperty }) {
               backgroundColor: hoveredRow ? "var(--vj-bg-hover, #2a2d2e)" : "transparent"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "input",
                 {
                   value: node.key,
@@ -2636,32 +2805,33 @@ function PropertyRow({ node, schemaProperty }) {
                     borderRadius: 3,
                     color: "var(--vj-text, #cccccc)",
                     fontFamily: "var(--vj-font, monospace)",
-                    fontSize: 13,
+                    fontSize: "var(--vj-input-font-size, 13px)",
                     padding: "2px 6px",
                     width: 140,
                     flexShrink: 0
                   }
                 }
               ),
-              !isContainer ? hasEnumValues ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                "select",
+              !isContainer ? hasEnumValues ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                EnumInput,
                 {
+                  enumValues: schemaProperty.enum,
                   value: displayValue(),
-                  onChange: (e) => handleValueChange(e.target.value),
-                  style: {
-                    background: "var(--vj-input-bg, #3c3c3c)",
-                    border: "1px solid var(--vj-input-border, #555555)",
+                  onValueChange: handleValueChange,
+                  inputRef: enumRef,
+                  inputStyle: {
+                    background: "none",
+                    border: "1px solid transparent",
                     borderRadius: 3,
                     color: node.type === "string" ? "var(--vj-string, #ce9178)" : "var(--vj-number, #b5cea8)",
                     fontFamily: "var(--vj-font, monospace)",
-                    fontSize: 13,
+                    fontSize: "var(--vj-input-font-size, 13px)",
                     padding: "2px 6px",
                     flex: 1,
-                    cursor: "pointer"
-                  },
-                  children: schemaProperty.enum.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: String(v), children: String(v) }, i))
+                    outline: "none"
+                  }
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "input",
                 {
                   value: displayValue(),
@@ -2673,13 +2843,13 @@ function PropertyRow({ node, schemaProperty }) {
                     borderRadius: 3,
                     color: node.type === "string" ? "var(--vj-string, #ce9178)" : "var(--vj-number, #b5cea8)",
                     fontFamily: "var(--vj-font, monospace)",
-                    fontSize: 13,
+                    fontSize: "var(--vj-input-font-size, 13px)",
                     padding: "2px 6px",
                     flex: 1,
                     textAlign: "right"
                   }
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "span",
                 {
                   style: {
@@ -2692,7 +2862,7 @@ function PropertyRow({ node, schemaProperty }) {
                   children: displayValue()
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "div",
                 {
                   style: {
@@ -2703,7 +2873,7 @@ function PropertyRow({ node, schemaProperty }) {
                     flexShrink: 0
                   },
                   children: [
-                    isContainer && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    isContainer && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "button",
                       {
                         onClick: handleAddChild,
@@ -2722,7 +2892,7 @@ function PropertyRow({ node, schemaProperty }) {
                         children: "+"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "button",
                       {
                         onClick: handleRemove,
@@ -2747,7 +2917,7 @@ function PropertyRow({ node, schemaProperty }) {
             ]
           }
         ),
-        description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             style: {
@@ -2767,7 +2937,7 @@ function PropertyRow({ node, schemaProperty }) {
 function PropertyEditor({ className }) {
   const { state, actions } = useStudio();
   const selectedNode = state.selectedNodeId ? state.tree.nodesById.get(state.selectedNodeId) : null;
-  const handleChangeType = (0, import_react10.useCallback)(
+  const handleChangeType = (0, import_react11.useCallback)(
     (newType) => {
       if (!selectedNode) return;
       const newTree = (0, import_core5.changeType)(state.tree, selectedNode.id, newType);
@@ -2775,17 +2945,17 @@ function PropertyEditor({ className }) {
     },
     [state.tree, selectedNode, actions]
   );
-  const handleDuplicate = (0, import_react10.useCallback)(() => {
+  const handleDuplicate = (0, import_react11.useCallback)(() => {
     if (!selectedNode) return;
     const newTree = (0, import_core5.duplicateNode)(state.tree, selectedNode.id);
     actions.setTree(newTree);
   }, [state.tree, selectedNode, actions]);
-  const handleCopyPath = (0, import_react10.useCallback)(() => {
+  const handleCopyPath = (0, import_react11.useCallback)(() => {
     if (!selectedNode) return;
     navigator.clipboard.writeText(selectedNode.path).catch(() => {
     });
   }, [selectedNode]);
-  const handleCopyValue = (0, import_react10.useCallback)(() => {
+  const handleCopyValue = (0, import_react11.useCallback)(() => {
     if (!selectedNode) return;
     const value = (0, import_core5.toJson)(selectedNode);
     const text = typeof value === "string" ? value : JSON.stringify(value, null, 2);
@@ -2793,7 +2963,7 @@ function PropertyEditor({ className }) {
     });
   }, [selectedNode]);
   if (!selectedNode) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         className,
@@ -2826,7 +2996,7 @@ function PropertyEditor({ className }) {
     const newTree = (0, import_core5.addProperty)(state.tree, selectedNode.id, key, "");
     actions.setTree(newTree);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className,
@@ -2839,7 +3009,7 @@ function PropertyEditor({ className }) {
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             style: {
@@ -2855,7 +3025,7 @@ function PropertyEditor({ className }) {
               backgroundColor: "var(--vj-bg-panel, #252526)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "div",
                 {
                   style: {
@@ -2866,8 +3036,8 @@ function PropertyEditor({ className }) {
                     minWidth: 0
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Breadcrumbs, {}),
-                    schemaTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Breadcrumbs, {}),
+                    schemaTitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "span",
                       {
                         style: { fontSize: 10, color: "var(--vj-text-dim, #666666)" },
@@ -2877,7 +3047,7 @@ function PropertyEditor({ className }) {
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "div",
                 {
                   style: {
@@ -2887,7 +3057,7 @@ function PropertyEditor({ className }) {
                     flexShrink: 0
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "select",
                       {
                         value: selectedNode.type,
@@ -2897,16 +3067,16 @@ function PropertyEditor({ className }) {
                           border: "1px solid var(--vj-input-border, #555555)",
                           borderRadius: 3,
                           color: "var(--vj-text, #cccccc)",
-                          fontSize: 11,
+                          fontSize: "var(--vj-input-font-size, 13px)",
                           fontFamily: "var(--vj-font, monospace)",
                           padding: "1px 4px",
                           cursor: "pointer"
                         },
                         title: "Change type",
-                        children: ALL_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: t, children: t }, t))
+                        children: ALL_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: t, children: t }, t))
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "button",
                       {
                         onClick: handleCopyPath,
@@ -2915,7 +3085,7 @@ function PropertyEditor({ className }) {
                         children: "path"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "button",
                       {
                         onClick: handleCopyValue,
@@ -2924,7 +3094,7 @@ function PropertyEditor({ className }) {
                         children: "value"
                       }
                     ),
-                    selectedNode.parentId && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    selectedNode.parentId && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "button",
                       {
                         onClick: handleDuplicate,
@@ -2933,7 +3103,7 @@ function PropertyEditor({ className }) {
                         children: "dup"
                       }
                     ),
-                    isContainer && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    isContainer && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "button",
                       {
                         onClick: handleAdd,
@@ -2950,14 +3120,14 @@ function PropertyEditor({ className }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: isContainer ? selectedNode.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: isContainer ? selectedNode.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           PropertyRow,
           {
             node: child,
             schemaProperty: getChildSchema(child.key)
           },
           child.id
-        )) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PropertyRow, { node: selectedNode }) })
+        )) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PropertyRow, { node: selectedNode }) })
       ]
     }
   );
@@ -2974,9 +3144,9 @@ var actionButtonStyle = {
 };
 // src/diff-view.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_core6 = require("@visual-json/core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var DIFF_COLORS = {
   added: { bg: "#1e3a1e", marker: "+", label: "#4ec94e" },
   removed: { bg: "#3a1e1e", marker: "-", label: "#f48771" },
@@ -2997,7 +3167,7 @@ function formatValue(value) {
 }
 function DiffRow({ entry }) {
   const colors = DIFF_COLORS[entry.type];
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       style: {
@@ -3011,7 +3181,7 @@ function DiffRow({ entry }) {
         gap: 8
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
             style: {
@@ -3024,7 +3194,7 @@ function DiffRow({ entry }) {
             children: colors.marker
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
             style: {
@@ -3035,14 +3205,14 @@ function DiffRow({ entry }) {
             children: entry.path
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { flex: 1, display: "flex", gap: 8, overflow: "hidden" }, children: [
-          entry.type === "changed" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--vj-text-dim, #666666)" }, children: "\u2192" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { flex: 1, display: "flex", gap: 8, overflow: "hidden" }, children: [
+          entry.type === "changed" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "var(--vj-text-dim, #666666)" }, children: "\u2192" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) })
           ] }),
-          entry.type === "added" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) }),
-          entry.type === "removed" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) })
+          entry.type === "added" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#4ec94e" }, children: formatValue(entry.newValue) }),
+          entry.type === "removed" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "#f48771", textDecoration: "line-through" }, children: formatValue(entry.oldValue) })
         ] })
       ]
     }
@@ -3053,14 +3223,14 @@ function DiffView({
   currentJson,
   className
 }) {
-  const entries = (0, import_react11.useMemo)(
+  const entries = (0, import_react12.useMemo)(
     () => (0, import_core6.computeDiff)(originalJson, currentJson),
     [originalJson, currentJson]
   );
   const added = entries.filter((e) => e.type === "added").length;
   const removed = entries.filter((e) => e.type === "removed").length;
   const changed = entries.filter((e) => e.type === "changed").length;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className,
@@ -3073,7 +3243,7 @@ function DiffView({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             style: {
@@ -3088,18 +3258,18 @@ function DiffView({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--vj-text-muted, #999999)" }, children: entries.length === 0 ? "No changes" : `${entries.length} changes` }),
-              added > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#4ec94e" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "var(--vj-text-muted, #999999)" }, children: entries.length === 0 ? "No changes" : `${entries.length} changes` }),
+              added > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { color: "#4ec94e" }, children: [
                 "+",
                 added,
                 " added"
               ] }),
-              removed > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#f48771" }, children: [
+              removed > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { color: "#f48771" }, children: [
                 "-",
                 removed,
                 " removed"
               ] }),
-              changed > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#dcdcaa" }, children: [
+              changed > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { color: "#dcdcaa" }, children: [
                 "~",
                 changed,
                 " modified"
@@ -3107,7 +3277,7 @@ function DiffView({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             style: {
@@ -3121,7 +3291,7 @@ function DiffView({
             },
             children: "No differences detected"
           }
-        ) : entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DiffRow, { entry }, i)) })
+        ) : entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DiffRow, { entry }, i)) })
       ]
     }
   );