ApprovalWorkbench.

ProBlockApprovalsv0.2.0

A review queue beside a focused evidence panel. Approval is bound to the exact revision on screen, a changed request is never approved by accident, and execution is tracked separately from the decision.

Get Elements Pro

Demo dataResponsive

Approvals

APR-104 · Requested by Maya Chen · Oct 14, 10:15

Schedule the three reviewed posts

Review October launch drafts · Expires Oct 16

Revision under review: rev-07
Affected targets (3): POST-21POST-22POST-23

Evidence

Three launch draftsrev-07
Campaign briefrev-03

Review notes (optional)

Execution: Not authorized

Installation

Add the licensed registry once. Keep your license key in the project’s uncommitted environment.

components.json

{
  "registries": {
    "@elements-pro": {
      "headers": {
        "Authorization": "Bearer ${ELEMENTS_PRO_LICENSE_KEY}"
      },
      "url": "https://pro.elements.micropreneur.dev/r/{name}.json"
    }
  }
}

export ELEMENTS_PRO_LICENSE_KEY=mpro_...

pnpm dlx shadcn@latest add @elements-pro/approval-workbench

The shadcn CLI writes the source into your project. Files added:

components/elements-pro/approval-workbench.tsxblock
components/ui/badge.tsxui
components/ui/button.tsxui
components/ui/card.tsxui
components/ui/input.tsxui

Dependencies@base-ui/reactclass-variance-authorityclsxlucide-reacttailwind-merge

API

Prop	Type	Default	Description
requests (required)	ApprovalRequest[]	—	Requests with action, revision, targets, evidence and status.
selectedId	string	—	Controlled selection; omit to let the workbench manage it.
onSelect	(requestId) => void	—	Called when a request is selected.
onApprove	(requestId, revision, notes) => Promise<ApprovalResult>	—	Approve the revision on screen and return approved, conflict or error.
onRequestChanges	(requestId, notes) => void \| Promise<void>	—	Send the request back with review notes.
onReviewLatest	(requestId, latestRevision) => void	—	Open the newer revision after a conflict.

ApprovalResult

Prop	Type	Default	Description
status (required)	'approved' \| 'conflict' \| 'error'	—
latestRevision	string	—	Required for conflict.
message	string	—

Accessibility

The queue is a list of buttons; the selected request sets aria-current.
Decision outcomes (approved, conflict, failed save) are announced through a polite status region.
The approve button keeps its width while pending, so nothing shifts under the pointer.