@umodeapporg/ui 0.23.1 → 0.24.1

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

@@ -0,0 +1,74 @@
+import { ComponentType, ReactNode } from 'react';
+import { SymbolCodepoints } from '../MaterialSymbol';
+export type TFlowPortId = 'next' | 'true' | 'false' | 'error';
+export type TFlowBlockCategory = 'trigger' | 'condition' | 'action';
+export interface IFlowPosition {
+    x: number;
+    y: number;
+}
+export interface IFlowNode<TConfig = unknown> {
+    nodeId: string;
+    type: string;
+    typeVersion: number;
+    config: TConfig;
+    position: IFlowPosition;
+    label?: string;
+    disabled?: boolean;
+}
+export interface IFlowEdge {
+    edgeId: string;
+    source: string;
+    sourcePort: TFlowPortId;
+    target: string;
+}
+export interface IFlowGraph {
+    nodes: Array<IFlowNode>;
+    edges: Array<IFlowEdge>;
+}
+export type TFlowIssueSeverity = 'error' | 'warning';
+export type TFlowGraphIssueCode = 'missingTrigger' | 'multipleTriggers' | 'unknownBlock' | 'unreachableNode' | 'multipleInputs' | 'portFanOut' | 'cycle' | 'missingTrueBranch';
+export interface IFlowIssue {
+    /** A graph rule from `TFlowGraphIssueCode`, or a block-specific code from its `validate`. */
+    code: string;
+    severity: TFlowIssueSeverity;
+    /** Already translated by the block. Graph issues leave it empty and the UI names them. */
+    message?: string;
+    nodeId?: string;
+    edgeId?: string;
+}
+export type TFlowRunStepStatus = 'passed' | 'failed' | 'skipped' | 'wouldRun' | 'error' | 'blocked';
+/** The result of one run (real or simulated) painted over the canvas. */
+export interface IFlowRunOverlay {
+    steps: Record<string, TFlowRunStepStatus>;
+    traversedEdgeIds: Array<string>;
+}
+export interface IFlowBlockConfigPanelProps<TConfig> {
+    config: TConfig;
+    onChange: (next: TConfig) => void;
+    readOnly?: boolean;
+}
+export type TFlowBlockIssue = Omit<IFlowIssue, 'nodeId' | 'edgeId'>;
+export interface IFlowBlockDefinition<TConfig = unknown> {
+    /** Namespaced and stable: `trigger.recordEvent`, `action.moveWorkflowCard`. */
+    type: string;
+    typeVersion: number;
+    category: TFlowBlockCategory;
+    icon: SymbolCodepoints;
+    /** Translated by the host. */
+    label: string;
+    outputs: Array<TFlowPortId>;
+    /** Ports that depend on the config, e.g. an error path the user turns on inside the block. Defaults to `outputs`. */
+    resolveOutputs?: (config: TConfig) => Array<TFlowPortId>;
+    /** How many of this block a flow may hold; omit for no limit. */
+    maxInstances?: number;
+    /** `false` keeps the block on the canvas: Delete and the inspector skip it. Defaults to `true`. */
+    removable?: boolean;
+    createDefaultConfig: () => TConfig;
+    ConfigPanel: ComponentType<IFlowBlockConfigPanelProps<TConfig>>;
+    /** When one block stands for several kinds (chosen inside it), the icon and name of the chosen kind. */
+    resolveIcon?: (config: TConfig) => SymbolCodepoints | undefined;
+    resolveLabel?: (config: TConfig) => string | undefined;
+    /** One line inside the block on the canvas. */
+    renderSummary: (config: TConfig) => ReactNode;
+    validate: (config: TConfig) => Array<TFlowBlockIssue>;
+}

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

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=flowTypes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flowTypes.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,12 @@
+export { createFlowBlockRegistry, defineFlowBlock, flowOutputsOf, type IFlowBlockRegistry } from './flowBlockRegistry';
+export { default as FlowCanvas, type IFlowCanvasProps } from './FlowCanvas';
+export { default as FlowEditorProvider, useFlowBlockRegistry, useFlowEditor, useFlowEditorStore, } from './FlowEditorProvider';
+export { createFlowEditorStore, type IFlowEditorState, type TFlowEditorStore } from './flowEditorStore';
+export { canConnect, findCycle, FLOW_LEVEL_GAP, FLOW_SIBLING_GAP, hasBlockingIssues, isFlowNodeRemovable, layoutFlowByLevels, reachableFrom, triggerNodesOf, validateFlowGraph, } from './flowGraph';
+export { default as FlowInspector } from './FlowInspector';
+export { default as FlowIssueList } from './FlowIssueList';
+export { default as FlowLaneMap, type IFlowArc, type IFlowLane, type TFlowArcTone } from './FlowLaneMap';
+export { default as FlowNodeShell, type IFlowNodeShellProps } from './FlowNodeShell';
+export { default as FlowResizablePanel, type IFlowResizablePanelProps } from './FlowResizablePanel';
+export type * from './flowTypes';
+export { FLOW_RUN_STATUS_TONE, useFlowLabels } from './useFlowLabels';

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

