feat: Add a Red-Black tree to the Binary Search Tree page

New src/lib/algorithms/redBlack.js: a Red-Black planner with full insert,
delete (transplant + two-child successor copy + the four double-black fix-up
cases), and search. It runs the standard CLRS algorithm on a mutable working
copy (parent pointers + nil sentinel, ids preserved) and emits a setTree
snapshot after each rotation / recolor, so every fix-up step animates.

The /bst page gains a tree-type dropdown (BST / Red-Black); switching reseeds
the tree. tree-node renders red/black fill with the operation highlight as an
outer ring and a fill transition for smooth recoloring; tree-canvas passes the
node color; useTreeEditor gains reset(); TreeMenu gains an optional mode
dropdown. Home card renamed to "Binary Search Trees".

Author: TamimEhsan

src/app/bst/page.jsx

@@ -2,26 +2,41 @@
 
 import { useState } from 'react';
 import Navbar from '@/components/navbar';
-import { fromValues, insertActions, deleteActions, searchActions } from '@/lib/algorithms/bst';
+import * as bst from '@/lib/algorithms/bst';
+import * as redBlack from '@/lib/algorithms/redBlack';
 import { binaryLayout } from '@/components/tree/layout';
 import { useTreeEditor } from '@/components/tree/use-tree-editor';
 import TreeCanvas from '@/components/tree/tree-canvas';
 import TreeMenu from '@/components/tree/tree-menu';
 
