@gntik-ai/flow 0.0.0-stage → 0.5.0

package/dist/index.d.ts

@@ -0,0 +1,217 @@
+
+import { ReactNode } from "react";
+import { Connection, DefaultEdgeOptions, Edge, EdgeMarker, Node, NodeProps, ReactFlowProps } from "@xyflow/react";
+import { Theme } from "@gntik-ai/tokens/runtime";
+//#region src/tones.d.ts
+/** Node status → brand colour. Green = active/healthy (never severity); amber = degraded;
+ *  red = failed; violet/rose = needs a human (handoff / review). */
+type FlowTone = 'running' | 'degraded' | 'failed' | 'paused' | 'done' | 'handoff' | 'review';
+/** The role of a node, which decides its handles and its icon chip. */
+type FlowNodeKind = 'trigger' | 'step' | 'router' | 'output';
+interface FlowToneStyle {
+  label: string;
+  /** Pill background + text (contrast-safe text aliases). */
+  pill: string;
+  /** Status dot. */
+  dot: string;
+  /** Thick card border, or null for the neutral border. */
+  border: string | null;
+  /** Brand token used for the minimap swatch. */
+  token: string;
+  /** Draws the marching segment around the card. */
+  march?: boolean;
+}
+export declare const FLOW_TONES: Record<FlowTone, FlowToneStyle>;
+/** Icon chip per node kind. */
+export declare const KIND_CHIP: Record<FlowNodeKind, string>;
+export declare function isFlowTone(v: unknown): v is FlowTone;
+/** Token for a node's minimap swatch: its tone, else muted for routers, else primary. */
+export declare function nodeToken(tone: unknown, kind: unknown): string;
+//#endregion
+//#region src/decorations.d.ts
+interface FlowNodeDecoration {
+  status?: FlowTone;
+  issues?: readonly {
+    code: string;
+    message: string;
+  }[];
+}
+/** Memoized per node: unrelated status changes do not render this badge again. */
+export declare const FlowStatusBadge: import("react").MemoExoticComponent<({ status }: {
+  status: FlowTone;
+}) => import("react").JSX.Element>;
+//#endregion
+//#region src/nodes.d.ts
+/** Generic node content. No domain data: title, subtitle, meta, icon and a status tone. */
+type FlowNodeData = {
+  decoration?: FlowNodeDecoration;
+  title: string;
+  subtitle?: string;
+  meta?: string;
+  /** Decorative icon element (e.g. a lucide icon); defaults to the kind's glyph. */
+  icon?: ReactNode;
+  tone?: FlowTone;
+  /** Override the kind's default handles. */
+  handles?: {
+    target?: boolean;
+    source?: boolean;
+  };
+};
+/** Built-in kinds by default; consumers can opt into custom type identifiers. */
+type FlowNode<Kind extends string = FlowNodeKind> = Omit<Node<FlowNodeData, FlowNodeKind>, 'type'> & {
+  type: Kind;
+};
+/** Entry point: source handle only. */
+export declare const TriggerNode: {
+  ({ data, selected, sourcePosition, targetPosition, isConnectable }: NodeProps<FlowNode>): import("react").JSX.Element;
+  displayName: string;
+};
+/** Processing step: target + source handles, optional meta and status. */
+export declare const StepNode: {
+  ({ data, selected, sourcePosition, targetPosition, isConnectable }: NodeProps<FlowNode>): import("react").JSX.Element;
+  displayName: string;
+};
+/** Conditional branch: target + source handles. */
+export declare const RouterNode: {
+  ({ data, selected, sourcePosition, targetPosition, isConnectable }: NodeProps<FlowNode>): import("react").JSX.Element;
+  displayName: string;
+};
+/** Terminal node: target handle only. */
+export declare const OutputNode: {
+  ({ data, selected, sourcePosition, targetPosition, isConnectable }: NodeProps<FlowNode>): import("react").JSX.Element;
+  displayName: string;
+};
+/** `nodeTypes` map for `<FlowCanvas>` / `<ReactFlow>` (define it once, outside render). */
+export declare const flowNodeTypes: {
+  trigger: {
+    ({ data, selected, sourcePosition, targetPosition, isConnectable }: NodeProps<FlowNode>): import("react").JSX.Element;
+    displayName: string;
+  };
+  step: {
+    ({ data, selected, sourcePosition, targetPosition, isConnectable }: NodeProps<FlowNode>): import("react").JSX.Element;
+    displayName: string;
+  };
+  router: {
+    ({ data, selected, sourcePosition, targetPosition, isConnectable }: NodeProps<FlowNode>): import("react").JSX.Element;
+    displayName: string;
+  };
+  output: {
+    ({ data, selected, sourcePosition, targetPosition, isConnectable }: NodeProps<FlowNode>): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion
+//#region src/renderers.d.ts
+/** Named connection point. Positions default to left for targets and right for sources. */
+interface FlowHandle {
+  id: string;
+  kind: 'source' | 'target';
+  position?: 'left' | 'right' | 'top' | 'bottom';
+  label?: string;
+}
+/** Kit-owned renderer input: no React Flow component types are required by consumers. */
+interface FlowNodeRenderProps {
+  id: string;
+  type: string;
+  data: FlowNodeData;
+  selected: boolean;
+  connectable: boolean;
+}
+interface FlowNodeRenderer {
+  type: string;
+  handles: readonly FlowHandle[];
+  /** Defaults to kit overlays. Consumer renderers may own accessible status and issue decorations. */
+  decorations?: 'kit' | 'consumer';
+  render: (props: FlowNodeRenderProps) => ReactNode;
+}
+//#endregion
+//#region src/FlowCanvas.d.ts
+interface FlowCanvasProps<N extends Node = FlowNode, E extends Edge = Edge> extends Omit<ReactFlowProps<N, E>, 'aria-label' | 'height' | 'width'> {
+  /** Accessible name of the canvas region (required). */
+  'aria-label': string;
+  /** Canvas height (px or CSS length). */
+  height?: number | string;
+  showControls?: boolean;
+  /** Hide the control that toggles graph editing, while retaining zoom and fit controls. */
+  showInteractiveControls?: boolean;
+  showMiniMap?: boolean;
+  showBackground?: boolean;
+  /** false = static diagram: no pan/zoom/connect/select (nodes still render). */
+  interactive?: boolean;
+  /** Class for the inner `.react-flow` element (`className` goes on the wrapper). */
+  canvasClassName?: string;
+  /** Kit-owned custom node renderers with named handles. */
+  nodeRenderers?: readonly FlowNodeRenderer[];
+}
+/**
+ * React Flow canvas themed from the brand tokens: dotted background, controls and minimap,
+ * brand node types, smoothstep edges with arrows (primary when animated). Drag, connect and
+ * zoom/pan are on by default. Import `@gntik-ai/flow/styles.css` once.
+ */
+export declare function FlowCanvas<N extends Node = FlowNode, E extends Edge = Edge>({ 'aria-label': label, height, showControls, showInteractiveControls, showMiniMap, showBackground, interactive, className, canvasClassName, nodeTypes, nodeRenderers, edges, defaultEdgeOptions, proOptions, children, ...rest }: FlowCanvasProps<N, E>): import("react").JSX.Element;
+//#endregion
+//#region src/NodeCard.d.ts
+interface NodeCardProps {
+  kind?: FlowNodeKind;
+  title: string;
+  subtitle?: string;
+  /** Footer text (left), e.g. a version or an owner. */
+  meta?: string;
+  /** Icon element (decorative); defaults to the kind's glyph. */
+  icon?: ReactNode;
+  tone?: FlowTone;
+  selected?: boolean;
+  className?: string;
+}
+/** The brand node card, without handles (reused by the node types and static galleries). */
+export declare function NodeCard({ kind, icon, title, subtitle, meta, tone, selected, className }: NodeCardProps): import("react").JSX.Element;
+//#endregion
+//#region src/glyphs.d.ts
+/** Default decorative icon for a node kind (stroke = currentColor). */
+export declare function KindGlyph({ kind, size }: {
+  kind: FlowNodeKind;
+  size?: number;
+}): import("react").JSX.Element;
+//#endregion
+//#region src/theme.d.ts
+interface FlowTheme {
+  theme: Theme;
+  /** Idle edge / arrow colour. */
+  edge: string;
+  /** Active (animated) edge / arrow colour. */
+  edgeActive: string;
+  /** Background dot pattern. */
+  pattern: string;
+  /** Resolves any brand token (e.g. "--warning") to a concrete colour. */
+  color: (token: string, alpha?: number) => string;
+}
+/**
+ * Brand colours for the parts React Flow paints from props (arrow markers, minimap nodes,
+ * background pattern), resolved through `@gntik-ai/tokens/runtime` so they also survive
+ * SVG/PNG export. Re-read on every theme class change.
+ */
+export declare function useFlowTheme(): FlowTheme;
+/** Closed arrow marker in a given colour. */
+export declare function flowMarker(color: string): EdgeMarker;
+/** Brand edge defaults: orthogonal (smoothstep) routing. */
+export declare const brandEdgeOptions: DefaultEdgeOptions;
+/** Adds an arrow to edges that have none: primary when animated (active), muted otherwise. */
+export declare function withBrandMarkers<E extends Edge>(edges: readonly E[], t: FlowTheme): E[];
+//#endregion
+//#region src/useFlowState.d.ts
+/**
+ * Local nodes/edges state wired for drag, select and connect. New connections become
+ * active (animated) smoothstep edges. Spread the result into `<FlowCanvas>`.
+ */
+export declare function useFlowState<N extends Node = FlowNode, E extends Edge = Edge>(initialNodes: N[], initialEdges: E[]): {
+  nodes: N[];
+  edges: E[];
+  setNodes: import("react").Dispatch<import("react").SetStateAction<N[]>>;
+  setEdges: import("react").Dispatch<import("react").SetStateAction<E[]>>;
+  onNodesChange: import("@xyflow/react").OnNodesChange<N>;
+  onEdgesChange: import("@xyflow/react").OnEdgesChange<E>;
+  onConnect: (c: Connection) => void;
+};
+//#endregion
+export type { FlowCanvasProps, FlowHandle, FlowNode, FlowNodeData, FlowNodeDecoration, FlowNodeKind, FlowNodeRenderProps, FlowNodeRenderer, FlowTheme, FlowTone, FlowToneStyle, NodeCardProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,466 @@
+'use client';
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { Background, BackgroundVariant, Controls, Handle, MarkerType, MiniMap, Position, ReactFlow, addEdge, useEdgesState, useNodesState } from "@xyflow/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { currentTheme, observeTheme, tokenColor } from "@gntik-ai/tokens/runtime";
+//#region src/tones.ts
+const FLOW_TONES = {
+	running: {
+		label: "Running",
+		pill: "bg-primary/14 text-primary-text",
+		dot: "bg-primary",
+		border: "border-primary/60",
+		token: "--primary",
+		march: true
+	},
+	degraded: {
+		label: "Degraded",
+		pill: "bg-warning/16 text-warning-text",
+		dot: "bg-warning",
+		border: "border-warning/65",
+		token: "--warning"
+	},
+	failed: {
+		label: "Failed",
+		pill: "bg-destructive/15 text-destructive-text",
+		dot: "bg-destructive",
+		border: "border-destructive/65",
+		token: "--destructive"
+	},
+	paused: {
+		label: "Paused",
+		pill: "bg-muted-foreground/16 text-muted-foreground",
+		dot: "bg-muted-foreground",
+		border: null,
+		token: "--muted-foreground"
+	},
+	done: {
+		label: "Done",
+		pill: "bg-primary/14 text-primary-text",
+		dot: "bg-primary",
+		border: "border-primary/70",
+		token: "--primary"
+	},
+	handoff: {
+		label: "Handoff",
+		pill: "bg-category-violet/16 text-foreground",
+		dot: "bg-category-violet",
+		border: "border-category-violet",
+		token: "--category-violet"
+	},
+	review: {
+		label: "Review",
+		pill: "bg-category-rose/16 text-foreground",
+		dot: "bg-category-rose",
+		border: "border-category-rose",
+		token: "--category-rose"
+	}
+};
+/** Icon chip per node kind. */
+const KIND_CHIP = {
+	trigger: "bg-primary text-primary-foreground",
+	step: "bg-primary/14 text-primary-text",
+	router: "border border-border bg-secondary text-foreground",
+	output: "bg-accent text-accent-foreground"
+};
+function isFlowTone(v) {
+	return typeof v === "string" && v in FLOW_TONES;
+}
+/** Token for a node's minimap swatch: its tone, else muted for routers, else primary. */
+function nodeToken(tone, kind) {
+	if (isFlowTone(tone)) return FLOW_TONES[tone].token;
+	return kind === "router" ? "--muted-foreground" : "--primary";
+}
+function cx(...parts) {
+	return parts.filter(Boolean).join(" ");
+}
+//#endregion
+//#region src/decorations.tsx
+/** Memoized per node: unrelated status changes do not render this badge again. */
+const FlowStatusBadge = memo(function FlowStatusBadge({ status }) {
+	const tone = FLOW_TONES[status];
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("inline-flex h-[18px] shrink-0 items-center gap-1 rounded px-1.5 font-mono text-[9.5px] font-semibold", tone.pill),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cx("h-1.5 w-1.5 rounded-full", tone.dot, tone.march && "animate-pulse motion-reduce:animate-none")
+		}), tone.label]
+	});
+});
+function FlowNodeIssues({ issues }) {
+	if (!issues?.length) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "absolute top-full left-0 flex w-full items-start gap-1 rounded border border-destructive/65 bg-card p-1 text-[11px] text-destructive-text",
+		children: [/* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			width: "14",
+			height: "14",
+			viewBox: "0 0 24 24",
+			className: "shrink-0 fill-none stroke-current",
+			strokeWidth: "2",
+			children: /* @__PURE__ */ jsx("path", { d: "m12 3 10 18H2Z M12 9v5 M12 17v1" })
+		}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Validation issue: "
+		}), issues.map((issue) => issue.message).join("; ")] })]
+	});
+}
+//#endregion
+//#region src/glyphs.tsx
+const PATHS = {
+	trigger: ["M13 2 3 14h9l-1 8 10-12h-9l1-8z"],
+	step: ["M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z", "M9 9h6v6H9z"],
+	router: [
+		"M16 3h5v5",
+		"M8 3H3v5",
+		"M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3",
+		"m15 9 6-6"
+	],
+	output: ["M20 6 9 17l-5-5"]
+};
+/** Default decorative icon for a node kind (stroke = currentColor). */
+function KindGlyph({ kind, size = 16 }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		focusable: "false",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: PATHS[kind].map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+	});
+}
+//#endregion
+//#region src/NodeCard.tsx
+/** The brand node card, without handles (reused by the node types and static galleries). */
+function NodeCard({ kind = "step", icon, title, subtitle, meta, tone, selected, className }) {
+	const t = tone ? FLOW_TONES[tone] : void 0;
+	const running = Boolean(t?.march);
+	const border = selected ? "border-2 border-primary/60 shadow-md ring-2 ring-primary/35" : t?.border ? cx("border-2 shadow-sm", t.border) : "border border-border shadow-sm";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("relative h-full w-full min-w-52", className),
+		"data-tone": tone,
+		children: [running && /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			width: "100%",
+			height: "100%",
+			className: "gu-flow-run-frame pointer-events-none absolute inset-0 z-10",
+			children: /* @__PURE__ */ jsx("rect", {
+				className: "gu-flow-run fill-none stroke-primary",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				pathLength: 100,
+				strokeDasharray: "22 78"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cx("flex h-full w-full flex-col overflow-hidden rounded-lg bg-card transition-shadow", border),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 items-center gap-2.5 px-3 py-2.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: cx("grid h-8 w-8 shrink-0 place-items-center rounded-lg", KIND_CHIP[kind]),
+					children: icon ?? /* @__PURE__ */ jsx(KindGlyph, { kind })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "truncate font-sans text-[12.5px] leading-tight font-semibold text-foreground",
+						children: title
+					}), subtitle && /* @__PURE__ */ jsx("div", {
+						className: "mt-0.5 truncate font-mono text-[10px] text-muted-foreground",
+						children: subtitle
+					})]
+				})]
+			}), (meta || t) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2 border-t border-border/70 bg-secondary/25 px-3 py-2",
+				children: [meta ? /* @__PURE__ */ jsx("span", {
+					className: "truncate font-mono text-[10px] text-muted-foreground",
+					children: meta
+				}) : /* @__PURE__ */ jsx("span", {}), t && /* @__PURE__ */ jsx(FlowStatusBadge, { status: tone })]
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/nodes.tsx
+const DEFAULT_HANDLES = {
+	trigger: {
+		target: false,
+		source: true
+	},
+	step: {
+		target: true,
+		source: true
+	},
+	router: {
+		target: true,
+		source: true
+	},
+	output: {
+		target: true,
+		source: false
+	}
+};
+function makeNode(kind) {
+	function BrandNode({ data, selected, sourcePosition, targetPosition, isConnectable }) {
+		const handles = {
+			...DEFAULT_HANDLES[kind],
+			...data.handles
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: "relative h-full w-full",
+			children: [
+				handles.target && /* @__PURE__ */ jsx(Handle, {
+					type: "target",
+					position: targetPosition ?? Position.Left,
+					isConnectable
+				}),
+				/* @__PURE__ */ jsx(NodeCard, {
+					kind,
+					title: data.title,
+					subtitle: data.subtitle,
+					meta: data.meta,
+					icon: data.icon,
+					tone: data.decoration?.status ?? data.tone,
+					selected
+				}),
+				/* @__PURE__ */ jsx(FlowNodeIssues, { issues: data.decoration?.issues }),
+				handles.source && /* @__PURE__ */ jsx(Handle, {
+					type: "source",
+					position: sourcePosition ?? Position.Right,
+					isConnectable
+				})
+			]
+		});
+	}
+	BrandNode.displayName = `${kind[0]?.toUpperCase()}${kind.slice(1)}Node`;
+	return BrandNode;
+}
+/** Entry point: source handle only. */
+const TriggerNode = makeNode("trigger");
+/** Processing step: target + source handles, optional meta and status. */
+const StepNode = makeNode("step");
+/** Conditional branch: target + source handles. */
+const RouterNode = makeNode("router");
+/** Terminal node: target handle only. */
+const OutputNode = makeNode("output");
+/** `nodeTypes` map for `<FlowCanvas>` / `<ReactFlow>` (define it once, outside render). */
+const flowNodeTypes = {
+	trigger: TriggerNode,
+	step: StepNode,
+	router: RouterNode,
+	output: OutputNode
+};
+//#endregion
+//#region src/theme.ts
+function readFlowTheme(theme) {
+	return {
+		theme,
+		edge: tokenColor("--muted-foreground"),
+		edgeActive: tokenColor("--primary"),
+		pattern: tokenColor("--border"),
+		color: (token, alpha) => tokenColor(token, alpha)
+	};
+}
+/**
+* Brand colours for the parts React Flow paints from props (arrow markers, minimap nodes,
+* background pattern), resolved through `@gntik-ai/tokens/runtime` so they also survive
+* SVG/PNG export. Re-read on every theme class change.
+*/
+function useFlowTheme() {
+	const [snapshot, setSnapshot] = useState(() => readFlowTheme(currentTheme()));
+	useEffect(() => observeTheme((next) => setSnapshot(readFlowTheme(next))), []);
+	return snapshot;
+}
+/** Closed arrow marker in a given colour. */
+function flowMarker(color) {
+	return {
+		type: MarkerType.ArrowClosed,
+		width: 15,
+		height: 15,
+		color
+	};
+}
+/** Brand edge defaults: orthogonal (smoothstep) routing. */
+const brandEdgeOptions = { type: "smoothstep" };
+/** Adds an arrow to edges that have none: primary when animated (active), muted otherwise. */
+function withBrandMarkers(edges, t) {
+	return edges.map((e) => e.markerEnd ? e : {
+		...e,
+		markerEnd: flowMarker(e.animated ? t.edgeActive : t.edge)
+	});
+}
+//#endregion
+//#region src/renderers.tsx
+const POSITIONS = {
+	left: Position.Left,
+	right: Position.Right,
+	top: Position.Top,
+	bottom: Position.Bottom
+};
+/** Internal adapter; only the kit contracts above are exported from the package entry. */
+function adaptNodeRenderers(renderers) {
+	const types = { ...flowNodeTypes };
+	for (const definition of renderers) {
+		const counts = {
+			left: 0,
+			right: 0,
+			top: 0,
+			bottom: 0
+		};
+		const handles = definition.handles.map((handle) => {
+			const position = handle.position ?? (handle.kind === "target" ? "left" : "right");
+			return {
+				...handle,
+				position,
+				index: ++counts[position]
+			};
+		});
+		const verticalCount = Math.max(counts.left, counts.right);
+		const horizontalCount = Math.max(counts.top, counts.bottom);
+		types[definition.type] = memo(function CustomNode({ id, data, selected, isConnectable }) {
+			return /* @__PURE__ */ jsxs("div", {
+				className: "relative grid h-full w-full",
+				style: {
+					minHeight: verticalCount ? (verticalCount + 1) * 32 : void 0,
+					minWidth: horizontalCount ? (horizontalCount + 1) * 32 : void 0
+				},
+				children: [
+					handles.map((handle) => /* @__PURE__ */ jsx(Handle, {
+						className: "gu-flow-custom-handle",
+						id: handle.id,
+						type: handle.kind,
+						position: POSITIONS[handle.position],
+						isConnectable,
+						"aria-label": handle.label ?? handle.id,
+						role: "button",
+						tabIndex: isConnectable ? 0 : -1,
+						"aria-disabled": !isConnectable,
+						onKeyDown: (event) => {
+							if (!isConnectable || event.key !== "Enter" && event.key !== " ") return;
+							event.preventDefault();
+							event.stopPropagation();
+							event.currentTarget.click();
+						},
+						style: { [handle.position === "top" || handle.position === "bottom" ? "left" : "top"]: `${handle.index / (counts[handle.position] + 1) * 100}%` }
+					}, `${handle.kind}-${handle.id}`)),
+					definition.decorations !== "consumer" && /* @__PURE__ */ jsxs(Fragment, { children: [data.decoration?.status && /* @__PURE__ */ jsx("div", {
+						className: "pointer-events-none absolute -top-2 right-1 z-10",
+						children: /* @__PURE__ */ jsx(FlowStatusBadge, { status: data.decoration.status })
+					}), /* @__PURE__ */ jsx(FlowNodeIssues, { issues: data.decoration?.issues })] }),
+					definition.render({
+						id,
+						type: definition.type,
+						data,
+						selected,
+						connectable: isConnectable
+					})
+				]
+			});
+		});
+	}
+	return types;
+}
+//#endregion
+//#region src/FlowCanvas.tsx
+const STATIC_PROPS = {
+	nodesDraggable: false,
+	nodesConnectable: false,
+	elementsSelectable: false,
+	panOnDrag: false,
+	panOnScroll: false,
+	zoomOnScroll: false,
+	zoomOnPinch: false,
+	zoomOnDoubleClick: false,
+	preventScrolling: false
+};
+/**
+* React Flow canvas themed from the brand tokens: dotted background, controls and minimap,
+* brand node types, smoothstep edges with arrows (primary when animated). Drag, connect and
+* zoom/pan are on by default. Import `@gntik-ai/flow/styles.css` once.
+*/
+function FlowCanvas({ "aria-label": label, height = 480, showControls = true, showInteractiveControls = true, showMiniMap = true, showBackground = true, interactive = true, className, canvasClassName, nodeTypes, nodeRenderers, edges, defaultEdgeOptions, proOptions, children, ...rest }) {
+	const t = useFlowTheme();
+	const customTypes = useMemo(() => nodeRenderers ? adaptNodeRenderers(nodeRenderers) : void 0, [nodeRenderers]);
+	const brandedEdges = useMemo(() => edges ? withBrandMarkers(edges, t) : void 0, [edges, t]);
+	const edgeOptions = useMemo(() => ({
+		...brandEdgeOptions,
+		markerEnd: flowMarker(t.edge),
+		...defaultEdgeOptions
+	}), [t, defaultEdgeOptions]);
+	const miniColor = useCallback((n) => t.color(nodeToken(n.data.tone, n.type)), [t]);
+	return /* @__PURE__ */ jsx("div", {
+		role: "region",
+		"aria-label": label,
+		"data-theme": t.theme,
+		className: cx("gu-flow relative w-full bg-background", className),
+		style: { height },
+		children: /* @__PURE__ */ jsxs(ReactFlow, {
+			nodeTypes: customTypes ?? nodeTypes ?? flowNodeTypes,
+			edges: brandedEdges,
+			defaultEdgeOptions: edgeOptions,
+			fitView: true,
+			fitViewOptions: {
+				padding: .12,
+				maxZoom: 1
+			},
+			minZoom: .3,
+			maxZoom: 1.75,
+			snapToGrid: true,
+			snapGrid: [16, 16],
+			proOptions: proOptions ?? (interactive ? void 0 : { hideAttribution: true }),
+			...interactive ? void 0 : STATIC_PROPS,
+			...rest,
+			className: canvasClassName,
+			children: [
+				showBackground && /* @__PURE__ */ jsx(Background, {
+					variant: BackgroundVariant.Dots,
+					gap: 20,
+					size: 1,
+					color: t.pattern
+				}),
+				interactive && showControls && /* @__PURE__ */ jsx(Controls, { showInteractive: showInteractiveControls }),
+				interactive && showMiniMap && /* @__PURE__ */ jsx(MiniMap, {
+					pannable: true,
+					zoomable: true,
+					nodeColor: miniColor,
+					nodeStrokeWidth: 0,
+					nodeBorderRadius: 3
+				}),
+				children
+			]
+		})
+	});
+}
+//#endregion
+//#region src/useFlowState.ts
+/**
+* Local nodes/edges state wired for drag, select and connect. New connections become
+* active (animated) smoothstep edges. Spread the result into `<FlowCanvas>`.
+*/
+function useFlowState(initialNodes, initialEdges) {
+	const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+	const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+	return {
+		nodes,
+		edges,
+		setNodes,
+		setEdges,
+		onNodesChange,
+		onEdgesChange,
+		onConnect: useCallback((c) => {
+			const active = Object.assign({
+				type: "smoothstep",
+				animated: true
+			}, c);
+			setEdges((eds) => addEdge(active, eds));
+		}, [setEdges])
+	};
+}
+//#endregion
+export { FLOW_TONES, FlowCanvas, FlowStatusBadge, KIND_CHIP, KindGlyph, NodeCard, OutputNode, RouterNode, StepNode, TriggerNode, brandEdgeOptions, flowMarker, flowNodeTypes, isFlowTone, nodeToken, useFlowState, useFlowTheme, withBrandMarkers };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/tones.ts","../src/decorations.tsx","../src/glyphs.tsx","../src/NodeCard.tsx","../src/nodes.tsx","../src/theme.ts","../src/renderers.tsx","../src/FlowCanvas.tsx","../src/useFlowState.ts"],"sourcesContent":["/** Node status → brand colour. Green = active/healthy (never severity); amber = degraded;\n *  red = failed; violet/rose = needs a human (handoff / review). */\nexport type FlowTone = 'running' | 'degraded' | 'failed' | 'paused' | 'done' | 'handoff' | 'review';\n\n/** The role of a node, which decides its handles and its icon chip. */\nexport type FlowNodeKind = 'trigger' | 'step' | 'router' | 'output';\n\nexport interface FlowToneStyle {\n  label: string;\n  /** Pill background + text (contrast-safe text aliases). */\n  pill: string;\n  /** Status dot. */\n  dot: string;\n  /** Thick card border, or null for the neutral border. */\n  border: string | null;\n  /** Brand token used for the minimap swatch. */\n  token: string;\n  /** Draws the marching segment around the card. */\n  march?: boolean;\n}\n\nexport const FLOW_TONES: Record<FlowTone, FlowToneStyle> = {\n  running: {\n    label: 'Running',\n    pill: 'bg-primary/14 text-primary-text',\n    dot: 'bg-primary',\n    border: 'border-primary/60',\n    token: '--primary',\n    march: true,\n  },\n  degraded: {\n    label: 'Degraded',\n    pill: 'bg-warning/16 text-warning-text',\n    dot: 'bg-warning',\n    border: 'border-warning/65',\n    token: '--warning',\n  },\n  failed: {\n    label: 'Failed',\n    pill: 'bg-destructive/15 text-destructive-text',\n    dot: 'bg-destructive',\n    border: 'border-destructive/65',\n    token: '--destructive',\n  },\n  paused: {\n    label: 'Paused',\n    pill: 'bg-muted-foreground/16 text-muted-foreground',\n    dot: 'bg-muted-foreground',\n    border: null,\n    token: '--muted-foreground',\n  },\n  done: {\n    label: 'Done',\n    pill: 'bg-primary/14 text-primary-text',\n    dot: 'bg-primary',\n    border: 'border-primary/70',\n    token: '--primary',\n  },\n  handoff: {\n    label: 'Handoff',\n    pill: 'bg-category-violet/16 text-foreground',\n    dot: 'bg-category-violet',\n    border: 'border-category-violet',\n    token: '--category-violet',\n  },\n  review: {\n    label: 'Review',\n    pill: 'bg-category-rose/16 text-foreground',\n    dot: 'bg-category-rose',\n    border: 'border-category-rose',\n    token: '--category-rose',\n  },\n};\n\n/** Icon chip per node kind. */\nexport const KIND_CHIP: Record<FlowNodeKind, string> = {\n  trigger: 'bg-primary text-primary-foreground',\n  step: 'bg-primary/14 text-primary-text',\n  router: 'border border-border bg-secondary text-foreground',\n  output: 'bg-accent text-accent-foreground',\n};\n\nexport function isFlowTone(v: unknown): v is FlowTone {\n  return typeof v === 'string' && v in FLOW_TONES;\n}\n\n/** Token for a node's minimap swatch: its tone, else muted for routers, else primary. */\nexport function nodeToken(tone: unknown, kind: unknown): string {\n  if (isFlowTone(tone)) return FLOW_TONES[tone].token;\n  return kind === 'router' ? '--muted-foreground' : '--primary';\n}\n\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(' ');\n}\n","import { memo } from 'react';\nimport { cx, FLOW_TONES, type FlowTone } from './tones';\n\nexport interface FlowNodeDecoration {\n  status?: FlowTone;\n  issues?: readonly { code: string; message: string }[];\n}\n\n/** Memoized per node: unrelated status changes do not render this badge again. */\nexport const FlowStatusBadge = memo(function FlowStatusBadge({ status }: { status: FlowTone }) {\n  const tone = FLOW_TONES[status];\n  return (\n    <span\n      className={cx(\n        'inline-flex h-[18px] shrink-0 items-center gap-1 rounded px-1.5 font-mono text-[9.5px] font-semibold',\n        tone.pill,\n      )}\n    >\n      <span\n        aria-hidden\n        className={cx('h-1.5 w-1.5 rounded-full', tone.dot, tone.march && 'animate-pulse motion-reduce:animate-none')}\n      />\n      {tone.label}\n    </span>\n  );\n});\n\nexport function FlowNodeIssues({ issues }: { issues: FlowNodeDecoration['issues'] }) {\n  if (!issues?.length) return null;\n  return (\n    <div className=\"absolute top-full left-0 flex w-full items-start gap-1 rounded border border-destructive/65 bg-card p-1 text-[11px] text-destructive-text\">\n      <svg\n        aria-hidden=\"true\"\n        width=\"14\"\n        height=\"14\"\n        viewBox=\"0 0 24 24\"\n        className=\"shrink-0 fill-none stroke-current\"\n        strokeWidth=\"2\"\n      >\n        <path d=\"m12 3 10 18H2Z M12 9v5 M12 17v1\" />\n      </svg>\n      <span>\n        <span className=\"sr-only\">Validation issue: </span>\n        {issues.map((issue) => issue.message).join('; ')}\n      </span>\n    </div>\n  );\n}\n","import type { FlowNodeKind } from './tones';\n\nconst PATHS: Record<FlowNodeKind, string[]> = {\n  trigger: ['M13 2 3 14h9l-1 8 10-12h-9l1-8z'],\n  step: ['M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z', 'M9 9h6v6H9z'],\n  router: ['M16 3h5v5', 'M8 3H3v5', 'M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3', 'm15 9 6-6'],\n  output: ['M20 6 9 17l-5-5'],\n};\n\n/** Default decorative icon for a node kind (stroke = currentColor). */\nexport function KindGlyph({ kind, size = 16 }: { kind: FlowNodeKind; size?: number }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      {PATHS[kind].map((d) => (\n        <path key={d} d={d} />\n      ))}\n    </svg>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { FlowStatusBadge } from './decorations';\nimport { KindGlyph } from './glyphs';\nimport { cx, FLOW_TONES, KIND_CHIP, type FlowNodeKind, type FlowTone } from './tones';\n\nexport interface NodeCardProps {\n  kind?: FlowNodeKind;\n  title: string;\n  subtitle?: string;\n  /** Footer text (left), e.g. a version or an owner. */\n  meta?: string;\n  /** Icon element (decorative); defaults to the kind's glyph. */\n  icon?: ReactNode;\n  tone?: FlowTone;\n  selected?: boolean;\n  className?: string;\n}\n\n/** The brand node card, without handles (reused by the node types and static galleries). */\nexport function NodeCard({ kind = 'step', icon, title, subtitle, meta, tone, selected, className }: NodeCardProps) {\n  const t = tone ? FLOW_TONES[tone] : undefined;\n  const running = Boolean(t?.march);\n  const border = selected\n    ? 'border-2 border-primary/60 shadow-md ring-2 ring-primary/35'\n    : t?.border\n      ? cx('border-2 shadow-sm', t.border)\n      : 'border border-border shadow-sm';\n  return (\n    <div className={cx('relative h-full w-full min-w-52', className)} data-tone={tone}>\n      {running && (\n        <svg\n          aria-hidden=\"true\"\n          width=\"100%\"\n          height=\"100%\"\n          className=\"gu-flow-run-frame pointer-events-none absolute inset-0 z-10\"\n        >\n          <rect\n            className=\"gu-flow-run fill-none stroke-primary\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            pathLength={100}\n            strokeDasharray=\"22 78\"\n          />\n        </svg>\n      )}\n      <div className={cx('flex h-full w-full flex-col overflow-hidden rounded-lg bg-card transition-shadow', border)}>\n        <div className=\"flex flex-1 items-center gap-2.5 px-3 py-2.5\">\n          <span aria-hidden className={cx('grid h-8 w-8 shrink-0 place-items-center rounded-lg', KIND_CHIP[kind])}>\n            {icon ?? <KindGlyph kind={kind} />}\n          </span>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"truncate font-sans text-[12.5px] leading-tight font-semibold text-foreground\">{title}</div>\n            {subtitle && <div className=\"mt-0.5 truncate font-mono text-[10px] text-muted-foreground\">{subtitle}</div>}\n          </div>\n        </div>\n        {(meta || t) && (\n          <div className=\"flex items-center justify-between gap-2 border-t border-border/70 bg-secondary/25 px-3 py-2\">\n            {meta ? <span className=\"truncate font-mono text-[10px] text-muted-foreground\">{meta}</span> : <span />}\n            {t && <FlowStatusBadge status={tone!} />}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Handle, Position, type Node, type NodeProps, type NodeTypes } from '@xyflow/react';\nimport { FlowNodeIssues, type FlowNodeDecoration } from './decorations';\nimport { NodeCard } from './NodeCard';\nimport type { FlowNodeKind, FlowTone } from './tones';\n\n/** Generic node content. No domain data: title, subtitle, meta, icon and a status tone. */\nexport type FlowNodeData = {\n  decoration?: FlowNodeDecoration;\n  title: string;\n  subtitle?: string;\n  meta?: string;\n  /** Decorative icon element (e.g. a lucide icon); defaults to the kind's glyph. */\n  icon?: ReactNode;\n  tone?: FlowTone;\n  /** Override the kind's default handles. */\n  handles?: { target?: boolean; source?: boolean };\n};\n\n/** Built-in kinds by default; consumers can opt into custom type identifiers. */\nexport type FlowNode<Kind extends string = FlowNodeKind> = Omit<Node<FlowNodeData, FlowNodeKind>, 'type'> & {\n  type: Kind;\n};\n\nconst DEFAULT_HANDLES: Record<FlowNodeKind, { target: boolean; source: boolean }> = {\n  trigger: { target: false, source: true },\n  step: { target: true, source: true },\n  router: { target: true, source: true },\n  output: { target: true, source: false },\n};\n\nfunction makeNode(kind: FlowNodeKind) {\n  function BrandNode({ data, selected, sourcePosition, targetPosition, isConnectable }: NodeProps<FlowNode>) {\n    const handles = { ...DEFAULT_HANDLES[kind], ...data.handles };\n    return (\n      <div className=\"relative h-full w-full\">\n        {handles.target && (\n          <Handle type=\"target\" position={targetPosition ?? Position.Left} isConnectable={isConnectable} />\n        )}\n        <NodeCard\n          kind={kind}\n          title={data.title}\n          subtitle={data.subtitle}\n          meta={data.meta}\n          icon={data.icon}\n          tone={data.decoration?.status ?? data.tone}\n          selected={selected}\n        />\n        <FlowNodeIssues issues={data.decoration?.issues} />\n        {handles.source && (\n          <Handle type=\"source\" position={sourcePosition ?? Position.Right} isConnectable={isConnectable} />\n        )}\n      </div>\n    );\n  }\n  BrandNode.displayName = `${kind[0]?.toUpperCase()}${kind.slice(1)}Node`;\n  return BrandNode;\n}\n\n/** Entry point: source handle only. */\nexport const TriggerNode = makeNode('trigger');\n/** Processing step: target + source handles, optional meta and status. */\nexport const StepNode = makeNode('step');\n/** Conditional branch: target + source handles. */\nexport const RouterNode = makeNode('router');\n/** Terminal node: target handle only. */\nexport const OutputNode = makeNode('output');\n\n/** `nodeTypes` map for `<FlowCanvas>` / `<ReactFlow>` (define it once, outside render). */\nexport const flowNodeTypes = {\n  trigger: TriggerNode,\n  step: StepNode,\n  router: RouterNode,\n  output: OutputNode,\n} satisfies NodeTypes;\n","import { useEffect, useState } from 'react';\nimport { MarkerType, type DefaultEdgeOptions, type Edge, type EdgeMarker } from '@xyflow/react';\nimport { currentTheme, observeTheme, tokenColor, type Theme } from '@gntik-ai/tokens/runtime';\n\nexport interface FlowTheme {\n  theme: Theme;\n  /** Idle edge / arrow colour. */\n  edge: string;\n  /** Active (animated) edge / arrow colour. */\n  edgeActive: string;\n  /** Background dot pattern. */\n  pattern: string;\n  /** Resolves any brand token (e.g. \"--warning\") to a concrete colour. */\n  color: (token: string, alpha?: number) => string;\n}\n\nfunction readFlowTheme(theme: Theme): FlowTheme {\n  return {\n    theme,\n    edge: tokenColor('--muted-foreground'),\n    edgeActive: tokenColor('--primary'),\n    pattern: tokenColor('--border'),\n    color: (token, alpha) => tokenColor(token, alpha),\n  };\n}\n\n/**\n * Brand colours for the parts React Flow paints from props (arrow markers, minimap nodes,\n * background pattern), resolved through `@gntik-ai/tokens/runtime` so they also survive\n * SVG/PNG export. Re-read on every theme class change.\n */\nexport function useFlowTheme(): FlowTheme {\n  const [snapshot, setSnapshot] = useState<FlowTheme>(() => readFlowTheme(currentTheme()));\n  useEffect(() => observeTheme((next) => setSnapshot(readFlowTheme(next))), []);\n  return snapshot;\n}\n\n/** Closed arrow marker in a given colour. */\nexport function flowMarker(color: string): EdgeMarker {\n  return { type: MarkerType.ArrowClosed, width: 15, height: 15, color };\n}\n\n/** Brand edge defaults: orthogonal (smoothstep) routing. */\nexport const brandEdgeOptions: DefaultEdgeOptions = { type: 'smoothstep' };\n\n/** Adds an arrow to edges that have none: primary when animated (active), muted otherwise. */\nexport function withBrandMarkers<E extends Edge>(edges: readonly E[], t: FlowTheme): E[] {\n  return edges.map((e) => (e.markerEnd ? e : { ...e, markerEnd: flowMarker(e.animated ? t.edgeActive : t.edge) }));\n}\n","import { memo, type ReactNode } from 'react';\nimport { Handle, Position, type NodeProps, type NodeTypes } from '@xyflow/react';\nimport { FlowNodeIssues, FlowStatusBadge } from './decorations';\nimport { flowNodeTypes, type FlowNode, type FlowNodeData } from './nodes';\n\n/** Named connection point. Positions default to left for targets and right for sources. */\nexport interface FlowHandle {\n  id: string;\n  kind: 'source' | 'target';\n  position?: 'left' | 'right' | 'top' | 'bottom';\n  label?: string;\n}\n\n/** Kit-owned renderer input: no React Flow component types are required by consumers. */\nexport interface FlowNodeRenderProps {\n  id: string;\n  type: string;\n  data: FlowNodeData;\n  selected: boolean;\n  connectable: boolean;\n}\n\nexport interface FlowNodeRenderer {\n  type: string;\n  handles: readonly FlowHandle[];\n  /** Defaults to kit overlays. Consumer renderers may own accessible status and issue decorations. */\n  decorations?: 'kit' | 'consumer';\n  render: (props: FlowNodeRenderProps) => ReactNode;\n}\n\nconst POSITIONS = {\n  left: Position.Left,\n  right: Position.Right,\n  top: Position.Top,\n  bottom: Position.Bottom,\n};\n\n/** Internal adapter; only the kit contracts above are exported from the package entry. */\nexport function adaptNodeRenderers(renderers: readonly FlowNodeRenderer[]): NodeTypes {\n  const types: NodeTypes = { ...flowNodeTypes };\n  for (const definition of renderers) {\n    const counts = { left: 0, right: 0, top: 0, bottom: 0 };\n    const handles = definition.handles.map((handle) => {\n      const position = handle.position ?? (handle.kind === 'target' ? 'left' : 'right');\n      return { ...handle, position, index: ++counts[position] };\n    });\n    const verticalCount = Math.max(counts.left, counts.right);\n    const horizontalCount = Math.max(counts.top, counts.bottom);\n    types[definition.type] = memo(function CustomNode({\n      id,\n      data,\n      selected,\n      isConnectable,\n    }: NodeProps<FlowNode<string>>) {\n      return (\n        <div\n          className=\"relative grid h-full w-full\"\n          style={{\n            minHeight: verticalCount ? (verticalCount + 1) * 32 : undefined,\n            minWidth: horizontalCount ? (horizontalCount + 1) * 32 : undefined,\n          }}\n        >\n          {handles.map((handle) => (\n            <Handle\n              key={`${handle.kind}-${handle.id}`}\n              className=\"gu-flow-custom-handle\"\n              id={handle.id}\n              type={handle.kind}\n              position={POSITIONS[handle.position]}\n              isConnectable={isConnectable}\n              aria-label={handle.label ?? handle.id}\n              role=\"button\"\n              tabIndex={isConnectable ? 0 : -1}\n              aria-disabled={!isConnectable}\n              onKeyDown={(event) => {\n                if (!isConnectable || (event.key !== 'Enter' && event.key !== ' ')) return;\n                event.preventDefault();\n                event.stopPropagation();\n                event.currentTarget.click();\n              }}\n              style={{\n                [handle.position === 'top' || handle.position === 'bottom' ? 'left' : 'top']:\n                  `${(handle.index / (counts[handle.position] + 1)) * 100}%`,\n              }}\n            />\n          ))}\n          {definition.decorations !== 'consumer' && (\n            <>\n              {data.decoration?.status && (\n                <div className=\"pointer-events-none absolute -top-2 right-1 z-10\">\n                  <FlowStatusBadge status={data.decoration.status} />\n                </div>\n              )}\n              <FlowNodeIssues issues={data.decoration?.issues} />\n            </>\n          )}\n          {definition.render({\n            id,\n            type: definition.type,\n            data,\n            selected,\n            connectable: isConnectable,\n          })}\n        </div>\n      );\n    });\n  }\n  return types;\n}\n","import { useCallback, useMemo } from 'react';\nimport {\n  Background,\n  BackgroundVariant,\n  Controls,\n  MiniMap,\n  ReactFlow,\n  type Edge,\n  type Node,\n  type NodeTypes,\n  type ReactFlowProps,\n} from '@xyflow/react';\nimport { flowNodeTypes, type FlowNode } from './nodes';\nimport { brandEdgeOptions, flowMarker, useFlowTheme, withBrandMarkers } from './theme';\nimport { adaptNodeRenderers, type FlowNodeRenderer } from './renderers';\nimport { cx, nodeToken } from './tones';\n\nexport interface FlowCanvasProps<N extends Node = FlowNode, E extends Edge = Edge> extends Omit<\n  ReactFlowProps<N, E>,\n  'aria-label' | 'height' | 'width'\n> {\n  /** Accessible name of the canvas region (required). */\n  'aria-label': string;\n  /** Canvas height (px or CSS length). */\n  height?: number | string;\n  showControls?: boolean;\n  /** Hide the control that toggles graph editing, while retaining zoom and fit controls. */\n  showInteractiveControls?: boolean;\n  showMiniMap?: boolean;\n  showBackground?: boolean;\n  /** false = static diagram: no pan/zoom/connect/select (nodes still render). */\n  interactive?: boolean;\n  /** Class for the inner `.react-flow` element (`className` goes on the wrapper). */\n  canvasClassName?: string;\n  /** Kit-owned custom node renderers with named handles. */\n  nodeRenderers?: readonly FlowNodeRenderer[];\n}\n\nconst STATIC_PROPS = {\n  nodesDraggable: false,\n  nodesConnectable: false,\n  elementsSelectable: false,\n  panOnDrag: false,\n  panOnScroll: false,\n  zoomOnScroll: false,\n  zoomOnPinch: false,\n  zoomOnDoubleClick: false,\n  preventScrolling: false,\n} as const;\n\n/**\n * React Flow canvas themed from the brand tokens: dotted background, controls and minimap,\n * brand node types, smoothstep edges with arrows (primary when animated). Drag, connect and\n * zoom/pan are on by default. Import `@gntik-ai/flow/styles.css` once.\n */\nexport function FlowCanvas<N extends Node = FlowNode, E extends Edge = Edge>({\n  'aria-label': label,\n  height = 480,\n  showControls = true,\n  showInteractiveControls = true,\n  showMiniMap = true,\n  showBackground = true,\n  interactive = true,\n  className,\n  canvasClassName,\n  nodeTypes,\n  nodeRenderers,\n  edges,\n  defaultEdgeOptions,\n  proOptions,\n  children,\n  ...rest\n}: FlowCanvasProps<N, E>) {\n  const t = useFlowTheme();\n  const customTypes = useMemo(() => (nodeRenderers ? adaptNodeRenderers(nodeRenderers) : undefined), [nodeRenderers]);\n  const brandedEdges = useMemo(() => (edges ? withBrandMarkers(edges, t) : undefined), [edges, t]);\n  const edgeOptions = useMemo(\n    () => ({ ...brandEdgeOptions, markerEnd: flowMarker(t.edge), ...defaultEdgeOptions }),\n    [t, defaultEdgeOptions],\n  );\n  const miniColor = useCallback((n: N) => t.color(nodeToken(n.data.tone, n.type)), [t]);\n  return (\n    <div\n      role=\"region\"\n      aria-label={label}\n      data-theme={t.theme}\n      className={cx('gu-flow relative w-full bg-background', className)}\n      style={{ height }}\n    >\n      <ReactFlow<N, E>\n        nodeTypes={customTypes ?? nodeTypes ?? (flowNodeTypes as NodeTypes)}\n        edges={brandedEdges}\n        defaultEdgeOptions={edgeOptions}\n        fitView\n        fitViewOptions={{ padding: 0.12, maxZoom: 1 }}\n        minZoom={0.3}\n        maxZoom={1.75}\n        snapToGrid\n        snapGrid={[16, 16]}\n        proOptions={proOptions ?? (interactive ? undefined : { hideAttribution: true })}\n        {...(interactive ? undefined : STATIC_PROPS)}\n        {...rest}\n        className={canvasClassName}\n      >\n        {showBackground && <Background variant={BackgroundVariant.Dots} gap={20} size={1} color={t.pattern} />}\n        {interactive && showControls && <Controls showInteractive={showInteractiveControls} />}\n        {interactive && showMiniMap && (\n          <MiniMap<N> pannable zoomable nodeColor={miniColor} nodeStrokeWidth={0} nodeBorderRadius={3} />\n        )}\n        {children}\n      </ReactFlow>\n    </div>\n  );\n}\n","import { useCallback } from 'react';\nimport { addEdge, useEdgesState, useNodesState, type Connection, type Edge, type Node } from '@xyflow/react';\nimport type { FlowNode } from './nodes';\n\n/**\n * Local nodes/edges state wired for drag, select and connect. New connections become\n * active (animated) smoothstep edges. Spread the result into `<FlowCanvas>`.\n */\nexport function useFlowState<N extends Node = FlowNode, E extends Edge = Edge>(initialNodes: N[], initialEdges: E[]) {\n  const [nodes, setNodes, onNodesChange] = useNodesState<N>(initialNodes);\n  const [edges, setEdges, onEdgesChange] = useEdgesState<E>(initialEdges);\n  const onConnect = useCallback(\n    (c: Connection) => {\n      // A Connection plus brand edge props (addEdge keeps the extra fields).\n      const active: Connection = Object.assign({ type: 'smoothstep', animated: true }, c);\n      setEdges((eds) => addEdge<E>(active, eds));\n    },\n    [setEdges],\n  );\n  return { nodes, edges, setNodes, setEdges, onNodesChange, onEdgesChange, onConnect };\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@gntik-ai/flow",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.5.0",
+  "description": "React Flow (@xyflow/react 12) canvas, nodes and edges themed by the gntik-ui brand tokens.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "src/styles.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./src/styles.css"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gntik-ai/gntik-ui.git",
+    "directory": "packages/flow"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@gntik-ai/tokens": "0.2.1",
+    "@xyflow/react": "^12.11.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "jsdom": "^30.1.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tsdown": "^0.23.0",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.2"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  }
 }

