@umodeapporg/ui 0.23.0 → 0.23.1

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

@@ -1,55 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useTranslation } from "react-i18next";
-import { twMerge } from "tailwind-merge";
-import ControlledButton from "../../Form/ControlledButton.js";
-import { MaterialSymbol } from "../MaterialSymbol/index.js";
-import NoDataFound from "../NoDataFound/index.js";
-import { useReactFlow } from "@xyflow/react";
-import { useFlowEditorStore, useFlowEditor } from "./FlowEditorProvider.js";
-import { useFlowLabels } from "./useFlowLabels.js";
-const issueKey = (issue) => `${issue.code}|${issue.nodeId ?? ""}|${issue.edgeId ?? ""}`;
-const FlowIssueList = ({ issues, className }) => {
-  const { t } = useTranslation("ui");
-  const labels = useFlowLabels();
-  const store = useFlowEditorStore();
-  const nodes = useFlowEditor((state) => state.graph.nodes);
-  const { setCenter } = useReactFlow();
-  const safeIssues = Array.isArray(issues) ? issues : [];
-  const uniqueIssues = safeIssues.filter(
-    (issue, index) => safeIssues.findIndex((other) => issueKey(other) === issueKey(issue)) === index
-  );
-  const focusNode = (nodeId) => {
-    const node = nodes.find((candidate) => candidate.nodeId === nodeId);
-    if (!node) return;
-    store.getState().setSelection({ nodeIds: [node.nodeId], edgeIds: [] });
-    void setCenter(node.position.x + 128, node.position.y + 48, { zoom: 1, duration: 200 });
-  };
-  return /* @__PURE__ */ jsxs("section", { className: twMerge("flex flex-col gap-y-2", className), children: [
-    /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: t("flow.issues.title") }),
-    uniqueIssues.length === 0 ? /* @__PURE__ */ jsx(NoDataFound, { compact: true, variant: "success", message: t("flow.issues.none") }) : /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-y-1", children: uniqueIssues.map((issue) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-      ControlledButton,
-      {
-        defaultHtmlButton: true,
-        disabled: !issue.nodeId,
-        onClick: () => focusNode(issue.nodeId),
-        className: "interactive flex w-full items-start gap-x-2 rounded-lg px-2 py-1.5 text-left hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default disabled:hover:bg-transparent",
-        children: [
-          /* @__PURE__ */ jsx(
-            MaterialSymbol,
-            {
-              icon: issue.severity === "error" ? "error" : "warning",
-              size: 16,
-              className: issue.severity === "error" ? "text-danger-emphasis" : "text-warning-emphasis",
-              "aria-hidden": true
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-muted", children: labels.issueMessage(issue) })
-        ]
-      }
-    ) }, issueKey(issue))) })
-  ] });
-};
-export {
-  FlowIssueList as default
-};
-//# sourceMappingURL=FlowIssueList.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FlowIssueList.js","sources":["../../../../src/components/UI/Flow/FlowIssueList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport NoDataFound from '@/components/UI/NoDataFound';\nimport { useReactFlow } from '@xyflow/react';\n\nimport { useFlowEditor, useFlowEditorStore } from './FlowEditorProvider';\nimport type { IFlowIssue } from './flowTypes';\nimport { useFlowLabels } from './useFlowLabels';\n\ninterface IFlowIssueListProps {\n  issues: Array<IFlowIssue>;\n  className?: string;\n}\n\nconst issueKey = (issue: IFlowIssue): string => `${issue.code}|${issue.nodeId ?? ''}|${issue.edgeId ?? ''}`;\n\n/** Every issue of the flow; clicking one selects and centers the block it points to. */\nconst FlowIssueList: React.FC<IFlowIssueListProps> = ({ issues, className }) => {\n  const { t } = useTranslation('ui');\n  const labels = useFlowLabels();\n  const store = useFlowEditorStore();\n  const nodes = useFlowEditor((state) => state.graph.nodes);\n  const { setCenter } = useReactFlow();\n  const safeIssues = Array.isArray(issues) ? issues : [];\n  const uniqueIssues = safeIssues.filter(\n    (issue, index) => safeIssues.findIndex((other) => issueKey(other) === issueKey(issue)) === index,\n  );\n\n  const focusNode = (nodeId: string | undefined) => {\n    const node = nodes.find((candidate) => candidate.nodeId === nodeId);\n    if (!node) return;\n    store.getState().setSelection({ nodeIds: [node.nodeId], edgeIds: [] });\n    void setCenter(node.position.x + 128, node.position.y + 48, { zoom: 1, duration: 200 });\n  };\n\n  return (\n    <section className={twMerge('flex flex-col gap-y-2', className)}>\n      <span className=\"text-sm font-semibold text-foreground\">{t('flow.issues.title')}</span>\n      {uniqueIssues.length === 0 ? (\n        <NoDataFound compact variant=\"success\" message={t('flow.issues.none')} />\n      ) : (\n        <ul className=\"flex flex-col gap-y-1\">\n          {uniqueIssues.map((issue) => (\n            <li key={issueKey(issue)}>\n              <ControlledButton\n                defaultHtmlButton\n                disabled={!issue.nodeId}\n                onClick={() => focusNode(issue.nodeId)}\n                className=\"interactive flex w-full items-start gap-x-2 rounded-lg px-2 py-1.5 text-left hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default disabled:hover:bg-transparent\"\n              >\n                <MaterialSymbol\n                  icon={issue.severity === 'error' ? 'error' : 'warning'}\n                  size={16}\n                  className={issue.severity === 'error' ? 'text-danger-emphasis' : 'text-warning-emphasis'}\n                  aria-hidden\n                />\n                <span className=\"text-xs text-foreground-muted\">{labels.issueMessage(issue)}</span>\n              </ControlledButton>\n            </li>\n          ))}\n        </ul>\n      )}\n    </section>\n  );\n};\n\nexport default FlowIssueList;\n"],"names":[],"mappings":";;;;;;;;;AAiBA,MAAM,WAAW,CAAC,UAA8B,GAAG,MAAM,IAAI,IAAI,MAAM,UAAU,EAAE,IAAI,MAAM,UAAU,EAAE;AAGzG,MAAM,gBAA+C,CAAC,EAAE,QAAQ,gBAAgB;AAC9E,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,SAAS,cAAA;AACf,QAAM,QAAQ,mBAAA;AACd,QAAM,QAAQ,cAAc,CAAC,UAAU,MAAM,MAAM,KAAK;AACxD,QAAM,EAAE,UAAA,IAAc,aAAA;AACtB,QAAM,aAAa,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAA;AACpD,QAAM,eAAe,WAAW;AAAA,IAC9B,CAAC,OAAO,UAAU,WAAW,UAAU,CAAC,UAAU,SAAS,KAAK,MAAM,SAAS,KAAK,CAAC,MAAM;AAAA,EAAA;AAG7F,QAAM,YAAY,CAAC,WAA+B;AAChD,UAAM,OAAO,MAAM,KAAK,CAAC,cAAc,UAAU,WAAW,MAAM;AAClE,QAAI,CAAC,KAAM;AACX,UAAM,SAAA,EAAW,aAAa,EAAE,SAAS,CAAC,KAAK,MAAM,GAAG,SAAS,CAAA,GAAI;AACrE,SAAK,UAAU,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,IAAI,EAAE,MAAM,GAAG,UAAU,KAAK;AAAA,EACxF;AAEA,8BACG,WAAA,EAAQ,WAAW,QAAQ,yBAAyB,SAAS,GAC5D,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,yCAAyC,UAAA,EAAE,mBAAmB,GAAE;AAAA,IAC/E,aAAa,WAAW,IACvB,oBAAC,eAAY,SAAO,MAAC,SAAQ,WAAU,SAAS,EAAE,kBAAkB,EAAA,CAAG,IAEvE,oBAAC,MAAA,EAAG,WAAU,yBACX,uBAAa,IAAI,CAAC,UACjB,oBAAC,MAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiB;AAAA,QACjB,UAAU,CAAC,MAAM;AAAA,QACjB,SAAS,MAAM,UAAU,MAAM,MAAM;AAAA,QACrC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,MAAM,aAAa,UAAU,UAAU;AAAA,cAC7C,MAAM;AAAA,cACN,WAAW,MAAM,aAAa,UAAU,yBAAyB;AAAA,cACjE,eAAW;AAAA,YAAA;AAAA,UAAA;AAAA,8BAEZ,QAAA,EAAK,WAAU,iCAAiC,UAAA,OAAO,aAAa,KAAK,EAAA,CAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EAC9E,GAdO,SAAS,KAAK,CAevB,CACD,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -1,30 +0,0 @@
-import { ReactNode } from 'react';
-export interface IFlowLane {
-    laneId: string;
-    title: string;
-    subtitle?: string;
-    /** Counters or chips under the title (rules acting on entry, stage requirements). */
-    badges?: ReactNode;
-}
-export type TFlowArcTone = 'default' | 'warning' | 'danger';
-export interface IFlowArc {
-    arcId: string;
-    sourceLaneId: string;
-    targetLaneId: string;
-    label: string;
-    /** `over` arcs above the lanes, `under` below them; the host decides what each side means. */
-    side: 'over' | 'under';
-    tone?: TFlowArcTone;
-    dashed?: boolean;
-}
-interface IFlowLaneMapProps {
-    lanes: Array<IFlowLane>;
-    arcs: Array<IFlowArc>;
-    onArcClick?: (arcId: string) => void;
-    onLaneClick?: (laneId: string) => void;
-    selectedArcId?: string | null;
-    ariaLabel?: string;
-    className?: string;
-}
-declare const FlowLaneMap: React.FC<IFlowLaneMapProps>;
-export default FlowLaneMap;

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

