craftbits*

Pointer State Panel

Compact readout panel for named algorithm pointers — i, j, left, right, mid, prev, curr, next. Each entry renders as a name = value chip in monospace with a tone-aware accent. Pair it with a DSA viz component to give a structured snapshot of cursor positions at every step.

Pointers
i=3j=7mid=5
Customize
Layout
inline
Pointers
3

Installation

npx shadcn@latest add https://craftbits.dev/r/pointer-state-panel.json

Usage

import { PointerStatePanel } from "@craft-bits/core";
 
<PointerStatePanel
  title="Pointers"
  pointers={[
    { name: "i", value: 3, tone: "accent" },
    { name: "j", value: 7, tone: "success" },
    { name: "mid", value: 5 },
  ]}
/>

Understanding the component

  1. Per-pointer chip. Each entry renders as a single inline-flex chip: bold name, a muted equals sign, and a tabular-nums value. Mono font keeps numeric columns aligned so values that change between renders don't shift the layout.
  2. Tone mapping. The tone prop colours the chip border, the name label, and (for accent) the chip background. The five tones reuse the semantic tokens — cb-accent, cb-success, cb-warning, cb-error — so they re-skin with the theme.
  3. Inline vs stacked. layout="inline" (default) is a horizontal pill row for compact placement under a viz. layout="stacked" arranges chips vertically and reveals a description slot under each — useful when each pointer needs a sentence of context.
  4. Polite ARIA updates. The root element is role="status" with aria-live="polite" so screen readers announce value changes as the algorithm advances, without interrupting the user.
  5. Title is ReactNode. The native HTML title attribute is a string, so the component omits it from the spread and re-introduces a ReactNode version for rich titles (icons, formatted labels).

Props

PropTypeDefaultDescription
pointersPointerStateEntry[]requiredPointer rows. Each has name, value (number or string), optional tone and description.
layout"inline" | "stacked""inline"Inline runs chips in a row; stacked arranges them vertically and shows description text.
titleReactNode—Optional small-caps title rendered above the chip row.
classNamestring—Merged onto the root via cn().

Accessibility

  • Root element uses role="status" and aria-live="polite" so pointer-value changes are announced without interrupting other content.
  • Mono font with tabular-nums keeps values visually stable as they update.
  • Tone colours all clear WCAG AA against cb-bg-elevated thanks to the underlying --cb-* token contrast budget.

Credits

  • Extracted from: algoflashcards (src/lessons/primitives/viz/PointerStatePanel.tsx). The library version drops the source's hardcoded hex / trackHex parameter in favour of the semantic tone palette, adds a stacked layout with descriptions, and replaces inline springs with a static layout (animation is deferred to the consumer).