@tomaszjarosz/react-visualizers 0.4.12 → 0.4.13

package/dist/index.js

@@ -2050,13 +2050,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" }
 ];
@@ -2402,7 +2402,7 @@ const BinarySearchVisualizerComponent = ({
     {
       id: "binarysearch-visualizer",
       title: "Binary Search",
-      badges: BADGES$I,
+      badges: BADGES$J,
       gradient: "green",
       className,
       minHeight: 350,
@@ -2429,7 +2429,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,
@@ -2497,7 +2497,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" },
@@ -3320,7 +3320,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,
@@ -3874,7 +3874,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" }
 ];
@@ -3891,7 +3891,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" }
@@ -4215,7 +4215,7 @@ const DijkstraVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Dijkstra's Algorithm",
-      badges: BADGES$H,
+      badges: BADGES$I,
       gradient: "orange",
       className,
       minHeight: 500,
@@ -4239,7 +4239,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,
@@ -4256,7 +4256,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" }
 ];
@@ -4270,7 +4270,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" },
@@ -4529,7 +4529,7 @@ const DPVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "0/1 Knapsack (Dynamic Programming)",
-      badges: BADGES$G,
+      badges: BADGES$H,
       gradient: "teal",
       className,
       minHeight: 450,
@@ -4553,7 +4553,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,
@@ -4595,7 +4595,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" }
@@ -5010,7 +5010,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,
@@ -5065,7 +5065,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" },
@@ -5074,7 +5074,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" }
 ];
@@ -5374,7 +5374,7 @@ const AStarVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "A* Pathfinding",
-      badges: BADGES$F,
+      badges: BADGES$G,
       gradient: "orange",
       className,
       minHeight: 400,
@@ -5398,7 +5398,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,
@@ -5443,14 +5443,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" }
 ];
@@ -5758,7 +5758,7 @@ const TopologicalSortVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Topological Sort",
-      badges: BADGES$E,
+      badges: BADGES$F,
       gradient: "cyan",
       className,
       minHeight: 400,
@@ -5782,7 +5782,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,
@@ -5825,13 +5825,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" }
 ];
@@ -6092,7 +6092,7 @@ const HashMapVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "HashMap Operations",
-      badges: BADGES$D,
+      badges: BADGES$E,
       gradient: "indigo",
       onShare: handleShare,
       className,
@@ -6116,7 +6116,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,
@@ -6165,7 +6165,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)" },
@@ -6173,7 +6173,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" }
 ];
@@ -6526,7 +6526,7 @@ const LRUCacheVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "LRU Cache",
-      badges: BADGES$C,
+      badges: BADGES$D,
       gradient: "orange",
       className,
       minHeight: 380,
