Components

Import every component and its TypeScript contracts from @zuilib/workflows. Components are controlled where the host needs durable state and invoke neutral callbacks for all external effects.

Writeback and scenarios

WritebackForm

A schema-driven form supporting text, textarea, number, select, multi-select, boolean, date, slider and file fields. Required values, patterns and numeric limits are validated before onSubmit. confirmation="confirm" adds an explicit review step.

import {WritebackForm, type WorkflowField} from '@zuilib/workflows'

const fields: WorkflowField[] = [
  {name: 'amount', label: 'Forecast amount', type: 'number', required: true, min: 0},
  {name: 'confidence', label: 'Confidence', type: 'slider', min: 0, max: 100},
  {name: 'reason', label: 'Rationale', type: 'textarea', required: true},
]

<WritebackForm
  title="Update forecast"
  fields={fields}
  defaultValue={{amount: 2_850_000, confidence: 78}}
  onSubmit={saveForecast}
/>

validateWorkflowForm(fields, values) exposes the same validation as a pure function for server checks and tests.

ScenarioEditor

ScenarioEditor specializes WritebackForm for assumptions and saves without the confirmation step. Pass controlled value and onValueChange when the scenario should update charts while a person moves a slider.

Approvals

ApprovalControl renders one risk-labelled decision. ApprovalList renders a queue and forwards the chosen ApprovalItem through onApprove or onReject.

<ApprovalList
  items={pendingApprovals}
  onApprove={(item) => actions.run('approve-adjustment', {id: item.id})}
  onReject={(item) => actions.run('reject-adjustment', {id: item.id})}
/>

The host updates each item's status to approved or rejected after its action succeeds. Risk is presentation metadata, not authorization; enforce the decision with an Apps policy or your own backend.

Operations

• TaskQueue presents compact assigned work and calls onOpen(task).
• RunHistory shows queued, running, successful, failed and cancelled runs; failed rows expose onRetry(run) when supplied.
• AuditTimeline displays chronological actor, action, timestamp and detail entries.
• RecordDetail formats labelled record fields as text, number, date or badge.

<RunHistory
  runs={actionRuns}
  onRetry={(run) => retry(run.id)}
/>

Collaboration

CommentThread renders an audit-friendly discussion and optionally provides an add-comment composer. NotificationSettings is a controlled list of selected channel ids.

<CommentThread comments={comments} onAdd={addComment} />

<NotificationSettings
  channels={notificationChannels}
  value={selectedChannels}
  onValueChange={setSelectedChannels}
/>

Export summary

Export	Main data	Host callback
WritebackForm	WorkflowField[], WorkflowValues	onSubmit, onValueChange
ScenarioEditor	assumptions and values	onSave, onValueChange
ApprovalControl / ApprovalList	ApprovalItem	onApprove, onReject
CommentThread	CommentItem[]	onAdd
AuditTimeline	AuditEntry[]	—
RunHistory	RunEntry[]	onRetry
RecordDetail	record and RecordField[]	—
TaskQueue	TaskItem[]	onOpen
NotificationSettings	channels and selected ids	onValueChange