@particle-academy/fancy-flow 0.20.0 → 0.21.0

package/dist/registry/index.d.cts

@@ -1,5 +1,5 @@
-import { a as NodeKindDefinition, P as PortSpec } from '../types-D_jOR3Z2.cjs';
-export { C as ConfigField, b as CredentialConfigField, D as DocumentConfigField, E as ExpressionConfigField, J as JsonConfigField, K as KeyValueConfigField, N as NodeCategory, c as NumberConfigField, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField, S as SelectConfigField, f as SwitchConfigField, T as TextConfigField, g as TextareaConfigField } from '../types-D_jOR3Z2.cjs';
+import { a as NodeKindDefinition, P as PortSpec } from '../types-LG-YckGh.cjs';
+export { C as ConfigField, b as CredentialConfigField, D as DocumentConfigField, E as ExpressionConfigField, J as JsonConfigField, K as KeyValueConfigField, N as NodeCategory, c as NumberConfigField, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField, S as SelectConfigField, f as SwitchConfigField, T as TextConfigField, g as TextareaConfigField } from '../types-LG-YckGh.cjs';
 import { P as PortDescriptor, b as FlowNode, N as NodeExecutor } from '../types-sOmpCitB.cjs';
 import { Connection, Edge, NodeProps, NodeTypes } from '@xyflow/react';
 import { b as LlmRoute } from '../capabilities-ChE3Xi8R.cjs';

package/dist/registry/index.d.ts

@@ -1,5 +1,5 @@
-import { a as NodeKindDefinition, P as PortSpec } from '../types-NerkPtHS.js';
-export { C as ConfigField, b as CredentialConfigField, D as DocumentConfigField, E as ExpressionConfigField, J as JsonConfigField, K as KeyValueConfigField, N as NodeCategory, c as NumberConfigField, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField, S as SelectConfigField, f as SwitchConfigField, T as TextConfigField, g as TextareaConfigField } from '../types-NerkPtHS.js';
+import { a as NodeKindDefinition, P as PortSpec } from '../types-VGkCXEO6.js';
+export { C as ConfigField, b as CredentialConfigField, D as DocumentConfigField, E as ExpressionConfigField, J as JsonConfigField, K as KeyValueConfigField, N as NodeCategory, c as NumberConfigField, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField, S as SelectConfigField, f as SwitchConfigField, T as TextConfigField, g as TextareaConfigField } from '../types-VGkCXEO6.js';
 import { P as PortDescriptor, b as FlowNode, N as NodeExecutor } from '../types-sOmpCitB.js';
 import { Connection, Edge, NodeProps, NodeTypes } from '@xyflow/react';
 import { b as LlmRoute } from '../capabilities-DUhAc-EJ.js';

