@omega-flow/editor 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,875 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { ReactNode, ComponentType } from 'react';
+import * as _omega_flow_types from '@omega-flow/types';
+import { Node, Workflow, WorkflowOptions, Edge, Conditions } from '@omega-flow/types';
+import * as _xyflow_react from '@xyflow/react';
+import { NodeProps, NodeTypes } from '@xyflow/react';
+
+/**
+ * Translation function signature.
+ *
+ * Accepts a dot-separated key and optional interpolation parameters.
+ * Returns the translated string, or the key itself as fallback.
+ *
+ * @example
+ * ```ts
+ * const t: TranslationFunction = (key, params) => {
+ *   const template = translations[key] ?? key;
+ *   if (!params) return template;
+ *   return template.replace(/\{\{(\w+)\}\}/g, (_, k) => String(params[k] ?? `{{${k}}}`));
+ * };
+ *
+ * t("nodes.trigger.label"); // "Trigger"
+ * t("nodes.condition.ruleCount", { count: "3" }); // "3 rules"
+ * ```
+ */
+type TranslationFunction = (key: string, params?: Record<string, string>) => string;
+/**
+ * Flat dictionary mapping dot-separated keys to translation strings.
+ *
+ * Supports `{{param}}` interpolation placeholders.
+ *
+ * @example
+ * ```ts
+ * const translations: TranslationDictionary = {
+ *   "panels.control.title": "Workflow",
+ *   "nodes.condition.ruleCount": "{{count}} rules",
+ * };
+ * ```
+ */
+type TranslationDictionary = Record<string, string>;
+
+/**
+ * Definition for a handle (connection point) on a node
+ */
+interface HandleDefinition {
+    id: string;
+    label?: string;
+}
+/**
+ * Props passed to node view components (rendered on canvas)
+ * This extends ReactFlow's NodeProps for full compatibility
+ */
+type NodeViewProps = NodeProps;
+/**
+ * Props passed to node detail components (rendered in detail panel)
+ */
+interface NodeDetailProps {
+    node: Node;
+    onChange: (data: Record<string, unknown>) => void;
+}
+/**
+ * Complete definition of a node type including visual components
+ */
+interface NodeTypeDefinition {
+    /** Node type identifier (e.g., "Trigger", "Action") */
+    type: string;
+    /** Display name shown in UI */
+    label: string;
+    /** Description/tooltip text */
+    description?: string;
+    /** Icon component to display in NodesPanel */
+    Icon?: ComponentType<{
+        size?: number;
+    }>;
+    /** Initial data when node is created */
+    defaultData: Record<string, unknown>;
+    /** Component to render on the canvas */
+    ViewComponent: ComponentType<NodeViewProps>;
+    /** Component to render in the detail panel */
+    DetailComponent: ComponentType<NodeDetailProps>;
+}
+/**
+ * State managed by the workflow editor context
+ */
+interface WorkflowEditorState {
+    /** The original workflow being edited (null if creating new) */
+    workflow: Workflow | null;
+    /** Current nodes in the flow */
+    nodes: Node[];
+    /** Current edges in the flow */
+    edges: Edge[];
+    /** Workflow options (frequency, etc.) */
+    options: WorkflowOptions;
+    /** Workflow name */
+    name: string;
+    /** Currently selected node ID */
+    selectedNodeId: string | null;
+    /** Whether there are unsaved changes */
+    isDirty: boolean;
+    /** Registered node types */
+    nodeTypes: Map<string, NodeTypeDefinition>;
+}
+/**
+ * Actions available in the workflow editor context
+ */
+interface WorkflowEditorActions {
+    /** Load a workflow into the editor */
+    loadWorkflow: (workflow: Workflow) => void;
+    /** Reset to initial state */
+    resetWorkflow: () => void;
+    /** Add a new node at position */
+    addNode: (type: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Update a node's data */
+    updateNode: (nodeId: string, data: Record<string, unknown>) => void;
+    /** Update a node's position */
+    updateNodePosition: (nodeId: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Remove a node */
+    removeNode: (nodeId: string) => void;
+    /** Select a node (or null to deselect) */
+    selectNode: (nodeId: string | null) => void;
+    /** Add a new edge */
+    addEdge: (connection: {
+        source: string;
+        target: string;
+        sourceHandle?: string;
+        targetHandle?: string;
+    }) => void;
+    /** Remove an edge */
+    removeEdge: (edgeId: string) => void;
+    /** Set workflow name */
+    setName: (name: string) => void;
+    /** Set workflow options */
+    setOptions: (options: WorkflowOptions) => void;
+    /** Register a custom node type */
+    registerNodeType: (definition: NodeTypeDefinition) => void;
+    /** Get the current workflow state */
+    getWorkflow: () => Workflow;
+    /** Mark the workflow as clean (saved) */
+    markClean: () => void;
+    /** Handle ReactFlow node changes */
+    onNodesChange: (changes: unknown[]) => void;
+    /** Handle ReactFlow edge changes */
+    onEdgesChange: (changes: unknown[]) => void;
+    /** Handle ReactFlow connections */
+    onConnect: (connection: unknown) => void;
+}
+/**
+ * Complete context value combining state and actions
+ */
+interface WorkflowEditorContextValue extends WorkflowEditorState, WorkflowEditorActions {
+}
+/**
+ * Props for the WorkflowEditor component
+ */
+interface WorkflowEditorProps {
+    children: ReactNode;
+    /** Initial workflow to load */
+    workflow?: Workflow;
+    /** Custom node types to register */
+    nodeTypes?: NodeTypeDefinition[];
+    /** Callback when workflow changes */
+    onWorkflowChange?: (workflow: Workflow) => void;
+    /** Callback when dirty state changes */
+    onDirtyChange?: (isDirty: boolean) => void;
+    /**
+     * Custom translation function that fully replaces the built-in resolver.
+     * Use this to plug in any i18n library (i18next, react-intl, etc.).
+     *
+     * ```tsx
+     * <WorkflowEditor translationFn={(key, params) => i18n.t(key, params)}>
+     * ```
+     *
+     * Takes precedence over `translations` if both are provided.
+     */
+    translationFn?: TranslationFunction;
+    /**
+     * Flat dictionary merged on top of default English strings.
+     * Use this for simple overrides or full translations without an external i18n library.
+     *
+     * ```tsx
+     * <WorkflowEditor translations={{ "panels.control.title": "Flujo" }}>
+     * ```
+     *
+     * Ignored when `translationFn` is provided.
+     */
+    translations?: TranslationDictionary;
+}
+/**
+ * Props for NodesPanel component
+ */
+interface NodesPanelProps {
+    className?: string;
+    /** Whether to show descriptions */
+    showDescriptions?: boolean;
+    /** Filter which node types to show */
+    filter?: (nodeType: NodeTypeDefinition) => boolean;
+    /** Custom render function for items */
+    renderItem?: (nodeType: NodeTypeDefinition) => ReactNode;
+}
+/**
+ * Props for DetailPanel component
+ */
+interface DetailPanelProps {
+    className?: string;
+    /** Message when no node is selected */
+    emptyMessage?: ReactNode;
+    /** Whether to show node type label */
+    showNodeType?: boolean;
+    /** Whether to show node ID */
+    showNodeId?: boolean;
+}
+/**
+ * Props for OptionsPanel component
+ */
+interface OptionsPanelProps {
+    className?: string;
+    /** Whether to show frequency options */
+    showFrequency?: boolean;
+    /** Custom options to render */
+    customOptions?: ReactNode;
+}
+/**
+ * Props for ControlPanel component
+ */
+interface ControlPanelProps {
+    className?: string;
+    /** Whether to show name input */
+    showName?: boolean;
+    /** Whether to show save button */
+    showSaveButton?: boolean;
+    /** Label for save button */
+    saveButtonLabel?: string;
+    /** Save callback */
+    onSave?: () => Promise<void>;
+    /** Custom actions to render */
+    renderActions?: (context: {
+        isDirty: boolean;
+        workflow: Workflow;
+    }) => ReactNode;
+}
+
+/**
+ * Main wrapper component for the workflow editor.
+ * Provides context, state management, and translation for all child components.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowEditor workflow={workflow} onWorkflowChange={handleChange}>
+ *   <ReactFlow nodes={nodes} edges={edges} ...>
+ *     <Panel position="top-left"><NodesPanel /></Panel>
+ *   </ReactFlow>
+ * </WorkflowEditor>
+ * ```
+ */
+declare function WorkflowEditor({ children, workflow, nodeTypes, onWorkflowChange, onDirtyChange, translationFn, translations, }: WorkflowEditorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Panel showing available node types that can be dragged onto the canvas.
+ */
+declare function NodesPanel({ className, showDescriptions, filter, renderItem, }: NodesPanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Panel for editing the properties of the selected node.
+ * Renders the appropriate DetailComponent based on node type.
+ */
+declare function DetailPanel({ className, emptyMessage, showNodeType, showNodeId, }: DetailPanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Panel for editing workflow options like frequency.
+ */
+declare function OptionsPanel({ className, showFrequency, customOptions, }: OptionsPanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Panel for editing workflow name and saving.
+ */
+declare function ControlPanel({ className, showName, showSaveButton, saveButtonLabel, onSave, renderActions, }: ControlPanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Provider component for workflow editor context
+ */
+declare function WorkflowEditorProvider({ children, workflow, nodeTypes, onWorkflowChange, onDirtyChange, }: WorkflowEditorProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the workflow editor context
+ * @throws Error if used outside of WorkflowEditorProvider
+ */
+declare function useWorkflowEditorContext(): WorkflowEditorContextValue;
+
+/**
+ * Main hook for accessing workflow editor state and actions.
+ * Provides a convenient interface to the most commonly used functionality.
+ */
+declare function useWorkflowEditor(): {
+    workflow: _omega_flow_types.Workflow;
+    nodes: _xyflow_react.Node[];
+    edges: _xyflow_react.Edge[];
+    options: _omega_flow_types.WorkflowOptions;
+    name: string;
+    isDirty: boolean;
+    selectedNode: _xyflow_react.Node | null;
+    selectedNodeId: string | null;
+    loadWorkflow: (workflow: _omega_flow_types.Workflow) => void;
+    resetWorkflow: () => void;
+    addNode: (type: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    updateNode: (nodeId: string, data: Record<string, unknown>) => void;
+    removeNode: (nodeId: string) => void;
+    selectNode: (nodeId: string | null) => void;
+    addEdge: (connection: {
+        source: string;
+        target: string;
+        sourceHandle?: string;
+        targetHandle?: string;
+    }) => void;
+    removeEdge: (edgeId: string) => void;
+    setName: (name: string) => void;
+    setOptions: (options: _omega_flow_types.WorkflowOptions) => void;
+    getWorkflow: () => _omega_flow_types.Workflow;
+    markClean: () => void;
+};
+
+/**
+ * Hook for working with nodes in the workflow.
+ * Returns nodes and handlers compatible with ReactFlow.
+ */
+declare function useNodes(): {
+    nodes: _xyflow_react.Node[];
+    onNodesChange: (changes: unknown[]) => void;
+    addNode: (type: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    updateNode: (nodeId: string, data: Record<string, unknown>) => void;
+    removeNode: (nodeId: string) => void;
+};
+
+/**
+ * Hook for working with edges in the workflow.
+ * Returns edges and handlers compatible with ReactFlow.
+ */
+declare function useEdges(): {
+    edges: _xyflow_react.Edge[];
+    onEdgesChange: (changes: unknown[]) => void;
+    onConnect: (connection: unknown) => void;
+    addEdge: (connection: {
+        source: string;
+        target: string;
+        sourceHandle?: string;
+        targetHandle?: string;
+    }) => void;
+    removeEdge: (edgeId: string) => void;
+};
+
+/**
+ * Hook for accessing the node type registry.
+ * Returns node types and ReactFlow-compatible nodeTypes object.
+ */
+declare function useNodeRegistry(): {
+    /** Map of node type definitions */
+    nodeTypes: Map<string, NodeTypeDefinition>;
+    /** Array of node type definitions */
+    nodeTypesList: NodeTypeDefinition[];
+    /** ReactFlow-compatible nodeTypes object */
+    reactFlowNodeTypes: NodeTypes;
+    /** Register a new node type */
+    registerNodeType: (definition: NodeTypeDefinition) => void;
+    /** Get a specific node type definition */
+    getNodeType: (type: string) => NodeTypeDefinition | undefined;
+};
+
+/**
+ * Hook for handling drag-and-drop from the nodes panel to the canvas.
+ * Provides event handlers for drag start, drag over, and drop events.
+ */
+declare function useDragAndDrop(): {
+    onDragStart: (event: React.DragEvent, nodeType: string) => void;
+    onDragOver: (event: React.DragEvent) => void;
+    onDrop: (event: React.DragEvent) => void;
+};
+
+/**
+ * Hook for working with the currently selected node.
+ */
+declare function useSelectedNode(): {
+    /** The currently selected node, or null if none */
+    selectedNode: _xyflow_react.Node | null;
+    /** The ID of the selected node */
+    selectedNodeId: string | null;
+    /** The node type definition for the selected node */
+    nodeType: NodeTypeDefinition | undefined;
+    /** Select a node by ID */
+    selectNode: (nodeId: string | null) => void;
+    /** Update the selected node's data */
+    updateSelectedNode: (data: Record<string, unknown>) => void;
+    /** Remove the selected node */
+    removeSelectedNode: () => void;
+};
+
+interface BaseNodeViewProps {
+    id: string;
+    data: Record<string, unknown>;
+    selected?: boolean;
+    label: string;
+    color?: string;
+    icon?: React$1.ReactNode;
+    sourceHandles?: HandleDefinition[];
+    targetHandles?: HandleDefinition[];
+    children?: React$1.ReactNode;
+}
+/**
+ * Base component for rendering nodes on the canvas.
+ * Provides consistent styling and handle rendering.
+ */
+declare function BaseNodeView({ label, color, icon, sourceHandles, targetHandles, selected, children, }: BaseNodeViewProps): react_jsx_runtime.JSX.Element;
+
+declare function TriggerNodeView({ id, data, selected }: NodeProps): react_jsx_runtime.JSX.Element;
+
+declare function ActionNodeView({ id, data, selected }: NodeProps): react_jsx_runtime.JSX.Element;
+
+declare function ConditionNodeView({ id, data, selected }: NodeProps): react_jsx_runtime.JSX.Element;
+
+declare function ExitNodeView({ id, data, selected }: NodeProps): react_jsx_runtime.JSX.Element;
+
+declare function WaitNodeView({ id, data, selected }: NodeProps): react_jsx_runtime.JSX.Element;
+
+declare function TriggerOrTimeoutNodeView({ id, data, selected }: NodeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Detail editor for Trigger nodes.
+ * Allows setting the event type that triggers this node.
+ */
+declare function TriggerNodeDetail({ node, onChange }: NodeDetailProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Detail editor for Action nodes.
+ * Allows setting the action name and parameters.
+ */
+declare function ActionNodeDetail({ node, onChange }: NodeDetailProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * UI-only types for the visual condition builder.
+ *
+ * The data shape (`Conditions`, `ConditionGroup`, `ConditionRule`) lives in
+ * `@omega-flow/types` and is shared with the engine — the editor and the
+ * engine speak the same format directly, with no conversion in between.
+ */
+
+/** A single condition property that users can select */
+interface ConditionProperty {
+    label: string;
+    value: string;
+    type?: "string" | "number" | "boolean";
+}
+/** A group of condition properties (rendered as optgroup in selects) */
+interface ConditionPropertyGroup {
+    label: string;
+    children: ConditionProperty[];
+}
+/** List of available properties — flat, grouped, or mixed */
+type ConditionProperties = Array<ConditionProperty | ConditionPropertyGroup>;
+/** Operator definition for the operator select */
+interface OperatorOption {
+    value: string;
+    label: string;
+}
+/** Props for the ConditionBuilder component */
+interface ConditionBuilderProps {
+    /** Current conditions in the unified format */
+    value: Conditions;
+    /** Called when conditions change */
+    onChange: (value: Conditions) => void;
+    /** Available properties for condition facts */
+    properties?: ConditionProperties;
+    /** Available operators (defaults to the built-in set) */
+    operators?: OperatorOption[];
+}
+/** Props for the ConditionBuilderDialog component */
+interface ConditionBuilderDialogProps extends ConditionBuilderProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Called to close the dialog */
+    onClose: () => void;
+}
+
+/**
+ * Visual condition builder for the unified Conditions format.
+ *
+ * Top level is always OR (between groups), each group inside can be AND or OR.
+ */
+declare function ConditionBuilder({ value, onChange, properties, operators, }: ConditionBuilderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Dialog wrapper for the ConditionBuilder.
+ * Opens as a modal overlay using React portal.
+ */
+declare function ConditionBuilderDialog({ open, onClose, value, onChange, properties, operators, }: ConditionBuilderDialogProps): React$1.ReactPortal | null;
+
+/** Default operators supported by the engine's built-in condition evaluator */
+declare const defaultOperators: OperatorOption[];
+
+interface ConditionNodeDetailProps extends NodeDetailProps {
+    /** Available properties for the condition builder fact selector */
+    conditionProperties?: ConditionProperties;
+    /** Custom operators for the condition builder (defaults to the built-in set) */
+    conditionOperators?: OperatorOption[];
+}
+/**
+ * Detail editor for Condition nodes.
+ * Opens a visual condition builder dialog.
+ */
+declare function ConditionNodeDetail({ node, onChange, conditionProperties, conditionOperators, }: ConditionNodeDetailProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Detail editor for Exit nodes.
+ * Exit nodes have no configurable properties.
+ */
+declare function ExitNodeDetail(_props: NodeDetailProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Detail editor for Wait nodes.
+ * Allows setting the wait duration.
+ */
+declare function WaitNodeDetail({ node, onChange }: NodeDetailProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Detail editor for TriggerOrTimeout nodes.
+ * Allows setting both the event type and timeout duration.
+ */
+declare function TriggerOrTimeoutNodeDetail({ node, onChange }: NodeDetailProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Default node type definitions for the workflow editor.
+ * These correspond to the node models in @omega-flow/engine.
+ */
+declare const defaultNodeTypes: NodeTypeDefinition[];
+/**
+ * Merges custom node type definitions into a base list, replacing any
+ * built-in entry that shares the same `type` key.
+ *
+ * Useful for combining {@link defaultNodeTypes} with custom nodes, or for
+ * overriding a built-in node's view/detail components without filtering
+ * the array yourself.
+ *
+ * @example
+ * ```ts
+ * import { defaultNodeTypes, mergeNodeTypes } from "@omega-flow/editor";
+ *
+ * const nodeTypes = mergeNodeTypes(defaultNodeTypes, [
+ *   storeTriggerNodeType,
+ *   { ...customTriggerNodeType, type: "Trigger" }, // overrides default
+ * ]);
+ * ```
+ */
+declare function mergeNodeTypes(base: NodeTypeDefinition[], overrides: NodeTypeDefinition[]): NodeTypeDefinition[];
+
+interface FieldProps {
+    label: string;
+    children: React$1.ReactNode;
+    error?: string;
+    hint?: string;
+}
+/**
+ * Base field wrapper component that provides label, error, and hint display.
+ * Use this to wrap custom inputs.
+ */
+declare function Field({ label, children, error, hint }: FieldProps): react_jsx_runtime.JSX.Element;
+
+interface TextFieldProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+}
+/**
+ * Text input field with label.
+ */
+declare function TextField({ label, value, onChange, placeholder, disabled, error, hint, }: TextFieldProps): react_jsx_runtime.JSX.Element;
+
+interface NumberFieldProps {
+    label: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+}
+/**
+ * Number input field with label.
+ */
+declare function NumberField({ label, value, onChange, min, max, step, disabled, error, hint, }: NumberFieldProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectFieldProps {
+    label: string;
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+}
+/**
+ * Select dropdown field with label.
+ */
+declare function SelectField({ label, value, options, onChange, placeholder, disabled, error, hint, }: SelectFieldProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxFieldProps {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}
+/**
+ * Checkbox field with label.
+ */
+declare function CheckboxField({ label, checked, onChange, disabled, }: CheckboxFieldProps): react_jsx_runtime.JSX.Element;
+
+interface TextAreaFieldProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    rows?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+}
+/**
+ * Multi-line text input field with label.
+ */
+declare function TextAreaField({ label, value, onChange, rows, placeholder, disabled, error, hint, }: TextAreaFieldProps): react_jsx_runtime.JSX.Element;
+
+interface DurationFieldProps {
+    label: string;
+    /** Value in milliseconds */
+    value: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+}
+/**
+ * Duration input field with separate inputs for days, hours, and minutes.
+ * Value is stored in milliseconds but displayed as composite parts.
+ */
+declare function DurationField({ label, value, onChange, disabled, error, hint, }: DurationFieldProps): react_jsx_runtime.JSX.Element;
+
+interface JsonFieldProps {
+    label: string;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    rows?: number;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+}
+/**
+ * JSON input field with validation.
+ * Displays JSON in a formatted textarea and validates on change.
+ */
+declare function JsonField({ label, value, onChange, rows, disabled, error: externalError, hint, }: JsonFieldProps): react_jsx_runtime.JSX.Element;
+
+interface FieldGroupProps {
+    label?: string;
+    children: React$1.ReactNode;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+}
+/**
+ * Groups related fields together with an optional label.
+ * Can be made collapsible for better organization.
+ */
+declare function FieldGroup({ label, children, collapsible, defaultCollapsed, }: FieldGroupProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * CSS Variable utilities for Omega Flow Editor theming
+ */
+/**
+ * Creates a CSS variable reference with optional fallback
+ */
+declare function cssVar(name: string, fallback?: string): string;
+/**
+ * Common style variable references with fallbacks
+ * Use these in component styles for consistent theming
+ */
+declare const themeVars: {
+    readonly color: {
+        readonly bgPrimary: "var(--of-color-bg-primary, #fff)";
+        readonly bgSecondary: "var(--of-color-bg-secondary, #F9FAFB)";
+        readonly bgTertiary: "var(--of-color-bg-tertiary, #F3F4F6)";
+        readonly bgDisabled: "var(--of-color-bg-disabled, #F3F4F6)";
+        readonly textPrimary: "var(--of-color-text-primary, #111827)";
+        readonly textSecondary: "var(--of-color-text-secondary, #374151)";
+        readonly textTertiary: "var(--of-color-text-tertiary, #6B7280)";
+        readonly textMuted: "var(--of-color-text-muted, #9CA3AF)";
+        readonly textInverse: "var(--of-color-text-inverse, #fff)";
+        readonly borderPrimary: "var(--of-color-border-primary, #D1D5DB)";
+        readonly borderSecondary: "var(--of-color-border-secondary, #E5E7EB)";
+        readonly borderFocus: "var(--of-color-border-focus, #3B82F6)";
+        readonly interactivePrimary: "var(--of-color-interactive-primary, #3B82F6)";
+        readonly interactivePrimaryHover: "var(--of-color-interactive-primary-hover, #2563EB)";
+        readonly interactivePrimaryDisabled: "var(--of-color-interactive-primary-disabled, #93C5FD)";
+        readonly statusSuccess: "var(--of-color-status-success, #059669)";
+        readonly statusError: "var(--of-color-status-error, #DC2626)";
+        readonly statusErrorBg: "var(--of-color-status-error-bg, #FEE2E2)";
+        readonly statusWarning: "var(--of-color-status-warning, #FF9800)";
+    };
+    readonly node: {
+        readonly trigger: "var(--of-node-trigger-color, #4CAF50)";
+        readonly action: "var(--of-node-action-color, #2196F3)";
+        readonly condition: "var(--of-node-condition-color, #FF9800)";
+        readonly exit: "var(--of-node-exit-color, #F44336)";
+        readonly wait: "var(--of-node-wait-color, #9C27B0)";
+        readonly triggerTimeout: "var(--of-node-trigger-timeout-color, #607D8B)";
+        readonly bg: "var(--of-node-bg, #fff)";
+        readonly contentColor: "var(--of-node-content-color, #666)";
+        readonly shadow: "var(--of-node-shadow, 0 2px 4px rgba(0, 0, 0, 0.1))";
+    };
+    readonly spacing: {
+        readonly 1: "var(--of-spacing-1, 4px)";
+        readonly 2: "var(--of-spacing-2, 6px)";
+        readonly 3: "var(--of-spacing-3, 8px)";
+        readonly 4: "var(--of-spacing-4, 10px)";
+        readonly 5: "var(--of-spacing-5, 12px)";
+        readonly 6: "var(--of-spacing-6, 16px)";
+        readonly 7: "var(--of-spacing-7, 20px)";
+    };
+    readonly font: {
+        readonly sizeXs: "var(--of-font-size-xs, 11px)";
+        readonly sizeSm: "var(--of-font-size-sm, 12px)";
+        readonly sizeMd: "var(--of-font-size-md, 13px)";
+        readonly sizeLg: "var(--of-font-size-lg, 14px)";
+        readonly weightNormal: "var(--of-font-weight-normal, 400)";
+        readonly weightMedium: "var(--of-font-weight-medium, 500)";
+        readonly weightSemibold: "var(--of-font-weight-semibold, 600)";
+        readonly familyBase: "var(--of-font-family-base, system-ui, sans-serif)";
+        readonly familyMono: "var(--of-font-family-mono, monospace)";
+    };
+    readonly radius: {
+        readonly sm: "var(--of-radius-sm, 4px)";
+        readonly md: "var(--of-radius-md, 6px)";
+        readonly lg: "var(--of-radius-lg, 8px)";
+    };
+    readonly shadow: {
+        readonly panel: "var(--of-shadow-panel, 0 2px 8px rgba(0, 0, 0, 0.1))";
+        readonly node: "var(--of-shadow-node, 0 2px 4px rgba(0, 0, 0, 0.1))";
+    };
+    readonly transition: {
+        readonly fast: "var(--of-transition-fast, 0.15s)";
+        readonly normal: "var(--of-transition-normal, 0.2s)";
+    };
+    readonly panel: {
+        readonly bg: "var(--of-panel-bg, #fff)";
+        readonly shadow: "var(--of-panel-shadow, 0 2px 8px rgba(0, 0, 0, 0.1))";
+        readonly radius: "var(--of-panel-radius, 8px)";
+        readonly padding: "var(--of-panel-padding, 12px)";
+        readonly titleColor: "var(--of-panel-title-color, #374151)";
+        readonly titleSize: "var(--of-panel-title-size, 12px)";
+    };
+    readonly field: {
+        readonly bg: "var(--of-field-bg, #fff)";
+        readonly border: "var(--of-field-border, #D1D5DB)";
+        readonly borderFocus: "var(--of-field-border-focus, #3B82F6)";
+        readonly borderError: "var(--of-field-border-error, #DC2626)";
+        readonly radius: "var(--of-field-radius, 6px)";
+        readonly padding: "var(--of-field-padding, 8px 10px)";
+        readonly fontSize: "var(--of-field-font-size, 13px)";
+        readonly labelColor: "var(--of-field-label-color, #374151)";
+        readonly labelSize: "var(--of-field-label-size, 12px)";
+        readonly hintColor: "var(--of-field-hint-color, #6B7280)";
+        readonly errorColor: "var(--of-field-error-color, #DC2626)";
+    };
+    readonly button: {
+        readonly primaryBg: "var(--of-button-primary-bg, #3B82F6)";
+        readonly primaryColor: "var(--of-button-primary-color, #fff)";
+        readonly primaryBgHover: "var(--of-button-primary-bg-hover, #2563EB)";
+        readonly primaryBgDisabled: "var(--of-button-primary-bg-disabled, #93C5FD)";
+        readonly dangerBg: "var(--of-button-danger-bg, #FEE2E2)";
+        readonly dangerColor: "var(--of-button-danger-color, #DC2626)";
+        readonly radius: "var(--of-button-radius, 6px)";
+        readonly padding: "var(--of-button-padding, 8px 16px)";
+    };
+};
+
+/**
+ * Creates a TranslationFunction from a flat dictionary.
+ *
+ * Supports `{{param}}` interpolation. Falls back to the key
+ * itself when no translation is found.
+ */
+declare function createTranslationFunction(dictionary: TranslationDictionary): TranslationFunction;
+interface TranslationProviderProps {
+    children: React$1.ReactNode;
+    /**
+     * Custom translation function. When provided, it fully replaces
+     * the built-in resolver — giving you total control.
+     *
+     * Use this to plug in any i18n library (i18next, react-intl, etc.):
+     *
+     * ```tsx
+     * <TranslationProvider translationFn={(key, params) => intl.formatMessage({ id: key }, params)}>
+     * ```
+     */
+    translationFn?: TranslationFunction;
+    /**
+     * Flat dictionary that is merged on top of the default English strings.
+     *
+     * Use this for simple overrides or full translations without bringing
+     * in an external i18n library:
+     *
+     * ```tsx
+     * <TranslationProvider translations={{ "panels.control.title": "Flujo" }}>
+     * ```
+     *
+     * Ignored when `translationFn` is provided.
+     */
+    translations?: TranslationDictionary;
+}
+/**
+ * Provides a translation function to all editor components and custom nodes.
+ *
+ * Three usage modes:
+ * 1. **No props** — uses built-in English strings.
+ * 2. **`translations` prop** — merges your dictionary on top of defaults.
+ * 3. **`translationFn` prop** — you supply the function entirely
+ *    (adapter for i18next, react-intl, or any other system).
+ */
+declare function TranslationProvider({ children, translationFn, translations, }: TranslationProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the translation function.
+ *
+ * Works inside any component rendered within `<WorkflowEditor>`.
+ * Custom node developers use this to translate their own strings.
+ *
+ * @example
+ * ```tsx
+ * import { useTranslation } from "@omega-flow/editor";
+ *
+ * function MyCustomNodeDetail({ node, onChange }: NodeDetailProps) {
+ *   const t = useTranslation();
+ *   return <TextField label={t("myCustomNode.emailLabel")} ... />;
+ * }
+ * ```
+ */
+declare function useTranslation(): TranslationFunction;
+
+/**
+ * Default English translations for all editor UI strings.
+ *
+ * Keys use a dot-separated hierarchy:
+ * - `panels.*` — Panel titles and UI
+ * - `nodes.*` — Node views (canvas labels, empty states)
+ * - `nodeDetails.*` — Node detail editors (field labels, hints)
+ * - `fields.*` — Shared field/primitive strings
+ */
+declare const defaultTranslations: TranslationDictionary;
+
+export { ActionNodeDetail, ActionNodeView, BaseNodeView, type BaseNodeViewProps, CheckboxField, type CheckboxFieldProps, ConditionBuilder, ConditionBuilderDialog, type ConditionBuilderDialogProps, type ConditionBuilderProps, ConditionNodeDetail, ConditionNodeView, type ConditionProperties, type ConditionProperty, type ConditionPropertyGroup, ControlPanel, type ControlPanelProps, DetailPanel, type DetailPanelProps, DurationField, type DurationFieldProps, ExitNodeDetail, ExitNodeView, Field, FieldGroup, type FieldGroupProps, type FieldProps, type HandleDefinition, JsonField, type JsonFieldProps, type NodeDetailProps, type NodeTypeDefinition, type NodeViewProps, NodesPanel, type NodesPanelProps, NumberField, type NumberFieldProps, type OperatorOption, OptionsPanel, type OptionsPanelProps, SelectField, type SelectFieldProps, type SelectOption, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type TranslationDictionary, type TranslationFunction, TranslationProvider, type TranslationProviderProps, TriggerNodeDetail, TriggerNodeView, TriggerOrTimeoutNodeDetail, TriggerOrTimeoutNodeView, WaitNodeDetail, WaitNodeView, WorkflowEditor, type WorkflowEditorActions, type WorkflowEditorContextValue, type WorkflowEditorProps, WorkflowEditorProvider, type WorkflowEditorState, createTranslationFunction, cssVar, defaultNodeTypes, defaultOperators, defaultTranslations, mergeNodeTypes, themeVars, useDragAndDrop, useEdges, useNodeRegistry, useNodes, useSelectedNode, useTranslation, useWorkflowEditor, useWorkflowEditorContext };