React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is enabled on this template. See this documentation for more information.

Note: This will impact Vite dev & build performances.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  # Linear Sorting Visualisation

  Interactive React + Vite + Tailwind application for demonstrating the mechanics of three linear-time sorting algorithms — Counting Sort, LSD Radix Sort, and Bucket Sort. The interface synchronises algorithm state, pseudocode highlighting, and per-step explanations so each computer operation remains transparent.

  ## Features

  - Visual animations for distribution, counting, and collection phases across counting, radix, and bucket sort.
  - Step-by-step playback with play/pause, scrubbing, single-step navigation, and adjustable speed.
  - Pseudocode panel that highlights the active instructions in sync with the simulation.
  - Execution metrics tracking reads, writes, comparisons, allocations, and pass counters.
  - Dataset controls for size, range, randomisation, and custom list input; algorithm-specific knobs for radix base and bucket count.
  - Tailwind-driven minimal UI with responsive layout optimised for desktops and tablets.

  ## Getting Started

  ```bash
  # Install dependencies
  npm install

  # Start the dev server
  npm run dev

  # Type-check and build for production
  npm run build

The dev server runs on the default Vite port (usually http://localhost:5173).

Using the Visualiser

1. Choose an algorithm from the left panel. The active card displays complexity and best-use hints.
2. Configure the dataset using the size slider and range inputs, or paste custom numbers separated by commas/spaces. Click “Randomize” to regenerate within the selected bounds.
3. Adjust algorithm options when available:
   • Radix Sort: change the base (2–16). Values must be non-negative integers.
   • Bucket Sort: tune the number of buckets to balance precision and speed.
4. Press Play to run the animation. Use Prev/Next for manual stepping or drag the progress slider to scrub through the timeline.
5. Inspect the visual board for array/bucket transitions, the pseudocode panel for highlighted lines, and the metrics card for per-step commentary and counts.

Algorithm Notes

• Counting Sort: Supports arbitrary integer ranges by translating values into contiguous count buckets. Shows frequency, prefix accumulation, and stable placement.
• Radix Sort (LSD): Performs counting-sort passes per digit. Requires non-negative integers; the base selector controls digit grouping.
• Bucket Sort: Distributes numbers into range-based buckets and sorts each bucket with insertion sort, ideal for near-uniform distributions.

Project Structure

• src/lib/algorithms/ — Generator-based implementations emitting visualisation steps.
• src/components/ — UI modules (algorithm picker, dataset controls, playback, pseudocode, metrics, and main board).
• src/hooks/usePlaybackController.ts — Handles play state, scrubbing, and timing.
• src/lib/datasets.ts — Dataset helpers for random generation and parsing custom input.

Next Steps

• Extend metrics or add comparative analytics across runs.
• Introduce additional linear-time techniques (e.g., pigeonhole sort) or alternate radix variants.
• Add export/share functionality for datasets and run histories.