@tomaszjarosz/react-visualizers 0.4.13 → 0.4.14

package/dist/index.js

@@ -2050,13 +2050,13 @@ const BINARY_SEARCH_CODE = [
   "      right = mid - 1",
   "  return -1  // Not found"
 ];
-const LEGEND_ITEMS$L = [
+const LEGEND_ITEMS$M = [
   { 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$J = [
+const BADGES$K = [
   { 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$J,
+      badges: BADGES$K,
       gradient: "green",
       className,
       minHeight: 350,
@@ -2429,7 +2429,7 @@ const BinarySearchVisualizerComponent = ({
         accentColor: "green"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$L,
+      legendItems: LEGEND_ITEMS$M,
       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$K = [
+const LEGEND_ITEMS$L = [
   { 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$K,
+      legendItems: LEGEND_ITEMS$L,
       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$I = [
+const BADGES$J = [
   { 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$J = [
+const LEGEND_ITEMS$K = [
   { 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$I,
+      badges: BADGES$J,
       gradient: "orange",
       className,
       minHeight: 500,
@@ -4239,7 +4239,7 @@ const DijkstraVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$J,
+      legendItems: LEGEND_ITEMS$K,
       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$H = [
+const BADGES$I = [
   { 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$I = [
+const LEGEND_ITEMS$J = [
   { 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$H,
+      badges: BADGES$I,
       gradient: "teal",
       className,
       minHeight: 450,
@@ -4553,7 +4553,7 @@ const DPVisualizerComponent = ({
         accentColor: "teal"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$I,
+      legendItems: LEGEND_ITEMS$J,
       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$H = [
+const LEGEND_ITEMS$I = [
   { 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$H,
+      legendItems: LEGEND_ITEMS$I,
       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$G = [
+const LEGEND_ITEMS$H = [
   { 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$G = [
   { color: "bg-yellow-400", label: "Current" },
   { color: "bg-purple-400", label: "Path" }
 ];
-const BADGES$G = [
+const BADGES$H = [
   { 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$G,
+      badges: BADGES$H,
       gradient: "orange",
       className,
       minHeight: 400,
@@ -5398,7 +5398,7 @@ const AStarVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$G,
+      legendItems: LEGEND_ITEMS$H,
       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$F = [
+const LEGEND_ITEMS$G = [
   { 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$F = [
+const BADGES$G = [
   { 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$F,
+      badges: BADGES$G,
       gradient: "cyan",
       className,
       minHeight: 400,
@@ -5782,7 +5782,7 @@ const TopologicalSortVisualizerComponent = ({
         accentColor: "cyan"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$F,
+      legendItems: LEGEND_ITEMS$G,
       code: showCode ? TOPO_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -5793,7 +5793,7 @@ const TopologicalSortVisualizerComponent = ({
 };
 const TopologicalSortVisualizer = React.memo(TopologicalSortVisualizerComponent);
 const BUCKET_COUNT$2 = 8;
-const OPERATIONS$n = [
+const OPERATIONS$o = [
   { op: "put", key: "Alice", value: 25 },
   { op: "put", key: "Bob", value: 30 },
   { op: "put", key: "Charlie", value: 35 },
@@ -5825,13 +5825,13 @@ const HASHMAP_CODE = [
   "      return entry.value",
   "  return null"
 ];
-const LEGEND_ITEMS$E = [
+const LEGEND_ITEMS$F = [
   { 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$E = [
+const BADGES$F = [
   { label: "Avg: O(1)", variant: "indigo" },
   { label: "Worst: O(n)", variant: "purple" }
 ];
@@ -5854,7 +5854,7 @@ function generateHashMapSteps$1() {
     description: `Initialize HashMap with ${BUCKET_COUNT$2} buckets. Each bucket is a linked list for collision handling.`,
     codeLine: -1
   });
-  for (const { op, key, value } of OPERATIONS$n) {
+  for (const { op, key, value } of OPERATIONS$o) {
     const hash = simpleHash$7(key);
     const index = hash % BUCKET_COUNT$2;
     if (op === "put") {
@@ -6092,7 +6092,7 @@ const HashMapVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "HashMap Operations",
-      badges: BADGES$E,
+      badges: BADGES$F,
       gradient: "indigo",
       onShare: handleShare,
       className,
@@ -6116,7 +6116,7 @@ const HashMapVisualizerComponent = ({
         accentColor: "indigo"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$E,
+      legendItems: LEGEND_ITEMS$F,
       code: showCode ? HASHMAP_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -6127,7 +6127,7 @@ const HashMapVisualizerComponent = ({
 };
 const HashMapVisualizer = React.memo(HashMapVisualizerComponent);
 const CAPACITY$1 = 3;
-const OPERATIONS$m = [
+const OPERATIONS$n = [
   { op: "put", key: 1, value: "A" },
   { op: "put", key: 2, value: "B" },
   { op: "put", key: 3, value: "C" },
@@ -6165,7 +6165,7 @@ const LRU_CODE = [
   "    addToHead(node)",
   "    cache[key] = node"
 ];
-const LEGEND_ITEMS$D = [
+const LEGEND_ITEMS$E = [
   { 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$D = [
   { color: "bg-yellow-200", label: "Cache hit", border: "#fbbf24" },
   { color: "bg-purple-400", label: "Evicted" }
 ];
-const BADGES$D = [
+const BADGES$E = [
   { label: "O(1) get/put", variant: "orange" },
   { label: "HashMap + DLL", variant: "orange" }
 ];
@@ -6251,7 +6251,7 @@ function generateLRUSteps() {
     nodes.delete(evictedKey);
     return evictedKey;
   };
-  for (const operation of OPERATIONS$m) {
+  for (const operation of OPERATIONS$n) {
     if (operation.op === "get") {
       const key = operation.key;
       steps.push({
@@ -6526,7 +6526,7 @@ const LRUCacheVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "LRU Cache",
-      badges: BADGES$D,
+      badges: BADGES$E,
       gradient: "orange",
       className,
       minHeight: 380,
@@ -6550,7 +6550,7 @@ const LRUCacheVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$D,
+      legendItems: LEGEND_ITEMS$E,
       code: showCode ? LRU_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -6560,14 +6560,14 @@ const LRUCacheVisualizerComponent = ({
   );
 };
 const LRUCacheVisualizer = React.memo(LRUCacheVisualizerComponent);
-const VISUALIZER_ID$a = "hashmap-interview-visualizer";
+const VISUALIZER_ID$b = "hashmap-interview-visualizer";
 const BUCKET_COUNT$1 = 8;
-const BADGES$C = [
+const BADGES$D = [
   { label: "Interview Mode", variant: "purple" },
   { label: "O(1) avg", variant: "green" },
   { label: "Hash Table", variant: "indigo" }
 ];
-const OPERATIONS$l = [
+const OPERATIONS$m = [
   { op: "put", key: "Alice", value: 25 },
   { op: "put", key: "Bob", value: 30 },
   { op: "put", key: "Charlie", value: 35 },
@@ -6576,7 +6576,7 @@ const OPERATIONS$l = [
   { op: "put", key: "Alice", value: 26 },
   { op: "get", key: "Frank" }
 ];
-const LEGEND_ITEMS$C = [
+const LEGEND_ITEMS$D = [
   { color: "bg-blue-50", label: "Current bucket", border: "#60a5fa" },
   { color: "bg-blue-500", label: "Insert/Update" },
   { color: "bg-green-400", label: "Found" },
@@ -6705,7 +6705,7 @@ function generateHashMapSteps() {
     buckets: buckets.map((b) => ({ entries: [...b.entries] })),
     description: `Initialize HashMap with ${BUCKET_COUNT$1} buckets`
   });
-  for (const { op, key, value } of OPERATIONS$l) {
+  for (const { op, key, value } of OPERATIONS$m) {
     const hash = simpleHash$6(key);
     const index = hash % BUCKET_COUNT$1;
     if (op === "put") {
@@ -6798,7 +6798,7 @@ const HashMapInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "hm-int", scrollToId: VISUALIZER_ID$a });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "hm-int", scrollToId: VISUALIZER_ID$b });
   const [mode, setMode] = useState("visualize");
   const generateSteps = useMemo(() => generateHashMapSteps, []);
   const {
@@ -6902,9 +6902,9 @@ const HashMapInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$a,
+      id: VISUALIZER_ID$b,
       title: "HashMap (Interview Mode)",
-      badges: BADGES$C,
+      badges: BADGES$D,
       gradient: "indigo",
       className,
       minHeight: 500,
@@ -6928,7 +6928,7 @@ const HashMapInterviewVisualizerComponent = ({
         accentColor: "indigo"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$C,
+      legendItems: LEGEND_ITEMS$D,
       sidePanel,
       children: visualization
     }
@@ -6936,7 +6936,7 @@ const HashMapInterviewVisualizerComponent = ({
 };
 const HashMapInterviewVisualizer = React.memo(HashMapInterviewVisualizerComponent);
 const INITIAL_DATA = [10, 20, 30, 40, 50];
-const OPERATIONS$k = [
+const OPERATIONS$l = [
   { op: "get", index: 2 },
   { op: "addLast", value: 60 },
   { op: "addFirst", value: 5 },
@@ -6945,10 +6945,10 @@ const OPERATIONS$k = [
   { op: "removeLast" },
   { op: "removeMiddle", index: 2 }
 ];
-const BADGES$B = [
+const BADGES$C = [
   { label: "Comparison", variant: "blue" }
 ];
-const LEGEND_ITEMS$B = [
+const LEGEND_ITEMS$C = [
   { color: "bg-blue-500", label: "ArrayList" },
   { color: "bg-green-500", label: "LinkedList" },
   { color: "bg-amber-400", label: "Current element" },
@@ -6974,7 +6974,7 @@ function generateListComparisonSteps() {
     description: `Initialize both lists with [${INITIAL_DATA.join(", ")}]`,
     phase: "complete"
   });
-  for (const { op, index, value } of OPERATIONS$k) {
+  for (const { op, index, value } of OPERATIONS$l) {
     switch (op) {
       case "get": {
         const idx = index;
@@ -7443,7 +7443,7 @@ const ListComparisonVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "ArrayList vs LinkedList",
-      badges: BADGES$B,
+      badges: BADGES$C,
       gradient: "blue",
       className,
       minHeight: 400,
@@ -7467,19 +7467,19 @@ const ListComparisonVisualizerComponent = ({
         accentColor: "blue"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$B,
+      legendItems: LEGEND_ITEMS$C,
       children: visualization
     }
   );
 };
 const ListComparisonVisualizer = React.memo(ListComparisonVisualizerComponent);
-const VISUALIZER_ID$9 = "treeset-interview-visualizer";
-const BADGES$A = [
+const VISUALIZER_ID$a = "treeset-interview-visualizer";
+const BADGES$B = [
   { label: "Interview Mode", variant: "purple" },
   { label: "BST", variant: "green" },
   { label: "O(log n)", variant: "teal" }
 ];
-const OPERATIONS$j = [
+const OPERATIONS$k = [
   { op: "add", value: 50 },
   { op: "add", value: 30 },
   { op: "add", value: 70 },
@@ -7490,7 +7490,7 @@ const OPERATIONS$j = [
   { op: "contains", value: 40 },
   { op: "contains", value: 55 }
 ];
-const LEGEND_ITEMS$A = [
+const LEGEND_ITEMS$B = [
   { color: "bg-yellow-100", label: "Path", border: "#facc15" },
   { color: "bg-green-500", label: "Current/Found" },
   { color: "bg-red-500", label: "Not found" }
@@ -7654,7 +7654,7 @@ function generateTreeSetSteps$1() {
     path: [],
     description: "Initialize empty TreeSet (Binary Search Tree)"
   });
-  for (const { op, value } of OPERATIONS$j) {
+  for (const { op, value } of OPERATIONS$k) {
     if (op === "add") {
       const path = tree ? findPath$1(tree, value) : [];
       if (tree) {
@@ -7715,7 +7715,7 @@ const TreeSetInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "ts-int", scrollToId: VISUALIZER_ID$9 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "ts-int", scrollToId: VISUALIZER_ID$a });
   const [mode, setMode] = useState("visualize");
   const generateSteps = useMemo(() => generateTreeSetSteps$1, []);
   const {
@@ -7859,9 +7859,9 @@ const TreeSetInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$9,
+      id: VISUALIZER_ID$a,
       title: "TreeSet / BST (Interview Mode)",
-      badges: BADGES$A,
+      badges: BADGES$B,
       gradient: "green",
       className,
       minHeight: 500,
@@ -7885,19 +7885,19 @@ const TreeSetInterviewVisualizerComponent = ({
         accentColor: "green"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$A,
+      legendItems: LEGEND_ITEMS$B,
       sidePanel,
       children: visualization
     }
   );
 };
 const TreeSetInterviewVisualizer = React.memo(TreeSetInterviewVisualizerComponent);
-const VISUALIZER_ID$8 = "sorting-interview-visualizer";
+const VISUALIZER_ID$9 = "sorting-interview-visualizer";
 const INITIAL_ARRAY$2 = [64, 34, 25, 12, 22, 11, 90];
-const BADGES$z = [
+const BADGES$A = [
   { label: "O(n log n) avg", variant: "amber" }
 ];
-const LEGEND_ITEMS$z = [
+const LEGEND_ITEMS$A = [
   { color: "bg-amber-400", label: "Comparing" },
   { color: "bg-red-400", label: "Swapping" },
   { color: "bg-green-400", label: "Sorted" },
@@ -8093,7 +8093,7 @@ const SortingInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "sort-int", scrollToId: VISUALIZER_ID$8 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "sort-int", scrollToId: VISUALIZER_ID$9 });
   const [mode, setMode] = useState("visualize");
   const generateSteps = useMemo(() => () => generateQuickSortSteps(INITIAL_ARRAY$2), []);
   const playback = useVisualizerPlayback({ generateSteps });
@@ -8182,9 +8182,9 @@ const SortingInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$8,
+      id: VISUALIZER_ID$9,
       title: "QuickSort (Interview Mode)",
-      badges: BADGES$z,
+      badges: BADGES$A,
       gradient: "orange",
       className,
       minHeight: 500,
@@ -8209,15 +8209,15 @@ const SortingInterviewVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$z,
+      legendItems: LEGEND_ITEMS$A,
       sidePanel,
       children: visualization
     }
   );
 };
 const SortingInterviewVisualizer = React.memo(SortingInterviewVisualizerComponent);
-const VISUALIZER_ID$7 = "graph-interview-visualizer";
-const BADGES$y = [
+const VISUALIZER_ID$8 = "graph-interview-visualizer";
+const BADGES$z = [
   { 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$y = [
+const LEGEND_ITEMS$z = [
   { 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$7 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "graph-int", scrollToId: VISUALIZER_ID$8 });
   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$7,
+      id: VISUALIZER_ID$8,
       title: "Graph Traversal (Interview Mode)",
-      badges: BADGES$y,
+      badges: BADGES$z,
       gradient: "blue",
       className,
       minHeight: 500,
@@ -8644,22 +8644,22 @@ const GraphInterviewVisualizerComponent = ({
         accentColor: "blue"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$y,
+      legendItems: LEGEND_ITEMS$z,
       sidePanel,
       children: visualization
     }
   );
 };
 const GraphInterviewVisualizer = React.memo(GraphInterviewVisualizerComponent);
-const VISUALIZER_ID$6 = "bloomfilter-interview-visualizer";
+const VISUALIZER_ID$7 = "bloomfilter-interview-visualizer";
 const BIT_ARRAY_SIZE$1 = 16;
 const K_HASH_FUNCTIONS = 3;
-const BADGES$x = [
+const BADGES$y = [
   { label: "Interview Mode", variant: "purple" },
   { label: "Probabilistic", variant: "pink" },
   { label: "No False Negatives", variant: "indigo" }
 ];
-const OPERATIONS$i = [
+const OPERATIONS$j = [
   { op: "add", element: "apple" },
   { op: "add", element: "banana" },
   { op: "add", element: "cherry" },
@@ -8667,7 +8667,7 @@ const OPERATIONS$i = [
   { op: "query", element: "grape" },
   { op: "query", element: "banana" }
 ];
-const LEGEND_ITEMS$x = [
+const LEGEND_ITEMS$y = [
   { color: "bg-gray-200", label: "Bit = 0" },
   { color: "bg-purple-500", label: "Bit = 1" },
   { color: "bg-pink-400", label: "Current hash position" }
@@ -8825,7 +8825,7 @@ function generateBloomFilterSteps$1() {
     bitArray: [...bitArray],
     description: `Initialize Bloom Filter: ${BIT_ARRAY_SIZE$1} bits, ${K_HASH_FUNCTIONS} hash functions`
   });
-  for (const { op, element } of OPERATIONS$i) {
+  for (const { op, element } of OPERATIONS$j) {
     const positions = getHashPositions(element);
     if (op === "add") {
       steps.push({
@@ -8876,7 +8876,7 @@ const BloomFilterInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "bf-int", scrollToId: VISUALIZER_ID$6 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "bf-int", scrollToId: VISUALIZER_ID$7 });
   const [mode, setMode] = useState("visualize");
   const generateSteps = useMemo(() => generateBloomFilterSteps$1, []);
   const {
@@ -8993,9 +8993,9 @@ const BloomFilterInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$6,
+      id: VISUALIZER_ID$7,
       title: "Bloom Filter (Interview Mode)",
-      badges: BADGES$x,
+      badges: BADGES$y,
       gradient: "purple",
       className,
       minHeight: 500,
@@ -9020,21 +9020,21 @@ const BloomFilterInterviewVisualizerComponent = ({
         accentColor: "purple"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$x,
+      legendItems: LEGEND_ITEMS$y,
       sidePanel,
       children: visualization
     }
   );
 };
 const BloomFilterInterviewVisualizer = React.memo(BloomFilterInterviewVisualizerComponent);
-const VISUALIZER_ID$5 = "btree-interview-visualizer";
+const VISUALIZER_ID$6 = "btree-interview-visualizer";
 const ORDER$1 = 3;
-const BADGES$w = [
+const BADGES$x = [
   { label: "Interview Mode", variant: "purple" },
   { label: `Order ${ORDER$1}`, variant: "green" },
   { label: "O(log n)", variant: "teal" }
 ];
-const OPERATIONS$h = [
+const OPERATIONS$i = [
   { op: "insert", value: 10 },
   { op: "insert", value: 20 },
   { op: "insert", value: 5 },
@@ -9043,7 +9043,7 @@ const OPERATIONS$h = [
   { op: "search", value: 15 },
   { op: "search", value: 12 }
 ];
-const LEGEND_ITEMS$w = [
+const LEGEND_ITEMS$x = [
   { color: "bg-green-400", label: "Current node" },
   { color: "bg-amber-100", label: "Search path", border: "#fbbf24" },
   { color: "bg-blue-400", label: "Found/Inserted" }
@@ -9235,7 +9235,7 @@ function generateBTreeSteps$1() {
     }
     return { node };
   }
-  for (const { op, value } of OPERATIONS$h) {
+  for (const { op, value } of OPERATIONS$i) {
     if (op === "insert") {
       steps.push({
         operation: "insert",
@@ -9309,7 +9309,7 @@ const BTreeInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "bt-int", scrollToId: VISUALIZER_ID$5 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "bt-int", scrollToId: VISUALIZER_ID$6 });
   const [mode, setMode] = useState("visualize");
   const generateSteps = useMemo(() => generateBTreeSteps$1, []);
   const {
@@ -9446,9 +9446,9 @@ const BTreeInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$5,
+      id: VISUALIZER_ID$6,
       title: "B-Tree (Interview Mode)",
-      badges: BADGES$w,
+      badges: BADGES$x,
       gradient: "green",
       className,
       minHeight: 500,
@@ -9473,17 +9473,17 @@ const BTreeInterviewVisualizerComponent = ({
         accentColor: "green"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$w,
+      legendItems: LEGEND_ITEMS$x,
       sidePanel,
       children: visualization
     }
   );
 };
 const BTreeInterviewVisualizer = React.memo(BTreeInterviewVisualizerComponent);
-const BADGES$v = [
+const BADGES$w = [
   { label: "O((V+E) log V)", variant: "orange" }
 ];
-const LEGEND_ITEMS$v = [
+const LEGEND_ITEMS$w = [
   { 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$v,
+      badges: BADGES$w,
       gradient: "orange",
       className,
       minHeight: 500,
@@ -9867,17 +9867,17 @@ const DijkstraInterviewVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$v,
+      legendItems: LEGEND_ITEMS$w,
       sidePanel,
       children: visualization
     }
   );
 };
 const DijkstraInterviewVisualizer = React.memo(DijkstraInterviewVisualizerComponent);
-const BADGES$u = [
+const BADGES$v = [
   { label: "O(n×W)", variant: "cyan" }
 ];
-const LEGEND_ITEMS$u = [
+const LEGEND_ITEMS$v = [
   { 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$u,
+      badges: BADGES$v,
       gradient: "cyan",
       className,
       minHeight: 400,
@@ -10259,17 +10259,17 @@ const DPInterviewVisualizerComponent = ({
         accentColor: "cyan"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$u,
+      legendItems: LEGEND_ITEMS$v,
       sidePanel,
       children: visualization
     }
   );
 };
 const DPInterviewVisualizer = React.memo(DPInterviewVisualizerComponent);
-const BADGES$t = [
+const BADGES$u = [
   { label: "Distributed Systems", variant: "cyan" }
 ];
-const LEGEND_ITEMS$t = [
+const LEGEND_ITEMS$u = [
   { 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$t,
+      badges: BADGES$u,
       gradient: "cyan",
       className,
       minHeight: 500,
@@ -10707,17 +10707,17 @@ const ConsistentHashingInterviewVisualizerComponent = ({
         accentColor: "cyan"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$t,
+      legendItems: LEGEND_ITEMS$u,
       sidePanel,
       children: visualization
     }
   );
 };
 const ConsistentHashingInterviewVisualizer = React.memo(ConsistentHashingInterviewVisualizerComponent);
-const BADGES$s = [
+const BADGES$t = [
   { label: "Distributed Consensus", variant: "orange" }
 ];
-const LEGEND_ITEMS$s = [
+const LEGEND_ITEMS$t = [
   { 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$s,
+      badges: BADGES$t,
       gradient: "orange",
       className,
       minHeight: 400,
@@ -11172,18 +11172,18 @@ const RaftInterviewVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$s,
+      legendItems: LEGEND_ITEMS$t,
       sidePanel,
       children: visualization
     }
   );
 };
 const RaftInterviewVisualizer = React.memo(RaftInterviewVisualizerComponent);
-const VISUALIZER_ID$4 = "trie-interview-visualizer";
-const BADGES$r = [
+const VISUALIZER_ID$5 = "trie-interview-visualizer";
+const BADGES$s = [
   { label: "O(m) ops", variant: "cyan" }
 ];
-const OPERATIONS$g = [
+const OPERATIONS$h = [
   { op: "insert", word: "cat" },
   { op: "insert", word: "car" },
   { op: "insert", word: "card" },
@@ -11192,7 +11192,7 @@ const OPERATIONS$g = [
   { op: "search", word: "car" },
   { op: "prefix", word: "car" }
 ];
-const LEGEND_ITEMS$r = [
+const LEGEND_ITEMS$s = [
   { color: "bg-gray-100", label: "Node", border: "#d1d5db" },
   { color: "bg-blue-200", label: "Current", border: "#60a5fa" },
   { color: "bg-green-400", label: "End of word" },
@@ -11359,7 +11359,7 @@ function generateTrieSteps$1() {
     rootId,
     description: "Initialize empty Trie with root node"
   });
-  for (const { op, word } of OPERATIONS$g) {
+  for (const { op, word } of OPERATIONS$h) {
     if (op === "insert") {
       let currentId = rootId;
       const path = [rootId];
@@ -11527,7 +11527,7 @@ const TrieInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "trie-int", scrollToId: VISUALIZER_ID$4 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "trie-int", scrollToId: VISUALIZER_ID$5 });
   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$4,
+      id: VISUALIZER_ID$5,
       title: "Trie (Prefix Tree) - Interview Mode",
-      badges: BADGES$r,
+      badges: BADGES$s,
       gradient: "cyan",
       className,
       minHeight: 500,
@@ -11633,19 +11633,19 @@ const TrieInterviewVisualizerComponent = ({
         accentColor: "cyan"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$r,
+      legendItems: LEGEND_ITEMS$s,
       sidePanel,
       children: visualization
     }
   );
 };
 const TrieInterviewVisualizer = React.memo(TrieInterviewVisualizerComponent);
-const VISUALIZER_ID$3 = "unionfind-interview-visualizer";
+const VISUALIZER_ID$4 = "unionfind-interview-visualizer";
 const INITIAL_SIZE$2 = 8;
-const BADGES$q = [
+const BADGES$r = [
   { label: "O(α(n))", variant: "purple" }
 ];
-const OPERATIONS$f = [
+const OPERATIONS$g = [
   { op: "union", a: 0, b: 1 },
   { op: "union", a: 2, b: 3 },
   { op: "union", a: 4, b: 5 },
@@ -11655,7 +11655,7 @@ const OPERATIONS$f = [
   { op: "connected", a: 1, b: 3 },
   { op: "union", a: 0, b: 4 }
 ];
-const LEGEND_ITEMS$q = [
+const LEGEND_ITEMS$r = [
   { color: "bg-gray-100", label: "Element", border: "#d1d5db" },
   { color: "bg-blue-200", label: "Current", border: "#60a5fa" },
   { color: "bg-green-400", label: "Root / Same set" }
@@ -11808,7 +11808,7 @@ function generateUnionFindSteps$1() {
     }
     return { root: current, path };
   };
-  for (const operation of OPERATIONS$f) {
+  for (const operation of OPERATIONS$g) {
     if (operation.op === "find") {
       const x = operation.a;
       const { root, path } = find(x, true);
@@ -11884,7 +11884,7 @@ const UnionFindInterviewVisualizerComponent = ({
   showControls = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "uf-int", scrollToId: VISUALIZER_ID$3 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "uf-int", scrollToId: VISUALIZER_ID$4 });
   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$3,
+      id: VISUALIZER_ID$4,
       title: "Union-Find (DSU) - Interview Mode",
-      badges: BADGES$q,
+      badges: BADGES$r,
       gradient: "purple",
       className,
       minHeight: 500,
@@ -12034,14 +12034,14 @@ const UnionFindInterviewVisualizerComponent = ({
         accentColor: "purple"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$q,
+      legendItems: LEGEND_ITEMS$r,
       sidePanel,
       children: visualization
     }
   );
 };
 const UnionFindInterviewVisualizer = React.memo(UnionFindInterviewVisualizerComponent);
-const VISUALIZER_ID$2 = "astar-interview-visualizer";
+const VISUALIZER_ID$3 = "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$p = [
+const BADGES$q = [
   { label: "Interview Mode", variant: "purple" },
   { label: "f = g + h", variant: "amber" },
   { label: "O(b^d)", variant: "orange" }
 ];
-const LEGEND_ITEMS$p = [
+const LEGEND_ITEMS$q = [
   { 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$2 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "astar-int", scrollToId: VISUALIZER_ID$3 });
   const [mode, setMode] = useState("visualize");
   const generateSteps = useMemo(() => generateAStarSteps, []);
   const {
@@ -12415,9 +12415,9 @@ const AStarInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$2,
+      id: VISUALIZER_ID$3,
       title: "A* Pathfinding (Interview Mode)",
-      badges: BADGES$p,
+      badges: BADGES$q,
       gradient: "orange",
       className,
       minHeight: 500,
@@ -12442,14 +12442,14 @@ const AStarInterviewVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$p,
+      legendItems: LEGEND_ITEMS$q,
       sidePanel,
       children: visualization
     }
   );
 };
 const AStarInterviewVisualizer = React.memo(AStarInterviewVisualizerComponent);
-const BADGES$o = [
+const BADGES$p = [
   { 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$o = [
+const LEGEND_ITEMS$p = [
   { 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$o,
+      badges: BADGES$p,
       gradient: "indigo",
       className,
       minHeight: 260,
@@ -12771,21 +12771,21 @@ const SkipListInterviewVisualizerComponent = ({
         accentColor: "indigo"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$o,
+      legendItems: LEGEND_ITEMS$p,
       sidePanel,
       children: visualization
     }
   );
 };
 const SkipListInterviewVisualizer = React.memo(SkipListInterviewVisualizerComponent);
-const VISUALIZER_ID$1 = "linkedlist-interview-visualizer";
-const BADGES$n = [
+const VISUALIZER_ID$2 = "linkedlist-interview-visualizer";
+const BADGES$o = [
   { 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$n = [
+const LEGEND_ITEMS$o = [
   { 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$1 });
+  const { copyUrlToClipboard } = useUrlState({ prefix: "ll-int", scrollToId: VISUALIZER_ID$2 });
   const [mode, setMode] = useState("visualize");
   const generateSteps = useMemo(() => generateLinkedListSteps$1, []);
   const {
@@ -13044,9 +13044,9 @@ const LinkedListInterviewVisualizerComponent = ({
   return /* @__PURE__ */ jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID$1,
+      id: VISUALIZER_ID$2,
       title: "Linked List (Interview Mode)",
-      badges: BADGES$n,
+      badges: BADGES$o,
       gradient: "blue",
       className,
       minHeight: 400,
@@ -13070,7 +13070,7 @@ const LinkedListInterviewVisualizerComponent = ({
         accentColor: "blue"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$n,
+      legendItems: LEGEND_ITEMS$o,
       sidePanel,
       children: visualization
     }
@@ -13098,13 +13098,13 @@ const HASH_TABLE_CODE = [
   "  if loadFactor > threshold:",
   "    rehash(newSize = size * 2)"
 ];
-const LEGEND_ITEMS$m = [
+const LEGEND_ITEMS$n = [
   { 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$m = [
+const BADGES$n = [
   { 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$m,
+      badges: BADGES$n,
       gradient: "purple",
       className,
       minHeight: 400,
@@ -13443,7 +13443,7 @@ const HashTableVisualizerComponent = ({
         extraControls
       },
       showControls,
-      legendItems: LEGEND_ITEMS$m,
+      legendItems: LEGEND_ITEMS$n,
       code: showCode ? HASH_TABLE_CODE : void 0,
       currentCodeLine: stepData == null ? void 0 : stepData.codeLine,
       codeVariables: stepData == null ? void 0 : stepData.variables,
@@ -13453,7 +13453,7 @@ const HashTableVisualizerComponent = ({
   );
 };
 const HashTableVisualizer = React.memo(HashTableVisualizerComponent);
-const OPERATIONS$e = [
+const OPERATIONS$f = [
   { op: "addFirst", value: 10 },
   { op: "addLast", value: 20 },
   { op: "addLast", value: 30 },
@@ -13485,11 +13485,11 @@ const LINKEDLIST_CODE = [
   "    node = node.next",
   "  return node.value"
 ];
-const LEGEND_ITEMS$l = [
+const LEGEND_ITEMS$m = [
   { color: "bg-white", label: "Node", border: "#d1d5db" },
   { color: "bg-blue-500", label: "Active" }
 ];
-const BADGES$l = [
+const BADGES$m = [
   { label: "Ends: O(1)", variant: "blue" },
   { label: "Index: O(n)", variant: "indigo" }
 ];
@@ -13505,7 +13505,7 @@ function generateLinkedListSteps() {
     description: "Initialize empty LinkedList (doubly-linked). O(1) for add/remove at ends, O(n) for indexed access.",
     codeLine: -1
   });
-  for (const { op, value, index } of OPERATIONS$e) {
+  for (const { op, value, index } of OPERATIONS$f) {
     if (op === "addFirst" && value !== void 0) {
       const newNode = { value, id: nodeIdCounter$2++ };
       nodes = [newNode, ...nodes];
@@ -13687,7 +13687,7 @@ const LinkedListVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "LinkedList Operations",
-      badges: BADGES$l,
+      badges: BADGES$m,
       gradient: "blue",
       onShare: handleShare,
       className,
@@ -13711,7 +13711,7 @@ const LinkedListVisualizerComponent = ({
         accentColor: "blue"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$l,
+      legendItems: LEGEND_ITEMS$m,
       code: showCode ? LINKEDLIST_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -13722,7 +13722,7 @@ const LinkedListVisualizerComponent = ({
 };
 const LinkedListVisualizer = React.memo(LinkedListVisualizerComponent);
 const BUCKET_COUNT = 6;
-const OPERATIONS$d = [
+const OPERATIONS$e = [
   { op: "put", key: "A", value: 10 },
   { op: "put", key: "B", value: 20 },
   { op: "put", key: "C", value: 30 },
@@ -13758,13 +13758,13 @@ const LINKEDHASHMAP_CODE = [
   "  }",
   "}"
 ];
-const LEGEND_ITEMS$k = [
+const LEGEND_ITEMS$l = [
   { 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$k = [
+const BADGES$l = [
   { label: "O(1) ops", variant: "orange" },
   { label: "Ordered", variant: "amber" }
 ];
@@ -13791,7 +13791,7 @@ function generateLinkedHashMapSteps(accessOrder = true) {
     codeLine: 0,
     accessOrder
   });
-  for (const { op, key, value } of OPERATIONS$d) {
+  for (const { op, key, value } of OPERATIONS$e) {
     const hash = simpleHash$2(key);
     const index = hash % BUCKET_COUNT;
     if (op === "put") {
@@ -14176,7 +14176,7 @@ const LinkedHashMapVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "LinkedHashMap",
-      badges: BADGES$k,
+      badges: BADGES$l,
       gradient: "orange",
       onShare: handleShare,
       className,
@@ -14201,7 +14201,7 @@ const LinkedHashMapVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$k,
+      legendItems: LEGEND_ITEMS$l,
       code: showCode ? LINKEDHASHMAP_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -14212,7 +14212,7 @@ const LinkedHashMapVisualizerComponent = ({
 };
 const LinkedHashMapVisualizer = React.memo(LinkedHashMapVisualizerComponent);
 const INITIAL_CAPACITY$1 = 4;
-const OPERATIONS$c = [
+const OPERATIONS$d = [
   { op: "add", value: 10 },
   { op: "add", value: 20 },
   { op: "add", value: 30 },
@@ -14242,13 +14242,13 @@ const ARRAYLIST_CODE = [
   "  shift elements left",
   "  size--"
 ];
-const LEGEND_ITEMS$j = [
+const LEGEND_ITEMS$k = [
   { 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$j = [
+const BADGES$k = [
   { label: "Get: O(1)", variant: "orange" },
   { label: "Add: O(1)*", variant: "amber" }
 ];
@@ -14265,7 +14265,7 @@ function generateArrayListSteps() {
     description: `Initialize ArrayList with capacity ${capacity}. Auto-grows when full (amortized O(1) add).`,
     codeLine: -1
   });
-  for (const { op, value, index } of OPERATIONS$c) {
+  for (const { op, value, index } of OPERATIONS$d) {
     if (op === "add" && value !== void 0) {
       if (size === capacity) {
         const oldCapacity = capacity;
@@ -14536,7 +14536,7 @@ const ArrayListVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "ArrayList Operations",
-      badges: BADGES$j,
+      badges: BADGES$k,
       gradient: "orange",
       onShare: handleShare,
       className,
@@ -14560,7 +14560,7 @@ const ArrayListVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$j,
+      legendItems: LEGEND_ITEMS$k,
       code: showCode ? ARRAYLIST_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -14571,7 +14571,7 @@ const ArrayListVisualizerComponent = ({
 };
 const ArrayListVisualizer = React.memo(ArrayListVisualizerComponent);
 const INITIAL_CAPACITY = 8;
-const OPERATIONS$b = [
+const OPERATIONS$c = [
   { op: "addLast", value: 10 },
   { op: "addLast", value: 20 },
   { op: "addFirst", value: 5 },
@@ -14617,14 +14617,14 @@ const ARRAYDEQUE_CODE = [
   "  }",
   "}"
 ];
-const LEGEND_ITEMS$i = [
+const LEGEND_ITEMS$j = [
   { 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$i = [
+const BADGES$j = [
   { label: "O(1) all ops", variant: "teal" },
   { label: "Circular buffer", variant: "purple" }
 ];
@@ -14645,7 +14645,7 @@ function generateArrayDequeSteps() {
     codeLine: 0,
     variables: { head, tail, capacity, size: 0 }
   });
-  for (const { op, value } of OPERATIONS$b) {
+  for (const { op, value } of OPERATIONS$c) {
     if (op === "addFirst" && value !== void 0) {
       if (getSize() === capacity - 1) {
         const oldCapacity = capacity;
@@ -14976,7 +14976,7 @@ const ArrayDequeVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "ArrayDeque",
-      badges: BADGES$i,
+      badges: BADGES$j,
       gradient: "teal",
       onShare: handleShare,
       className,
@@ -15001,7 +15001,7 @@ const ArrayDequeVisualizerComponent = ({
         accentColor: "teal"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$i,
+      legendItems: LEGEND_ITEMS$j,
       code: showCode ? ARRAYDEQUE_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -15011,7 +15011,7 @@ const ArrayDequeVisualizerComponent = ({
   );
 };
 const ArrayDequeVisualizer = React.memo(ArrayDequeVisualizerComponent);
-const OPERATIONS$a = [
+const OPERATIONS$b = [
   { op: "add", value: 50 },
   { op: "add", value: 30 },
   { op: "add", value: 70 },
@@ -15042,13 +15042,13 @@ const TREESET_CODE = [
   "      node = node.right",
   "    else: return // duplicate"
 ];
-const LEGEND_ITEMS$h = [
+const LEGEND_ITEMS$i = [
   { 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$h = [
+const BADGES$i = [
   { label: "Avg: O(log n)", variant: "green" },
   { label: "Worst: O(n)", variant: "amber" }
 ];
@@ -15095,7 +15095,7 @@ function generateTreeSetSteps() {
     description: "Initialize empty TreeSet (Binary Search Tree). Values are stored in sorted order.",
     codeLine: -1
   });
-  for (const { op, value } of OPERATIONS$a) {
+  for (const { op, value } of OPERATIONS$b) {
     if (op === "add") {
       const path = tree ? findPath(tree, value) : [];
       if (tree) {
@@ -15414,7 +15414,7 @@ const TreeSetVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "TreeSet Operations (BST)",
-      badges: BADGES$h,
+      badges: BADGES$i,
       gradient: "green",
       className,
       minHeight: 400,
@@ -15438,7 +15438,7 @@ const TreeSetVisualizerComponent = ({
         accentColor: "green"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$h,
+      legendItems: LEGEND_ITEMS$i,
       code: showCode ? TREESET_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -15457,7 +15457,7 @@ const DAYS_OF_WEEK = [
   "SATURDAY",
   "SUNDAY"
 ];
-const OPERATIONS$9 = [
+const OPERATIONS$a = [
   { op: "add", value: "MONDAY" },
   { op: "add", value: "WEDNESDAY" },
   { op: "add", value: "FRIDAY" },
@@ -15490,13 +15490,13 @@ const ENUMSET_CODE = [
   "  }",
   "}"
 ];
-const LEGEND_ITEMS$g = [
+const LEGEND_ITEMS$h = [
   { 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$g = [
+const BADGES$h = [
   { label: "O(1) all ops", variant: "green" },
   { label: "Memory efficient", variant: "green" }
 ];
@@ -15513,7 +15513,7 @@ function generateEnumSetSteps() {
     codeLine: 1,
     variables: { elements: "0b0000000" }
   });
-  for (const { op, value } of OPERATIONS$9) {
+  for (const { op, value } of OPERATIONS$a) {
     const bitPos = getBitPosition(value);
     const bitMaskForValue = 1 << bitPos;
     const previousBitmask = bitmask;
@@ -15765,7 +15765,7 @@ const EnumSetVisualizerComponent = ({
     {
       id: VISUALIZER_ID2,
       title: "EnumSet Bit Operations",
-      badges: BADGES$g,
+      badges: BADGES$h,
       gradient: "green",
       onShare: handleShare,
       className,
@@ -15790,7 +15790,7 @@ const EnumSetVisualizerComponent = ({
         accentColor: "green"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$g,
+      legendItems: LEGEND_ITEMS$h,
       code: showCode ? ENUMSET_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -15800,7 +15800,7 @@ const EnumSetVisualizerComponent = ({
   );
 };
 const EnumSetVisualizer = React.memo(EnumSetVisualizerComponent);
-const OPERATIONS$8 = [
+const OPERATIONS$9 = [
   { op: "offer", value: 50 },
   { op: "offer", value: 30 },
   { op: "offer", value: 70 },
@@ -15829,18 +15829,18 @@ const HEAP_CODE$1 = [
   "  siftDown(0)",
   "  return result"
 ];
-const LEGEND_ITEMS$f = [
+const LEGEND_ITEMS$g = [
   { 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$f = [
+const BADGES$g = [
   { label: "offer: O(log n)", variant: "purple" },
   { label: "poll: O(log n)", variant: "purple" }
 ];
-function generateHeapSteps$1() {
+function generateHeapSteps$2() {
   const steps = [];
   const heap = [];
   steps.push({
@@ -15849,7 +15849,7 @@ function generateHeapSteps$1() {
     description: "Initialize min-heap PriorityQueue. Parent is always smaller than children. O(log n) insert/remove.",
     codeLine: -1
   });
-  for (const { op, value } of OPERATIONS$8) {
+  for (const { op, value } of OPERATIONS$9) {
     if (op === "offer" && value !== void 0) {
       heap.push(value);
       let idx = heap.length - 1;
@@ -16022,7 +16022,7 @@ function generateHeapSteps$1() {
   });
   return steps;
 }
-function getTreePositions$1(size) {
+function getTreePositions$2(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$1();
+    const newSteps = generateHeapSteps$2();
     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$1(heap.length);
+  const positions = getTreePositions$2(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$f,
+      badges: BADGES$g,
       gradient: "purple",
       className,
       minHeight: 400,
@@ -16333,7 +16333,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
         accentColor: "purple"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$f,
+      legendItems: LEGEND_ITEMS$g,
       code: showCode ? HEAP_CODE$1 : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -16345,9 +16345,9 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
 const PriorityQueueVisualizer = React.memo(
   PriorityQueueVisualizerComponent
 );
-const VISUALIZER_ID = "heap-visualizer";
+const VISUALIZER_ID$1 = "heap-visualizer";
 const INITIAL_ARRAY$1 = [4, 10, 3, 5, 1, 8, 7, 2, 9, 6];
-const BADGES$e = [
+const BADGES$f = [
   { label: "Build: O(n)", variant: "orange" },
   { label: "Sort: O(n log n)", variant: "amber" }
 ];
@@ -16376,14 +16376,14 @@ const HEAP_CODE = [
   "    swap(arr[0], arr[i])  # Move max to end",
   "    heapify(arr, i, 0)    # Restore heap"
 ];
-const LEGEND_ITEMS$e = [
+const LEGEND_ITEMS$f = [
   { 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) {
+function generateHeapSteps$1(initialArray) {
   const steps = [];
   const arr = [...initialArray];
   const n = arr.length;
@@ -16550,7 +16550,7 @@ function heapifyWithSteps(arr, heapSize, i, steps, phase, sortedPortion = []) {
     });
   }
 }
-function getTreePositions(size) {
+function getTreePositions$1(size) {
   const positions = [];
   const width = 320;
   for (let i = 0; i < size; i++) {
@@ -16571,8 +16571,8 @@ const HeapVisualizerComponent = ({
   showCode = true,
   className = ""
 }) => {
-  const { copyUrlToClipboard } = useUrlState({ prefix: "heap", scrollToId: VISUALIZER_ID });
-  const generateSteps = useMemo(() => () => generateHeapSteps(INITIAL_ARRAY$1), []);
+  const { copyUrlToClipboard } = useUrlState({ prefix: "heap", scrollToId: VISUALIZER_ID$1 });
+  const generateSteps = useMemo(() => () => generateHeapSteps$1(INITIAL_ARRAY$1), []);
   const {
     steps,
     currentStep,
@@ -16594,7 +16594,7 @@ const HeapVisualizerComponent = ({
     description: ""
   };
   const { array, heapSize, sortedPortion, highlightIndex, compareIndices, swapIndices, description, phase } = stepData;
-  const positions = getTreePositions(array.length);
+  const positions = getTreePositions$1(array.length);
   const getNodeStyle = (idx) => {
     if (sortedPortion == null ? void 0 : sortedPortion.includes(idx)) {
       return "fill-gray-300 stroke-gray-400";
@@ -16757,9 +16757,9 @@ const HeapVisualizerComponent = ({
   return /* @__PURE__ */ jsx(
     BaseVisualizerLayout,
     {
-      id: VISUALIZER_ID,
+      id: VISUALIZER_ID$1,
       title: "Heap (Max-Heap & HeapSort)",
-      badges: BADGES$e,
+      badges: BADGES$f,
       gradient: "orange",
       className,
       minHeight: 450,
@@ -16783,7 +16783,7 @@ const HeapVisualizerComponent = ({
         accentColor: "orange"
       },
       showControls,
-      legendItems: LEGEND_ITEMS$e,
+      legendItems: LEGEND_ITEMS$f,
       code: showCode ? HEAP_CODE : void 0,
       currentCodeLine: currentStepData == null ? void 0 : currentStepData.codeLine,
       codeVariables: currentStepData == null ? void 0 : currentStepData.variables,
@@ -16793,6 +16793,403 @@ const HeapVisualizerComponent = ({
   );
 };
 const HeapVisualizer = React.memo(HeapVisualizerComponent);
+const VISUALIZER_ID = "heap-interview-visualizer";
+const BADGES$e = [
+  { label: "Interview Mode", variant: "orange" },
+  { label: "Max-Heap", variant: "amber" }
+];
+const OPERATIONS$8 = [
+  { op: "insert", value: 40 },
+  { op: "insert", value: 20 },
+  { op: "insert", value: 60 },
+  { op: "insert", value: 10 },
+  { op: "insert", value: 50 },
+  { op: "extractMax" },
+  { op: "insert", value: 55 },
+  { op: "extractMax" }
+];
+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", border: "#60a5fa" }
+];
+const HEAP_QUESTIONS = [
+  {
+    id: "heap-1",
+    question: "What is the time complexity of inserting an element into a heap?",
+    options: ["O(1)", "O(log n)", "O(n)", "O(n log n)"],
+    correctAnswer: 1,
+    explanation: 'Insertion is O(log n) because after adding the element at the end, we may need to "sift up" through at most log n levels (height of the tree) to restore the heap property.',
+    hint: "Think about the height of a complete binary tree.",
+    difficulty: "easy",
+    topic: "Time Complexity"
+  },
+  {
+    id: "heap-2",
+    question: "What is the time complexity of building a heap from an unsorted array?",
+    options: ["O(n)", "O(n log n)", "O(n²)", "O(log n)"],
+    correctAnswer: 0,
+    explanation: "Building a heap using bottom-up heapify is O(n), not O(n log n)! This is because most nodes are near the bottom and require few swaps. The mathematical analysis shows the total work is O(n).",
+    hint: "It's better than calling insert() n times.",
+    difficulty: "medium",
+    topic: "Build Heap"
+  },
+  {
+    id: "heap-3",
+    question: "In a max-heap stored as an array, what is the index of the left child of node at index i?",
+    options: ["i + 1", "2i", "2i + 1", "(i - 1) / 2"],
+    correctAnswer: 2,
+    explanation: "For 0-indexed arrays: left child = 2i + 1, right child = 2i + 2, parent = ⌊(i-1)/2⌋. For 1-indexed: left = 2i, right = 2i + 1, parent = ⌊i/2⌋.",
+    hint: "The formula depends on whether the array is 0-indexed or 1-indexed.",
+    difficulty: "easy",
+    topic: "Index Formulas"
+  },
+  {
+    id: "heap-4",
+    question: "What type of binary tree is a heap?",
+    options: ["Full binary tree", "Complete binary tree", "Perfect binary tree", "Binary search tree"],
+    correctAnswer: 1,
+    explanation: "A heap is a complete binary tree: all levels are fully filled except possibly the last, which is filled from left to right. This allows efficient array storage without pointers.",
+    difficulty: "easy",
+    topic: "Structure"
+  },
+  {
+    id: "heap-5",
+    question: "What is the time complexity of HeapSort?",
+    options: ["O(n)", "O(n log n)", "O(n²)", "O(log n)"],
+    correctAnswer: 1,
+    explanation: "HeapSort is O(n log n): O(n) to build the heap, then n extract operations each taking O(log n). Unlike QuickSort, HeapSort has guaranteed O(n log n) worst case.",
+    difficulty: "easy",
+    topic: "HeapSort"
+  },
+  {
+    id: "heap-6",
+    question: "Which operation is NOT efficiently supported by a standard heap?",
+    options: ["Find min/max", "Insert", "Delete min/max", "Search for arbitrary element"],
+    correctAnswer: 3,
+    explanation: "Heaps don't support efficient search - finding an arbitrary element requires O(n) time as you may need to scan the entire array. Heaps are optimized for min/max operations only.",
+    hint: "A heap is not ordered like a BST.",
+    difficulty: "medium",
+    topic: "Limitations"
+  },
+  {
+    id: "heap-7",
+    question: "What is the space complexity of HeapSort?",
+    options: ["O(1)", "O(log n)", "O(n)", "O(n log n)"],
+    correctAnswer: 0,
+    explanation: "HeapSort is an in-place sorting algorithm with O(1) extra space. The heap is built within the original array. Only O(log n) stack space is used if implemented recursively.",
+    difficulty: "medium",
+    topic: "Space Complexity"
+  },
+  {
+    id: "heap-8",
+    question: "In a min-heap with n elements, where can the maximum element be?",
+    options: ["Only at the root", "Only at the last level", "At any leaf node", "Anywhere in the heap"],
+    correctAnswer: 2,
+    explanation: "In a min-heap, the maximum must be at a leaf node (it cannot have any children smaller than it). The maximum could be any of the ⌈n/2⌉ leaf nodes.",
+    hint: "Think about the heap property and where max cannot be.",
+    difficulty: "medium",
+    topic: "Heap Property"
+  },
+  {
+    id: "heap-9",
+    question: "What data structure is typically used to implement a priority queue?",
+    options: ["Sorted array", "Linked list", "Binary heap", "Hash table"],
+    correctAnswer: 2,
+    explanation: "Binary heaps are the standard implementation for priority queues because they provide O(log n) insert and extract-min/max operations. Sorted arrays have O(n) insert, and hash tables don't maintain order.",
+    difficulty: "easy",
+    topic: "Applications"
+  },
+  {
+    id: "heap-10",
+    question: "What is a Fibonacci heap's advantage over a binary heap?",
+    options: [
+      "Simpler implementation",
+      "Better worst-case insert and decrease-key: O(1) amortized",
+      "Uses less memory",
+      "Faster extract-min operation"
+    ],
+    correctAnswer: 1,
+    explanation: "Fibonacci heaps have O(1) amortized insert and decrease-key operations (vs O(log n) for binary heaps). This makes them theoretically better for Dijkstra's algorithm, though binary heaps are often faster in practice due to constants.",
+    difficulty: "hard",
+    topic: "Advanced"
+  }
+];
+function generateHeapSteps() {
+  const steps = [];
+  const heap = [];
+  steps.push({
+    operation: "init",
+    array: [],
+    heapSize: 0,
+    description: "Initialize empty Max-Heap. Parent ≥ children."
+  });
+  for (const { op, value } of OPERATIONS$8) {
+    if (op === "insert" && value !== void 0) {
+      heap.push(value);
+      let idx = heap.length - 1;
+      steps.push({
+        operation: "insert",
+        array: [...heap],
+        heapSize: heap.length,
+        highlightIndex: idx,
+        description: `insert(${value}): Add at index ${idx}`
+      });
+      while (idx > 0) {
+        const parentIdx = Math.floor((idx - 1) / 2);
+        steps.push({
+          operation: "siftUp",
+          array: [...heap],
+          heapSize: heap.length,
+          compareIndices: [idx, parentIdx],
+          description: `Compare ${heap[idx]} with parent ${heap[parentIdx]}`
+        });
+        if (heap[idx] > heap[parentIdx]) {
+          [heap[idx], heap[parentIdx]] = [heap[parentIdx], heap[idx]];
+          steps.push({
+            operation: "siftUp",
+            array: [...heap],
+            heapSize: heap.length,
+            swapIndices: [idx, parentIdx],
+            description: `${heap[parentIdx]} > ${heap[idx]}, swap!`
+          });
+          idx = parentIdx;
+        } else {
+          break;
+        }
+      }
+    } else if (op === "extractMax") {
+      if (heap.length === 0) continue;
+      const max = heap[0];
+      const last = heap.pop();
+      if (heap.length === 0) {
+        steps.push({
+          operation: "extractMax",
+          array: [],
+          heapSize: 0,
+          description: `extractMax() = ${max}, heap is now empty`
+        });
+        continue;
+      }
+      heap[0] = last;
+      steps.push({
+        operation: "extractMax",
+        array: [...heap],
+        heapSize: heap.length,
+        highlightIndex: 0,
+        description: `extractMax() = ${max}, move ${last} to root`
+      });
+      let idx = 0;
+      while (true) {
+        const left = 2 * idx + 1;
+        const right = 2 * idx + 2;
+        let largest = idx;
+        if (left < heap.length && heap[left] > heap[largest]) {
+          largest = left;
+        }
+        if (right < heap.length && heap[right] > heap[largest]) {
+          largest = right;
+        }
+        if (largest === idx) break;
+        steps.push({
+          operation: "siftDown",
+          array: [...heap],
+          heapSize: heap.length,
+          compareIndices: [idx, largest],
+          description: `Compare ${heap[idx]} with larger child ${heap[largest]}`
+        });
+        [heap[idx], heap[largest]] = [heap[largest], heap[idx]];
+        steps.push({
+          operation: "siftDown",
+          array: [...heap],
+          heapSize: heap.length,
+          swapIndices: [idx, largest],
+          description: `Swap! ${heap[idx]} moved up`
+        });
+        idx = largest;
+      }
+    }
+  }
+  steps.push({
+    operation: "done",
+    array: [...heap],
+    heapSize: heap.length,
+    description: `Done! Heap has ${heap.length} elements. Max = ${heap[0] || "none"}`
+  });
+  return steps;
+}
+function getTreePositions(size) {
+  const positions = [];
+  const width = 280;
+  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 * 50 + 25
+    });
+  }
+  return positions;
+}
+const HeapInterviewVisualizerComponent = ({
+  showControls = true,
+  className = ""
+}) => {
+  const { copyUrlToClipboard } = useUrlState({ prefix: "heap-int", scrollToId: VISUALIZER_ID });
+  const [mode, setMode] = useState("visualize");
+  const generateSteps = useMemo(() => generateHeapSteps, []);
+  const playback = useVisualizerPlayback({ generateSteps });
+  const interview = useInterviewMode({
+    questions: HEAP_QUESTIONS,
+    shuffleQuestions: true
+  });
+  const stepData = playback.currentStepData || {
+    operation: "init",
+    array: [],
+    description: ""
+  };
+  const { array, highlightIndex, compareIndices, swapIndices, description } = stepData;
+  const positions = getTreePositions(array.length);
+  const getNodeStyle = (idx) => {
+    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) return "fill-orange-500 stroke-orange-600";
+    return "fill-white stroke-gray-300";
+  };
+  const getTextColor = (idx) => {
+    if ((swapIndices == null ? void 0 : swapIndices.includes(idx)) || idx === 0) return "white";
+    return "#374151";
+  };
+  const handleShare = useCallback(async () => {
+    return copyUrlToClipboard({ step: playback.currentStep });
+  }, [copyUrlToClipboard, playback.currentStep]);
+  const visualization = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-orange-50 rounded-lg border border-orange-200", children: /* @__PURE__ */ jsxs("div", { className: "text-sm text-orange-800 text-center", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Max-Heap Property:" }),
+      " parent ≥ children"
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-4 bg-gray-50 rounded-lg p-2 min-h-[160px] flex items-center justify-center", children: array.length > 0 ? /* @__PURE__ */ jsxs("svg", { width: "280", height: Math.max(Math.floor(Math.log2(array.length)) * 50 + 60, 80), 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 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: isActive ? "#f59e0b" : "#d1d5db",
+            strokeWidth: isActive ? 2 : 1
+          },
+          `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: "16", className: `${getNodeStyle(idx)} stroke-2` }),
+          /* @__PURE__ */ jsx("text", { textAnchor: "middle", dy: "5", className: "text-xs font-bold", fill: getTextColor(idx), children: val })
+        ] }, idx);
+      })
+    ] }) : /* @__PURE__ */ jsx("span", { className: "text-gray-400 text-sm", children: "Empty heap" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg min-h-[60px]", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-600 mb-1", children: "Array: " }),
+      array.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex gap-1 flex-wrap", children: array.map((val, idx) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `w-8 h-8 flex items-center justify-center rounded text-xs font-mono ${(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 === 0 ? "bg-orange-500 text-white" : "bg-white border border-gray-300"}`,
+          children: val
+        },
+        idx
+      )) }) : /* @__PURE__ */ jsx("span", { className: "text-gray-400 text-xs italic", children: "Elements will appear here..." })
+    ] })
+  ] });
+  const modeToggle = /* @__PURE__ */ jsxs("div", { className: "flex gap-1 bg-gray-200 rounded-lg p-0.5", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setMode("visualize"),
+        className: `px-3 py-1 rounded-md text-xs font-medium transition-colors ${mode === "visualize" ? "bg-white text-orange-600 shadow-sm" : "text-gray-600 hover:text-gray-800"}`,
+        children: "Visualize"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setMode("interview"),
+        className: `px-3 py-1 rounded-md text-xs font-medium transition-colors ${mode === "interview" ? "bg-white text-orange-600 shadow-sm" : "text-gray-600 hover:text-gray-800"}`,
+        children: "Interview"
+      }
+    )
+  ] });
+  const sidePanel = mode === "interview" ? /* @__PURE__ */ jsx(
+    InterviewModePanel,
+    {
+      currentQuestion: interview.currentQuestion,
+      currentQuestionIndex: interview.session.currentQuestionIndex,
+      totalQuestions: interview.session.questions.length,
+      selectedAnswer: interview.selectedAnswer,
+      showExplanation: interview.showExplanation,
+      showHint: interview.showHint,
+      isAnswered: interview.isAnswered,
+      isComplete: interview.isComplete,
+      score: interview.score,
+      onSelectAnswer: interview.selectAnswer,
+      onNextQuestion: interview.nextQuestion,
+      onPreviousQuestion: interview.previousQuestion,
+      onUseHint: interview.useHint,
+      onRestart: interview.restartSession,
+      accentColor: "orange"
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx(
+    BaseVisualizerLayout,
+    {
+      id: VISUALIZER_ID,
+      title: "Heap (Interview Mode)",
+      badges: BADGES$e,
+      gradient: "orange",
+      className,
+      minHeight: 450,
+      onShare: handleShare,
+      headerExtra: modeToggle,
+      status: {
+        description,
+        currentStep: playback.currentStep,
+        totalSteps: playback.steps.length,
+        variant: stepData.operation === "done" ? "success" : swapIndices ? "warning" : "default"
+      },
+      controls: {
+        isPlaying: playback.isPlaying,
+        currentStep: playback.currentStep,
+        totalSteps: playback.steps.length,
+        speed: playback.speed,
+        onPlayPause: playback.handlePlayPause,
+        onStep: playback.handleStep,
+        onStepBack: playback.handleStepBack,
+        onReset: playback.handleReset,
+        onSpeedChange: playback.setSpeed,
+        accentColor: "orange"
+      },
+      showControls,
+      legendItems: LEGEND_ITEMS$e,
+      sidePanel,
+      children: visualization
+    }
+  );
+};
+const HeapInterviewVisualizer = React.memo(HeapInterviewVisualizerComponent);
 const SEGMENT_COUNT = 4;
 const OPERATIONS$7 = [
   { thread: "T1", op: "put", key: "Alice", value: 100 },
@@ -22821,6 +23218,7 @@ export {
   HashMapInterviewVisualizer,
   HashMapVisualizer,
   HashTableVisualizer,
+  HeapInterviewVisualizer,
   HeapVisualizer,
   HelpPanel,
   ImmutableCollectionsVisualizer,