@@ -6550,7 +6550,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,
@@ -6560,9 +6560,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" }
@@ -6576,7 +6576,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" },
@@ -6798,7 +6798,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] = useState("visualize");
   const generateSteps = useMemo(() => generateHashMapSteps, []);
   const {
@@ -6902,9 +6902,9 @@ const HashMapInterviewVisualizerComponent = ({
   return /* @__PURE__ */ 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,
@@ -6928,7 +6928,7 @@ const HashMapInterviewVisualizerComponent = ({
         accentColor: "indigo"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$B,
+      legendItems: LEGEND_ITEMS$C,
       sidePanel,
       children: visualization
     }
@@ -6945,10 +6945,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" },
@@ -7443,7 +7443,7 @@ const ListComparisonVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "ArrayList vs LinkedList",
-      badges: BADGES$A,
+      badges: BADGES$B,
       gradient: "blue",
       className,
       minHeight: 400,
@@ -7467,14 +7467,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" }
@@ -7490,7 +7490,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" }
@@ -7715,7 +7715,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] = useState("visualize");
   const generateSteps = useMemo(() => generateTreeSetSteps$1, []);
   const {
@@ -7859,9 +7859,9 @@ const TreeSetInterviewVisualizerComponent = ({
   return /* @__PURE__ */ 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,
@@ -7885,19 +7885,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" },
@@ -8093,16 +8093,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] = useState("visualize");
-  const generateSteps = useMemo(() => () => generateQuickSortSteps(INITIAL_ARRAY$1), []);
+  const generateSteps = 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;
@@ -8182,9 +8182,9 @@ const SortingInterviewVisualizerComponent = ({
   return /* @__PURE__ */ 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,
@@ -8209,15 +8209,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" }
@@ -8240,7 +8240,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" }
@@ -8466,7 +8466,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] = useState("visualize");
   const [algorithm, setAlgorithm] = useState("bfs");
   const generateSteps = useMemo(
@@ -8618,9 +8618,9 @@ const GraphInterviewVisualizerComponent = ({
   return /* @__PURE__ */ 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,
@@ -8644,17 +8644,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" }
@@ -8667,7 +8667,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" }
@@ -8876,7 +8876,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] = useState("visualize");
   const generateSteps = useMemo(() => generateBloomFilterSteps$1, []);
   const {
@@ -8993,9 +8993,9 @@ const BloomFilterInterviewVisualizerComponent = ({
   return /* @__PURE__ */ 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,
@@ -9020,16 +9020,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" }
@@ -9043,7 +9043,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" }
@@ -9309,7 +9309,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] = useState("visualize");
   const generateSteps = useMemo(() => generateBTreeSteps$1, []);
   const {
@@ -9446,9 +9446,9 @@ const BTreeInterviewVisualizerComponent = ({
   return /* @__PURE__ */ 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,
@@ -9473,17 +9473,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" }
@@ -9842,7 +9842,7 @@ const DijkstraInterviewVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Dijkstra's Algorithm (Interview Mode)",
-      badges: BADGES$u,
+      badges: BADGES$v,
       gradient: "orange",
       className,
       minHeight: 500,
@@ -9867,17 +9867,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" },
@@ -10234,7 +10234,7 @@ const DPInterviewVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "0/1 Knapsack (DP)",
-      badges: BADGES$t,
+      badges: BADGES$u,
       gradient: "cyan",
       className,
       minHeight: 400,
@@ -10259,17 +10259,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" },
@@ -10682,7 +10682,7 @@ const ConsistentHashingInterviewVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Consistent Hashing (Interview Mode)",
-      badges: BADGES$s,
+      badges: BADGES$t,
       gradient: "cyan",
       className,
       minHeight: 500,
@@ -10707,17 +10707,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" },
@@ -11147,7 +11147,7 @@ const RaftInterviewVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Raft Consensus",
-      badges: BADGES$r,
+      badges: BADGES$s,
       gradient: "orange",
       className,
       minHeight: 400,
@@ -11172,15 +11172,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 = [
@@ -11192,7 +11192,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" },
@@ -11527,7 +11527,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] = useState("visualize");
   const generateSteps = useMemo(() => generateTrieSteps$1, []);
   const playback = useVisualizerPlayback({ generateSteps });
@@ -11606,9 +11606,9 @@ const TrieInterviewVisualizerComponent = ({
   return /* @__PURE__ */ 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,
@@ -11633,16 +11633,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 = [
@@ -11655,7 +11655,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" }
@@ -11884,7 +11884,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] = useState("visualize");
   const generateSteps = useMemo(() => generateUnionFindSteps$1, []);
   const playback = useVisualizerPlayback({ generateSteps });
@@ -12007,9 +12007,9 @@ const UnionFindInterviewVisualizerComponent = ({
   return /* @__PURE__ */ 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,
@@ -12034,14 +12034,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 };
@@ -12053,12 +12053,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" },
@@ -12312,7 +12312,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] = useState("visualize");
   const generateSteps = useMemo(() => generateAStarSteps, []);
   const {
@@ -12415,9 +12415,9 @@ const AStarInterviewVisualizerComponent = ({
   return /* @__PURE__ */ 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,
@@ -12442,14 +12442,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 = [
@@ -12460,7 +12460,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" }
@@ -12746,7 +12746,7 @@ const SkipListInterviewVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "Skip List",
-      badges: BADGES$n,
+      badges: BADGES$o,
       gradient: "indigo",
       className,
       minHeight: 260,
@@ -12771,21 +12771,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" },
@@ -12957,7 +12957,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] = useState("visualize");
   const generateSteps = useMemo(() => generateLinkedListSteps$1, []);
   const {
@@ -13044,9 +13044,9 @@ const LinkedListInterviewVisualizerComponent = ({
   return /* @__PURE__ */ 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,
@@ -13070,7 +13070,7 @@ const LinkedListInterviewVisualizerComponent = ({
         accentColor: "blue"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$m,
+      legendItems: LEGEND_ITEMS$n,
       sidePanel,
       children: visualization
     }
@@ -13098,13 +13098,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" }
 ];
@@ -13419,7 +13419,7 @@ const HashTableVisualizerComponent = ({
     {
       id: "hashtable-visualizer",
       title: "Hash Table (Chaining)",
-      badges: BADGES$l,
+      badges: BADGES$m,
       gradient: "purple",
       className,
       minHeight: 400,
@@ -13443,7 +13443,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,
@@ -13485,11 +13485,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" }
 ];
@@ -13687,7 +13687,7 @@ const LinkedListVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "LinkedList Operations",
-      badges: BADGES$k,
+      badges: BADGES$l,
       gradient: "blue",
       onShare: handleShare,
       className,
@@ -13711,7 +13711,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,
@@ -13758,13 +13758,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" }
 ];
@@ -14176,7 +14176,7 @@ const LinkedHashMapVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "LinkedHashMap",
-      badges: BADGES$j,
+      badges: BADGES$k,
       gradient: "orange",
       onShare: handleShare,
       className,
@@ -14201,7 +14201,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,
@@ -14242,13 +14242,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" }
 ];
@@ -14536,7 +14536,7 @@ const ArrayListVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "ArrayList Operations",
-      badges: BADGES$i,
+      badges: BADGES$j,
       gradient: "orange",
       onShare: handleShare,
       className,
@@ -14560,7 +14560,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,
@@ -14617,14 +14617,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" }
 ];
@@ -14976,7 +14976,7 @@ const ArrayDequeVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "ArrayDeque",
-      badges: BADGES$h,
+      badges: BADGES$i,
       gradient: "teal",
       onShare: handleShare,
       className,
@@ -15001,7 +15001,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,
@@ -15042,13 +15042,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" }
 ];
@@ -15414,7 +15414,7 @@ const TreeSetVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "TreeSet Operations (BST)",
-      badges: BADGES$g,
+      badges: BADGES$h,
       gradient: "green",
       className,
       minHeight: 400,
@@ -15438,7 +15438,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,
@@ -15490,13 +15490,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" }
 ];
@@ -15765,7 +15765,7 @@ const EnumSetVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "EnumSet Bit Operations",
-      badges: BADGES$f,
+      badges: BADGES$g,
       gradient: "green",
       onShare: handleShare,
       className,
@@ -15790,7 +15790,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,
@@ -15811,7 +15811,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)",
@@ -15829,18 +15829,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({
@@ -16022,7 +16022,7 @@ function generateHeapSteps() {
   });
   return steps;
 }
-function getTreePositions(size) {
+function getTreePositions$1(size) {
   const positions = [];
   const width = 280;
   for (let i = 0; i < size; i++) {
@@ -16046,7 +16046,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
   const playingRef = useRef(false);
   const timeoutRef = useRef(null);
   const initialize = useCallback(() => {
-    const newSteps = generateHeapSteps();
+    const newSteps = generateHeapSteps$1();
     setSteps(newSteps);
     setCurrentStep(0);
     setIsPlaying(false);
@@ -16134,7 +16134,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";
@@ -16310,7 +16310,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,
@@ -16333,8 +16333,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,
@@ -16345,6 +16345,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 = 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 = useCallback(async () => {
+    return copyUrlToClipboard({ step: currentStep });
+  }, [copyUrlToClipboard, currentStep]);
+  const visualization = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "text-sm font-bold text-orange-800 mb-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-lg", children: "🔺" }),
+        " Max-Heap Property"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-orange-200", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-center text-orange-700 font-bold mb-2", children: "heap[parent] ≥ heap[children]" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs text-gray-600", children: [
+          /* @__PURE__ */ jsxs("div", { className: "bg-orange-50 p-2 rounded text-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "parent(i)" }),
+            " = ⌊(i-1)/2⌋"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "bg-orange-50 p-2 rounded text-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "left(i)" }),
+            " = 2i + 1"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "bg-orange-50 p-2 rounded text-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "right(i)" }),
+            " = 2i + 2"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Binary Max-Heap (size: ",
+          heapSize,
+          ")"
+        ] }),
+        sortedPortion && sortedPortion.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
+          "Sorted: ",
+          sortedPortion.length,
+          " elements"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-lg p-2 overflow-x-auto", children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("g", { transform: `translate(${pos.x}, ${pos.y})`, children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    r: "18",
+                    className: `${getNodeStyle(idx)} stroke-2 transition-colors`
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    textAnchor: "middle",
+                    dy: "5",
+                    className: "text-xs font-bold",
+                    fill: getTextColor(idx),
+                    children: val
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "text",
+                  {
+                    textAnchor: "middle",
+                    dy: "32",
+                    className: "text-[9px]",
+                    fill: "#9ca3af",
+                    children: [
+                      "[",
+                      idx,
+                      "]"
+                    ]
+                  }
+                )
+              ] }, idx);
+            })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-600 mb-2 font-medium", children: [
+        "Array representation (heap size: ",
+        heapSize,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1 overflow-x-auto", children: array.map((val, idx) => /* @__PURE__ */ 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__ */ jsx("div", { className: "flex gap-1 mt-1", children: array.map((_, idx) => /* @__PURE__ */ jsx("div", { className: "w-8 text-center text-[9px] text-gray-400", children: idx }, idx)) })
+    ] })
+  ] });
+  return /* @__PURE__ */ 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 },
@@ -22373,6 +22821,7 @@ export {
   HashMapInterviewVisualizer,
   HashMapVisualizer,
   HashTableVisualizer,
+  HeapVisualizer,
   HelpPanel,
   ImmutableCollectionsVisualizer,
   InterviewModePanel,