Stack navigator

Navigates supplied depth, time, channel and stage-position axes while preserving exact physical readings and indexed positions.

Preview

Stack coordinates

Depth

Position 2 of 3; 0 µm

Time

Position 1 of 3; 0 s

Channel

Position 1 of 2; Phase

Stage position

Position 1 of 2; x 12.5, y -1.5 µm

In action

Inspect a stack

Sample 042 / Recorded image stack

Recorded coordinates

Select an existing plane in the supplied stack

Depth

Position 2 of 3; 0 µm

Time

Position 1 of 3; 0 s

Channel

Position 1 of 2; Phase

Stage position

Position 1 of 2; x 12.5, y -1.5 µm

When to use

Use it for

Image stacks with explicit axis labels, sampled physical values and known position indexes.
Selection values are zero-based indexes; displayed position counts are one-based. Physical values are never calculated from spacing.
name submits one selected index per axis. Controlled values remain caller-owned; native form reset restores uncontrolled defaults.

Not for

Calling an instrument, calculating stage motion, or inferring positions from an index.
More than 8 axes or 8192 total positions; the component reports the bound rather than truncating axes.

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 { StackNavigator } from "@noorddev/vlak-react";

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

2. Vendor the source

npx @noorddev/vlak-cli add stack-navigator

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/stack-navigator.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 { StackNavigator } from "@noorddev/vlak-react";

<StackNavigator label="Image stack" name="stack" axes={[
  { id: "depth", label: "Depth", unit: "µm", positions: [{ value: -1 }, { value: 0 }, { value: 1 }] },
  { id: "time", label: "Time", unit: "s", positions: [{ value: 0 }, { value: 5 }, { value: 10 }] },
  { id: "channel", label: "Channel", positions: [{ value: "Phase" }, { value: "Channel 2" }] },
  { id: "stage", label: "Stage position", unit: "µm", positions: [{ value: "x 12.5, y -1.5" }] },
]} defaultValue={{ depth: 1, time: 0, channel: 0, stage: 0 }} />

Props

StackNavigator

Navigates supplied stack coordinates without calculating stage positions or calling an instrument.

Prop	Type	Default
`label`required	`ReactNode`
`axes`required	`readonly StackAxis[]`
`value`	`Readonly<Record<string, number \| null>>`
`defaultValue`	`Readonly<Record<string, number \| null>>`	`{}`
`onValueChange`	`(value: StackSelection) => void`
`description`	`ReactNode`
`readOnly`	`boolean`	`false`

Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue">.

Keyboard

Keys	Does
`Tab`	Moves between enabled previous, position-select and next controls.
`Arrow keys, Home, End, typing`	Opens and navigates the position list; disabled positions are skipped.
`Enter, Space`	Confirms the active list option or activates the focused previous or next button.
`Escape`	Closes the position list without changing selection.

Accessibility

Every axis has a visible select label and a text description containing the exact displayed index and physical value.
Zero and negative physical positions remain visible. Missing or invalid readings are explicitly unavailable.
Each input and button has a 44px target and visible focus; no axis is selected implicitly.
Read-only values remain submitted through hidden fields, while disabled fieldsets do not submit.
The fieldset ref, form association, native attributes, className and style pass through.
The shared Select and Button primitives supply combobox navigation and control styling; native form values remain available through the Select backing control.

Markup

<fieldset class="rs-stack-navigator"><legend class="rs-stack-navigator-legend">Image stack</legend><div class="rs-stack-navigator-axis"><p class="rs-stack-navigator-label">Depth</p><p class="rs-stack-navigator-copy">Position 1 of 3; -1 µm</p></div></fieldset>

Classes

.rs-stack-navigator.rs-stack-navigator-legend.rs-stack-navigator-axis.rs-stack-navigator-label.rs-stack-navigator-row.rs-stack-navigator-step.rs-stack-navigator-copy

Depends on

/button /select