@omega-flow/editor 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,552 @@
+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 { Workflow, Node, Edge, WorkflowOptions } from '@omega-flow/types';
+import * as _xyflow_react from '@xyflow/react';
+import { NodeProps, NodeTypes } from '@xyflow/react';
+
+/**
+ * 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;
+    /** Node background color */
+    color?: string;
+    /** Initial data when node is created */
+    defaultData: Record<string, unknown>;
+    /** Output connection handles */
+    sourceHandles: HandleDefinition[];
+    /** Input connection handles */
+    targetHandles: HandleDefinition[];
+    /** 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;
+}
+/**
+ * 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 and state management 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, }: 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: customNodeTypes, 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;
+
+/**
+ * Detail editor for Condition nodes.
+ * Allows editing json-rules-engine conditions.
+ */
+declare function ConditionNodeDetail({ node, onChange }: NodeDetailProps): 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[];
+
+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 unit selector (ms, s, min, h).
+ * Value is stored in milliseconds but displayed in a user-friendly unit.
+ */
+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;
+
+export { ActionNodeDetail, ActionNodeView, BaseNodeView, type BaseNodeViewProps, CheckboxField, type CheckboxFieldProps, ConditionNodeDetail, ConditionNodeView, 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, OptionsPanel, type OptionsPanelProps, SelectField, type SelectFieldProps, type SelectOption, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, TriggerNodeDetail, TriggerNodeView, TriggerOrTimeoutNodeDetail, TriggerOrTimeoutNodeView, WaitNodeDetail, WaitNodeView, WorkflowEditor, type WorkflowEditorActions, type WorkflowEditorContextValue, type WorkflowEditorProps, WorkflowEditorProvider, type WorkflowEditorState, defaultNodeTypes, useDragAndDrop, useEdges, useNodeRegistry, useNodes, useSelectedNode, useWorkflowEditor, useWorkflowEditorContext };