@ceebee/ui 1.6.0 → 1.8.0

package/THIRD_PARTY_NOTICES.md

@@ -20,6 +20,14 @@ Copyright © 2015-present Ant UED
 Icon components come from `@ant-design/icons` 6.x, a peer dependency. It is licensed under the MIT
 License.
 
+## React Flow (@xyflow/react)
+
+Copyright © 2019-present webkid GmbH
+
+`Diagram` and `DiagramEditor` in `@ceebee/ui/client` are built on the `@xyflow/react` 12.11.6 runtime,
+a dependency. Its base stylesheet is included in `styles.css`, and its appearance is set by Ceebee's
+Tokens. React Flow is licensed under the MIT License, and its copyright notice is retained here.
+
 ## dayjs
 
 Copyright © 2018-present iamkun

package/dist/client.d.ts

@@ -11,6 +11,7 @@ export { default as enUSDatePickerLocale } from 'antd/lib/date-picker/locale/en_
 export { default as idIDLocale } from 'antd/locale/id_ID.js';
 export { default as zhCNLocale } from 'antd/locale/zh_CN.js';
 import * as _base_ui_react from '@base-ui/react';
+import { ReactFlowProps } from '@xyflow/react';
 
 interface ModalProps extends ModalProps$1 {
     /** Separate explanatory copy announced after the dialog title. */
@@ -376,4 +377,94 @@ declare const PanZoomCanvas: typeof PanZoomCanvasRoot & {
     Skeleton: typeof PanZoomCanvasSkeleton;
 };
 
-export { type CeebeeAntStyleCache, CeebeeAntStyleProvider, type CeebeeAntStyleProviderProps, Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, Modal, type ModalProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, PanZoomCanvas, type PanZoomCanvasProps, type PanZoomCanvasSkeletonProps, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, StickerGroup, type StickerGroupProps, type StickerGroupSkeletonProps, type StickerItem, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ThemeProviderProps, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+interface DiagramSkeletonProps {
+    label?: string;
+}
+declare function DiagramSkeleton({ label }: DiagramSkeletonProps): react.JSX.Element;
+
+interface DiagramPosition {
+    x: number;
+    y: number;
+}
+type DiagramShape = 'rect' | 'pill' | 'diamond';
+interface DiagramNode {
+    id: string;
+    label: string;
+    /** Grid cells from the diagram's origin. The caller owns and stores positions. */
+    position: DiagramPosition;
+    shape?: DiagramShape;
+    tone?: Tone;
+    /** Static supplementary content under the label. It must not be interactive. */
+    content?: ReactNode;
+}
+interface DiagramEdge {
+    id: string;
+    from: string;
+    to: string;
+    label?: string;
+    tone?: Tone;
+}
+
+interface DiagramProps {
+    /** Accessible name for the diagram viewport. */
+    label: string;
+    nodes: readonly DiagramNode[];
+    edges: readonly DiagramEdge[];
+    hint?: string;
+    /** Accessible name for the list a screen reader walks instead of the drawing. */
+    outlineLabel?: string;
+    /** Localised names for the substrate's own controls and descriptions. */
+    ariaLabels?: ReactFlowProps['ariaLabelConfig'];
+}
+/**
+ * A read-only drawing of nodes joined by arrows, on the React Flow runtime. Pan and zoom are the
+ * viewport's; nothing in the drawing is focusable, draggable or selectable. The diagram is also given as an
+ * outline list, which the viewport is described by.
+ */
+declare function DiagramRoot({ label, nodes, edges, hint, outlineLabel, ariaLabels }: DiagramProps): react.JSX.Element;
+declare const Diagram: typeof DiagramRoot & {
+    Skeleton: typeof DiagramSkeleton;
+};
+
+interface DiagramRemoval {
+    nodeIds: string[];
+    edgeIds: string[];
+}
+interface DiagramRenameTarget {
+    kind: 'node' | 'edge';
+    id: string;
+}
+interface DiagramEditorProps {
+    label: string;
+    nodes: readonly DiagramNode[];
+    edges: readonly DiagramEdge[];
+    hint?: string;
+    selectedId?: string | null;
+    onSelectionChange?: (id: string) => void;
+    /** A request, in whole cells: the caller moves the node by updating `nodes`, or does not. */
+    onMoveNode?: (id: string, position: DiagramPosition) => void;
+    onConnect?: (from: string, to: string) => void;
+    /** A request: removing a node names the edges touching it too. Nothing is removed until `nodes`/`edges` change. */
+    onRemove?: (removal: DiagramRemoval) => void;
+    /** The caller renders the rename input; the editor only says what is to be renamed. */
+    onRename?: (target: DiagramRenameTarget) => void;
+    connectingStatus?: (nodeLabel: string) => string;
+    outlineLabel?: string;
+    /** Localised names for the substrate's own controls and keyboard descriptions. */
+    ariaLabels?: ReactFlowProps['ariaLabelConfig'];
+}
+/**
+ * Draws and edits a diagram on the React Flow runtime. React Flow owns dragging, panning, zooming,
+ * selection, focus and its keyboard model; this component keeps the caller in charge of the data by turning
+ * every change into a request, and adds keyboard connecting, which the runtime does not offer.
+ *
+ * Every value handed to the runtime keeps its identity between renders. The runtime pushes any prop whose
+ * identity changed into its store after each render, and some of those — the selection callback among them —
+ * fire again when they change, so a fresh function or array per render is enough to loop.
+ */
+declare function DiagramEditorRoot(props: DiagramEditorProps): react.JSX.Element;
+declare const DiagramEditor: typeof DiagramEditorRoot & {
+    Skeleton: typeof DiagramSkeleton;
+};
+
+export { type CeebeeAntStyleCache, CeebeeAntStyleProvider, type CeebeeAntStyleProviderProps, Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, Diagram, type DiagramEdge, DiagramEditor, type DiagramEditorProps, type DiagramNode, type DiagramPosition, type DiagramProps, type DiagramRemoval, type DiagramRenameTarget, type DiagramShape, type DiagramSkeletonProps, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, Modal, type ModalProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, PanZoomCanvas, type PanZoomCanvasProps, type PanZoomCanvasSkeletonProps, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, StickerGroup, type StickerGroupProps, type StickerGroupSkeletonProps, type StickerItem, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ThemeProviderProps, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };

package/dist/client.js

@@ -1,7 +1,7 @@
 "use client";
 import { Modal as Modal$1, Button, theme, ConfigProvider, Progress } from 'antd';
 export * from 'antd';
-import { createContext, useId, useRef, useCallback, useInsertionEffect, useLayoutEffect, useState, useEffect, useContext, useMemo, Children } from 'react';
+import { createContext, useId, useRef, useCallback, useInsertionEffect, useLayoutEffect, useState, useEffect, useMemo, useContext, Children } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
 export { default as enUSLocale } from 'antd/locale/en_US.js';
@@ -13,6 +13,7 @@ import { X, Minus, Plus, RotateCcw, Minimize2, Maximize2, Search, Check, Chevron
 import { Toast } from '@base-ui/react/toast';
 import { Popover } from '@base-ui/react/popover';
 import { AnimatePresence, motion } from 'motion/react';
+import { ReactFlow, ConnectionMode, Background, Controls, applyNodeChanges, MarkerType, Handle, Position } from '@xyflow/react';
 
 // src/lib/cn.ts
 function cn(...parts) {
@@ -662,7 +663,7 @@ var generatedCeebeeAntSeeds = {
           "colorBgContainer": "rgba(255, 253, 248, 1)",
           "colorBgElevated": "rgba(255, 255, 255, 1)",
           "colorBorder": "rgba(83, 84, 97, 1)",
-          "colorBorderSecondary": "rgba(156, 158, 167, 1)",
+          "colorBorderSecondary": "rgba(126, 115, 107, 1)",
           "fontSize": 14,
           "fontSizeSM": 12,
           "fontSizeLG": 16,
@@ -742,7 +743,7 @@ var generatedCeebeeAntSeeds = {
           "colorBgContainer": "rgba(40, 40, 50, 1)",
           "colorBgElevated": "rgba(51, 45, 41, 1)",
           "colorBorder": "rgba(160, 163, 184, 1)",
-          "colorBorderSecondary": "rgba(119, 121, 138, 1)",
+          "colorBorderSecondary": "rgba(156, 150, 166, 1)",
           "fontSize": 14,
           "fontSizeSM": 12,
           "fontSizeLG": 16,
@@ -815,10 +816,14 @@ function ThemeBridge({
       if (event.target instanceof HTMLElement && event.target.id === SKIN_LINK_ID) refresh();
     };
     document.addEventListener("load", onSkinLoad, true);
+    const coarsePointer = window.matchMedia("(pointer: coarse)");
+    const onPointerChange = () => refresh();
+    coarsePointer.addEventListener("change", onPointerChange);
     return () => {
       rootObserver.disconnect();
       headObserver.disconnect();
       document.removeEventListener("load", onSkinLoad, true);
+      coarsePointer.removeEventListener("change", onPointerChange);
     };
   }, [refresh]);
   const mergedTheme = useMemo(() => ({
@@ -1668,5 +1673,311 @@ function PanZoomCanvasRoot({
   ] });
 }
 var PanZoomCanvas = Object.assign(PanZoomCanvasRoot, { Skeleton: PanZoomCanvasSkeleton });
+function DiagramNodeView({ data, selected }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "cb-diagram__node",
+      "data-shape": data.shape,
+      "data-tone": data.tone,
+      "data-selected": String(Boolean(selected)),
+      "data-connecting": String(data.connecting),
+      children: [
+        /* @__PURE__ */ jsx(Handle, { id: "left", type: "target", position: Position.Left, className: "cb-diagram__handle", isConnectable: data.connectable }),
+        /* @__PURE__ */ jsx(Handle, { id: "top", type: "target", position: Position.Top, className: "cb-diagram__handle", isConnectable: data.connectable }),
+        /* @__PURE__ */ jsx("span", { className: "cb-diagram__label", children: data.label }),
+        data.content,
+        /* @__PURE__ */ jsx(Handle, { id: "right", type: "source", position: Position.Right, className: "cb-diagram__handle", isConnectable: data.connectable }),
+        /* @__PURE__ */ jsx(Handle, { id: "bottom", type: "source", position: Position.Bottom, className: "cb-diagram__handle", isConnectable: data.connectable })
+      ]
+    }
+  );
+}
+var FLOW_NODE_TYPE = "cb-diagram";
+var FALLBACK_CELL = 20;
+function cellSize(measured) {
+  return measured !== void 0 && measured > 0 ? measured : FALLBACK_CELL;
+}
+function toCells(position, cell) {
+  return { x: Math.round(position.x / cell), y: Math.round(position.y / cell) };
+}
+function toFlowNodes(nodes, cell, state) {
+  return nodes.map((node) => ({
+    id: node.id,
+    type: FLOW_NODE_TYPE,
+    position: { x: node.position.x * cell, y: node.position.y * cell },
+    selected: state.selectedId === node.id,
+    data: {
+      label: node.label,
+      content: node.content,
+      shape: node.shape ?? "rect",
+      tone: node.tone,
+      connecting: state.connectingFrom === node.id,
+      connectable: state.connectable
+    }
+  }));
+}
+function centreOf(node) {
+  const [columns, rows] = node.shape === "diamond" ? [4, 4] : [8, 3];
+  return { x: node.position.x + columns / 2, y: node.position.y + rows / 2 };
+}
+function edgeHandles(from, to) {
+  const a = centreOf(from);
+  const b = centreOf(to);
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  if (Math.abs(dx) >= Math.abs(dy)) {
+    return dx >= 0 ? { sourceHandle: "right", targetHandle: "left" } : { sourceHandle: "left", targetHandle: "right" };
+  }
+  return dy >= 0 ? { sourceHandle: "bottom", targetHandle: "top" } : { sourceHandle: "top", targetHandle: "bottom" };
+}
+function toFlowEdges(edges, nodes) {
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  return edges.flatMap((edge) => {
+    const from = byId.get(edge.from);
+    const to = byId.get(edge.to);
+    if (!from || !to) return [];
+    return [
+      {
+        id: edge.id,
+        source: edge.from,
+        target: edge.to,
+        ...edgeHandles(from, to),
+        label: edge.label,
+        className: edge.tone ? `cb-diagram__edge cb-diagram__edge--${edge.tone}` : "cb-diagram__edge",
+        markerEnd: { type: MarkerType.ArrowClosed }
+      }
+    ];
+  });
+}
+function settledMoves(changes, cell) {
+  return changes.flatMap(
+    (change) => change.type === "position" && change.position && change.dragging !== true ? [{ id: change.id, position: toCells(change.position, cell) }] : []
+  );
+}
+function changedMoves(moves, nodes) {
+  return moves.filter((move) => {
+    const current = nodes.find((node) => node.id === move.id)?.position;
+    return !current || current.x !== move.position.x || current.y !== move.position.y;
+  });
+}
+function mergeFlowNodes(current, next) {
+  const byId = new Map(current.map((node) => [node.id, node]));
+  let changed = current.length !== next.length;
+  const merged = next.map((node, index) => {
+    const previous = byId.get(node.id);
+    if (!previous) {
+      changed = true;
+      return node;
+    }
+    const same = current[index] === previous && previous.position.x === node.position.x && previous.position.y === node.position.y && previous.data.label === node.data.label && previous.data.content === node.data.content && previous.data.shape === node.data.shape && previous.data.tone === node.data.tone && previous.data.connecting === node.data.connecting && previous.data.connectable === node.data.connectable;
+    if (same) return previous;
+    changed = true;
+    return { ...node, selected: previous.selected, measured: previous.measured };
+  });
+  return changed ? merged : current;
+}
+function keepIfUnchanged(current, next) {
+  return next.length === current.length && next.every((item, index) => item === current[index]) ? current : next;
+}
+function applySelection(current, selectedId) {
+  let changed = false;
+  const next = current.map((node) => {
+    const selected = node.id === selectedId;
+    if (Boolean(node.selected) === selected) return node;
+    changed = true;
+    return { ...node, selected };
+  });
+  return changed ? next : current;
+}
+function connectStep(state, event) {
+  if (event.type === "cancel") return { state: { mode: "idle" } };
+  if (event.type === "start" || state.mode === "idle") return { state: { mode: "connecting", from: event.nodeId } };
+  if (event.nodeId === state.from) return { state: { mode: "idle" } };
+  return { state: { mode: "idle" }, connect: { from: state.from, to: event.nodeId } };
+}
+var NODE_TYPES = { [FLOW_NODE_TYPE]: DiagramNodeView };
+function useCellSize(ref) {
+  const [cell, setCell] = useState(FALLBACK_CELL);
+  useEffect(() => {
+    setCell(cellSize(ref.current?.getBoundingClientRect().width));
+  }, [ref]);
+  return cell;
+}
+function DiagramOutline({
+  id,
+  nodes,
+  edges,
+  label
+}) {
+  const byId = new Map(nodes.map((n) => [n.id, n]));
+  return /* @__PURE__ */ jsx("ul", { id, className: "cb-diagram__outline", "aria-label": label, children: nodes.map((node) => {
+    const leaving = edges.filter((e) => e.from === node.id && byId.has(e.to));
+    return /* @__PURE__ */ jsxs("li", { children: [
+      node.label,
+      leaving.length > 0 ? /* @__PURE__ */ jsx("ul", { children: leaving.map((edge) => /* @__PURE__ */ jsx("li", { children: `\u2192 ${byId.get(edge.to)?.label ?? ""}${edge.label ? `: ${edge.label}` : ""}` }, edge.id)) }) : null
+    ] }, node.id);
+  }) });
+}
+function safeId(id) {
+  return id.replace(/[^a-zA-Z0-9_-]/g, "");
+}
+function DiagramSkeleton({ label = "Loading diagram" }) {
+  return /* @__PURE__ */ jsx(PanZoomCanvasSkeleton, { label });
+}
+function DiagramRoot({ label, nodes, edges, hint, outlineLabel = "Diagram outline", ariaLabels }) {
+  const base = safeId(useId());
+  const cellRef = useRef(null);
+  const cell = useCellSize(cellRef);
+  const flowNodes = useMemo(() => toFlowNodes(nodes, cell, { connectable: false }), [nodes, cell]);
+  const flowEdges = useMemo(() => toFlowEdges(edges, nodes), [edges, nodes]);
+  return /* @__PURE__ */ jsxs("div", { className: "cb-diagram", children: [
+    /* @__PURE__ */ jsx("span", { ref: cellRef, className: "cb-diagram__cell", "aria-hidden": "true" }),
+    hint ? /* @__PURE__ */ jsx("p", { className: "cb-diagram__hint", children: hint }) : null,
+    /* @__PURE__ */ jsx("div", { className: "cb-diagram__viewport", role: "region", "aria-label": label, "aria-describedby": `${base}-outline`, children: /* @__PURE__ */ jsxs(
+      ReactFlow,
+      {
+        nodes: flowNodes,
+        edges: flowEdges,
+        nodeTypes: NODE_TYPES,
+        connectionMode: ConnectionMode.Loose,
+        nodesDraggable: false,
+        nodesConnectable: false,
+        elementsSelectable: false,
+        nodesFocusable: false,
+        edgesFocusable: false,
+        fitView: true,
+        minZoom: 0.5,
+        maxZoom: 2,
+        ariaLabelConfig: ariaLabels,
+        children: [
+          /* @__PURE__ */ jsx(Background, { gap: cell }),
+          /* @__PURE__ */ jsx(Controls, { showInteractive: false })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DiagramOutline, { id: `${base}-outline`, nodes, edges, label: outlineLabel })
+  ] });
+}
+var Diagram = Object.assign(DiagramRoot, { Skeleton: DiagramSkeleton });
+var CONNECT_KEY = "c";
+var DELETE_KEYS = ["Delete", "Backspace"];
+var defaultConnectingStatus = (node) => `Connecting from ${node}. Focus another node and press C, or press Escape to cancel.`;
+function elementAt(target) {
+  if (!(target instanceof Element)) return null;
+  const node = target.closest(".react-flow__node")?.getAttribute("data-id");
+  if (node) return { kind: "node", id: node };
+  const edge = target.closest(".react-flow__edge")?.getAttribute("data-id");
+  return edge ? { kind: "edge", id: edge } : null;
+}
+function DiagramEditorRoot(props) {
+  const { label, nodes, edges, hint, selectedId, connectingStatus = defaultConnectingStatus, outlineLabel = "Diagram outline", ariaLabels } = props;
+  const base = safeId(useId());
+  const cellRef = useRef(null);
+  const cell = useCellSize(cellRef);
+  const [connect, setConnect] = useState({ mode: "idle" });
+  const connectingFrom = connect.mode === "connecting" ? connect.from : null;
+  const latest = useRef({ props, cell, connect });
+  latest.current = { props, cell, connect };
+  const reportedSelection = useRef(selectedId ?? null);
+  const [resync, setResync] = useState(0);
+  const [flowNodes, setFlowNodes] = useState(() => toFlowNodes(nodes, cell, { selectedId, connectable: true }));
+  useEffect(() => {
+    setFlowNodes((current) => mergeFlowNodes(current, toFlowNodes(nodes, cell, { connectingFrom, connectable: true })));
+  }, [nodes, cell, connectingFrom, resync]);
+  useEffect(() => {
+    if (selectedId === void 0) return;
+    reportedSelection.current = selectedId;
+    setFlowNodes((current) => applySelection(current, selectedId));
+  }, [selectedId]);
+  const flowEdges = useMemo(() => toFlowEdges(edges, nodes), [edges, nodes]);
+  const snapGrid = useMemo(() => [cell, cell], [cell]);
+  const step = useCallback((event) => {
+    const { connect: state, props: current } = latest.current;
+    const next = connectStep(state, event);
+    setConnect(next.state);
+    if (next.connect) current.onConnect?.(next.connect.from, next.connect.to);
+  }, []);
+  const onNodesChange = useCallback((changes) => {
+    const { props: current, cell: size } = latest.current;
+    setFlowNodes((mirror) => keepIfUnchanged(mirror, applyNodeChanges(changes.filter((change) => change.type !== "remove"), mirror)));
+    const moves = changedMoves(settledMoves(changes, size), current.nodes);
+    for (const move of moves) current.onMoveNode?.(move.id, move.position);
+    if (moves.length > 0) setResync((n) => n + 1);
+  }, []);
+  const onConnectEdge = useCallback((connection) => {
+    if (connection.source !== connection.target) latest.current.props.onConnect?.(connection.source, connection.target);
+  }, []);
+  const onBeforeDelete = useCallback(async ({ nodes: gone, edges: goneEdges }) => {
+    latest.current.props.onRemove?.({ nodeIds: gone.map((n) => n.id), edgeIds: goneEdges.map((e) => e.id) });
+    return false;
+  }, []);
+  const onSelectionChange = useCallback(({ nodes: chosen }) => {
+    const id = chosen[0]?.id;
+    if (!id || id === reportedSelection.current) return;
+    reportedSelection.current = id;
+    latest.current.props.onSelectionChange?.(id);
+  }, []);
+  const onNodeClick = useCallback(
+    (_, node) => {
+      if (latest.current.connect.mode === "connecting") step({ type: "choose", nodeId: node.id });
+    },
+    [step]
+  );
+  const onPaneClick = useCallback(() => {
+    if (latest.current.connect.mode === "connecting") step({ type: "cancel" });
+  }, [step]);
+  const onKeyDown = useCallback(
+    (event) => {
+      const target = elementAt(event.target);
+      if (event.key.toLowerCase() === CONNECT_KEY && target?.kind === "node" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+        event.preventDefault();
+        step({ type: "choose", nodeId: target.id });
+      } else if (event.key === "Escape" && latest.current.connect.mode === "connecting") {
+        step({ type: "cancel" });
+      } else if (event.key === "F2" && target) {
+        event.preventDefault();
+        latest.current.props.onRename?.(target);
+      }
+    },
+    [step]
+  );
+  const labelOf = (id) => nodes.find((n) => n.id === id)?.label ?? "";
+  return /* @__PURE__ */ jsxs("div", { className: "cb-diagram cb-diagram--editor", children: [
+    /* @__PURE__ */ jsx("span", { ref: cellRef, className: "cb-diagram__cell", "aria-hidden": "true" }),
+    hint ? /* @__PURE__ */ jsx("p", { className: "cb-diagram__hint", children: hint }) : null,
+    /* @__PURE__ */ jsx("div", { className: "cb-diagram__viewport", role: "region", "aria-label": label, "aria-describedby": `${base}-outline`, children: /* @__PURE__ */ jsxs(
+      ReactFlow,
+      {
+        nodes: flowNodes,
+        edges: flowEdges,
+        nodeTypes: NODE_TYPES,
+        onNodesChange,
+        onConnect: onConnectEdge,
+        onBeforeDelete,
+        onSelectionChange,
+        onNodeClick,
+        onPaneClick,
+        onKeyDown,
+        connectionMode: ConnectionMode.Loose,
+        connectOnClick: true,
+        snapToGrid: true,
+        snapGrid,
+        deleteKeyCode: DELETE_KEYS,
+        fitView: true,
+        minZoom: 0.5,
+        maxZoom: 2,
+        ariaLabelConfig: ariaLabels,
+        children: [
+          /* @__PURE__ */ jsx(Background, { gap: cell }),
+          /* @__PURE__ */ jsx(Controls, { showInteractive: false })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("p", { className: "cb-diagram__status", role: "status", children: connectingFrom ? connectingStatus(labelOf(connectingFrom)) : "" }),
+    /* @__PURE__ */ jsx(DiagramOutline, { id: `${base}-outline`, nodes, edges, label: outlineLabel })
+  ] });
+}
+var DiagramEditor = Object.assign(DiagramEditorRoot, { Skeleton: DiagramSkeleton });
 
-export { CeebeeAntStyleProvider, Checklist, CommandPalette, DEFAULT_LABELS, LabelsProvider, Modal, MotionProvider, PanZoomCanvas, Reveal, Sidebar, Stagger, StickerGroup, ThemeBridge, ThemeProvider, ToastProvider, TopBar, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+export { CeebeeAntStyleProvider, Checklist, CommandPalette, DEFAULT_LABELS, Diagram, DiagramEditor, LabelsProvider, Modal, MotionProvider, PanZoomCanvas, Reveal, Sidebar, Stagger, StickerGroup, ThemeBridge, ThemeProvider, ToastProvider, TopBar, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };

package/dist/index.js

@@ -550,7 +550,7 @@ var generatedCeebeeAntSeeds = {
           "colorBgContainer": "rgba(255, 253, 248, 1)",
           "colorBgElevated": "rgba(255, 255, 255, 1)",
           "colorBorder": "rgba(83, 84, 97, 1)",
-          "colorBorderSecondary": "rgba(156, 158, 167, 1)",
+          "colorBorderSecondary": "rgba(126, 115, 107, 1)",
           "fontSize": 14,
           "fontSizeSM": 12,
           "fontSizeLG": 16,
@@ -630,7 +630,7 @@ var generatedCeebeeAntSeeds = {
           "colorBgContainer": "rgba(40, 40, 50, 1)",
           "colorBgElevated": "rgba(51, 45, 41, 1)",
           "colorBorder": "rgba(160, 163, 184, 1)",
-          "colorBorderSecondary": "rgba(119, 121, 138, 1)",
+          "colorBorderSecondary": "rgba(156, 150, 166, 1)",
           "fontSize": 14,
           "fontSizeSM": 12,
           "fontSizeLG": 16,

package/dist/skins/moodboard.css

@@ -90,3 +90,24 @@
     --cb-sticker-shadow: 0 var(--cb-space-1) var(--cb-space-2) oklch(0 0 0 / 0.42);
   }
 }
+
+/* Someone on this Skin who asks for more contrast should get an edge in this
+   Skin's own warmth, not the neutral one the base falls back to. These values
+   are the ones CeeBee List's Flutter client had tuned locally and shipped —
+   what already worked, abstracted so every product on this Skin gets it.
+
+   `html:root` matches the base's own specificity and comes later, which is how
+   this wins. The base claims that weight so a Skin cannot weaken an
+   accessibility edge; both of these are stronger than what they replace —
+   0.5632 against the base's 0.70 in light, 0.6834 against 0.58 in dark — so the
+   rule is honoured rather than worked around. */
+@media (prefers-contrast: more) {
+  html:root {
+    --cb-border: oklch(0.5632 0.0183 58.4);
+  }
+
+  html:root[data-theme="dark"],
+  html:root:not([data-theme="light"]) {
+    --cb-border: oklch(0.6834 0.0241 302.8);
+  }
+}

package/dist/styles.css

@@ -38,9 +38,23 @@
   --cb-weight-medium: 500;
   --cb-weight-semibold: 600;
 
-  --cb-control-height-sm: 2rem;
-  --cb-control-height-md: 2.5rem;
-  --cb-control-height-lg: 3rem;
+  /* The height a control must not go below for the pointer in use. A mouse points and can hit a
+     32px target; a finger cannot, so a coarse pointer needs 44px — WCAG 2.5.5, Apple HIG, and
+     Material all land there. */
+  --cb-control-floor-fine: 2rem;
+  --cb-control-floor-coarse: 2.75rem;
+  --cb-control-floor: var(--cb-control-floor-fine);
+
+  /* The ladder's preferred heights. A density scale retunes these; the resolved heights below are
+     `max()` of the preferred step and the active floor, so no scale can shrink a control under the
+     target its pointer can hit. */
+  --cb-control-height-base-sm: 2rem;
+  --cb-control-height-base-md: 2.5rem;
+  --cb-control-height-base-lg: 3rem;
+
+  --cb-control-height-sm: max(var(--cb-control-height-base-sm), var(--cb-control-floor));
+  --cb-control-height-md: max(var(--cb-control-height-base-md), var(--cb-control-floor));
+  --cb-control-height-lg: max(var(--cb-control-height-base-lg), var(--cb-control-floor));
   --cb-canvas-block-size: 32rem;
 
   --cb-sticker-enter-y: var(--cb-space-3);
@@ -73,6 +87,16 @@
   --cb-z-overlay: var(--cb-z-modal-backdrop);
 }
 
+/* A coarse pointer switches the active floor to the touch target. The resolved heights above are
+   `max()` of the preferred step and that floor, so `sm` and `md` both reach 44px and `lg` keeps its
+   48px — nothing here restates a step, so retuning `--cb-control-height-base-*` on either pointer
+   still cannot take a control under its floor. */
+@media (pointer: coarse) {
+  :root {
+    --cb-control-floor: var(--cb-control-floor-coarse);
+  }
+}
+
 /* tokens/skin.css */
 /* Skin tokens: the default Ceebee skin. A Skin file rewrites only these.
    Light is defined on bare :root so no colour has its only definition inside a media query. */
@@ -363,6 +387,513 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   --cb-skeleton-opacity-max: 1;
 }
 
+/* @xyflow/react/dist/base.css (MIT, see THIRD_PARTY_NOTICES.md) */
+/* this will be exported as base.css and can be used for a basic styling */
+/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
+.react-flow {
+  direction: ltr;
+
+  --xy-edge-stroke-default: #b1b1b7;
+  --xy-edge-stroke-width-default: 1;
+  --xy-edge-stroke-selected-default: #555;
+
+  --xy-connectionline-stroke-default: #b1b1b7;
+  --xy-connectionline-stroke-width-default: 1;
+
+  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
+
+  --xy-minimap-background-color-default: #fff;
+  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
+  --xy-minimap-mask-stroke-color-default: transparent;
+  --xy-minimap-mask-stroke-width-default: 1;
+  --xy-minimap-node-background-color-default: #e2e2e2;
+  --xy-minimap-node-stroke-color-default: transparent;
+  --xy-minimap-node-stroke-width-default: 2;
+
+  --xy-background-color-default: transparent;
+  --xy-background-pattern-dots-color-default: #91919a;
+  --xy-background-pattern-lines-color-default: #eee;
+  --xy-background-pattern-cross-color-default: #e2e2e2;
+  background-color: var(--xy-background-color, var(--xy-background-color-default));
+  --xy-node-border-default: 1px solid #bbb;
+  --xy-node-border-selected-default: 1px solid #555;
+
+  --xy-handle-background-color-default: #333;
+
+  --xy-selection-background-color-default: rgba(150, 150, 180, 0.1);
+  --xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
+  --xy-resize-background-color-default: #3367d9;
+}
+.react-flow.dark {
+  --xy-edge-stroke-default: #3e3e3e;
+  --xy-edge-stroke-width-default: 1;
+  --xy-edge-stroke-selected-default: #727272;
+
+  --xy-connectionline-stroke-default: #b1b1b7;
+  --xy-connectionline-stroke-width-default: 1;
+
+  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
+
+  --xy-minimap-background-color-default: #141414;
+  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
+  --xy-minimap-mask-stroke-color-default: transparent;
+  --xy-minimap-mask-stroke-width-default: 1;
+  --xy-minimap-node-background-color-default: #2b2b2b;
+  --xy-minimap-node-stroke-color-default: transparent;
+  --xy-minimap-node-stroke-width-default: 2;
+
+  --xy-background-color-default: #141414;
+  --xy-background-pattern-dots-color-default: #555;
+  --xy-background-pattern-lines-color-default: #333;
+  --xy-background-pattern-cross-color-default: #333;
+  --xy-node-color-default: #f8f8f8;
+}
+.react-flow__background {
+  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
+  pointer-events: none;
+  z-index: -1;
+}
+.react-flow__container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.react-flow__pane {
+  z-index: 1;
+  touch-action: none;
+}
+.react-flow__pane.draggable {
+    cursor: grab;
+  }
+.react-flow__pane.dragging {
+    cursor: grabbing;
+  }
+.react-flow__pane.selection {
+    cursor: pointer;
+  }
+.react-flow__viewport {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.react-flow__renderer {
+  z-index: 4;
+}
+.react-flow__selection {
+  z-index: 6;
+}
+.react-flow__nodesselection-rect:focus,
+.react-flow__nodesselection-rect:focus-visible {
+  outline: none;
+}
+.react-flow__edge-path {
+  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
+  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
+  fill: none;
+}
+.react-flow__connection-path {
+  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
+  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
+  fill: none;
+}
+.react-flow .react-flow__edges {
+  position: absolute;
+}
+.react-flow .react-flow__edges svg {
+    overflow: visible;
+    position: absolute;
+    pointer-events: none;
+  }
+.react-flow__edge {
+  pointer-events: visibleStroke;
+}
+.react-flow__edge.selectable {
+    cursor: pointer;
+  }
+.react-flow__edge.animated path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+.react-flow__edge.animated path.react-flow__edge-interaction {
+    stroke-dasharray: none;
+    animation: none;
+  }
+.react-flow__edge.inactive {
+    pointer-events: none;
+  }
+.react-flow__edge.selected,
+  .react-flow__edge:focus,
+  .react-flow__edge:focus-visible {
+    outline: none;
+  }
+.react-flow__edge.selected .react-flow__edge-path,
+  .react-flow__edge.selectable:focus .react-flow__edge-path,
+  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
+    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
+  }
+.react-flow__edge-textwrapper {
+    pointer-events: all;
+  }
+.react-flow__edge .react-flow__edge-text {
+    pointer-events: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+/* Arrowhead marker styles - use CSS custom properties as default */
+.react-flow__arrowhead polyline {
+  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
+}
+.react-flow__arrowhead polyline.arrowclosed {
+  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
+}
+.react-flow__connection {
+  pointer-events: none;
+}
+.react-flow__connection .animated {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+svg.react-flow__connectionline {
+  z-index: 1001;
+  overflow: visible;
+  position: absolute;
+}
+.react-flow__nodes {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+.react-flow__node {
+  position: absolute;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  cursor: default;
+}
+.react-flow__node.selectable {
+    cursor: pointer;
+  }
+.react-flow__node.draggable {
+    cursor: grab;
+    pointer-events: all;
+  }
+.react-flow__node.draggable.dragging {
+      cursor: grabbing;
+    }
+.react-flow__nodesselection {
+  z-index: 3;
+  transform-origin: left top;
+  pointer-events: none;
+}
+.react-flow__nodesselection-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: grab;
+  }
+.react-flow__handle {
+  position: absolute;
+  pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
+  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
+}
+.react-flow__handle.connectingfrom {
+    pointer-events: all;
+  }
+.react-flow__handle.connectionindicator {
+    pointer-events: all;
+    cursor: crosshair;
+  }
+.react-flow__handle-bottom {
+    top: auto;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, 50%);
+  }
+.react-flow__handle-top {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+.react-flow__handle-left {
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+.react-flow__handle-right {
+    top: 50%;
+    right: 0;
+    transform: translate(50%, -50%);
+  }
+.react-flow__edgeupdater {
+  cursor: move;
+  pointer-events: all;
+}
+.react-flow__pane.selection .react-flow__panel {
+  pointer-events: none;
+}
+.react-flow__panel {
+  position: absolute;
+  z-index: 5;
+  margin: 15px;
+}
+.react-flow__panel.top {
+    top: 0;
+  }
+.react-flow__panel.bottom {
+    bottom: 0;
+  }
+.react-flow__panel.top.center, .react-flow__panel.bottom.center {
+      left: 50%;
+      transform: translateX(-15px) translateX(-50%);
+    }
+.react-flow__panel.left {
+    left: 0;
+  }
+.react-flow__panel.right {
+    right: 0;
+  }
+.react-flow__panel.left.center, .react-flow__panel.right.center {
+      top: 50%;
+      transform: translateY(-15px) translateY(-50%);
+    }
+.react-flow__attribution {
+  font-size: 10px;
+  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
+  padding: 2px 3px;
+  margin: 0;
+}
+.react-flow__attribution a {
+    text-decoration: none;
+    color: #999;
+  }
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+.react-flow__edgelabel-renderer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  left: 0;
+  top: 0;
+}
+.react-flow__viewport-portal {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.react-flow__minimap {
+  background: var(
+    --xy-minimap-background-color-props,
+    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
+  );
+}
+.react-flow__minimap-svg {
+    display: block;
+  }
+.react-flow__minimap-mask {
+    fill: var(
+      --xy-minimap-mask-background-color-props,
+      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
+    );
+    stroke: var(
+      --xy-minimap-mask-stroke-color-props,
+      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
+    );
+    stroke-width: var(
+      --xy-minimap-mask-stroke-width-props,
+      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
+    );
+  }
+.react-flow__minimap-node {
+    fill: var(
+      --xy-minimap-node-background-color-props,
+      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
+    );
+    stroke: var(
+      --xy-minimap-node-stroke-color-props,
+      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
+    );
+    stroke-width: var(
+      --xy-minimap-node-stroke-width-props,
+      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
+    );
+  }
+.react-flow__background-pattern.dots {
+    fill: var(
+      --xy-background-pattern-color-props,
+      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
+    );
+  }
+.react-flow__background-pattern.lines {
+    stroke: var(
+      --xy-background-pattern-color-props,
+      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
+    );
+  }
+.react-flow__background-pattern.cross {
+    stroke: var(
+      --xy-background-pattern-color-props,
+      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
+    );
+  }
+.react-flow__controls {
+  display: flex;
+  flex-direction: column;
+}
+.react-flow__controls.horizontal {
+    flex-direction: row;
+  }
+.react-flow__controls-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 26px;
+    width: 26px;
+    padding: 4px;
+  }
+.react-flow__controls-button svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+      fill: currentColor;
+    }
+.react-flow__node-input,
+.react-flow__node-default,
+.react-flow__node-output,
+.react-flow__node-group {
+  border: var(--xy-node-border, var(--xy-node-border-default));
+  color: var(--xy-node-color, var(--xy-node-color-default));
+}
+.react-flow__node-input.selected,
+  .react-flow__node-input:focus,
+  .react-flow__node-input:focus-visible,
+  .react-flow__node-default.selected,
+  .react-flow__node-default:focus,
+  .react-flow__node-default:focus-visible,
+  .react-flow__node-output.selected,
+  .react-flow__node-output:focus,
+  .react-flow__node-output:focus-visible,
+  .react-flow__node-group.selected,
+  .react-flow__node-group:focus,
+  .react-flow__node-group:focus-visible {
+    outline: none;
+    border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));
+  }
+.react-flow__nodesselection-rect,
+.react-flow__selection {
+  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
+  border: var(--xy-selection-border, var(--xy-selection-border-default));
+}
+.react-flow__resize-control {
+  position: absolute;
+}
+.react-flow__resize-control.left,
+.react-flow__resize-control.right {
+  cursor: ew-resize;
+}
+.react-flow__resize-control.top,
+.react-flow__resize-control.bottom {
+  cursor: ns-resize;
+}
+.react-flow__resize-control.top.left,
+.react-flow__resize-control.bottom.right {
+  cursor: nwse-resize;
+}
+.react-flow__resize-control.bottom.left,
+.react-flow__resize-control.top.right {
+  cursor: nesw-resize;
+}
+/* handle styles */
+.react-flow__resize-control.handle {
+  width: 5px;
+  height: 5px;
+  border: 1px solid #fff;
+  border-radius: 1px;
+  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
+  translate: -50% -50%;
+}
+.react-flow__resize-control.handle.left {
+  left: 0;
+  top: 50%;
+}
+.react-flow__resize-control.handle.right {
+  left: 100%;
+  top: 50%;
+}
+.react-flow__resize-control.handle.top {
+  left: 50%;
+  top: 0;
+}
+.react-flow__resize-control.handle.bottom {
+  left: 50%;
+  top: 100%;
+}
+.react-flow__resize-control.handle.top.left {
+  left: 0;
+}
+.react-flow__resize-control.handle.bottom.left {
+  left: 0;
+}
+.react-flow__resize-control.handle.top.right {
+  left: 100%;
+}
+.react-flow__resize-control.handle.bottom.right {
+  left: 100%;
+}
+/* line styles */
+.react-flow__resize-control.line {
+  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
+  border-width: 0;
+  border-style: solid;
+}
+.react-flow__resize-control.line.left,
+.react-flow__resize-control.line.right {
+  width: 1px;
+  transform: translate(-50%, 0);
+  top: 0;
+  height: 100%;
+}
+.react-flow__resize-control.line.left {
+  left: 0;
+  border-left-width: 1px;
+}
+.react-flow__resize-control.line.right {
+  left: 100%;
+  border-right-width: 1px;
+}
+.react-flow__resize-control.line.top,
+.react-flow__resize-control.line.bottom {
+  height: 1px;
+  transform: translate(0, -50%);
+  left: 0;
+  width: 100%;
+}
+.react-flow__resize-control.line.top {
+  top: 0;
+  border-top-width: 1px;
+}
+.react-flow__resize-control.line.bottom {
+  border-bottom-width: 1px;
+  top: 100%;
+}
+
 /* foundation/layout.css */
 .cb-flex { display: flex; gap: var(--cb-flex-gap); }
 .cb-flex--column { flex-direction: column; }
@@ -829,6 +1360,201 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   line-height: var(--cb-leading-normal);
 }
 
+/* data/diagram/diagram.css */
+/* Diagram and DiagramEditor run on React Flow. Its base stylesheet (bundled before this file) owns layout and
+   reads its colours from `--xy-*` custom properties; here those are pointed at Tokens, and the node React
+   Flow wraps is drawn by this library. */
+
+.cb-diagram {
+  --cb-diagram-cell: var(--cb-space-5);
+  min-inline-size: 0;
+  position: relative;
+}
+
+.cb-diagram__cell {
+  inline-size: var(--cb-diagram-cell);
+  pointer-events: none;
+  position: absolute;
+  visibility: hidden;
+}
+
+.cb-diagram__hint {
+  color: var(--cb-fg-muted);
+  font-size: var(--cb-text-xs);
+  margin: 0 0 var(--cb-space-2);
+}
+
+.cb-diagram__viewport {
+  background: var(--cb-surface);
+  block-size: var(--cb-canvas-block-size);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-lg);
+  overflow: hidden;
+}
+
+.cb-diagram .react-flow {
+  --xy-background-color: var(--cb-surface);
+  --xy-background-pattern-color: var(--cb-border);
+  --xy-edge-stroke: var(--cb-border-strong);
+  --xy-edge-stroke-selected: var(--cb-tone-brand);
+  --xy-edge-stroke-width: var(--cb-border-width);
+  --xy-connectionline-stroke: var(--cb-tone-info);
+  --xy-connectionline-stroke-width: var(--cb-border-width);
+  --xy-handle-background-color: var(--cb-surface);
+  --xy-handle-border-color: var(--cb-border-strong);
+  --xy-attribution-background-color: transparent;
+  --xy-controls-button-background-color: var(--cb-surface);
+  --xy-controls-button-background-color-hover: var(--cb-bg-subtle);
+  --xy-controls-button-color: var(--cb-fg);
+  --xy-controls-button-color-hover: var(--cb-fg);
+  --xy-controls-button-border-color: var(--cb-border);
+  --xy-controls-box-shadow: none;
+  --xy-edge-label-background-color: var(--cb-surface);
+  --xy-edge-label-color: var(--cb-fg-muted);
+  color: var(--cb-fg);
+  font-family: inherit;
+}
+
+.cb-diagram .react-flow__edge-text {
+  fill: var(--cb-fg-muted);
+  font-size: var(--cb-text-xs);
+}
+
+.cb-diagram .react-flow__edge-textbg { fill: var(--cb-surface); }
+
+.cb-diagram .cb-diagram__edge--neutral .react-flow__edge-path { stroke: var(--cb-tone-neutral); }
+.cb-diagram .cb-diagram__edge--brand .react-flow__edge-path { stroke: var(--cb-tone-brand); }
+.cb-diagram .cb-diagram__edge--info .react-flow__edge-path { stroke: var(--cb-tone-info); }
+.cb-diagram .cb-diagram__edge--success .react-flow__edge-path { stroke: var(--cb-tone-success); }
+.cb-diagram .cb-diagram__edge--warning .react-flow__edge-path { stroke: var(--cb-tone-warning); }
+.cb-diagram .cb-diagram__edge--danger .react-flow__edge-path { stroke: var(--cb-tone-danger); }
+
+.cb-diagram .react-flow__node:focus-visible,
+.cb-diagram .react-flow__edge:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-focus);
+  outline-offset: var(--cb-focus-offset);
+}
+
+.cb-diagram__node {
+  align-items: center;
+  background: var(--cb-surface);
+  block-size: calc(var(--cb-diagram-cell) * 3);
+  border: var(--cb-border-width) solid var(--cb-border-strong);
+  border-radius: var(--cb-radius-md);
+  box-sizing: border-box;
+  color: var(--cb-fg);
+  display: flex;
+  flex-direction: column;
+  font-size: var(--cb-text-sm);
+  gap: var(--cb-space-1);
+  inline-size: calc(var(--cb-diagram-cell) * 8);
+  isolation: isolate;
+  justify-content: center;
+  padding: var(--cb-space-1) var(--cb-space-2);
+  position: relative;
+  text-align: center;
+}
+
+.cb-diagram--editor .cb-diagram__node { cursor: grab; }
+
+.cb-diagram__node[data-shape="pill"] { border-radius: var(--cb-radius-full); }
+
+/* A diamond's box is square, so the handles React Flow places at the middle of each side sit exactly on the
+   diamond's tips and arrows meet the drawn outline. The rotated square's diagonal equals the box's side. */
+.cb-diagram__node[data-shape="diamond"] {
+  background: transparent;
+  block-size: calc(var(--cb-diagram-cell) * 4);
+  border-color: transparent;
+  inline-size: calc(var(--cb-diagram-cell) * 4);
+}
+
+.cb-diagram__node[data-shape="diamond"]::before {
+  aspect-ratio: 1;
+  background: var(--cb-surface);
+  block-size: 70.7%;
+  border: var(--cb-border-width) solid var(--cb-border-strong);
+  content: "";
+  inset: 0;
+  margin: auto;
+  position: absolute;
+  rotate: 45deg;
+  z-index: -1;
+}
+
+.cb-diagram__node[data-tone="neutral"],
+.cb-diagram__node[data-tone="neutral"]::before { border-color: var(--cb-tone-neutral); }
+.cb-diagram__node[data-tone="brand"],
+.cb-diagram__node[data-tone="brand"]::before { border-color: var(--cb-tone-brand); }
+.cb-diagram__node[data-tone="info"],
+.cb-diagram__node[data-tone="info"]::before { border-color: var(--cb-tone-info); }
+.cb-diagram__node[data-tone="success"],
+.cb-diagram__node[data-tone="success"]::before { border-color: var(--cb-tone-success); }
+.cb-diagram__node[data-tone="warning"],
+.cb-diagram__node[data-tone="warning"]::before { border-color: var(--cb-tone-warning); }
+.cb-diagram__node[data-tone="danger"],
+.cb-diagram__node[data-tone="danger"]::before { border-color: var(--cb-tone-danger); }
+
+.cb-diagram__node[data-shape="diamond"][data-tone] { border-color: transparent; }
+
+.cb-diagram__node[data-selected="true"],
+.cb-diagram__node[data-selected="true"]::before {
+  border-color: var(--cb-tone-brand);
+  box-shadow: 0 0 0 var(--cb-border-width) var(--cb-tone-brand);
+}
+
+.cb-diagram__node[data-shape="diamond"][data-selected="true"] { box-shadow: none; }
+
+.cb-diagram__node[data-connecting="true"],
+.cb-diagram__node[data-connecting="true"]::before {
+  border-color: var(--cb-tone-info);
+  border-style: dashed;
+}
+
+.cb-diagram__label {
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cb-diagram .cb-diagram__handle {
+  background: var(--cb-surface);
+  block-size: var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border-strong);
+  inline-size: var(--cb-space-3);
+}
+
+.cb-diagram:not(.cb-diagram--editor) .cb-diagram__handle { visibility: hidden; }
+
+/* Where a pointer can hover, handles appear with the node's hover or focus; on touch there is no hover, so
+   they stay visible to tap. */
+@media (hover: hover) {
+  .cb-diagram--editor .react-flow__node:not(:hover, :focus-within, .selected) .cb-diagram__handle { opacity: 0; }
+}
+
+.cb-diagram .react-flow__controls-button svg { fill: currentColor; }
+
+.cb-diagram .react-flow__attribution { font-size: var(--cb-text-xs); }
+
+.cb-diagram__outline,
+.cb-diagram__status {
+  block-size: var(--cb-border-width);
+  clip-path: inset(50%);
+  inline-size: var(--cb-border-width);
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+}
+
+@media (forced-colors: active) {
+  .cb-diagram__node,
+  .cb-diagram__node::before,
+  .cb-diagram .cb-diagram__handle { border-color: CanvasText; }
+  .cb-diagram .react-flow__edge-path { stroke: CanvasText; }
+}
+
 /* data/donut.css */
 .cb-donut { position: relative; display: inline-grid; place-items: center; }
 .cb-donut svg { position: absolute; inset: 0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {
@@ -55,6 +55,7 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "2.1.2",
+    "@xyflow/react": "12.11.6",
     "antd": "6.6.1",
     "dayjs": "1.11.18"
   },