@elabs-ai/components-flow 4.0.0

package/src/flow-node/flow-node.tsx

@@ -0,0 +1,190 @@
+import { type ReactNode } from "react";
+import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
+import { Star, type LucideIcon } from "lucide-react";
+import { STATUS_TONE_ICONS } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+
+/** A node side that can carry a handle. Doubles as the handle's stable id. */
+export type FlowHandleSide = "top" | "right" | "bottom" | "left";
+
+/**
+ * Which sides of a node expose source and/or target handles. When omitted,
+ * `FlowNode` keeps its default single top **target** + bottom **source**. When
+ * set, a `<Handle>` is rendered on each listed side with a **stable id equal to
+ * the side name** (`"top" | "right" | "bottom" | "left"`), addressable per
+ * handle type — so edges (e.g. `FlowSmartEdge`) can pick a specific anchor.
+ */
+export interface FlowNodeHandles {
+  /** Sides exposing a source handle (handle `id` === side). */
+  source?: FlowHandleSide[];
+  /** Sides exposing a target handle (handle `id` === side). */
+  target?: FlowHandleSide[];
+}
+
+/**
+ * A `FlowNodeHandles` config exposing source **and** target anchors on all four
+ * sides. The recommended setup for `FlowSmartEdge` / `FlowFloatingEdge`: with
+ * anchors on every side, an edge connects on whichever side **faces** the other
+ * node (left/right when side-by-side, top/bottom when stacked) instead of always
+ * top/bottom. Spread onto a node's `data.handles`.
+ */
+export const FLOW_ALL_SIDE_HANDLES: FlowNodeHandles = {
+  source: ["top", "right", "bottom", "left"],
+  target: ["top", "right", "bottom", "left"],
+};
+
+export interface FlowNodeData extends Record<string, unknown> {
+  title: string;
+  subtitle?: string;
+  /** Short type label shown as an eyebrow, e.g. "Source", "Transform". */
+  kind?: string;
+  icon?: ReactNode;
+  tone?: "default" | "accent" | "success" | "warning" | "destructive";
+  /**
+   * Optional multi-side handle configuration. Absent → default top-target /
+   * bottom-source (unchanged, backward-compatible).
+   */
+  handles?: FlowNodeHandles;
+}
+
+export type BrandFlowNode = Node<FlowNodeData, "brand">;
+
+const toneRing: Record<NonNullable<FlowNodeData["tone"]>, string> = {
+  default: "border-border",
+  accent: "border-primary",
+  success: "border-success",
+  warning: "border-warning",
+  destructive: "border-destructive",
+};
+
+/**
+ * `tone` used to be encoded in colour ALONE — a 1px border and nothing else
+ * (WCAG 1.4.1, #387). Every non-default tone now also gets a leading Lucide
+ * glyph (`aria-hidden`, decorative — the sr-only text below carries the
+ * meaning) and a distinct accessible name. `success`/`warning`/`destructive`
+ * reuse `@elabs-ai/components-ui`'s `STATUS_TONE_ICONS` (the SAME glyph
+ * `StatusBadge`/`StatusIcon` already pair with that tone) rather than
+ * inventing a second icon vocabulary; `accent` has no canonical `StatusTone`
+ * counterpart to reuse (the closed `StatusTone` enum is deliberately
+ * CALM-ONLY and excludes a "primary/highlighted" bucket — see
+ * `status-badge.tsx`'s docblock), so it gets the one net-new pairing.
+ * `default` keeps neither — reaching for a glyph/label on every ordinary node
+ * would be visual and assistive-tech noise on the common case.
+ */
+const toneIcon: Partial<Record<NonNullable<FlowNodeData["tone"]>, LucideIcon>> = {
+  accent: Star,
+  success: STATUS_TONE_ICONS.success,
+  warning: STATUS_TONE_ICONS.warning,
+  destructive: STATUS_TONE_ICONS.destructive,
+};
+
+/** Ink for the tone glyph — the coloured-text rung (`-text`), not the fill rung. */
+const toneIconColor: Partial<Record<NonNullable<FlowNodeData["tone"]>, string>> = {
+  accent: "text-primary",
+  success: "text-success-text",
+  warning: "text-warning-text",
+  destructive: "text-destructive-text",
+};
+
+/** The accessible name the tone glyph stands in for (`sr-only`, #387). */
+const toneLabel: Partial<Record<NonNullable<FlowNodeData["tone"]>, string>> = {
+  accent: "Highlighted",
+  success: "Success",
+  warning: "Warning",
+  destructive: "Destructive",
+};
+
+const sidePosition: Record<FlowHandleSide, Position> = {
+  top: Position.Top,
+  right: Position.Right,
+  bottom: Position.Bottom,
+  left: Position.Left,
+};
+
+const handleClassName = "!size-2 !border-2 !border-flow-edge !bg-flow-node";
+
+/**
+ * Branded custom node. Register it in `nodeTypes={{ brand: FlowNode }}` and
+ * create nodes with `type: "brand"` and `data: FlowNodeData`.
+ */
+export function FlowNode({
+  data,
+  selected,
+  sourcePosition,
+  targetPosition,
+}: NodeProps<BrandFlowNode>) {
+  const tone = data.tone ?? "default";
+  const ToneIcon = toneIcon[tone];
+  return (
+    <div
+      data-tone={tone}
+      className={cn(
+        "min-w-44 rounded-lg border bg-flow-node px-3 py-2 text-flow-node-foreground shadow-sm transition-[box-shadow,border-color] duration-fast ease-standard",
+        toneRing[tone],
+        selected && "ring-2 ring-ring",
+      )}
+    >
+      {data.handles ? (
+        <>
+          {(data.handles.target ?? []).map((side) => (
+            <Handle
+              key={`target-${side}`}
+              id={side}
+              type="target"
+              position={sidePosition[side]}
+              className={handleClassName}
+            />
+          ))}
+          {(data.handles.source ?? []).map((side) => (
+            <Handle
+              key={`source-${side}`}
+              id={side}
+              type="source"
+              position={sidePosition[side]}
+              className={handleClassName}
+            />
+          ))}
+        </>
+      ) : (
+        <>
+          {/* Default single target + source. Positions follow the layout
+              direction: React Flow passes `sourcePosition`/`targetPosition`
+              (which `layoutFlow` sets per direction), so an LR layout puts the
+              target on the LEFT and the source on the RIGHT. Falls back to
+              top-in / bottom-out when unset. Handle placement is by `position`,
+              not DOM order. */}
+          <Handle
+            type="target"
+            position={targetPosition ?? Position.Top}
+            className={handleClassName}
+          />
+          <Handle
+            type="source"
+            position={sourcePosition ?? Position.Bottom}
+            className={handleClassName}
+          />
+        </>
+      )}
+      <div className="flex items-center gap-2">
+        {data.icon ? (
+          <span className="[&_svg]:size-4 text-muted-foreground">{data.icon}</span>
+        ) : null}
+        <div className="min-w-0 flex-1">
+          {data.kind ? (
+            <div className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+              {data.kind}
+            </div>
+          ) : null}
+          <div className="truncate text-sm font-medium">{data.title}</div>
+          {data.subtitle ? (
+            <div className="truncate text-xs text-muted-foreground">{data.subtitle}</div>
+          ) : null}
+        </div>
+        {ToneIcon ? (
+          <ToneIcon aria-hidden="true" className={cn("size-3.5 shrink-0", toneIconColor[tone])} />
+        ) : null}
+      </div>
+      {toneLabel[tone] ? <span className="sr-only">{toneLabel[tone]}</span> : null}
+    </div>
+  );
+}

