@umodeapporg/ui 0.0.0-canary.ca10e69

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

@@ -0,0 +1,206 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import { mergeClasses } from "../../../helpers/mergeClasses.js";
+import { ReactFlowProvider, MarkerType, ReactFlow, Background, BackgroundVariant, BaseEdge, EdgeLabelRenderer, Handle, Position } from "@xyflow/react";
+import OutlinedChip from "../Chips/OutlinedChip.js";
+import FlowZoomControls from "./FlowZoomControls.js";
+import "@xyflow/react/dist/base.css";
+/* empty css                       */
+const LANE_WIDTH = 192;
+const LANE_HEIGHT = 168;
+const LANE_GAP = 80;
+const HIDDEN_HANDLE_CLASS = "!size-px !min-h-0 !min-w-0 !border-0 !bg-transparent";
+const LaneNode = ({ data }) => {
+  const { lane, onLaneClick } = data;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: lane.title }),
+    lane.subtitle && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-foreground-subtle", children: lane.subtitle }),
+    lane.badges && /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-wrap gap-1", children: lane.badges })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { style: { width: LANE_WIDTH, height: LANE_HEIGHT }, className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: "over-out",
+        type: "source",
+        position: Position.Top,
+        isConnectable: false,
+        className: HIDDEN_HANDLE_CLASS
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: "over-in",
+        type: "target",
+        position: Position.Top,
+        isConnectable: false,
+        className: HIDDEN_HANDLE_CLASS
+      }
+    ),
+    onLaneClick ? /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onClick: () => onLaneClick(lane.laneId),
+        className: "interactive flex size-full flex-col gap-y-1 rounded-xl border border-border bg-surface p-3 text-left shadow-sm hover:border-border-emphasis focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "flex size-full flex-col gap-y-1 rounded-xl border border-border bg-surface p-3 shadow-sm", children: content }),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: "under-out",
+        type: "source",
+        position: Position.Bottom,
+        isConnectable: false,
+        className: HIDDEN_HANDLE_CLASS
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: "under-in",
+        type: "target",
+        position: Position.Bottom,
+        isConnectable: false,
+        className: HIDDEN_HANDLE_CLASS
+      }
+    )
+  ] });
+};
+const ArcEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  data,
+  markerEnd,
+  selected
+}) => {
+  const arc = data?.arc;
+  const isOver = arc?.side !== "under";
+  const isBackward = targetX < sourceX;
+  const lift = 40 + Math.abs(targetX - sourceX) * 0.2 + (isBackward ? 32 : 0);
+  const controlY = isOver ? Math.min(sourceY, targetY) - lift * 1.3 : Math.max(sourceY, targetY) + lift * 1.3;
+  const path = `M ${sourceX},${sourceY} C ${sourceX},${controlY} ${targetX},${controlY} ${targetX},${targetY}`;
+  const labelX = (sourceX + targetX) / 2;
+  const labelY = 0.125 * (sourceY + targetY) + 0.75 * controlY;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        id,
+        path,
+        markerEnd,
+        interactionWidth: 16,
+        className: classNames("umode-flow-arc", {
+          "umode-flow-arc--warning": arc?.tone === "warning",
+          "umode-flow-arc--danger": arc?.tone === "danger",
+          "umode-flow-arc--dashed": arc?.dashed,
+          "umode-flow-arc--selected": selected
+        })
+      }
+    ),
+    arc?.label && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "nodrag nopan pointer-events-none absolute whitespace-nowrap",
+        style: { transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` },
+        children: /* @__PURE__ */ jsx(
+          OutlinedChip,
+          {
+            label: arc.label,
+            tone: arc.tone === "warning" ? "warning" : arc.tone === "danger" ? "danger" : "neutral",
+            variant: "outlined",
+            size: "xs",
+            preserveLabelCase: true
+          }
+        )
+      }
+    ) })
+  ] });
+};
+const PRO_OPTIONS = { hideAttribution: true };
+const NODE_TYPES = { flowLane: LaneNode };
+const EDGE_TYPES = { flowArc: ArcEdge };
+const FlowLaneMapContent = ({
+  lanes,
+  arcs,
+  onArcClick,
+  onLaneClick,
+  selectedArcId,
+  ariaLabel,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const safeLanes = useMemo(() => Array.isArray(lanes) ? lanes : [], [lanes]);
+  const safeArcs = useMemo(() => Array.isArray(arcs) ? arcs : [], [arcs]);
+  const nodes = useMemo(
+    () => safeLanes.map((lane, index) => ({
+      id: lane.laneId,
+      type: "flowLane",
+      position: { x: index * (LANE_WIDTH + LANE_GAP), y: 0 },
+      draggable: false,
+      selectable: false,
+      data: { lane, onLaneClick }
+    })),
+    [safeLanes, onLaneClick]
+  );
+  const laneIds = useMemo(() => new Set(safeLanes.map((lane) => lane.laneId)), [safeLanes]);
+  const edges = useMemo(
+    () => safeArcs.filter(
+      (arc) => laneIds.has(arc.sourceLaneId) && laneIds.has(arc.targetLaneId) && arc.sourceLaneId !== arc.targetLaneId
+    ).map((arc) => ({
+      id: arc.arcId,
+      type: "flowArc",
+      source: arc.sourceLaneId,
+      sourceHandle: `${arc.side}-out`,
+      target: arc.targetLaneId,
+      targetHandle: `${arc.side}-in`,
+      selected: arc.arcId === selectedArcId,
+      markerEnd: { type: MarkerType.ArrowClosed, width: 14, height: 14 },
+      data: { arc }
+    })),
+    [safeArcs, laneIds, selectedArcId]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": ariaLabel ?? t("flow.laneMap.label"),
+      className: mergeClasses("umode-flow relative h-full min-h-[24rem] w-full rounded-xl bg-canvas", className),
+      children: /* @__PURE__ */ jsxs(
+        ReactFlow,
+        {
+          nodes,
+          edges,
+          nodeTypes: NODE_TYPES,
+          edgeTypes: EDGE_TYPES,
+          nodesDraggable: false,
+          nodesConnectable: false,
+          deleteKeyCode: null,
+          onEdgeClick: (_event, edge) => onArcClick?.(edge.id),
+          minZoom: 0.25,
+          maxZoom: 1.5,
+          fitView: true,
+          fitViewOptions: { padding: 0.15, minZoom: 0.75 },
+          proOptions: PRO_OPTIONS,
+          children: [
+            /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 }),
+            /* @__PURE__ */ jsx(FlowZoomControls, {})
+          ]
+        }
+      )
+    }
+  );
+};
+const FlowLaneMap = (props) => /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(FlowLaneMapContent, { ...props }) });
+export {
+  FlowLaneMap as default
+};
+//# sourceMappingURL=FlowLaneMap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowLaneMap.js","sources":["../../../../src/components/UI/Flow/FlowLaneMap.tsx"],"sourcesContent":["import { ReactNode, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport {\n  Background,\n  BackgroundVariant,\n  BaseEdge,\n  type Edge,\n  EdgeLabelRenderer,\n  type EdgeProps,\n  Handle,\n  MarkerType,\n  type Node,\n  type NodeProps,\n  Position,\n  type ProOptions,\n  ReactFlow,\n  ReactFlowProvider,\n} from '@xyflow/react';\n\nimport OutlinedChip from '../Chips/OutlinedChip';\n\nimport FlowZoomControls from './FlowZoomControls';\n\nimport '@xyflow/react/dist/base.css';\nimport '../../../styles/flow.css';\n\nexport interface IFlowLane {\n  laneId: string;\n  title: string;\n  subtitle?: string;\n  /** Counters or chips under the title (rules acting on entry, stage requirements). */\n  badges?: ReactNode;\n}\n\nexport type TFlowArcTone = 'default' | 'warning' | 'danger';\n\nexport interface IFlowArc {\n  arcId: string;\n  sourceLaneId: string;\n  targetLaneId: string;\n  label: string;\n  /** `over` arcs above the lanes, `under` below them; the host decides what each side means. */\n  side: 'over' | 'under';\n  tone?: TFlowArcTone;\n  dashed?: boolean;\n}\n\ninterface IFlowLaneMapProps {\n  lanes: Array<IFlowLane>;\n  arcs: Array<IFlowArc>;\n  onArcClick?: (arcId: string) => void;\n  onLaneClick?: (laneId: string) => void;\n  selectedArcId?: string | null;\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst LANE_WIDTH = 192;\nconst LANE_HEIGHT = 168;\nconst LANE_GAP = 80;\n\ninterface ILaneNodeData extends Record<string, unknown> {\n  lane: IFlowLane;\n  onLaneClick?: (laneId: string) => void;\n}\n\ninterface IArcEdgeData extends Record<string, unknown> {\n  arc: IFlowArc;\n}\n\ntype TLaneNode = Node<ILaneNodeData, 'flowLane'>;\ntype TArcEdge = Edge<IArcEdgeData, 'flowArc'>;\n\nconst HIDDEN_HANDLE_CLASS = '!size-px !min-h-0 !min-w-0 !border-0 !bg-transparent';\n\nconst LaneNode: React.FC<NodeProps<TLaneNode>> = ({ data }) => {\n  const { lane, onLaneClick } = data;\n  const content = (\n    <>\n      <span className=\"truncate text-sm font-semibold text-foreground\">{lane.title}</span>\n      {lane.subtitle && <span className=\"truncate text-xs text-foreground-subtle\">{lane.subtitle}</span>}\n      {lane.badges && <div className=\"mt-auto flex flex-wrap gap-1\">{lane.badges}</div>}\n    </>\n  );\n\n  return (\n    <div style={{ width: LANE_WIDTH, height: LANE_HEIGHT }} className=\"relative\">\n      <Handle\n        id=\"over-out\"\n        type=\"source\"\n        position={Position.Top}\n        isConnectable={false}\n        className={HIDDEN_HANDLE_CLASS}\n      />\n      <Handle\n        id=\"over-in\"\n        type=\"target\"\n        position={Position.Top}\n        isConnectable={false}\n        className={HIDDEN_HANDLE_CLASS}\n      />\n      {onLaneClick ? (\n        <ControlledButton\n          defaultHtmlButton\n          onClick={() => onLaneClick(lane.laneId)}\n          className=\"interactive flex size-full flex-col gap-y-1 rounded-xl border border-border bg-surface p-3 text-left shadow-sm hover:border-border-emphasis focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          {content}\n        </ControlledButton>\n      ) : (\n        <div className=\"flex size-full flex-col gap-y-1 rounded-xl border border-border bg-surface p-3 shadow-sm\">\n          {content}\n        </div>\n      )}\n      <Handle\n        id=\"under-out\"\n        type=\"source\"\n        position={Position.Bottom}\n        isConnectable={false}\n        className={HIDDEN_HANDLE_CLASS}\n      />\n      <Handle\n        id=\"under-in\"\n        type=\"target\"\n        position={Position.Bottom}\n        isConnectable={false}\n        className={HIDDEN_HANDLE_CLASS}\n      />\n    </div>\n  );\n};\n\n/** A curve between two lane edges whose height grows with the distance, so long arcs clear the short ones. */\nconst ArcEdge: React.FC<EdgeProps<TArcEdge>> = ({\n  id,\n  sourceX,\n  sourceY,\n  targetX,\n  targetY,\n  data,\n  markerEnd,\n  selected,\n}) => {\n  const arc = data?.arc;\n  const isOver = arc?.side !== 'under';\n  const isBackward = targetX < sourceX;\n  const lift = 40 + Math.abs(targetX - sourceX) * 0.2 + (isBackward ? 32 : 0);\n  const controlY = isOver ? Math.min(sourceY, targetY) - lift * 1.3 : Math.max(sourceY, targetY) + lift * 1.3;\n  const path = `M ${sourceX},${sourceY} C ${sourceX},${controlY} ${targetX},${controlY} ${targetX},${targetY}`;\n  const labelX = (sourceX + targetX) / 2;\n  const labelY = 0.125 * (sourceY + targetY) + 0.75 * controlY;\n\n  return (\n    <>\n      <BaseEdge\n        id={id}\n        path={path}\n        markerEnd={markerEnd}\n        interactionWidth={16}\n        className={classNames('umode-flow-arc', {\n          'umode-flow-arc--warning': arc?.tone === 'warning',\n          'umode-flow-arc--danger': arc?.tone === 'danger',\n          'umode-flow-arc--dashed': arc?.dashed,\n          'umode-flow-arc--selected': selected,\n        })}\n      />\n      {arc?.label && (\n        <EdgeLabelRenderer>\n          <div\n            className=\"nodrag nopan pointer-events-none absolute whitespace-nowrap\"\n            style={{ transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` }}\n          >\n            <OutlinedChip\n              label={arc.label}\n              tone={arc.tone === 'warning' ? 'warning' : arc.tone === 'danger' ? 'danger' : 'neutral'}\n              variant=\"outlined\"\n              size=\"xs\"\n              preserveLabelCase\n            />\n          </div>\n        </EdgeLabelRenderer>\n      )}\n    </>\n  );\n};\n\nconst PRO_OPTIONS: ProOptions = { hideAttribution: true };\nconst NODE_TYPES = { flowLane: LaneNode };\nconst EDGE_TYPES = { flowArc: ArcEdge };\n\n/**\n * A read-only map of fixed columns joined by arcs: the shape of a pipeline seen from\n * above. Lanes keep the order they are given, so no graph layout is needed.\n */\nconst FlowLaneMapContent: React.FC<IFlowLaneMapProps> = ({\n  lanes,\n  arcs,\n  onArcClick,\n  onLaneClick,\n  selectedArcId,\n  ariaLabel,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const safeLanes = useMemo(() => (Array.isArray(lanes) ? lanes : []), [lanes]);\n  const safeArcs = useMemo(() => (Array.isArray(arcs) ? arcs : []), [arcs]);\n\n  const nodes = useMemo<Array<TLaneNode>>(\n    () =>\n      safeLanes.map((lane, index) => ({\n        id: lane.laneId,\n        type: 'flowLane',\n        position: { x: index * (LANE_WIDTH + LANE_GAP), y: 0 },\n        draggable: false,\n        selectable: false,\n        data: { lane, onLaneClick },\n      })),\n    [safeLanes, onLaneClick],\n  );\n\n  const laneIds = useMemo(() => new Set(safeLanes.map((lane) => lane.laneId)), [safeLanes]);\n\n  const edges = useMemo<Array<TArcEdge>>(\n    () =>\n      safeArcs\n        .filter(\n          (arc) =>\n            laneIds.has(arc.sourceLaneId) && laneIds.has(arc.targetLaneId) && arc.sourceLaneId !== arc.targetLaneId,\n        )\n        .map((arc) => ({\n          id: arc.arcId,\n          type: 'flowArc',\n          source: arc.sourceLaneId,\n          sourceHandle: `${arc.side}-out`,\n          target: arc.targetLaneId,\n          targetHandle: `${arc.side}-in`,\n          selected: arc.arcId === selectedArcId,\n          markerEnd: { type: MarkerType.ArrowClosed, width: 14, height: 14 },\n          data: { arc },\n        })),\n    [safeArcs, laneIds, selectedArcId],\n  );\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabel ?? t('flow.laneMap.label')}\n      className={mergeClasses('umode-flow relative h-full min-h-[24rem] w-full rounded-xl bg-canvas', className)}\n    >\n      <ReactFlow<TLaneNode, TArcEdge>\n        nodes={nodes}\n        edges={edges}\n        nodeTypes={NODE_TYPES}\n        edgeTypes={EDGE_TYPES}\n        nodesDraggable={false}\n        nodesConnectable={false}\n        deleteKeyCode={null}\n        onEdgeClick={(_event, edge) => onArcClick?.(edge.id)}\n        minZoom={0.25}\n        maxZoom={1.5}\n        fitView\n        fitViewOptions={{ padding: 0.15, minZoom: 0.75 }}\n        proOptions={PRO_OPTIONS}\n      >\n        <Background variant={BackgroundVariant.Dots} gap={16} size={1} />\n        <FlowZoomControls />\n      </ReactFlow>\n    </div>\n  );\n};\n\nconst FlowLaneMap: React.FC<IFlowLaneMapProps> = (props) => (\n  <ReactFlowProvider>\n    <FlowLaneMapContent {...props} />\n  </ReactFlowProvider>\n);\n\nexport default FlowLaneMap;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { SymbolCodepoints } from '../MaterialSymbol';
+import { TFlowIssueSeverity, TFlowRunStepStatus } from './flowTypes';
+export interface IFlowNodeShellProps {
+    icon: SymbolCodepoints;
+    title: string;
+    summary?: ReactNode;
+    categoryLabel?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    issueSeverity?: TFlowIssueSeverity;
+    issueCount?: number;
+    runStatus?: TFlowRunStepStatus;
+    /** The ports, rendered by the canvas at the block's edges. */
+    children?: ReactNode;
+    className?: string;
+}
+/** The look of one block: icon, title, a one-line summary and its status badges. */
+declare const FlowNodeShell: React.FC<IFlowNodeShellProps>;
+export default FlowNodeShell;

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

