@particle-academy/fancy-flow 0.20.0 → 0.22.0

package/dist/llm/vercel-ai.d.cts

@@ -1,6 +1,6 @@
 import { LanguageModel } from 'ai';
-import { L as LlmRouteRequest, a as LlmClient } from '../capabilities-ChE3Xi8R.cjs';
-import '../types-sOmpCitB.cjs';
+import { L as LlmRouteRequest, a as LlmClient } from '../capabilities-exVeADXz.cjs';
+import '../types-CMSrWVYM.cjs';
 import '@xyflow/react';
 
 /**

package/dist/llm/vercel-ai.d.ts

@@ -1,6 +1,6 @@
 import { LanguageModel } from 'ai';
-import { L as LlmRouteRequest, a as LlmClient } from '../capabilities-DUhAc-EJ.js';
-import '../types-sOmpCitB.js';
+import { L as LlmRouteRequest, a as LlmClient } from '../capabilities-85Mjn4uW.js';
+import '../types-CMSrWVYM.js';
 import '@xyflow/react';
 
 /**

package/dist/registry/index.d.cts

@@ -1,9 +1,9 @@
-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 { P as PortDescriptor, b as FlowNode, N as NodeExecutor } from '../types-sOmpCitB.cjs';
+import { a as NodeKindDefinition, P as PortSpec } from '../types-DneUoivl.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-DneUoivl.cjs';
+import { P as PortDescriptor, a as FlowNode, N as NodeExecutor } from '../types-CMSrWVYM.cjs';
 import { Connection, Edge, NodeProps, NodeTypes } from '@xyflow/react';
-import { b as LlmRoute } from '../capabilities-ChE3Xi8R.cjs';
-export { C as CapabilityId, a as LlmClient, c as LlmRouteChoice, L as LlmRouteRequest, W as WorkflowResolution, d as WorkflowResolutionFailure, e as WorkflowResolver, f as capabilityStatus, g as getLlmClient, h as getWorkflowResolver, i as isResolutionFailure, r as registerLlmClient, j as registerWorkflowResolver } from '../capabilities-ChE3Xi8R.cjs';
+import { b as LlmRoute } from '../capabilities-exVeADXz.cjs';
+export { C as CapabilityId, a as LlmClient, c as LlmRouteChoice, L as LlmRouteRequest, W as WorkflowResolution, d as WorkflowResolutionFailure, e as WorkflowResolver, f as capabilityStatus, g as getLlmClient, h as getWorkflowResolver, i as isResolutionFailure, r as registerLlmClient, j as registerWorkflowResolver } from '../capabilities-exVeADXz.cjs';
 export { L as LEGACY_PAUSE_PREFIXES, a as PAUSE_PREFIX, P as PauseAwaiting, b as PauseSignal, d as decodePause, e as encodePause, i as isPause, p as pauseForHuman } from '../pause-9iT4tCEV.cjs';
 import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';

package/dist/registry/index.d.ts

@@ -1,9 +1,9 @@
-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 { P as PortDescriptor, b as FlowNode, N as NodeExecutor } from '../types-sOmpCitB.js';
+import { a as NodeKindDefinition, P as PortSpec } from '../types-CFEtuRWJ.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-CFEtuRWJ.js';
+import { P as PortDescriptor, a as FlowNode, N as NodeExecutor } from '../types-CMSrWVYM.js';
 import { Connection, Edge, NodeProps, NodeTypes } from '@xyflow/react';
-import { b as LlmRoute } from '../capabilities-DUhAc-EJ.js';
-export { C as CapabilityId, a as LlmClient, c as LlmRouteChoice, L as LlmRouteRequest, W as WorkflowResolution, d as WorkflowResolutionFailure, e as WorkflowResolver, f as capabilityStatus, g as getLlmClient, h as getWorkflowResolver, i as isResolutionFailure, r as registerLlmClient, j as registerWorkflowResolver } from '../capabilities-DUhAc-EJ.js';
+import { b as LlmRoute } from '../capabilities-85Mjn4uW.js';
+export { C as CapabilityId, a as LlmClient, c as LlmRouteChoice, L as LlmRouteRequest, W as WorkflowResolution, d as WorkflowResolutionFailure, e as WorkflowResolver, f as capabilityStatus, g as getLlmClient, h as getWorkflowResolver, i as isResolutionFailure, r as registerLlmClient, j as registerWorkflowResolver } from '../capabilities-85Mjn4uW.js';
 export { L as LEGACY_PAUSE_PREFIXES, a as PAUSE_PREFIX, P as PauseAwaiting, b as PauseSignal, d as decodePause, e as encodePause, i as isPause, p as pauseForHuman } from '../pause-9iT4tCEV.js';
 import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';

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 }; }
 
@@ -179,6 +179,8 @@ function categoryAccent(category) {
       return "#ec4899";
     case "output":
       return "#a855f7";
+    case "layout":
+      return "#64748b";
     default:
       return "#71717a";
   }
@@ -321,8 +323,14 @@ async function runFlow(graph, executors, onEvent = () => {
           continue;
         }
       }
-      if (node.type === "note") {
-        onEvent({ type: "node-status", nodeId: node.id, status: "idle", text: "annotation" });
+      const visualKind = getNodeKind(node.type ?? "");
+      if (node.type === "note" || visualKind?.category === "layout") {
+        onEvent({
+          type: "node-status",
+          nodeId: node.id,
+          status: "idle",
+          text: visualKind?.category === "layout" ? "lane" : "annotation"
+        });
         continue;
       }
       onEvent({ type: "node-status", nodeId: node.id, status: "running" });
@@ -733,9 +741,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 +770,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 +797,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 +873,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 +1488,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 +4481,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 +4882,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 +5843,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 +6201,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 +6218,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 +6234,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 +6247,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 +6294,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 +6307,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 +6353,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 +9550,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 +9644,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() }),
@@ -9637,6 +9753,27 @@ function previewValue(v) {
   }
   return "\u2026";
 }
+function LaneNodeInner(props) {
+  const data = props.data;
+  const config = data.config ?? {};
+  const title = config.title ?? data.label ?? "Lane";
+  const orientation = config.orientation ?? "horizontal";
+  const accent = config.color ?? data.color ?? categoryAccent("layout");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ["ff-lane", `ff-lane--${orientation}`, props.selected ? "ff-lane--selected" : ""].filter(Boolean).join(" "),
+      style: { borderColor: props.selected ? accent : void 0 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(NodeResizer, { isVisible: props.selected ?? false, color: accent, minWidth: 160, minHeight: 72 }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-lane__header", style: { background: accent }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-lane__title", children: title }) })
+      ]
+    }
+  );
+}
+var LaneNode = ReactExports.memo(LaneNodeInner);
+
+// src/registry/builtin.ts
 function casePorts(cases) {
   const byPort = /* @__PURE__ */ new Map();
   if (cases && typeof cases === "object" && !Array.isArray(cases)) {
@@ -10377,6 +10514,32 @@ var KINDS = [
       },
       { type: "expression", key: "message", label: "Message", required: true, example: "{{ $json }}" }
     ]
