@umodeapporg/ui 0.22.3 → 0.23.0

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/FlowPalette.d.ts

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

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

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

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

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

@@ -0,0 +1,117 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback, useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { twMerge } from "tailwind-merge";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledTooltip from "../ControlledTooltip.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: twMerge("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,
+            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';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\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 and the handle hides: stacked under the canvas there is nothing to resize against.\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={twMerge('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          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,QAAQ,2DAA2D,SAAS;AAAA,MACvF,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,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/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;

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

@@ -0,0 +1,53 @@
+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";
+import { useReactFlow, Panel } from "@xyflow/react";
+const ControlButton = ({ icon, label, onClick, disabled }) => /* @__PURE__ */ jsx(ControlledTooltip, { content: label, placement: "right", children: /* @__PURE__ */ jsx(
+  ControlledButton,
+  {
+    defaultHtmlButton: true,
+    onClick,
+    disabled,
+    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 disabled:pointer-events-none disabled:opacity-40",
+    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon, size: 18, "aria-hidden": true })
+  }
+) });
+const FlowZoomControls = ({
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo,
+  onLayout,
+  position = "top-left"
+}) => {
+  const { t } = useTranslation("ui");
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  return /* @__PURE__ */ jsxs(
+    Panel,
+    {
+      position,
+      className: "flex flex-col gap-y-1 rounded-xl border border-border bg-surface p-1 shadow-sm",
+      children: [
+        /* @__PURE__ */ jsx(ControlButton, { icon: "add", label: t("flow.controls.zoomIn"), onClick: () => void zoomIn() }),
+        /* @__PURE__ */ jsx(ControlButton, { icon: "remove", label: t("flow.controls.zoomOut"), onClick: () => void zoomOut() }),
+        /* @__PURE__ */ jsx(
+          ControlButton,
+          {
+            icon: "fit_screen",
+            label: t("flow.controls.fitView"),
+            onClick: () => void fitView({ padding: 0.2 })
+          }
+        ),
+        onLayout && /* @__PURE__ */ jsx(ControlButton, { icon: "account_tree", label: t("flow.controls.layout"), onClick: onLayout }),
+        onUndo && /* @__PURE__ */ jsx(ControlButton, { icon: "undo", label: t("flow.controls.undo"), onClick: onUndo, disabled: !canUndo }),
+        onRedo && /* @__PURE__ */ jsx(ControlButton, { icon: "redo", label: t("flow.controls.redo"), onClick: onRedo, disabled: !canRedo })
+      ]
+    }
+  );
+};
+export {
+  FlowZoomControls as default
+};
+//# sourceMappingURL=FlowZoomControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowZoomControls.js","sources":["../../../../src/components/UI/Flow/FlowZoomControls.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';\nimport { Panel, type PanelPosition, useReactFlow } from '@xyflow/react';\n\ninterface IFlowZoomControlsProps {\n  onUndo?: () => void;\n  onRedo?: () => void;\n  canUndo?: boolean;\n  canRedo?: boolean;\n  onLayout?: () => void;\n  position?: PanelPosition;\n}\n\ninterface IControlButtonProps {\n  icon: SymbolCodepoints;\n  label: string;\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nconst ControlButton: React.FC<IControlButtonProps> = ({ icon, label, onClick, disabled }) => (\n  <ControlledTooltip content={label} placement=\"right\">\n    <ControlledButton\n      defaultHtmlButton\n      onClick={onClick}\n      disabled={disabled}\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 disabled:pointer-events-none disabled:opacity-40\"\n    >\n      <MaterialSymbol icon={icon} size={18} aria-hidden />\n    </ControlledButton>\n  </ControlledTooltip>\n);\n\n/** Zoom, fit and history controls drawn with the library's own buttons. */\nconst FlowZoomControls: React.FC<IFlowZoomControlsProps> = ({\n  onUndo,\n  onRedo,\n  canUndo,\n  canRedo,\n  onLayout,\n  position = 'top-left',\n}) => {\n  const { t } = useTranslation('ui');\n  const { zoomIn, zoomOut, fitView } = useReactFlow();\n\n  return (\n    <Panel\n      position={position}\n      className=\"flex flex-col gap-y-1 rounded-xl border border-border bg-surface p-1 shadow-sm\"\n    >\n      <ControlButton icon=\"add\" label={t('flow.controls.zoomIn')} onClick={() => void zoomIn()} />\n      <ControlButton icon=\"remove\" label={t('flow.controls.zoomOut')} onClick={() => void zoomOut()} />\n      <ControlButton\n        icon=\"fit_screen\"\n        label={t('flow.controls.fitView')}\n        onClick={() => void fitView({ padding: 0.2 })}\n      />\n      {onLayout && <ControlButton icon=\"account_tree\" label={t('flow.controls.layout')} onClick={onLayout} />}\n      {onUndo && <ControlButton icon=\"undo\" label={t('flow.controls.undo')} onClick={onUndo} disabled={!canUndo} />}\n      {onRedo && <ControlButton icon=\"redo\" label={t('flow.controls.redo')} onClick={onRedo} disabled={!canRedo} />}\n    </Panel>\n  );\n};\n\nexport default FlowZoomControls;\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,gBAA+C,CAAC,EAAE,MAAM,OAAO,SAAS,SAAA,MAC5E,oBAAC,mBAAA,EAAkB,SAAS,OAAO,WAAU,SAC3C,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,mBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,WAAU;AAAA,IAEV,8BAAC,gBAAA,EAAe,MAAY,MAAM,IAAI,eAAW,KAAA,CAAC;AAAA,EAAA;AACpD,GACF;AAIF,MAAM,mBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,EAAE,QAAQ,SAAS,QAAA,IAAY,aAAA;AAErC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,eAAA,EAAc,MAAK,OAAM,OAAO,EAAE,sBAAsB,GAAG,SAAS,MAAM,KAAK,OAAA,EAAO,CAAG;AAAA,QAC1F,oBAAC,eAAA,EAAc,MAAK,UAAS,OAAO,EAAE,uBAAuB,GAAG,SAAS,MAAM,KAAK,QAAA,EAAQ,CAAG;AAAA,QAC/F;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,EAAE,uBAAuB;AAAA,YAChC,SAAS,MAAM,KAAK,QAAQ,EAAE,SAAS,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAE7C,YAAY,oBAAC,eAAA,EAAc,MAAK,gBAAe,OAAO,EAAE,sBAAsB,GAAG,SAAS,SAAA,CAAU;AAAA,QACpG,UAAU,oBAAC,eAAA,EAAc,MAAK,QAAO,OAAO,EAAE,oBAAoB,GAAG,SAAS,QAAQ,UAAU,CAAC,QAAA,CAAS;AAAA,QAC1G,UAAU,oBAAC,eAAA,EAAc,MAAK,QAAO,OAAO,EAAE,oBAAoB,GAAG,SAAS,QAAQ,UAAU,CAAC,QAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjH;"}

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

