@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/Flow/flowGraph.js

@@ -0,0 +1,157 @@
+import { flowOutputsOf } from "./flowBlockRegistry.js";
+const FLOW_LEVEL_GAP = 336;
+const FLOW_SIBLING_GAP = 176;
+const nodesOf = (graph) => Array.isArray(graph?.nodes) ? graph.nodes : [];
+const edgesOf = (graph) => Array.isArray(graph?.edges) ? graph.edges : [];
+const outgoingByNode = (graph) => {
+  const outgoing = /* @__PURE__ */ new Map();
+  for (const edge of edgesOf(graph)) {
+    outgoing.set(edge.source, [...outgoing.get(edge.source) ?? [], edge]);
+  }
+  return outgoing;
+};
+const triggerNodesOf = (graph, registry) => nodesOf(graph).filter((node) => registry.get(node.type)?.category === "trigger");
+const isFlowNodeRemovable = (node, registry) => registry.get(node.type)?.removable !== false;
+const reachableFrom = (graph, startNodeId) => {
+  const outgoing = outgoingByNode(graph);
+  const visited = /* @__PURE__ */ new Set();
+  const pending = [startNodeId];
+  while (pending.length > 0) {
+    const nodeId = pending.pop();
+    if (nodeId === void 0 || visited.has(nodeId)) continue;
+    visited.add(nodeId);
+    for (const edge of outgoing.get(nodeId) ?? []) pending.push(edge.target);
+  }
+  return visited;
+};
+const findCycle = (graph) => {
+  const outgoing = outgoingByNode(graph);
+  const state = /* @__PURE__ */ new Map();
+  const path = [];
+  const visit = (nodeId) => {
+    state.set(nodeId, "visiting");
+    path.push(nodeId);
+    for (const edge of outgoing.get(nodeId) ?? []) {
+      const targetState = state.get(edge.target);
+      if (targetState === "visiting") return path.slice(path.indexOf(edge.target));
+      if (targetState === void 0) {
+        const cycle = visit(edge.target);
+        if (cycle) return cycle;
+      }
+    }
+    path.pop();
+    state.set(nodeId, "done");
+    return null;
+  };
+  for (const node of nodesOf(graph)) {
+    if (state.has(node.nodeId)) continue;
+    const cycle = visit(node.nodeId);
+    if (cycle) return cycle;
+  }
+  return null;
+};
+const canConnect = (graph, registry, candidate) => {
+  const { source, sourcePort, target } = candidate;
+  if (!source || !target || source === target) return false;
+  const nodes = nodesOf(graph);
+  const sourceNode = nodes.find((node) => node.nodeId === source);
+  const targetNode = nodes.find((node) => node.nodeId === target);
+  if (!sourceNode || !targetNode) return false;
+  const sourceDefinition = registry.get(sourceNode.type);
+  const targetDefinition = registry.get(targetNode.type);
+  if (!flowOutputsOf(sourceDefinition, sourceNode.config).includes(sourcePort)) return false;
+  if (!targetDefinition || targetDefinition.category === "trigger") return false;
+  const edges = edgesOf(graph);
+  if (edges.some((edge) => edge.source === source && edge.sourcePort === sourcePort)) return false;
+  if (edges.some((edge) => edge.target === target)) return false;
+  return !reachableFrom(graph, target).has(source);
+};
+const validateFlowGraph = (graph, registry) => {
+  const issues = [];
+  const nodes = nodesOf(graph);
+  const edges = edgesOf(graph);
+  for (const node of nodes) {
+    const definition = registry.get(node.type);
+    if (!definition) {
+      issues.push({ code: "unknownBlock", severity: "error", nodeId: node.nodeId });
+      continue;
+    }
+    for (const blockIssue of definition.validate(node.config) ?? []) {
+      issues.push({ ...blockIssue, nodeId: node.nodeId });
+    }
+  }
+  const triggers = triggerNodesOf(graph, registry);
+  if (triggers.length === 0) issues.push({ code: "missingTrigger", severity: "error" });
+  triggers.slice(1).forEach((trigger) => {
+    issues.push({ code: "multipleTriggers", severity: "error", nodeId: trigger.nodeId });
+  });
+  const firstTrigger = triggers[0];
+  if (firstTrigger) {
+    const reachable = reachableFrom(graph, firstTrigger.nodeId);
+    nodes.filter((node) => !reachable.has(node.nodeId) && registry.get(node.type)?.category !== "trigger").forEach((node) => issues.push({ code: "unreachableNode", severity: "error", nodeId: node.nodeId }));
+  }
+  const inputCount = /* @__PURE__ */ new Map();
+  const portCount = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    inputCount.set(edge.target, (inputCount.get(edge.target) ?? 0) + 1);
+    const portKey = `${edge.source}|${edge.sourcePort}`;
+    portCount.set(portKey, (portCount.get(portKey) ?? 0) + 1);
+  }
+  inputCount.forEach((count, nodeId) => {
+    if (count > 1) issues.push({ code: "multipleInputs", severity: "error", nodeId });
+  });
+  edges.filter((edge) => (portCount.get(`${edge.source}|${edge.sourcePort}`) ?? 0) > 1).forEach(
+    (edge) => issues.push({ code: "portFanOut", severity: "error", edgeId: edge.edgeId, nodeId: edge.source })
+  );
+  const cycle = findCycle(graph);
+  if (cycle) cycle.forEach((nodeId) => issues.push({ code: "cycle", severity: "error", nodeId }));
+  nodes.filter((node) => flowOutputsOf(registry.get(node.type), node.config).includes("true")).filter((node) => !edges.some((edge) => edge.source === node.nodeId && edge.sourcePort === "true")).forEach((node) => issues.push({ code: "missingTrueBranch", severity: "warning", nodeId: node.nodeId }));
+  return issues;
+};
+const hasBlockingIssues = (issues) => (issues ?? []).some((issue) => issue.severity === "error");
+const layoutFlowByLevels = (graph, registry) => {
+  const nodes = nodesOf(graph);
+  const outgoing = outgoingByNode(graph);
+  const levelOf = /* @__PURE__ */ new Map();
+  const roots = triggerNodesOf(graph, registry);
+  const queue = roots.map((root) => root.nodeId);
+  roots.forEach((root) => levelOf.set(root.nodeId, 0));
+  while (queue.length > 0) {
+    const nodeId = queue.shift();
+    if (nodeId === void 0) continue;
+    const level = levelOf.get(nodeId) ?? 0;
+    for (const edge of outgoing.get(nodeId) ?? []) {
+      if (levelOf.has(edge.target)) continue;
+      levelOf.set(edge.target, level + 1);
+      queue.push(edge.target);
+    }
+  }
+  const deepestLevel = Math.max(-1, ...Array.from(levelOf.values()));
+  nodes.filter((node) => !levelOf.has(node.nodeId)).forEach((node) => levelOf.set(node.nodeId, deepestLevel + 1));
+  const nodesByLevel = /* @__PURE__ */ new Map();
+  nodes.forEach((node) => {
+    const level = levelOf.get(node.nodeId) ?? 0;
+    nodesByLevel.set(level, [...nodesByLevel.get(level) ?? [], node.nodeId]);
+  });
+  const positions = {};
+  nodesByLevel.forEach((nodeIds, level) => {
+    const columnHeight = (nodeIds.length - 1) * FLOW_SIBLING_GAP;
+    nodeIds.forEach((nodeId, index) => {
+      positions[nodeId] = { x: level * FLOW_LEVEL_GAP, y: index * FLOW_SIBLING_GAP - columnHeight / 2 };
+    });
+  });
+  return positions;
+};
+export {
+  FLOW_LEVEL_GAP,
+  FLOW_SIBLING_GAP,
+  canConnect,
+  findCycle,
+  hasBlockingIssues,
+  isFlowNodeRemovable,
+  layoutFlowByLevels,
+  reachableFrom,
+  triggerNodesOf,
+  validateFlowGraph
+};
+//# sourceMappingURL=flowGraph.js.map