package/src/flow-node/index.ts

@@ -0,0 +1,8 @@
+export {
+  FlowNode,
+  FLOW_ALL_SIDE_HANDLES,
+  type FlowNodeData,
+  type FlowNodeHandles,
+  type FlowHandleSide,
+  type BrandFlowNode,
+} from "./flow-node";

package/src/flow-placeholder-node/flow-placeholder-node.stories.tsx

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import "@xyflow/react/dist/style.css";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  ReactFlowProvider,
+  useEdgesState,
+  useNodesState,
+  useReactFlow,
+  type Edge,
+  type OnConnectEnd,
+} from "@xyflow/react";
+import { CanvasShell } from "../canvas-shell";
+import { FlowEdge } from "../flow-edge";
+import { FlowNode, type BrandFlowNode } from "../flow-node";
+import { useFlowLayout } from "../flow-layout";
+import { ZoomControls } from "../zoom-controls";
+import { FlowPlaceholderNode, type BrandFlowPlaceholderNode } from "./flow-placeholder-node";
+
+const nodeTypes = { brand: FlowNode, placeholder: FlowPlaceholderNode };
+const edgeTypes = { brand: FlowEdge };
+
+type CanvasNode = BrandFlowNode | BrandFlowPlaceholderNode;
+
+const meta = {
+  title: "Flow/FlowPlaceholderNode",
+  component: FlowPlaceholderNode,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof FlowPlaceholderNode>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A single placeholder attached below a real node — the resting shape. */
+export const Default: Story = {
+  render: () => {
+    const nodes: CanvasNode[] = [
+      {
+        id: "source",
+        type: "brand",
+        position: { x: 100, y: 20 },
+        data: { kind: "Source", title: "Ingest", tone: "accent" },
+      },
+      {
+        id: "placeholder",
+        type: "placeholder",
+        position: { x: 100, y: 160 },
+        data: { label: "Add step" },
+      },
+    ];
+    const edges: Edge[] = [
+      { id: "e-source-placeholder", source: "source", target: "placeholder", type: "brand" },
+    ];
+    return (
+      <div className="h-[300px]">
+        <CanvasShell nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} />
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Pattern 1 — Placeholder tail: click a placeholder to grow the graph.
+// ---------------------------------------------------------------------------
+
+const tailInitialNodes: CanvasNode[] = [
+  {
+    id: "start",
+    type: "brand",
+    position: { x: 60, y: 20 },
+    data: { kind: "Source", title: "Start", tone: "accent" },
+  },
+  {
+    id: "placeholder-0",
+    type: "placeholder",
+    position: { x: 60, y: 160 },
+    data: {},
+  },
+];
+const tailInitialEdges: Edge[] = [
+  { id: "e-start-placeholder-0", source: "start", target: "placeholder-0", type: "brand" },
+];
+
+/**
+ * Runs the auto-layout pass once the newly grown node has been measured.
+ * Rendered as a CanvasShell child (invisible) so `useFlowLayout` has React
+ * Flow context; `pendingRef` is flipped by `grow()` in the parent.
+ */
+function AutoLayoutOnGrowth({ pendingRef }: { pendingRef: React.MutableRefObject<boolean> }) {
+  const { layout, ready } = useFlowLayout();
+  useEffect(() => {
+    if (pendingRef.current && ready) {
+      pendingRef.current = false;
+      layout("TB");
+    }
+  }, [ready, layout, pendingRef]);
+  return null;
+}
+
+/**
+ * Click a placeholder: it becomes a real `FlowNode` and a fresh placeholder
+ * grows beneath it, then the graph auto-lays-out (`useFlowLayout`). This is
+ * the Workflow-Builder / Dynamic-Layouting growth pattern — the placeholder's
+ * `id` is kept when it's converted, so the edge pointing at it stays valid.
+ */
+function PlaceholderTailDemo() {
+  const [nodes, setNodes, onNodesChange] = useNodesState<CanvasNode>(tailInitialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>(tailInitialEdges);
+  const stepRef = useRef(0);
+  const pendingLayoutRef = useRef(false);
+
+  const grow = useCallback(
+    (placeholderId: string) => {
+      const step = ++stepRef.current;
+      const newPlaceholderId = `placeholder-${step}`;
+      setNodes((current) => [
+        ...current.map(
+          (node): CanvasNode =>
+            node.id === placeholderId
+              ? { ...node, type: "brand", data: { kind: "Process", title: `Step ${step}` } }
+              : node,
+        ),
+        {
+          id: newPlaceholderId,
+          type: "placeholder",
+          // Temporary position — the auto-layout pass below repositions it.
+          position: { x: 0, y: 0 },
+          data: {},
+        },
+      ]);
+      setEdges((current) => [
+        ...current,
+        {
+          id: `e-${placeholderId}-${newPlaceholderId}`,
+          source: placeholderId,
+          target: newPlaceholderId,
+          type: "brand",
+        },
+      ]);
+      pendingLayoutRef.current = true;
+    },
+    [setNodes, setEdges],
+  );
+
+  // Attach `onActivate` at render time (not stored in state) so the handler
+  // always closes over the node's own id.
+  const displayNodes = useMemo<CanvasNode[]>(
+    () =>
+      nodes.map((node) =>
+        node.type === "placeholder"
+          ? { ...node, data: { ...node.data, onActivate: () => grow(node.id) } }
+          : node,
+      ),
+    [nodes, grow],
+  );
+
+  return (
+    <div className="h-[520px]">
+      <CanvasShell
+        nodes={displayNodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+      >
+        <ZoomControls />
+        <AutoLayoutOnGrowth pendingRef={pendingLayoutRef} />
+      </CanvasShell>
+    </div>
+  );
+}
+
+/** Click "Add node" to grow the chain — each click converts the placeholder into a real step and re-lays-out. */
+export const PlaceholderTail: Story = {
+  render: () => <PlaceholderTailDemo />,
+};
+
+// ---------------------------------------------------------------------------
+// Pattern 2 — Add node on edge drop: drag a connection onto empty canvas.
+// ---------------------------------------------------------------------------
+
+const dropInitialNodes: BrandFlowNode[] = [
+  {
+    id: "drop-source",
+    type: "brand",
+    position: { x: 200, y: 40 },
+    data: {
+      kind: "Source",
+      title: "Drag from here",
+      subtitle: "onto empty canvas",
+      tone: "accent",
+    },
+  },
+];
+
+function AddNodeOnEdgeDropCanvas() {
+  const [nodes, setNodes, onNodesChange] = useNodesState<BrandFlowNode>(dropInitialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+  const countRef = useRef(0);
+  const { screenToFlowPosition } = useReactFlow();
+
+  const onConnectEnd: OnConnectEnd = useCallback(
+    (event, connectionState) => {
+      // A valid connection landed on a real handle — nothing to create.
+      if (connectionState.isValid || !connectionState.fromNode) return;
+
+      const point = "changedTouches" in event ? event.changedTouches[0] : event;
+      const id = `dropped-${++countRef.current}`;
+      const position = screenToFlowPosition({ x: point.clientX, y: point.clientY });
+
+      setNodes((current) =>
+        current.concat({
+          id,
+          type: "brand",
+          position,
+          data: { kind: "Process", title: `Node ${countRef.current}` },
+        }),
+      );
+      setEdges((current) =>
+        current.concat({
+          id: `e-${connectionState.fromNode!.id}-${id}`,
+          source: connectionState.fromNode!.id,
+          target: id,
+          type: "brand",
+        }),
+      );
+    },
+    [screenToFlowPosition, setNodes, setEdges],
+  );
+
+  return (
+    <div className="h-[500px]">
+      <CanvasShell
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnectEnd={onConnectEnd}
+      >
+        <ZoomControls />
+      </CanvasShell>
+    </div>
+  );
+}
+
+/**
+ * Drag from the node's bottom handle and release on empty canvas: a new
+ * `FlowNode` is created at the drop point and wired to the source. Uses
+ * `onConnectEnd` + `screenToFlowPosition` (needs a `ReactFlowProvider`
+ * ancestor so `useReactFlow` resolves outside `<CanvasShell>`'s children).
+ */
+export const AddNodeOnEdgeDrop: Story = {
+  render: () => (
+    <ReactFlowProvider>
+      <AddNodeOnEdgeDropCanvas />
+    </ReactFlowProvider>
+  ),
+};

package/src/flow-placeholder-node/flow-placeholder-node.test.tsx

@@ -0,0 +1,101 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// @xyflow/react requires real layout/measurement — mock the engine and assert
+// the brand component's own output. Real rendering + a11y are covered by
+// Storybook interaction tests.
+vi.mock("@xyflow/react", () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports -- a vi.mock factory is hoisted above imports; a lazy require avoids the TDZ a top-level import would hit
+  const React = require("react");
+  return {
+    Handle: ({
+      type,
+      position,
+      className,
+    }: {
+      type: string;
+      position: string;
+      className?: string;
+    }) =>
+      React.createElement("div", {
+        "data-testid": `handle-${type}`,
+        "data-position": position,
+        className,
+      }),
+    Position: { Top: "top", Bottom: "bottom", Left: "left", Right: "right" },
+  };
+});
+
+import { FlowPlaceholderNode, type BrandFlowPlaceholderNode } from "./flow-placeholder-node";
+import type { NodeProps } from "@xyflow/react";
+
+afterEach(cleanup);
+
+/** Minimal NodeProps factory for FlowPlaceholderNode (BrandFlowPlaceholderNode). */
+function makeProps(
+  data: BrandFlowPlaceholderNode["data"],
+  overrides: Partial<NodeProps<BrandFlowPlaceholderNode>> = {},
+): NodeProps<BrandFlowPlaceholderNode> {
+  return {
+    id: "test-placeholder",
+    data,
+    selected: false,
+    dragging: false,
+    zIndex: 0,
+    isConnectable: true,
+    draggable: true,
+    deletable: true,
+    selectable: true,
+    positionAbsoluteX: 0,
+    positionAbsoluteY: 0,
+    width: 160,
+    height: 48,
+    type: "placeholder",
+    ...overrides,
+  };
+}
+
+describe("FlowPlaceholderNode", () => {
+  it("renders a real, accessible button with the default label", () => {
+    render(<FlowPlaceholderNode {...makeProps({})} />);
+    const button = screen.getByRole("button", { name: "Add node" });
+    expect(button.tagName).toBe("BUTTON");
+  });
+
+  it("renders a custom label as the accessible name", () => {
+    render(<FlowPlaceholderNode {...makeProps({ label: "Add step" })} />);
+    expect(screen.getByRole("button", { name: "Add step" })).toBeInTheDocument();
+  });
+
+  it("renders a target handle so an edge can point at it", () => {
+    render(<FlowPlaceholderNode {...makeProps({})} />);
+    expect(screen.getByTestId("handle-target")).toBeInTheDocument();
+  });
+
+  it("fires onActivate on click", async () => {
+    const user = userEvent.setup();
+    const onActivate = vi.fn();
+    render(<FlowPlaceholderNode {...makeProps({ onActivate })} />);
+    await user.click(screen.getByRole("button", { name: "Add node" }));
+    expect(onActivate).toHaveBeenCalledTimes(1);
+  });
+
+  it("fires onActivate on keyboard Enter", async () => {
+    const user = userEvent.setup();
+    const onActivate = vi.fn();
+    render(<FlowPlaceholderNode {...makeProps({ onActivate })} />);
+    screen.getByRole("button", { name: "Add node" }).focus();
+    await user.keyboard("{Enter}");
+    expect(onActivate).toHaveBeenCalledTimes(1);
+  });
+
+  it("fires onActivate on keyboard Space", async () => {
+    const user = userEvent.setup();
+    const onActivate = vi.fn();
+    render(<FlowPlaceholderNode {...makeProps({ onActivate })} />);
+    screen.getByRole("button", { name: "Add node" }).focus();
+    await user.keyboard(" ");
+    expect(onActivate).toHaveBeenCalledTimes(1);
+  });
+});

package/src/flow-placeholder-node/flow-placeholder-node.tsx

@@ -0,0 +1,49 @@
+import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
+import { Plus } from "lucide-react";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+
+export interface FlowPlaceholderNodeData extends Record<string, unknown> {
+  /** Label rendered inside the placeholder. @default "Add node" */
+  label?: string;
+  /** Called when the placeholder is activated (click, Enter, or Space). */
+  onActivate?: () => void;
+}
+
+export type BrandFlowPlaceholderNode = Node<FlowPlaceholderNodeData, "placeholder">;
+
+/**
+ * Dashed, muted "add here" node — a clickable affordance that grows the
+ * graph. Register it in `nodeTypes={{ placeholder: FlowPlaceholderNode }}`
+ * and create nodes with `type: "placeholder"` and `data: FlowPlaceholderNodeData`.
+ *
+ * Renders a real `<button>` (keyboard-activatable via native Enter/Space) with
+ * an `aria-label`, and a single **target** `<Handle>` (top) so an existing
+ * edge can point at it. Fires `data.onActivate?.()` on activation — the
+ * typical handler converts the placeholder into a real `FlowNode` and grows a
+ * fresh placeholder beneath it (see the "Placeholder tail" story).
+ */
+export function FlowPlaceholderNode({ data }: NodeProps<BrandFlowPlaceholderNode>) {
+  const label = data.label ?? "Add node";
+  return (
+    <div className="relative">
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!size-2 !border-2 !border-flow-edge !bg-flow-node"
+      />
+      <button
+        type="button"
+        aria-label={label}
+        onClick={() => data.onActivate?.()}
+        className={cn(
+          "flex min-w-44 items-center justify-center gap-1.5 rounded-lg border border-dashed border-flow-group-border bg-flow-group px-3 py-2 text-muted-foreground",
+          "transition-colors duration-fast ease-standard hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        )}
+      >
+        <Plus className="size-4" aria-hidden="true" />
+        <span className="text-body">{label}</span>
+      </button>
+    </div>
+  );
+}

package/src/flow-placeholder-node/index.ts

@@ -0,0 +1,5 @@
+export {
+  FlowPlaceholderNode,
+  type FlowPlaceholderNodeData,
+  type BrandFlowPlaceholderNode,
+} from "./flow-placeholder-node";

package/src/flow-smart-edge/flow-smart-edge.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import "@xyflow/react/dist/style.css";
+import { type Edge } from "@xyflow/react";
+import { CanvasShell } from "../canvas-shell";
+import { FlowNode, type BrandFlowNode } from "../flow-node";
+import { FlowSmartEdge } from "./flow-smart-edge";
+
+const nodeTypes = { brand: FlowNode };
+const edgeTypes = { smart: FlowSmartEdge };
+
+const meta = {
+  title: "Flow/FlowSmartEdge",
+  component: FlowSmartEdge,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof FlowSmartEdge>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Multi-side nodes (handles on all four sides) connected by `FlowSmartEdge`.
+ * Drag a node around another and the edge re-picks the closest source/target
+ * handle pair, so the anchors flip as the geometry changes.
+ */
+export const Default: Story = {
+  render: () => {
+    const allSides = {
+      source: ["top", "right", "bottom", "left"],
+      target: ["top", "right", "bottom", "left"],
+    } as const;
+    const nodes: BrandFlowNode[] = [
+      {
+        id: "a",
+        type: "brand",
+        position: { x: 120, y: 160 },
+        data: {
+          kind: "Source",
+          title: "Ingest",
+          tone: "accent",
+          handles: { source: [...allSides.source], target: [...allSides.target] },
+        },
+      },
+      {
+        id: "b",
+        type: "brand",
+        position: { x: 420, y: 60 },
+        data: {
+          kind: "Process",
+          title: "Transform",
+          handles: { source: [...allSides.source], target: [...allSides.target] },
+        },
+      },
+      {
+        id: "c",
+        type: "brand",
+        position: { x: 420, y: 300 },
+        data: {
+          kind: "Output",
+          title: "Publish",
+          tone: "success",
+          handles: { source: [...allSides.source], target: [...allSides.target] },
+        },
+      },
+    ];
+    const edges: Edge[] = [
+      { id: "a-b", source: "a", target: "b", type: "smart" },
+      { id: "a-c", source: "a", target: "c", type: "smart" },
+    ];
+    return (
+      <div className="h-[480px]">
+        <CanvasShell nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} />
+      </div>
+    );
+  },
+};