Workflow / pipeline builder primitives
Visual primitives for an n8n / Zapier-style workflow builder — canvas, node cards across the trigger / action / condition / loop / wait / end family, connection lines, palette rail, inspector pane, execution log, run history, variable explorer, and toolbar. Visual references — no real execution wired.
Workflow / pipeline builder primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Workflow / pipeline builder primitives: Visual primitives for an n8n / Zapier-style workflow builder — canvas, node cards across the trigger / action / condition / loop / wait / end family, connection lines, palette rail, inspector pane, execution log, run history, variable explorer, and toolbar. Visual references — no real execution wired.
Workflow canvas
Dotted-grid canvas surface that hosts nodes positioned via absolute coordinates with a soft zoom-out feel.
Trigger node
Amber trigger card with bolt icon, name, optional source meta, pulsing live state, single output port.
Action node
Teal action card with cog icon, service meta, optional running spinner, input + output ports.
Condition node
Green branching card with expression chip and true / false ports labelled at top and bottom.
Loop node
Red For-Each block with iteration label, side output, loop-back port on the bottom edge.
Wait node
Compact amber delay card with clock icon and duration text plus optional schedule chip.
End node
Neutral terminal card with flag icon, optional outcome, single input port — closes a branch.
Connection line
SVG bezier with animated dashed flow direction and an optional midpoint label chip.
Palette rail
Left rail with categorised node types — triggers, actions, logic, time, output — and search.
Inspector pane
Right inspector with kind chip, tabs (Config / Test / Notes), advanced expand, delete + test buttons.
Execution log
Bottom pane with timestamped entries, status icons, durations, auto-animated appends.
Run history table
Sortable table of past runs — timestamp, trigger, status chip, duration, view link.
Variable explorer
Collapsible tree of available variables with type chips and copy-on-click `{{token}}` chips.
Workflow toolbar
Top bar — workflow name, status chip cycle, version meta, undo/redo, share, test-run, save.
Full workflow builder scene
Toolbar + palette rail + canvas (Trigger → Condition → Action / Action → Wait → End) + inspector + execution log.