@echothink-ui/workflow 0.1.0

package/dist/index.js

@@ -0,0 +1,453 @@
+// src/components/ApprovalWorkflowEditor.tsx
+import { Button, Checkbox, TextInput } from "@echothink-ui/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ApprovalWorkflowEditor({ steps = [], onChange, className, ...props }) {
+  const update = (index, next) => {
+    const nextSteps = [...steps];
+    nextSteps[index] = next;
+    onChange?.(nextSteps);
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...props,
+      className: `eth-workflow-approval-editor ${className ?? ""}`,
+      "data-eth-component": "ApprovalWorkflowEditor",
+      children: [
+        steps.map((step, index) => /* @__PURE__ */ jsxs("div", { className: "eth-workflow-approval-editor__step", children: [
+          /* @__PURE__ */ jsx(TextInput, { value: step.label, onChange: (event) => update(index, { ...step, label: event.currentTarget.value }), "aria-label": "Step label" }),
+          /* @__PURE__ */ jsx(TextInput, { value: step.approver ?? "", onChange: (event) => update(index, { ...step, approver: event.currentTarget.value }), "aria-label": "Approver" }),
+          /* @__PURE__ */ jsx(Checkbox, { checked: Boolean(step.required), label: "Required", onChange: (event) => update(index, { ...step, required: event.currentTarget.checked }) })
+        ] }, step.id)),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            intent: "secondary",
+            density: "compact",
+            onClick: () => onChange?.([...steps, { id: `step-${steps.length + 1}`, label: "Approval step", required: true }]),
+            children: "Add approval"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ConditionBuilder.tsx
+import { FormField, Select, TextInput as TextInput2 } from "@echothink-ui/core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var operators = [
+  { value: "equals", label: "Equals" },
+  { value: "not-equals", label: "Does not equal" },
+  { value: "contains", label: "Contains" },
+  { value: "gt", label: "Greater than" },
+  { value: "gte", label: "Greater than or equal" },
+  { value: "lt", label: "Less than" },
+  { value: "lte", label: "Less than or equal" },
+  { value: "exists", label: "Exists" }
+];
+function ConditionBuilder({ value, onChange, variables = [], className, ...props }) {
+  const fieldOptions = variables.length ? variables.map((field) => ({ value: field, label: field })) : [{ value: value.field, label: value.field || "field" }];
+  const update = (key, nextValue) => {
+    onChange({ ...value, [key]: nextValue });
+  };
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      ...props,
+      className: `eth-workflow-condition-builder ${className ?? ""}`,
+      "data-eth-component": "ConditionBuilder",
+      children: [
+        /* @__PURE__ */ jsx2(FormField, { label: "Field", children: /* @__PURE__ */ jsx2(Select, { value: value.field, options: fieldOptions, onChange: (event) => update("field", event.currentTarget.value) }) }),
+        /* @__PURE__ */ jsx2(FormField, { label: "Operator", children: /* @__PURE__ */ jsx2(Select, { value: value.operator, options: operators, onChange: (event) => update("operator", event.currentTarget.value) }) }),
+        /* @__PURE__ */ jsx2(FormField, { label: "Value", children: /* @__PURE__ */ jsx2(TextInput2, { value: value.value ?? "", onChange: (event) => update("value", event.currentTarget.value), disabled: value.operator === "exists" }) })
+      ]
+    }
+  );
+}
+
+// src/components/PipelineStage.tsx
+import { StatusDot } from "@echothink-ui/core";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function PipelineStage({ stage, active, onSelect, className, ...props }) {
+  const content = /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(StatusDot, { status: stage.status, label: stage.status }),
+    /* @__PURE__ */ jsx3("strong", { children: stage.label }),
+    stage.durationMs !== void 0 ? /* @__PURE__ */ jsxs3("small", { children: [
+      stage.durationMs,
+      "ms"
+    ] }) : null
+  ] });
+  return onSelect ? /* @__PURE__ */ jsx3(
+    "button",
+    {
+      ...props,
+      type: "button",
+      className: `eth-workflow-pipeline-stage ${active ? "eth-workflow-pipeline-stage--active" : ""} ${className ?? ""}`,
+      "data-eth-component": "PipelineStage",
+      onClick: () => onSelect(stage.id),
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx3(
+    "article",
+    {
+      ...props,
+      className: `eth-workflow-pipeline-stage ${active ? "eth-workflow-pipeline-stage--active" : ""} ${className ?? ""}`,
+      "data-eth-component": "PipelineStage",
+      children: content
+    }
+  );
+}
+
+// src/components/ProcessDesigner.tsx
+import * as React from "react";
+import { Button as Button2 } from "@echothink-ui/core";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ProcessDesigner({
+  nodes,
+  edges,
+  onNodeMove,
+  onAddNode,
+  onConnect,
+  className,
+  ...props
+}) {
+  const svgRef = React.useRef(null);
+  const [positions, setPositions] = React.useState(() => initialPositions(nodes));
+  const [draggingId, setDraggingId] = React.useState(null);
+  const [selectedNodeId, setSelectedNodeId] = React.useState(null);
+  React.useEffect(() => {
+    setPositions(initialPositions(nodes));
+  }, [nodes]);
+  const pointFromEvent = (event) => {
+    const rect = svgRef.current?.getBoundingClientRect();
+    if (!rect) return { x: 0, y: 0 };
+    return {
+      x: (event.clientX - rect.left) / rect.width * 900,
+      y: (event.clientY - rect.top) / rect.height * 420
+    };
+  };
+  const move = (event) => {
+    if (!draggingId) return;
+    const point = pointFromEvent(event);
+    setPositions((current) => ({ ...current, [draggingId]: point }));
+  };
+  const stop = () => {
+    if (!draggingId) return;
+    const point = positions[draggingId];
+    if (point) onNodeMove?.(draggingId, point.x, point.y);
+    setDraggingId(null);
+  };
+  const clickNode = (id) => {
+    if (selectedNodeId && selectedNodeId !== id) {
+      onConnect?.(selectedNodeId, id);
+      setSelectedNodeId(null);
+    } else {
+      setSelectedNodeId(id);
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    "section",
+    {
+      ...props,
+      className: `eth-workflow-process-designer ${className ?? ""}`,
+      "data-eth-component": "ProcessDesigner",
+      children: [
+        /* @__PURE__ */ jsxs4("header", { children: [
+          /* @__PURE__ */ jsx4("h3", { children: "Process designer" }),
+          onAddNode ? /* @__PURE__ */ jsx4(Button2, { intent: "secondary", density: "compact", onClick: onAddNode, children: "Add node" }) : null
+        ] }),
+        /* @__PURE__ */ jsxs4(
+          "svg",
+          {
+            ref: svgRef,
+            viewBox: "0 0 900 420",
+            role: "img",
+            "aria-label": "Process graph",
+            onMouseMove: move,
+            onMouseUp: stop,
+            onMouseLeave: stop,
+            children: [
+              edges.map((edge, index) => {
+                const from = positions[edge.from];
+                const to = positions[edge.to];
+                if (!from || !to) return null;
+                const midX = (from.x + to.x) / 2;
+                const midY = (from.y + to.y) / 2;
+                return /* @__PURE__ */ jsxs4("g", { children: [
+                  /* @__PURE__ */ jsx4("line", { x1: from.x, y1: from.y, x2: to.x, y2: to.y, stroke: "var(--eth-color-border-strong)", strokeWidth: 2, markerEnd: "url(#eth-workflow-arrow)" }),
+                  edge.label ? /* @__PURE__ */ jsx4("text", { x: midX, y: midY - 6, textAnchor: "middle", fontSize: 12, children: edge.label }) : null
+                ] }, `${edge.from}-${edge.to}-${index}`);
+              }),
+              /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsx4("marker", { id: "eth-workflow-arrow", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx4("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "var(--eth-color-border-strong)" }) }) }),
+              nodes.map((node) => {
+                const point = positions[node.id];
+                if (!point) return null;
+                return /* @__PURE__ */ jsxs4(
+                  "g",
+                  {
+                    transform: `translate(${point.x}, ${point.y})`,
+                    className: `eth-workflow-process-designer__node eth-workflow-process-designer__node--${node.type} ${selectedNodeId === node.id ? "eth-workflow-process-designer__node--selected" : ""}`,
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      setDraggingId(node.id);
+                    },
+                    onClick: () => clickNode(node.id),
+                    children: [
+                      node.type === "decision" ? /* @__PURE__ */ jsx4("polygon", { points: "0,-32 54,0 0,32 -54,0", fill: "var(--eth-color-layer-01)", stroke: "var(--eth-color-border-strong)", strokeWidth: 2 }) : /* @__PURE__ */ jsx4("rect", { x: -62, y: -28, width: 124, height: 56, rx: 0, fill: "var(--eth-color-layer-01)", stroke: "var(--eth-color-border-strong)", strokeWidth: 2 }),
+                      /* @__PURE__ */ jsx4("text", { textAnchor: "middle", dominantBaseline: "middle", fontSize: 13, children: node.label })
+                    ]
+                  },
+                  node.id
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function initialPositions(nodes) {
+  const positions = {};
+  nodes.forEach((node, index) => {
+    positions[node.id] = {
+      x: node.x ?? 100 + index % 5 * 170,
+      y: node.y ?? 90 + Math.floor(index / 5) * 120
+    };
+  });
+  return positions;
+}
+
+// src/components/ProcessTimeline.tsx
+import { StatusDot as StatusDot2 } from "@echothink-ui/core";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ProcessTimeline({ events = [], className, ...props }) {
+  return /* @__PURE__ */ jsx5(
+    "section",
+    {
+      ...props,
+      className: `eth-workflow-process-timeline ${className ?? ""}`,
+      "data-eth-component": "ProcessTimeline",
+      children: /* @__PURE__ */ jsx5("ol", { children: events.map((event) => /* @__PURE__ */ jsxs5("li", { children: [
+        event.status ? /* @__PURE__ */ jsx5(StatusDot2, { status: event.status }) : null,
+        /* @__PURE__ */ jsx5("span", { children: event.label }),
+        event.timestamp ? /* @__PURE__ */ jsx5("time", { dateTime: event.timestamp, children: event.timestamp }) : null
+      ] }, event.id)) })
+    }
+  );
+}
+
+// src/components/RuleBuilder.tsx
+import * as React2 from "react";
+import { Button as Button3, FormField as FormField2, Select as Select2 } from "@echothink-ui/core";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var defaultRule = {
+  combinator: "all",
+  conditions: [{ field: "", operator: "equals", value: "" }]
+};
+function RuleBuilder({ value, onChange, variables = [], className, ...props }) {
+  const [internalRule, setInternalRule] = React2.useState(value ?? defaultRule);
+  const rule = value ?? internalRule;
+  const commit = (nextRule) => {
+    setInternalRule(nextRule);
+    onChange?.(nextRule);
+  };
+  return /* @__PURE__ */ jsxs6(
+    "section",
+    {
+      ...props,
+      className: `eth-workflow-rule-builder ${className ?? ""}`,
+      "data-eth-component": "RuleBuilder",
+      children: [
+        /* @__PURE__ */ jsx6(FormField2, { label: "Match", children: /* @__PURE__ */ jsx6(
+          Select2,
+          {
+            value: rule.combinator,
+            options: [
+              { value: "all", label: "All conditions" },
+              { value: "any", label: "Any condition" }
+            ],
+            onChange: (event) => commit({ ...rule, combinator: event.currentTarget.value })
+          }
+        ) }),
+        /* @__PURE__ */ jsx6("div", { className: "eth-workflow-rule-builder__conditions", children: rule.conditions.map((condition, index) => /* @__PURE__ */ jsxs6("div", { className: "eth-workflow-rule-builder__condition", children: [
+          /* @__PURE__ */ jsx6(
+            ConditionBuilder,
+            {
+              value: condition,
+              variables,
+              onChange: (nextCondition) => {
+                const conditions = [...rule.conditions];
+                conditions[index] = nextCondition;
+                commit({ ...rule, conditions });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            Button3,
+            {
+              intent: "ghost",
+              density: "compact",
+              onClick: () => commit({ ...rule, conditions: rule.conditions.filter((_, itemIndex) => itemIndex !== index) }),
+              children: "Remove"
+            }
+          )
+        ] }, index)) }),
+        /* @__PURE__ */ jsx6(
+          Button3,
+          {
+            intent: "secondary",
+            density: "compact",
+            onClick: () => commit({ ...rule, conditions: [...rule.conditions, { field: variables[0] ?? "", operator: "equals", value: "" }] }),
+            children: "Add condition"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/RuleSimulationPanel.tsx
+import { Button as Button4 } from "@echothink-ui/core";
+import { DataTable } from "@echothink-ui/data";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function RuleSimulationPanel({
+  rule,
+  sampleInputs,
+  results = [],
+  onRun,
+  className,
+  ...props
+}) {
+  const resultMap = new Map(results.map((result) => [result.sampleId, result]));
+  const rows = sampleInputs.map((sample) => ({
+    ...sample,
+    actualOutcome: resultMap.get(sample.id)?.actualOutcome,
+    matched: resultMap.get(sample.id)?.matched
+  }));
+  const columns = [
+    { key: "label", header: "Sample" },
+    { key: "data", header: "Input", render: (row) => /* @__PURE__ */ jsx7("code", { children: JSON.stringify(row.data) }) },
+    { key: "expectedOutcome", header: "Expected", render: (row) => /* @__PURE__ */ jsx7("code", { children: JSON.stringify(row.expectedOutcome) }) },
+    { key: "actualOutcome", header: "Actual", render: (row) => /* @__PURE__ */ jsx7("code", { children: JSON.stringify(row.actualOutcome) }) },
+    { key: "matched", header: "Matched", render: (row) => row.matched ? "Yes" : row.matched === false ? "No" : "Not run" }
+  ];
+  return /* @__PURE__ */ jsxs7(
+    "section",
+    {
+      ...props,
+      className: `eth-workflow-rule-simulation ${className ?? ""}`,
+      "data-eth-component": "RuleSimulationPanel",
+      children: [
+        /* @__PURE__ */ jsxs7("header", { children: [
+          /* @__PURE__ */ jsx7("h3", { children: "Rule simulation" }),
+          onRun ? /* @__PURE__ */ jsx7(Button4, { onClick: onRun, children: "Run" }) : null
+        ] }),
+        /* @__PURE__ */ jsx7("pre", { className: "eth-workflow-rule-simulation__rule", children: /* @__PURE__ */ jsx7("code", { children: JSON.stringify(rule, null, 2) }) }),
+        /* @__PURE__ */ jsx7(DataTable, { rows, columns, rowKey: "id" })
+      ]
+    }
+  );
+}
+
+// src/components/WorkflowHandoffPanel.tsx
+import * as React3 from "react";
+import { Button as Button5, FormField as FormField3, Select as Select3, StatusDot as StatusDot3, Textarea } from "@echothink-ui/core";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function WorkflowHandoffPanel({
+  item,
+  assigneeOptions = [],
+  onSubmit,
+  className,
+  ...props
+}) {
+  const [assigneeId, setAssigneeId] = React3.useState(assigneeOptions[0]?.id ?? "");
+  const [reason, setReason] = React3.useState("");
+  return /* @__PURE__ */ jsxs8(
+    "section",
+    {
+      ...props,
+      className: `eth-workflow-handoff-panel ${className ?? ""}`,
+      "data-eth-component": "WorkflowHandoffPanel",
+      children: [
+        /* @__PURE__ */ jsxs8("header", { children: [
+          /* @__PURE__ */ jsx8("h3", { children: "Workflow handoff" }),
+          item?.status ? /* @__PURE__ */ jsx8(StatusDot3, { status: item.status, label: item.status }) : null
+        ] }),
+        item ? /* @__PURE__ */ jsx8("p", { children: item.label }) : null,
+        /* @__PURE__ */ jsxs8("form", { onSubmit: (event) => {
+          event.preventDefault();
+          onSubmit?.({ assigneeId, reason });
+        }, children: [
+          /* @__PURE__ */ jsx8(FormField3, { label: "Assignee", children: /* @__PURE__ */ jsx8(
+            Select3,
+            {
+              value: assigneeId,
+              options: assigneeOptions.map((option) => ({ value: option.id, label: option.kind ? `${option.label} (${option.kind})` : option.label })),
+              onChange: (event) => setAssigneeId(event.currentTarget.value)
+            }
+          ) }),
+          /* @__PURE__ */ jsx8(FormField3, { label: "Reason", children: /* @__PURE__ */ jsx8(Textarea, { value: reason, rows: 4, onChange: (event) => setReason(event.currentTarget.value) }) }),
+          /* @__PURE__ */ jsx8(Button5, { type: "submit", disabled: !assigneeId, children: "Handoff" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/WorkflowPipelineView.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function WorkflowPipelineView({
+  stages,
+  activeStageId,
+  onSelect,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    "section",
+    {
+      ...props,
+      className: `eth-workflow-pipeline-view ${className ?? ""}`,
+      "data-eth-component": "WorkflowPipelineView",
+      "aria-label": "Workflow pipeline",
+      children: /* @__PURE__ */ jsx9("ol", { className: "eth-workflow-pipeline-view__stages", children: stages.map((stage, index) => /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsx9(
+        PipelineStage,
+        {
+          stage,
+          active: stage.id === activeStageId,
+          onSelect,
+          "aria-posinset": index + 1,
+          "aria-setsize": stages.length
+        }
+      ) }, stage.id)) })
+    }
+  );
+}
+
+// src/index.tsx
+var WorkflowComponentNames = [
+  "WorkflowPipelineView",
+  "PipelineStage",
+  "ProcessDesigner",
+  "RuleBuilder",
+  "ConditionBuilder",
+  "RuleSimulationPanel",
+  "WorkflowHandoffPanel",
+  "ApprovalWorkflowEditor",
+  "ProcessTimeline"
+];
+export {
+  ApprovalWorkflowEditor,
+  ConditionBuilder,
+  PipelineStage,
+  ProcessDesigner,
+  ProcessTimeline,
+  RuleBuilder,
+  RuleSimulationPanel,
+  WorkflowComponentNames,
+  WorkflowHandoffPanel,
+  WorkflowPipelineView
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ApprovalWorkflowEditor.tsx","../src/components/ConditionBuilder.tsx","../src/components/PipelineStage.tsx","../src/components/ProcessDesigner.tsx","../src/components/ProcessTimeline.tsx","../src/components/RuleBuilder.tsx","../src/components/RuleSimulationPanel.tsx","../src/components/WorkflowHandoffPanel.tsx","../src/components/WorkflowPipelineView.tsx","../src/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button, Checkbox, TextInput } from \"@echothink-ui/core\";\nimport type { ApprovalWorkflowEditorProps } from \"./types\";\n\nexport function ApprovalWorkflowEditor({ steps = [], onChange, className, ...props }: ApprovalWorkflowEditorProps) {\n  const update = (index: number, next: NonNullable<ApprovalWorkflowEditorProps[\"steps\"]>[number]) => {\n    const nextSteps = [...steps];\n    nextSteps[index] = next;\n    onChange?.(nextSteps);\n  };\n\n  return (\n    <section\n      {...props}\n      className={`eth-workflow-approval-editor ${className ?? \"\"}`}\n      data-eth-component=\"ApprovalWorkflowEditor\"\n    >\n      {steps.map((step, index) => (\n        <div key={step.id} className=\"eth-workflow-approval-editor__step\">\n          <TextInput value={step.label} onChange={(event) => update(index, { ...step, label: event.currentTarget.value })} aria-label=\"Step label\" />\n          <TextInput value={step.approver ?? \"\"} onChange={(event) => update(index, { ...step, approver: event.currentTarget.value })} aria-label=\"Approver\" />\n          <Checkbox checked={Boolean(step.required)} label=\"Required\" onChange={(event) => update(index, { ...step, required: event.currentTarget.checked })} />\n        </div>\n      ))}\n      <Button\n        intent=\"secondary\"\n        density=\"compact\"\n        onClick={() => onChange?.([...steps, { id: `step-${steps.length + 1}`, label: \"Approval step\", required: true }])}\n      >\n        Add approval\n      </Button>\n    </section>\n  );\n}\n","import * as React from \"react\";\nimport { FormField, Select, TextInput } from \"@echothink-ui/core\";\nimport type { ConditionBuilderProps, WorkflowRuleCondition } from \"./types\";\n\nconst operators: Array<{ value: WorkflowRuleCondition[\"operator\"]; label: string }> = [\n  { value: \"equals\", label: \"Equals\" },\n  { value: \"not-equals\", label: \"Does not equal\" },\n  { value: \"contains\", label: \"Contains\" },\n  { value: \"gt\", label: \"Greater than\" },\n  { value: \"gte\", label: \"Greater than or equal\" },\n  { value: \"lt\", label: \"Less than\" },\n  { value: \"lte\", label: \"Less than or equal\" },\n  { value: \"exists\", label: \"Exists\" }\n];\n\nexport function ConditionBuilder({ value, onChange, variables = [], className, ...props }: ConditionBuilderProps) {\n  const fieldOptions = variables.length\n    ? variables.map((field) => ({ value: field, label: field }))\n    : [{ value: value.field, label: value.field || \"field\" }];\n  const update = <K extends keyof WorkflowRuleCondition>(key: K, nextValue: WorkflowRuleCondition[K]) => {\n    onChange({ ...value, [key]: nextValue });\n  };\n\n  return (\n    <section\n      {...props}\n      className={`eth-workflow-condition-builder ${className ?? \"\"}`}\n      data-eth-component=\"ConditionBuilder\"\n    >\n      <FormField label=\"Field\">\n        <Select value={value.field} options={fieldOptions} onChange={(event) => update(\"field\", event.currentTarget.value)} />\n      </FormField>\n      <FormField label=\"Operator\">\n        <Select value={value.operator} options={operators} onChange={(event) => update(\"operator\", event.currentTarget.value as WorkflowRuleCondition[\"operator\"])} />\n      </FormField>\n      <FormField label=\"Value\">\n        <TextInput value={value.value ?? \"\"} onChange={(event) => update(\"value\", event.currentTarget.value)} disabled={value.operator === \"exists\"} />\n      </FormField>\n    </section>\n  );\n}\n","import * as React from \"react\";\nimport { StatusDot } from \"@echothink-ui/core\";\nimport type { PipelineStageProps } from \"./types\";\n\nexport function PipelineStage({ stage, active, onSelect, className, ...props }: PipelineStageProps) {\n  const content = (\n    <>\n      <StatusDot status={stage.status} label={stage.status} />\n      <strong>{stage.label}</strong>\n      {stage.durationMs !== undefined ? <small>{stage.durationMs}ms</small> : null}\n    </>\n  );\n\n  return onSelect ? (\n    <button\n      {...props}\n      type=\"button\"\n      className={`eth-workflow-pipeline-stage ${active ? \"eth-workflow-pipeline-stage--active\" : \"\"} ${className ?? \"\"}`}\n      data-eth-component=\"PipelineStage\"\n      onClick={() => onSelect(stage.id)}\n    >\n      {content}\n    </button>\n  ) : (\n    <article\n      {...props}\n      className={`eth-workflow-pipeline-stage ${active ? \"eth-workflow-pipeline-stage--active\" : \"\"} ${className ?? \"\"}`}\n      data-eth-component=\"PipelineStage\"\n    >\n      {content}\n    </article>\n  );\n}\n","import * as React from \"react\";\nimport { Button } from \"@echothink-ui/core\";\nimport type { ProcessDesignerProps, ProcessNode } from \"./types\";\n\nexport function ProcessDesigner({\n  nodes,\n  edges,\n  onNodeMove,\n  onAddNode,\n  onConnect,\n  className,\n  ...props\n}: ProcessDesignerProps) {\n  const svgRef = React.useRef<SVGSVGElement>(null);\n  const [positions, setPositions] = React.useState(() => initialPositions(nodes));\n  const [draggingId, setDraggingId] = React.useState<string | null>(null);\n  const [selectedNodeId, setSelectedNodeId] = React.useState<string | null>(null);\n\n  React.useEffect(() => {\n    setPositions(initialPositions(nodes));\n  }, [nodes]);\n\n  const pointFromEvent = (event: React.MouseEvent<SVGSVGElement>) => {\n    const rect = svgRef.current?.getBoundingClientRect();\n    if (!rect) return { x: 0, y: 0 };\n    return {\n      x: ((event.clientX - rect.left) / rect.width) * 900,\n      y: ((event.clientY - rect.top) / rect.height) * 420\n    };\n  };\n\n  const move = (event: React.MouseEvent<SVGSVGElement>) => {\n    if (!draggingId) return;\n    const point = pointFromEvent(event);\n    setPositions((current) => ({ ...current, [draggingId]: point }));\n  };\n\n  const stop = () => {\n    if (!draggingId) return;\n    const point = positions[draggingId];\n    if (point) onNodeMove?.(draggingId, point.x, point.y);\n    setDraggingId(null);\n  };\n\n  const clickNode = (id: string) => {\n    if (selectedNodeId && selectedNodeId !== id) {\n      onConnect?.(selectedNodeId, id);\n      setSelectedNodeId(null);\n    } else {\n      setSelectedNodeId(id);\n    }\n  };\n\n  return (\n    <section\n      {...props}\n      className={`eth-workflow-process-designer ${className ?? \"\"}`}\n      data-eth-component=\"ProcessDesigner\"\n    >\n      <header>\n        <h3>Process designer</h3>\n        {onAddNode ? <Button intent=\"secondary\" density=\"compact\" onClick={onAddNode}>Add node</Button> : null}\n      </header>\n      <svg\n        ref={svgRef}\n        viewBox=\"0 0 900 420\"\n        role=\"img\"\n        aria-label=\"Process graph\"\n        onMouseMove={move}\n        onMouseUp={stop}\n        onMouseLeave={stop}\n      >\n        {edges.map((edge, index) => {\n          const from = positions[edge.from];\n          const to = positions[edge.to];\n          if (!from || !to) return null;\n          const midX = (from.x + to.x) / 2;\n          const midY = (from.y + to.y) / 2;\n          return (\n            <g key={`${edge.from}-${edge.to}-${index}`}>\n              <line x1={from.x} y1={from.y} x2={to.x} y2={to.y} stroke=\"var(--eth-color-border-strong)\" strokeWidth={2} markerEnd=\"url(#eth-workflow-arrow)\" />\n              {edge.label ? <text x={midX} y={midY - 6} textAnchor=\"middle\" fontSize={12}>{edge.label}</text> : null}\n            </g>\n          );\n        })}\n        <defs>\n          <marker id=\"eth-workflow-arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n            <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"var(--eth-color-border-strong)\" />\n          </marker>\n        </defs>\n        {nodes.map((node) => {\n          const point = positions[node.id];\n          if (!point) return null;\n          return (\n            <g\n              key={node.id}\n              transform={`translate(${point.x}, ${point.y})`}\n              className={`eth-workflow-process-designer__node eth-workflow-process-designer__node--${node.type} ${selectedNodeId === node.id ? \"eth-workflow-process-designer__node--selected\" : \"\"}`}\n              onMouseDown={(event) => { event.preventDefault(); setDraggingId(node.id); }}\n              onClick={() => clickNode(node.id)}\n            >\n              {node.type === \"decision\" ? (\n                <polygon points=\"0,-32 54,0 0,32 -54,0\" fill=\"var(--eth-color-layer-01)\" stroke=\"var(--eth-color-border-strong)\" strokeWidth={2} />\n              ) : (\n                <rect x={-62} y={-28} width={124} height={56} rx={0} fill=\"var(--eth-color-layer-01)\" stroke=\"var(--eth-color-border-strong)\" strokeWidth={2} />\n              )}\n              <text textAnchor=\"middle\" dominantBaseline=\"middle\" fontSize={13}>{node.label}</text>\n            </g>\n          );\n        })}\n      </svg>\n    </section>\n  );\n}\n\nfunction initialPositions(nodes: ProcessNode[]) {\n  const positions: Record<string, { x: number; y: number }> = {};\n  nodes.forEach((node, index) => {\n    positions[node.id] = {\n      x: node.x ?? 100 + (index % 5) * 170,\n      y: node.y ?? 90 + Math.floor(index / 5) * 120\n    };\n  });\n  return positions;\n}\n","import * as React from \"react\";\nimport { StatusDot } from \"@echothink-ui/core\";\nimport type { ProcessTimelineProps } from \"./types\";\n\nexport function ProcessTimeline({ events = [], className, ...props }: ProcessTimelineProps) {\n  return (\n    <section\n      {...props}\n      className={`eth-workflow-process-timeline ${className ?? \"\"}`}\n      data-eth-component=\"ProcessTimeline\"\n    >\n      <ol>\n        {events.map((event) => (\n          <li key={event.id}>\n            {event.status ? <StatusDot status={event.status} /> : null}\n            <span>{event.label}</span>\n            {event.timestamp ? <time dateTime={event.timestamp}>{event.timestamp}</time> : null}\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n","import * as React from \"react\";\nimport { Button, FormField, Select } from \"@echothink-ui/core\";\nimport { ConditionBuilder } from \"./ConditionBuilder\";\nimport type { RuleBuilderProps, WorkflowRule } from \"./types\";\n\nconst defaultRule: WorkflowRule = {\n  combinator: \"all\",\n  conditions: [{ field: \"\", operator: \"equals\", value: \"\" }]\n};\n\nexport function RuleBuilder({ value, onChange, variables = [], className, ...props }: RuleBuilderProps) {\n  const [internalRule, setInternalRule] = React.useState<WorkflowRule>(value ?? defaultRule);\n  const rule = value ?? internalRule;\n  const commit = (nextRule: WorkflowRule) => {\n    setInternalRule(nextRule);\n    onChange?.(nextRule);\n  };\n\n  return (\n    <section\n      {...props}\n      className={`eth-workflow-rule-builder ${className ?? \"\"}`}\n      data-eth-component=\"RuleBuilder\"\n    >\n      <FormField label=\"Match\">\n        <Select\n          value={rule.combinator}\n          options={[\n            { value: \"all\", label: \"All conditions\" },\n            { value: \"any\", label: \"Any condition\" }\n          ]}\n          onChange={(event) => commit({ ...rule, combinator: event.currentTarget.value as WorkflowRule[\"combinator\"] })}\n        />\n      </FormField>\n      <div className=\"eth-workflow-rule-builder__conditions\">\n        {rule.conditions.map((condition, index) => (\n          <div key={index} className=\"eth-workflow-rule-builder__condition\">\n            <ConditionBuilder\n              value={condition}\n              variables={variables}\n              onChange={(nextCondition) => {\n                const conditions = [...rule.conditions];\n                conditions[index] = nextCondition;\n                commit({ ...rule, conditions });\n              }}\n            />\n            <Button\n              intent=\"ghost\"\n              density=\"compact\"\n              onClick={() => commit({ ...rule, conditions: rule.conditions.filter((_, itemIndex) => itemIndex !== index) })}\n            >\n              Remove\n            </Button>\n          </div>\n        ))}\n      </div>\n      <Button\n        intent=\"secondary\"\n        density=\"compact\"\n        onClick={() => commit({ ...rule, conditions: [...rule.conditions, { field: variables[0] ?? \"\", operator: \"equals\", value: \"\" }] })}\n      >\n        Add condition\n      </Button>\n    </section>\n  );\n}\n","import * as React from \"react\";\nimport { Button } from \"@echothink-ui/core\";\nimport { DataTable, type DataColumn } from \"@echothink-ui/data\";\nimport type { RuleSimulationPanelProps, RuleSimulationSample } from \"./types\";\n\ntype SimulationRow = RuleSimulationSample & {\n  actualOutcome?: unknown;\n  matched?: boolean;\n};\n\nexport function RuleSimulationPanel({\n  rule,\n  sampleInputs,\n  results = [],\n  onRun,\n  className,\n  ...props\n}: RuleSimulationPanelProps) {\n  const resultMap = new Map(results.map((result) => [result.sampleId, result]));\n  const rows: SimulationRow[] = sampleInputs.map((sample) => ({\n    ...sample,\n    actualOutcome: resultMap.get(sample.id)?.actualOutcome,\n    matched: resultMap.get(sample.id)?.matched\n  }));\n  const columns: DataColumn<SimulationRow>[] = [\n    { key: \"label\", header: \"Sample\" },\n    { key: \"data\", header: \"Input\", render: (row) => <code>{JSON.stringify(row.data)}</code> },\n    { key: \"expectedOutcome\", header: \"Expected\", render: (row) => <code>{JSON.stringify(row.expectedOutcome)}</code> },\n    { key: \"actualOutcome\", header: \"Actual\", render: (row) => <code>{JSON.stringify(row.actualOutcome)}</code> },\n    { key: \"matched\", header: \"Matched\", render: (row) => (row.matched ? \"Yes\" : row.matched === false ? \"No\" : \"Not run\") }\n  ];\n\n  return (\n    <section\n      {...props}\n      className={`eth-workflow-rule-simulation ${className ?? \"\"}`}\n      data-eth-component=\"RuleSimulationPanel\"\n    >\n      <header>\n        <h3>Rule simulation</h3>\n        {onRun ? <Button onClick={onRun}>Run</Button> : null}\n      </header>\n      <pre className=\"eth-workflow-rule-simulation__rule\"><code>{JSON.stringify(rule, null, 2)}</code></pre>\n      <DataTable rows={rows} columns={columns} rowKey=\"id\" />\n    </section>\n  );\n}\n","import * as React from \"react\";\nimport { Button, FormField, Select, StatusDot, Textarea } from \"@echothink-ui/core\";\nimport type { WorkflowHandoffPanelProps } from \"./types\";\n\nexport function WorkflowHandoffPanel({\n  item,\n  assigneeOptions = [],\n  onSubmit,\n  className,\n  ...props\n}: WorkflowHandoffPanelProps) {\n  const [assigneeId, setAssigneeId] = React.useState(assigneeOptions[0]?.id ?? \"\");\n  const [reason, setReason] = React.useState(\"\");\n\n  return (\n    <section\n      {...props}\n      className={`eth-workflow-handoff-panel ${className ?? \"\"}`}\n      data-eth-component=\"WorkflowHandoffPanel\"\n    >\n      <header>\n        <h3>Workflow handoff</h3>\n        {item?.status ? <StatusDot status={item.status} label={item.status} /> : null}\n      </header>\n      {item ? <p>{item.label}</p> : null}\n      <form onSubmit={(event) => { event.preventDefault(); onSubmit?.({ assigneeId, reason }); }}>\n        <FormField label=\"Assignee\">\n          <Select\n            value={assigneeId}\n            options={assigneeOptions.map((option) => ({ value: option.id, label: option.kind ? `${option.label} (${option.kind})` : option.label }))}\n            onChange={(event) => setAssigneeId(event.currentTarget.value)}\n          />\n        </FormField>\n        <FormField label=\"Reason\">\n          <Textarea value={reason} rows={4} onChange={(event) => setReason(event.currentTarget.value)} />\n        </FormField>\n        <Button type=\"submit\" disabled={!assigneeId}>Handoff</Button>\n      </form>\n    </section>\n  );\n}\n","import * as React from \"react\";\nimport { PipelineStage } from \"./PipelineStage\";\nimport type { WorkflowPipelineViewProps } from \"./types\";\n\nexport function WorkflowPipelineView({\n  stages,\n  activeStageId,\n  onSelect,\n  className,\n  ...props\n}: WorkflowPipelineViewProps) {\n  return (\n    <section\n      {...props}\n      className={`eth-workflow-pipeline-view ${className ?? \"\"}`}\n      data-eth-component=\"WorkflowPipelineView\"\n      aria-label=\"Workflow pipeline\"\n    >\n      <ol className=\"eth-workflow-pipeline-view__stages\">\n        {stages.map((stage, index) => (\n          <li key={stage.id}>\n            <PipelineStage\n              stage={stage}\n              active={stage.id === activeStageId}\n              onSelect={onSelect}\n              aria-posinset={index + 1}\n              aria-setsize={stages.length}\n            />\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n","import \"./styles.css\";\n\nexport type {\n  ApprovalWorkflowEditorProps,\n  ConditionBuilderProps,\n  PipelineStageProps,\n  ProcessDesignerProps,\n  ProcessEdge,\n  ProcessNode,\n  ProcessTimelineProps,\n  RuleBuilderProps,\n  RuleSimulationPanelProps,\n  RuleSimulationResult,\n  RuleSimulationSample,\n  WorkflowHandoffPanelProps,\n  WorkflowPipelineViewProps,\n  WorkflowRule,\n  WorkflowRuleCondition,\n  WorkflowStage\n} from \"./components/types\";\nexport { ApprovalWorkflowEditor } from \"./components/ApprovalWorkflowEditor\";\nexport { ConditionBuilder } from \"./components/ConditionBuilder\";\nexport { PipelineStage } from \"./components/PipelineStage\";\nexport { ProcessDesigner } from \"./components/ProcessDesigner\";\nexport { ProcessTimeline } from \"./components/ProcessTimeline\";\nexport { RuleBuilder } from \"./components/RuleBuilder\";\nexport { RuleSimulationPanel } from \"./components/RuleSimulationPanel\";\nexport { WorkflowHandoffPanel } from \"./components/WorkflowHandoffPanel\";\nexport { WorkflowPipelineView } from \"./components/WorkflowPipelineView\";\n\nexport const WorkflowComponentNames = [\n  \"WorkflowPipelineView\",\n  \"PipelineStage\",\n  \"ProcessDesigner\",\n  \"RuleBuilder\",\n  \"ConditionBuilder\",\n  \"RuleSimulationPanel\",\n  \"WorkflowHandoffPanel\",\n  \"ApprovalWorkflowEditor\",\n  \"ProcessTimeline\"\n] as const;\nexport type WorkflowComponentName = (typeof WorkflowComponentNames)[number];\n"],"mappings":"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","names":["TextInput","jsx","jsxs","jsx","jsxs","Button","jsx","jsxs","StatusDot","jsx","jsxs","React","Button","FormField","Select","jsx","jsxs","FormField","Select","Button","Button","jsx","jsxs","React","Button","FormField","Select","StatusDot","jsx","jsxs","jsx"]}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@echothink-ui/workflow",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18.3.0",
+    "react-dom": ">=18.3.0"
+  },
+  "dependencies": {
+    "@echothink-ui/core": "0.2.0",
+    "@echothink-ui/task": "0.1.0",
+    "@echothink-ui/data": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --sourcemap --clean --external react --external react-dom && tsc -p tsconfig.json --declaration --emitDeclarationOnly --noEmit false --outDir dist",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --config ../../vitest.config.ts --passWithNoTests",
+    "lint": "eslint src"
+  }
+}

package/src/components/ApprovalWorkflowEditor.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Button, Checkbox, TextInput } from "@echothink-ui/core";
+import type { ApprovalWorkflowEditorProps } from "./types";
+
+export function ApprovalWorkflowEditor({ steps = [], onChange, className, ...props }: ApprovalWorkflowEditorProps) {
+  const update = (index: number, next: NonNullable<ApprovalWorkflowEditorProps["steps"]>[number]) => {
+    const nextSteps = [...steps];
+    nextSteps[index] = next;
+    onChange?.(nextSteps);
+  };
+
+  return (
+    <section
+      {...props}
+      className={`eth-workflow-approval-editor ${className ?? ""}`}
+      data-eth-component="ApprovalWorkflowEditor"
+    >
+      {steps.map((step, index) => (
+        <div key={step.id} className="eth-workflow-approval-editor__step">
+          <TextInput value={step.label} onChange={(event) => update(index, { ...step, label: event.currentTarget.value })} aria-label="Step label" />
+          <TextInput value={step.approver ?? ""} onChange={(event) => update(index, { ...step, approver: event.currentTarget.value })} aria-label="Approver" />
+          <Checkbox checked={Boolean(step.required)} label="Required" onChange={(event) => update(index, { ...step, required: event.currentTarget.checked })} />
+        </div>
+      ))}
+      <Button
+        intent="secondary"
+        density="compact"
+        onClick={() => onChange?.([...steps, { id: `step-${steps.length + 1}`, label: "Approval step", required: true }])}
+      >
+        Add approval
+      </Button>
+    </section>
+  );
+}

package/src/components/ConditionBuilder.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { FormField, Select, TextInput } from "@echothink-ui/core";
+import type { ConditionBuilderProps, WorkflowRuleCondition } from "./types";
+
+const operators: Array<{ value: WorkflowRuleCondition["operator"]; label: string }> = [
+  { value: "equals", label: "Equals" },
+  { value: "not-equals", label: "Does not equal" },
+  { value: "contains", label: "Contains" },
+  { value: "gt", label: "Greater than" },
+  { value: "gte", label: "Greater than or equal" },
+  { value: "lt", label: "Less than" },
+  { value: "lte", label: "Less than or equal" },
+  { value: "exists", label: "Exists" }
+];
+
+export function ConditionBuilder({ value, onChange, variables = [], className, ...props }: ConditionBuilderProps) {
+  const fieldOptions = variables.length
+    ? variables.map((field) => ({ value: field, label: field }))
+    : [{ value: value.field, label: value.field || "field" }];
+  const update = <K extends keyof WorkflowRuleCondition>(key: K, nextValue: WorkflowRuleCondition[K]) => {
+    onChange({ ...value, [key]: nextValue });
+  };
+
+  return (
+    <section
+      {...props}
+      className={`eth-workflow-condition-builder ${className ?? ""}`}
+      data-eth-component="ConditionBuilder"
+    >
+      <FormField label="Field">
+        <Select value={value.field} options={fieldOptions} onChange={(event) => update("field", event.currentTarget.value)} />
+      </FormField>
+      <FormField label="Operator">
+        <Select value={value.operator} options={operators} onChange={(event) => update("operator", event.currentTarget.value as WorkflowRuleCondition["operator"])} />
+      </FormField>
+      <FormField label="Value">
+        <TextInput value={value.value ?? ""} onChange={(event) => update("value", event.currentTarget.value)} disabled={value.operator === "exists"} />
+      </FormField>
+    </section>
+  );
+}