@stsdti/approvable-workflow-editor

@stsdti/approvable-workflow-editor

The visual workflow editor for laravel-approvable: a Vue Flow canvas over the same definition format the PHP engine executes, with a live preview that replays an event log through the real reducer.

You probably do not need to install this

The Laravel package serves the editor at a mounted route, the way Horizon and Telescope do. After composer require, visit:

https://myproject.test/workflow

That page is a self-contained bundle shipped inside the PHP package — no npm install, no build step, no Tailwind configuration.

Install this package only to embed the editor inside your own SPA:

npm install @stsdti/approvable-workflow-editor

This package is ESM only: it publishes ES modules and no CommonJS build. Use import, or a dynamic import() from CommonJS.

Only the built bundle and its stylesheet ship. The .vue sources are not published: their styling is Tailwind that this package's own build compiles in, so importing one directly would give you a component whose styles silently do not apply — and configuring Tailwind is exactly what installing this saves you. The package entry point and ./style.css are the whole surface:

import { WorkflowEditorPage, WORKFLOW_STORE, WORKFLOW_NAVIGATION, createRouterNavigation, createApiStore } from '@stsdti/approvable-workflow-editor'
import '@stsdti/approvable-workflow-editor/style.css'

app.provide(WORKFLOW_STORE, createApiStore())
app.provide(WORKFLOW_NAVIGATION, createRouterNavigation(router))

Storage

Definitions live wherever you point the editor. Which driver is in use is a server-side config change; the editor is handed a store and never reaches for storage itself.

Any object with list/get/create/update/remove/resolveReference is a valid store, so IndexedDB or a git-backed store needs no fork.

Sub-workflow references

A Group node can point at another stored definition. Those graphs are inlined client-side, in every driver, before the definition is sent to the preview endpoint — which documents that it expects a fully resolved graph, storage being the host's concern rather than the package's.

One resolution path for both drivers, and it is what lets the localStorage driver work against the stock preview endpoint with no server-side storage at all.

Styling

The editor compiles its own Tailwind into style.css. You do not install Tailwind, add content globs, or install shadcn-vue.

This is deliberately the opposite choice from @stsdti/approvable-vue, whose components embed in your screens and therefore ship unstyled with swappable themes. The editor renders as a full page and never blends into a host design, so bundling its styling is simpler and more reliable.

Custom action buttons

The preview renders custom buttons through simulators, mirroring how the live approval renders them through action renderers:

import { registerWorkflowActionSimulator } from '@stsdti/approvable-workflow-editor'

registerWorkflowActionSimulator('pdf-signature', SignatureSimulator)

License

MIT