Take Switcher

take-switcherControls

Tiles for generated takes, with pin and regenerate.

$ pnpm dlx shadcn@latest add @pluginui/core-take-switcher
Loading interactive preview…

Install

Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.

Pulls in

sample-view-geometryaudio-clip-waveformcontrol-theme
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-take-switcher.json

Usage

Connect the documented props to your application or host.

example.tsx
import { TakeSwitcher } from "@/components/ui/take-switcher"

<TakeSwitcher takes={takes} value={selectedId} onValueChange={auditionAndInstall}
  renderBadge={(take) => pitchLabel(take.id)}
  onPinChange={(id, pinned) => host.pin(id, pinned)}
  onRegenerate={(id) => host.regenerate(id)} />
About Take Switcher

Generated variations as tiles lettered A, B, C: a mini waveform, a badge slot (a detected pitch, say), progress while generating, an error with retry, and pin and regenerate buttons. Selection is controlled and only ready takes can be selected. [ and ] cycle takes (within the switcher, or page-wide outside text fields), as do the arrow keys and the previous/next buttons. Tiles wrap to the width.

Props

PropTypeDefaultDescription
takes{ id, label?, peaks?, status?, progress?, pinned?, error? }[]—Tiles in generation order. status is "ready", "generating", "queued", "error" or "empty".
value / onValueChangestring | null / (id) => void—The selected take; only ready takes can be selected.
onPinChange / onRegeneratecallbacks—Show the pin and regenerate buttons. Regenerate is Retry on an errored tile.
renderBadge / refusals(take, index) => ReactNode / { pin?, regenerate? }—The badge slot, and reasons that disable an action (shown as its tooltip).
shortcuts"focus" | "window" | "none""focus"Where [ and ] work.

Interaction

  • Keyboard One tab stop on the selected tile. Arrows, Home/End, [ and ] move the selection over ready takes.
All controlsStart building