package/dist/components/UI/Flow/flowGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowGraph.js","sources":["../../../../src/components/UI/Flow/flowGraph.ts"],"sourcesContent":["import { flowOutputsOf, type IFlowBlockRegistry } from './flowBlockRegistry';\nimport type { IFlowEdge, IFlowGraph, IFlowIssue, IFlowNode, IFlowPosition, TFlowPortId } from './flowTypes';\n\n/** The flow reads left to right: one level per column, siblings stacked in the column. */\nexport const FLOW_LEVEL_GAP = 336;\nexport const FLOW_SIBLING_GAP = 176;\n\nconst nodesOf = (graph: IFlowGraph): Array<IFlowNode> => (Array.isArray(graph?.nodes) ? graph.nodes : []);\nconst edgesOf = (graph: IFlowGraph): Array<IFlowEdge> => (Array.isArray(graph?.edges) ? graph.edges : []);\n\nconst outgoingByNode = (graph: IFlowGraph): Map<string, Array<IFlowEdge>> => {\n  const outgoing = new Map<string, Array<IFlowEdge>>();\n  for (const edge of edgesOf(graph)) {\n    outgoing.set(edge.source, [...(outgoing.get(edge.source) ?? []), edge]);\n  }\n  return outgoing;\n};\n\nexport const triggerNodesOf = (graph: IFlowGraph, registry: IFlowBlockRegistry): Array<IFlowNode> =>\n  nodesOf(graph).filter((node) => registry.get(node.type)?.category === 'trigger');\n\nexport const isFlowNodeRemovable = (node: IFlowNode, registry: IFlowBlockRegistry): boolean =>\n  registry.get(node.type)?.removable !== false;\n\n/** Node ids reachable from `startNodeId` following edges, the start included. */\nexport const reachableFrom = (graph: IFlowGraph, startNodeId: string): Set<string> => {\n  const outgoing = outgoingByNode(graph);\n  const visited = new Set<string>();\n  const pending = [startNodeId];\n  while (pending.length > 0) {\n    const nodeId = pending.pop();\n    if (nodeId === undefined || visited.has(nodeId)) continue;\n    visited.add(nodeId);\n    for (const edge of outgoing.get(nodeId) ?? []) pending.push(edge.target);\n  }\n  return visited;\n};\n\n/** The node ids of the first cycle found, in order, or null when the graph has none. */\nexport const findCycle = (graph: IFlowGraph): Array<string> | null => {\n  const outgoing = outgoingByNode(graph);\n  const state = new Map<string, 'visiting' | 'done'>();\n  const path: Array<string> = [];\n\n  const visit = (nodeId: string): Array<string> | null => {\n    state.set(nodeId, 'visiting');\n    path.push(nodeId);\n    for (const edge of outgoing.get(nodeId) ?? []) {\n      const targetState = state.get(edge.target);\n      if (targetState === 'visiting') return path.slice(path.indexOf(edge.target));\n      if (targetState === undefined) {\n        const cycle = visit(edge.target);\n        if (cycle) return cycle;\n      }\n    }\n    path.pop();\n    state.set(nodeId, 'done');\n    return null;\n  };\n\n  for (const node of nodesOf(graph)) {\n    if (state.has(node.nodeId)) continue;\n    const cycle = visit(node.nodeId);\n    if (cycle) return cycle;\n  }\n  return null;\n};\n\nexport interface IFlowConnectionCandidate {\n  source: string;\n  sourcePort: TFlowPortId;\n  target: string;\n}\n\n/**\n * The V0 shape is a tree with no fan-out: one input per block, one edge per output\n * port, no edge into a trigger and no cycle. Keeping this rule here lets the canvas\n * refuse a bad connection while it is being drawn, not only when publishing.\n */\nexport const canConnect = (\n  graph: IFlowGraph,\n  registry: IFlowBlockRegistry,\n  candidate: IFlowConnectionCandidate,\n): boolean => {\n  const { source, sourcePort, target } = candidate;\n  if (!source || !target || source === target) return false;\n\n  const nodes = nodesOf(graph);\n  const sourceNode = nodes.find((node) => node.nodeId === source);\n  const targetNode = nodes.find((node) => node.nodeId === target);\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceDefinition = registry.get(sourceNode.type);\n  const targetDefinition = registry.get(targetNode.type);\n  if (!flowOutputsOf(sourceDefinition, sourceNode.config).includes(sourcePort)) return false;\n  if (!targetDefinition || targetDefinition.category === 'trigger') return false;\n\n  const edges = edgesOf(graph);\n  if (edges.some((edge) => edge.source === source && edge.sourcePort === sourcePort)) return false;\n  if (edges.some((edge) => edge.target === target)) return false;\n\n  return !reachableFrom(graph, target).has(source);\n};\n\n/** The structural rules of the V0 shape, plus each block's own `validate`. */\nexport const validateFlowGraph = (graph: IFlowGraph, registry: IFlowBlockRegistry): Array<IFlowIssue> => {\n  const issues: Array<IFlowIssue> = [];\n  const nodes = nodesOf(graph);\n  const edges = edgesOf(graph);\n\n  for (const node of nodes) {\n    const definition = registry.get(node.type);\n    if (!definition) {\n      issues.push({ code: 'unknownBlock', severity: 'error', nodeId: node.nodeId });\n      continue;\n    }\n    for (const blockIssue of definition.validate(node.config) ?? []) {\n      issues.push({ ...blockIssue, nodeId: node.nodeId });\n    }\n  }\n\n  const triggers = triggerNodesOf(graph, registry);\n  if (triggers.length === 0) issues.push({ code: 'missingTrigger', severity: 'error' });\n  triggers.slice(1).forEach((trigger) => {\n    issues.push({ code: 'multipleTriggers', severity: 'error', nodeId: trigger.nodeId });\n  });\n\n  const firstTrigger = triggers[0];\n  if (firstTrigger) {\n    const reachable = reachableFrom(graph, firstTrigger.nodeId);\n    nodes\n      .filter((node) => !reachable.has(node.nodeId) && registry.get(node.type)?.category !== 'trigger')\n      .forEach((node) => issues.push({ code: 'unreachableNode', severity: 'error', nodeId: node.nodeId }));\n  }\n\n  const inputCount = new Map<string, number>();\n  const portCount = new Map<string, number>();\n  for (const edge of edges) {\n    inputCount.set(edge.target, (inputCount.get(edge.target) ?? 0) + 1);\n    const portKey = `${edge.source}|${edge.sourcePort}`;\n    portCount.set(portKey, (portCount.get(portKey) ?? 0) + 1);\n  }\n  inputCount.forEach((count, nodeId) => {\n    if (count > 1) issues.push({ code: 'multipleInputs', severity: 'error', nodeId });\n  });\n  edges\n    .filter((edge) => (portCount.get(`${edge.source}|${edge.sourcePort}`) ?? 0) > 1)\n    .forEach((edge) =>\n      issues.push({ code: 'portFanOut', severity: 'error', edgeId: edge.edgeId, nodeId: edge.source }),\n    );\n\n  const cycle = findCycle(graph);\n  if (cycle) cycle.forEach((nodeId) => issues.push({ code: 'cycle', severity: 'error', nodeId }));\n\n  nodes\n    .filter((node) => flowOutputsOf(registry.get(node.type), node.config).includes('true'))\n    .filter((node) => !edges.some((edge) => edge.source === node.nodeId && edge.sourcePort === 'true'))\n    .forEach((node) => issues.push({ code: 'missingTrueBranch', severity: 'warning', nodeId: node.nodeId }));\n\n  return issues;\n};\n\nexport const hasBlockingIssues = (issues: Array<IFlowIssue>): boolean =>\n  (issues ?? []).some((issue) => issue.severity === 'error');\n\n/**\n * Lays the tree out by levels from the trigger: each level one column to the right,\n * siblings stacked in the column. Used only for a flow with no saved positions (one born from a rule) or when\n * the user asks for it; a position the user arranged is data and is never overwritten\n * implicitly.\n */\nexport const layoutFlowByLevels = (graph: IFlowGraph, registry: IFlowBlockRegistry): Record<string, IFlowPosition> => {\n  const nodes = nodesOf(graph);\n  const outgoing = outgoingByNode(graph);\n  const levelOf = new Map<string, number>();\n  const roots = triggerNodesOf(graph, registry);\n  const queue: Array<string> = roots.map((root) => root.nodeId);\n  roots.forEach((root) => levelOf.set(root.nodeId, 0));\n\n  while (queue.length > 0) {\n    const nodeId = queue.shift();\n    if (nodeId === undefined) continue;\n    const level = levelOf.get(nodeId) ?? 0;\n    for (const edge of outgoing.get(nodeId) ?? []) {\n      if (levelOf.has(edge.target)) continue;\n      levelOf.set(edge.target, level + 1);\n      queue.push(edge.target);\n    }\n  }\n\n  const deepestLevel = Math.max(-1, ...Array.from(levelOf.values()));\n  nodes.filter((node) => !levelOf.has(node.nodeId)).forEach((node) => levelOf.set(node.nodeId, deepestLevel + 1));\n\n  const nodesByLevel = new Map<number, Array<string>>();\n  nodes.forEach((node) => {\n    const level = levelOf.get(node.nodeId) ?? 0;\n    nodesByLevel.set(level, [...(nodesByLevel.get(level) ?? []), node.nodeId]);\n  });\n\n  const positions: Record<string, IFlowPosition> = {};\n  nodesByLevel.forEach((nodeIds, level) => {\n    const columnHeight = (nodeIds.length - 1) * FLOW_SIBLING_GAP;\n    nodeIds.forEach((nodeId, index) => {\n      positions[nodeId] = { x: level * FLOW_LEVEL_GAP, y: index * FLOW_SIBLING_GAP - columnHeight / 2 };\n    });\n  });\n  return positions;\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UI/Flow/flowTypes.d.ts

@@ -0,0 +1,104 @@
+import { ComponentType, ReactNode } from 'react';
+import { SymbolCodepoints } from '../MaterialSymbol';
+export type TFlowPortId = 'next' | 'true' | 'false' | 'error';
+export type TFlowBlockCategory = 'trigger' | 'condition' | 'action';
+export interface IFlowPosition {
+    x: number;
+    y: number;
+}
+export interface IFlowNode<TConfig = unknown> {
+    nodeId: string;
+    type: string;
+    typeVersion: number;
+    config: TConfig;
+    position: IFlowPosition;
+    label?: string;
+    disabled?: boolean;
+}
+export interface IFlowEdge {
+    edgeId: string;
+    source: string;
+    sourcePort: TFlowPortId;
+    target: string;
+}
+export type TFlowAnnotationKind = 'text' | 'rectangle' | 'ellipse' | 'line' | 'arrow' | 'step' | 'drawing';
+export type TFlowAnnotationStroke = 'thin' | 'medium' | 'thick';
+export type TFlowAnnotationTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+/** What a press on the empty canvas does: select (marquee) or draw one kind of annotation. */
+export type TFlowCanvasTool = 'select' | TFlowAnnotationKind;
+export type TFlowShapeTool = Extract<TFlowAnnotationKind, 'line' | 'arrow' | 'rectangle' | 'ellipse' | 'step'>;
+export interface IFlowSize {
+    width: number;
+    height: number;
+}
+/**
+ * A note drawn on the canvas for the people reading the flow. It never runs: the engine reads
+ * `nodes` and `edges` only, and graph validation ignores it.
+ */
+export interface IFlowAnnotation {
+    annotationId: string;
+    kind: TFlowAnnotationKind;
+    /** Top-left corner of its box, in canvas coordinates. */
+    position: IFlowPosition;
+    size: IFlowSize;
+    tone: TFlowAnnotationTone;
+    /** Line weight of shapes and strokes, and the size of a text. Absent reads as `medium`. */
+    stroke?: TFlowAnnotationStroke;
+    text?: string;
+    /** `step`: the number it shows. */
+    step?: number;
+    /** `line` and `arrow`: start and end; `drawing`: the stroke. Relative to `position`. */
+    points?: Array<IFlowPosition>;
+}
+export interface IFlowGraph {
+    nodes: Array<IFlowNode>;
+    edges: Array<IFlowEdge>;
+    annotations?: Array<IFlowAnnotation>;
+}
+export type TFlowIssueSeverity = 'error' | 'warning';
+export type TFlowGraphIssueCode = 'missingTrigger' | 'multipleTriggers' | 'unknownBlock' | 'unreachableNode' | 'multipleInputs' | 'portFanOut' | 'cycle' | 'missingTrueBranch';
+export interface IFlowIssue {
+    /** A graph rule from `TFlowGraphIssueCode`, or a block-specific code from its `validate`. */
+    code: string;
+    severity: TFlowIssueSeverity;
+    /** Already translated by the block. Graph issues leave it empty and the UI names them. */
+    message?: string;
+    nodeId?: string;
+    edgeId?: string;
+}
+export type TFlowRunStepStatus = 'passed' | 'failed' | 'skipped' | 'wouldRun' | 'error' | 'blocked';
+/** The result of one run (real or simulated) painted over the canvas. */
+export interface IFlowRunOverlay {
+    steps: Record<string, TFlowRunStepStatus>;
+    traversedEdgeIds: Array<string>;
+}
+export interface IFlowBlockConfigPanelProps<TConfig> {
+    config: TConfig;
+    onChange: (next: TConfig) => void;
+    readOnly?: boolean;
+}
+export type TFlowBlockIssue = Omit<IFlowIssue, 'nodeId' | 'edgeId'>;
+export interface IFlowBlockDefinition<TConfig = unknown> {
+    /** Namespaced and stable: `trigger.recordEvent`, `action.moveWorkflowCard`. */
+    type: string;
+    typeVersion: number;
+    category: TFlowBlockCategory;
+    icon: SymbolCodepoints;
+    /** Translated by the host. */
+    label: string;
+    outputs: Array<TFlowPortId>;
+    /** Ports that depend on the config, e.g. an error path the user turns on inside the block. Defaults to `outputs`. */
+    resolveOutputs?: (config: TConfig) => Array<TFlowPortId>;
+    /** How many of this block a flow may hold; omit for no limit. */
+    maxInstances?: number;
+    /** `false` keeps the block on the canvas: Delete and the inspector skip it. Defaults to `true`. */
+    removable?: boolean;
+    createDefaultConfig: () => TConfig;
+    ConfigPanel: ComponentType<IFlowBlockConfigPanelProps<TConfig>>;
+    /** When one block stands for several kinds (chosen inside it), the icon and name of the chosen kind. */
+    resolveIcon?: (config: TConfig) => SymbolCodepoints | undefined;
+    resolveLabel?: (config: TConfig) => string | undefined;
+    /** One line inside the block on the canvas. */
+    renderSummary: (config: TConfig) => ReactNode;
+    validate: (config: TConfig) => Array<TFlowBlockIssue>;
+}

package/dist/components/UI/Flow/flowTypes.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=flowTypes.js.map

package/dist/components/UI/Flow/flowTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowTypes.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/UI/Flow/flowViewport.d.ts

@@ -0,0 +1,25 @@
+export interface IFlowViewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+export interface IFlowRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface IFlowSize {
+    width: number;
+    height: number;
+}
+/** Breathing room between a revealed block and the edge of the canvas, in screen pixels. */
+export declare const FLOW_REVEAL_PADDING = 32;
+/**
+ * The smallest pan that brings `rect` (flow coordinates) fully inside a canvas of `canvasSize`
+ * (screen pixels), keeping the zoom. Returns null when the rect is already fully visible, so a
+ * block on screen never moves the view. A rect larger than the canvas is aligned to its top-left.
+ */
+export declare const viewportToReveal: (viewport: IFlowViewport, rect: IFlowRect, canvasSize: IFlowSize, padding?: number) => IFlowViewport | null;
+/** The box around several rects; null for none. */
+export declare const boundsOfRects: (rects: Array<IFlowRect>) => IFlowRect | null;

package/dist/components/UI/Flow/flowViewport.js

@@ -0,0 +1,31 @@
+const FLOW_REVEAL_PADDING = 32;
+const shiftOnAxis = (start, end, min, max) => {
+  if (start < min) return min - start;
+  if (end > max) return Math.max(max - end, min - start);
+  return 0;
+};
+const viewportToReveal = (viewport, rect, canvasSize, padding = FLOW_REVEAL_PADDING) => {
+  if (canvasSize.width <= 0 || canvasSize.height <= 0) return null;
+  const left = viewport.x + rect.x * viewport.zoom;
+  const top = viewport.y + rect.y * viewport.zoom;
+  const right = left + rect.width * viewport.zoom;
+  const bottom = top + rect.height * viewport.zoom;
+  const deltaX = shiftOnAxis(left, right, padding, canvasSize.width - padding);
+  const deltaY = shiftOnAxis(top, bottom, padding, canvasSize.height - padding);
+  if (deltaX === 0 && deltaY === 0) return null;
+  return { x: viewport.x + deltaX, y: viewport.y + deltaY, zoom: viewport.zoom };
+};
+const boundsOfRects = (rects) => {
+  if (rects.length === 0) return null;
+  const minX = Math.min(...rects.map((rect) => rect.x));
+  const minY = Math.min(...rects.map((rect) => rect.y));
+  const maxX = Math.max(...rects.map((rect) => rect.x + rect.width));
+  const maxY = Math.max(...rects.map((rect) => rect.y + rect.height));
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+};
+export {
+  FLOW_REVEAL_PADDING,
+  boundsOfRects,
+  viewportToReveal
+};
+//# sourceMappingURL=flowViewport.js.map

package/dist/components/UI/Flow/flowViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowViewport.js","sources":["../../../../src/components/UI/Flow/flowViewport.ts"],"sourcesContent":["export interface IFlowViewport {\n  x: number;\n  y: number;\n  zoom: number;\n}\n\nexport interface IFlowRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface IFlowSize {\n  width: number;\n  height: number;\n}\n\n/** Breathing room between a revealed block and the edge of the canvas, in screen pixels. */\nexport const FLOW_REVEAL_PADDING = 32;\n\nconst shiftOnAxis = (start: number, end: number, min: number, max: number): number => {\n  if (start < min) return min - start;\n  if (end > max) return Math.max(max - end, min - start);\n  return 0;\n};\n\n/**\n * The smallest pan that brings `rect` (flow coordinates) fully inside a canvas of `canvasSize`\n * (screen pixels), keeping the zoom. Returns null when the rect is already fully visible, so a\n * block on screen never moves the view. A rect larger than the canvas is aligned to its top-left.\n */\nexport const viewportToReveal = (\n  viewport: IFlowViewport,\n  rect: IFlowRect,\n  canvasSize: IFlowSize,\n  padding: number = FLOW_REVEAL_PADDING,\n): IFlowViewport | null => {\n  if (canvasSize.width <= 0 || canvasSize.height <= 0) return null;\n  const left = viewport.x + rect.x * viewport.zoom;\n  const top = viewport.y + rect.y * viewport.zoom;\n  const right = left + rect.width * viewport.zoom;\n  const bottom = top + rect.height * viewport.zoom;\n\n  const deltaX = shiftOnAxis(left, right, padding, canvasSize.width - padding);\n  const deltaY = shiftOnAxis(top, bottom, padding, canvasSize.height - padding);\n  if (deltaX === 0 && deltaY === 0) return null;\n  return { x: viewport.x + deltaX, y: viewport.y + deltaY, zoom: viewport.zoom };\n};\n\n/** The box around several rects; null for none. */\nexport const boundsOfRects = (rects: Array<IFlowRect>): IFlowRect | null => {\n  if (rects.length === 0) return null;\n  const minX = Math.min(...rects.map((rect) => rect.x));\n  const minY = Math.min(...rects.map((rect) => rect.y));\n  const maxX = Math.max(...rects.map((rect) => rect.x + rect.width));\n  const maxY = Math.max(...rects.map((rect) => rect.y + rect.height));\n  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };\n};\n"],"names":[],"mappings":"AAmBO,MAAM,sBAAsB;AAEnC,MAAM,cAAc,CAAC,OAAe,KAAa,KAAa,QAAwB;AACpF,MAAI,QAAQ,IAAK,QAAO,MAAM;AAC9B,MAAI,MAAM,IAAK,QAAO,KAAK,IAAI,MAAM,KAAK,MAAM,KAAK;AACrD,SAAO;AACT;AAOO,MAAM,mBAAmB,CAC9B,UACA,MACA,YACA,UAAkB,wBACO;AACzB,MAAI,WAAW,SAAS,KAAK,WAAW,UAAU,EAAG,QAAO;AAC5D,QAAM,OAAO,SAAS,IAAI,KAAK,IAAI,SAAS;AAC5C,QAAM,MAAM,SAAS,IAAI,KAAK,IAAI,SAAS;AAC3C,QAAM,QAAQ,OAAO,KAAK,QAAQ,SAAS;AAC3C,QAAM,SAAS,MAAM,KAAK,SAAS,SAAS;AAE5C,QAAM,SAAS,YAAY,MAAM,OAAO,SAAS,WAAW,QAAQ,OAAO;AAC3E,QAAM,SAAS,YAAY,KAAK,QAAQ,SAAS,WAAW,SAAS,OAAO;AAC5E,MAAI,WAAW,KAAK,WAAW,EAAG,QAAO;AACzC,SAAO,EAAE,GAAG,SAAS,IAAI,QAAQ,GAAG,SAAS,IAAI,QAAQ,MAAM,SAAS,KAAA;AAC1E;AAGO,MAAM,gBAAgB,CAAC,UAA8C;AAC1E,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,QAAM,OAAO,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC;AACpD,QAAM,OAAO,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC;AACpD,QAAM,OAAO,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,SAAS,KAAK,IAAI,KAAK,KAAK,CAAC;AACjE,QAAM,OAAO,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,SAAS,KAAK,IAAI,KAAK,MAAM,CAAC;AAClE,SAAO,EAAE,GAAG,MAAM,GAAG,MAAM,OAAO,OAAO,MAAM,QAAQ,OAAO,KAAA;AAChE;"}

