@tomaszjarosz/react-visualizers 0.4.11 → 0.4.13

package/dist/index.cjs

@@ -2052,13 +2052,13 @@ const BINARY_SEARCH_CODE = [
   "      right = mid - 1",
   "  return -1  // Not found"
 ];
-const LEGEND_ITEMS$K = [
+const LEGEND_ITEMS$L = [
   { color: "bg-blue-100", label: "Search Space" },
   { color: "bg-gray-200", label: "Eliminated" },
   { color: "bg-purple-500", label: "Mid" },
   { color: "bg-green-500", label: "Found" }
 ];
-const BADGES$I = [
+const BADGES$J = [
   { label: "Time: O(log n)", variant: "green" },
   { label: "Space: O(1)", variant: "green" }
 ];
@@ -2404,7 +2404,7 @@ const BinarySearchVisualizerComponent = ({
     {
       id: "binarysearch-visualizer",
       title: "Binary Search",
-      badges: BADGES$I,
+      badges: BADGES$J,
       gradient: "green",
       className,
       minHeight: 350,
@@ -2431,7 +2431,7 @@ const BinarySearchVisualizerComponent = ({
         accentColor: "green"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$K,
+      legendItems: LEGEND_ITEMS$L,
       code: showCode ? BINARY_SEARCH_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -2499,7 +2499,7 @@ const ALGORITHM_CODE = {
     "    else arr[k++] = right[j++]"
   ]
 };
-const LEGEND_ITEMS$J = [
+const LEGEND_ITEMS$K = [
   { color: "bg-blue-500", label: "Default" },
   { color: "bg-amber-400", label: "Comparing" },
   { color: "bg-red-500", label: "Swapping" },
@@ -3322,7 +3322,7 @@ const SortingVisualizerComponent = ({
         extraControls: sizeControl
       },
       showControls,
-      legendItems: LEGEND_ITEMS$J,
+      legendItems: LEGEND_ITEMS$K,
       code: showCode ? ALGORITHM_CODE[algorithm] : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -3876,7 +3876,7 @@ const SortingComparisonVisualizerComponent = ({
   );
 };
 const SortingComparisonVisualizer = React.memo(SortingComparisonVisualizerComponent);
-const BADGES$H = [
+const BADGES$I = [
   { label: "Time: O((V+E) log V)", variant: "orange" },
   { label: "Space: O(V)", variant: "amber" }
 ];
@@ -3893,7 +3893,7 @@ const DIJKSTRA_CODE = [
   "        dist[v] = dist[u]+w",
   "        pq.add((dist[v], v))"
 ];
-const LEGEND_ITEMS$I = [
+const LEGEND_ITEMS$J = [
   { color: "bg-blue-100", label: "Unvisited", border: "#60a5fa" },
   { color: "bg-yellow-400", label: "Current", border: "#ca8a04" },
   { color: "bg-green-400", label: "Visited", border: "#16a34a" }
@@ -4217,7 +4217,7 @@ const DijkstraVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Dijkstra's Algorithm",
-      badges: BADGES$H,
+      badges: BADGES$I,
       gradient: "orange",
       className,
       minHeight: 500,
@@ -4241,7 +4241,7 @@ const DijkstraVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$I,
+      legendItems: LEGEND_ITEMS$J,
       code: showCode ? DIJKSTRA_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -4258,7 +4258,7 @@ const DEFAULT_ITEMS$1 = [
   { weight: 5, value: 6 }
 ];
 const DEFAULT_CAPACITY$1 = 8;
-const BADGES$G = [
+const BADGES$H = [
   { label: "Time: O(nW)", variant: "teal" },
   { label: "Space: O(nW)", variant: "cyan" }
 ];
@@ -4272,7 +4272,7 @@ const KNAPSACK_CODE = [
   "      take = dp[i-1][w-weight] + value",
   "      dp[i][w] = max(skip, take)"
 ];
-const LEGEND_ITEMS$H = [
+const LEGEND_ITEMS$I = [
   { color: "bg-gray-50", label: "Not computed", border: "#d1d5db" },
   { color: "bg-blue-100", label: "Computed" },
   { color: "bg-green-400", label: "Take item" },
@@ -4531,7 +4531,7 @@ const DPVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "0/1 Knapsack (Dynamic Programming)",
-      badges: BADGES$G,
+      badges: BADGES$H,
       gradient: "teal",
       className,
       minHeight: 450,
@@ -4555,7 +4555,7 @@ const DPVisualizerComponent = ({
         accentColor: "teal"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$H,
+      legendItems: LEGEND_ITEMS$I,
       code: showCode ? KNAPSACK_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -4597,7 +4597,7 @@ const BFS_CODE = [
   "        visited[neighbor] = true",
   "        queue.enqueue(neighbor)"
 ];
-const LEGEND_ITEMS$G = [
+const LEGEND_ITEMS$H = [
   { color: "bg-blue-100", label: "Unvisited", border: "#60a5fa" },
   { color: "bg-yellow-400", label: "Current", border: "#ca8a04" },
   { color: "bg-green-400", label: "Visited", border: "#16a34a" }
@@ -5012,7 +5012,7 @@ const GraphVisualizerComponent = ({
         accentColor: "purple"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$G,
+      legendItems: LEGEND_ITEMS$H,
       code: showCode ? algorithmCode : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -5067,7 +5067,7 @@ const ASTAR_CODE = [
   "        openSet.add(neighbor)",
   "  return failure"
 ];
-const LEGEND_ITEMS$F = [
+const LEGEND_ITEMS$G = [
   { color: "bg-green-500", label: "Start" },
   { color: "bg-red-500", label: "End" },
   { color: "bg-gray-700", label: "Wall" },
@@ -5076,7 +5076,7 @@ const LEGEND_ITEMS$F = [
   { color: "bg-yellow-400", label: "Current" },
   { color: "bg-purple-400", label: "Path" }
 ];
-const BADGES$F = [
+const BADGES$G = [
   { label: "Time: O(E log V)", variant: "orange" },
   { label: "Optimal Path", variant: "orange" }
 ];
@@ -5376,7 +5376,7 @@ const AStarVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "A* Pathfinding",
-      badges: BADGES$F,
+      badges: BADGES$G,
       gradient: "orange",
       className,
       minHeight: 400,
@@ -5400,7 +5400,7 @@ const AStarVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$F,
+      legendItems: LEGEND_ITEMS$G,
       code: showCode ? ASTAR_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -5445,14 +5445,14 @@ const TOPO_CODE = [
   '    return "Cycle detected!"',
   "  return result"
 ];
-const LEGEND_ITEMS$E = [
+const LEGEND_ITEMS$F = [
   { color: "bg-gray-100", label: "Unprocessed", border: "#d1d5db" },
   { color: "bg-blue-400", label: "In queue" },
   { color: "bg-amber-400", label: "Processing" },
   { color: "bg-green-400", label: "Sorted" },
   { color: "bg-purple-200", label: "Edge being processed" }
 ];
-const BADGES$E = [
+const BADGES$F = [
   { label: "Time: O(V+E)", variant: "blue" },
   { label: "Kahn Algorithm", variant: "cyan" }
 ];
@@ -5760,7 +5760,7 @@ const TopologicalSortVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Topological Sort",
-      badges: BADGES$E,
+      badges: BADGES$F,
       gradient: "cyan",
       className,
       minHeight: 400,
@@ -5784,7 +5784,7 @@ const TopologicalSortVisualizerComponent = ({
         accentColor: "cyan"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$E,
+      legendItems: LEGEND_ITEMS$F,
       code: showCode ? TOPO_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -5827,13 +5827,13 @@ const HASHMAP_CODE = [
   "      return entry.value",
   "  return null"
 ];
-const LEGEND_ITEMS$D = [
+const LEGEND_ITEMS$E = [
   { color: "bg-blue-50", label: "Current bucket", border: "#60a5fa" },
   { color: "bg-blue-500", label: "Insert/Update" },
   { color: "bg-green-400", label: "Found" },
   { color: "bg-red-400", label: "Not found" }
 ];
-const BADGES$D = [
+const BADGES$E = [
   { label: "Avg: O(1)", variant: "indigo" },
   { label: "Worst: O(n)", variant: "purple" }
 ];
@@ -6094,7 +6094,7 @@ const HashMapVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "HashMap Operations",
-      badges: BADGES$D,
+      badges: BADGES$E,
       gradient: "indigo",
       onShare: handleShare,
       className,
@@ -6118,7 +6118,7 @@ const HashMapVisualizerComponent = ({
         accentColor: "indigo"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$D,
+      legendItems: LEGEND_ITEMS$E,
       code: showCode ? HASHMAP_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -6167,7 +6167,7 @@ const LRU_CODE = [
   "    addToHead(node)",
   "    cache[key] = node"
 ];
-const LEGEND_ITEMS$C = [
+const LEGEND_ITEMS$D = [
   { color: "bg-gray-100", label: "Cache entry", border: "#d1d5db" },
   { color: "bg-green-400", label: "Head (MRU)" },
   { color: "bg-red-400", label: "Tail (LRU)" },
@@ -6175,7 +6175,7 @@ const LEGEND_ITEMS$C = [
   { color: "bg-yellow-200", label: "Cache hit", border: "#fbbf24" },
   { color: "bg-purple-400", label: "Evicted" }
 ];
-const BADGES$C = [
+const BADGES$D = [
   { label: "O(1) get/put", variant: "orange" },
   { label: "HashMap + DLL", variant: "orange" }
 ];
@@ -6528,7 +6528,7 @@ const LRUCacheVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "LRU Cache",
-      badges: BADGES$C,
+      badges: BADGES$D,
       gradient: "orange",
       className,
       minHeight: 380,
@@ -6552,7 +6552,7 @@ const LRUCacheVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$C,
+      legendItems: LEGEND_ITEMS$D,
       code: showCode ? LRU_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -6562,9 +6562,9 @@ const LRUCacheVisualizerComponent = ({
   );
 };
 const LRUCacheVisualizer = React.memo(LRUCacheVisualizerComponent);
-const VISUALIZER_ID$9 = "hashmap-interview-visualizer";
+const VISUALIZER_ID$a = "hashmap-interview-visualizer";
 const BUCKET_COUNT$1 = 8;
-const BADGES$B = [
+const BADGES$C = [
   { label: "Interview Mode", variant: "purple" },
   { label: "O(1) avg", variant: "green" },
   { label: "Hash Table", variant: "indigo" }
@@ -6578,7 +6578,7 @@ const OPERATIONS$l = [
   { op: "put", key: "Alice", value: 26 },
   { op: "get", key: "Frank" }
 ];
-const LEGEND_ITEMS$B = [
+const LEGEND_ITEMS$C = [
   { color: "bg-blue-50", label: "Current bucket", border: "#60a5fa" },
   { color: "bg-blue-500", label: "Insert/Update" },
   { color: "bg-green-400", label: "Found" },
@@ -6800,7 +6800,7 @@ const HashMapInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "hm-int", scrollToId: VISUALIZER_ID$9 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "hm-int", scrollToId: VISUALIZER_ID$a });
   const [mode, setMode] = React.useState("visualize");
   const generateSteps = React.useMemo(() => generateHashMapSteps, []);
   const {
@@ -6904,9 +6904,9 @@ const HashMapInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$9,
+      id: VISUALIZER_ID$a,
       title: "HashMap (Interview Mode)",
-      badges: BADGES$B,
+      badges: BADGES$C,
       gradient: "indigo",
       className,
       minHeight: 500,
@@ -6930,7 +6930,7 @@ const HashMapInterviewVisualizerComponent = ({
         accentColor: "indigo"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$B,
+      legendItems: LEGEND_ITEMS$C,
       sidePanel,
       children: visualization
     }
@@ -6947,10 +6947,10 @@ const OPERATIONS$k = [
   { op: "removeLast" },
   { op: "removeMiddle", index: 2 }
 ];
-const BADGES$A = [
+const BADGES$B = [
   { label: "Comparison", variant: "blue" }
 ];
-const LEGEND_ITEMS$A = [
+const LEGEND_ITEMS$B = [
   { color: "bg-blue-500", label: "ArrayList" },
   { color: "bg-green-500", label: "LinkedList" },
   { color: "bg-amber-400", label: "Current element" },
@@ -7445,7 +7445,7 @@ const ListComparisonVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "ArrayList vs LinkedList",
-      badges: BADGES$A,
+      badges: BADGES$B,
       gradient: "blue",
       className,
       minHeight: 400,
@@ -7469,14 +7469,14 @@ const ListComparisonVisualizerComponent = ({
         accentColor: "blue"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$A,
+      legendItems: LEGEND_ITEMS$B,
       children: visualization
     }
   );
 };
 const ListComparisonVisualizer = React.memo(ListComparisonVisualizerComponent);
-const VISUALIZER_ID$8 = "treeset-interview-visualizer";
-const BADGES$z = [
+const VISUALIZER_ID$9 = "treeset-interview-visualizer";
+const BADGES$A = [
   { label: "Interview Mode", variant: "purple" },
   { label: "BST", variant: "green" },
   { label: "O(log n)", variant: "teal" }
@@ -7492,7 +7492,7 @@ const OPERATIONS$j = [
   { op: "contains", value: 40 },
   { op: "contains", value: 55 }
 ];
-const LEGEND_ITEMS$z = [
+const LEGEND_ITEMS$A = [
   { color: "bg-yellow-100", label: "Path", border: "#facc15" },
   { color: "bg-green-500", label: "Current/Found" },
   { color: "bg-red-500", label: "Not found" }
@@ -7717,7 +7717,7 @@ const TreeSetInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "ts-int", scrollToId: VISUALIZER_ID$8 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "ts-int", scrollToId: VISUALIZER_ID$9 });
   const [mode, setMode] = React.useState("visualize");
   const generateSteps = React.useMemo(() => generateTreeSetSteps$1, []);
   const {
@@ -7861,9 +7861,9 @@ const TreeSetInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$8,
+      id: VISUALIZER_ID$9,
       title: "TreeSet / BST (Interview Mode)",
-      badges: BADGES$z,
+      badges: BADGES$A,
       gradient: "green",
       className,
       minHeight: 500,
@@ -7887,19 +7887,19 @@ const TreeSetInterviewVisualizerComponent = ({
         accentColor: "green"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$z,
+      legendItems: LEGEND_ITEMS$A,
       sidePanel,
       children: visualization
     }
   );
 };
 const TreeSetInterviewVisualizer = React.memo(TreeSetInterviewVisualizerComponent);
-const VISUALIZER_ID$7 = "sorting-interview-visualizer";
-const INITIAL_ARRAY$1 = [64, 34, 25, 12, 22, 11, 90];
-const BADGES$y = [
+const VISUALIZER_ID$8 = "sorting-interview-visualizer";
+const INITIAL_ARRAY$2 = [64, 34, 25, 12, 22, 11, 90];
+const BADGES$z = [
   { label: "O(n log n) avg", variant: "amber" }
 ];
-const LEGEND_ITEMS$y = [
+const LEGEND_ITEMS$z = [
   { color: "bg-amber-400", label: "Comparing" },
   { color: "bg-red-400", label: "Swapping" },
   { color: "bg-green-400", label: "Sorted" },
@@ -8095,16 +8095,16 @@ const SortingInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "sort-int", scrollToId: VISUALIZER_ID$7 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "sort-int", scrollToId: VISUALIZER_ID$8 });
   const [mode, setMode] = React.useState("visualize");
-  const generateSteps = React.useMemo(() => () => generateQuickSortSteps(INITIAL_ARRAY$1), []);
+  const generateSteps = React.useMemo(() => () => generateQuickSortSteps(INITIAL_ARRAY$2), []);
   const playback = useVisualizerPlayback({ generateSteps });
   const interview = useInterviewMode({
     questions: SORTING_QUESTIONS,
     shuffleQuestions: true
   });
   const stepData = playback.currentStepData || {
-    array: INITIAL_ARRAY$1,
+    array: INITIAL_ARRAY$2,
     description: ""
   };
   const { array, comparing, swapping, sorted, pivot, description } = stepData;
@@ -8184,9 +8184,9 @@ const SortingInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$7,
+      id: VISUALIZER_ID$8,
       title: "QuickSort (Interview Mode)",
-      badges: BADGES$y,
+      badges: BADGES$z,
       gradient: "orange",
       className,
       minHeight: 500,
@@ -8211,15 +8211,15 @@ const SortingInterviewVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$y,
+      legendItems: LEGEND_ITEMS$z,
       sidePanel,
       children: visualization
     }
   );
 };
 const SortingInterviewVisualizer = React.memo(SortingInterviewVisualizerComponent);
-const VISUALIZER_ID$6 = "graph-interview-visualizer";
-const BADGES$x = [
+const VISUALIZER_ID$7 = "graph-interview-visualizer";
+const BADGES$y = [
   { label: "Interview Mode", variant: "purple" },
   { label: "BFS/DFS", variant: "blue" },
   { label: "O(V+E)", variant: "cyan" }
@@ -8242,7 +8242,7 @@ const EDGES$1 = [
   { from: "C", to: "G" },
   { from: "E", to: "F" }
 ];
-const LEGEND_ITEMS$x = [
+const LEGEND_ITEMS$y = [
   { color: "bg-blue-500", label: "Current" },
   { color: "bg-green-400", label: "Visited" },
   { color: "bg-yellow-100", label: "In Queue/Stack", border: "#facc15" }
@@ -8468,7 +8468,7 @@ const GraphInterviewVisualizerComponent = ({
   className = ""
 }) => {
   var _a;
-  const { copyUrlToClipboard } = useUrlState({ prefix: "graph-int", scrollToId: VISUALIZER_ID$6 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "graph-int", scrollToId: VISUALIZER_ID$7 });
   const [mode, setMode] = React.useState("visualize");
   const [algorithm, setAlgorithm] = React.useState("bfs");
   const generateSteps = React.useMemo(
@@ -8620,9 +8620,9 @@ const GraphInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$6,
+      id: VISUALIZER_ID$7,
       title: "Graph Traversal (Interview Mode)",
-      badges: BADGES$x,
+      badges: BADGES$y,
       gradient: "blue",
       className,
       minHeight: 500,
@@ -8646,17 +8646,17 @@ const GraphInterviewVisualizerComponent = ({
         accentColor: "blue"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$x,
+      legendItems: LEGEND_ITEMS$y,
       sidePanel,
       children: visualization
     }
   );
 };
 const GraphInterviewVisualizer = React.memo(GraphInterviewVisualizerComponent);
-const VISUALIZER_ID$5 = "bloomfilter-interview-visualizer";
+const VISUALIZER_ID$6 = "bloomfilter-interview-visualizer";
 const BIT_ARRAY_SIZE$1 = 16;
 const K_HASH_FUNCTIONS = 3;
-const BADGES$w = [
+const BADGES$x = [
   { label: "Interview Mode", variant: "purple" },
   { label: "Probabilistic", variant: "pink" },
   { label: "No False Negatives", variant: "indigo" }
@@ -8669,7 +8669,7 @@ const OPERATIONS$i = [
   { op: "query", element: "grape" },
   { op: "query", element: "banana" }
 ];
-const LEGEND_ITEMS$w = [
+const LEGEND_ITEMS$x = [
   { color: "bg-gray-200", label: "Bit = 0" },
   { color: "bg-purple-500", label: "Bit = 1" },
   { color: "bg-pink-400", label: "Current hash position" }
@@ -8878,7 +8878,7 @@ const BloomFilterInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "bf-int", scrollToId: VISUALIZER_ID$5 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "bf-int", scrollToId: VISUALIZER_ID$6 });
   const [mode, setMode] = React.useState("visualize");
   const generateSteps = React.useMemo(() => generateBloomFilterSteps$1, []);
   const {
@@ -8995,9 +8995,9 @@ const BloomFilterInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$5,
+      id: VISUALIZER_ID$6,
       title: "Bloom Filter (Interview Mode)",
-      badges: BADGES$w,
+      badges: BADGES$x,
       gradient: "purple",
       className,
       minHeight: 500,
@@ -9022,16 +9022,16 @@ const BloomFilterInterviewVisualizerComponent = ({
         accentColor: "purple"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$w,
+      legendItems: LEGEND_ITEMS$x,
       sidePanel,
       children: visualization
     }
   );
 };
 const BloomFilterInterviewVisualizer = React.memo(BloomFilterInterviewVisualizerComponent);
-const VISUALIZER_ID$4 = "btree-interview-visualizer";
+const VISUALIZER_ID$5 = "btree-interview-visualizer";
 const ORDER$1 = 3;
-const BADGES$v = [
+const BADGES$w = [
   { label: "Interview Mode", variant: "purple" },
   { label: `Order ${ORDER$1}`, variant: "green" },
   { label: "O(log n)", variant: "teal" }
@@ -9045,7 +9045,7 @@ const OPERATIONS$h = [
   { op: "search", value: 15 },
   { op: "search", value: 12 }
 ];
-const LEGEND_ITEMS$v = [
+const LEGEND_ITEMS$w = [
   { color: "bg-green-400", label: "Current node" },
   { color: "bg-amber-100", label: "Search path", border: "#fbbf24" },
   { color: "bg-blue-400", label: "Found/Inserted" }
@@ -9311,7 +9311,7 @@ const BTreeInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "bt-int", scrollToId: VISUALIZER_ID$4 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "bt-int", scrollToId: VISUALIZER_ID$5 });
   const [mode, setMode] = React.useState("visualize");
   const generateSteps = React.useMemo(() => generateBTreeSteps$1, []);
   const {
@@ -9448,9 +9448,9 @@ const BTreeInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$4,
+      id: VISUALIZER_ID$5,
       title: "B-Tree (Interview Mode)",
-      badges: BADGES$v,
+      badges: BADGES$w,
       gradient: "green",
       className,
       minHeight: 500,
@@ -9475,17 +9475,17 @@ const BTreeInterviewVisualizerComponent = ({
         accentColor: "green"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$v,
+      legendItems: LEGEND_ITEMS$w,
       sidePanel,
       children: visualization
     }
   );
 };
 const BTreeInterviewVisualizer = React.memo(BTreeInterviewVisualizerComponent);
-const BADGES$u = [
+const BADGES$v = [
   { label: "O((V+E) log V)", variant: "orange" }
 ];
-const LEGEND_ITEMS$u = [
+const LEGEND_ITEMS$v = [
   { color: "bg-blue-100", label: "Unvisited", border: "#60a5fa" },
   { color: "bg-amber-400", label: "Current" },
   { color: "bg-green-400", label: "Visited" }
@@ -9844,7 +9844,7 @@ const DijkstraInterviewVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Dijkstra's Algorithm (Interview Mode)",
-      badges: BADGES$u,
+      badges: BADGES$v,
       gradient: "orange",
       className,
       minHeight: 500,
@@ -9869,17 +9869,17 @@ const DijkstraInterviewVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$u,
+      legendItems: LEGEND_ITEMS$v,
       sidePanel,
       children: visualization
     }
   );
 };
 const DijkstraInterviewVisualizer = React.memo(DijkstraInterviewVisualizerComponent);
-const BADGES$t = [
+const BADGES$u = [
   { label: "O(n×W)", variant: "cyan" }
 ];
-const LEGEND_ITEMS$t = [
+const LEGEND_ITEMS$u = [
   { color: "bg-gray-50", label: "Not computed", border: "#d1d5db" },
   { color: "bg-blue-100", label: "Computed" },
   { color: "bg-green-400", label: "Take item" },
@@ -10236,7 +10236,7 @@ const DPInterviewVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "0/1 Knapsack (DP)",
-      badges: BADGES$t,
+      badges: BADGES$u,
       gradient: "cyan",
       className,
       minHeight: 400,
@@ -10261,17 +10261,17 @@ const DPInterviewVisualizerComponent = ({
         accentColor: "cyan"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$t,
+      legendItems: LEGEND_ITEMS$u,
       sidePanel,
       children: visualization
     }
   );
 };
 const DPInterviewVisualizer = React.memo(DPInterviewVisualizerComponent);
-const BADGES$s = [
+const BADGES$t = [
   { label: "Distributed Systems", variant: "cyan" }
 ];
-const LEGEND_ITEMS$s = [
+const LEGEND_ITEMS$t = [
   { color: "bg-blue-500", label: "Server A" },
   { color: "bg-green-500", label: "Server B" },
   { color: "bg-purple-500", label: "Server C" },
@@ -10684,7 +10684,7 @@ const ConsistentHashingInterviewVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Consistent Hashing (Interview Mode)",
-      badges: BADGES$s,
+      badges: BADGES$t,
       gradient: "cyan",
       className,
       minHeight: 500,
@@ -10709,17 +10709,17 @@ const ConsistentHashingInterviewVisualizerComponent = ({
         accentColor: "cyan"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$s,
+      legendItems: LEGEND_ITEMS$t,
       sidePanel,
       children: visualization
     }
   );
 };
 const ConsistentHashingInterviewVisualizer = React.memo(ConsistentHashingInterviewVisualizerComponent);
-const BADGES$r = [
+const BADGES$s = [
   { label: "Distributed Consensus", variant: "orange" }
 ];
-const LEGEND_ITEMS$r = [
+const LEGEND_ITEMS$s = [
   { color: "bg-gray-400", label: "Follower" },
   { color: "bg-amber-500", label: "Candidate" },
   { color: "bg-green-500", label: "Leader" },
@@ -11149,7 +11149,7 @@ const RaftInterviewVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Raft Consensus",
-      badges: BADGES$r,
+      badges: BADGES$s,
       gradient: "orange",
       className,
       minHeight: 400,
@@ -11174,15 +11174,15 @@ const RaftInterviewVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$r,
+      legendItems: LEGEND_ITEMS$s,
       sidePanel,
       children: visualization
     }
   );
 };
 const RaftInterviewVisualizer = React.memo(RaftInterviewVisualizerComponent);
-const VISUALIZER_ID$3 = "trie-interview-visualizer";
-const BADGES$q = [
+const VISUALIZER_ID$4 = "trie-interview-visualizer";
+const BADGES$r = [
   { label: "O(m) ops", variant: "cyan" }
 ];
 const OPERATIONS$g = [
@@ -11194,7 +11194,7 @@ const OPERATIONS$g = [
   { op: "search", word: "car" },
   { op: "prefix", word: "car" }
 ];
-const LEGEND_ITEMS$q = [
+const LEGEND_ITEMS$r = [
   { color: "bg-gray-100", label: "Node", border: "#d1d5db" },
   { color: "bg-blue-200", label: "Current", border: "#60a5fa" },
   { color: "bg-green-400", label: "End of word" },
@@ -11529,7 +11529,7 @@ const TrieInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "trie-int", scrollToId: VISUALIZER_ID$3 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "trie-int", scrollToId: VISUALIZER_ID$4 });
   const [mode, setMode] = React.useState("visualize");
   const generateSteps = React.useMemo(() => generateTrieSteps$1, []);
   const playback = useVisualizerPlayback({ generateSteps });
@@ -11608,9 +11608,9 @@ const TrieInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$3,
+      id: VISUALIZER_ID$4,
       title: "Trie (Prefix Tree) - Interview Mode",
-      badges: BADGES$q,
+      badges: BADGES$r,
       gradient: "cyan",
       className,
       minHeight: 500,
@@ -11635,16 +11635,16 @@ const TrieInterviewVisualizerComponent = ({
         accentColor: "cyan"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$q,
+      legendItems: LEGEND_ITEMS$r,
       sidePanel,
       children: visualization
     }
   );
 };
 const TrieInterviewVisualizer = React.memo(TrieInterviewVisualizerComponent);
-const VISUALIZER_ID$2 = "unionfind-interview-visualizer";
+const VISUALIZER_ID$3 = "unionfind-interview-visualizer";
 const INITIAL_SIZE$2 = 8;
-const BADGES$p = [
+const BADGES$q = [
   { label: "O(α(n))", variant: "purple" }
 ];
 const OPERATIONS$f = [
@@ -11657,7 +11657,7 @@ const OPERATIONS$f = [
   { op: "connected", a: 1, b: 3 },
   { op: "union", a: 0, b: 4 }
 ];
-const LEGEND_ITEMS$p = [
+const LEGEND_ITEMS$q = [
   { color: "bg-gray-100", label: "Element", border: "#d1d5db" },
   { color: "bg-blue-200", label: "Current", border: "#60a5fa" },
   { color: "bg-green-400", label: "Root / Same set" }
@@ -11886,7 +11886,7 @@ const UnionFindInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "uf-int", scrollToId: VISUALIZER_ID$2 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "uf-int", scrollToId: VISUALIZER_ID$3 });
   const [mode, setMode] = React.useState("visualize");
   const generateSteps = React.useMemo(() => generateUnionFindSteps$1, []);
   const playback = useVisualizerPlayback({ generateSteps });
@@ -12009,9 +12009,9 @@ const UnionFindInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$2,
+      id: VISUALIZER_ID$3,
       title: "Union-Find (DSU) - Interview Mode",
-      badges: BADGES$p,
+      badges: BADGES$q,
       gradient: "purple",
       className,
       minHeight: 500,
@@ -12036,14 +12036,14 @@ const UnionFindInterviewVisualizerComponent = ({
         accentColor: "purple"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$p,
+      legendItems: LEGEND_ITEMS$q,
       sidePanel,
       children: visualization
     }
   );
 };
 const UnionFindInterviewVisualizer = React.memo(UnionFindInterviewVisualizerComponent);
-const VISUALIZER_ID$1 = "astar-interview-visualizer";
+const VISUALIZER_ID$2 = "astar-interview-visualizer";
 const GRID_ROWS = 6;
 const GRID_COLS = 8;
 const START = { row: 1, col: 1 };
@@ -12055,12 +12055,12 @@ const WALLS = [
   { row: 3, col: 5 },
   { row: 4, col: 5 }
 ];
-const BADGES$o = [
+const BADGES$p = [
   { label: "Interview Mode", variant: "purple" },
   { label: "f = g + h", variant: "amber" },
   { label: "O(b^d)", variant: "orange" }
 ];
-const LEGEND_ITEMS$o = [
+const LEGEND_ITEMS$p = [
   { color: "bg-green-500", label: "Start" },
   { color: "bg-red-500", label: "End" },
   { color: "bg-gray-700", label: "Wall" },
@@ -12314,7 +12314,7 @@ const AStarInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "astar-int", scrollToId: VISUALIZER_ID$1 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "astar-int", scrollToId: VISUALIZER_ID$2 });
   const [mode, setMode] = React.useState("visualize");
   const generateSteps = React.useMemo(() => generateAStarSteps, []);
   const {
@@ -12417,9 +12417,9 @@ const AStarInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$1,
+      id: VISUALIZER_ID$2,
       title: "A* Pathfinding (Interview Mode)",
-      badges: BADGES$o,
+      badges: BADGES$p,
       gradient: "orange",
       className,
       minHeight: 500,
@@ -12444,14 +12444,14 @@ const AStarInterviewVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$o,
+      legendItems: LEGEND_ITEMS$p,
       sidePanel,
       children: visualization
     }
   );
 };
 const AStarInterviewVisualizer = React.memo(AStarInterviewVisualizerComponent);
-const BADGES$n = [
+const BADGES$o = [
   { label: "O(log n) avg", variant: "indigo" }
 ];
 const INITIAL_NODES = [
@@ -12462,7 +12462,7 @@ const INITIAL_NODES = [
   { value: 9, levels: 2 },
   { value: 12, levels: 1 }
 ];
-const LEGEND_ITEMS$n = [
+const LEGEND_ITEMS$o = [
   { color: "bg-blue-100", label: "Node", border: "#60a5fa" },
   { color: "bg-amber-400", label: "Current" },
   { color: "bg-green-400", label: "Found" }
@@ -12748,7 +12748,7 @@ const SkipListInterviewVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Skip List",
-      badges: BADGES$n,
+      badges: BADGES$o,
       gradient: "indigo",
       className,
       minHeight: 260,
@@ -12773,21 +12773,21 @@ const SkipListInterviewVisualizerComponent = ({
         accentColor: "indigo"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$n,
+      legendItems: LEGEND_ITEMS$o,
       sidePanel,
       children: visualization
     }
   );
 };
 const SkipListInterviewVisualizer = React.memo(SkipListInterviewVisualizerComponent);
-const VISUALIZER_ID = "linkedlist-interview-visualizer";
-const BADGES$m = [
+const VISUALIZER_ID$1 = "linkedlist-interview-visualizer";
+const BADGES$n = [
   { label: "Interview Mode", variant: "purple" },
   { label: "O(1) insert", variant: "blue" },
   { label: "Linked List", variant: "cyan" }
 ];
 const INITIAL_VALUES = [10, 20, 30, 40, 50];
-const LEGEND_ITEMS$m = [
+const LEGEND_ITEMS$n = [
   { color: "bg-blue-100", label: "Node", border: "#60a5fa" },
   { color: "bg-yellow-400", label: "Current" },
   { color: "bg-green-400", label: "Head" },
@@ -12959,7 +12959,7 @@ const LinkedListInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "ll-int", scrollToId: VISUALIZER_ID });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "ll-int", scrollToId: VISUALIZER_ID$1 });
   const [mode, setMode] = React.useState("visualize");
   const generateSteps = React.useMemo(() => generateLinkedListSteps$1, []);
   const {
@@ -13046,9 +13046,9 @@ const LinkedListInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID,
+      id: VISUALIZER_ID$1,
       title: "Linked List (Interview Mode)",
-      badges: BADGES$m,
+      badges: BADGES$n,
       gradient: "blue",
       className,
       minHeight: 400,
@@ -13072,7 +13072,7 @@ const LinkedListInterviewVisualizerComponent = ({
         accentColor: "blue"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$m,
+      legendItems: LEGEND_ITEMS$n,
       sidePanel,
       children: visualization
     }
@@ -13100,13 +13100,13 @@ const HASH_TABLE_CODE = [
   "  if loadFactor > threshold:",
   "    rehash(newSize = size * 2)"
 ];
-const LEGEND_ITEMS$l = [
+const LEGEND_ITEMS$m = [
   { color: "bg-gray-50", label: "Empty", border: "#d1d5db" },
   { color: "bg-yellow-50", label: "Hashing", border: "#facc15" },
   { color: "bg-red-50", label: "Collision", border: "#f87171" },
   { color: "bg-green-50", label: "Placed", border: "#4ade80" }
 ];
-const BADGES$l = [
+const BADGES$m = [
   { label: "Avg: O(1)", variant: "purple" },
   { label: "Worst: O(n)", variant: "purple" }
 ];
@@ -13421,7 +13421,7 @@ const HashTableVisualizerComponent = ({
     {
       id: "hashtable-visualizer",
       title: "Hash Table (Chaining)",
-      badges: BADGES$l,
+      badges: BADGES$m,
       gradient: "purple",
       className,
       minHeight: 400,
@@ -13445,7 +13445,7 @@ const HashTableVisualizerComponent = ({
         extraControls
       },
       showControls,
-      legendItems: LEGEND_ITEMS$l,
+      legendItems: LEGEND_ITEMS$m,
       code: showCode ? HASH_TABLE_CODE : void 0,
       currentCodeLine: stepData == null ? void 0 : stepData.codeLine,
       codeVariables: stepData == null ? void 0 : stepData.variables,
@@ -13487,11 +13487,11 @@ const LINKEDLIST_CODE = [
   "    node = node.next",
   "  return node.value"
 ];
-const LEGEND_ITEMS$k = [
+const LEGEND_ITEMS$l = [
   { color: "bg-white", label: "Node", border: "#d1d5db" },
   { color: "bg-blue-500", label: "Active" }
 ];
-const BADGES$k = [
+const BADGES$l = [
   { label: "Ends: O(1)", variant: "blue" },
   { label: "Index: O(n)", variant: "indigo" }
 ];
@@ -13689,7 +13689,7 @@ const LinkedListVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "LinkedList Operations",
-      badges: BADGES$k,
+      badges: BADGES$l,
       gradient: "blue",
       onShare: handleShare,
       className,
@@ -13713,7 +13713,7 @@ const LinkedListVisualizerComponent = ({
         accentColor: "blue"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$k,
+      legendItems: LEGEND_ITEMS$l,
       code: showCode ? LINKEDLIST_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -13760,13 +13760,13 @@ const LINKEDHASHMAP_CODE = [
   "  }",
   "}"
 ];
-const LEGEND_ITEMS$j = [
+const LEGEND_ITEMS$k = [
   { color: "bg-blue-50", label: "Current bucket", border: "#60a5fa" },
   { color: "bg-blue-500", label: "Insert/Update" },
   { color: "bg-green-400", label: "Found" },
   { color: "bg-orange-400", label: "Linked list order" }
 ];
-const BADGES$j = [
+const BADGES$k = [
   { label: "O(1) ops", variant: "orange" },
   { label: "Ordered", variant: "amber" }
 ];
@@ -14178,7 +14178,7 @@ const LinkedHashMapVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "LinkedHashMap",
-      badges: BADGES$j,
+      badges: BADGES$k,
       gradient: "orange",
       onShare: handleShare,
       className,
@@ -14203,7 +14203,7 @@ const LinkedHashMapVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$j,
+      legendItems: LEGEND_ITEMS$k,
       code: showCode ? LINKEDHASHMAP_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -14244,13 +14244,13 @@ const ARRAYLIST_CODE = [
   "  shift elements left",
   "  size--"
 ];
-const LEGEND_ITEMS$i = [
+const LEGEND_ITEMS$j = [
   { color: "bg-white border-gray-300", label: "Used", border: "#d1d5db" },
   { color: "bg-gray-100", label: "Empty" },
   { color: "bg-orange-500", label: "Active" },
   { color: "bg-yellow-200", label: "Shifted", border: "#fbbf24" }
 ];
-const BADGES$i = [
+const BADGES$j = [
   { label: "Get: O(1)", variant: "orange" },
   { label: "Add: O(1)*", variant: "amber" }
 ];
@@ -14538,7 +14538,7 @@ const ArrayListVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "ArrayList Operations",
-      badges: BADGES$i,
+      badges: BADGES$j,
       gradient: "orange",
       onShare: handleShare,
       className,
@@ -14562,7 +14562,7 @@ const ArrayListVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$i,
+      legendItems: LEGEND_ITEMS$j,
       code: showCode ? ARRAYLIST_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -14619,14 +14619,14 @@ const ARRAYDEQUE_CODE = [
   "  }",
   "}"
 ];
-const LEGEND_ITEMS$h = [
+const LEGEND_ITEMS$i = [
   { color: "bg-teal-500", label: "Head pointer" },
   { color: "bg-violet-500", label: "Tail pointer" },
   { color: "bg-green-400", label: "Added element" },
   { color: "bg-red-400", label: "Removed element" },
   { color: "bg-yellow-200", label: "Resize" }
 ];
-const BADGES$h = [
+const BADGES$i = [
   { label: "O(1) all ops", variant: "teal" },
   { label: "Circular buffer", variant: "purple" }
 ];
@@ -14978,7 +14978,7 @@ const ArrayDequeVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "ArrayDeque",
-      badges: BADGES$h,
+      badges: BADGES$i,
       gradient: "teal",
       onShare: handleShare,
       className,
@@ -15003,7 +15003,7 @@ const ArrayDequeVisualizerComponent = ({
         accentColor: "teal"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$h,
+      legendItems: LEGEND_ITEMS$i,
       code: showCode ? ARRAYDEQUE_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -15044,13 +15044,13 @@ const TREESET_CODE = [
   "      node = node.right",
   "    else: return // duplicate"
 ];
-const LEGEND_ITEMS$g = [
+const LEGEND_ITEMS$h = [
   { color: "bg-yellow-100", label: "Path", border: "#facc15" },
   { color: "bg-blue-500", label: "Current/Insert" },
   { color: "bg-green-500", label: "Found" },
   { color: "bg-red-500", label: "Not found" }
 ];
-const BADGES$g = [
+const BADGES$h = [
   { label: "Avg: O(log n)", variant: "green" },
   { label: "Worst: O(n)", variant: "amber" }
 ];
@@ -15416,7 +15416,7 @@ const TreeSetVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "TreeSet Operations (BST)",
-      badges: BADGES$g,
+      badges: BADGES$h,
       gradient: "green",
       className,
       minHeight: 400,
@@ -15440,7 +15440,7 @@ const TreeSetVisualizerComponent = ({
         accentColor: "green"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$g,
+      legendItems: LEGEND_ITEMS$h,
       code: showCode ? TREESET_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -15492,13 +15492,13 @@ const ENUMSET_CODE = [
   "  }",
   "}"
 ];
-const LEGEND_ITEMS$f = [
+const LEGEND_ITEMS$g = [
   { color: "bg-green-500", label: "Bit set (1)" },
   { color: "bg-gray-200", label: "Bit clear (0)" },
   { color: "bg-blue-500", label: "Current operation" },
   { color: "bg-yellow-400", label: "Changed bit" }
 ];
-const BADGES$f = [
+const BADGES$g = [
   { label: "O(1) all ops", variant: "green" },
   { label: "Memory efficient", variant: "green" }
 ];
@@ -15767,7 +15767,7 @@ const EnumSetVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "EnumSet Bit Operations",
-      badges: BADGES$f,
+      badges: BADGES$g,
       gradient: "green",
       onShare: handleShare,
       className,
@@ -15792,7 +15792,7 @@ const EnumSetVisualizerComponent = ({
         accentColor: "green"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$f,
+      legendItems: LEGEND_ITEMS$g,
       code: showCode ? ENUMSET_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -15813,7 +15813,7 @@ const OPERATIONS$8 = [
   { op: "poll" },
   { op: "offer", value: 15 }
 ];
-const HEAP_CODE = [
+const HEAP_CODE$1 = [
   "offer(value):",
   "  heap.add(value)",
   "  siftUp(size - 1)",
@@ -15831,18 +15831,18 @@ const HEAP_CODE = [
   "  siftDown(0)",
   "  return result"
 ];
-const LEGEND_ITEMS$e = [
+const LEGEND_ITEMS$f = [
   { color: "bg-purple-100", label: "Root (min)", border: "#c4b5fd" },
   { color: "bg-purple-500", label: "Active" },
   { color: "bg-purple-200", label: "Sift Path", border: "#a78bfa" },
   { color: "bg-yellow-300", label: "Comparing" },
   { color: "bg-green-400", label: "Swapped" }
 ];
-const BADGES$e = [
+const BADGES$f = [
   { label: "offer: O(log n)", variant: "purple" },
   { label: "poll: O(log n)", variant: "purple" }
 ];
-function generateHeapSteps() {
+function generateHeapSteps$1() {
   const steps = [];
   const heap = [];
   steps.push({
@@ -16024,7 +16024,7 @@ function generateHeapSteps() {
   });
   return steps;
 }
-function getTreePositions(size) {
+function getTreePositions$1(size) {
   const positions = [];
   const width = 280;
   for (let i = 0; i < size; i++) {
@@ -16048,7 +16048,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
   const playingRef = React.useRef(false);
   const timeoutRef = React.useRef(null);
   const initialize = React.useCallback(() => {
-    const newSteps = generateHeapSteps();
+    const newSteps = generateHeapSteps$1();
     setSteps(newSteps);
     setCurrentStep(0);
     setIsPlaying(false);
@@ -16136,7 +16136,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
     description: ""
   };
   const { heap, highlightIndex, swapIndices, compareIndices, description, siftPath, currentIndex } = currentStepData;
-  const positions = getTreePositions(heap.length);
+  const positions = getTreePositions$1(heap.length);
   const getNodeStyle = (idx) => {
     if (idx === highlightIndex) {
       return "fill-purple-500 stroke-purple-600";
@@ -16312,7 +16312,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
     {
       id: "priorityqueue-visualizer",
       title: "PriorityQueue (Min-Heap)",
-      badges: BADGES$e,
+      badges: BADGES$f,
       gradient: "purple",
       className,
       minHeight: 400,
@@ -16335,8 +16335,8 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
         accentColor: "purple"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$e,
-      code: showCode ? HEAP_CODE : void 0,
+      legendItems: LEGEND_ITEMS$f,
+      code: showCode ? HEAP_CODE$1 : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
       showCode,
@@ -16347,6 +16347,454 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
 const PriorityQueueVisualizer = React.memo(
   PriorityQueueVisualizerComponent
 );
+const VISUALIZER_ID = "heap-visualizer";
+const INITIAL_ARRAY$1 = [4, 10, 3, 5, 1, 8, 7, 2, 9, 6];
+const BADGES$e = [
+  { label: "Build: O(n)", variant: "orange" },
+  { label: "Sort: O(n log n)", variant: "amber" }
+];
+const HEAP_CODE = [
+  "function buildMaxHeap(arr):",
+  "  n = arr.length",
+  "  # Start from last non-leaf node",
+  "  for i = n/2 - 1 down to 0:",
+  "    heapify(arr, n, i)",
+  "",
+  "function heapify(arr, n, i):",
+  "  largest = i",
+  "  left = 2*i + 1",
+  "  right = 2*i + 2",
+  "  if left < n and arr[left] > arr[largest]:",
+  "    largest = left",
+  "  if right < n and arr[right] > arr[largest]:",
+  "    largest = right",
+  "  if largest != i:",
+  "    swap(arr[i], arr[largest])",
+  "    heapify(arr, n, largest)",
+  "",
+  "function heapSort(arr):",
+  "  buildMaxHeap(arr)",
+  "  for i = n-1 down to 1:",
+  "    swap(arr[0], arr[i])  # Move max to end",
+  "    heapify(arr, i, 0)    # Restore heap"
+];
+const LEGEND_ITEMS$e = [
+  { color: "bg-orange-500", label: "Root (max)" },
+  { color: "bg-amber-400", label: "Comparing" },
+  { color: "bg-green-400", label: "Swapped" },
+  { color: "bg-blue-200", label: "Current node", border: "#60a5fa" },
+  { color: "bg-gray-300", label: "Sorted portion" }
+];
+function generateHeapSteps(initialArray) {
+  const steps = [];
+  const arr = [...initialArray];
+  const n = arr.length;
+  steps.push({
+    operation: "init",
+    array: [...arr],
+    heapSize: n,
+    description: `Initial array: [${arr.join(", ")}]. Will build max-heap then sort.`,
+    codeLine: -1,
+    phase: "build"
+  });
+  steps.push({
+    operation: "buildHeap",
+    array: [...arr],
+    heapSize: n,
+    description: `Build Max-Heap: Start from last non-leaf node (index ${Math.floor(n / 2) - 1})`,
+    codeLine: 3,
+    variables: { n, "start": Math.floor(n / 2) - 1 },
+    phase: "build"
+  });
+  for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
+    heapifyWithSteps(arr, n, i, steps, "build");
+  }
+  steps.push({
+    operation: "buildHeap",
+    array: [...arr],
+    heapSize: n,
+    description: `✓ Max-Heap built! Root (${arr[0]}) is the maximum element.`,
+    codeLine: 4,
+    phase: "build"
+  });
+  steps.push({
+    operation: "heapSort",
+    array: [...arr],
+    heapSize: n,
+    description: "HeapSort: Extract max elements one by one",
+    codeLine: 18,
+    phase: "sort"
+  });
+  const sorted = [];
+  for (let i = n - 1; i > 0; i--) {
+    steps.push({
+      operation: "extract",
+      array: [...arr],
+      heapSize: i + 1,
+      sortedPortion: [...sorted],
+      highlightIndex: 0,
+      description: `Extract max: Move ${arr[0]} (root) to position ${i}`,
+      codeLine: 21,
+      variables: { max: arr[0], position: i },
+      phase: "sort"
+    });
+    [arr[0], arr[i]] = [arr[i], arr[0]];
+    sorted.unshift(i);
+    steps.push({
+      operation: "extract",
+      array: [...arr],
+      heapSize: i,
+      sortedPortion: [...sorted],
+      swapIndices: [0, i],
+      description: `Swapped! ${arr[i]} is now in final sorted position. Heap size reduced to ${i}.`,
+      codeLine: 21,
+      variables: { "sorted": arr[i] },
+      phase: "sort"
+    });
+    if (i > 1) {
+      heapifyWithSteps(arr, i, 0, steps, "sort", sorted);
+    }
+  }
+  sorted.unshift(0);
+  steps.push({
+    operation: "done",
+    array: [...arr],
+    heapSize: 0,
+    sortedPortion: Array.from({ length: n }, (_, i) => i),
+    description: `✓ HeapSort complete! Array sorted: [${arr.join(", ")}]`,
+    codeLine: -1,
+    phase: "sort"
+  });
+  return steps;
+}
+function heapifyWithSteps(arr, heapSize, i, steps, phase, sortedPortion = []) {
+  const left = 2 * i + 1;
+  const right = 2 * i + 2;
+  let largest = i;
+  steps.push({
+    operation: "heapify",
+    array: [...arr],
+    heapSize,
+    sortedPortion: [...sortedPortion],
+    highlightIndex: i,
+    description: `heapify(${i}): Check node ${arr[i]} against children`,
+    codeLine: 6,
+    variables: { i, "arr[i]": arr[i], left, right },
+    phase
+  });
+  if (left < heapSize) {
+    steps.push({
+      operation: "compare",
+      array: [...arr],
+      heapSize,
+      sortedPortion: [...sortedPortion],
+      compareIndices: [i, left],
+      description: `Compare: ${arr[left]} (left) ${arr[left] > arr[largest] ? ">" : "≤"} ${arr[largest]} (current largest)`,
+      codeLine: 10,
+      variables: { left, "arr[left]": arr[left], largest, "arr[largest]": arr[largest] },
+      phase
+    });
+    if (arr[left] > arr[largest]) {
+      largest = left;
+    }
+  }
+  if (right < heapSize) {
+    steps.push({
+      operation: "compare",
+      array: [...arr],
+      heapSize,
+      sortedPortion: [...sortedPortion],
+      compareIndices: [largest, right],
+      description: `Compare: ${arr[right]} (right) ${arr[right] > arr[largest] ? ">" : "≤"} ${arr[largest]} (current largest)`,
+      codeLine: 12,
+      variables: { right, "arr[right]": arr[right], largest, "arr[largest]": arr[largest] },
+      phase
+    });
+    if (arr[right] > arr[largest]) {
+      largest = right;
+    }
+  }
+  if (largest !== i) {
+    steps.push({
+      operation: "swap",
+      array: [...arr],
+      heapSize,
+      sortedPortion: [...sortedPortion],
+      swapIndices: [i, largest],
+      description: `Swap: ${arr[i]} ↔ ${arr[largest]} (largest child)`,
+      codeLine: 15,
+      variables: { i, largest, "arr[i]": arr[i], "arr[largest]": arr[largest] },
+      phase
+    });
+    [arr[i], arr[largest]] = [arr[largest], arr[i]];
+    steps.push({
+      operation: "swap",
+      array: [...arr],
+      heapSize,
+      sortedPortion: [...sortedPortion],
+      highlightIndex: largest,
+      description: `Swapped! Continue heapify from index ${largest}`,
+      codeLine: 16,
+      variables: { "next": largest },
+      phase
+    });
+    heapifyWithSteps(arr, heapSize, largest, steps, phase, sortedPortion);
+  } else {
+    steps.push({
+      operation: "heapify",
+      array: [...arr],
+      heapSize,
+      sortedPortion: [...sortedPortion],
+      highlightIndex: i,
+      description: `Node ${arr[i]} satisfies heap property (≥ both children)`,
+      codeLine: 14,
+      phase
+    });
+  }
+}
+function getTreePositions(size) {
+  const positions = [];
+  const width = 320;
+  for (let i = 0; i < size; i++) {
+    const level = Math.floor(Math.log2(i + 1));
+    const levelStart = Math.pow(2, level) - 1;
+    const posInLevel = i - levelStart;
+    const nodesInLevel = Math.pow(2, level);
+    const spacing = width / (nodesInLevel + 1);
+    positions.push({
+      x: spacing * (posInLevel + 1),
+      y: level * 55 + 30
+    });
+  }
+  return positions;
+}
+const HeapVisualizerComponent = ({
+  showControls = true,
+  showCode = true,
+  className = ""
+}) => {
+  const { copyUrlToClipboard } = useUrlState({ prefix: "heap", scrollToId: VISUALIZER_ID });
+  const generateSteps = React.useMemo(() => () => generateHeapSteps(INITIAL_ARRAY$1), []);
+  const {
+    steps,
+    currentStep,
+    currentStepData,
+    isPlaying,
+    speed,
+    setSpeed,
+    handlePlayPause,
+    handleStep,
+    handleStepBack,
+    handleReset
+  } = useVisualizerPlayback({
+    generateSteps
+  });
+  const stepData = currentStepData || {
+    operation: "init",
+    array: INITIAL_ARRAY$1,
+    heapSize: INITIAL_ARRAY$1.length,
+    description: ""
+  };
+  const { array, heapSize, sortedPortion, highlightIndex, compareIndices, swapIndices, description, phase } = stepData;
+  const positions = getTreePositions(array.length);
+  const getNodeStyle = (idx) => {
+    if (sortedPortion == null ? void 0 : sortedPortion.includes(idx)) {
+      return "fill-gray-300 stroke-gray-400";
+    }
+    if (swapIndices == null ? void 0 : swapIndices.includes(idx)) {
+      return "fill-green-400 stroke-green-500";
+    }
+    if (compareIndices == null ? void 0 : compareIndices.includes(idx)) {
+      return "fill-amber-400 stroke-amber-500";
+    }
+    if (idx === highlightIndex) {
+      return "fill-blue-200 stroke-blue-400";
+    }
+    if (idx === 0 && idx < heapSize) {
+      return "fill-orange-500 stroke-orange-600";
+    }
+    if (idx < heapSize) {
+      return "fill-white stroke-gray-300";
+    }
+    return "fill-gray-200 stroke-gray-300";
+  };
+  const getTextColor = (idx) => {
+    if (sortedPortion == null ? void 0 : sortedPortion.includes(idx)) return "#374151";
+    if ((swapIndices == null ? void 0 : swapIndices.includes(idx)) || idx === 0 && idx < heapSize) return "white";
+    return "#374151";
+  };
+  const getStatusVariant = () => {
+    if (stepData.operation === "done") return "success";
+    if (stepData.operation === "swap") return "warning";
+    return "default";
+  };
+  const handleShare = React.useCallback(async () => {
+    return copyUrlToClipboard({ step: currentStep });
+  }, [copyUrlToClipboard, currentStep]);
+  const visualization = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl border-2 border-orange-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-orange-800 mb-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🔺" }),
+        " Max-Heap Property"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-orange-200", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-orange-700 font-bold mb-2", children: "heap[parent] ≥ heap[children]" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs text-gray-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-orange-50 p-2 rounded text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "parent(i)" }),
+            " = ⌊(i-1)/2⌋"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-orange-50 p-2 rounded text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "left(i)" }),
+            " = 2i + 1"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-orange-50 p-2 rounded text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "right(i)" }),
+            " = 2i + 2"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-orange-200 min-h-[36px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-3 py-1 rounded-full text-xs font-medium ${phase === "build" ? "bg-orange-100 text-orange-700" : phase === "sort" ? "bg-amber-100 text-amber-700" : "bg-gray-100 text-gray-500"}`, children: phase === "build" ? "🔨 Building Max-Heap" : phase === "sort" ? "📊 HeapSort in progress" : "Ready" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "Binary Max-Heap (size: ",
+          heapSize,
+          ")"
+        ] }),
+        sortedPortion && sortedPortion.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500", children: [
+          "Sorted: ",
+          sortedPortion.length,
+          " elements"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50 rounded-lg p-2 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "320",
+          height: Math.max(Math.floor(Math.log2(array.length)) * 55 + 80, 120),
+          className: "mx-auto",
+          children: [
+            array.map((_, idx) => {
+              if (idx === 0) return null;
+              const parentIdx = Math.floor((idx - 1) / 2);
+              const parentPos = positions[parentIdx];
+              const childPos = positions[idx];
+              if (!parentPos || !childPos) return null;
+              const isSorted = (sortedPortion == null ? void 0 : sortedPortion.includes(idx)) || (sortedPortion == null ? void 0 : sortedPortion.includes(parentIdx));
+              const isActive = (compareIndices == null ? void 0 : compareIndices.includes(idx)) && (compareIndices == null ? void 0 : compareIndices.includes(parentIdx)) || (swapIndices == null ? void 0 : swapIndices.includes(idx)) && (swapIndices == null ? void 0 : swapIndices.includes(parentIdx));
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "line",
+                {
+                  x1: parentPos.x,
+                  y1: parentPos.y,
+                  x2: childPos.x,
+                  y2: childPos.y,
+                  stroke: isSorted ? "#d1d5db" : isActive ? "#f59e0b" : "#d1d5db",
+                  strokeWidth: isActive ? 3 : 1,
+                  strokeDasharray: idx >= heapSize ? "4,2" : void 0
+                },
+                `edge-${idx}`
+              );
+            }),
+            array.map((val, idx) => {
+              const pos = positions[idx];
+              if (!pos) return null;
+              return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${pos.x}, ${pos.y})`, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    r: "18",
+                    className: `${getNodeStyle(idx)} stroke-2 transition-colors`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    textAnchor: "middle",
+                    dy: "5",
+                    className: "text-xs font-bold",
+                    fill: getTextColor(idx),
+                    children: val
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "text",
+                  {
+                    textAnchor: "middle",
+                    dy: "32",
+                    className: "text-[9px]",
+                    fill: "#9ca3af",
+                    children: [
+                      "[",
+                      idx,
+                      "]"
+                    ]
+                  }
+                )
+              ] }, idx);
+            })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-600 mb-2 font-medium", children: [
+        "Array representation (heap size: ",
+        heapSize,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 overflow-x-auto", children: array.map((val, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `w-8 h-8 flex items-center justify-center rounded text-xs font-mono transition-colors ${(sortedPortion == null ? void 0 : sortedPortion.includes(idx)) ? "bg-gray-300 text-gray-600" : (swapIndices == null ? void 0 : swapIndices.includes(idx)) ? "bg-green-400 text-white" : (compareIndices == null ? void 0 : compareIndices.includes(idx)) ? "bg-amber-400 text-white" : idx === highlightIndex ? "bg-blue-200 text-blue-700 ring-2 ring-blue-400" : idx === 0 && idx < heapSize ? "bg-orange-500 text-white" : idx < heapSize ? "bg-white border border-gray-300 text-gray-700" : "bg-gray-200 text-gray-400"}`,
+          children: val
+        },
+        idx
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 mt-1", children: array.map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 text-center text-[9px] text-gray-400", children: idx }, idx)) })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseVisualizerLayout,
+    {
+      id: VISUALIZER_ID,
+      title: "Heap (Max-Heap & HeapSort)",
+      badges: BADGES$e,
+      gradient: "orange",
+      className,
+      minHeight: 450,
+      onShare: handleShare,
+      status: {
+        description,
+        currentStep,
+        totalSteps: steps.length,
+        variant: getStatusVariant()
+      },
+      controls: {
+        isPlaying,
+        currentStep,
+        totalSteps: steps.length,
+        speed,
+        onPlayPause: handlePlayPause,
+        onStep: handleStep,
+        onStepBack: handleStepBack,
+        onReset: handleReset,
+        onSpeedChange: setSpeed,
+        accentColor: "orange"
+      },
+      showControls,
+      legendItems: LEGEND_ITEMS$e,
+      code: showCode ? HEAP_CODE : void 0,
+      currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
+      codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
+      showCode,
+      children: visualization
+    }
+  );
+};
+const HeapVisualizer = React.memo(HeapVisualizerComponent);
 const SEGMENT_COUNT = 4;
 const OPERATIONS$7 = [
   { thread: "T1", op: "put", key: "Alice", value: 100 },
@@ -18499,11 +18947,11 @@ const BTreeVisualizerComponent = ({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200 min-h-[150px] flex items-center justify-center", children: nodes.size > 0 ? renderNode(rootId) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "Empty tree" }) }),
-    targetKey !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200 min-h-[44px]", children: targetKey !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "Target key: " }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-bold text-emerald-600", children: targetKey })
-    ] }) }),
-    splitInfo && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-purple-50 rounded-lg border border-purple-200", children: [
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-400 italic", children: "Target key will appear here..." }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-purple-50 rounded-lg border border-purple-200 min-h-[76px]", children: splitInfo ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-purple-800 mb-1", children: "Node Split" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-purple-700 font-mono", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -18522,7 +18970,7 @@ const BTreeVisualizerComponent = ({
           "]"
         ] })
       ] })
-    ] }),
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-purple-400 italic text-center py-2", children: "Split info will appear here when node overflows..." }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-2 bg-blue-50 rounded-lg border border-blue-200", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-blue-800 mb-1", children: "Operations" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-blue-700 font-mono", children: OPERATIONS$4.map((op, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-2", children: [
@@ -20777,13 +21225,13 @@ const ConsistentHashingVisualizerComponent = ({
       },
       server
     )) }),
-    dataKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 overflow-x-auto min-h-[100px]", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-xs", children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "bg-gray-100", children: [
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-left", children: "Key" }),
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-left", children: "Hash (°)" }),
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-left", children: "Server" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: dataKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: dataKeys.length > 0 ? dataKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsxs(
         "tr",
         {
           className: `
@@ -20809,7 +21257,7 @@ const ConsistentHashingVisualizerComponent = ({
           ]
         },
         key.key
-      )) })
+      )) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 3, className: "px-2 py-4 text-center text-gray-400 italic", children: "No keys added yet..." }) }) })
     ] }) })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -22374,6 +22822,7 @@ exports.GraphVisualizer = GraphVisualizer;
 exports.HashMapInterviewVisualizer = HashMapInterviewVisualizer;
 exports.HashMapVisualizer = HashMapVisualizer;
 exports.HashTableVisualizer = HashTableVisualizer;
+exports.HeapVisualizer = HeapVisualizer;
 exports.HelpPanel = HelpPanel;
 exports.ImmutableCollectionsVisualizer = ImmutableCollectionsVisualizer;
 exports.InterviewModePanel = InterviewModePanel;