Command workflows

Preview Available in release assets

Queue consequential server commands through explicit native confirmation forms.

Server contract

Use .thin-command-workflows on a stable identified region. Datastar 1.0.2 may request server fragments; the application owns permissions, validation, idempotency, persistence, and reconciliation.

Server-rendered content, real links, native controls, and ordinary submitted forms preserve the complete workflow without Datastar or JavaScript.

Command workflows primary example

<form class="thin-command-workflows" id="publish-command" action="/api/advanced/dashboard?view=command" method="post" data-on:submit="@post('/api/advanced/dashboard?view=command')">
  <h2>Publish catalog</h2>
  <p>This command is validated and queued by the server.</p>
  <label>Environment<select name="environment">
  <option value="staging">Staging</option>
  <option value="production">Production</option>
</select>
</label>
<button class="thin-button">Queue publish</button>
</form>

Show code

<form class="thin-command-workflows" id="publish-command" action="/api/advanced/dashboard?view=command" method="post" data-on:submit="@post('/api/advanced/dashboard?view=command')">
  <h2>Publish catalog</h2>
  <p>This command is validated and queued by the server.</p>
  <label>Environment<select name="environment">
  <option value="staging">Staging</option>
  <option value="production">Production</option>
</select>
</label>
<button class="thin-button">Queue publish</button>
</form>

Anatomy

Stable server-owned region
Heading and current status
Native links or form controls
Server result and error text

Variants and sizes

Immediate command
Queued command

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Idle
Pending
Empty
Partial success
Error
Forbidden
Long content
Narrow container
Reconnect

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Submit posts command parameters; the server authorizes, validates, deduplicates, queues, and returns a durable job or result link.

Accessibility

Use semantic headings, native controls, explicit labels, selected counts, text status/error messages, and predictable focus. Announce completed server changes, not every intermediate client event; preserve source and focus order across patches.

Contract

LIVE

Basis

Native forms, links, file inputs, status regions, and action buttons; async semantics must be chosen per update

Evidence

tests/unit/library/dashboard-recipes.test.ts

API

Use .thin-command-workflows on a stable identified region. Datastar 1.0.2 may request server fragments; the application owns permissions, validation, idempotency, persistence, and reconciliation.

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Server-rendered content, real links, native controls, and ordinary submitted forms preserve the complete workflow without Datastar or JavaScript.

Assets and dependencies

/components.css

Dependencies: datastar@1.0.2

Source: packages/ui/src/items/dashboard/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes

Button