@umodeapporg/ui 0.22.3 → 0.23.0

package/dist/assets/umode-ui.css

@@ -338,3 +338,108 @@
   height: 1.25rem;
   font-size: 1.25rem;
 }
+/* Theme bridge for @xyflow/react internals the components cannot reach with classes. */
+.umode-flow .react-flow__pane {
+  cursor: default;
+}
+
+.umode-flow .react-flow__background {
+  --xy-background-pattern-color: rgb(var(--color-border-subtle));
+}
+
+.umode-flow .umode-flow-handle {
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 2px solid rgb(var(--color-surface));
+  background: rgb(var(--color-border-strong));
+}
+
+.umode-flow .umode-flow-handle.connectionindicator:hover,
+.umode-flow .umode-flow-handle.connectingto {
+  background: rgb(var(--color-primary));
+}
+
+.umode-flow .umode-flow-edge-path {
+  stroke: rgb(var(--color-border-strong));
+  stroke-width: 1.5;
+  transition: stroke 140ms ease-out;
+}
+
+.umode-flow .umode-flow-edge-path--selected {
+  stroke: rgb(var(--color-primary));
+  stroke-width: 2;
+}
+
+.umode-flow .umode-flow-edge-path--traversed {
+  stroke: rgb(var(--color-primary));
+  stroke-width: 2.5;
+}
+
+.umode-flow .umode-flow-edge-path--warning {
+  stroke: rgb(var(--color-warning));
+}
+
+.umode-flow .umode-flow-edge-path--error {
+  stroke: rgb(var(--color-danger));
+  stroke-dasharray: 6 4;
+}
+
+.umode-flow .react-flow__minimap {
+  background: rgb(var(--color-surface));
+  border: 1px solid rgb(var(--color-border));
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.umode-flow .react-flow__minimap-mask {
+  fill: rgb(var(--color-muted) / 0.7);
+}
+
+.umode-flow .react-flow__minimap-node {
+  fill: rgb(var(--color-border-emphasis));
+  stroke: none;
+}
+
+.umode-flow .react-flow__attribution {
+  background: transparent;
+  color: rgb(var(--color-foreground-faint));
+}
+
+.umode-flow .react-flow__connectionline path {
+  stroke: rgb(var(--color-primary));
+  stroke-width: 2;
+}
+
+.umode-flow .umode-flow-arc {
+  stroke: rgb(var(--color-border-strong));
+  stroke-width: 1.5;
+  fill: none;
+  transition: stroke 140ms ease-out;
+}
+
+.umode-flow .umode-flow-arc--warning {
+  stroke: rgb(var(--color-warning));
+}
+
+.umode-flow .umode-flow-arc--danger {
+  stroke: rgb(var(--color-danger));
+}
+
+.umode-flow .umode-flow-arc--dashed {
+  stroke-dasharray: 6 4;
+}
+
+.umode-flow .umode-flow-arc--selected,
+.umode-flow .react-flow__edge:hover .umode-flow-arc {
+  stroke: rgb(var(--color-primary));
+  stroke-width: 2.5;
+}
+
+.umode-flow .react-flow__edge {
+  cursor: pointer;
+}
+
+.umode-flow .react-flow__arrowhead polyline {
+  stroke: rgb(var(--color-border-strong));
+  fill: rgb(var(--color-border-strong));
+}

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

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { SymbolCodepoints } from '../MaterialSymbol';
+import { Node, NodeProps } from '@xyflow/react';
+import { TFlowIssueSeverity, TFlowPortId, TFlowRunStepStatus } from './flowTypes';
+export declare const FLOW_INPUT_HANDLE_ID = "in";
+export interface IFlowAddableBlock {
+    type: string;
+    label: string;
+    icon: SymbolCodepoints;
+}
+export interface IFlowBlockNodeData extends Record<string, unknown> {
+    icon: SymbolCodepoints;
+    title: string;
+    categoryLabel: string;
+    summary?: ReactNode;
+    hasInput: boolean;
+    outputs: Array<TFlowPortId>;
+    /** Ports already wired: their edge carries the label, so the port does not repeat it. */
+    connectedPorts: Array<TFlowPortId>;
+    portLabels: Record<TFlowPortId, string>;
+    /** What a free port can grow into; empty in a read-only canvas. */
+    addableBlocks: Array<IFlowAddableBlock>;
+    onAddFromPort?: (port: TFlowPortId, type: string) => void;
+    disabled?: boolean;
+    issueSeverity?: TFlowIssueSeverity;
+    issueCount: number;
+    runStatus?: TFlowRunStepStatus;
+}
+export type TFlowBlockNode = Node<IFlowBlockNodeData, 'flowBlock'>;
+/**
+ * Input on the left edge, output ports spread along the right edge; a lone `next` port needs no
+ * label. A free port shows a "+" that adds the next block already wired to it.
+ */
+declare const FlowBlockNode: React.FC<NodeProps<TFlowBlockNode>>;
+export default FlowBlockNode;

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

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledMenu from "../ControlledMenu.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { Handle, Position } from "@xyflow/react";
+import FlowNodeShell from "./FlowNodeShell.js";
+const FLOW_INPUT_HANDLE_ID = "in";
+const portTop = (index, count) => `${(index + 1) / (count + 1) * 100}%`;
+const FlowBlockNode = ({ data, selected }) => {
+  const { t } = useTranslation("ui");
+  const outputs = Array.isArray(data.outputs) ? data.outputs : [];
+  const connectedPorts = Array.isArray(data.connectedPorts) ? data.connectedPorts : [];
+  const addableBlocks = Array.isArray(data.addableBlocks) ? data.addableBlocks : [];
+  const showPortLabels = !(outputs.length === 1 && outputs[0] === "next");
+  const canAdd = Boolean(data.onAddFromPort) && addableBlocks.length > 0;
+  return /* @__PURE__ */ jsxs(
+    FlowNodeShell,
+    {
+      icon: data.icon,
+      title: data.title,
+      categoryLabel: data.categoryLabel,
+      summary: data.summary,
+      selected,
+      disabled: data.disabled,
+      issueSeverity: data.issueSeverity,
+      issueCount: data.issueCount,
+      runStatus: data.runStatus,
+      className: showPortLabels ? "pr-12" : void 0,
+      children: [
+        data.hasInput && /* @__PURE__ */ jsx(Handle, { id: FLOW_INPUT_HANDLE_ID, type: "target", position: Position.Left, className: "umode-flow-handle" }),
+        outputs.map((port, index) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            id: port,
+            type: "source",
+            position: Position.Right,
+            className: "umode-flow-handle",
+            "data-port": port,
+            style: { top: portTop(index, outputs.length) },
+            children: showPortLabels && !connectedPorts.includes(port) && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 whitespace-nowrap text-xxs font-semibold text-foreground-subtle", children: data.portLabels[port] })
+          },
+          port
+        )),
+        canAdd && outputs.map(
+          (port, index) => connectedPorts.includes(port) ? null : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "nodrag nopan absolute -right-10 -translate-y-1/2",
+              style: { top: portTop(index, outputs.length) },
+              children: /* @__PURE__ */ jsx(
+                ControlledMenu,
+                {
+                  placement: "right-start",
+                  triggerTooltip: t("flow.node.addBlock"),
+                  items: addableBlocks.map((block) => ({
+                    key: block.type,
+                    label: block.label,
+                    icon: block.icon,
+                    onClick: () => data.onAddFromPort?.(port, block.type)
+                  })),
+                  trigger: /* @__PURE__ */ jsx(
+                    ControlledButton,
+                    {
+                      defaultHtmlButton: true,
+                      className: "interactive flex size-6 items-center justify-center rounded-full border border-border-emphasis bg-surface text-foreground-muted shadow-sm hover:border-brand-border hover:bg-brand-soft hover:text-brand-emphasis focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "add", size: 16, "aria-hidden": true })
+                    }
+                  )
+                }
+              )
+            },
+            `add|${port}`
+          )
+        )
+      ]
+    }
+  );
+};
+export {
+  FLOW_INPUT_HANDLE_ID,
+  FlowBlockNode as default
+};
+//# sourceMappingURL=FlowBlockNode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowBlockNode.js","sources":["../../../../src/components/UI/Flow/FlowBlockNode.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledMenu from '@/components/UI/ControlledMenu';\nimport { MaterialSymbol, type SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { Handle, type Node, type NodeProps, Position } from '@xyflow/react';\n\nimport FlowNodeShell from './FlowNodeShell';\nimport type { TFlowIssueSeverity, TFlowPortId, TFlowRunStepStatus } from './flowTypes';\n\nexport const FLOW_INPUT_HANDLE_ID = 'in';\n\nexport interface IFlowAddableBlock {\n  type: string;\n  label: string;\n  icon: SymbolCodepoints;\n}\n\nexport interface IFlowBlockNodeData extends Record<string, unknown> {\n  icon: SymbolCodepoints;\n  title: string;\n  categoryLabel: string;\n  summary?: ReactNode;\n  hasInput: boolean;\n  outputs: Array<TFlowPortId>;\n  /** Ports already wired: their edge carries the label, so the port does not repeat it. */\n  connectedPorts: Array<TFlowPortId>;\n  portLabels: Record<TFlowPortId, string>;\n  /** What a free port can grow into; empty in a read-only canvas. */\n  addableBlocks: Array<IFlowAddableBlock>;\n  onAddFromPort?: (port: TFlowPortId, type: string) => void;\n  disabled?: boolean;\n  issueSeverity?: TFlowIssueSeverity;\n  issueCount: number;\n  runStatus?: TFlowRunStepStatus;\n}\n\nexport type TFlowBlockNode = Node<IFlowBlockNodeData, 'flowBlock'>;\n\nconst portTop = (index: number, count: number): string => `${((index + 1) / (count + 1)) * 100}%`;\n\n/**\n * Input on the left edge, output ports spread along the right edge; a lone `next` port needs no\n * label. A free port shows a \"+\" that adds the next block already wired to it.\n */\nconst FlowBlockNode: React.FC<NodeProps<TFlowBlockNode>> = ({ data, selected }) => {\n  const { t } = useTranslation('ui');\n  const outputs = Array.isArray(data.outputs) ? data.outputs : [];\n  const connectedPorts = Array.isArray(data.connectedPorts) ? data.connectedPorts : [];\n  const addableBlocks = Array.isArray(data.addableBlocks) ? data.addableBlocks : [];\n  const showPortLabels = !(outputs.length === 1 && outputs[0] === 'next');\n  const canAdd = Boolean(data.onAddFromPort) && addableBlocks.length > 0;\n\n  return (\n    <FlowNodeShell\n      icon={data.icon}\n      title={data.title}\n      categoryLabel={data.categoryLabel}\n      summary={data.summary}\n      selected={selected}\n      disabled={data.disabled}\n      issueSeverity={data.issueSeverity}\n      issueCount={data.issueCount}\n      runStatus={data.runStatus}\n      className={showPortLabels ? 'pr-12' : undefined}\n    >\n      {data.hasInput && (\n        <Handle id={FLOW_INPUT_HANDLE_ID} type=\"target\" position={Position.Left} className=\"umode-flow-handle\" />\n      )}\n      {outputs.map((port, index) => (\n        <Handle\n          key={port}\n          id={port}\n          type=\"source\"\n          position={Position.Right}\n          className=\"umode-flow-handle\"\n          data-port={port}\n          style={{ top: portTop(index, outputs.length) }}\n        >\n          {showPortLabels && !connectedPorts.includes(port) && (\n            <span className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 whitespace-nowrap text-xxs font-semibold text-foreground-subtle\">\n              {data.portLabels[port]}\n            </span>\n          )}\n        </Handle>\n      ))}\n      {canAdd &&\n        outputs.map((port, index) =>\n          connectedPorts.includes(port) ? null : (\n            <div\n              key={`add|${port}`}\n              className=\"nodrag nopan absolute -right-10 -translate-y-1/2\"\n              style={{ top: portTop(index, outputs.length) }}\n            >\n              <ControlledMenu\n                placement=\"right-start\"\n                triggerTooltip={t('flow.node.addBlock')}\n                items={addableBlocks.map((block) => ({\n                  key: block.type,\n                  label: block.label,\n                  icon: block.icon,\n                  onClick: () => data.onAddFromPort?.(port, block.type),\n                }))}\n                trigger={\n                  <ControlledButton\n                    defaultHtmlButton\n                    className=\"interactive flex size-6 items-center justify-center rounded-full border border-border-emphasis bg-surface text-foreground-muted shadow-sm hover:border-brand-border hover:bg-brand-soft hover:text-brand-emphasis focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                  >\n                    <MaterialSymbol icon=\"add\" size={16} aria-hidden />\n                  </ControlledButton>\n                }\n              />\n            </div>\n          ),\n        )}\n    </FlowNodeShell>\n  );\n};\n\nexport default FlowBlockNode;\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,uBAAuB;AA6BpC,MAAM,UAAU,CAAC,OAAe,UAA0B,IAAK,QAAQ,MAAM,QAAQ,KAAM,GAAG;AAM9F,MAAM,gBAAqD,CAAC,EAAE,MAAM,eAAe;AACjF,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,UAAU,MAAM,QAAQ,KAAK,OAAO,IAAI,KAAK,UAAU,CAAA;AAC7D,QAAM,iBAAiB,MAAM,QAAQ,KAAK,cAAc,IAAI,KAAK,iBAAiB,CAAA;AAClF,QAAM,gBAAgB,MAAM,QAAQ,KAAK,aAAa,IAAI,KAAK,gBAAgB,CAAA;AAC/E,QAAM,iBAAiB,EAAE,QAAQ,WAAW,KAAK,QAAQ,CAAC,MAAM;AAChE,QAAM,SAAS,QAAQ,KAAK,aAAa,KAAK,cAAc,SAAS;AAErE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,eAAe,KAAK;AAAA,MACpB,SAAS,KAAK;AAAA,MACd;AAAA,MACA,UAAU,KAAK;AAAA,MACf,eAAe,KAAK;AAAA,MACpB,YAAY,KAAK;AAAA,MACjB,WAAW,KAAK;AAAA,MAChB,WAAW,iBAAiB,UAAU;AAAA,MAErC,UAAA;AAAA,QAAA,KAAK,YACJ,oBAAC,QAAA,EAAO,IAAI,sBAAsB,MAAK,UAAS,UAAU,SAAS,MAAM,WAAU,oBAAA,CAAoB;AAAA,QAExG,QAAQ,IAAI,CAAC,MAAM,UAClB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,IAAI;AAAA,YACJ,MAAK;AAAA,YACL,UAAU,SAAS;AAAA,YACnB,WAAU;AAAA,YACV,aAAW;AAAA,YACX,OAAO,EAAE,KAAK,QAAQ,OAAO,QAAQ,MAAM,EAAA;AAAA,YAE1C,UAAA,kBAAkB,CAAC,eAAe,SAAS,IAAI,KAC9C,oBAAC,QAAA,EAAK,WAAU,iIACb,UAAA,KAAK,WAAW,IAAI,EAAA,CACvB;AAAA,UAAA;AAAA,UAXG;AAAA,QAAA,CAcR;AAAA,QACA,UACC,QAAQ;AAAA,UAAI,CAAC,MAAM,UACjB,eAAe,SAAS,IAAI,IAAI,OAC9B;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO,EAAE,KAAK,QAAQ,OAAO,QAAQ,MAAM,EAAA;AAAA,cAE3C,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,gBAAgB,EAAE,oBAAoB;AAAA,kBACtC,OAAO,cAAc,IAAI,CAAC,WAAW;AAAA,oBACnC,KAAK,MAAM;AAAA,oBACX,OAAO,MAAM;AAAA,oBACb,MAAM,MAAM;AAAA,oBACZ,SAAS,MAAM,KAAK,gBAAgB,MAAM,MAAM,IAAI;AAAA,kBAAA,EACpD;AAAA,kBACF,SACE;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB,WAAU;AAAA,sBAEV,8BAAC,gBAAA,EAAe,MAAK,OAAM,MAAM,IAAI,eAAW,KAAA,CAAC;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACnD;AAAA,cAAA;AAAA,YAEJ;AAAA,YArBK,OAAO,IAAI;AAAA,UAAA;AAAA,QAsBlB;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAGR;"}

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { PanelPosition } from '@xyflow/react';
+import { IFlowIssue, IFlowRunOverlay } from './flowTypes';
+export interface IFlowCanvasProps {
+    issues?: Array<IFlowIssue>;
+    runOverlay?: IFlowRunOverlay | null;
+    readOnly?: boolean;
+    /** Accessible name of the canvas region, from `t()`. Defaults to the library label. */
+    ariaLabel?: string;
+    className?: string;
+    /** Where the zoom and history controls sit; move them when floating chrome takes that corner. */
+    controlsPosition?: PanelPosition;
+    /** Floating chrome drawn over the canvas (toolbars, panels); position it with absolute classes. */
+    children?: ReactNode;
+}
+/**
+ * The editing surface. Renders the graph held by `FlowEditorProvider` and turns every
+ * gesture (drag, connect, select, delete, drop, shortcuts) into a store action, so undo
+ * and the dirty flag see all of them.
+ */
+declare const FlowCanvas: React.FC<IFlowCanvasProps>;
+export default FlowCanvas;

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