@@ -0,0 +1,81 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import OutlinedChip from "../Chips/OutlinedChip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { useFlowLabels, FLOW_RUN_STATUS_TONE } from "./useFlowLabels.js";
+const RUN_BORDER_CLASS = {
+  passed: "border-success-border",
+  wouldRun: "border-info-border",
+  skipped: "border-border",
+  blocked: "border-warning-border",
+  failed: "border-danger-border",
+  error: "border-danger-border"
+};
+const FlowNodeShell = ({
+  icon,
+  title,
+  summary,
+  categoryLabel,
+  selected = false,
+  disabled = false,
+  issueSeverity,
+  issueCount = 0,
+  runStatus,
+  children,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const labels = useFlowLabels();
+  const borderClass = runStatus ? RUN_BORDER_CLASS[runStatus] : issueSeverity === "error" ? "border-danger-border" : issueSeverity === "warning" ? "border-warning-border" : "border-border";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "relative flex w-64 flex-col gap-y-2 rounded-xl border-2 bg-surface px-4 py-3 shadow-sm transition-colors duration-fast",
+        borderClass,
+        { "ring-2 ring-ring ring-offset-2 ring-offset-canvas": selected, "opacity-60": disabled },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground-muted", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon, size: 18, "aria-hidden": true }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+            categoryLabel && /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: categoryLabel }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: title })
+          ] })
+        ] }),
+        summary && /* @__PURE__ */ jsx("div", { className: "line-clamp-2 text-xs text-foreground-muted", children: summary }),
+        (runStatus || issueCount > 0 || disabled) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+          runStatus && /* @__PURE__ */ jsx(
+            OutlinedChip,
+            {
+              size: "xs",
+              variant: "soft",
+              tone: FLOW_RUN_STATUS_TONE[runStatus],
+              label: labels.runStatus[runStatus],
+              preserveLabelCase: true,
+              dot: true
+            }
+          ),
+          issueCount > 0 && /* @__PURE__ */ jsx(
+            OutlinedChip,
+            {
+              size: "xs",
+              variant: "soft",
+              tone: issueSeverity === "error" ? "danger" : "warning",
+              label: t("flow.node.issueCount", { count: issueCount }),
+              preserveLabelCase: true
+            }
+          ),
+          disabled && /* @__PURE__ */ jsx(OutlinedChip, { size: "xs", variant: "soft", tone: "neutral", label: t("flow.node.disabled"), preserveLabelCase: true })
+        ] }),
+        children
+      ]
+    }
+  );
+};
+export {
+  FlowNodeShell as default
+};
+//# sourceMappingURL=FlowNodeShell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowNodeShell.js","sources":["../../../../src/components/UI/Flow/FlowNodeShell.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport type { TFlowIssueSeverity, TFlowRunStepStatus } from './flowTypes';\nimport { FLOW_RUN_STATUS_TONE, useFlowLabels } from './useFlowLabels';\n\nexport interface IFlowNodeShellProps {\n  icon: SymbolCodepoints;\n  title: string;\n  summary?: ReactNode;\n  categoryLabel?: string;\n  selected?: boolean;\n  disabled?: boolean;\n  issueSeverity?: TFlowIssueSeverity;\n  issueCount?: number;\n  runStatus?: TFlowRunStepStatus;\n  /** The ports, rendered by the canvas at the block's edges. */\n  children?: ReactNode;\n  className?: string;\n}\n\nconst RUN_BORDER_CLASS: Record<TFlowRunStepStatus, string> = {\n  passed: 'border-success-border',\n  wouldRun: 'border-info-border',\n  skipped: 'border-border',\n  blocked: 'border-warning-border',\n  failed: 'border-danger-border',\n  error: 'border-danger-border',\n};\n\n/** The look of one block: icon, title, a one-line summary and its status badges. */\nconst FlowNodeShell: React.FC<IFlowNodeShellProps> = ({\n  icon,\n  title,\n  summary,\n  categoryLabel,\n  selected = false,\n  disabled = false,\n  issueSeverity,\n  issueCount = 0,\n  runStatus,\n  children,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const labels = useFlowLabels();\n\n  const borderClass = runStatus\n    ? RUN_BORDER_CLASS[runStatus]\n    : issueSeverity === 'error'\n      ? 'border-danger-border'\n      : issueSeverity === 'warning'\n        ? 'border-warning-border'\n        : 'border-border';\n\n  return (\n    <div\n      className={classNames(\n        'relative flex w-64 flex-col gap-y-2 rounded-xl border-2 bg-surface px-4 py-3 shadow-sm transition-colors duration-fast',\n        borderClass,\n        { 'ring-2 ring-ring ring-offset-2 ring-offset-canvas': selected, 'opacity-60': disabled },\n        className,\n      )}\n    >\n      <div className=\"flex items-center gap-x-2\">\n        <span className=\"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground-muted\">\n          <MaterialSymbol icon={icon} size={18} aria-hidden />\n        </span>\n        <div className=\"flex min-w-0 flex-col\">\n          {categoryLabel && (\n            <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n              {categoryLabel}\n            </span>\n          )}\n          <span className=\"truncate text-sm font-semibold text-foreground\">{title}</span>\n        </div>\n      </div>\n      {summary && <div className=\"line-clamp-2 text-xs text-foreground-muted\">{summary}</div>}\n      {(runStatus || issueCount > 0 || disabled) && (\n        <div className=\"flex flex-wrap items-center gap-1\">\n          {runStatus && (\n            <OutlinedChip\n              size=\"xs\"\n              variant=\"soft\"\n              tone={FLOW_RUN_STATUS_TONE[runStatus]}\n              label={labels.runStatus[runStatus]}\n              preserveLabelCase\n              dot\n            />\n          )}\n          {issueCount > 0 && (\n            <OutlinedChip\n              size=\"xs\"\n              variant=\"soft\"\n              tone={issueSeverity === 'error' ? 'danger' : 'warning'}\n              label={t('flow.node.issueCount', { count: issueCount })}\n              preserveLabelCase\n            />\n          )}\n          {disabled && (\n            <OutlinedChip size=\"xs\" variant=\"soft\" tone=\"neutral\" label={t('flow.node.disabled')} preserveLabelCase />\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\nexport default FlowNodeShell;\n"],"names":[],"mappings":";;;;;;AAyBA,MAAM,mBAAuD;AAAA,EAC3D,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AACT;AAGA,MAAM,gBAA+C,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,SAAS,cAAA;AAEf,QAAM,cAAc,YAChB,iBAAiB,SAAS,IAC1B,kBAAkB,UAChB,yBACA,kBAAkB,YAChB,0BACA;AAER,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,EAAE,qDAAqD,UAAU,cAAc,SAAA;AAAA,QAC/E;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,8FACd,UAAA,oBAAC,gBAAA,EAAe,MAAY,MAAM,IAAI,eAAW,KAAA,CAAC,EAAA,CACpD;AAAA,UACA,qBAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,YAAA,iBACC,oBAAC,QAAA,EAAK,WAAU,yEACb,UAAA,eACH;AAAA,YAEF,oBAAC,QAAA,EAAK,WAAU,kDAAkD,UAAA,MAAA,CAAM;AAAA,UAAA,EAAA,CAC1E;AAAA,QAAA,GACF;AAAA,QACC,WAAW,oBAAC,OAAA,EAAI,WAAU,8CAA8C,UAAA,SAAQ;AAAA,SAC/E,aAAa,aAAa,KAAK,aAC/B,qBAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,UAAA,aACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAM,qBAAqB,SAAS;AAAA,cACpC,OAAO,OAAO,UAAU,SAAS;AAAA,cACjC,mBAAiB;AAAA,cACjB,KAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAGN,aAAa,KACZ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAM,kBAAkB,UAAU,WAAW;AAAA,cAC7C,OAAO,EAAE,wBAAwB,EAAE,OAAO,YAAY;AAAA,cACtD,mBAAiB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGpB,YACC,oBAAC,cAAA,EAAa,MAAK,MAAK,SAAQ,QAAO,MAAK,WAAU,OAAO,EAAE,oBAAoB,GAAG,mBAAiB,KAAA,CAAC;AAAA,QAAA,GAE5G;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface IFlowResizablePanelProps {
+    /** Which edge carries the drag handle: the one that faces the canvas. */
+    handleSide: 'left' | 'right';
+    /** Widths in px, like any pointer-driven geometry. */
+    defaultWidth: number;
+    minWidth: number;
+    maxWidth: number;
+    /** Remembers the width the user chose, per panel, across visits. */
+    storageKey?: string;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A side panel of the flow editor that the user can widen or narrow by dragging the edge facing
+ * the canvas (arrow keys on the focused handle, double click resets). Below `lg` it takes the full
+ * width of its container and the handle hides; where it sits then is up to the parent layout.
+ */
+declare const FlowResizablePanel: React.FC<IFlowResizablePanelProps>;
+export default FlowResizablePanel;

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