@@ -0,0 +1,12 @@
+import { IFlowBlockDefinition, TFlowBlockCategory } from './flowTypes';
+export interface IFlowBlockRegistry {
+    list: Array<IFlowBlockDefinition>;
+    get: (type: string) => IFlowBlockDefinition | undefined;
+    byCategory: (category: TFlowBlockCategory) => Array<IFlowBlockDefinition>;
+}
+/**
+ * Erases the config type so blocks with different configs live in one registry. The
+ * canvas only hands each block the config it created, so the cast never crosses blocks.
+ */
+export declare const defineFlowBlock: <TConfig>(definition: IFlowBlockDefinition<TConfig>) => IFlowBlockDefinition;
+export declare const createFlowBlockRegistry: (definitions: Array<IFlowBlockDefinition>) => IFlowBlockRegistry;

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

@@ -0,0 +1,15 @@
+const defineFlowBlock = (definition) => definition;
+const createFlowBlockRegistry = (definitions) => {
+  const safeDefinitions = Array.isArray(definitions) ? definitions : [];
+  const byType = new Map(safeDefinitions.map((definition) => [definition.type, definition]));
+  return {
+    list: safeDefinitions,
+    get: (type) => byType.get(type),
+    byCategory: (category) => safeDefinitions.filter((definition) => definition.category === category)
+  };
+};
+export {
+  createFlowBlockRegistry,
+  defineFlowBlock
+};
+//# sourceMappingURL=flowBlockRegistry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flowBlockRegistry.js","sources":["../../../../src/components/UI/Flow/flowBlockRegistry.ts"],"sourcesContent":["import type { IFlowBlockDefinition, TFlowBlockCategory } from './flowTypes';\n\nexport interface IFlowBlockRegistry {\n  list: Array<IFlowBlockDefinition>;\n  get: (type: string) => IFlowBlockDefinition | undefined;\n  byCategory: (category: TFlowBlockCategory) => Array<IFlowBlockDefinition>;\n}\n\n/**\n * Erases the config type so blocks with different configs live in one registry. The\n * canvas only hands each block the config it created, so the cast never crosses blocks.\n */\nexport const defineFlowBlock = <TConfig>(definition: IFlowBlockDefinition<TConfig>): IFlowBlockDefinition =>\n  definition as unknown as IFlowBlockDefinition;\n\nexport const createFlowBlockRegistry = (definitions: Array<IFlowBlockDefinition>): IFlowBlockRegistry => {\n  const safeDefinitions = Array.isArray(definitions) ? definitions : [];\n  const byType = new Map(safeDefinitions.map((definition) => [definition.type, definition]));\n\n  return {\n    list: safeDefinitions,\n    get: (type) => byType.get(type),\n    byCategory: (category) => safeDefinitions.filter((definition) => definition.category === category),\n  };\n};\n"],"names":[],"mappings":"AAYO,MAAM,kBAAkB,CAAU,eACvC;AAEK,MAAM,0BAA0B,CAAC,gBAAiE;AACvG,QAAM,kBAAkB,MAAM,QAAQ,WAAW,IAAI,cAAc,CAAA;AACnE,QAAM,SAAS,IAAI,IAAI,gBAAgB,IAAI,CAAC,eAAe,CAAC,WAAW,MAAM,UAAU,CAAC,CAAC;AAEzF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK,CAAC,SAAS,OAAO,IAAI,IAAI;AAAA,IAC9B,YAAY,CAAC,aAAa,gBAAgB,OAAO,CAAC,eAAe,WAAW,aAAa,QAAQ;AAAA,EAAA;AAErG;"}

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