@@ -0,0 +1,263 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { twMerge } from "tailwind-merge";
+import { useReactFlow, MarkerType, ReactFlow, Background, BackgroundVariant, MiniMap } from "@xyflow/react";
+import FlowBlockNode, { FLOW_INPUT_HANDLE_ID } from "./FlowBlockNode.js";
+import FlowConnectionEdge from "./FlowConnectionEdge.js";
+import { FLOW_BLOCK_DRAG_TYPE } from "./flowConstants.js";
+import { useFlowBlockRegistry, useFlowEditorStore, useFlowEditor } from "./FlowEditorProvider.js";
+import { canConnect, layoutFlowByLevels } from "./flowGraph.js";
+import FlowZoomControls from "./FlowZoomControls.js";
+import { useFlowLabels } from "./useFlowLabels.js";
+import "@xyflow/react/dist/base.css";
+/* empty css                       */
+const ATTRIBUTION_POSITION = "bottom-left";
+const NODE_TYPES = { flowBlock: FlowBlockNode };
+const EDGE_TYPES = { flowConnection: FlowConnectionEdge };
+const MINIMAP_SIZE = { width: 160, height: 104 };
+const MINIMAP_MIN_NODES = 5;
+const SNAP_GRID = [16, 16];
+const PORTS = ["next", "true", "false", "error"];
+const isPortId = (value) => PORTS.includes(value);
+const worstSeverity = (issues) => {
+  if (issues.some((issue) => issue.severity === "error")) return "error";
+  if (issues.some((issue) => issue.severity === "warning")) return "warning";
+  return void 0;
+};
+const isTypingTarget = (target) => target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
+const FlowCanvas = ({
+  issues = [],
+  runOverlay,
+  readOnly = false,
+  ariaLabel,
+  className,
+  controlsPosition,
+  children
+}) => {
+  const { t } = useTranslation("ui");
+  const labels = useFlowLabels();
+  const registry = useFlowBlockRegistry();
+  const store = useFlowEditorStore();
+  const { screenToFlowPosition } = useReactFlow();
+  const graph = useFlowEditor((state) => state.graph);
+  const selectedNodeIds = useFlowEditor((state) => state.selectedNodeIds);
+  const selectedEdgeIds = useFlowEditor((state) => state.selectedEdgeIds);
+  const canUndo = useFlowEditor((state) => state.past.length > 0);
+  const canRedo = useFlowEditor((state) => state.future.length > 0);
+  const safeIssues = useMemo(() => Array.isArray(issues) ? issues : [], [issues]);
+  const [measuredSizes, setMeasuredSizes] = useState({});
+  const addableBlocks = useMemo(() => {
+    if (readOnly) return [];
+    return registry.list.filter((definition) => definition.category !== "trigger").filter(
+      (definition) => definition.maxInstances === void 0 || graph.nodes.filter((node) => node.type === definition.type).length < definition.maxInstances
+    ).map((definition) => ({ type: definition.type, label: definition.label, icon: definition.icon }));
+  }, [registry, graph.nodes, readOnly]);
+  const nodes = useMemo(
+    () => graph.nodes.map((node) => {
+      const definition = registry.get(node.type);
+      const nodeIssues = safeIssues.filter((issue) => issue.nodeId === node.nodeId);
+      return {
+        id: node.nodeId,
+        type: "flowBlock",
+        position: node.position,
+        measured: measuredSizes[node.nodeId],
+        selected: selectedNodeIds.includes(node.nodeId),
+        draggable: !readOnly,
+        connectable: !readOnly,
+        data: {
+          icon: definition?.resolveIcon?.(node.config) ?? definition?.icon ?? "help",
+          title: node.label ?? definition?.resolveLabel?.(node.config) ?? definition?.label ?? node.type,
+          categoryLabel: definition ? labels.categories[definition.category] : "",
+          summary: definition ? definition.renderSummary(node.config) : labels.issueMessage({ code: "unknownBlock", severity: "error" }),
+          hasInput: definition ? definition.category !== "trigger" : true,
+          outputs: definition?.outputs ?? [],
+          connectedPorts: graph.edges.filter((edge) => edge.source === node.nodeId).map((edge) => edge.sourcePort),
+          portLabels: labels.ports,
+          addableBlocks,
+          onAddFromPort: readOnly ? void 0 : (port, type) => store.getState().addNodeFromPort(type, node.nodeId, port),
+          disabled: node.disabled,
+          issueSeverity: worstSeverity(nodeIssues),
+          issueCount: nodeIssues.length,
+          runStatus: runOverlay?.steps?.[node.nodeId]
+        }
+      };
+    }),
+    [
+      graph.nodes,
+      graph.edges,
+      registry,
+      safeIssues,
+      selectedNodeIds,
+      readOnly,
+      labels,
+      runOverlay,
+      measuredSizes,
+      addableBlocks,
+      store
+    ]
+  );
+  const edges = useMemo(() => {
+    const traversed = new Set(runOverlay?.traversedEdgeIds ?? []);
+    return graph.edges.map((edge) => ({
+      id: edge.edgeId,
+      type: "flowConnection",
+      source: edge.source,
+      sourceHandle: edge.sourcePort,
+      target: edge.target,
+      targetHandle: FLOW_INPUT_HANDLE_ID,
+      selected: selectedEdgeIds.includes(edge.edgeId),
+      markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16 },
+      data: {
+        label: edge.sourcePort === "next" ? void 0 : labels.ports[edge.sourcePort],
+        traversed: traversed.has(edge.edgeId),
+        issueSeverity: worstSeverity(safeIssues.filter((issue) => issue.edgeId === edge.edgeId))
+      }
+    }));
+  }, [graph.edges, selectedEdgeIds, runOverlay, labels, safeIssues]);
+  const handleNodesChange = useCallback(
+    (changes) => {
+      const positions = {};
+      const sizes = {};
+      let selection = null;
+      for (const change of changes) {
+        if (change.type === "dimensions" && change.dimensions) sizes[change.id] = change.dimensions;
+        if (change.type === "position" && change.position && !readOnly) positions[change.id] = change.position;
+        if (change.type === "select") {
+          const current = selection ?? store.getState().selectedNodeIds;
+          selection = change.selected ? [.../* @__PURE__ */ new Set([...current, change.id])] : current.filter((id) => id !== change.id);
+        }
+      }
+      if (Object.keys(sizes).length > 0) setMeasuredSizes((current) => ({ ...current, ...sizes }));
+      if (Object.keys(positions).length > 0) store.getState().moveNodes(positions);
+      if (selection) store.getState().setSelection({ nodeIds: selection });
+    },
+    [store, readOnly]
+  );
+  const handleEdgesChange = useCallback(
+    (changes) => {
+      let selection = null;
+      for (const change of changes) {
+        if (change.type !== "select") continue;
+        const current = selection ?? store.getState().selectedEdgeIds;
+        selection = change.selected ? [.../* @__PURE__ */ new Set([...current, change.id])] : current.filter((id) => id !== change.id);
+      }
+      if (selection) store.getState().setSelection({ edgeIds: selection });
+    },
+    [store]
+  );
+  const handleConnect = useCallback(
+    (connection) => {
+      if (readOnly || !isPortId(connection.sourceHandle)) return;
+      store.getState().connect(connection.source, connection.sourceHandle, connection.target);
+    },
+    [store, readOnly]
+  );
+  const isValidConnection = useCallback(
+    (connection) => isPortId(connection.sourceHandle) && canConnect(store.getState().graph, registry, {
+      source: connection.source,
+      sourcePort: connection.sourceHandle,
+      target: connection.target
+    }),
+    [store, registry]
+  );
+  const handleDragOver = useCallback((event) => {
+    if (!event.dataTransfer.types.includes(FLOW_BLOCK_DRAG_TYPE)) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+  }, []);
+  const handleDrop = useCallback(
+    (event) => {
+      const blockType = event.dataTransfer.getData(FLOW_BLOCK_DRAG_TYPE);
+      if (!blockType || readOnly) return;
+      event.preventDefault();
+      store.getState().addNode(blockType, screenToFlowPosition({ x: event.clientX, y: event.clientY }));
+    },
+    [store, readOnly, screenToFlowPosition]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (readOnly || isTypingTarget(event.target)) return;
+      const state = store.getState();
+      const withModifier = event.metaKey || event.ctrlKey;
+      const key = event.key.toLowerCase();
+      if (event.key === "Delete" || event.key === "Backspace") state.removeSelected();
+      else if (withModifier && key === "z" && event.shiftKey) state.redo();
+      else if (withModifier && key === "z") state.undo();
+      else if (withModifier && key === "y") state.redo();
+      else if (withModifier && key === "c") state.copySelected();
+      else if (withModifier && key === "v") state.paste();
+      else if (withModifier && key === "d") state.duplicateSelected();
+      else return;
+      event.preventDefault();
+    },
+    [store, readOnly]
+  );
+  const handleLayout = useCallback(() => {
+    const state = store.getState();
+    state.recordHistory();
+    state.moveNodes(layoutFlowByLevels(state.graph, registry));
+  }, [store, registry]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": ariaLabel ?? t("flow.canvas"),
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      className: twMerge(
+        "umode-flow relative h-full min-h-[24rem] w-full rounded-xl bg-canvas focus:outline-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          ReactFlow,
+          {
+            nodes,
+            edges,
+            nodeTypes: NODE_TYPES,
+            edgeTypes: EDGE_TYPES,
+            onNodesChange: handleNodesChange,
+            onEdgesChange: handleEdgesChange,
+            onConnect: handleConnect,
+            isValidConnection,
+            onNodeDragStart: () => store.getState().recordHistory(),
+            onPaneClick: () => store.getState().setSelection({ nodeIds: [], edgeIds: [] }),
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
+            deleteKeyCode: null,
+            nodesDraggable: !readOnly,
+            nodesConnectable: !readOnly,
+            snapToGrid: true,
+            snapGrid: SNAP_GRID,
+            minZoom: 0.25,
+            maxZoom: 2,
+            fitView: true,
+            fitViewOptions: { padding: 0.2, maxZoom: 1 },
+            attributionPosition: ATTRIBUTION_POSITION,
+            children: [
+              /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 }),
+              nodes.length >= MINIMAP_MIN_NODES && /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, position: "bottom-right", style: MINIMAP_SIZE }),
+              /* @__PURE__ */ jsx(
+                FlowZoomControls,
+                {
+                  onUndo: readOnly ? void 0 : () => store.getState().undo(),
+                  onRedo: readOnly ? void 0 : () => store.getState().redo(),
+                  canUndo,
+                  canRedo,
+                  onLayout: readOnly ? void 0 : handleLayout,
+                  position: controlsPosition
+                }
+              )
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+export {
+  FlowCanvas as default
+};
+//# sourceMappingURL=FlowCanvas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowCanvas.js","sources":["../../../../src/components/UI/Flow/FlowCanvas.tsx"],"sourcesContent":["import { DragEvent, KeyboardEvent, ReactNode, useCallback, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport {\n  Background,\n  BackgroundVariant,\n  type Connection,\n  type EdgeChange,\n  MarkerType,\n  MiniMap,\n  type NodeChange,\n  type PanelPosition,\n  ReactFlow,\n  useReactFlow,\n} from '@xyflow/react';\n\nimport FlowBlockNode, { FLOW_INPUT_HANDLE_ID, type IFlowAddableBlock, type TFlowBlockNode } from './FlowBlockNode';\nimport FlowConnectionEdge, { type TFlowConnectionEdge } from './FlowConnectionEdge';\nimport { FLOW_BLOCK_DRAG_TYPE } from './flowConstants';\nimport { useFlowBlockRegistry, useFlowEditor, useFlowEditorStore } from './FlowEditorProvider';\nimport { canConnect, layoutFlowByLevels } from './flowGraph';\nimport type { IFlowIssue, IFlowPosition, IFlowRunOverlay, TFlowIssueSeverity, TFlowPortId } from './flowTypes';\nimport FlowZoomControls from './FlowZoomControls';\nimport { useFlowLabels } from './useFlowLabels';\n\nimport '@xyflow/react/dist/base.css';\nimport '../../../styles/flow.css';\n\nconst ATTRIBUTION_POSITION: PanelPosition = 'bottom-left';\nconst NODE_TYPES = { flowBlock: FlowBlockNode };\nconst EDGE_TYPES = { flowConnection: FlowConnectionEdge };\nconst MINIMAP_SIZE = { width: 160, height: 104 };\n/** A small flow fits on screen whole, where a minimap only covers blocks. */\nconst MINIMAP_MIN_NODES = 5;\nconst SNAP_GRID: [number, number] = [16, 16];\nconst PORTS: Array<TFlowPortId> = ['next', 'true', 'false', 'error'];\n\nexport interface IFlowCanvasProps {\n  issues?: Array<IFlowIssue>;\n  runOverlay?: IFlowRunOverlay | null;\n  readOnly?: boolean;\n  /** Accessible name of the canvas region, from `t()`. Defaults to the library label. */\n  ariaLabel?: string;\n  className?: string;\n  /** Where the zoom and history controls sit; move them when floating chrome takes that corner. */\n  controlsPosition?: PanelPosition;\n  /** Floating chrome drawn over the canvas (toolbars, panels); position it with absolute classes. */\n  children?: ReactNode;\n}\n\nconst isPortId = (value: string | null | undefined): value is TFlowPortId => PORTS.includes(value as TFlowPortId);\n\nconst worstSeverity = (issues: Array<IFlowIssue>): TFlowIssueSeverity | undefined => {\n  if (issues.some((issue) => issue.severity === 'error')) return 'error';\n  if (issues.some((issue) => issue.severity === 'warning')) return 'warning';\n  return undefined;\n};\n\nconst isTypingTarget = (target: EventTarget | null): boolean =>\n  target instanceof HTMLElement &&\n  (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));\n\n/**\n * The editing surface. Renders the graph held by `FlowEditorProvider` and turns every\n * gesture (drag, connect, select, delete, drop, shortcuts) into a store action, so undo\n * and the dirty flag see all of them.\n */\nconst FlowCanvas: React.FC<IFlowCanvasProps> = ({\n  issues = [],\n  runOverlay,\n  readOnly = false,\n  ariaLabel,\n  className,\n  controlsPosition,\n  children,\n}) => {\n  const { t } = useTranslation('ui');\n  const labels = useFlowLabels();\n  const registry = useFlowBlockRegistry();\n  const store = useFlowEditorStore();\n  const { screenToFlowPosition } = useReactFlow();\n\n  const graph = useFlowEditor((state) => state.graph);\n  const selectedNodeIds = useFlowEditor((state) => state.selectedNodeIds);\n  const selectedEdgeIds = useFlowEditor((state) => state.selectedEdgeIds);\n  const canUndo = useFlowEditor((state) => state.past.length > 0);\n  const canRedo = useFlowEditor((state) => state.future.length > 0);\n\n  const safeIssues = useMemo(() => (Array.isArray(issues) ? issues : []), [issues]);\n  // Measured sizes are view state, not part of the flow: kept here so the minimap can draw the blocks.\n  const [measuredSizes, setMeasuredSizes] = useState<Record<string, { width: number; height: number }>>({});\n\n  const addableBlocks = useMemo<Array<IFlowAddableBlock>>(() => {\n    if (readOnly) return [];\n    return registry.list\n      .filter((definition) => definition.category !== 'trigger')\n      .filter(\n        (definition) =>\n          definition.maxInstances === undefined ||\n          graph.nodes.filter((node) => node.type === definition.type).length < definition.maxInstances,\n      )\n      .map((definition) => ({ type: definition.type, label: definition.label, icon: definition.icon }));\n  }, [registry, graph.nodes, readOnly]);\n\n  const nodes = useMemo<Array<TFlowBlockNode>>(\n    () =>\n      graph.nodes.map((node) => {\n        const definition = registry.get(node.type);\n        const nodeIssues = safeIssues.filter((issue) => issue.nodeId === node.nodeId);\n        return {\n          id: node.nodeId,\n          type: 'flowBlock',\n          position: node.position,\n          measured: measuredSizes[node.nodeId],\n          selected: selectedNodeIds.includes(node.nodeId),\n          draggable: !readOnly,\n          connectable: !readOnly,\n          data: {\n            icon: definition?.resolveIcon?.(node.config) ?? definition?.icon ?? 'help',\n            title: node.label ?? definition?.resolveLabel?.(node.config) ?? definition?.label ?? node.type,\n            categoryLabel: definition ? labels.categories[definition.category] : '',\n            summary: definition\n              ? definition.renderSummary(node.config)\n              : labels.issueMessage({ code: 'unknownBlock', severity: 'error' }),\n            hasInput: definition ? definition.category !== 'trigger' : true,\n            outputs: definition?.outputs ?? [],\n            connectedPorts: graph.edges.filter((edge) => edge.source === node.nodeId).map((edge) => edge.sourcePort),\n            portLabels: labels.ports,\n            addableBlocks,\n            onAddFromPort: readOnly\n              ? undefined\n              : (port, type) => store.getState().addNodeFromPort(type, node.nodeId, port),\n            disabled: node.disabled,\n            issueSeverity: worstSeverity(nodeIssues),\n            issueCount: nodeIssues.length,\n            runStatus: runOverlay?.steps?.[node.nodeId],\n          },\n        };\n      }),\n    [\n      graph.nodes,\n      graph.edges,\n      registry,\n      safeIssues,\n      selectedNodeIds,\n      readOnly,\n      labels,\n      runOverlay,\n      measuredSizes,\n      addableBlocks,\n      store,\n    ],\n  );\n\n  const edges = useMemo<Array<TFlowConnectionEdge>>(() => {\n    const traversed = new Set(runOverlay?.traversedEdgeIds ?? []);\n    return graph.edges.map((edge) => ({\n      id: edge.edgeId,\n      type: 'flowConnection',\n      source: edge.source,\n      sourceHandle: edge.sourcePort,\n      target: edge.target,\n      targetHandle: FLOW_INPUT_HANDLE_ID,\n      selected: selectedEdgeIds.includes(edge.edgeId),\n      markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16 },\n      data: {\n        label: edge.sourcePort === 'next' ? undefined : labels.ports[edge.sourcePort],\n        traversed: traversed.has(edge.edgeId),\n        issueSeverity: worstSeverity(safeIssues.filter((issue) => issue.edgeId === edge.edgeId)),\n      },\n    }));\n  }, [graph.edges, selectedEdgeIds, runOverlay, labels, safeIssues]);\n\n  const handleNodesChange = useCallback(\n    (changes: Array<NodeChange<TFlowBlockNode>>) => {\n      const positions: Record<string, IFlowPosition> = {};\n      const sizes: Record<string, { width: number; height: number }> = {};\n      let selection: Array<string> | null = null;\n      for (const change of changes) {\n        if (change.type === 'dimensions' && change.dimensions) sizes[change.id] = change.dimensions;\n        if (change.type === 'position' && change.position && !readOnly) positions[change.id] = change.position;\n        if (change.type === 'select') {\n          const current: Array<string> = selection ?? store.getState().selectedNodeIds;\n          selection = change.selected\n            ? [...new Set([...current, change.id])]\n            : current.filter((id) => id !== change.id);\n        }\n      }\n      if (Object.keys(sizes).length > 0) setMeasuredSizes((current) => ({ ...current, ...sizes }));\n      if (Object.keys(positions).length > 0) store.getState().moveNodes(positions);\n      if (selection) store.getState().setSelection({ nodeIds: selection });\n    },\n    [store, readOnly],\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: Array<EdgeChange<TFlowConnectionEdge>>) => {\n      let selection: Array<string> | null = null;\n      for (const change of changes) {\n        if (change.type !== 'select') continue;\n        const current: Array<string> = selection ?? store.getState().selectedEdgeIds;\n        selection = change.selected ? [...new Set([...current, change.id])] : current.filter((id) => id !== change.id);\n      }\n      if (selection) store.getState().setSelection({ edgeIds: selection });\n    },\n    [store],\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      if (readOnly || !isPortId(connection.sourceHandle)) return;\n      store.getState().connect(connection.source, connection.sourceHandle, connection.target);\n    },\n    [store, readOnly],\n  );\n\n  const isValidConnection = useCallback(\n    (connection: Connection | TFlowConnectionEdge) =>\n      isPortId(connection.sourceHandle) &&\n      canConnect(store.getState().graph, registry, {\n        source: connection.source,\n        sourcePort: connection.sourceHandle,\n        target: connection.target,\n      }),\n    [store, registry],\n  );\n\n  const handleDragOver = useCallback((event: DragEvent<HTMLDivElement>) => {\n    if (!event.dataTransfer.types.includes(FLOW_BLOCK_DRAG_TYPE)) return;\n    event.preventDefault();\n    event.dataTransfer.dropEffect = 'copy';\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent<HTMLDivElement>) => {\n      const blockType = event.dataTransfer.getData(FLOW_BLOCK_DRAG_TYPE);\n      if (!blockType || readOnly) return;\n      event.preventDefault();\n      store.getState().addNode(blockType, screenToFlowPosition({ x: event.clientX, y: event.clientY }));\n    },\n    [store, readOnly, screenToFlowPosition],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (readOnly || isTypingTarget(event.target)) return;\n      const state = store.getState();\n      const withModifier = event.metaKey || event.ctrlKey;\n      const key = event.key.toLowerCase();\n\n      if (event.key === 'Delete' || event.key === 'Backspace') state.removeSelected();\n      else if (withModifier && key === 'z' && event.shiftKey) state.redo();\n      else if (withModifier && key === 'z') state.undo();\n      else if (withModifier && key === 'y') state.redo();\n      else if (withModifier && key === 'c') state.copySelected();\n      else if (withModifier && key === 'v') state.paste();\n      else if (withModifier && key === 'd') state.duplicateSelected();\n      else return;\n      event.preventDefault();\n    },\n    [store, readOnly],\n  );\n\n  const handleLayout = useCallback(() => {\n    const state = store.getState();\n    state.recordHistory();\n    state.moveNodes(layoutFlowByLevels(state.graph, registry));\n  }, [store, registry]);\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabel ?? t('flow.canvas')}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      className={twMerge(\n        'umode-flow relative h-full min-h-[24rem] w-full rounded-xl bg-canvas focus:outline-none',\n        className,\n      )}\n    >\n      <ReactFlow<TFlowBlockNode, TFlowConnectionEdge>\n        nodes={nodes}\n        edges={edges}\n        nodeTypes={NODE_TYPES}\n        edgeTypes={EDGE_TYPES}\n        onNodesChange={handleNodesChange}\n        onEdgesChange={handleEdgesChange}\n        onConnect={handleConnect}\n        isValidConnection={isValidConnection}\n        onNodeDragStart={() => store.getState().recordHistory()}\n        onPaneClick={() => store.getState().setSelection({ nodeIds: [], edgeIds: [] })}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        deleteKeyCode={null}\n        nodesDraggable={!readOnly}\n        nodesConnectable={!readOnly}\n        snapToGrid\n        snapGrid={SNAP_GRID}\n        minZoom={0.25}\n        maxZoom={2}\n        fitView\n        fitViewOptions={{ padding: 0.2, maxZoom: 1 }}\n        attributionPosition={ATTRIBUTION_POSITION}\n      >\n        <Background variant={BackgroundVariant.Dots} gap={16} size={1} />\n        {nodes.length >= MINIMAP_MIN_NODES && (\n          <MiniMap pannable zoomable position=\"bottom-right\" style={MINIMAP_SIZE} />\n        )}\n        <FlowZoomControls\n          onUndo={readOnly ? undefined : () => store.getState().undo()}\n          onRedo={readOnly ? undefined : () => store.getState().redo()}\n          canUndo={canUndo}\n          canRedo={canRedo}\n          onLayout={readOnly ? undefined : handleLayout}\n          position={controlsPosition}\n        />\n      </ReactFlow>\n      {children}\n    </div>\n  );\n};\n\nexport default FlowCanvas;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import { Edge, EdgeProps } from '@xyflow/react';
+import { TFlowIssueSeverity } from './flowTypes';
+export interface IFlowConnectionEdgeData extends Record<string, unknown> {
+    label?: string;
+    traversed?: boolean;
+    issueSeverity?: TFlowIssueSeverity;
+}
+export type TFlowConnectionEdge = Edge<IFlowConnectionEdgeData, 'flowConnection'>;
+declare const FlowConnectionEdge: React.FC<EdgeProps<TFlowConnectionEdge>>;
+export default FlowConnectionEdge;

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