@@ -0,0 +1,118 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback, useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { mergeClasses } from "../../../helpers/mergeClasses.js";
+import { writeUiPreference, readUiPreference } from "../../../helpers/uiPreferences.js";
+const PANEL_WIDTHS_KEY = "umode-flow-panel-widths";
+const KEYBOARD_RESIZE_STEP = 24;
+const readStoredWidths = () => readUiPreference(PANEL_WIDTHS_KEY) ?? {};
+const FlowResizablePanel = ({
+  handleSide,
+  defaultWidth,
+  minWidth,
+  maxWidth,
+  storageKey,
+  className,
+  children
+}) => {
+  const { t } = useTranslation("ui");
+  const clampWidth = useCallback(
+    (width2) => Math.min(maxWidth, Math.max(minWidth, Math.round(width2))),
+    [minWidth, maxWidth]
+  );
+  const [width, setWidth] = useState(() => {
+    const stored = storageKey ? readStoredWidths()[storageKey] : void 0;
+    return clampWidth(typeof stored === "number" ? stored : defaultWidth);
+  });
+  const [isResizing, setIsResizing] = useState(false);
+  const resizeStartRef = useRef(null);
+  const widthRef = useRef(width);
+  widthRef.current = width;
+  const persistWidth = useCallback(
+    (nextWidth) => {
+      if (!storageKey) return;
+      writeUiPreference(PANEL_WIDTHS_KEY, { ...readStoredWidths(), [storageKey]: nextWidth });
+    },
+    [storageKey]
+  );
+  useEffect(() => setWidth((current) => clampWidth(current)), [clampWidth]);
+  const handlePointerDown = (event) => {
+    event.preventDefault();
+    resizeStartRef.current = { pointerX: event.clientX, width: widthRef.current };
+    setIsResizing(true);
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const handlePointerMove = (event) => {
+    const resizeStart = resizeStartRef.current;
+    if (!resizeStart) return;
+    const pointerDelta = event.clientX - resizeStart.pointerX;
+    setWidth(clampWidth(resizeStart.width + (handleSide === "right" ? pointerDelta : -pointerDelta)));
+  };
+  const handlePointerEnd = (event) => {
+    if (!resizeStartRef.current) return;
+    resizeStartRef.current = null;
+    setIsResizing(false);
+    persistWidth(widthRef.current);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    const pointerDirection = event.key === "ArrowRight" ? 1 : -1;
+    const nextWidth = clampWidth(
+      widthRef.current + (handleSide === "right" ? pointerDirection : -pointerDirection) * KEYBOARD_RESIZE_STEP
+    );
+    setWidth(nextWidth);
+    persistWidth(nextWidth);
+  };
+  const handleReset = () => {
+    const nextWidth = clampWidth(defaultWidth);
+    setWidth(nextWidth);
+    persistWidth(nextWidth);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: mergeClasses("relative w-full shrink-0 lg:w-[var(--flow-panel-width)]", className),
+      style: { "--flow-panel-width": `${width}px` },
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ControlledTooltip, { content: t("flow.resizePanel"), placement: handleSide === "right" ? "right" : "left", children: /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            "aria-label": t("flow.resizePanel"),
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerEnd,
+            onPointerCancel: handlePointerEnd,
+            onKeyDown: handleKeyDown,
+            onDoubleClick: handleReset,
+            className: classNames(
+              "group/resize absolute inset-y-0 z-10 hidden w-3 cursor-col-resize touch-none select-none items-center justify-center focus:outline-none lg:flex",
+              handleSide === "right" ? "-right-3" : "-left-3"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(
+                  "h-full w-0.5 rounded-full transition-colors duration-base",
+                  isResizing ? "bg-brand-hover" : "bg-transparent group-hover/resize:bg-brand-hover"
+                )
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  FlowResizablePanel as default
+};
+//# sourceMappingURL=FlowResizablePanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowResizablePanel.js","sources":["../../../../src/components/UI/Flow/FlowResizablePanel.tsx"],"sourcesContent":["import { CSSProperties, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport { readUiPreference, writeUiPreference } from '@/helpers/uiPreferences';\n\nconst PANEL_WIDTHS_KEY = 'umode-flow-panel-widths';\nconst KEYBOARD_RESIZE_STEP = 24;\n\nexport interface IFlowResizablePanelProps {\n  /** Which edge carries the drag handle: the one that faces the canvas. */\n  handleSide: 'left' | 'right';\n  /** Widths in px, like any pointer-driven geometry. */\n  defaultWidth: number;\n  minWidth: number;\n  maxWidth: number;\n  /** Remembers the width the user chose, per panel, across visits. */\n  storageKey?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst readStoredWidths = (): Record<string, number> => readUiPreference<Record<string, number>>(PANEL_WIDTHS_KEY) ?? {};\n\n/**\n * A side panel of the flow editor that the user can widen or narrow by dragging the edge facing\n * the canvas (arrow keys on the focused handle, double click resets). Below `lg` it takes the full\n * width of its container and the handle hides; where it sits then is up to the parent layout.\n */\nconst FlowResizablePanel: React.FC<IFlowResizablePanelProps> = ({\n  handleSide,\n  defaultWidth,\n  minWidth,\n  maxWidth,\n  storageKey,\n  className,\n  children,\n}) => {\n  const { t } = useTranslation('ui');\n  const clampWidth = useCallback(\n    (width: number) => Math.min(maxWidth, Math.max(minWidth, Math.round(width))),\n    [minWidth, maxWidth],\n  );\n  const [width, setWidth] = useState(() => {\n    const stored = storageKey ? readStoredWidths()[storageKey] : undefined;\n    return clampWidth(typeof stored === 'number' ? stored : defaultWidth);\n  });\n  const [isResizing, setIsResizing] = useState(false);\n  const resizeStartRef = useRef<{ pointerX: number; width: number } | null>(null);\n  const widthRef = useRef(width);\n  widthRef.current = width;\n\n  const persistWidth = useCallback(\n    (nextWidth: number) => {\n      if (!storageKey) return;\n      writeUiPreference(PANEL_WIDTHS_KEY, { ...readStoredWidths(), [storageKey]: nextWidth });\n    },\n    [storageKey],\n  );\n\n  useEffect(() => setWidth((current) => clampWidth(current)), [clampWidth]);\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    resizeStartRef.current = { pointerX: event.clientX, width: widthRef.current };\n    setIsResizing(true);\n    event.currentTarget.setPointerCapture(event.pointerId);\n  };\n\n  const handlePointerMove = (event: React.PointerEvent<HTMLButtonElement>) => {\n    const resizeStart = resizeStartRef.current;\n    if (!resizeStart) return;\n    const pointerDelta = event.clientX - resizeStart.pointerX;\n    setWidth(clampWidth(resizeStart.width + (handleSide === 'right' ? pointerDelta : -pointerDelta)));\n  };\n\n  const handlePointerEnd = (event: React.PointerEvent<HTMLButtonElement>) => {\n    if (!resizeStartRef.current) return;\n    resizeStartRef.current = null;\n    setIsResizing(false);\n    persistWidth(widthRef.current);\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;\n    event.preventDefault();\n    const pointerDirection = event.key === 'ArrowRight' ? 1 : -1;\n    const nextWidth = clampWidth(\n      widthRef.current + (handleSide === 'right' ? pointerDirection : -pointerDirection) * KEYBOARD_RESIZE_STEP,\n    );\n    setWidth(nextWidth);\n    persistWidth(nextWidth);\n  };\n\n  const handleReset = () => {\n    const nextWidth = clampWidth(defaultWidth);\n    setWidth(nextWidth);\n    persistWidth(nextWidth);\n  };\n\n  return (\n    <div\n      className={mergeClasses('relative w-full shrink-0 lg:w-[var(--flow-panel-width)]', className)}\n      style={{ '--flow-panel-width': `${width}px` } as CSSProperties}\n    >\n      {children}\n      <ControlledTooltip content={t('flow.resizePanel')} placement={handleSide === 'right' ? 'right' : 'left'}>\n        <ControlledButton\n          defaultHtmlButton\n          aria-label={t('flow.resizePanel')}\n          onPointerDown={handlePointerDown}\n          onPointerMove={handlePointerMove}\n          onPointerUp={handlePointerEnd}\n          onPointerCancel={handlePointerEnd}\n          onKeyDown={handleKeyDown}\n          onDoubleClick={handleReset}\n          className={classNames(\n            'group/resize absolute inset-y-0 z-10 hidden w-3 cursor-col-resize touch-none select-none items-center justify-center focus:outline-none lg:flex',\n            handleSide === 'right' ? '-right-3' : '-left-3',\n          )}\n        >\n          <span\n            className={classNames(\n              'h-full w-0.5 rounded-full transition-colors duration-base',\n              isResizing ? 'bg-brand-hover' : 'bg-transparent group-hover/resize:bg-brand-hover',\n            )}\n          />\n        </ControlledButton>\n      </ControlledTooltip>\n    </div>\n  );\n};\n\nexport default FlowResizablePanel;\n"],"names":["width"],"mappings":";;;;;;;;AASA,MAAM,mBAAmB;AACzB,MAAM,uBAAuB;AAe7B,MAAM,mBAAmB,MAA8B,iBAAyC,gBAAgB,KAAK,CAAA;AAOrH,MAAM,qBAAyD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,aAAa;AAAA,IACjB,CAACA,WAAkB,KAAK,IAAI,UAAU,KAAK,IAAI,UAAU,KAAK,MAAMA,MAAK,CAAC,CAAC;AAAA,IAC3E,CAAC,UAAU,QAAQ;AAAA,EAAA;AAErB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM;AACvC,UAAM,SAAS,aAAa,iBAAA,EAAmB,UAAU,IAAI;AAC7D,WAAO,WAAW,OAAO,WAAW,WAAW,SAAS,YAAY;AAAA,EACtE,CAAC;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,iBAAiB,OAAmD,IAAI;AAC9E,QAAM,WAAW,OAAO,KAAK;AAC7B,WAAS,UAAU;AAEnB,QAAM,eAAe;AAAA,IACnB,CAAC,cAAsB;AACrB,UAAI,CAAC,WAAY;AACjB,wBAAkB,kBAAkB,EAAE,GAAG,iBAAA,GAAoB,CAAC,UAAU,GAAG,WAAW;AAAA,IACxF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAGb,YAAU,MAAM,SAAS,CAAC,YAAY,WAAW,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;AAExE,QAAM,oBAAoB,CAAC,UAAiD;AAC1E,UAAM,eAAA;AACN,mBAAe,UAAU,EAAE,UAAU,MAAM,SAAS,OAAO,SAAS,QAAA;AACpE,kBAAc,IAAI;AAClB,UAAM,cAAc,kBAAkB,MAAM,SAAS;AAAA,EACvD;AAEA,QAAM,oBAAoB,CAAC,UAAiD;AAC1E,UAAM,cAAc,eAAe;AACnC,QAAI,CAAC,YAAa;AAClB,UAAM,eAAe,MAAM,UAAU,YAAY;AACjD,aAAS,WAAW,YAAY,SAAS,eAAe,UAAU,eAAe,CAAC,aAAa,CAAC;AAAA,EAClG;AAEA,QAAM,mBAAmB,CAAC,UAAiD;AACzE,QAAI,CAAC,eAAe,QAAS;AAC7B,mBAAe,UAAU;AACzB,kBAAc,KAAK;AACnB,iBAAa,SAAS,OAAO;AAC7B,QAAI,MAAM,cAAc,kBAAkB,MAAM,SAAS,GAAG;AAC1D,YAAM,cAAc,sBAAsB,MAAM,SAAS;AAAA,IAC3D;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAAkD;AACvE,QAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAc;AAC7D,UAAM,eAAA;AACN,UAAM,mBAAmB,MAAM,QAAQ,eAAe,IAAI;AAC1D,UAAM,YAAY;AAAA,MAChB,SAAS,WAAW,eAAe,UAAU,mBAAmB,CAAC,oBAAoB;AAAA,IAAA;AAEvF,aAAS,SAAS;AAClB,iBAAa,SAAS;AAAA,EACxB;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,YAAY,WAAW,YAAY;AACzC,aAAS,SAAS;AAClB,iBAAa,SAAS;AAAA,EACxB;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,aAAa,2DAA2D,SAAS;AAAA,MAC5F,OAAO,EAAE,sBAAsB,GAAG,KAAK,KAAA;AAAA,MAEtC,UAAA;AAAA,QAAA;AAAA,QACD,oBAAC,mBAAA,EAAkB,SAAS,EAAE,kBAAkB,GAAG,WAAW,eAAe,UAAU,UAAU,QAC/F,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,mBAAiB;AAAA,YACjB,cAAY,EAAE,kBAAkB;AAAA,YAChC,eAAe;AAAA,YACf,eAAe;AAAA,YACf,aAAa;AAAA,YACb,iBAAiB;AAAA,YACjB,WAAW;AAAA,YACX,eAAe;AAAA,YACf,WAAW;AAAA,cACT;AAAA,cACA,eAAe,UAAU,aAAa;AAAA,YAAA;AAAA,YAGxC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,aAAa,mBAAmB;AAAA,gBAAA;AAAA,cAClC;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,EACF,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,10 @@
+interface IFlowSelectionBarProps {
+    selectedCount: number;
+    canDelete: boolean;
+    onDuplicate: () => void;
+    onDelete: () => void;
+    onClear: () => void;
+}
+/** What can be done with several selected items at once: blocks and annotations alike. */
+declare const FlowSelectionBar: React.FC<IFlowSelectionBarProps>;
+export default FlowSelectionBar;

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

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+const SelectionAction = ({ icon, label, onClick, disabled, danger }) => /* @__PURE__ */ jsxs(
+  ControlledButton,
+  {
+    defaultHtmlButton: true,
+    onClick,
+    disabled,
+    className: danger ? "interactive flex h-8 items-center gap-x-1.5 rounded-lg px-2.5 text-sm font-medium text-danger-emphasis hover:bg-danger-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40" : "interactive flex h-8 items-center gap-x-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground-muted hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
+    children: [
+      /* @__PURE__ */ jsx(MaterialSymbol, { icon, size: 18, "aria-hidden": true }),
+      /* @__PURE__ */ jsx("span", { children: label })
+    ]
+  }
+);
+const FlowSelectionBar = ({
+  selectedCount,
+  canDelete,
+  onDuplicate,
+  onDelete,
+  onClear
+}) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1 rounded-xl border border-border bg-surface p-1 shadow-md", children: [
+    /* @__PURE__ */ jsx("span", { className: "px-2 text-sm font-medium text-foreground", children: t("flow.selection.count", { count: selectedCount }) }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-5 w-px bg-border" }),
+    /* @__PURE__ */ jsx(SelectionAction, { icon: "content_copy", label: t("flow.selection.duplicate"), onClick: onDuplicate }),
+    /* @__PURE__ */ jsx(
+      SelectionAction,
+      {
+        icon: "delete",
+        label: t("flow.selection.delete"),
+        onClick: onDelete,
+        disabled: !canDelete,
+        danger: true
+      }
+    ),
+    /* @__PURE__ */ jsx(ControlledTooltip, { content: t("flow.selection.clear"), placement: "top", children: /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        "aria-label": t("flow.selection.clear"),
+        defaultHtmlButton: true,
+        onClick: onClear,
+        className: "interactive flex size-8 items-center justify-center rounded-lg text-foreground-muted hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 18, "aria-hidden": true })
+      }
+    ) })
+  ] });
+};
+export {
+  FlowSelectionBar as default
+};
+//# sourceMappingURL=FlowSelectionBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowSelectionBar.js","sources":["../../../../src/components/UI/Flow/FlowSelectionBar.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\ninterface IFlowSelectionBarProps {\n  selectedCount: number;\n  canDelete: boolean;\n  onDuplicate: () => void;\n  onDelete: () => void;\n  onClear: () => void;\n}\n\ninterface ISelectionActionProps {\n  icon: SymbolCodepoints;\n  label: string;\n  onClick: () => void;\n  disabled?: boolean;\n  danger?: boolean;\n}\n\nconst SelectionAction: React.FC<ISelectionActionProps> = ({ icon, label, onClick, disabled, danger }) => (\n  <ControlledButton\n    defaultHtmlButton\n    onClick={onClick}\n    disabled={disabled}\n    className={\n      danger\n        ? 'interactive flex h-8 items-center gap-x-1.5 rounded-lg px-2.5 text-sm font-medium text-danger-emphasis hover:bg-danger-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40'\n        : 'interactive flex h-8 items-center gap-x-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground-muted hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40'\n    }\n  >\n    <MaterialSymbol icon={icon} size={18} aria-hidden />\n    <span>{label}</span>\n  </ControlledButton>\n);\n\n/** What can be done with several selected items at once: blocks and annotations alike. */\nconst FlowSelectionBar: React.FC<IFlowSelectionBarProps> = ({\n  selectedCount,\n  canDelete,\n  onDuplicate,\n  onDelete,\n  onClear,\n}) => {\n  const { t } = useTranslation('ui');\n\n  return (\n    <div className=\"flex items-center gap-x-1 rounded-xl border border-border bg-surface p-1 shadow-md\">\n      <span className=\"px-2 text-sm font-medium text-foreground\">\n        {t('flow.selection.count', { count: selectedCount })}\n      </span>\n      <span aria-hidden className=\"h-5 w-px bg-border\" />\n      <SelectionAction icon=\"content_copy\" label={t('flow.selection.duplicate')} onClick={onDuplicate} />\n      <SelectionAction\n        icon=\"delete\"\n        label={t('flow.selection.delete')}\n        onClick={onDelete}\n        disabled={!canDelete}\n        danger\n      />\n      <ControlledTooltip content={t('flow.selection.clear')} placement=\"top\">\n        <ControlledButton\n          aria-label={t('flow.selection.clear')}\n          defaultHtmlButton\n          onClick={onClear}\n          className=\"interactive flex size-8 items-center justify-center rounded-lg text-foreground-muted hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <MaterialSymbol icon=\"close\" size={18} aria-hidden />\n        </ControlledButton>\n      </ControlledTooltip>\n    </div>\n  );\n};\n\nexport default FlowSelectionBar;\n"],"names":[],"mappings":";;;;;AAsBA,MAAM,kBAAmD,CAAC,EAAE,MAAM,OAAO,SAAS,UAAU,aAC1F;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,mBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,WACE,SACI,yPACA;AAAA,IAGN,UAAA;AAAA,MAAA,oBAAC,gBAAA,EAAe,MAAY,MAAM,IAAI,eAAW,MAAC;AAAA,MAClD,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AACf;AAIF,MAAM,mBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SACE,qBAAC,OAAA,EAAI,WAAU,sFACb,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,4CACb,UAAA,EAAE,wBAAwB,EAAE,OAAO,cAAA,CAAe,EAAA,CACrD;AAAA,IACA,oBAAC,QAAA,EAAK,eAAW,MAAC,WAAU,sBAAqB;AAAA,IACjD,oBAAC,mBAAgB,MAAK,gBAAe,OAAO,EAAE,0BAA0B,GAAG,SAAS,aAAa;AAAA,IACjG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,uBAAuB;AAAA,QAChC,SAAS;AAAA,QACT,UAAU,CAAC;AAAA,QACX,QAAM;AAAA,MAAA;AAAA,IAAA;AAAA,wBAEP,mBAAA,EAAkB,SAAS,EAAE,sBAAsB,GAAG,WAAU,OAC/D,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAY,EAAE,sBAAsB;AAAA,QACpC,mBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,WAAU;AAAA,QAEV,8BAAC,gBAAA,EAAe,MAAK,SAAQ,MAAM,IAAI,eAAW,KAAA,CAAC;AAAA,MAAA;AAAA,IAAA,EACrD,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,12 @@
+import { PanelPosition } from '@xyflow/react';
+interface IFlowZoomControlsProps {
+    onUndo?: () => void;
+    onRedo?: () => void;
+    canUndo?: boolean;
+    canRedo?: boolean;
+    onLayout?: () => void;
+    position?: PanelPosition;
+}
+/** Zoom, fit and history controls drawn with the library's own buttons. */
+declare const FlowZoomControls: React.FC<IFlowZoomControlsProps>;
+export default FlowZoomControls;