@medalsocial/meda 2.0.0 → 2.2.0

package/dist/timeline/timeline-tape.js

@@ -6,6 +6,13 @@ import { EventCard } from './event-card.js';
 const DEFAULT_PX_PER_SEC = 1.2;
 const DEFAULT_FUTURE_PAD_SEC = 300;
 const DEFAULT_PAST_SPAN_SEC = 6 * 60 * 60;
+function getSegmentColorClass(event) {
+    if (event.isLive)
+        return 'bg-success-600 shadow-[0_0_12px_rgba(16,185,129,0.5)]';
+    if (event.kind === 'error')
+        return 'bg-destructive';
+    return 'bg-info-500 shadow-[0_0_8px_rgba(56,189,248,0.35)]';
+}
 /** Convert a unix-ms instant to canvas y (px). y=0 at canvas top. */
 function instantToY(instantMs, nowMs, pxPerSec, futurePadSec) {
     const secsAfterNow = (instantMs - nowMs) / 1000;
@@ -53,11 +60,7 @@ export function TimelineTape({ now, events, pxPerSec = DEFAULT_PX_PER_SEC, futur
         const height = Math.max(2, Math.abs(endY - startY));
         return { event: e, top, height };
     });
-    return (_jsxs("div", { className: cn('relative ml-3.5 mr-3', className), style: { height: `${canvasHeight}px` }, "data-canvas-height": canvasHeight, children: [ticks.map((t) => t.major ? (_jsxs("div", { children: [_jsx("span", { className: "absolute left-0 w-[30px] -translate-y-[7px] text-right text-[11px] font-medium tabular-nums text-muted-foreground", style: { top: `${t.y}px` }, children: t.label }), _jsx("span", { className: "absolute h-px w-2 bg-border", style: { left: 32, top: `${t.y}px` } })] }, `maj-${t.y}`)) : (_jsx("span", { className: "absolute h-px w-1.5 bg-border/40", style: { left: 35, top: `${t.y}px` } }, `min-${t.y}`))), segments.map(({ event, top, height }) => (_jsx("span", { "aria-hidden": "true", "data-tape-segment-id": event.id, "data-tape-segment-live": String(event.isLive ?? false), className: cn('absolute w-1 rounded-sm', event.isLive
-                    ? 'bg-success-600 shadow-[0_0_12px_rgba(16,185,129,0.5)]'
-                    : event.kind === 'error'
-                        ? 'bg-destructive'
-                        : 'bg-info-500 shadow-[0_0_8px_rgba(56,189,248,0.35)]'), style: { left: 44, top: `${top}px`, height: `${height}px` } }, `seg-${event.id}`))), events.map((event) => {
+    return (_jsxs("div", { className: cn('relative ml-3.5 mr-3', className), style: { height: `${canvasHeight}px` }, "data-canvas-height": canvasHeight, children: [ticks.map((t) => t.major ? (_jsxs("div", { children: [_jsx("span", { className: "absolute left-0 w-[30px] -translate-y-[7px] text-right text-[11px] font-medium tabular-nums text-muted-foreground", style: { top: `${t.y}px` }, children: t.label }), _jsx("span", { className: "absolute h-px w-2 bg-border", style: { left: 32, top: `${t.y}px` } })] }, `maj-${t.y}`)) : (_jsx("span", { className: "absolute h-px w-1.5 bg-border/40", style: { left: 35, top: `${t.y}px` } }, `min-${t.y}`))), segments.map(({ event, top, height }) => (_jsx("span", { "aria-hidden": "true", "data-tape-segment-id": event.id, "data-tape-segment-live": String(event.isLive ?? false), className: cn('absolute w-1 rounded-sm', getSegmentColorClass(event)), style: { left: 44, top: `${top}px`, height: `${height}px` } }, `seg-${event.id}`))), events.map((event) => {
                 const startY = instantToY(event.startedAt, nowMs, pxPerSec, futurePadSec);
                 const isSubEvent = event.kind === 'sub-event';
                 return (_jsx("div", { "data-event-id": event.id, className: "absolute", style: { top: `${startY}px`, left: 56, right: 0 }, children: _jsx(EventCard, { event: event, size: isSubEvent ? 'tiny' : 'default', onSelect: onSelect }) }, event.id));

package/dist/voice/voice-orb-scene.js

@@ -23,13 +23,13 @@ const PHASE_TARGET = {
 function splitmix32(seed) {
     let a = seed;
     return () => {
-        a = (a + 0x9e3779b9) | 0;
+        a = (a + 0x9e_37_79_b9) | 0;
         let t = a ^ (a >>> 16);
-        t = Math.imul(t, 0x21f0aaad);
+        t = Math.imul(t, 0x21_f0_aa_ad);
         t = t ^ (t >>> 15);
-        t = Math.imul(t, 0x735a2d97);
+        t = Math.imul(t, 0x73_5a_2d_97);
         t = t ^ (t >>> 15);
-        return (t >>> 0) / 4294967296;
+        return (t >>> 0) / 4_294_967_296;
     };
 }
 export function Scene({ level = 0, outputLevel = 0, phase = 'idle', colors, reducedMotion = false, pressed = false, variant = 'aurora', }) {

package/dist/voice/voice-status-pill.js

@@ -9,13 +9,14 @@ const PHASE_LABEL = {
     error: 'Error',
 };
 export function VoiceStatusPill({ phase, thinkingForMs, className }) {
-    const tone = phase === 'listening'
-        ? 'bg-primary text-primary-foreground'
-        : phase === 'speaking'
-            ? 'bg-success text-success-foreground'
-            : phase === 'error'
-                ? 'bg-destructive text-destructive-foreground'
-                : 'bg-muted text-muted-foreground';
+    const TONE_MAP = {
+        listening: 'bg-primary text-primary-foreground',
+        speaking: 'bg-success text-success-foreground',
+        error: 'bg-destructive text-destructive-foreground',
+        idle: 'bg-muted text-muted-foreground',
+        thinking: 'bg-muted text-muted-foreground',
+    };
+    const tone = TONE_MAP[phase];
     const seconds = thinkingForMs ? (thinkingForMs / 1000).toFixed(1) : null;
     return (_jsxs("span", { role: "status", "data-phase": phase, className: cn('inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium', tone, className), children: [_jsx("span", { className: cn('size-1.5 rounded-full bg-current', phase === 'thinking' && 'animate-pulse') }), PHASE_LABEL[phase], phase === 'thinking' && seconds && _jsxs("span", { children: ["\u00B7 ", seconds, "s"] })] }));
 }

package/dist/workflow-builder/edges/default-edge.d.ts

@@ -0,0 +1,10 @@
+import { type EdgeProps } from '@xyflow/react';
+interface DefaultEdgeData {
+    readOnly?: boolean;
+}
+type DefaultWorkflowEdgeProps = EdgeProps & {
+    data?: DefaultEdgeData;
+};
+declare function DefaultWorkflowEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, }: DefaultWorkflowEdgeProps): import("react/jsx-runtime").JSX.Element;
+export declare const DefaultWorkflowEdge: import("react").MemoExoticComponent<typeof DefaultWorkflowEdgeComponent>;
+export {};

package/dist/workflow-builder/edges/default-edge.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseEdge, getBezierPath } from '@xyflow/react';
+import { memo } from 'react';
+function DefaultWorkflowEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, }) {
+    const [edgePath] = getBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+    });
+    const edgeStyle = {
+        ...style,
+        stroke: 'var(--color-border)',
+        strokeWidth: 2,
+    };
+    return _jsx(BaseEdge, { path: edgePath, markerEnd: markerEnd, style: edgeStyle });
+}
+export const DefaultWorkflowEdge = memo(DefaultWorkflowEdgeComponent);

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

@@ -0,0 +1,3 @@
+import type { EdgeTypes } from '@xyflow/react';
+export { DefaultWorkflowEdge } from './default-edge.js';
+export declare const workflowEdgeTypes: EdgeTypes;

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

@@ -0,0 +1,5 @@
+import { DefaultWorkflowEdge } from './default-edge.js';
+export { DefaultWorkflowEdge } from './default-edge.js';
+export const workflowEdgeTypes = {
+    default: DefaultWorkflowEdge,
+};

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

@@ -0,0 +1,5 @@
+export type { WorkflowBuilderLabels, WorkflowBuilderProps, WorkflowCardCompactProps, WorkflowCardProps, WorkflowEdge, WorkflowHeaderProps, WorkflowNode, WorkflowNodeData, WorkflowNodeKind, WorkflowStatus, WorkflowSummary, WorkflowToolboxItem, } from './types.js';
+export { defaultWorkflowBuilderLabels } from './types.js';
+export { WorkflowBuilder } from './workflow-builder.js';
+export { WorkflowCard } from './workflow-card.js';
+export { WorkflowCardCompact } from './workflow-card-compact.js';

package/dist/workflow-builder/index.js

@@ -0,0 +1,12 @@
+// open/meda/src/workflow-builder/index.ts
+//
+// Subpath barrel for `@medalsocial/meda/workflow-builder`.
+//
+// Top-level `WorkflowBuilder` component plus the sibling list-row components
+// (`WorkflowCard`, `WorkflowCardCompact`) used to render workflow summaries
+// outside of the builder. Canvas, header, toolbox, nodes, edges, and node
+// helpers remain internal implementation details.
+export { defaultWorkflowBuilderLabels } from './types.js';
+export { WorkflowBuilder } from './workflow-builder.js';
+export { WorkflowCard } from './workflow-card.js';
+export { WorkflowCardCompact } from './workflow-card-compact.js';

package/dist/workflow-builder/internal/trigger-icons.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType, ReactNode, SVGProps } from 'react';
+import type { WorkflowNodeKind } from '../types.js';
+export declare function resolveWorkflowIcon(kind: WorkflowNodeKind, iconName?: string): ComponentType<SVGProps<SVGSVGElement>>;
+export declare function renderWorkflowIcon(kind: WorkflowNodeKind, iconName?: string, className?: string): ReactNode;

package/dist/workflow-builder/internal/trigger-icons.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertCircle, Bell, Bot, Clock, Flag, GitBranch, Mail, Play, Send, Square, Webhook, Zap, } from 'lucide-react';
+/**
+ * Resolve a Lucide icon by free-form string. Unknown values fall back to
+ * `Zap` so consumers don't have to import lucide just to set an icon.
+ */
+const ICON_MAP = {
+    zap: Zap,
+    webhook: Webhook,
+    clock: Clock,
+    mail: Mail,
+    bell: Bell,
+    bot: Bot,
+    send: Send,
+    flag: Flag,
+    play: Play,
+    square: Square,
+    branch: GitBranch,
+    'git-branch': GitBranch,
+    alert: AlertCircle,
+    warning: AlertCircle,
+};
+/** Default icons per kind; used when the node data omits `iconName`. */
+const KIND_ICONS = {
+    trigger: Zap,
+    action: Send,
+    condition: GitBranch,
+    delay: Clock,
+    end: Flag,
+};
+export function resolveWorkflowIcon(kind, iconName) {
+    if (iconName) {
+        const lower = iconName.toLowerCase();
+        if (ICON_MAP[lower])
+            return ICON_MAP[lower];
+    }
+    return KIND_ICONS[kind];
+}
+export function renderWorkflowIcon(kind, iconName, className = 'h-5 w-5') {
+    const Icon = resolveWorkflowIcon(kind, iconName);
+    return _jsx(Icon, { className: className, "aria-hidden": true });
+}

package/dist/workflow-builder/internal/trigger-sentence.d.ts

@@ -0,0 +1,14 @@
+import type { WorkflowNodeKind } from '../types.js';
+/**
+ * Returns a short human-readable description for a workflow node based on its
+ * kind. Consumers can override per-node via `data.description`.
+ */
+export declare function getDefaultNodeSentence(kind: WorkflowNodeKind, label?: string): string;
+/** Tailwind class tokens per kind. Mapped to the meda token system. */
+export declare const NODE_KIND_STYLES: Record<WorkflowNodeKind, {
+    bg: string;
+    border: string;
+    icon: string;
+}>;
+export declare const NODE_WIDTH = 264;
+export declare const NODE_HEIGHT = 80;

package/dist/workflow-builder/internal/trigger-sentence.js

@@ -0,0 +1,50 @@
+/**
+ * Returns a short human-readable description for a workflow node based on its
+ * kind. Consumers can override per-node via `data.description`.
+ */
+export function getDefaultNodeSentence(kind, label) {
+    switch (kind) {
+        case 'trigger':
+            return label ? `When ${label.toLowerCase()}` : 'When event occurs';
+        case 'action':
+            return label ?? 'Run action';
+        case 'condition':
+            return label ?? 'Branch on condition';
+        case 'delay':
+            return label ?? 'Wait before continuing';
+        case 'end':
+            return label ?? 'End of workflow';
+        default:
+            return label ?? '';
+    }
+}
+/** Tailwind class tokens per kind. Mapped to the meda token system. */
+export const NODE_KIND_STYLES = {
+    trigger: {
+        bg: 'bg-info-50 dark:bg-info-950/40',
+        border: 'border-info-300 dark:border-info-700',
+        icon: 'text-info-600 dark:text-info-400',
+    },
+    action: {
+        bg: 'bg-success-50 dark:bg-success-950/40',
+        border: 'border-success-300 dark:border-success-700',
+        icon: 'text-success-600 dark:text-success-400',
+    },
+    condition: {
+        bg: 'bg-brand-50 dark:bg-brand-950/40',
+        border: 'border-brand-300 dark:border-brand-700',
+        icon: 'text-brand-600 dark:text-brand-400',
+    },
+    delay: {
+        bg: 'bg-warning-50 dark:bg-warning-950/40',
+        border: 'border-warning-300 dark:border-warning-700',
+        icon: 'text-warning-600 dark:text-warning-400',
+    },
+    end: {
+        bg: 'bg-neutral-50 dark:bg-neutral-900/40',
+        border: 'border-neutral-300 dark:border-neutral-600',
+        icon: 'text-neutral-600 dark:text-neutral-400',
+    },
+};
+export const NODE_WIDTH = 264;
+export const NODE_HEIGHT = 80;

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

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

package/dist/workflow-builder/nodes/action-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 ActionNode({ data, selected }) {
+    return (_jsx(BaseWorkflowNode, { kind: "action", selected: selected, icon: renderWorkflowIcon('action', data.iconName), label: data.label || 'Action', description: data.description, warning: data.state === 'warning' ? 'Needs config' : undefined }));
+}

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

@@ -0,0 +1,20 @@
+import { Position } from '@xyflow/react';
+import type { ReactNode } from 'react';
+import type { WorkflowNodeKind } from '../types.js';
+export interface BaseWorkflowNodeProps {
+    kind: WorkflowNodeKind;
+    icon: ReactNode;
+    label: string;
+    description?: string;
+    warning?: string;
+    selected?: boolean;
+    showSourceHandle?: boolean;
+    showTargetHandle?: boolean;
+    /** Optional named handles (e.g. for condition true/false branches). */
+    sourceHandles?: Array<{
+        id: string;
+        position: Position;
+        label?: string;
+    }>;
+}
+export declare function BaseWorkflowNode({ kind, icon, label, description, warning, selected, showSourceHandle, showTargetHandle, sourceHandles, }: BaseWorkflowNodeProps): import("react/jsx-runtime").JSX.Element;

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] }));
+}