@@ -0,0 +1,54 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { getSmoothStepPath, BaseEdge, EdgeLabelRenderer } from "@xyflow/react";
+import OutlinedChip from "../Chips/OutlinedChip.js";
+const FlowConnectionEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  markerEnd,
+  selected
+}) => {
+  const [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: 12
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        id,
+        path,
+        markerEnd,
+        className: classNames("umode-flow-edge-path", {
+          "umode-flow-edge-path--selected": selected,
+          "umode-flow-edge-path--traversed": data?.traversed,
+          "umode-flow-edge-path--error": data?.issueSeverity === "error",
+          "umode-flow-edge-path--warning": data?.issueSeverity === "warning"
+        })
+      }
+    ),
+    data?.label && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "nodrag nopan pointer-events-none absolute",
+        style: { transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` },
+        children: /* @__PURE__ */ jsx(OutlinedChip, { label: data.label, tone: "neutral", variant: "outlined", size: "xs", preserveLabelCase: true })
+      }
+    ) })
+  ] });
+};
+export {
+  FlowConnectionEdge as default
+};
+//# sourceMappingURL=FlowConnectionEdge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowConnectionEdge.js","sources":["../../../../src/components/UI/Flow/FlowConnectionEdge.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { BaseEdge, type Edge, EdgeLabelRenderer, type EdgeProps, getSmoothStepPath } from '@xyflow/react';\n\nimport OutlinedChip from '../Chips/OutlinedChip';\n\nimport type { TFlowIssueSeverity } from './flowTypes';\n\nexport interface IFlowConnectionEdgeData extends Record<string, unknown> {\n  label?: string;\n  traversed?: boolean;\n  issueSeverity?: TFlowIssueSeverity;\n}\n\nexport type TFlowConnectionEdge = Edge<IFlowConnectionEdgeData, 'flowConnection'>;\n\nconst FlowConnectionEdge: React.FC<EdgeProps<TFlowConnectionEdge>> = ({\n  id,\n  sourceX,\n  sourceY,\n  targetX,\n  targetY,\n  sourcePosition,\n  targetPosition,\n  data,\n  markerEnd,\n  selected,\n}) => {\n  const [path, labelX, labelY] = getSmoothStepPath({\n    sourceX,\n    sourceY,\n    targetX,\n    targetY,\n    sourcePosition,\n    targetPosition,\n    borderRadius: 12,\n  });\n\n  return (\n    <>\n      <BaseEdge\n        id={id}\n        path={path}\n        markerEnd={markerEnd}\n        className={classNames('umode-flow-edge-path', {\n          'umode-flow-edge-path--selected': selected,\n          'umode-flow-edge-path--traversed': data?.traversed,\n          'umode-flow-edge-path--error': data?.issueSeverity === 'error',\n          'umode-flow-edge-path--warning': data?.issueSeverity === 'warning',\n        })}\n      />\n      {data?.label && (\n        <EdgeLabelRenderer>\n          <div\n            className=\"nodrag nopan pointer-events-none absolute\"\n            style={{ transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` }}\n          >\n            <OutlinedChip label={data.label} tone=\"neutral\" variant=\"outlined\" size=\"xs\" preserveLabelCase />\n          </div>\n        </EdgeLabelRenderer>\n      )}\n    </>\n  );\n};\n\nexport default FlowConnectionEdge;\n"],"names":[],"mappings":";;;;AAgBA,MAAM,qBAA+D,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,MAAM,QAAQ,MAAM,IAAI,kBAAkB;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAAA,CACf;AAED,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,WAAW,wBAAwB;AAAA,UAC5C,kCAAkC;AAAA,UAClC,mCAAmC,MAAM;AAAA,UACzC,+BAA+B,MAAM,kBAAkB;AAAA,UACvD,iCAAiC,MAAM,kBAAkB;AAAA,QAAA,CAC1D;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,MAAM,SACL,oBAAC,mBAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,WAAW,mCAAmC,MAAM,OAAO,MAAM,MAAA;AAAA,QAE1E,UAAA,oBAAC,cAAA,EAAa,OAAO,KAAK,OAAO,MAAK,WAAU,SAAQ,YAAW,MAAK,MAAK,mBAAiB,KAAA,CAAC;AAAA,MAAA;AAAA,IAAA,EACjG,CACF;AAAA,EAAA,GAEJ;AAEJ;"}