@umodeapporg/ui 0.22.3 → 0.23.0

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { IFlowBlockRegistry } from './flowBlockRegistry';
+import { IFlowEditorState, TFlowEditorStore } from './flowEditorStore';
+import { IFlowGraph } from './flowTypes';
+interface IFlowEditorProviderProps {
+    /** Read once, when the provider mounts. Load a different flow with `replaceGraph` or a new `key`. */
+    initialGraph: IFlowGraph;
+    registry: IFlowBlockRegistry;
+    children: ReactNode;
+}
+/** Scopes one editor: its store, its block registry and the canvas viewport. */
+declare const FlowEditorProvider: React.FC<IFlowEditorProviderProps>;
+export declare const useFlowEditor: <TSelected>(selector: (state: IFlowEditorState) => TSelected) => TSelected;
+/** The store itself, for reading state inside event handlers without subscribing. */
+export declare const useFlowEditorStore: () => TFlowEditorStore;
+export declare const useFlowBlockRegistry: () => IFlowBlockRegistry;
+export default FlowEditorProvider;

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

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useMemo, useEffect, useContext } from "react";
+import { useStore } from "zustand";
+import { ReactFlowProvider } from "@xyflow/react";
+import { createFlowEditorStore } from "./flowEditorStore.js";
+const FlowEditorContext = createContext(null);
+const FlowEditorProvider = ({ initialGraph, registry, children }) => {
+  const [store] = useState(() => createFlowEditorStore(initialGraph, registry));
+  const contextValue = useMemo(() => ({ store, registry }), [store, registry]);
+  useEffect(() => store.getState().setRegistry(registry), [store, registry]);
+  return /* @__PURE__ */ jsx(FlowEditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ReactFlowProvider, { children }) });
+};
+const useFlowEditorContext = () => {
+  const context = useContext(FlowEditorContext);
+  if (!context) throw new Error("Flow editor components must be rendered inside FlowEditorProvider");
+  return context;
+};
+const useFlowEditor = (selector) => useStore(useFlowEditorContext().store, selector);
+const useFlowEditorStore = () => useFlowEditorContext().store;
+const useFlowBlockRegistry = () => useFlowEditorContext().registry;
+export {
+  FlowEditorProvider as default,
+  useFlowBlockRegistry,
+  useFlowEditor,
+  useFlowEditorStore
+};
+//# sourceMappingURL=FlowEditorProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowEditorProvider.js","sources":["../../../../src/components/UI/Flow/FlowEditorProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react';\nimport { useStore } from 'zustand';\n\nimport { ReactFlowProvider } from '@xyflow/react';\n\nimport type { IFlowBlockRegistry } from './flowBlockRegistry';\nimport { createFlowEditorStore, IFlowEditorState, TFlowEditorStore } from './flowEditorStore';\nimport type { IFlowGraph } from './flowTypes';\n\ninterface IFlowEditorContextValue {\n  store: TFlowEditorStore;\n  registry: IFlowBlockRegistry;\n}\n\nconst FlowEditorContext = createContext<IFlowEditorContextValue | null>(null);\n\ninterface IFlowEditorProviderProps {\n  /** Read once, when the provider mounts. Load a different flow with `replaceGraph` or a new `key`. */\n  initialGraph: IFlowGraph;\n  registry: IFlowBlockRegistry;\n  children: ReactNode;\n}\n\n/** Scopes one editor: its store, its block registry and the canvas viewport. */\nconst FlowEditorProvider: React.FC<IFlowEditorProviderProps> = ({ initialGraph, registry, children }) => {\n  const [store] = useState(() => createFlowEditorStore(initialGraph, registry));\n  const contextValue = useMemo(() => ({ store, registry }), [store, registry]);\n\n  useEffect(() => store.getState().setRegistry(registry), [store, registry]);\n\n  return (\n    <FlowEditorContext.Provider value={contextValue}>\n      <ReactFlowProvider>{children}</ReactFlowProvider>\n    </FlowEditorContext.Provider>\n  );\n};\n\nconst useFlowEditorContext = (): IFlowEditorContextValue => {\n  const context = useContext(FlowEditorContext);\n  if (!context) throw new Error('Flow editor components must be rendered inside FlowEditorProvider');\n  return context;\n};\n\nexport const useFlowEditor = <TSelected,>(selector: (state: IFlowEditorState) => TSelected): TSelected =>\n  useStore(useFlowEditorContext().store, selector);\n\n/** The store itself, for reading state inside event handlers without subscribing. */\nexport const useFlowEditorStore = (): TFlowEditorStore => useFlowEditorContext().store;\n\nexport const useFlowBlockRegistry = (): IFlowBlockRegistry => useFlowEditorContext().registry;\n\nexport default FlowEditorProvider;\n"],"names":[],"mappings":";;;;;AAcA,MAAM,oBAAoB,cAA8C,IAAI;AAU5E,MAAM,qBAAyD,CAAC,EAAE,cAAc,UAAU,eAAe;AACvG,QAAM,CAAC,KAAK,IAAI,SAAS,MAAM,sBAAsB,cAAc,QAAQ,CAAC;AAC5E,QAAM,eAAe,QAAQ,OAAO,EAAE,OAAO,aAAa,CAAC,OAAO,QAAQ,CAAC;AAE3E,YAAU,MAAM,MAAM,WAAW,YAAY,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEzE,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAA,oBAAC,mBAAA,EAAmB,SAAA,CAAS,EAAA,CAC/B;AAEJ;AAEA,MAAM,uBAAuB,MAA+B;AAC1D,QAAM,UAAU,WAAW,iBAAiB;AAC5C,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,mEAAmE;AACjG,SAAO;AACT;AAEO,MAAM,gBAAgB,CAAa,aACxC,SAAS,qBAAA,EAAuB,OAAO,QAAQ;AAG1C,MAAM,qBAAqB,MAAwB,uBAAuB;AAE1E,MAAM,uBAAuB,MAA0B,uBAAuB;"}

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