+  },
+  {
+    // Swimlane — a portless, resizable container. Child nodes are parented into
+    // it; it never runs (the runtime skips the `layout` category). Uses its own
+    // renderer (LaneNode) instead of the default card.
+    name: "@particle-academy/lane",
+    aliases: ["lane", "@fancy/lane"],
+    category: "layout",
+    label: "Lane",
+    description: "A resizable swimlane \u2014 drop nodes into it to group them.",
+    icon: "\u25A4",
+    inputs: [],
+    outputs: [],
+    configSchema: [
+      { type: "text", key: "title", label: "Title", default: "Lane" },
+      {
+        type: "select",
+        key: "orientation",
+        label: "Orientation",
+        default: "horizontal",
+        options: [{ value: "horizontal", label: "Row" }, { value: "vertical", label: "Column" }]
+      }
+    ],
+    defaultConfig: { title: "Lane", orientation: "horizontal" },
+    resizable: { minWidth: 160, minHeight: 72 },
+    component: LaneNode
   }
 ];
 function registerBuiltinKinds() {
@@ -10388,7 +10551,8 @@ var BUILTIN_KINDS = KINDS;
 function buildNodeTypes() {
   const map = {};
   for (const k of listNodeKinds()) {
-    for (const id2 of kindIds(k)) map[id2] = RegistryNode;
+    const renderer = k.component ?? RegistryNode;
+    for (const id2 of kindIds(k)) map[id2] = renderer;
   }
   return map;
 }