package/dist/components/UI/Flow/index.d.ts

@@ -0,0 +1,13 @@
+export { FLOW_ANNOTATION_TONES, normalizeFlowAnnotations } from './flowAnnotations';
+export { createFlowBlockRegistry, defineFlowBlock, flowOutputsOf, type IFlowBlockRegistry } from './flowBlockRegistry';
+export { default as FlowCanvas, type IFlowCanvasProps } from './FlowCanvas';
+export { default as FlowEditorProvider, useFlowBlockRegistry, useFlowEditor, useFlowEditorStore, } from './FlowEditorProvider';
+export { createFlowEditorStore, type IFlowAnnotationGeometry, type IFlowEditorState, type IFlowSelection, selectFlowInspectedNodeId, type TFlowEditorStore, } from './flowEditorStore';
+export { canConnect, findCycle, FLOW_LEVEL_GAP, FLOW_SIBLING_GAP, hasBlockingIssues, isFlowNodeRemovable, layoutFlowByLevels, reachableFrom, triggerNodesOf, validateFlowGraph, } from './flowGraph';
+export { default as FlowInspector } from './FlowInspector';
+export { default as FlowIssueList } from './FlowIssueList';
+export { default as FlowLaneMap, type IFlowArc, type IFlowLane, type TFlowArcTone } from './FlowLaneMap';
+export { default as FlowNodeShell, type IFlowNodeShellProps } from './FlowNodeShell';
+export { default as FlowResizablePanel, type IFlowResizablePanelProps } from './FlowResizablePanel';
+export type * from './flowTypes';
+export { FLOW_RUN_STATUS_TONE, useFlowLabels } from './useFlowLabels';

