Workflow builder

import { WorkflowBuilder } from "@/components/blocks/workflow-builder";

"use client";

import { WorkflowBuilder } from "@/components/blocks/workflow-builder";

const workflow = {
  nodes: [
    { id: "start", kind: "trigger", title: "Form submitted", x: 0, y: 0 },
    { id: "email", kind: "action", title: "Send confirmation", x: 320, y: 0 },
  ],
  edges: [{ source: "start", target: "email" }],
};

export function Example() {
  return <WorkflowBuilder workflow={workflow} onSave={(next) => console.log(next)} />;
}

WorkflowBuilder              Card type="toolbar"
├── Toolbar band
│   ├── FlowArrow icon · title
│   ├── Issues badge             "3 issues" — red with any error, amber otherwise;
│   │                            hover lists them
│   ├── "Unsaved" badge          while the canvas differs from the last save
│   ├── Undo · Redo              ⌘Z · ⇧⌘Z (a burst of typing is one step)
│   ├── Add step                 DropdownMenu of every kind
│   ├── Run                      only when `onRun` is set; "Running" + spinner
│   │                            while any step's runState is "running"
│   └── Save                     disk → check icon swap once `onSave` settles (⌘S);
│                                disabled while there are errors
└── Canvas (React Flow)
    ├── Step                     tinted shell (--surface-band)
    │   ├── title row            chevron · title · issue Badge · kind Badge · run status
    │   ├── body                 a raised card-surface: description + a summary of
    │   │                        the settings that have values; the chevron folds it
    │   ├── input handle         left, or top when vertical (not on inputs: false kinds)
    │   └── output handle(s)     right, or bottom — one, or one per named output
    ├── Edges                    custom smoothstep edge; its label is a Badge on the line
    │   │                        (yes / approved: green · no / rejected: red · else gray)
    │   └── tool pill            on hover or select: insert a step · delete the edge
    ├── Dropped connection       let go of a dragged connection in empty space →
    │                            the kind menu opens there, and the new step is wired in
    ├── Controls                 bottom-left — zoom in · zoom out · fit · minimap · tidy up
    ├── Minimap                  bottom-right, pannable and zoomable, toggled from the controls
    ├── Alignment guides         while one step drags, its start / center / end lines snap
    │                            to another step's within 6 screen-px; a dashed brand line
    │                            marks each match (a center match shows alone)
    └── Inspector                top-right — slides in on a click (not on press / drag):
                                 issues · title · description · the kind's fields ·
                                 Duplicate · Delete. A bottom Drawer under 640px wide.

Keyboard (while focus is in the builder, outside a text field)
├── ⌘Z / ⇧⌘Z / ⌘Y   undo / redo
├── ⌘C / ⌘V         copy / paste the selection (works across builders on a page)
├── ⌘D              duplicate the selection
├── ⌘S              save
└── Backspace       delete the selection

Validation (built in, plus each step's own `warning` / `error`)
├── error    a blank title · a required field left empty
└── warning  no trigger at all · a step nothing connects to · a named output going nowhere
    Connections can't loop a step onto itself or duplicate an existing edge.

Tidy up (broom)
Ranks steps along the flow (longest path from a trigger; loops don't reorder it),
lines each step up with the handle feeding it so one-to-one links run dead
straight (first output before second), spaces overlaps apart, then glides
everything into place.

Built-in kinds
├── trigger     amber · Lightning · output only
├── action      brand · GearSix · in + out
├── condition   purple · GitBranch · in + yes / no
└── end         success · FlagCheckered · input only
    (an unknown kind renders as an action; `kinds` adds to or replaces these)

Transitions (transitions.dev)
├── Panel reveal   steps, guides, edge tools, minimap fade in; the inspector slides in
├── Accordion      a step's body folds under its chevron
├── Shimmer        a highlight sweeps a running step's header
├── Card resize    Tidy up's glide reads --resize-dur / reduced motion snaps
├── Icon swap      Save's disk → check
└── Menu dropdown  the Add step menus