@@ -0,0 +1,40 @@
+import { createFlowBlockRegistry, defineFlowBlock, flowOutputsOf } from "./flowBlockRegistry.js";
+import { default as default2 } from "./FlowCanvas.js";
+import { default as default3, useFlowBlockRegistry, useFlowEditor, useFlowEditorStore } from "./FlowEditorProvider.js";
+import { createFlowEditorStore } from "./flowEditorStore.js";
+import { FLOW_LEVEL_GAP, FLOW_SIBLING_GAP, canConnect, findCycle, hasBlockingIssues, isFlowNodeRemovable, layoutFlowByLevels, reachableFrom, triggerNodesOf, validateFlowGraph } from "./flowGraph.js";
+import { default as default4 } from "./FlowInspector.js";
+import { default as default5 } from "./FlowIssueList.js";
+import { default as default6 } from "./FlowLaneMap.js";
+import { default as default7 } from "./FlowNodeShell.js";
+import { default as default8 } from "./FlowResizablePanel.js";
+import { FLOW_RUN_STATUS_TONE, useFlowLabels } from "./useFlowLabels.js";
+export {
+  FLOW_LEVEL_GAP,
+  FLOW_RUN_STATUS_TONE,
+  FLOW_SIBLING_GAP,
+  default2 as FlowCanvas,
+  default3 as FlowEditorProvider,
+  default4 as FlowInspector,
+  default5 as FlowIssueList,
+  default6 as FlowLaneMap,
+  default7 as FlowNodeShell,
+  default8 as FlowResizablePanel,
+  canConnect,
+  createFlowBlockRegistry,
+  createFlowEditorStore,
+  defineFlowBlock,
+  findCycle,
+  flowOutputsOf,
+  hasBlockingIssues,
+  isFlowNodeRemovable,
+  layoutFlowByLevels,
+  reachableFrom,
+  triggerNodesOf,
+  useFlowBlockRegistry,
+  useFlowEditor,
+  useFlowEditorStore,
+  useFlowLabels,
+  validateFlowGraph
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

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

@@ -0,0 +1,10 @@
+import { TChipTone } from '../Chips/chipTones';
+import { IFlowIssue, TFlowBlockCategory, TFlowPortId, TFlowRunStepStatus } from './flowTypes';
+export declare const FLOW_RUN_STATUS_TONE: Record<TFlowRunStepStatus, TChipTone>;
+/** Every label the flow UI shows, spelled as literal keys so the translation tooling can read them. */
+export declare const useFlowLabels: () => {
+    ports: Record<TFlowPortId, string>;
+    categories: Record<TFlowBlockCategory, string>;
+    runStatus: Record<TFlowRunStepStatus, string>;
+    issueMessage: (issue: IFlowIssue) => string;
+};

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

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+const FLOW_RUN_STATUS_TONE = {
+  passed: "success",
+  wouldRun: "info",
+  skipped: "neutral",
+  blocked: "warning",
+  failed: "danger",
+  error: "danger"
+};
+const useFlowLabels = () => {
+  const { t } = useTranslation("ui");
+  return useMemo(() => {
+    const ports = {
+      next: t("flow.ports.next"),
+      true: t("flow.ports.true"),
+      false: t("flow.ports.false"),
+      error: t("flow.ports.error")
+    };
+    const categories = {
+      trigger: t("flow.categories.trigger"),
+      condition: t("flow.categories.condition"),
+      action: t("flow.categories.action")
+    };
+    const runStatus = {
+      passed: t("flow.run.passed"),
+      failed: t("flow.run.failed"),
+      skipped: t("flow.run.skipped"),
+      wouldRun: t("flow.run.wouldRun"),
+      error: t("flow.run.error"),
+      blocked: t("flow.run.blocked")
+    };
+    const graphIssues = {
+      missingTrigger: t("flow.issues.missingTrigger"),
+      multipleTriggers: t("flow.issues.multipleTriggers"),
+      unknownBlock: t("flow.issues.unknownBlock"),
+      unreachableNode: t("flow.issues.unreachableNode"),
+      multipleInputs: t("flow.issues.multipleInputs"),
+      portFanOut: t("flow.issues.portFanOut"),
+      cycle: t("flow.issues.cycle"),
+      missingTrueBranch: t("flow.issues.missingTrueBranch")
+    };
+    const issueMessage = (issue) => issue.message ?? graphIssues[issue.code] ?? issue.code;
+    return { ports, categories, runStatus, issueMessage };
+  }, [t]);
+};
+export {
+  FLOW_RUN_STATUS_TONE,
+  useFlowLabels
+};
+//# sourceMappingURL=useFlowLabels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowLabels.js","sources":["../../../../src/components/UI/Flow/useFlowLabels.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { TChipTone } from '@/components/UI/Chips/chipTones';\n\nimport type { IFlowIssue, TFlowBlockCategory, TFlowGraphIssueCode, TFlowPortId, TFlowRunStepStatus } from './flowTypes';\n\nexport const FLOW_RUN_STATUS_TONE: Record<TFlowRunStepStatus, TChipTone> = {\n  passed: 'success',\n  wouldRun: 'info',\n  skipped: 'neutral',\n  blocked: 'warning',\n  failed: 'danger',\n  error: 'danger',\n};\n\n/** Every label the flow UI shows, spelled as literal keys so the translation tooling can read them. */\nexport const useFlowLabels = () => {\n  const { t } = useTranslation('ui');\n\n  return useMemo(() => {\n    const ports: Record<TFlowPortId, string> = {\n      next: t('flow.ports.next'),\n      true: t('flow.ports.true'),\n      false: t('flow.ports.false'),\n      error: t('flow.ports.error'),\n    };\n    const categories: Record<TFlowBlockCategory, string> = {\n      trigger: t('flow.categories.trigger'),\n      condition: t('flow.categories.condition'),\n      action: t('flow.categories.action'),\n    };\n    const runStatus: Record<TFlowRunStepStatus, string> = {\n      passed: t('flow.run.passed'),\n      failed: t('flow.run.failed'),\n      skipped: t('flow.run.skipped'),\n      wouldRun: t('flow.run.wouldRun'),\n      error: t('flow.run.error'),\n      blocked: t('flow.run.blocked'),\n    };\n    const graphIssues: Record<TFlowGraphIssueCode, string> = {\n      missingTrigger: t('flow.issues.missingTrigger'),\n      multipleTriggers: t('flow.issues.multipleTriggers'),\n      unknownBlock: t('flow.issues.unknownBlock'),\n      unreachableNode: t('flow.issues.unreachableNode'),\n      multipleInputs: t('flow.issues.multipleInputs'),\n      portFanOut: t('flow.issues.portFanOut'),\n      cycle: t('flow.issues.cycle'),\n      missingTrueBranch: t('flow.issues.missingTrueBranch'),\n    };\n    const issueMessage = (issue: IFlowIssue): string =>\n      issue.message ?? graphIssues[issue.code as TFlowGraphIssueCode] ?? issue.code;\n\n    return { ports, categories, runStatus, issueMessage };\n  }, [t]);\n};\n"],"names":[],"mappings":";;AAOO,MAAM,uBAA8D;AAAA,EACzE,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AACT;AAGO,MAAM,gBAAgB,MAAM;AACjC,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SAAO,QAAQ,MAAM;AACnB,UAAM,QAAqC;AAAA,MACzC,MAAM,EAAE,iBAAiB;AAAA,MACzB,MAAM,EAAE,iBAAiB;AAAA,MACzB,OAAO,EAAE,kBAAkB;AAAA,MAC3B,OAAO,EAAE,kBAAkB;AAAA,IAAA;AAE7B,UAAM,aAAiD;AAAA,MACrD,SAAS,EAAE,yBAAyB;AAAA,MACpC,WAAW,EAAE,2BAA2B;AAAA,MACxC,QAAQ,EAAE,wBAAwB;AAAA,IAAA;AAEpC,UAAM,YAAgD;AAAA,MACpD,QAAQ,EAAE,iBAAiB;AAAA,MAC3B,QAAQ,EAAE,iBAAiB;AAAA,MAC3B,SAAS,EAAE,kBAAkB;AAAA,MAC7B,UAAU,EAAE,mBAAmB;AAAA,MAC/B,OAAO,EAAE,gBAAgB;AAAA,MACzB,SAAS,EAAE,kBAAkB;AAAA,IAAA;AAE/B,UAAM,cAAmD;AAAA,MACvD,gBAAgB,EAAE,4BAA4B;AAAA,MAC9C,kBAAkB,EAAE,8BAA8B;AAAA,MAClD,cAAc,EAAE,0BAA0B;AAAA,MAC1C,iBAAiB,EAAE,6BAA6B;AAAA,MAChD,gBAAgB,EAAE,4BAA4B;AAAA,MAC9C,YAAY,EAAE,wBAAwB;AAAA,MACtC,OAAO,EAAE,mBAAmB;AAAA,MAC5B,mBAAmB,EAAE,+BAA+B;AAAA,IAAA;AAEtD,UAAM,eAAe,CAAC,UACpB,MAAM,WAAW,YAAY,MAAM,IAA2B,KAAK,MAAM;AAE3E,WAAO,EAAE,OAAO,YAAY,WAAW,aAAA;AAAA,EACzC,GAAG,CAAC,CAAC,CAAC;AACR;"}

package/dist/locales/en/ui.json.d.ts

@@ -216,6 +216,70 @@ declare const _default: {
     "keepEditing": "Keep editing",
     "discard": "Discard"
   },
+  "flow": {
+    "canvas": "Flow editor",
+    "resizePanel": "Drag to adjust the width. Double click resets",
+    "ports": {
+      "next": "Next",
+      "true": "Yes",
+      "false": "No",
+      "error": "Error"
+    },
+    "categories": {
+      "trigger": "Triggers",
+      "condition": "Conditions",
+      "action": "Actions"
+    },
+    "inspector": {
+      "title": "Block settings",
+      "empty": "Select a block to configure it",
+      "label": "Block name",
+      "delete": "Delete block",
+      "duplicate": "Duplicate block",
+      "unknownBlock": "This block type no longer exists",
+      "close": "Close"
+    },
+    "issues": {
+      "title": "Issues",
+      "none": "No issues",
+      "missingTrigger": "The flow needs a trigger",
+      "multipleTriggers": "A flow can have only one trigger",
+      "unknownBlock": "Block of a type that no longer exists",
+      "unreachableNode": "Loose block: no path from the trigger reaches it",
+      "multipleInputs": "Block with more than one input",
+      "portFanOut": "An output can connect to one block only",
+      "cycle": "The blocks form a cycle",
+      "missingTrueBranch": "The condition has no yes path"
+    },
+    "run": {
+      "passed": "Passed",
+      "failed": "Did not pass",
+      "skipped": "Skipped",
+      "wouldRun": "Would run",
+      "error": "Error",
+      "blocked": "Blocked"
+    },
+    "controls": {
+      "zoomIn": "Zoom in",
+      "zoomOut": "Zoom out",
+      "fitView": "Fit view",
+      "undo": "Undo",
+      "redo": "Redo",
+      "layout": "Arrange blocks"
+    },
+    "edge": {
+      "insertBlock": "Insert a block here"
+    },
+    "node": {
+      "disabled": "Disabled",
+      "addBlock": "Add the next block",
+      "issueCount_one": "{{count}} issue",
+      "issueCount_other": "{{count}} issues"
+    },
+    "laneMap": {
+      "label": "Flow map"
+    }
+  },
   "followUp": {
     "messages": "Messages",
     "chat": {

package/dist/locales/en/ui.json.js

@@ -12,6 +12,7 @@ const detailsTable = { "size": "Size", "quantity": "Qty" };
 const errorPage = { "message": "This screen could not load", "headline": "Something unexpected happened while building the page. Refreshing usually fixes it. If it happens again, contact support and tell them what you were doing.", "backToStart": "Back to start" };
 const filters = { "activeFilters": "Applied filters", "appliedCount_one": "{{count}} filter applied", "appliedCount_other": "{{count}} filters applied", "clearAll": "Clear all", "noFields": "No filters available for this list.", "noOptions": "No options found.", "optionsError": "Could not load the options for {{field}}.", "rangeMax": "Maximum", "rangeMin": "Minimum", "rangeSeparator": "to", "searchOptions": "Search options" };
 const filtersDrawer = { "selectedFilters": "Selected filters:", "pendingChanges": "Pending changes", "discardChangesTitle": "Discard changes?", "discardChangesMessage": "You have unapplied filter changes. Discard them?", "keepEditing": "Keep editing", "discard": "Discard" };
+const flow = { "canvas": "Flow editor", "resizePanel": "Drag to adjust the width. Double click resets", "ports": { "next": "Next", "true": "Yes", "false": "No", "error": "Error" }, "categories": { "trigger": "Triggers", "condition": "Conditions", "action": "Actions" }, "inspector": { "title": "Block settings", "empty": "Select a block to configure it", "label": "Block name", "delete": "Delete block", "duplicate": "Duplicate block", "unknownBlock": "This block type no longer exists", "close": "Close" }, "issues": { "title": "Issues", "none": "No issues", "missingTrigger": "The flow needs a trigger", "multipleTriggers": "A flow can have only one trigger", "unknownBlock": "Block of a type that no longer exists", "unreachableNode": "Loose block: no path from the trigger reaches it", "multipleInputs": "Block with more than one input", "portFanOut": "An output can connect to one block only", "cycle": "The blocks form a cycle", "missingTrueBranch": "The condition has no yes path" }, "run": { "passed": "Passed", "failed": "Did not pass", "skipped": "Skipped", "wouldRun": "Would run", "error": "Error", "blocked": "Blocked" }, "controls": { "zoomIn": "Zoom in", "zoomOut": "Zoom out", "fitView": "Fit view", "undo": "Undo", "redo": "Redo", "layout": "Arrange blocks" }, "edge": { "insertBlock": "Insert a block here" }, "node": { "disabled": "Disabled", "addBlock": "Add the next block", "issueCount_one": "{{count}} issue", "issueCount_other": "{{count}} issues" }, "laneMap": { "label": "Flow map" } };
 const followUp = { "messages": "Messages", "chat": { "loadingMessages": "Loading messages", "placeholder": "Write a message...", "invalidMessage": "Please enter a valid message", "noMessagesYet": "No messages yet", "startConversation": "Start a conversation by adding the first message", "loadError": "Messages could not be loaded", "sendFailed": "The message could not be sent. Try again.", "sendFailedInline": "Failed to send", "resend": "Resend", "discard": "Discard", "today": "Today", "yesterday": "Yesterday", "typingOne": "{{name}} is typing...", "typingMany": "{{count}} people are typing...", "someone": "Someone", "you": "You", "newMessages": "New messages", "backToLatest": "Back to latest", "deletedMessage": "Message deleted", "edited": "edited", "readBy": "Read by {{names}}", "copied": "Message copied", "replyingTo": "Replying to {{name}}", "attachmentFallback": "Attachment", "editTitle": "Edit message", "deleteTitle": "Delete message?", "deleteSubtitle": "The message will be shown as deleted for every participant", "sendHint": "Enter sends, Shift+Enter adds a line break", "formatting": "Formatting" }, "actions": { "reply": "Reply", "copy": "Copy text", "edit": "Edit", "delete": "Delete" }, "attachments": { "attach": "Attach", "pickFile": "File", "pickImage": "Image", "takePhoto": "Take photo", "dropHere": "Drop files to attach", "tooMany": "Limit of {{max}} attachments per message", "tooLarge": "The file {{name}} exceeds the 50 MB limit", "uploadFailed": "Upload failed", "uploading": "Uploading attachments...", "imagePreview": "Preview image", "showTranscript": "Show transcript", "hideTranscript": "Hide transcript" }, "voice": { "record": "Record audio", "recording": "Recording", "stop": "Finish recording", "cancel": "Cancel recording", "rerecord": "Record again", "attach": "Add to message", "discard": "Discard", "transcriptLabel": "Transcript", "transcriptPlaceholder": "The speech transcript appears here and can be edited" }, "camera": { "title": "Take photo", "unavailable": "Camera unavailable", "unavailableHint": "Check the browser camera permission", "switch": "Switch camera", "capture": "Capture photo" }, "search": { "open": "Search in conversation", "placeholder": "Search messages", "noResults": "No messages found", "error": "Messages could not be searched" } };
 const generatedByAI = { "tooltip": "Generated by AI" };
 const imageAiAdjust = { "action": "Adjust with AI", "title": "Adjust image with AI", "subtitle": "Describe the adjustment. The AI changes only what you ask and preserves the rest of the image.", "original": "Original", "result": "Result", "resultHint": "Describe the adjustment and click Generate to see the result here.", "promptLabel": "Desired adjustment", "promptPlaceholder": "E.g. remove the background and make it white, smooth the sleeve creases, brighten the lighting", "generate": "Generate", "generating": "Generating the image...", "tryAgain": "Generate another", "useResult": "Use this image", "errorGenerate": "Could not adjust the image with AI", "errorSave": "Could not save the adjusted image", "errorRefused": "The AI could not make this adjustment: {{reason}}", "mask": { "start": "Mark the area", "stop": "Use the whole image", "hint": "Paint the area the AI may change. The rest of the image is kept." }, "verification": { "changedMoreThanRequested": "The AI changed more than requested. Check the areas outside the adjustment before using it.", "colorMismatch": "The garment color ({{dominant}}) differs from the requested color ({{target}})." } };
@@ -50,6 +51,7 @@ const en = {
   errorPage,
   filters,
   filtersDrawer,
+  flow,
   followUp,
   generatedByAI,
   imageAiAdjust,
@@ -90,6 +92,7 @@ export {
   errorPage,
   filters,
   filtersDrawer,
+  flow,
   followUp,
   generatedByAI,
   imageAiAdjust,

package/dist/locales/en/ui.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ui.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/locales/index.d.ts

@@ -218,6 +218,70 @@ export declare const uiLocales: {
             keepEditing: string;
             discard: string;
         };
+        flow: {
+            canvas: string;
+            resizePanel: string;
+            ports: {
+                next: string;
+                true: string;
+                false: string;
+                error: string;
+            };
+            categories: {
+                trigger: string;
+                condition: string;
+                action: string;
+            };
+            inspector: {
+                title: string;
+                empty: string;
+                label: string;
+                delete: string;
+                duplicate: string;
+                unknownBlock: string;
+                close: string;
+            };
+            issues: {
+                title: string;
+                none: string;
+                missingTrigger: string;
+                multipleTriggers: string;
+                unknownBlock: string;
+                unreachableNode: string;
+                multipleInputs: string;
+                portFanOut: string;
+                cycle: string;
+                missingTrueBranch: string;
+            };
+            run: {
+                passed: string;
+                failed: string;
+                skipped: string;
+                wouldRun: string;
+                error: string;
+                blocked: string;
+            };
+            controls: {
+                zoomIn: string;
+                zoomOut: string;
+                fitView: string;
+                undo: string;
+                redo: string;
+                layout: string;
+            };
+            edge: {
+                insertBlock: string;
+            };
+            node: {
+                disabled: string;
+                addBlock: string;
+                issueCount_one: string;
+                issueCount_other: string;
+            };
+            laneMap: {
+                label: string;
+            };
+        };
         followUp: {
             messages: string;
             chat: {
@@ -772,6 +836,70 @@ export declare const uiLocales: {
             keepEditing: string;
             discard: string;
         };
+        flow: {
+            canvas: string;
+            resizePanel: string;
+            ports: {
+                next: string;
+                true: string;
+                false: string;
+                error: string;
+            };
+            categories: {
+                trigger: string;
+                condition: string;
+                action: string;
+            };
+            inspector: {
+                title: string;
+                empty: string;
+                label: string;
+                delete: string;
+                duplicate: string;
+                unknownBlock: string;
+                close: string;
+            };
+            issues: {
+                title: string;
+                none: string;
+                missingTrigger: string;
+                multipleTriggers: string;
+                unknownBlock: string;
+                unreachableNode: string;
+                multipleInputs: string;
+                portFanOut: string;
+                cycle: string;
+                missingTrueBranch: string;
+            };
+            run: {
+                passed: string;
+                failed: string;
+                skipped: string;
+                wouldRun: string;
+                error: string;
+                blocked: string;
+            };
+            controls: {
+                zoomIn: string;
+                zoomOut: string;
+                fitView: string;
+                undo: string;
+                redo: string;
+                layout: string;
+            };
+            edge: {
+                insertBlock: string;
+            };
+            node: {
+                disabled: string;
+                addBlock: string;
+                issueCount_one: string;
+                issueCount_other: string;
+            };
+            laneMap: {
+                label: string;
+            };
+        };
         followUp: {
             messages: string;
             chat: {

package/dist/locales/pt/ui.json.d.ts

@@ -216,6 +216,70 @@ declare const _default: {
     "keepEditing": "Continuar editando",
     "discard": "Descartar"
   },
+  "flow": {
+    "canvas": "Editor de fluxo",
+    "resizePanel": "Arraste para ajustar a largura. Clique duplo restaura",
+    "ports": {
+      "next": "Próximo",
+      "true": "Sim",
+      "false": "Não",
+      "error": "Erro"
+    },
+    "categories": {
+      "trigger": "Gatilhos",
+      "condition": "Condições",
+      "action": "Ações"
+    },
+    "inspector": {
+      "title": "Configuração do bloco",
+      "empty": "Selecione um bloco para configurar",
+      "label": "Nome do bloco",
+      "delete": "Excluir bloco",
+      "duplicate": "Duplicar bloco",
+      "unknownBlock": "Este tipo de bloco não existe mais",
+      "close": "Fechar"
+    },
+    "issues": {
+      "title": "Pendências",
+      "none": "Nenhuma pendência",
+      "missingTrigger": "O fluxo precisa de um gatilho",
+      "multipleTriggers": "O fluxo só pode ter um gatilho",
+      "unknownBlock": "Bloco de um tipo que não existe mais",
+      "unreachableNode": "Bloco solto: nenhum caminho do gatilho chega até ele",
+      "multipleInputs": "Bloco com mais de uma entrada",
+      "portFanOut": "Uma saída só pode ligar a um bloco",
+      "cycle": "Os blocos formam um ciclo",
+      "missingTrueBranch": "A condição não tem o caminho do sim"
+    },
+    "run": {
+      "passed": "Passou",
+      "failed": "Não passou",
+      "skipped": "Pulado",
+      "wouldRun": "Executaria",
+      "error": "Erro",
+      "blocked": "Bloqueado"
+    },
+    "controls": {
+      "zoomIn": "Aproximar",
+      "zoomOut": "Afastar",
+      "fitView": "Enquadrar",
+      "undo": "Desfazer",
+      "redo": "Refazer",
+      "layout": "Organizar blocos"
+    },
+    "edge": {
+      "insertBlock": "Inserir um bloco aqui"
+    },
+    "node": {
+      "disabled": "Desativado",
+      "addBlock": "Adicionar o próximo bloco",
+      "issueCount_one": "{{count}} pendência",
+      "issueCount_other": "{{count}} pendências"
+    },
+    "laneMap": {
+      "label": "Mapa do fluxo"
+    }
+  },
   "followUp": {
     "messages": "Mensagens",
     "chat": {

package/dist/locales/pt/ui.json.js

@@ -12,6 +12,7 @@ const detailsTable = { "size": "Tam", "quantity": "Qtd" };
 const errorPage = { "message": "Esta tela não conseguiu carregar", "headline": "Algo inesperado aconteceu ao montar a página. Atualizar costuma resolver. Se acontecer de novo, fale com o suporte contando o que você estava fazendo.", "backToStart": "Voltar para o início" };
 const filters = { "activeFilters": "Filtros aplicados", "appliedCount_one": "{{count}} filtro aplicado", "appliedCount_other": "{{count}} filtros aplicados", "clearAll": "Limpar tudo", "noFields": "Nenhum filtro disponível para esta listagem.", "noOptions": "Nenhuma opção encontrada.", "optionsError": "Não foi possível carregar as opções de {{field}}.", "rangeMax": "Máximo", "rangeMin": "Mínimo", "rangeSeparator": "até", "searchOptions": "Buscar opções" };
 const filtersDrawer = { "selectedFilters": "Filtros Selecionados:", "pendingChanges": "Alterações pendentes", "discardChangesTitle": "Descartar alterações?", "discardChangesMessage": "Você tem alterações de filtro não aplicadas. Deseja descartá-las?", "keepEditing": "Continuar editando", "discard": "Descartar" };
+const flow = { "canvas": "Editor de fluxo", "resizePanel": "Arraste para ajustar a largura. Clique duplo restaura", "ports": { "next": "Próximo", "true": "Sim", "false": "Não", "error": "Erro" }, "categories": { "trigger": "Gatilhos", "condition": "Condições", "action": "Ações" }, "inspector": { "title": "Configuração do bloco", "empty": "Selecione um bloco para configurar", "label": "Nome do bloco", "delete": "Excluir bloco", "duplicate": "Duplicar bloco", "unknownBlock": "Este tipo de bloco não existe mais", "close": "Fechar" }, "issues": { "title": "Pendências", "none": "Nenhuma pendência", "missingTrigger": "O fluxo precisa de um gatilho", "multipleTriggers": "O fluxo só pode ter um gatilho", "unknownBlock": "Bloco de um tipo que não existe mais", "unreachableNode": "Bloco solto: nenhum caminho do gatilho chega até ele", "multipleInputs": "Bloco com mais de uma entrada", "portFanOut": "Uma saída só pode ligar a um bloco", "cycle": "Os blocos formam um ciclo", "missingTrueBranch": "A condição não tem o caminho do sim" }, "run": { "passed": "Passou", "failed": "Não passou", "skipped": "Pulado", "wouldRun": "Executaria", "error": "Erro", "blocked": "Bloqueado" }, "controls": { "zoomIn": "Aproximar", "zoomOut": "Afastar", "fitView": "Enquadrar", "undo": "Desfazer", "redo": "Refazer", "layout": "Organizar blocos" }, "edge": { "insertBlock": "Inserir um bloco aqui" }, "node": { "disabled": "Desativado", "addBlock": "Adicionar o próximo bloco", "issueCount_one": "{{count}} pendência", "issueCount_other": "{{count}} pendências" }, "laneMap": { "label": "Mapa do fluxo" } };
 const followUp = { "messages": "Mensagens", "chat": { "loadingMessages": "Carregando mensagens", "placeholder": "Escrever mensagem...", "invalidMessage": "Por favor, insira uma mensagem válida", "noMessagesYet": "Nenhuma mensagem por enquanto", "startConversation": "Inicie uma conversa adicionando a primeira mensagem", "loadError": "Não foi possível carregar as mensagens", "sendFailed": "Não foi possível enviar a mensagem. Tente novamente.", "sendFailedInline": "Falha no envio", "resend": "Reenviar", "discard": "Descartar", "today": "Hoje", "yesterday": "Ontem", "typingOne": "{{name}} está digitando...", "typingMany": "{{count}} pessoas estão digitando...", "someone": "Alguém", "you": "Você", "newMessages": "Novas mensagens", "backToLatest": "Voltar para as recentes", "deletedMessage": "Mensagem apagada", "edited": "editada", "readBy": "Lida por {{names}}", "copied": "Mensagem copiada", "replyingTo": "Respondendo a {{name}}", "attachmentFallback": "Anexo", "editTitle": "Editar mensagem", "deleteTitle": "Apagar mensagem?", "deleteSubtitle": "A mensagem será marcada como apagada para todos os participantes", "sendHint": "Enter envia, Shift+Enter quebra a linha", "formatting": "Formatação" }, "actions": { "reply": "Responder", "copy": "Copiar texto", "edit": "Editar", "delete": "Apagar" }, "attachments": { "attach": "Anexar", "pickFile": "Arquivo", "pickImage": "Imagem", "takePhoto": "Tirar foto", "dropHere": "Solte os arquivos para anexar", "tooMany": "Limite de {{max}} anexos por mensagem", "tooLarge": "O arquivo {{name}} passa do limite de 50 MB", "uploadFailed": "Falha no upload", "uploading": "Enviando anexos...", "imagePreview": "Visualizar imagem", "showTranscript": "Ver transcrição", "hideTranscript": "Ocultar transcrição" }, "voice": { "record": "Gravar áudio", "recording": "Gravando", "stop": "Concluir gravação", "cancel": "Cancelar gravação", "rerecord": "Regravar", "attach": "Adicionar ao envio", "discard": "Descartar", "transcriptLabel": "Transcrição", "transcriptPlaceholder": "A transcrição da fala aparece aqui e pode ser editada" }, "camera": { "title": "Tirar foto", "unavailable": "Câmera indisponível", "unavailableHint": "Verifique a permissão de câmera do navegador", "switch": "Alternar câmera", "capture": "Capturar foto" }, "search": { "open": "Buscar na conversa", "placeholder": "Buscar mensagens", "noResults": "Nenhuma mensagem encontrada", "error": "Não foi possível buscar as mensagens" } };
 const generatedByAI = { "tooltip": "Gerado por IA" };
 const imageAiAdjust = { "action": "Ajustar com IA", "title": "Ajustar imagem com IA", "subtitle": "Descreva o ajuste. A IA altera só o que você pedir e preserva o resto da imagem.", "original": "Original", "result": "Resultado", "resultHint": "Descreva o ajuste e clique em Gerar para ver o resultado aqui.", "promptLabel": "Ajuste desejado", "promptPlaceholder": "Ex.: remover o fundo e deixar branco, tirar os vincos da manga, clarear a iluminação", "generate": "Gerar", "generating": "Gerando a imagem...", "tryAgain": "Gerar outra", "useResult": "Usar esta imagem", "errorGenerate": "Não foi possível ajustar a imagem com IA", "errorSave": "Não foi possível salvar a imagem ajustada", "errorRefused": "A IA não conseguiu fazer este ajuste: {{reason}}", "mask": { "start": "Marcar a área", "stop": "Usar a imagem toda", "hint": "Pinte a área que a IA pode alterar. O resto da imagem é mantido." }, "verification": { "changedMoreThanRequested": "A IA mudou mais do que o pedido. Confira as áreas fora do ajuste antes de usar.", "colorMismatch": "A cor da peça ({{dominant}}) ficou diferente da cor pedida ({{target}})." } };
@@ -50,6 +51,7 @@ const pt = {
   errorPage,
   filters,
   filtersDrawer,
+  flow,
   followUp,
   generatedByAI,
   imageAiAdjust,
@@ -90,6 +92,7 @@ export {
   errorPage,
   filters,
   filtersDrawer,
+  flow,
   followUp,
   generatedByAI,
   imageAiAdjust,

package/dist/locales/pt/ui.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ui.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umodeapporg/ui",
-  "version": "0.23.1",
+  "version": "0.24.1",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [
@@ -50,6 +50,10 @@
       "types": "./dist/components/UI/DataTable/index.d.ts",
       "import": "./dist/components/UI/DataTable/index.js"
     },
+    "./components/UI/Flow": {
+      "types": "./dist/components/UI/Flow/index.d.ts",
+      "import": "./dist/components/UI/Flow/index.js"
+    },
     "./components/UI/ImageMaskPainter": {
       "types": "./dist/components/UI/ImageMaskPainter/index.d.ts",
       "import": "./dist/components/UI/ImageMaskPainter/index.js"
@@ -105,6 +109,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@tanstack/react-table": "^8.21.3",
+    "@xyflow/react": "^12.11.2",
     "apexcharts": ">=3.52.0 <4",
     "date-fns": "^4.0.0",
     "i18next": ">=23",
@@ -137,6 +142,9 @@
     "@tanstack/react-table": {
       "optional": true
     },
+    "@xyflow/react": {
+      "optional": true
+    },
     "apexcharts": {
       "optional": true
     },
@@ -193,6 +201,7 @@
     "@typescript-eslint/eslint-plugin": "^8.42.0",
     "@typescript-eslint/parser": "^8.42.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "@xyflow/react": "^12.12.0",
     "apexcharts": "3.52.0",
     "autoprefixer": "^10.4.19",
     "conventional-changelog-conventionalcommits": "^8.0.0",