package/dist/registry.cjs

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var ReactExports = require('react');
-require('react-dom');
+var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -733,9 +733,9 @@ function creator_default(name) {
 // node_modules/d3-selection/src/selector.js
 function none() {
 }
-function selector_default(selector) {
-  return selector == null ? none : function() {
-    return this.querySelector(selector);
+function selector_default(selector2) {
+  return selector2 == null ? none : function() {
+    return this.querySelector(selector2);
   };
 }
 
@@ -762,9 +762,9 @@ function array(x) {
 function empty() {
   return [];
 }
-function selectorAll_default(selector) {
-  return selector == null ? empty : function() {
-    return this.querySelectorAll(selector);
+function selectorAll_default(selector2) {
+  return selector2 == null ? empty : function() {
+    return this.querySelectorAll(selector2);
   };
 }
 
@@ -789,14 +789,14 @@ function selectAll_default(select) {
 }
 
 // node_modules/d3-selection/src/matcher.js
-function matcher_default(selector) {
+function matcher_default(selector2) {
   return function() {
-    return this.matches(selector);
+    return this.matches(selector2);
   };
 }
-function childMatcher(selector) {
+function childMatcher(selector2) {
   return function(node) {
-    return node.matches(selector);
+    return node.matches(selector2);
   };
 }
 
@@ -865,11 +865,11 @@ EnterNode.prototype = {
   insertBefore: function(child, next) {
     return this._parent.insertBefore(child, next);
   },
-  querySelector: function(selector) {
-    return this._parent.querySelector(selector);
+  querySelector: function(selector2) {
+    return this._parent.querySelector(selector2);
   },
-  querySelectorAll: function(selector) {
-    return this._parent.querySelectorAll(selector);
+  querySelectorAll: function(selector2) {
+    return this._parent.querySelectorAll(selector2);
   }
 };
 
@@ -1480,8 +1480,8 @@ Selection.prototype = selection.prototype = {
 var selection_default = selection;
 
 // node_modules/d3-selection/src/select.js
-function select_default2(selector) {
-  return typeof selector === "string" ? new Selection([[document.querySelector(selector)]], [document.documentElement]) : new Selection([[selector]], root);
+function select_default2(selector2) {
+  return typeof selector2 === "string" ? new Selection([[document.querySelector(selector2)]], [document.documentElement]) : new Selection([[selector2]], root);
 }
 
 // node_modules/d3-selection/src/sourceEvent.js
@@ -4473,6 +4473,40 @@ function createMarkerIds(edges, { id: id2, defaultColor, defaultMarkerStart, def
     return markers;
   }, []).sort((a, b) => a.id.localeCompare(b.id));
 }
+function getNodeToolbarTransform(nodeRect, viewport, position, offset, align) {
+  let alignmentOffset = 0.5;
+  if (align === "start") {
+    alignmentOffset = 0;
+  } else if (align === "end") {
+    alignmentOffset = 1;
+  }
+  let pos = [
+    (nodeRect.x + nodeRect.width * alignmentOffset) * viewport.zoom + viewport.x,
+    nodeRect.y * viewport.zoom + viewport.y - offset
+  ];
+  let shift = [-100 * alignmentOffset, -100];
+  switch (position) {
+    case Position.Right:
+      pos = [
+        (nodeRect.x + nodeRect.width) * viewport.zoom + viewport.x + offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y
+      ];
+      shift = [0, -100 * alignmentOffset];
+      break;
+    case Position.Bottom:
+      pos[1] = (nodeRect.y + nodeRect.height) * viewport.zoom + viewport.y + offset;
+      shift[1] = 0;
+      break;
+    case Position.Left:
+      pos = [
+        nodeRect.x * viewport.zoom + viewport.x - offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y
+      ];
+      shift = [-100, -100 * alignmentOffset];
+      break;
+  }
+  return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
+}
 var SELECTED_NODE_Z = 1e3;
 var ROOT_PARENT_Z_INCREMENT = 10;
 var defaultOptions = {
@@ -4840,10 +4874,10 @@ function isParentSelected(node, nodeLookup) {
   }
   return isParentSelected(parentNode, nodeLookup);
 }
-function hasSelector(target, selector, domNode) {
+function hasSelector(target, selector2, domNode) {
   let current = target;
   do {
-    if (current?.matches?.(selector))
+    if (current?.matches?.(selector2))
       return true;
     if (current === domNode)
       return false;
@@ -5801,6 +5835,8 @@ var ResizeControlVariant;
   ResizeControlVariant2["Line"] = "line";
   ResizeControlVariant2["Handle"] = "handle";
 })(ResizeControlVariant || (ResizeControlVariant = {}));
+var XY_RESIZER_HANDLE_POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right"];
+var XY_RESIZER_LINE_POSITIONS = ["top", "right", "bottom", "left"];
 function getResizeDirection({ width, prevWidth, height, prevHeight, affectsX, affectsY }) {
   const deltaWidth = width - prevWidth;
   const deltaHeight = height - prevHeight;
@@ -6157,7 +6193,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     destroy
   };
 }
-function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector2, isEqual) {
   const instRef = ReactExports.useRef(null);
   let inst;
   if (instRef.current === null) {
@@ -6174,7 +6210,7 @@ function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnaps
       if (!hasMemo) {
         hasMemo = true;
         memoizedSnapshot = nextSnapshot;
-        const nextSelection2 = selector(nextSnapshot);
+        const nextSelection2 = selector2(nextSnapshot);
         if (isEqual !== void 0 && inst.hasValue) {
           const currentSelection = inst.value;
           if (isEqual(currentSelection, nextSelection2)) {
@@ -6190,7 +6226,7 @@ function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnaps
       if (Object.is(prevSnapshot, nextSnapshot)) {
         return prevSelection;
       }
-      const nextSelection = selector(nextSnapshot);
+      const nextSelection = selector2(nextSnapshot);
       if (isEqual !== void 0 && isEqual(prevSelection, nextSelection)) {
         memoizedSnapshot = nextSnapshot;
         return prevSelection;
@@ -6203,7 +6239,7 @@ function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnaps
     const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
     const getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? void 0 : () => memoizedSelector(maybeGetServerSnapshot());
     return [getSnapshotWithSelector, getServerSnapshotWithSelector];
-  }, [getSnapshot, getServerSnapshot, selector, isEqual]);
+  }, [getSnapshot, getServerSnapshot, selector2, isEqual]);
   const value = ReactExports.useSyncExternalStore(subscribe, getSelection, getServerSelection);
   ReactExports.useEffect(() => {
     inst.hasValue = true;
@@ -6250,12 +6286,12 @@ var createStore = (createState) => createState ? createStoreImpl(createState) :
 var { useDebugValue: useDebugValue2 } = ReactExports__default.default;
 var { useSyncExternalStoreWithSelector: useSyncExternalStoreWithSelector2 } = use_sync_external_store_with_selector_default;
 var identity3 = (arg) => arg;
-function useStoreWithEqualityFn(api, selector = identity3, equalityFn) {
+function useStoreWithEqualityFn(api, selector2 = identity3, equalityFn) {
   const slice = useSyncExternalStoreWithSelector2(
     api.subscribe,
     api.getState,
     api.getServerState || api.getInitialState,
-    selector,
+    selector2,
     equalityFn
   );
   useDebugValue2(slice);
@@ -6263,7 +6299,7 @@ function useStoreWithEqualityFn(api, selector = identity3, equalityFn) {
 }
 var createWithEqualityFnImpl = (createState, defaultEqualityFn) => {
   const api = createStore(createState);
-  const useBoundStoreWithEqualityFn = (selector, equalityFn = defaultEqualityFn) => useStoreWithEqualityFn(api, selector, equalityFn);
+  const useBoundStoreWithEqualityFn = (selector2, equalityFn = defaultEqualityFn) => useStoreWithEqualityFn(api, selector2, equalityFn);
   Object.assign(useBoundStoreWithEqualityFn, api);
   return useBoundStoreWithEqualityFn;
 };
@@ -6309,12 +6345,12 @@ function shallow$1(objA, objB) {
 var StoreContext = ReactExports.createContext(null);
 var Provider$1 = StoreContext.Provider;
 var zustandErrorMessage = errorMessages["error001"]("react");
-function useStore(selector, equalityFn) {
+function useStore(selector2, equalityFn) {
   const store = ReactExports.useContext(StoreContext);
   if (store === null) {
     throw new Error(zustandErrorMessage);
   }
-  return useStoreWithEqualityFn(store, selector, equalityFn);
+  return useStoreWithEqualityFn(store, selector2, equalityFn);
 }
 function useStoreApi() {
   const store = ReactExports.useContext(StoreContext);
@@ -9506,7 +9542,69 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
     ...color2 && { [isHandleControl ? "backgroundColor" : "borderColor"]: color2 }
   }, children: children2 });
 }
-ReactExports.memo(ResizeControl);
+var NodeResizeControl = ReactExports.memo(ResizeControl);
+function NodeResizer({ nodeId, isVisible = true, handleClassName, handleStyle, lineClassName, lineStyle, color: color2, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, autoScale = true, shouldResize, onResizeStart, onResize, onResizeEnd }) {
+  if (!isVisible) {
+    return null;
+  }
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [XY_RESIZER_LINE_POSITIONS.map((position) => jsxRuntime.jsx(NodeResizeControl, { className: lineClassName, style: lineStyle, nodeId, position, variant: ResizeControlVariant.Line, color: color2, minWidth, minHeight, maxWidth, maxHeight, onResizeStart, keepAspectRatio, autoScale, shouldResize, onResize, onResizeEnd }, position)), XY_RESIZER_HANDLE_POSITIONS.map((position) => jsxRuntime.jsx(NodeResizeControl, { className: handleClassName, style: handleStyle, nodeId, position, color: color2, minWidth, minHeight, maxWidth, maxHeight, onResizeStart, keepAspectRatio, autoScale, shouldResize, onResize, onResizeEnd }, position))] });
+}
+var selector = (state) => state.domNode?.querySelector(".react-flow__renderer");
+function NodeToolbarPortal({ children: children2 }) {
+  const wrapperRef = useStore(selector);
+  if (!wrapperRef) {
+    return null;
+  }
+  return reactDom.createPortal(children2, wrapperRef);
+}
+var nodeEqualityFn = (a, b) => a?.internals.positionAbsolute.x !== b?.internals.positionAbsolute.x || a?.internals.positionAbsolute.y !== b?.internals.positionAbsolute.y || a?.measured.width !== b?.measured.width || a?.measured.height !== b?.measured.height || a?.selected !== b?.selected || a?.internals.z !== b?.internals.z;
+var nodesEqualityFn = (a, b) => {
+  if (a.size !== b.size) {
+    return false;
+  }
+  for (const [key, node] of a) {
+    if (nodeEqualityFn(node, b.get(key))) {
+      return false;
+    }
+  }
+  return true;
+};
+var storeSelector = (state) => ({
+  x: state.transform[0],
+  y: state.transform[1],
+  zoom: state.transform[2],
+  selectedNodesCount: state.nodes.filter((node) => node.selected).length
+});
+function NodeToolbar({ nodeId, children: children2, className, style: style2, isVisible, position = Position.Top, offset = 10, align = "center", ...rest }) {
+  const contextNodeId = useNodeId();
+  const nodesSelector = ReactExports.useCallback((state) => {
+    const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ""];
+    const internalNodes = nodeIds.reduce((res, id2) => {
+      const node = state.nodeLookup.get(id2);
+      if (node) {
+        res.set(node.id, node);
+      }
+      return res;
+    }, /* @__PURE__ */ new Map());
+    return internalNodes;
+  }, [nodeId, contextNodeId]);
+  const nodes = useStore(nodesSelector, nodesEqualityFn);
+  const { x, y, zoom, selectedNodesCount } = useStore(storeSelector, shallow$1);
+  const isActive = typeof isVisible === "boolean" ? isVisible : nodes.size === 1 && nodes.values().next().value?.selected && selectedNodesCount === 1;
+  if (!isActive || !nodes.size) {
+    return null;
+  }
+  const nodeRect = getInternalNodesBounds(nodes);
+  const nodesArray = Array.from(nodes.values());
+  const zIndex = Math.max(...nodesArray.map((node) => node.internals.z + 1));
+  const wrapperStyle2 = {
+    position: "absolute",
+    transform: getNodeToolbarTransform(nodeRect, { x, y, zoom }, position, offset, align),
+    zIndex,
+    ...style2
+  };
+  return jsxRuntime.jsx(NodeToolbarPortal, { children: jsxRuntime.jsx("div", { style: wrapperStyle2, className: cc(["react-flow__node-toolbar", className]), ...rest, "data-id": nodesArray.reduce((acc, node) => `${acc}${node.id} `, "").trim(), children: children2 }) });
+}
 function RegistryNodeInner(props) {
   const kindName = props.data.kind ?? props.type;
   const kind = ReactExports.useMemo(() => getNodeKind(kindName), [kindName]);
@@ -9538,10 +9636,20 @@ function RegistryNodeInner(props) {
         "ff-node",
         `ff-node--status-${status}`,
         `ff-node--cat-${kind.category}`,
-        props.selected ? "ff-node--selected" : ""
+        props.selected ? "ff-node--selected" : "",
+        kind.resizable ? "ff-node--resizable" : ""
       ].filter(Boolean).join(" "),
       style: { borderColor: props.selected ? accent : void 0 },
       children: [
+        kind.resizable && /* @__PURE__ */ jsxRuntime.jsx(
+          NodeResizer,
+          {
+            isVisible: props.selected ?? false,
+            color: accent,
+            ...typeof kind.resizable === "object" ? kind.resizable : {}
+          }
+        ),
+        kind.toolbar && /* @__PURE__ */ jsxRuntime.jsx(NodeToolbar, { isVisible: props.selected ?? false, children: kind.toolbar({ nodeId: props.id, config, selected: props.selected ?? false }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ff-node__header", style: { background: accent }, children: [
           kind.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-node__icon", "aria-hidden": true, children: kind.icon }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-node__tag", children: kind.label.toUpperCase() }),