@bian-womp/spark-workbench 0.1.24 → 0.1.25

package/lib/cjs/index.cjs

@@ -1756,8 +1756,13 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
     const { registry } = useWorkbenchContext();
     const rf = ReactFlow.useReactFlow();
     const ids = Array.from(registry.nodes.keys());
+    const [query, setQuery] = React.useState("");
+    const q = query.trim().toLowerCase();
+    const filteredIds = q
+        ? ids.filter((id) => id.toLowerCase().includes(q))
+        : ids;
     const root = { __children: {} };
-    for (const id of ids) {
+    for (const id of filteredIds) {
         const parts = id.split(".");
         let node = root;
         for (let i = 0; i < parts.length; i++) {
@@ -1768,7 +1773,7 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
                 node.__self = id;
         }
     }
-    const totalCount = ids.length;
+    const totalCount = filteredIds.length;
     // Ref for focus/outside click handling
     const ref = React.useRef(null);
     // Close on outside click and on ESC
@@ -1792,10 +1797,12 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
             window.removeEventListener("keydown", onKey);
         };
     }, [open, onClose]);
-    // Focus for keyboard accessibility
+    // Focus search input when menu opens
+    const inputRef = React.useRef(null);
     React.useEffect(() => {
-        if (open)
-            ref.current?.focus();
+        if (open) {
+            setTimeout(() => inputRef.current?.focus(), 0);
+        }
     }, [open]);
     if (!open || !clientPos)
         return null;
@@ -1816,14 +1823,19 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
         return (jsxRuntime.jsx("div", { children: entries.map(([key, child]) => {
                 const label = key;
                 const hasChildren = Object.keys(child.__children).length > 0;
-                !!child.__self && !hasChildren;
-                return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "px-2 py-1 text-[11px] uppercase tracking-wide text-gray-400", children: label }), child.__self && (jsxRuntime.jsx("button", { onClick: () => handleClick(child.__self), className: "block w-full text-left px-3 py-1 hover:bg-gray-100 cursor-pointer", title: child.__self, children: child.__self.split(".").slice(-1)[0] })), hasChildren && (jsxRuntime.jsx("div", { className: "pl-2 border-l border-gray-200 ml-2", children: renderTree(child, [...path, key]) }))] }, [...path, key].join(".")));
+                const idKey = [...path, key].join(".");
+                if (!hasChildren) {
+                    // Leaf: render only the action button, no group header
+                    return child.__self ? (jsxRuntime.jsx("button", { onClick: () => handleClick(child.__self), className: "block w-full text-left px-3 py-1 hover:bg-gray-100 cursor-pointer", title: child.__self, children: label }, idKey)) : null;
+                }
+                // Group: show label, optional action for id at this level, and children
+                return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "px-2 py-1 text-[11px] uppercase tracking-wide text-gray-400", children: label }), child.__self && (jsxRuntime.jsx("button", { onClick: () => handleClick(child.__self), className: "block w-full text-left px-3 py-1 hover:bg-gray-100 cursor-pointer", title: child.__self, children: label })), jsxRuntime.jsx("div", { className: "pl-2 border-l border-gray-200 ml-2", children: renderTree(child, [...path, key]) })] }, idKey));
             }) }));
     };
     return (jsxRuntime.jsxs("div", { ref: ref, tabIndex: -1, className: "fixed z-[1000] bg-white border border-gray-300 rounded-none shadow-lg p-1 min-w-[180px] text-sm text-gray-700", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node ", jsxRuntime.jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: renderTree(root) })] }));
+        }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node", " ", jsxRuntime.jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsxRuntime.jsx("div", { className: "px-2 pb-1", children: jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Filter nodes...", className: "w-full border border-gray-300 px-2 py-1 text-sm outline-none focus:border-gray-400", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation() }) }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: totalCount > 0 ? (renderTree(root)) : (jsxRuntime.jsx("div", { className: "px-3 py-2 text-gray-400", children: "No matches" })) })] }));
 }
 
 function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {