@medalsocial/meda 1.7.0 → 2.1.0

package/dist/workflow-builder/nodes/base-node.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Handle, Position } from '@xyflow/react';
+import { cn } from '../../lib/utils.js';
+import { NODE_HEIGHT, NODE_KIND_STYLES, NODE_WIDTH } from '../internal/trigger-sentence.js';
+const HANDLE_CLASS = '!w-[11px] !h-[11px] !bg-neutral-400 dark:!bg-neutral-500 !border-2 !border-background !rounded-full';
+export function BaseWorkflowNode({ kind, icon, label, description, warning, selected, showSourceHandle = true, showTargetHandle = true, sourceHandles, }) {
+    const colors = NODE_KIND_STYLES[kind];
+    return (_jsxs("div", { "data-slot": "workflow-node", "data-kind": kind, "data-selected": selected ? '' : undefined, className: cn('cursor-default select-none rounded-lg border-2 shadow-sm transition-all', colors.bg, colors.border, selected && 'shadow-md ring-2 ring-primary ring-offset-2', !selected && 'hover:shadow-md'), style: { width: NODE_WIDTH, minHeight: NODE_HEIGHT }, children: [showTargetHandle ? (_jsx(Handle, { type: "target", position: Position.Top, className: HANDLE_CLASS })) : null, _jsxs("div", { className: "flex items-start gap-3 p-3", children: [_jsx("div", { className: cn('mt-0.5 flex-shrink-0', colors.icon), children: icon }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "select-none truncate font-medium text-foreground text-sm", children: label }), description ? (_jsx("p", { className: "mt-0.5 truncate text-muted-foreground text-xs", children: description })) : null, warning ? (_jsx("p", { className: "mt-1 inline-flex max-w-full rounded-full bg-warning-100 px-2 py-0.5 font-medium text-[10px] text-warning-800 dark:bg-warning-900/30 dark:text-warning-300", children: warning })) : null] })] }), (() => {
+                if (sourceHandles?.length) {
+                    return sourceHandles.map((handle) => (_jsx(Handle, { type: "source", position: handle.position, id: handle.id, className: HANDLE_CLASS }, handle.id)));
+                }
+                if (showSourceHandle) {
+                    return _jsx(Handle, { type: "source", position: Position.Bottom, className: HANDLE_CLASS });
+                }
+                return null;
+            })()] }));
+}

package/dist/workflow-builder/nodes/condition-node.d.ts

@@ -0,0 +1,3 @@
+import { type NodeProps } from '@xyflow/react';
+import type { WorkflowNode } from '../types.js';
+export declare function ConditionNode({ data, selected }: NodeProps<WorkflowNode>): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/nodes/condition-node.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Position } from '@xyflow/react';
+import { renderWorkflowIcon } from '../internal/trigger-icons.js';
+import { BaseWorkflowNode } from './base-node.js';
+export function ConditionNode({ data, selected }) {
+    return (_jsx(BaseWorkflowNode, { kind: "condition", selected: selected, icon: renderWorkflowIcon('condition', data.iconName), label: data.label || 'Condition', description: data.description ?? 'If / else branch', sourceHandles: [
+            { id: 'true', position: Position.Bottom, label: 'true' },
+            { id: 'false', position: Position.Right, label: 'false' },
+        ] }));
+}

package/dist/workflow-builder/nodes/delay-node.d.ts

@@ -0,0 +1,3 @@
+import type { NodeProps } from '@xyflow/react';
+import type { WorkflowNode } from '../types.js';
+export declare function DelayNode({ data, selected }: NodeProps<WorkflowNode>): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/nodes/delay-node.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWorkflowIcon } from '../internal/trigger-icons.js';
+import { BaseWorkflowNode } from './base-node.js';
+export function DelayNode({ data, selected }) {
+    return (_jsx(BaseWorkflowNode, { kind: "delay", selected: selected, icon: renderWorkflowIcon('delay', data.iconName), label: data.label || 'Delay', description: data.description ?? 'Wait before continuing' }));
+}

package/dist/workflow-builder/nodes/end-node.d.ts

@@ -0,0 +1,3 @@
+import type { NodeProps } from '@xyflow/react';
+import type { WorkflowNode } from '../types.js';
+export declare function EndNode({ data, selected }: NodeProps<WorkflowNode>): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/nodes/end-node.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWorkflowIcon } from '../internal/trigger-icons.js';
+import { BaseWorkflowNode } from './base-node.js';
+export function EndNode({ data, selected }) {
+    return (_jsx(BaseWorkflowNode, { kind: "end", selected: selected, icon: renderWorkflowIcon('end', data.iconName), label: data.label || 'End', description: data.description ?? 'End of workflow', showSourceHandle: false }));
+}

package/dist/workflow-builder/nodes/index.d.ts

@@ -0,0 +1,13 @@
+import type { NodeTypes } from '@xyflow/react';
+export { ActionNode } from './action-node.js';
+export type { BaseWorkflowNodeProps } from './base-node.js';
+export { BaseWorkflowNode } from './base-node.js';
+export { ConditionNode } from './condition-node.js';
+export { DelayNode } from './delay-node.js';
+export { EndNode } from './end-node.js';
+export { TriggerNode } from './trigger-node.js';
+/**
+ * Default node-type registry. Pass into `<ReactFlow nodeTypes>` or override
+ * via `WorkflowBuilderProps['customNodeTypes']`.
+ */
+export declare const workflowNodeTypes: NodeTypes;

package/dist/workflow-builder/nodes/index.js

@@ -0,0 +1,22 @@
+import { ActionNode } from './action-node.js';
+import { ConditionNode } from './condition-node.js';
+import { DelayNode } from './delay-node.js';
+import { EndNode } from './end-node.js';
+import { TriggerNode } from './trigger-node.js';
+export { ActionNode } from './action-node.js';
+export { BaseWorkflowNode } from './base-node.js';
+export { ConditionNode } from './condition-node.js';
+export { DelayNode } from './delay-node.js';
+export { EndNode } from './end-node.js';
+export { TriggerNode } from './trigger-node.js';
+/**
+ * Default node-type registry. Pass into `<ReactFlow nodeTypes>` or override
+ * via `WorkflowBuilderProps['customNodeTypes']`.
+ */
+export const workflowNodeTypes = {
+    trigger: TriggerNode,
+    action: ActionNode,
+    condition: ConditionNode,
+    delay: DelayNode,
+    end: EndNode,
+};

package/dist/workflow-builder/nodes/trigger-node.d.ts

@@ -0,0 +1,3 @@
+import type { NodeProps } from '@xyflow/react';
+import type { WorkflowNode } from '../types.js';
+export declare function TriggerNode({ data, selected }: NodeProps<WorkflowNode>): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/nodes/trigger-node.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWorkflowIcon } from '../internal/trigger-icons.js';
+import { getDefaultNodeSentence } from '../internal/trigger-sentence.js';
+import { BaseWorkflowNode } from './base-node.js';
+export function TriggerNode({ data, selected }) {
+    return (_jsx(BaseWorkflowNode, { kind: "trigger", selected: selected, icon: renderWorkflowIcon('trigger', data.iconName), label: data.label || 'Trigger', description: data.description ?? getDefaultNodeSentence('trigger', data.label), showTargetHandle: false }));
+}

package/dist/workflow-builder/public.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/workflow-builder/public.js

@@ -0,0 +1,4 @@
+// open/meda/src/workflow-builder/public.ts
+// Re-exported from the root barrel (`@medalsocial/meda`) so consumers can
+// reach workflow surfaces from either entry point.
+export * from './index.js';

package/dist/workflow-builder/types.d.ts

@@ -0,0 +1,140 @@
+import type { Connection, Edge, EdgeChange, Node, NodeChange, ReactFlowProps } from '@xyflow/react';
+import type { ReactNode } from 'react';
+/**
+ * The set of canonical workflow node kinds the package ships custom renderers
+ * for. Consumers may also register their own node `type` values via
+ * `nodeTypes` / `customNodeTypes` props — these labels are what the bundled
+ * toolbox + node renderers cover out-of-the-box.
+ */
+export type WorkflowNodeKind = 'trigger' | 'action' | 'condition' | 'delay' | 'end';
+export interface WorkflowNodeData {
+    /** Visible label shown on the node body. */
+    label: string;
+    /** Canonical kind (drives icon + accent color when no custom renderer). */
+    kind: WorkflowNodeKind;
+    /** Optional secondary line shown beneath the label. */
+    description?: string;
+    /** Lucide icon name (free-form string so consumers don't need to import). */
+    iconName?: string;
+    /** Free-form configuration the consumer attaches to the node. */
+    config?: Record<string, unknown>;
+    /** Optional state — `error` shows an amber accent. */
+    state?: 'default' | 'warning' | 'error';
+    [key: string]: unknown;
+}
+export type WorkflowNode = Node<WorkflowNodeData>;
+export type WorkflowEdge = Edge;
+export interface WorkflowBuilderLabels {
+    /** Header bar */
+    saveAction: string;
+    publishAction: string;
+    pauseAction: string;
+    saving: string;
+    /** Toolbox panel */
+    toolboxTitle: string;
+    toolboxHint: string;
+    toolboxReadOnlyHint: string;
+    addTrigger: string;
+    addAction: string;
+    addCondition: string;
+    addDelay: string;
+    addEnd: string;
+    /** Mobile drawers */
+    openToolbox: string;
+    openInspector: string;
+    closeDrawer: string;
+    /** Empty / placeholder state */
+    emptyCanvas: string;
+}
+export declare const defaultWorkflowBuilderLabels: WorkflowBuilderLabels;
+/** Status badge values for the header. */
+export type WorkflowStatus = 'draft' | 'active' | 'paused';
+export interface WorkflowBuilderProps {
+    /** Controlled nodes array. */
+    nodes: WorkflowNode[];
+    /** Controlled edges array. */
+    edges: WorkflowEdge[];
+    /** React Flow node-change handler. */
+    onNodesChange: (changes: NodeChange[]) => void;
+    /** React Flow edge-change handler. */
+    onEdgesChange: (changes: EdgeChange[]) => void;
+    /** Connection handler. */
+    onConnect: (connection: Connection) => void;
+    /** Called when a toolbox item is tapped. */
+    onAddNode?: (kind: WorkflowNodeKind, position?: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Selection change forwarded from React Flow. */
+    onSelectionChange?: (selection: {
+        nodes: WorkflowNode[];
+        edges: WorkflowEdge[];
+    }) => void;
+    /** Called when a node is clicked (header / inspector trigger). */
+    onNodeClick?: (node: WorkflowNode) => void;
+    /** Whether the toolbox panel is open by default on desktop (default true). */
+    showToolbox?: boolean;
+    /** Read-only canvas — disables changes & hides edit affordances. */
+    readOnly?: boolean;
+    /** Render the header bar slot. When omitted no header is rendered. */
+    headerSlot?: ReactNode;
+    /** Optional inspector slot (renders inside the right rail / mobile drawer). */
+    inspectorSlot?: ReactNode;
+    /** Override the default node-types registry. */
+    customNodeTypes?: ReactFlowProps['nodeTypes'];
+    /** Override the default edge-types registry. */
+    customEdgeTypes?: ReactFlowProps['edgeTypes'];
+    labels?: Partial<WorkflowBuilderLabels>;
+    className?: string;
+}
+export interface WorkflowToolboxItem {
+    kind: WorkflowNodeKind;
+    label: string;
+    description?: string;
+    iconName?: string;
+}
+export interface WorkflowToolboxProps {
+    items?: WorkflowToolboxItem[];
+    onAddNode?: (kind: WorkflowNodeKind) => void;
+    readOnly?: boolean;
+    labels?: Partial<WorkflowBuilderLabels>;
+    className?: string;
+}
+export interface WorkflowHeaderProps {
+    name: string;
+    onNameChange?: (name: string) => void;
+    status?: WorkflowStatus;
+    onSave?: () => void;
+    onPublish?: () => void;
+    onPause?: () => void;
+    onBack?: () => void;
+    isSaving?: boolean;
+    readOnly?: boolean;
+    labels?: Partial<WorkflowBuilderLabels>;
+    className?: string;
+}
+export interface WorkflowSummary {
+    id: string;
+    name: string;
+    description?: string;
+    status: WorkflowStatus;
+    triggerLabel?: string;
+    /** Free-form metadata the card surfaces in a footer row. */
+    meta?: {
+        label: string;
+        value: string;
+    }[];
+    /** Avatar URL for the creator (rendered when present). */
+    creatorAvatarUrl?: string;
+    creatorName?: string;
+    /** Unix ms; rendered as relative time when present. */
+    createdAt?: number;
+}
+export interface WorkflowCardProps {
+    workflow: WorkflowSummary;
+    onClick?: () => void;
+    className?: string;
+}
+export interface WorkflowCardCompactProps extends WorkflowCardProps {
+    showStats?: boolean;
+}

package/dist/workflow-builder/types.js

@@ -0,0 +1,18 @@
+export const defaultWorkflowBuilderLabels = {
+    saveAction: 'Save',
+    publishAction: 'Publish',
+    pauseAction: 'Pause',
+    saving: 'Saving...',
+    toolboxTitle: 'Add step',
+    toolboxHint: 'Tap a step to add it to your workflow.',
+    toolboxReadOnlyHint: 'This workflow is read-only.',
+    addTrigger: 'Trigger',
+    addAction: 'Action',
+    addCondition: 'Condition',
+    addDelay: 'Delay',
+    addEnd: 'End',
+    openToolbox: 'Steps',
+    openInspector: 'Inspector',
+    closeDrawer: 'Close',
+    emptyCanvas: 'Add a trigger to start building your workflow.',
+};

package/dist/workflow-builder/workflow-builder.d.ts

@@ -0,0 +1,10 @@
+import { type WorkflowBuilderProps } from './types.js';
+/**
+ * Top-level workflow builder surface — composes the canvas, toolbox and
+ * (optional) header / inspector slots into a responsive layout.
+ *
+ * Container queries adapt the layout: at narrower container widths the
+ * toolbox collapses behind a tab bar (mobile) and at wider widths it sits to
+ * the left of the canvas.
+ */
+export declare function WorkflowBuilder({ nodes, edges, onNodesChange, onEdgesChange, onConnect, onAddNode, onSelectionChange, onNodeClick, showToolbox, readOnly, headerSlot, inspectorSlot, customNodeTypes, customEdgeTypes, labels, className, }: WorkflowBuilderProps): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/workflow-builder.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { defaultWorkflowBuilderLabels } from './types.js';
+import { WorkflowCanvas } from './workflow-canvas.js';
+import { WorkflowToolbox } from './workflow-toolbox.js';
+/**
+ * Top-level workflow builder surface — composes the canvas, toolbox and
+ * (optional) header / inspector slots into a responsive layout.
+ *
+ * Container queries adapt the layout: at narrower container widths the
+ * toolbox collapses behind a tab bar (mobile) and at wider widths it sits to
+ * the left of the canvas.
+ */
+export function WorkflowBuilder({ nodes, edges, onNodesChange, onEdgesChange, onConnect, onAddNode, onSelectionChange, onNodeClick, showToolbox = true, readOnly = false, headerSlot, inspectorSlot, customNodeTypes, customEdgeTypes, labels, className, }) {
+    const resolvedLabels = { ...defaultWorkflowBuilderLabels, ...(labels ?? {}) };
+    const [mobileDrawer, setMobileDrawer] = useState(null);
+    return (_jsxs("div", { "data-slot": "workflow-builder", className: cn('@container/workflow relative flex h-full w-full flex-col overflow-hidden bg-background', className), children: [headerSlot, _jsxs("div", { className: "relative flex flex-1 overflow-hidden", children: [showToolbox ? (_jsx("div", { className: "hidden w-64 flex-shrink-0 @[640px]/workflow:flex", children: _jsx(WorkflowToolbox, { onAddNode: onAddNode, readOnly: readOnly, labels: resolvedLabels }) })) : null, _jsxs("div", { className: "relative flex flex-1 flex-col", children: [_jsx(WorkflowCanvas, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, onNodeClick: onNodeClick, onSelectionChange: onSelectionChange, readOnly: readOnly, customNodeTypes: customNodeTypes, customEdgeTypes: customEdgeTypes }), nodes.length === 0 ? (_jsx("div", { "data-slot": "workflow-empty-canvas", className: "pointer-events-none absolute inset-0 flex items-center justify-center text-center", children: _jsx("p", { className: "max-w-xs rounded-md bg-background/80 px-4 py-3 text-muted-foreground text-sm shadow-sm backdrop-blur", children: resolvedLabels.emptyCanvas }) })) : null] }), inspectorSlot ? (_jsx("div", { className: "hidden w-72 flex-shrink-0 border-border border-l @[960px]/workflow:flex", children: inspectorSlot })) : null] }), showToolbox || inspectorSlot ? (_jsxs("nav", { "data-slot": "workflow-mobile-tab-bar", className: "flex border-border border-t bg-background @[640px]/workflow:hidden", "aria-label": "Workflow panels", children: [showToolbox ? (_jsx("button", { type: "button", onClick: () => setMobileDrawer((current) => (current === 'toolbox' ? null : 'toolbox')), className: "flex h-12 min-h-11 flex-1 items-center justify-center font-medium text-sm transition-colors hover:bg-accent", "aria-pressed": mobileDrawer === 'toolbox', children: resolvedLabels.openToolbox })) : null, inspectorSlot ? (_jsx("button", { type: "button", onClick: () => setMobileDrawer((current) => (current === 'inspector' ? null : 'inspector')), className: "flex h-12 min-h-11 flex-1 items-center justify-center border-border border-l font-medium text-sm transition-colors hover:bg-accent", "aria-pressed": mobileDrawer === 'inspector', children: resolvedLabels.openInspector })) : null] })) : null, mobileDrawer ? (_jsxs("div", { "data-slot": "workflow-mobile-drawer", "data-panel": mobileDrawer, className: "@[640px]/workflow:hidden absolute inset-x-0 bottom-12 max-h-[60%] overflow-hidden border-border border-t bg-background shadow-lg", children: [_jsxs("div", { className: "flex items-center justify-between border-border border-b px-4 py-2", children: [_jsx("span", { className: "font-medium text-sm", children: mobileDrawer === 'toolbox'
+                                    ? resolvedLabels.openToolbox
+                                    : resolvedLabels.openInspector }), _jsx("button", { type: "button", onClick: () => setMobileDrawer(null), className: "inline-flex h-9 min-h-9 min-w-11 items-center rounded-md px-2 text-muted-foreground text-sm transition-colors hover:bg-accent hover:text-foreground", children: resolvedLabels.closeDrawer })] }), _jsxs("div", { className: "max-h-[50vh] overflow-y-auto", children: [mobileDrawer === 'toolbox' && showToolbox ? (_jsx(WorkflowToolbox, { onAddNode: onAddNode, readOnly: readOnly, labels: resolvedLabels })) : null, mobileDrawer === 'inspector' ? inspectorSlot : null] })] })) : null] }));
+}

package/dist/workflow-builder/workflow-canvas.d.ts

@@ -0,0 +1,26 @@
+import { type Connection, type EdgeChange, type NodeChange, type ReactFlowProps } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import type { WorkflowEdge, WorkflowNode } from './types.js';
+export interface WorkflowCanvasProps {
+    nodes: WorkflowNode[];
+    edges: WorkflowEdge[];
+    onNodesChange: (changes: NodeChange[]) => void;
+    onEdgesChange: (changes: EdgeChange[]) => void;
+    onConnect: (connection: Connection) => void;
+    onNodeClick?: (node: WorkflowNode) => void;
+    onPaneClick?: () => void;
+    onSelectionChange?: (selection: {
+        nodes: WorkflowNode[];
+        edges: WorkflowEdge[];
+    }) => void;
+    readOnly?: boolean;
+    customNodeTypes?: ReactFlowProps['nodeTypes'];
+    customEdgeTypes?: ReactFlowProps['edgeTypes'];
+    className?: string;
+}
+/**
+ * The bare React Flow canvas, with sensible defaults wired in. No header / no
+ * toolbox — compose with `WorkflowBuilder` for the full surface, or use this
+ * alone when embedding in a custom layout.
+ */
+export declare function WorkflowCanvas({ nodes, edges, onNodesChange, onEdgesChange, onConnect, onNodeClick, onPaneClick, onSelectionChange, readOnly, customNodeTypes, customEdgeTypes, className, }: WorkflowCanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/workflow-canvas.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Background, BackgroundVariant, Controls, ReactFlow, } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { useCallback } from 'react';
+import { cn } from '../lib/utils.js';
+import { workflowEdgeTypes } from './edges/index.js';
+import { workflowNodeTypes } from './nodes/index.js';
+/**
+ * The bare React Flow canvas, with sensible defaults wired in. No header / no
+ * toolbox — compose with `WorkflowBuilder` for the full surface, or use this
+ * alone when embedding in a custom layout.
+ */
+export function WorkflowCanvas({ nodes, edges, onNodesChange, onEdgesChange, onConnect, onNodeClick, onPaneClick, onSelectionChange, readOnly = false, customNodeTypes, customEdgeTypes, className, }) {
+    const handleNodeClick = useCallback((_e, node) => {
+        onNodeClick?.(node);
+    }, [onNodeClick]);
+    const handleSelectionChange = useCallback((params) => {
+        onSelectionChange?.({
+            nodes: params.nodes,
+            edges: params.edges,
+        });
+    }, [onSelectionChange]);
+    return (_jsx("div", { "data-slot": "workflow-canvas", className: cn('@container relative h-full w-full bg-muted/40', className), children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: readOnly ? undefined : onNodesChange, onEdgesChange: readOnly ? undefined : onEdgesChange, onConnect: readOnly ? undefined : onConnect, onNodeClick: onNodeClick ? handleNodeClick : undefined, onPaneClick: onPaneClick, onSelectionChange: onSelectionChange ? handleSelectionChange : undefined, nodeTypes: customNodeTypes ?? workflowNodeTypes, edgeTypes: customEdgeTypes ?? workflowEdgeTypes, fitView: true, fitViewOptions: { padding: 0.3, maxZoom: 1.1 }, nodesDraggable: !readOnly, nodesConnectable: !readOnly, elementsSelectable: !readOnly, panOnScroll: true, proOptions: { hideAttribution: true }, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1, color: "var(--color-border)" }), _jsx(Controls, { showInteractive: false, className: "!bg-background !border-border !shadow-sm [&>button]:!bg-background [&>button]:!border-border [&>button]:!text-foreground [&>button:hover]:!bg-muted" })] }) }));
+}

package/dist/workflow-builder/workflow-card-compact.d.ts

@@ -0,0 +1,2 @@
+import type { WorkflowCardCompactProps } from './types.js';
+export declare function WorkflowCardCompact({ workflow, onClick, className }: WorkflowCardCompactProps): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/workflow-card-compact.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pause, Play, Zap } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+const STATUS_CLASSES = {
+    draft: 'bg-muted text-muted-foreground',
+    active: 'bg-success-100 text-success-700 dark:bg-success-900/30 dark:text-success-400',
+    paused: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400',
+};
+const STATUS_ICONS = {
+    draft: null,
+    active: _jsx(Play, { className: "h-3 w-3", "aria-hidden": true }),
+    paused: _jsx(Pause, { className: "h-3 w-3", "aria-hidden": true }),
+};
+export function WorkflowCardCompact({ workflow, onClick, className }) {
+    return (_jsxs("div", { "data-slot": "workflow-card-compact", "data-status": workflow.status, className: cn('cursor-pointer space-y-2 rounded-md border border-border bg-card p-3 transition-colors hover:bg-accent/50', className), onClick: onClick, onKeyDown: (e) => {
+            if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                onClick();
+            }
+        }, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [_jsx("div", { className: "truncate font-medium text-foreground text-sm", children: workflow.name }), workflow.description ? (_jsx("p", { className: "line-clamp-2 text-muted-foreground text-xs", children: workflow.description })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-medium text-xs', STATUS_CLASSES[workflow.status]), children: [STATUS_ICONS[workflow.status], _jsx("span", { className: "capitalize", children: workflow.status })] }), workflow.triggerLabel ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-muted-foreground text-xs", children: [_jsx(Zap, { className: "h-3 w-3", "aria-hidden": true }), workflow.triggerLabel] })) : null] })] }));
+}

package/dist/workflow-builder/workflow-card.d.ts

@@ -0,0 +1,2 @@
+import type { WorkflowCardProps } from './types.js';
+export declare function WorkflowCard({ workflow, onClick, className }: WorkflowCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/workflow-card.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pause, Play, Zap } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+const STATUS_CLASSES = {
+    draft: 'bg-muted text-muted-foreground',
+    active: 'bg-success-100 text-success-700 dark:bg-success-900/30 dark:text-success-400',
+    paused: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400',
+};
+function formatRelative(ts) {
+    const diff = Date.now() - ts;
+    const seconds = Math.round(diff / 1000);
+    if (seconds < 60)
+        return 'just now';
+    const minutes = Math.round(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.round(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.round(hours / 24);
+    return `${days}d ago`;
+}
+function getInitials(value) {
+    return value
+        .split(' ')
+        .map((part) => part[0] ?? '')
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+}
+const STATUS_ICONS = {
+    draft: null,
+    active: _jsx(Play, { className: "h-3 w-3", "aria-hidden": true }),
+    paused: _jsx(Pause, { className: "h-3 w-3", "aria-hidden": true }),
+};
+export function WorkflowCard({ workflow, onClick, className }) {
+    return (_jsxs("div", { "data-slot": "workflow-card", "data-status": workflow.status, className: cn('group cursor-pointer rounded-lg border border-border bg-card p-4 shadow-sm transition-all hover:shadow-md', className), onClick: onClick, onKeyDown: (e) => {
+            if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                onClick();
+            }
+        }, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [_jsx("div", { className: "mb-3 flex items-start justify-between gap-3", children: _jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsx("h3", { className: "truncate font-semibold text-base text-foreground", children: workflow.name }), workflow.description ? (_jsx("p", { className: "line-clamp-2 text-muted-foreground text-sm", children: workflow.description })) : null] }) }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-medium text-xs', STATUS_CLASSES[workflow.status]), children: [STATUS_ICONS[workflow.status], _jsx("span", { className: "capitalize", children: workflow.status })] }), workflow.triggerLabel ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-muted-foreground text-sm", children: [_jsx(Zap, { className: "h-3.5 w-3.5", "aria-hidden": true }), workflow.triggerLabel] })) : null] }), workflow.meta?.length ? (_jsx("dl", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-muted-foreground text-sm", children: workflow.meta.map((m) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("dt", { className: "font-medium", children: [m.label, ":"] }), _jsx("dd", { className: "tabular-nums", children: m.value })] }, m.label))) })) : null, workflow.creatorName || workflow.createdAt ? (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs", children: [workflow.creatorName ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [workflow.creatorAvatarUrl ? (_jsx("img", { src: workflow.creatorAvatarUrl, alt: "", className: "h-5 w-5 rounded-full" })) : (_jsx("span", { className: "inline-flex h-5 w-5 items-center justify-center rounded-full bg-muted font-medium text-[10px]", children: getInitials(workflow.creatorName) })), _jsx("span", { className: "truncate", children: workflow.creatorName })] })) : null, workflow.createdAt ? _jsx("span", { children: formatRelative(workflow.createdAt) }) : null] })) : null] })] }));
+}

package/dist/workflow-builder/workflow-header.d.ts

@@ -0,0 +1,2 @@
+import { type WorkflowHeaderProps } from './types.js';
+export declare function WorkflowHeader({ name, onNameChange, status, onSave, onPublish, onPause, onBack, isSaving, readOnly, labels, className, }: WorkflowHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/workflow-header.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, Pause, Play, Save } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { defaultWorkflowBuilderLabels, } from './types.js';
+const STATUS_CLASSES = {
+    draft: 'bg-muted text-muted-foreground',
+    active: 'bg-success-100 text-success-700 dark:bg-success-900/30 dark:text-success-400',
+    paused: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400',
+};
+const STATUS_TEXT = {
+    draft: 'Draft',
+    active: 'Active',
+    paused: 'Paused',
+};
+export function WorkflowHeader({ name, onNameChange, status = 'draft', onSave, onPublish, onPause, onBack, isSaving = false, readOnly = false, labels, className, }) {
+    const resolvedLabels = { ...defaultWorkflowBuilderLabels, ...(labels ?? {}) };
+    const [isEditing, setIsEditing] = useState(false);
+    const inputRef = useRef(null);
+    const handleNameClick = () => {
+        if (readOnly || !onNameChange)
+            return;
+        setIsEditing(true);
+        setTimeout(() => inputRef.current?.select(), 0);
+    };
+    return (_jsxs("header", { "data-slot": "workflow-header", className: cn('flex h-14 items-center justify-between border-border border-b bg-background px-4', className), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [onBack ? (_jsx("button", { type: "button", onClick: onBack, "aria-label": "Back", className: "inline-flex h-11 w-11 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground", children: _jsx(ArrowLeft, { className: "h-4 w-4", "aria-hidden": true }) })) : null, isEditing && onNameChange ? (_jsx("input", { ref: inputRef, value: name, onChange: (e) => onNameChange(e.target.value), onBlur: () => setIsEditing(false), onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === 'Escape')
+                                setIsEditing(false);
+                        }, className: "h-9 w-64 rounded-md border border-border bg-background px-2 font-semibold text-foreground text-sm" })) : (_jsx("button", { type: "button", onClick: handleNameClick, disabled: readOnly || !onNameChange, className: "rounded-md px-2 py-1 font-semibold text-foreground text-sm transition-colors hover:bg-accent disabled:cursor-default disabled:hover:bg-transparent", children: name || 'Untitled workflow' })), _jsx("span", { "data-slot": "workflow-status-badge", className: cn('inline-flex items-center rounded-full px-2 py-0.5 font-medium text-xs', STATUS_CLASSES[status]), children: STATUS_TEXT[status] })] }), !readOnly ? (_jsxs("div", { className: "flex items-center gap-2", children: [(status === 'draft' || status === 'paused') && onPublish ? (_jsxs("button", { type: "button", onClick: onPublish, className: "inline-flex h-9 min-h-9 items-center gap-1.5 rounded-md border border-border bg-background px-3 font-medium text-sm transition-colors hover:bg-accent", children: [_jsx(Play, { className: "h-3.5 w-3.5", "aria-hidden": true }), resolvedLabels.publishAction] })) : null, status === 'active' && onPause ? (_jsxs("button", { type: "button", onClick: onPause, className: "inline-flex h-9 min-h-9 items-center gap-1.5 rounded-md border border-border bg-background px-3 font-medium text-sm transition-colors hover:bg-accent", children: [_jsx(Pause, { className: "h-3.5 w-3.5", "aria-hidden": true }), resolvedLabels.pauseAction] })) : null, onSave ? (_jsxs("button", { type: "button", onClick: onSave, disabled: isSaving, className: "inline-flex h-9 min-h-9 items-center gap-1.5 rounded-md bg-primary px-3 font-medium text-primary-foreground text-sm transition-colors hover:bg-primary/90 disabled:opacity-50", children: [_jsx(Save, { className: "h-3.5 w-3.5", "aria-hidden": true }), isSaving ? resolvedLabels.saving : resolvedLabels.saveAction] })) : null] })) : null] }));
+}

package/dist/workflow-builder/workflow-toolbox.d.ts

@@ -0,0 +1,2 @@
+import { type WorkflowToolboxProps } from './types.js';
+export declare function WorkflowToolbox({ items, onAddNode, readOnly, labels, className, }: WorkflowToolboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/workflow-builder/workflow-toolbox.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+import { renderWorkflowIcon } from './internal/trigger-icons.js';
+import { defaultWorkflowBuilderLabels, } from './types.js';
+function defaultItems(labels) {
+    return [
+        { kind: 'trigger', label: labels.addTrigger, iconName: 'zap' },
+        { kind: 'action', label: labels.addAction, iconName: 'send' },
+        { kind: 'condition', label: labels.addCondition, iconName: 'git-branch' },
+        { kind: 'delay', label: labels.addDelay, iconName: 'clock' },
+        { kind: 'end', label: labels.addEnd, iconName: 'flag' },
+    ];
+}
+export function WorkflowToolbox({ items, onAddNode, readOnly = false, labels, className, }) {
+    const resolvedLabels = { ...defaultWorkflowBuilderLabels, ...(labels ?? {}) };
+    const resolvedItems = items ?? defaultItems(resolvedLabels);
+    return (_jsxs("aside", { "data-slot": "workflow-toolbox", className: cn('flex h-full w-full flex-col border-border border-r bg-background', className), children: [_jsx("div", { className: "border-border border-b px-4 py-3", children: _jsx("h2", { className: "font-semibold text-foreground text-sm", children: resolvedLabels.toolboxTitle }) }), _jsx("div", { className: "flex-1 overflow-y-auto px-3 py-3", children: readOnly ? (_jsx("p", { className: "px-1 py-2 text-muted-foreground text-xs", children: resolvedLabels.toolboxReadOnlyHint })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "mb-2 px-1 text-muted-foreground text-xs", children: resolvedLabels.toolboxHint }), _jsx("ul", { className: "space-y-1.5", children: resolvedItems.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", "data-slot": "workflow-toolbox-item", "data-kind": item.kind, onClick: () => onAddNode?.(item.kind), className: "flex min-h-11 w-full items-center gap-2.5 rounded-md px-2 py-2.5 text-left text-sm transition-colors hover:bg-accent/60 focus-visible:bg-accent/80 focus-visible:outline-none", children: [_jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: renderWorkflowIcon(item.kind, item.iconName, 'h-4 w-4') }), _jsx("span", { className: "flex-1 font-medium", children: item.label })] }) }, item.kind))) })] })) })] }));
+}