Workflow UI

Bind observable workflow and operation snapshots to guided terminal flows, progress, errors, cancellation, splash state, and contextual help.

Overview

Bind observable workflow and operation snapshots to guided terminal flows, progress, errors, cancellation, splash state, and contextual help.

Installation

npx @mwillbanks/tuil add workflow operation-list operation-tree splash-screen help-overlay

The CLI writes source-owned components beneath the destination configured in tuil.config.ts; the default import below assumes src/components/tuil.

Loading executable example…

Components and subcomponents

API	Signature	Description
`Workflow`	`constant Workflow`	Public constant Workflow.
`Workflow.Header`	`subcomponent Workflow.Header`	Public subcomponent Workflow.Header.
`Workflow.Body`	`subcomponent Workflow.Body`	Public subcomponent Workflow.Body.
`Workflow.Footer`	`subcomponent Workflow.Footer`	Public subcomponent Workflow.Footer.
`Workflow.Progress`	`subcomponent Workflow.Progress`	Public subcomponent Workflow.Progress.
`Workflow.Errors`	`subcomponent Workflow.Errors`	Public subcomponent Workflow.Errors.
`Workflow.Next`	`subcomponent Workflow.Next`	Public subcomponent Workflow.Next.
`Workflow.Back`	`subcomponent Workflow.Back`	Public subcomponent Workflow.Back.
`Workflow.Skip`	`subcomponent Workflow.Skip`	Public subcomponent Workflow.Skip.
`Workflow.Cancel`	`subcomponent Workflow.Cancel`	Public subcomponent Workflow.Cancel.
`OperationList`	`function OperationList`	Public function OperationList.
`OperationTree`	`function OperationTree`	Public function OperationTree.
`SplashScreen`	`function SplashScreen`	Public function SplashScreen.
`HelpOverlay`	`function HelpOverlay`	Public function HelpOverlay.

Interaction

Controls call the runner's next, back, skip, retry, cancel, and rollback operations with transition locking.

API and events

The runner emits the complete workflow:* lifecycle; operation components reflect operation snapshots and callbacks.

Every interactive component publishes semantic roles, labels, state, and focus identity through the renderer's SemanticRegistry. Callback failures flow to the owning application's error boundary.

Documentation flow diagram. props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3 — **Documentation flow diagram.** props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3

Example

import type { ComponentProps } from "react";
import { Workflow } from "@/components/tuil/workflows/workflow";

export function Example(props: ComponentProps<typeof Workflow>) {
  return <Workflow {...props} />;
}

Registry-installed components are source-owned: customize the generated file in your application, and use the package reference for the shared runtime contracts.