+const MODES = ['Binary Search Tree', 'Red-Black Tree'];
+const SEED = [50, 30, 70, 20, 40, 60, 80];
+const seedFor = (mode) => (mode === 1 ? redBlack.fromValues(SEED) : bst.fromValues(SEED));
+
 export default function Bst() {
-    const [initialTree] = useState(() => fromValues([50, 30, 70, 20, 40, 60, 80]));
+    const [mode, setMode] = useState(0);
+    const [initialTree] = useState(() => seedFor(0));
     const g = useTreeEditor({ initialTree });
+    const algo = mode === 1 ? redBlack : bst;
+
+    const onModeChange = (m) => {
+        if (g.isRunning) return;
+        setMode(m);
+        g.reset(seedFor(m));
+    };
 
     return (
         <div className="flex flex-col h-screen">
             <Navbar />
             <div className="flex flex-1 overflow-hidden">
                 <TreeMenu
-                    title="Binary Search Tree"
+                    title={MODES[mode]}
+                    modes={MODES}
+                    onModeChange={onModeChange}
                     disabled={g.isRunning}
-                    onInsert={(v) => g.run(insertActions(g.getContext().tree, v))}
-                    onDelete={(v) => g.run(deleteActions(g.getContext().tree, v))}
-                    onSearch={(v) => g.run(searchActions(g.getContext().tree, v))}
+                    onInsert={(v) => g.run(algo.insertActions(g.getContext().tree, v))}
+                    onDelete={(v) => g.run(algo.deleteActions(g.getContext().tree, v))}
+                    onSearch={(v) => g.run(algo.searchActions(g.getContext().tree, v))}
                     onClear={g.clear}
                     onSpeedChange={g.setSpeed}
                 />

src/app/components/algorithm-cards.jsx

@@ -37,8 +37,8 @@ const algorithms = [
     image: '/AlgorithmVisualizer/images/network-flow.png?height=200&width=300'
   },{
     id: 'bst',
-    title: 'Binary Search Tree',
-    description: "Insert, delete, and search on a BST with animated tree restructuring",
+    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'
   },
   {

src/components/tree/tree-canvas.jsx

@@ -109,6 +109,7 @@ export default function TreeCanvas({ tree, layout, nodeState = {}, edgeState = {
                         value={n.value}
                         secondary={labels[n.id]}
                         state={nodeState[n.id]}
+                        color={n.color}
                     />
                 );
             })}

src/components/tree/tree-menu.jsx

@@ -1,12 +1,14 @@
 import { useState } from 'react';
 import { CustomSlider } from '@/components/custom-slider';
+import { CustomSelect } from '@/components/custom-select';
 import { Button } from '@/components/ui/button';
 import { Plus, Minus, Search, RotateCcw } from 'lucide-react';
 
-// Sidebar for tree visualizers: a value field + insert/delete/search actions,
-// clear, and a speed slider. Callers pass the op handlers (they get the number).
+// Sidebar for tree visualizers: an optional tree-type dropdown, a value field +
+// insert/delete/search actions, clear, and a speed slider. Callers pass the op
+// handlers (they get the number).
 
-export default function TreeMenu({ title, disabled, onInsert, onDelete, onSearch, onClear, onSpeedChange }) {
+export default function TreeMenu({ title, disabled, modes, onModeChange, onInsert, onDelete, onSearch, onClear, onSpeedChange }) {
     const [value, setValue] = useState('');
     const num = () => Number(value);
     const valid = value.trim() !== '' && Number.isFinite(num());
@@ -15,6 +17,17 @@ export default function TreeMenu({ title, disabled, onInsert, onDelete, onSearch
         <div className="w-64 bg-gray-100 p-4 space-y-6 overflow-auto">
             <h2 className="text-lg font-semibold">{title}</h2>
 
+            {modes && (
+                <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">Tree type</span>
+                        <div className="h-px flex-1 bg-gray-300" />
+                    </div>
+                    <CustomSelect title="Type" options={modes} onChange={onModeChange} disabled={disabled} />
+                </div>
+            )}
+
             <div className="space-y-3">
                 <div className="flex items-center gap-2">
                     <div className="h-px flex-1 bg-gray-300" />

src/components/tree/tree-node.jsx

@@ -11,11 +11,21 @@ const FILL = {
     remove: ['#f43f5e', '#be123c'],
 };
 
+// red/black node fills (used when a `color` is given, e.g. Red-Black trees)
+const RB_FILL = {
+    red: ['#dc2626', '#b91c1c'],
+    black: ['#1f2937', '#0f172a'],
+};
+// when a node has a fixed red/black fill, the operation highlight is drawn as
+// an outer ring instead of recoloring the fill
+const RING = { current: '#f59e0b', found: '#10b981', visited: '#94a3b8', remove: '#f43f5e' };
+
 const R = 16;
 
-export default function TreeNode({ x, y, value, secondary, state }) {
+export default function TreeNode({ x, y, value, secondary, state, color }) {
     if (state === 'hidden') return null;
-    const [bg, border] = FILL[state] || FILL.normal;
+    const [bg, border] = color ? RB_FILL[color] || RB_FILL.black : FILL[state] || FILL.normal;
+    const ring = color ? RING[state] : null; // operation highlight for colored nodes
     // shrink the primary label so longer values (e.g. recursion call labels
     // like "(4,3)") still fit inside the circle
     const len = String(value ?? '').length;
@@ -24,7 +34,8 @@ export default function TreeNode({ x, y, value, secondary, state }) {
     return (
         <g style={{ transform: `translate(${x}px, ${y}px)` }}>
             <animate attributeName="opacity" from="0" to="1" dur="0.4s" begin="0s" />
-            <circle r={R} fill={bg} stroke={border} strokeWidth="1.5" filter="url(#treeShadow)" />
+            {ring && <circle r={R + 3} fill="none" stroke={ring} strokeWidth="2" />}
+            <circle r={R} fill={bg} stroke={border} strokeWidth="1.5" filter="url(#treeShadow)" style={{ transition: 'fill 0.3s' }} />
             <text
                 textAnchor="middle"
                 dominantBaseline="central"

src/components/tree/use-tree-editor.js

@@ -57,9 +57,10 @@ export function useTreeEditor({ initialTree = null } = {}) {
 
     const getContext = () => ({ tree: treeRef.current });
     const clear = () => { if (isRunningRef.current) return; applyTree(null); clearMarks(); };
+    const reset = (t) => { if (isRunningRef.current) return; applyTree(t); clearMarks(); };
     const setSpeed = (s) => { speedRef.current = toDelay(s); };
 
-    return { tree, nodeState, edgeState, labels, status, isRunning, run, getContext, clear, setSpeed };
+    return { tree, nodeState, edgeState, labels, status, isRunning, run, getContext, clear, reset, setSpeed };
 }
 
 function sleep(ms) {