Optimization Sequencer

A stepped sequencer for applying optimization passes in a user-chosen order. Renders an ordered applied list (numbered, removable), an available pool of the rest, and a progress bar with a cumulative-savings readout. Controlled or uncontrolled — drop in { id, label, savings? } passes and use it anywhere "pick a series of changes and watch the running tally" helps.

Installation

npx shadcn@latest add https://craftbits.dev/r/optimization-sequencer.json

Usage

import { OptimizationSequencer } from "@craft-bits/core";
 
<OptimizationSequencer
  title="Apply optimizations"
  steps={[
    { id: "route-split", label: "Route split", savings: 48 },
    { id: "tree-shake", label: "Tree shake", savings: 68 },
    { id: "dynamic-import", label: "Dynamic import", savings: 52 },
    { id: "vendor-chunk", label: "Vendor chunk", savings: 24 },
  ]}
  savingsUnit="KB"
/>

Controlled mode — drive appliedSteps from outside so the sequence can feed an external simulator:

const [applied, setApplied] = useState<string[]>([]);
 
<OptimizationSequencer
  steps={STEPS}
  appliedSteps={applied}
  onAppliedStepsChange={setApplied}
/>

Anatomy

• Header. Optional title (renders with the cb-label style) and a description sub-line. Omit both for a chromeless panel.
• Progress. A counter ("3 of 4") plus a cumulative-savings readout, with a thin progress bar showing the proportion of passes applied. The bar fills with the SPRINGS.snap token.
• Applied region. An ordered list of applied steps with a 1-based numbered accent pill, label, optional savings, and a remove button. A reset button in the region header clears the whole sequence.
• Available region. The rest of the steps as click-to-apply buttons. Hidden once every step is applied.

Understanding the component

1. Apply order matters. The applied list preserves the order steps were picked — the sequencer is intended for lessons where order changes the outcome. Removing a step closes the gap; re-applying appends to the end.
2. Controlled + uncontrolled. Provide appliedSteps with onAppliedStepsChange to drive from outside, or defaultAppliedSteps for the uncontrolled case. Omit both and the sequence starts empty.
3. Cumulative savings. Each step can declare an optional savings number. The readout sums savings across applied steps and renders with the savingsUnit suffix. Steps without savings contribute zero.
4. Motion. Applied items use Motion's layout so removing a step animates the rest into place; the progress bar fills with a spring. Every animation short-circuits under prefers-reduced-motion.

Props

OptimizationSequencerStep

Accessibility

• The wrapper is a <section> with data-cb-edu="optimization-sequencer" and data-cb-empty="true | false".
• The progress bar is role="progressbar" with aria-valuenow / aria-valuemin / aria-valuemax.
• The applied list is an <ol role="list"> with aria-live="polite"; each entry exposes data-cb-applied-id.
• Apply / remove buttons carry verbose aria-labels like Apply Tree shake and Remove Tree shake so the action is conveyed without depending on icons or position.
• The reset button is disabled when nothing is applied and labels itself Reset applied steps.
• Animations are limited to opacity, transform, and width and short-circuit under prefers-reduced-motion.

Credits

• Extracted from: terminal-dreams (src/components/frontend-design/perf-bundle/ui/OptimizationSequencer.tsx). The original was bound to a fixed four-key OptimizationKey union, a global OPT_STEPS registry from a bundle simulator, and Framer Motion's Reorder group for drag-to-reorder. This rewrite drops the global registry and the reorder gesture (apply order is the order steps are picked), generalises the data shape, adds controlled / uncontrolled support, surfaces a progress bar plus cumulative savings readout, and replaces the project's CSS module with token-driven Tailwind.