package/dist/components/UI/Flow/index.js

@@ -0,0 +1,44 @@
+import { FLOW_ANNOTATION_TONES, normalizeFlowAnnotations } from "./flowAnnotations.js";
+import { createFlowBlockRegistry, defineFlowBlock, flowOutputsOf } from "./flowBlockRegistry.js";
+import { default as default2 } from "./FlowCanvas.js";
+import { default as default3, useFlowBlockRegistry, useFlowEditor, useFlowEditorStore } from "./FlowEditorProvider.js";
+import { createFlowEditorStore, selectFlowInspectedNodeId } from "./flowEditorStore.js";
+import { FLOW_LEVEL_GAP, FLOW_SIBLING_GAP, canConnect, findCycle, hasBlockingIssues, isFlowNodeRemovable, layoutFlowByLevels, reachableFrom, triggerNodesOf, validateFlowGraph } from "./flowGraph.js";
+import { default as default4 } from "./FlowInspector.js";
+import { default as default5 } from "./FlowIssueList.js";
+import { default as default6 } from "./FlowLaneMap.js";
+import { default as default7 } from "./FlowNodeShell.js";
+import { default as default8 } from "./FlowResizablePanel.js";
+import { FLOW_RUN_STATUS_TONE, useFlowLabels } from "./useFlowLabels.js";
+export {
+  FLOW_ANNOTATION_TONES,
+  FLOW_LEVEL_GAP,
+  FLOW_RUN_STATUS_TONE,
+  FLOW_SIBLING_GAP,
+  default2 as FlowCanvas,
+  default3 as FlowEditorProvider,
+  default4 as FlowInspector,
+  default5 as FlowIssueList,
+  default6 as FlowLaneMap,
+  default7 as FlowNodeShell,
+  default8 as FlowResizablePanel,
+  canConnect,
+  createFlowBlockRegistry,
+  createFlowEditorStore,
+  defineFlowBlock,
+  findCycle,
+  flowOutputsOf,
+  hasBlockingIssues,
+  isFlowNodeRemovable,
+  layoutFlowByLevels,
+  normalizeFlowAnnotations,
+  reachableFrom,
+  selectFlowInspectedNodeId,
+  triggerNodesOf,
+  useFlowBlockRegistry,
+  useFlowEditor,
+  useFlowEditorStore,
+  useFlowLabels,
+  validateFlowGraph
+};
+//# sourceMappingURL=index.js.map

