@particle-academy/fancy-flow 0.20.0 → 0.21.0

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var ReactExports = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-require('react-dom');
+var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1388,9 +1388,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);
   };
 }
 
@@ -1417,9 +1417,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);
   };
 }
 
@@ -1444,14 +1444,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);
   };
 }
 
@@ -1520,11 +1520,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);
   }
 };
 
@@ -2135,8 +2135,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
@@ -5150,6 +5150,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 = {
@@ -5517,10 +5551,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;
@@ -6478,6 +6512,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;
@@ -6834,7 +6870,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) {
@@ -6851,7 +6887,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)) {
@@ -6867,7 +6903,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;
@@ -6880,7 +6916,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;
@@ -6927,12 +6963,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);
@@ -6940,7 +6976,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;
 };
@@ -6986,12 +7022,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);
@@ -10189,7 +10225,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 NodeShellInner({
   node,
   accent,
@@ -11247,6 +11345,7 @@ function toSchemaNode(n) {
   const data = n.data ?? {};
   const kindName = data.kind ?? n.type ?? "custom";
   const ports = resolveNodePorts(n, getNodeKind(kindName) ?? void 0);
+  const node = n;
   return {
     id: n.id,
     kind: kindName,
@@ -11255,7 +11354,14 @@ function toSchemaNode(n) {
     description: data.description,
     config: data.config,
     inputs: ports.inputs,
-    outputs: ports.outputs
+    outputs: ports.outputs,
+    // Visual layout — only when explicitly set (never persist auto-`measured`
+    // dimensions, which are derived, not authored).
+    ...node.parentId ? { parentId: node.parentId } : {},
+    ...node.extent ? { extent: node.extent } : {},
+    ...typeof node.width === "number" ? { width: node.width } : {},
+    ...typeof node.height === "number" ? { height: node.height } : {},
+    ...node.style ? { style: node.style } : {}
   };
 }
 function toSchemaEdge(e) {
@@ -11268,9 +11374,13 @@ function toSchemaEdge(e) {
     label: typeof e.label === "string" ? e.label : void 0
   };
 }
+function migrateSchema(schema) {
+  return schema;
+}
 function importWorkflow(schema, options = {}) {
   const issues = [];
   const lenient = options.lenient === true;
+  schema = migrateSchema(schema);
   if (!schema || typeof schema !== "object") {
     return { ok: false, graph: { nodes: [], edges: [] }, issues: [{ level: "error", message: "Schema is not an object." }] };
   }
@@ -11304,6 +11414,12 @@ function importWorkflow(schema, options = {}) {
       id: n.id,
       type: kindId,
       position: { x: n.position?.x ?? 0, y: n.position?.y ?? 0 },
+      // Rehydrate visual layout onto the node's top level (where xyflow reads it).
+      ...n.parentId ? { parentId: n.parentId } : {},
+      ...n.extent ? { extent: n.extent } : {},
+      ...typeof n.width === "number" ? { width: n.width } : {},
+      ...typeof n.height === "number" ? { height: n.height } : {},
+      ...n.style ? { style: n.style } : {},
       data: {
         kind: kindId,
         label: n.label ?? kind?.label ?? n.kind,
@@ -11408,10 +11524,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() }),
@@ -12287,6 +12413,7 @@ exports.importWorkflow = importWorkflow;
 exports.isPause = isPause;
 exports.isRichInputEnabled = isRichInputEnabled;
 exports.listNodeKinds = listNodeKinds;
+exports.migrateSchema = migrateSchema;
 exports.onNodeKindsChanged = onNodeKindsChanged;
 exports.onRichInputAdapterChanged = onRichInputAdapterChanged;
 exports.paletteDropHandlers = paletteDropHandlers;