feat: Add a Binary Heap visualizer

New /binary-heap segment on the reusable tree component: a min-heap with
insert (sift-up), extract-min (sift-down), build-heap from a typed list
(Floyd O(n) heapify), and heapsort (descending, since it's a min-heap).

src/lib/algorithms/heap.js keeps the heap as an array of {id,value} and
rebuilds a complete binary tree per setTree; sifts swap entries with their ids
so nodes slide past each other on the rAF tween. Reuses binaryLayout and the
existing node states (amber = active pair, green = sorted). Adds a heap-specific
menu and a home card (placeholder image).

Author: TamimEhsan

public/images/binary-heap.png

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { CustomSlider } from '@/components/custom-slider';
+import { Button } from '@/components/ui/button';
+import { Plus, ArrowUpFromLine, Wand2, ArrowDownWideNarrow, RotateCcw } from 'lucide-react';
+
+// Sidebar for the binary heap (min-heap): insert a value, extract the min,
+// build a heap from a typed list, and run heapsort.
+
+export default function HeapMenu({ disabled, onInsert, onExtract, onBuild, onHeapsort, onClear, onSpeedChange }) {
+    const [value, setValue] = useState('');
+    const [list, setList] = useState('5, 3, 8, 1, 9, 2, 7');
+
+    const num = () => Number(value);
+    const valid = value.trim() !== '' && Number.isFinite(num());
+    const parsedList = () => list.split(/[\s,]+/).map(Number).filter((n) => Number.isFinite(n));
+
+    return (
+        <div className="w-64 bg-gray-100 p-4 space-y-6 overflow-auto">
+            <h2 className="text-lg font-semibold">Binary Heap (min)</h2>
+
+            <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                    <div className="h-px flex-1 bg-gray-300" />
+                    <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Operation</span>
+                    <div className="h-px flex-1 bg-gray-300" />
+                </div>
+                <div className="space-y-2">
+                    <label className="text-sm font-medium whitespace-nowrap">Value</label>
+                    <input
+                        type="number"
+                        value={value}
+                        onChange={(e) => setValue(e.target.value)}
+                        disabled={disabled}
+                        className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
+                    />
+                </div>
+                <div className="flex gap-2">
+                    <Button className="flex-1" onClick={() => valid && onInsert(num())} disabled={disabled || !valid}>
+                        <Plus /> Insert
+                    </Button>
+                    <Button className="flex-1" variant="outline" onClick={onExtract} disabled={disabled}>
+                        <ArrowUpFromLine /> Extract
+                    </Button>
+                </div>
+            </div>
+
+            <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                    <div className="h-px flex-1 bg-gray-300" />
+                    <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Build</span>
+                    <div className="h-px flex-1 bg-gray-300" />
+                </div>
+                <div className="space-y-2">
+                    <label className="text-sm font-medium whitespace-nowrap">List</label>
+                    <input
+                        type="text"
+                        value={list}
+                        onChange={(e) => setList(e.target.value)}
+                        disabled={disabled}
+                        placeholder="e.g. 5, 3, 8, 1"
+                        className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
+                    />
+                </div>
+                <Button className="w-full" variant="outline" onClick={() => onBuild(parsedList())} disabled={disabled || parsedList().length === 0}>
+                    <Wand2 /> Build heap
+                </Button>
+            </div>
+
+            <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                    <div className="h-px flex-1 bg-gray-300" />
+                    <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</span>
+                    <div className="h-px flex-1 bg-gray-300" />
+                </div>
+                <Button className="w-full" variant="outline" onClick={onHeapsort} disabled={disabled}>
+                    <ArrowDownWideNarrow /> Heapsort
+                </Button>
+                <p className="text-xs text-gray-500">Min-heap heapsort sorts in descending order.</p>
+                <CustomSlider title="Speed" defaultValue={50} min={10} max={100} step={1} onChange={onSpeedChange} />
+                <Button className="w-full" variant="outline" onClick={onClear} disabled={disabled}>
+                    <RotateCcw /> Clear
+                </Button>
+            </div>
+        </div>
+    );
+}

src/app/binary-heap/menu.jsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from 'react';
+import Navbar from '@/components/navbar';
+import { fromValues, insertActions, extractActions, buildActions, heapsortActions } from '@/lib/algorithms/heap';
+import { binaryLayout } from '@/components/tree/layout';
+import { useTreeEditor } from '@/components/tree/use-tree-editor';
+import TreeCanvas from '@/components/tree/tree-canvas';
+import HeapMenu from './menu';
+
+export default function BinaryHeap() {
+    const [initialTree] = useState(() => fromValues([50, 30, 70, 20, 40, 60, 80]));
+    const g = useTreeEditor({ initialTree });
+
+    return (
+        <div className="flex flex-col h-screen">
+            <Navbar />
+            <div className="flex flex-1 overflow-hidden">
+                <HeapMenu
+                    disabled={g.isRunning}
+                    onInsert={(v) => g.run(insertActions(g.getContext().tree, v))}
+                    onExtract={() => g.run(extractActions(g.getContext().tree))}
+                    onBuild={(values) => g.run(buildActions(values))}
+                    onHeapsort={() => g.run(heapsortActions(g.getContext().tree))}
+                    onClear={g.clear}
+                    onSpeedChange={g.setSpeed}
+                />
+                <div className="relative flex-1 p-6">
+                    {g.status && (
+                        <div className="absolute top-3 left-3 z-10 rounded-md bg-slate-800 px-3 py-1.5 text-xs font-semibold text-white shadow">
+                            {g.status}
+                        </div>
+                    )}
+                    <TreeCanvas
+                        tree={g.tree}
+                        layout={binaryLayout}
+                        nodeState={g.nodeState}
+                        edgeState={g.edgeState}
+                        labels={g.labels}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}

src/app/binary-heap/page.jsx

@@ -40,6 +40,11 @@ const algorithms = [
     title: 'Binary Search Trees',
     description: "Insert, delete, and search on a plain BST or a Red-Black tree, with animated rotations and recoloring",
     image: '/AlgorithmVisualizer/images/bst.png?height=200&width=300'
+  },{
+    id: 'binary-heap',
+    title: 'Binary Heap',
+    description: "Min-heap: insert, extract-min, build-heap from a list, and heapsort with animated sift up and down",
+    image: '/AlgorithmVisualizer/images/binary-heap.png?height=200&width=300'
   },
   {
     id: 'recursion-tree',

src/app/components/algorithm-cards.jsx

@@ -0,0 +1,146 @@
+// Binary Heap (min-heap) — action-log planners for insert / extract-min /
+// build-heap / heapsort, rendered on the reusable tree component.
+//
+// A heap is a complete binary tree stored as an array: node i's children are
+// 2i+1 and 2i+2. We keep the heap as an array of { id, value } and rebuild a
+// logical tree from it for each `setTree`. A sift swaps two array entries
+// *including their ids*, so the two nodes' target positions swap and the canvas
+// tween slides them past each other.
+
+let counter = 0;
+const mkNode = (value) => ({ id: 'h' + ++counter, value });
+
+// array of { id, value } -> logical tree { id, value, left, right }
+export function buildTree(arr) {
+    const make = (i) => {
+        if (i >= arr.length) return null;
+        return { id: arr[i].id, value: arr[i].value, left: make(2 * i + 1), right: make(2 * i + 2) };
+    };
+    return make(0);
+}
+
+// logical complete tree -> level-order array of { id, value }
+export function toArray(tree) {
+    const out = [];
+    const q = tree ? [tree] : [];
+    while (q.length) {
+        const n = q.shift();
+        out.push({ id: n.id, value: n.value });
+        if (n.left) q.push(n.left);
+        if (n.right) q.push(n.right);
+    }
+    return out;
+}
+
+export function fromValues(values) {
+    const a = values.map(mkNode);
+    heapify(a);
+    return buildTree(a);
+}
+
+// in-place Floyd build-heap (no animation) — used for seeding
+function heapify(a) {
+    for (let i = Math.floor(a.length / 2) - 1; i >= 0; i--) siftDown(a, i, a.length);
+}
+
+function siftDown(a, i, size) {
+    for (;;) {
+        let small = i;
+        const l = 2 * i + 1;
+        const r = 2 * i + 2;
+        if (l < size && a[l].value < a[small].value) small = l;
+        if (r < size && a[r].value < a[small].value) small = r;
+        if (small === i) break;
+        [a[i], a[small]] = [a[small], a[i]];
+        i = small;
+    }
+}
+
+const snap = (actions, a) => actions.push({ type: 'setTree', tree: buildTree(a) });
+const mark = (actions, a, idxs, state) => {
+    for (const i of idxs) if (a[i]) actions.push({ type: 'markNode', id: a[i].id, state });
+};
+
+export function insertActions(tree, value) {
+    const actions = [];
+    const a = toArray(tree);
+    a.push(mkNode(value));
+    snap(actions, a); // appears at the end
+    let i = a.length - 1;
+    while (i > 0) {
+        const p = Math.floor((i - 1) / 2);
+        mark(actions, a, [i, p], 'current');
+        if (a[i].value >= a[p].value) break;
+        [a[i], a[p]] = [a[p], a[i]]; // ids travel with values
+        snap(actions, a);
+        i = p;
+    }
+    actions.push({ type: 'status', text: `Inserted ${value}` });
+    return actions;
+}
+
+export function extractActions(tree) {
+    const actions = [];
+    const a = toArray(tree);
+    if (!a.length) {
+        actions.push({ type: 'status', text: 'Heap is empty' });
+        actions.push({ type: 'clear' });
+        return actions;
+    }
+    const min = a[0].value;
+    mark(actions, a, [0], 'current');
+    const last = a.length - 1;
+    if (last > 0) {
+        [a[0], a[last]] = [a[last], a[0]];
+        snap(actions, a); // min swapped to the end
+    }
+    a.pop(); // remove the min
+    snap(actions, a);
+    siftDownActions(actions, a, 0, a.length);
+    actions.push({ type: 'status', text: `Extracted min ${min}` });
+    return actions;
+}
+
+// animated sift-down: emit a snapshot per swap within a[0..size)
+function siftDownActions(actions, a, i, size) {
+    for (;;) {
+        let small = i;
+        const l = 2 * i + 1;
+        const r = 2 * i + 2;
+        if (l < size && a[l].value < a[small].value) small = l;
+        if (r < size && a[r].value < a[small].value) small = r;
+        mark(actions, a, [i, l, r].filter((k) => k < size), 'current');
+        if (small === i) break;
+        [a[i], a[small]] = [a[small], a[i]];
+        snap(actions, a); // render the full array; `size` only bounds the sift
+        i = small;
+    }
+}
+
+export function buildActions(values) {
+    const actions = [];
+    const a = values.map(mkNode);
+    snap(actions, a); // raw, unheapified
+    for (let i = Math.floor(a.length / 2) - 1; i >= 0; i--) {
+        siftDownActions(actions, a, i, a.length);
+    }
+    actions.push({ type: 'status', text: 'Built min-heap' });
+    return actions;
+}
+
+export function heapsortActions(tree) {
+    const actions = [];
+    const a = toArray(tree);
+    let size = a.length;
+    while (size > 1) {
+        const last = size - 1;
+        [a[0], a[last]] = [a[last], a[0]];
+        snap(actions, a); // current min parked at the end of the active region
+        actions.push({ type: 'markNode', id: a[last].id, state: 'found' }); // sorted
+        size--;
+        siftDownActions(actions, a, 0, size);
+    }
+    if (a.length) actions.push({ type: 'markNode', id: a[0].id, state: 'found' });
+    actions.push({ type: 'status', text: 'Heapsort complete (descending)' });
+    return actions;
+}