package/src/styles.css

@@ -0,0 +1,138 @@
+/* ============================================================================
+   @gntik-ai/flow/styles.css — React Flow themed by the gntik-ui brand tokens.
+   Load once, after the token layer (@gntik-ai/tokens/brand.css). Every --xy-*
+   variable points at a brand token, so the three themes of brand.css
+   (:root = light · .dark · .high_contrast) re-skin the canvas with no JS.
+   Scope: anything inside `.gu-flow` (FlowCanvas adds it to its wrapper).
+   ============================================================================ */
+@import "@xyflow/react/dist/style.css";
+@source "../dist";
+
+/* ── Variables: light (:root) and dark (.dark) share the mapping; the tokens differ ── */
+.gu-flow,
+.dark .gu-flow {
+  --xy-background-color: transparent;
+  --xy-background-pattern-color: hsl(var(--border));
+
+  --xy-edge-stroke: hsl(var(--muted-foreground) / 0.45);
+  --xy-edge-stroke-width: 1.5;
+  --xy-edge-stroke-selected: hsl(var(--primary));
+  --xy-edge-label-background-color: hsl(var(--card));
+  --xy-edge-label-color: hsl(var(--foreground));
+  --xy-connectionline-stroke: hsl(var(--primary));
+  --xy-connectionline-stroke-width: 1.75;
+
+  --xy-node-color: hsl(var(--card-foreground));
+  --xy-node-background-color: hsl(var(--card));
+  --xy-node-border: 1px solid hsl(var(--border));
+  --xy-node-border-radius: var(--radius-md);
+  --xy-node-group-background-color: hsl(var(--muted) / 0.4);
+  --xy-node-boxshadow-hover: var(--shadow-sm);
+  --xy-node-boxshadow-selected: 0 0 0 2px hsl(var(--primary) / 0.35);
+
+  --xy-handle-background-color: hsl(var(--card));
+  --xy-handle-border-color: hsl(var(--muted-foreground) / 0.55);
+
+  --xy-selection-background-color: hsl(var(--primary) / 0.08);
+  --xy-selection-border: 1px dashed hsl(var(--primary) / 0.6);
+  --xy-resize-background-color: hsl(var(--primary));
+
+  --xy-controls-button-background-color: hsl(var(--card));
+  --xy-controls-button-background-color-hover: hsl(var(--secondary));
+  --xy-controls-button-color: hsl(var(--foreground));
+  --xy-controls-button-color-hover: hsl(var(--foreground));
+  --xy-controls-button-border-color: hsl(var(--border));
+  --xy-controls-box-shadow: var(--shadow-md);
+
+  --xy-minimap-background-color: hsl(var(--card));
+  --xy-minimap-mask-background-color: hsl(var(--muted-foreground) / 0.12);
+  --xy-minimap-mask-stroke-color: hsl(var(--border));
+  --xy-minimap-mask-stroke-width: 1;
+  --xy-minimap-node-background-color: hsl(var(--muted-foreground) / 0.4);
+  --xy-minimap-node-stroke-color: transparent;
+
+  --xy-attribution-background-color: transparent;
+}
+
+/* ── High contrast: solid strokes, stronger handles and mask ─────────────────── */
+.high_contrast .gu-flow {
+  --xy-edge-stroke: hsl(var(--foreground) / 0.75);
+  --xy-edge-stroke-width: 2;
+  --xy-handle-border-color: hsl(var(--foreground));
+  --xy-node-border: 2px solid hsl(var(--border));
+  --xy-selection-border: 2px solid hsl(var(--primary));
+  --xy-minimap-mask-background-color: hsl(var(--foreground) / 0.18);
+}
+
+/* ── Structure ───────────────────────────────────────────────────────────────── */
+.gu-flow .react-flow__pane { cursor: grab; }
+.gu-flow .react-flow__pane.dragging { cursor: grabbing; }
+
+/* Active (animated) edges and the edge being connected are primary. */
+.gu-flow .react-flow__edge.animated .react-flow__edge-path { stroke: hsl(var(--primary)); stroke-width: 1.75px; }
+.gu-flow .react-flow__edge:focus-visible .react-flow__edge-path { stroke: hsl(var(--primary)); }
+.gu-flow .react-flow__edge-text { font-family: var(--font-mono); font-size: 10px; font-weight: 500; }
+
+/* Handles: small card dot → primary on hover / while connecting. */
+.gu-flow .react-flow__handle {
+  width: 9px; height: 9px; min-width: 0; min-height: 0; border-width: 1.5px; border-radius: 9999px;
+  transition: background-color 0.12s, border-color 0.12s;
+}
+.gu-flow .react-flow__handle:hover,
+.gu-flow .react-flow__handle.connectingto,
+.gu-flow .react-flow__handle.connectingfrom,
+.gu-flow .react-flow__handle.valid { background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
+
+/* Named handles retain the small dot inside a separate 32px pointer target.
+   Custom renderers reserve space per side so adjacent targets do not overlap. */
+.gu-flow .react-flow__handle.gu-flow-custom-handle {
+  width: 32px; height: 32px; border: none; background: transparent; z-index: 1;
+}
+.gu-flow .gu-flow-custom-handle:focus-visible {
+  outline: 2px solid hsl(var(--focus-ring)); outline-offset: 2px;
+}
+.gu-flow .gu-flow-custom-handle::after {
+  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  width: 9px; height: 9px; border-radius: 9999px; pointer-events: none;
+  background: var(--xy-handle-background-color); border: 1.5px solid var(--xy-handle-border-color);
+  transition: background-color 0.12s, border-color 0.12s;
+}
+.gu-flow .gu-flow-custom-handle:hover::after,
+.gu-flow .gu-flow-custom-handle.connectingto::after,
+.gu-flow .gu-flow-custom-handle.connectingfrom::after,
+.gu-flow .gu-flow-custom-handle.valid::after {
+  background: var(--xy-connectionline-stroke); border-color: var(--xy-connectionline-stroke);
+}
+
+/* Nodes: the brand card draws its own border/ring; reset the built-in node boxes
+   (default/input/output/group) so a custom type named like one never gets the white box. */
+.gu-flow .react-flow__node { font-family: var(--font-sans); }
+.gu-flow .react-flow__node:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-lg); }
+.gu-flow .react-flow__node.selected { box-shadow: none; }
+.gu-flow .react-flow__node-default,
+.gu-flow .react-flow__node-input,
+.gu-flow .react-flow__node-output,
+.gu-flow .react-flow__node-group {
+  padding: 0; width: auto; background: transparent; border: none; border-radius: 0;
+  color: inherit; box-shadow: none; text-align: left;
+}
+
+/* Controls + minimap. */
+.gu-flow .react-flow__controls { border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); overflow: hidden; }
+.gu-flow .react-flow__controls-button { width: 26px; height: 26px; }
+.gu-flow .react-flow__controls-button:last-child { border-bottom: none; }
+.gu-flow .react-flow__controls-button svg { fill: currentColor; max-width: 13px; max-height: 13px; }
+.gu-flow .react-flow__minimap { border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); overflow: hidden; }
+
+/* Attribution: discreet. */
+.gu-flow .react-flow__attribution { padding: 2px 5px; }
+.gu-flow .react-flow__attribution a { color: hsl(var(--muted-foreground) / 0.55); font-size: 9px; }
+
+/* "Running" node: a primary segment travels around the card border. */
+.gu-flow-run-frame { overflow: visible; }
+.gu-flow-run {
+  x: 1.25px; y: 1.25px; width: calc(100% - 2.5px); height: calc(100% - 2.5px); rx: 9px;
+  animation: gu-flow-run 1.8s linear infinite;
+}
+@keyframes gu-flow-run { to { stroke-dashoffset: -100; } }
+@media (prefers-reduced-motion: reduce) { .gu-flow-run { animation: none; } }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.