package/dist/components/UI/Flow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/components/UI/Flow/useFlowAnnotationDrawing.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from 'react';
+import { IFlowPosition, TFlowAnnotationKind, TFlowAnnotationStroke, TFlowAnnotationTone, TFlowCanvasTool } from './flowTypes';
+export interface IFlowAnnotationDraft {
+    kind: TFlowAnnotationKind;
+    tone: TFlowAnnotationTone;
+    stroke: TFlowAnnotationStroke;
+    start: IFlowPosition;
+    current: IFlowPosition;
+    points: Array<IFlowPosition>;
+}
+interface IUseFlowAnnotationDrawingOptions {
+    containerRef: RefObject<HTMLDivElement>;
+    tool: TFlowCanvasTool;
+    tone: TFlowAnnotationTone;
+    stroke: TFlowAnnotationStroke;
+    enabled: boolean;
+    onCreated: (annotationId: string, kind: TFlowAnnotationKind) => void;
+}
+/**
+ * While a drawing tool is active, a press anywhere on the canvas draws, over blocks and annotations
+ * too, as in Figma. Wheel and pinch keep panning and zooming, because nothing is laid over the canvas:
+ * the press is heard on the pane itself. Returns the shape being drawn, for the preview.
+ */
+export declare const useFlowAnnotationDrawing: ({ containerRef, tool, tone, stroke, enabled, onCreated, }: IUseFlowAnnotationDrawingOptions) => IFlowAnnotationDraft | null;
+export {};