@@ -0,0 +1,2 @@
+/** The MIME type a palette item puts on the drag so the canvas knows which block was dropped. */
+export declare const FLOW_BLOCK_DRAG_TYPE = "application/x-umode-flow-block";

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

@@ -0,0 +1,5 @@
+const FLOW_BLOCK_DRAG_TYPE = "application/x-umode-flow-block";
+export {
+  FLOW_BLOCK_DRAG_TYPE
+};
+//# sourceMappingURL=flowConstants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flowConstants.js","sources":["../../../../src/components/UI/Flow/flowConstants.ts"],"sourcesContent":["/** The MIME type a palette item puts on the drag so the canvas knows which block was dropped. */\nexport const FLOW_BLOCK_DRAG_TYPE = 'application/x-umode-flow-block';\n"],"names":[],"mappings":"AACO,MAAM,uBAAuB;"}

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

@@ -0,0 +1,44 @@
+import { StoreApi } from 'zustand/vanilla';
+import { IFlowBlockRegistry } from './flowBlockRegistry';
+import { IFlowGraph, IFlowNode, IFlowPosition, TFlowPortId } from './flowTypes';
+export interface IFlowEditorState {
+    graph: IFlowGraph;
+    selectedNodeIds: Array<string>;
+    selectedEdgeIds: Array<string>;
+    past: Array<IFlowGraph>;
+    future: Array<IFlowGraph>;
+    clipboard: Array<IFlowNode>;
+    isDirty: boolean;
+    replaceGraph: (graph: IFlowGraph, options?: {
+        keepHistory?: boolean;
+    }) => void;
+    markClean: () => void;
+    /** Snapshot before a gesture that changes the graph in many small steps (a drag). */
+    recordHistory: () => void;
+    addNode: (type: string, position?: IFlowPosition) => string | null;
+    /** Adds a block right of `sourceNodeId` and wires `sourcePort` to it in one undo step. */
+    addNodeFromPort: (type: string, sourceNodeId: string, sourcePort: TFlowPortId) => string | null;
+    updateNodeConfig: (nodeId: string, config: unknown) => void;
+    updateNodeLabel: (nodeId: string, label: string) => void;
+    moveNodes: (positions: Record<string, IFlowPosition>) => void;
+    connect: (source: string, sourcePort: TFlowPortId, target: string) => boolean;
+    removeEdges: (edgeIds: Array<string>) => void;
+    removeSelected: () => void;
+    duplicateSelected: () => void;
+    copySelected: () => void;
+    paste: () => void;
+    setSelection: (selection: {
+        nodeIds?: Array<string>;
+        edgeIds?: Array<string>;
+    }) => void;
+    undo: () => void;
+    redo: () => void;
+    /** The host may rebuild its registry (labels after a language switch); gestures always read the latest. */
+    setRegistry: (registry: IFlowBlockRegistry) => void;
+}
+export type TFlowEditorStore = StoreApi<IFlowEditorState>;
+/**
+ * One store per editor instance (two canvases on a page never share state). The graph
+ * is the source of truth; the canvas only renders it and reports gestures back.
+ */
+export declare const createFlowEditorStore: (initialGraph: IFlowGraph, registry: IFlowBlockRegistry) => TFlowEditorStore;