@@ -1,206 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo } from "react";
-import classNames from "classnames";
-import { useTranslation } from "react-i18next";
-import { twMerge } from "tailwind-merge";
-import ControlledButton from "../../Form/ControlledButton.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 ATTRIBUTION_POSITION = "bottom-left";
-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: twMerge("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 },
-          attributionPosition: ATTRIBUTION_POSITION,
-          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

@@ -1 +0,0 @@
-{"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';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\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  type PanelPosition,\n  Position,\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 ATTRIBUTION_POSITION: PanelPosition = 'bottom-left';\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={twMerge('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        attributionPosition={ATTRIBUTION_POSITION}\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

@@ -1,20 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/FlowPalette.d.ts

@@ -1,7 +0,0 @@
-interface IFlowPaletteProps {
-    readOnly?: boolean;
-    className?: string;
-}
-/** The blocks a flow can use, grouped by category. Drag one onto the canvas, or click to add it below the selection. */
-declare const FlowPalette: React.FC<IFlowPaletteProps>;
-export default FlowPalette;

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

@@ -1,90 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { twMerge } from "tailwind-merge";
-import ControlledButton from "../../Form/ControlledButton.js";
-import UnifiedSearchBar from "../../Search/UnifiedSearchBar.js";
-import { MaterialSymbol } from "../MaterialSymbol/index.js";
-import NoDataFound from "../NoDataFound/index.js";
-import { FLOW_BLOCK_DRAG_TYPE } from "./flowConstants.js";
-import { useFlowBlockRegistry, useFlowEditorStore, useFlowEditor } from "./FlowEditorProvider.js";
-import { useFlowLabels } from "./useFlowLabels.js";
-const CATEGORY_ORDER = ["trigger", "condition", "action"];
-const FlowPalette = ({ readOnly = false, className }) => {
-  const { t } = useTranslation("ui");
-  const labels = useFlowLabels();
-  const registry = useFlowBlockRegistry();
-  const store = useFlowEditorStore();
-  const nodes = useFlowEditor((state) => state.graph.nodes);
-  const [visibleBlocks, setVisibleBlocks] = useState(registry.list);
-  const instancesByType = useMemo(() => {
-    const counts = /* @__PURE__ */ new Map();
-    nodes.forEach((node) => counts.set(node.type, (counts.get(node.type) ?? 0) + 1));
-    return counts;
-  }, [nodes]);
-  const startDrag = (event, type) => {
-    event.dataTransfer.setData(FLOW_BLOCK_DRAG_TYPE, type);
-    event.dataTransfer.effectAllowed = "copy";
-  };
-  return /* @__PURE__ */ jsxs(
-    "aside",
-    {
-      className: twMerge(
-        "flex h-full min-h-0 flex-col gap-y-3 rounded-xl border border-border bg-surface p-3",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: t("flow.palette.title") }),
-        /* @__PURE__ */ jsx(
-          UnifiedSearchBar,
-          {
-            mode: "default",
-            label: t("flow.palette.search"),
-            searchableItems: registry.list,
-            searchKeys: ["label", "description"],
-            setFilteredItems: setVisibleBlocks,
-            minSearchLength: 1,
-            debounceTime: 150
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-y-4 overflow-y-auto", children: [
-          visibleBlocks.length === 0 && /* @__PURE__ */ jsx(NoDataFound, { compact: true, variant: "search", message: t("flow.palette.empty") }),
-          CATEGORY_ORDER.map((category) => {
-            const blocks = visibleBlocks.filter((block) => block.category === category);
-            if (blocks.length === 0) return null;
-            return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-y-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: labels.categories[category] }),
-              blocks.map((block) => {
-                const limitReached = block.maxInstances !== void 0 && (instancesByType.get(block.type) ?? 0) >= block.maxInstances;
-                const disabled = readOnly || limitReached;
-                return /* @__PURE__ */ jsxs(
-                  ControlledButton,
-                  {
-                    defaultHtmlButton: true,
-                    draggable: !disabled,
-                    disabled,
-                    onDragStart: (event) => startDrag(event, block.type),
-                    onClick: () => store.getState().addNode(block.type),
-                    className: "interactive flex items-start gap-x-2 rounded-lg border border-transparent px-2 py-2 text-left hover:border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60",
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-foreground-muted", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: block.icon, size: 16, "aria-hidden": true }) }),
-                      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
-                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: block.label }),
-                        limitReached ? /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-subtle", children: t("flow.palette.limitReached") }) : block.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-subtle", children: block.description })
-                      ] })
-                    ]
-                  },
-                  block.type
-                );
-              })
-            ] }, category);
-          })
-        ] })
-      ]
-    }
-  );
-};
-export {
-  FlowPalette as default
-};
-//# sourceMappingURL=FlowPalette.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FlowPalette.js","sources":["../../../../src/components/UI/Flow/FlowPalette.tsx"],"sourcesContent":["import { DragEvent, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport UnifiedSearchBar from '@/components/Search/UnifiedSearchBar';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport NoDataFound from '@/components/UI/NoDataFound';\n\nimport { FLOW_BLOCK_DRAG_TYPE } from './flowConstants';\nimport { useFlowBlockRegistry, useFlowEditor, useFlowEditorStore } from './FlowEditorProvider';\nimport type { IFlowBlockDefinition, TFlowBlockCategory } from './flowTypes';\nimport { useFlowLabels } from './useFlowLabels';\n\nconst CATEGORY_ORDER: Array<TFlowBlockCategory> = ['trigger', 'condition', 'action'];\n\ninterface IFlowPaletteProps {\n  readOnly?: boolean;\n  className?: string;\n}\n\n/** The blocks a flow can use, grouped by category. Drag one onto the canvas, or click to add it below the selection. */\nconst FlowPalette: React.FC<IFlowPaletteProps> = ({ readOnly = false, className }) => {\n  const { t } = useTranslation('ui');\n  const labels = useFlowLabels();\n  const registry = useFlowBlockRegistry();\n  const store = useFlowEditorStore();\n  const nodes = useFlowEditor((state) => state.graph.nodes);\n  const [visibleBlocks, setVisibleBlocks] = useState<Array<IFlowBlockDefinition>>(registry.list);\n\n  const instancesByType = useMemo(() => {\n    const counts = new Map<string, number>();\n    nodes.forEach((node) => counts.set(node.type, (counts.get(node.type) ?? 0) + 1));\n    return counts;\n  }, [nodes]);\n\n  const startDrag = (event: DragEvent<HTMLButtonElement>, type: string) => {\n    event.dataTransfer.setData(FLOW_BLOCK_DRAG_TYPE, type);\n    event.dataTransfer.effectAllowed = 'copy';\n  };\n\n  return (\n    <aside\n      className={twMerge(\n        'flex h-full min-h-0 flex-col gap-y-3 rounded-xl border border-border bg-surface p-3',\n        className,\n      )}\n    >\n      <span className=\"text-sm font-semibold text-foreground\">{t('flow.palette.title')}</span>\n      <UnifiedSearchBar<IFlowBlockDefinition>\n        mode=\"default\"\n        label={t('flow.palette.search')}\n        searchableItems={registry.list}\n        searchKeys={['label', 'description']}\n        setFilteredItems={setVisibleBlocks}\n        minSearchLength={1}\n        debounceTime={150}\n      />\n      <div className=\"flex min-h-0 flex-1 flex-col gap-y-4 overflow-y-auto\">\n        {visibleBlocks.length === 0 && <NoDataFound compact variant=\"search\" message={t('flow.palette.empty')} />}\n        {CATEGORY_ORDER.map((category) => {\n          const blocks = visibleBlocks.filter((block) => block.category === category);\n          if (blocks.length === 0) return null;\n          return (\n            <section key={category} className=\"flex flex-col gap-y-1\">\n              <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n                {labels.categories[category]}\n              </span>\n              {blocks.map((block) => {\n                const limitReached =\n                  block.maxInstances !== undefined && (instancesByType.get(block.type) ?? 0) >= block.maxInstances;\n                const disabled = readOnly || limitReached;\n                return (\n                  <ControlledButton\n                    key={block.type}\n                    defaultHtmlButton\n                    draggable={!disabled}\n                    disabled={disabled}\n                    onDragStart={(event) => startDrag(event, block.type)}\n                    onClick={() => store.getState().addNode(block.type)}\n                    className=\"interactive flex items-start gap-x-2 rounded-lg border border-transparent px-2 py-2 text-left hover:border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60\"\n                  >\n                    <span className=\"flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-foreground-muted\">\n                      <MaterialSymbol icon={block.icon} size={16} aria-hidden />\n                    </span>\n                    <span className=\"flex min-w-0 flex-col\">\n                      <span className=\"text-sm font-medium text-foreground\">{block.label}</span>\n                      {limitReached ? (\n                        <span className=\"text-xs text-foreground-subtle\">{t('flow.palette.limitReached')}</span>\n                      ) : (\n                        block.description && <span className=\"text-xs text-foreground-subtle\">{block.description}</span>\n                      )}\n                    </span>\n                  </ControlledButton>\n                );\n              })}\n            </section>\n          );\n        })}\n      </div>\n    </aside>\n  );\n};\n\nexport default FlowPalette;\n"],"names":[],"mappings":"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"}

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

@@ -1,20 +0,0 @@
-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 and the handle hides: stacked under the canvas there is nothing to resize against.
- */
-declare const FlowResizablePanel: React.FC<IFlowResizablePanelProps>;
-export default FlowResizablePanel;