Acquisition sequencer

Edits supplied capture steps, exact exposure, time, depth and channel values, and distinguishes requested actions from recorded run state.

Preview

Capture plan

BaselineNot run
Exposure (ms)Time offset (s)Depth (µm)
Channel
Follow-upNot run
Exposure (ms)Time offset (s)Depth (µm)
Channel

In action

Prepare a capture plan

Optics bench / Draft sequence

Sample 042 capture plan

Edit supplied settings and record a plan review. No acquisition is started.

BaselineNot run
Exposure (ms)Time offset (s)Depth (µm)
Channel
Follow-upNot run
Exposure (ms)Time offset (s)Depth (µm)
Channel

When to use

Use it for

Editing and reordering an existing capture plan with onStepsChange.
Pass exact values and units from the acquisition application; the component performs no conversions or scheduling.
Use explicit step actions and onAction to request operations. Supply pending and confirmedLabel from actual host state.

Not for

Treating an edit or action callback as proof that capture ran successfully.
Deriving instrument settings or executing acquisition. The host owns commands, persistence and confirmations.
More than 128 steps or 128 channels.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { AcquisitionSequencer } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/acquisition-sequencer.

2. Vendor the source

npx @noorddev/vlak-cli add acquisition-sequencer

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/acquisition-sequencer.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { useState } from "react";
import { AcquisitionSequencer } from "@noorddev/vlak-react";
import type { AcquisitionStep } from "@noorddev/vlak-react";

function CapturePlan() {
  const [steps, setSteps] = useState<readonly AcquisitionStep[]>([
    { id: "first", label: "First plane", exposure: 10, exposureUnit: "ms", time: 0, timeUnit: "s", depth: -1, depthUnit: "µm", channel: "phase", status: "Not run" },
    { id: "second", label: "Second plane", exposure: 10, exposureUnit: "ms", time: 5, timeUnit: "s", depth: 0, depthUnit: "µm", channel: "phase", status: "Not run" },
  ]);
  return <AcquisitionSequencer label="Capture plan" channels={[{ id: "phase", label: "Phase" }]} steps={steps} onStepsChange={setSteps} />;
}

Props

AcquisitionSequencer

A controlled capture plan editor and recorded-state display, without an acquisition engine.

Prop	Type	Default
`label`required	`ReactNode`
`steps`required	`readonly AcquisitionStep[]`
`channels`required	`readonly AcquisitionChannel[]`
`onStepsChange`	`(steps: readonly AcquisitionStep[]) => void`
`onAction`	`(stepId: string, actionId: string) => void`
`description`	`ReactNode`
`readOnly`	`boolean`	`false`

Also accepts FieldsetHTMLAttributes<HTMLFieldSetElement>.

Keyboard

Keys	Does
`Tab`	Moves through enabled numeric inputs, channel selectors and step actions.
`Arrow keys, Home, End, typing`	Edits native numeric fields or navigates the opened channel list.
`Enter, Space`	Confirms the active channel option or requests the focused action or reorder.
`Escape`	Closes the channel list without changing the supplied selection.

Accessibility

Step fields and action names include the step number and label, preventing ambiguity between repeated capture names.
Exposure and time offsets use a native non-negative minimum; signed depth values and all supplied units are preserved.
Pending steps disable editing and actions while their last recorded state remains visible.
Controls have 44px targets. Controlled native inputs retain the supplied plan through form resets.
The fieldset ref and native attributes pass through; no callback is interpreted as an actual run confirmation.
Generic controls compose the shared Input, Select and Button primitives; the native numeric fields and Select backing control preserve form values.

Markup

<fieldset class="rs-acquisition-sequencer"><legend class="rs-acquisition-sequencer-legend">Capture plan</legend><ol class="rs-acquisition-sequencer-list"><li class="rs-acquisition-sequencer-step"><div class="rs-acquisition-sequencer-head"><span class="rs-acquisition-sequencer-title">First plane</span><span class="rs-acquisition-sequencer-copy">Not run</span></div><p class="rs-acquisition-sequencer-value">Exposure 10 ms · Time offset 0 s · Depth -1 µm · Phase</p></li></ol></fieldset>

Classes

.rs-acquisition-sequencer.rs-acquisition-sequencer-legend.rs-acquisition-sequencer-list.rs-acquisition-sequencer-step.rs-acquisition-sequencer-head.rs-acquisition-sequencer-title.rs-acquisition-sequencer-fields.rs-acquisition-sequencer-label.rs-acquisition-sequencer-control.rs-acquisition-sequencer-value.rs-acquisition-sequencer-copy.rs-acquisition-sequencer-actions.rs-acquisition-sequencer-action

Depends on

/button /input /select