@@ -0,0 +1,11 @@
+import { IFlowIssue } from './flowTypes';
+interface IFlowInspectorProps {
+    issues?: Array<IFlowIssue>;
+    readOnly?: boolean;
+    /** A floating panel opens with the selection instead of showing an empty state. */
+    hideWhenEmpty?: boolean;
+    className?: string;
+}
+/** The side panel of the selected block: its name, its own settings panel and its issues. */
+declare const FlowInspector: React.FC<IFlowInspectorProps>;
+export default FlowInspector;

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

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { twMerge } from "tailwind-merge";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledInput from "../../Form/ControlledInput.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import NoDataFound from "../NoDataFound/index.js";
+import { useFlowBlockRegistry, useFlowEditorStore, useFlowEditor } from "./FlowEditorProvider.js";
+import { useFlowLabels } from "./useFlowLabels.js";
+const FlowInspector = ({
+  issues = [],
+  readOnly = false,
+  hideWhenEmpty = false,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const labels = useFlowLabels();
+  const registry = useFlowBlockRegistry();
+  const store = useFlowEditorStore();
+  const selectedNodeIds = useFlowEditor((state) => state.selectedNodeIds);
+  const selectedNode = useFlowEditor(
+    (state) => state.selectedNodeIds.length === 1 ? state.graph.nodes.find((node) => node.nodeId === state.selectedNodeIds[0]) : void 0
+  );
+  const shellClass = twMerge(
+    "flex h-full min-h-0 flex-col gap-y-3 rounded-xl border border-border bg-surface p-4",
+    className
+  );
+  if (!selectedNode || selectedNodeIds.length !== 1) {
+    if (hideWhenEmpty) return null;
+    return /* @__PURE__ */ jsx("aside", { className: shellClass, "aria-label": t("flow.inspector.title"), children: /* @__PURE__ */ jsx(NoDataFound, { size: "sm", variant: "waiting", message: t("flow.inspector.empty") }) });
+  }
+  const definition = registry.get(selectedNode.type);
+  const nodeIssues = (Array.isArray(issues) ? issues : []).filter((issue) => issue.nodeId === selectedNode.nodeId);
+  const ConfigPanel = definition?.ConfigPanel;
+  return /* @__PURE__ */ jsxs("aside", { className: shellClass, "aria-label": t("flow.inspector.title"), 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: definition?.resolveIcon?.(selectedNode.config) ?? definition?.icon ?? "help",
+          size: 18,
+          "aria-hidden": true
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+        definition && /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: labels.categories[definition.category] }),
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: definition?.resolveLabel?.(selectedNode.config) ?? definition?.label ?? selectedNode.type })
+      ] }),
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("flow.inspector.close"), placement: "left", children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          defaultHtmlButton: true,
+          onClick: () => store.getState().setSelection({ nodeIds: [], edgeIds: [] }),
+          className: "interactive ml-auto flex size-8 shrink-0 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 })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ControlledInput,
+      {
+        label: t("flow.inspector.label"),
+        value: selectedNode.label ?? "",
+        disabled: readOnly,
+        onChange: (event) => store.getState().updateNodeLabel(selectedNode.nodeId, event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-y-3 overflow-y-auto", children: [
+      ConfigPanel ? /* @__PURE__ */ jsx(
+        ConfigPanel,
+        {
+          config: selectedNode.config,
+          readOnly,
+          onChange: (next) => store.getState().updateNodeConfig(selectedNode.nodeId, next)
+        }
+      ) : /* @__PURE__ */ jsx(NoDataFound, { compact: true, variant: "error", message: t("flow.inspector.unknownBlock") }),
+      nodeIssues.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-y-1", children: nodeIssues.map((issue) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-x-2", 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) })
+      ] }, `${issue.code}|${issue.edgeId ?? ""}`)) })
+    ] }),
+    !readOnly && /* @__PURE__ */ jsxs("div", { className: "flex gap-x-2", children: [
+      definition?.category !== "trigger" && /* @__PURE__ */ jsxs(
+        ControlledButton,
+        {
+          size: "sm",
+          variant: "outlined",
+          tone: "neutral",
+          onClick: () => store.getState().duplicateSelected(),
+          children: [
+            /* @__PURE__ */ jsx(MaterialSymbol, { icon: "content_copy", size: 16, "aria-hidden": true }),
+            t("flow.inspector.duplicate")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        ControlledButton,
+        {
+          size: "sm",
+          variant: "outlined",
+          tone: "danger",
+          onClick: () => store.getState().removeSelected(),
+          children: [
+            /* @__PURE__ */ jsx(MaterialSymbol, { icon: "delete", size: 16, "aria-hidden": true }),
+            t("flow.inspector.delete")
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  FlowInspector as default
+};
+//# sourceMappingURL=FlowInspector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowInspector.js","sources":["../../../../src/components/UI/Flow/FlowInspector.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledInput from '@/components/Form/ControlledInput';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport NoDataFound from '@/components/UI/NoDataFound';\n\nimport { useFlowBlockRegistry, useFlowEditor, useFlowEditorStore } from './FlowEditorProvider';\nimport type { IFlowIssue } from './flowTypes';\nimport { useFlowLabels } from './useFlowLabels';\n\ninterface IFlowInspectorProps {\n  issues?: Array<IFlowIssue>;\n  readOnly?: boolean;\n  /** A floating panel opens with the selection instead of showing an empty state. */\n  hideWhenEmpty?: boolean;\n  className?: string;\n}\n\n/** The side panel of the selected block: its name, its own settings panel and its issues. */\nconst FlowInspector: React.FC<IFlowInspectorProps> = ({\n  issues = [],\n  readOnly = false,\n  hideWhenEmpty = false,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const labels = useFlowLabels();\n  const registry = useFlowBlockRegistry();\n  const store = useFlowEditorStore();\n  const selectedNodeIds = useFlowEditor((state) => state.selectedNodeIds);\n  const selectedNode = useFlowEditor((state) =>\n    state.selectedNodeIds.length === 1\n      ? state.graph.nodes.find((node) => node.nodeId === state.selectedNodeIds[0])\n      : undefined,\n  );\n\n  const shellClass = twMerge(\n    'flex h-full min-h-0 flex-col gap-y-3 rounded-xl border border-border bg-surface p-4',\n    className,\n  );\n\n  if (!selectedNode || selectedNodeIds.length !== 1) {\n    if (hideWhenEmpty) return null;\n    return (\n      <aside className={shellClass} aria-label={t('flow.inspector.title')}>\n        <NoDataFound size=\"sm\" variant=\"waiting\" message={t('flow.inspector.empty')} />\n      </aside>\n    );\n  }\n\n  const definition = registry.get(selectedNode.type);\n  const nodeIssues = (Array.isArray(issues) ? issues : []).filter((issue) => issue.nodeId === selectedNode.nodeId);\n  const ConfigPanel = definition?.ConfigPanel;\n\n  return (\n    <aside className={shellClass} aria-label={t('flow.inspector.title')}>\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\n            icon={definition?.resolveIcon?.(selectedNode.config) ?? definition?.icon ?? 'help'}\n            size={18}\n            aria-hidden\n          />\n        </span>\n        <div className=\"flex min-w-0 flex-col\">\n          {definition && (\n            <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n              {labels.categories[definition.category]}\n            </span>\n          )}\n          <span className=\"truncate text-sm font-semibold text-foreground\">\n            {definition?.resolveLabel?.(selectedNode.config) ?? definition?.label ?? selectedNode.type}\n          </span>\n        </div>\n        <ControlledTooltip content={t('flow.inspector.close')} placement=\"left\">\n          <ControlledButton\n            defaultHtmlButton\n            onClick={() => store.getState().setSelection({ nodeIds: [], edgeIds: [] })}\n            className=\"interactive ml-auto flex size-8 shrink-0 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      <ControlledInput\n        label={t('flow.inspector.label')}\n        value={selectedNode.label ?? ''}\n        disabled={readOnly}\n        onChange={(event) => store.getState().updateNodeLabel(selectedNode.nodeId, event.target.value)}\n      />\n\n      <div className=\"flex min-h-0 flex-1 flex-col gap-y-3 overflow-y-auto\">\n        {ConfigPanel ? (\n          <ConfigPanel\n            config={selectedNode.config}\n            readOnly={readOnly}\n            onChange={(next) => store.getState().updateNodeConfig(selectedNode.nodeId, next)}\n          />\n        ) : (\n          <NoDataFound compact variant=\"error\" message={t('flow.inspector.unknownBlock')} />\n        )}\n\n        {nodeIssues.length > 0 && (\n          <ul className=\"flex flex-col gap-y-1\">\n            {nodeIssues.map((issue) => (\n              <li key={`${issue.code}|${issue.edgeId ?? ''}`} className=\"flex items-start gap-x-2\">\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              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n\n      {!readOnly && (\n        <div className=\"flex gap-x-2\">\n          {definition?.category !== 'trigger' && (\n            <ControlledButton\n              size=\"sm\"\n              variant=\"outlined\"\n              tone=\"neutral\"\n              onClick={() => store.getState().duplicateSelected()}\n            >\n              <MaterialSymbol icon=\"content_copy\" size={16} aria-hidden />\n              {t('flow.inspector.duplicate')}\n            </ControlledButton>\n          )}\n          <ControlledButton\n            size=\"sm\"\n            variant=\"outlined\"\n            tone=\"danger\"\n            onClick={() => store.getState().removeSelected()}\n          >\n            <MaterialSymbol icon=\"delete\" size={16} aria-hidden />\n            {t('flow.inspector.delete')}\n          </ControlledButton>\n        </div>\n      )}\n    </aside>\n  );\n};\n\nexport default FlowInspector;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { IFlowIssue } from './flowTypes';
+interface IFlowIssueListProps {
+    issues: Array<IFlowIssue>;
+    className?: string;
+}
+/** Every issue of the flow; clicking one selects and centers the block it points to. */
+declare const FlowIssueList: React.FC<IFlowIssueListProps>;
+export default FlowIssueList;

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

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

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

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

@@ -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 { 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

@@ -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';\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

@@ -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;