package/dist/components/UI/Flow/useFlowAnnotationDrawing.js

@@ -0,0 +1,117 @@
+import { useState, useEffect } from "react";
+import { useReactFlow } from "@xyflow/react";
+import { FLOW_DRAWING_MAX_POINTS, nextFlowStepNumber, FLOW_ANNOTATION_MIN_SIZE, FLOW_TEXT_CARET_OFFSET, boxBetween, boxAroundPoints } from "./flowAnnotations.js";
+import { useFlowEditorStore } from "./FlowEditorProvider.js";
+const CLICK_TRAVEL_PX = 4;
+const DEFAULT_SHAPE_SIZE = { width: 160, height: 96 };
+const DEFAULT_ARROW_LENGTH = 160;
+const STEP_SIZE = 32;
+const STROKE_PADDING = 6;
+const ARROW_PADDING = 12;
+const DRAWING_STEP_PX = 2;
+const FREE_POSITION = { snapToGrid: false };
+const distance = (from, to) => Math.hypot(to.x - from.x, to.y - from.y);
+const annotationFromDraft = (draft, isClick, nextStep) => {
+  const { kind, tone, stroke, start, current } = draft;
+  const style = { kind, tone, stroke };
+  if (kind === "text")
+    return {
+      ...style,
+      position: { x: start.x, y: start.y - FLOW_TEXT_CARET_OFFSET },
+      size: { width: FLOW_ANNOTATION_MIN_SIZE, height: FLOW_ANNOTATION_MIN_SIZE },
+      text: ""
+    };
+  if (kind === "step")
+    return {
+      ...style,
+      position: { x: start.x - STEP_SIZE / 2, y: start.y - STEP_SIZE / 2 },
+      size: { width: STEP_SIZE, height: STEP_SIZE },
+      step: nextStep
+    };
+  if (kind === "rectangle" || kind === "ellipse")
+    return isClick ? { ...style, position: start, size: DEFAULT_SHAPE_SIZE } : { ...style, ...boxBetween(start, current) };
+  if (kind === "arrow" || kind === "line") {
+    const end = isClick ? { x: start.x + DEFAULT_ARROW_LENGTH, y: start.y } : current;
+    return { ...style, ...boxAroundPoints([start, end], ARROW_PADDING) };
+  }
+  if (draft.points.length < 2) return null;
+  return { ...style, ...boxAroundPoints(draft.points, STROKE_PADDING) };
+};
+const useFlowAnnotationDrawing = ({
+  containerRef,
+  tool,
+  tone,
+  stroke,
+  enabled,
+  onCreated
+}) => {
+  const store = useFlowEditorStore();
+  const { screenToFlowPosition } = useReactFlow();
+  const [draft, setDraft] = useState(null);
+  useEffect(() => {
+    if (!enabled || tool === "select") return void 0;
+    const pane = containerRef.current?.querySelector(".react-flow__pane");
+    if (!pane) return void 0;
+    let detachGesture = null;
+    const handlePointerDown = (event) => {
+      if (event.button !== 0 || !(event.target instanceof Node) || !pane.contains(event.target)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const kind = tool;
+      const startScreen = { x: event.clientX, y: event.clientY };
+      const start = screenToFlowPosition(startScreen, FREE_POSITION);
+      let current = { kind, tone, stroke, start, current: start, points: [start] };
+      let lastKeptScreen = startScreen;
+      setDraft(current);
+      const handlePointerMove = (moveEvent) => {
+        const screen = { x: moveEvent.clientX, y: moveEvent.clientY };
+        const point = screenToFlowPosition(screen, FREE_POSITION);
+        const keepsPoint = kind === "drawing" && distance(lastKeptScreen, screen) >= DRAWING_STEP_PX && current.points.length < FLOW_DRAWING_MAX_POINTS;
+        if (keepsPoint) lastKeptScreen = screen;
+        current = { ...current, current: point, points: keepsPoint ? [...current.points, point] : current.points };
+        setDraft(current);
+      };
+      const detach = () => {
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+        window.removeEventListener("pointercancel", handlePointerCancel);
+        detachGesture = null;
+      };
+      const handlePointerUp = (upEvent) => {
+        detach();
+        setDraft(null);
+        const isClick = distance(startScreen, { x: upEvent.clientX, y: upEvent.clientY }) < CLICK_TRAVEL_PX;
+        const annotation = annotationFromDraft(
+          { ...current, current: screenToFlowPosition({ x: upEvent.clientX, y: upEvent.clientY }, FREE_POSITION) },
+          isClick,
+          nextFlowStepNumber(store.getState().graph.annotations ?? [])
+        );
+        if (!annotation) return;
+        const swallowClick = (clickEvent) => clickEvent.stopPropagation();
+        pane.addEventListener("click", swallowClick, { capture: true, once: true });
+        window.setTimeout(() => pane.removeEventListener("click", swallowClick, { capture: true }), 0);
+        const annotationId = store.getState().addAnnotation(annotation);
+        onCreated(annotationId, kind);
+      };
+      const handlePointerCancel = () => {
+        detach();
+        setDraft(null);
+      };
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", handlePointerUp);
+      window.addEventListener("pointercancel", handlePointerCancel);
+      detachGesture = detach;
+    };
+    pane.addEventListener("pointerdown", handlePointerDown, true);
+    return () => {
+      pane.removeEventListener("pointerdown", handlePointerDown, true);
+      detachGesture?.();
+      setDraft(null);
+    };
+  }, [containerRef, enabled, tool, tone, stroke, screenToFlowPosition, store, onCreated]);
+  return draft;
+};
+export {
+  useFlowAnnotationDrawing
+};
+//# sourceMappingURL=useFlowAnnotationDrawing.js.map

package/dist/components/UI/Flow/useFlowAnnotationDrawing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowAnnotationDrawing.js","sources":["../../../../src/components/UI/Flow/useFlowAnnotationDrawing.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\nimport { useReactFlow } from '@xyflow/react';\n\nimport {\n  boxAroundPoints,\n  boxBetween,\n  FLOW_ANNOTATION_MIN_SIZE,\n  FLOW_DRAWING_MAX_POINTS,\n  FLOW_TEXT_CARET_OFFSET,\n  nextFlowStepNumber,\n} from './flowAnnotations';\nimport { useFlowEditorStore } from './FlowEditorProvider';\nimport type {\n  IFlowAnnotation,\n  IFlowPosition,\n  TFlowAnnotationKind,\n  TFlowAnnotationStroke,\n  TFlowAnnotationTone,\n  TFlowCanvasTool,\n} from './flowTypes';\n\n/** Below this travel (screen px) a press is a click: shapes and arrows get a default size. */\nconst CLICK_TRAVEL_PX = 4;\nconst DEFAULT_SHAPE_SIZE = { width: 160, height: 96 };\nconst DEFAULT_ARROW_LENGTH = 160;\nconst STEP_SIZE = 32;\nconst STROKE_PADDING = 6;\nconst ARROW_PADDING = 12;\n/** Between two kept points of a stroke, in screen px: denser adds weight, not detail. */\nconst DRAWING_STEP_PX = 2;\n/** xyflow snaps converted points to the block grid by default; a hand-drawn stroke must stay free. */\nconst FREE_POSITION = { snapToGrid: false };\n\nexport interface IFlowAnnotationDraft {\n  kind: TFlowAnnotationKind;\n  tone: TFlowAnnotationTone;\n  stroke: TFlowAnnotationStroke;\n  start: IFlowPosition;\n  current: IFlowPosition;\n  points: Array<IFlowPosition>;\n}\n\ninterface IUseFlowAnnotationDrawingOptions {\n  containerRef: RefObject<HTMLDivElement>;\n  tool: TFlowCanvasTool;\n  tone: TFlowAnnotationTone;\n  stroke: TFlowAnnotationStroke;\n  enabled: boolean;\n  onCreated: (annotationId: string, kind: TFlowAnnotationKind) => void;\n}\n\nconst distance = (from: { x: number; y: number }, to: { x: number; y: number }): number =>\n  Math.hypot(to.x - from.x, to.y - from.y);\n\nconst annotationFromDraft = (\n  draft: IFlowAnnotationDraft,\n  isClick: boolean,\n  nextStep: number,\n): Omit<IFlowAnnotation, 'annotationId'> | null => {\n  const { kind, tone, stroke, start, current } = draft;\n  const style = { kind, tone, stroke };\n  if (kind === 'text')\n    return {\n      ...style,\n      position: { x: start.x, y: start.y - FLOW_TEXT_CARET_OFFSET },\n      size: { width: FLOW_ANNOTATION_MIN_SIZE, height: FLOW_ANNOTATION_MIN_SIZE },\n      text: '',\n    };\n  if (kind === 'step')\n    return {\n      ...style,\n      position: { x: start.x - STEP_SIZE / 2, y: start.y - STEP_SIZE / 2 },\n      size: { width: STEP_SIZE, height: STEP_SIZE },\n      step: nextStep,\n    };\n  if (kind === 'rectangle' || kind === 'ellipse')\n    return isClick\n      ? { ...style, position: start, size: DEFAULT_SHAPE_SIZE }\n      : { ...style, ...boxBetween(start, current) };\n  if (kind === 'arrow' || kind === 'line') {\n    const end = isClick ? { x: start.x + DEFAULT_ARROW_LENGTH, y: start.y } : current;\n    return { ...style, ...boxAroundPoints([start, end], ARROW_PADDING) };\n  }\n  if (draft.points.length < 2) return null;\n  return { ...style, ...boxAroundPoints(draft.points, STROKE_PADDING) };\n};\n\n/**\n * While a drawing tool is active, a press anywhere on the canvas draws, over blocks and annotations\n * too, as in Figma. Wheel and pinch keep panning and zooming, because nothing is laid over the canvas:\n * the press is heard on the pane itself. Returns the shape being drawn, for the preview.\n */\nexport const useFlowAnnotationDrawing = ({\n  containerRef,\n  tool,\n  tone,\n  stroke,\n  enabled,\n  onCreated,\n}: IUseFlowAnnotationDrawingOptions): IFlowAnnotationDraft | null => {\n  const store = useFlowEditorStore();\n  const { screenToFlowPosition } = useReactFlow();\n  const [draft, setDraft] = useState<IFlowAnnotationDraft | null>(null);\n\n  useEffect(() => {\n    if (!enabled || tool === 'select') return undefined;\n    const pane = containerRef.current?.querySelector<HTMLElement>('.react-flow__pane');\n    if (!pane) return undefined;\n    let detachGesture: (() => void) | null = null;\n\n    const handlePointerDown = (event: PointerEvent) => {\n      if (event.button !== 0 || !(event.target instanceof Node) || !pane.contains(event.target)) return;\n      // Cancelling the press also cancels the mousedown that would start dragging the block under it.\n      event.preventDefault();\n      event.stopPropagation();\n      const kind = tool;\n      const startScreen = { x: event.clientX, y: event.clientY };\n      const start = screenToFlowPosition(startScreen, FREE_POSITION);\n      let current: IFlowAnnotationDraft = { kind, tone, stroke, start, current: start, points: [start] };\n      let lastKeptScreen = startScreen;\n      setDraft(current);\n\n      const handlePointerMove = (moveEvent: PointerEvent) => {\n        const screen = { x: moveEvent.clientX, y: moveEvent.clientY };\n        const point = screenToFlowPosition(screen, FREE_POSITION);\n        const keepsPoint =\n          kind === 'drawing' &&\n          distance(lastKeptScreen, screen) >= DRAWING_STEP_PX &&\n          current.points.length < FLOW_DRAWING_MAX_POINTS;\n        if (keepsPoint) lastKeptScreen = screen;\n        current = { ...current, current: point, points: keepsPoint ? [...current.points, point] : current.points };\n        setDraft(current);\n      };\n\n      const detach = () => {\n        window.removeEventListener('pointermove', handlePointerMove);\n        window.removeEventListener('pointerup', handlePointerUp);\n        window.removeEventListener('pointercancel', handlePointerCancel);\n        detachGesture = null;\n      };\n\n      const handlePointerUp = (upEvent: PointerEvent) => {\n        detach();\n        setDraft(null);\n        const isClick = distance(startScreen, { x: upEvent.clientX, y: upEvent.clientY }) < CLICK_TRAVEL_PX;\n        const annotation = annotationFromDraft(\n          { ...current, current: screenToFlowPosition({ x: upEvent.clientX, y: upEvent.clientY }, FREE_POSITION) },\n          isClick,\n          nextFlowStepNumber(store.getState().graph.annotations ?? []),\n        );\n        if (!annotation) return;\n        // The click that follows this release would clear the new selection, or select what is under it.\n        const swallowClick = (clickEvent: MouseEvent) => clickEvent.stopPropagation();\n        pane.addEventListener('click', swallowClick, { capture: true, once: true });\n        window.setTimeout(() => pane.removeEventListener('click', swallowClick, { capture: true }), 0);\n        const annotationId = store.getState().addAnnotation(annotation);\n        onCreated(annotationId, kind);\n      };\n\n      const handlePointerCancel = () => {\n        detach();\n        setDraft(null);\n      };\n\n      window.addEventListener('pointermove', handlePointerMove);\n      window.addEventListener('pointerup', handlePointerUp);\n      window.addEventListener('pointercancel', handlePointerCancel);\n      detachGesture = detach;\n    };\n\n    pane.addEventListener('pointerdown', handlePointerDown, true);\n    return () => {\n      pane.removeEventListener('pointerdown', handlePointerDown, true);\n      detachGesture?.();\n      setDraft(null);\n    };\n  }, [containerRef, enabled, tool, tone, stroke, screenToFlowPosition, store, onCreated]);\n\n  return draft;\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UI/Flow/useFlowLabels.d.ts

@@ -0,0 +1,10 @@
+import { TChipTone } from '../Chips/chipTones';
+import { IFlowIssue, TFlowBlockCategory, TFlowPortId, TFlowRunStepStatus } from './flowTypes';
+export declare const FLOW_RUN_STATUS_TONE: Record<TFlowRunStepStatus, TChipTone>;
+/** Every label the flow UI shows, spelled as literal keys so the translation tooling can read them. */
+export declare const useFlowLabels: () => {
+    ports: Record<TFlowPortId, string>;
+    categories: Record<TFlowBlockCategory, string>;
+    runStatus: Record<TFlowRunStepStatus, string>;
+    issueMessage: (issue: IFlowIssue) => string;
+};