@tomaszjarosz/react-visualizers 0.2.14 → 0.3.0

package/dist/index.js

@@ -501,17 +501,20 @@ const ControlPanel = ({
   extraControls
 }) => {
   const colors = ACCENT_COLORS$4[accentColor];
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between flex-wrap gap-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  const speedLabelId = React.useId();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between flex-wrap gap-3", role: "toolbar", "aria-label": "Playback controls", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", role: "group", "aria-label": "Navigation", children: [
       isPlaying && /* @__PURE__ */ jsxs(
         "span",
         {
           className: `flex items-center gap-1 text-xs ${colors.playing} font-medium`,
+          "aria-live": "polite",
           children: [
             /* @__PURE__ */ jsx(
               "span",
               {
-                className: `w-2 h-2 ${colors.playingDot} rounded-full animate-pulse`
+                className: `w-2 h-2 ${colors.playingDot} rounded-full animate-pulse`,
+                "aria-hidden": "true"
               }
             ),
             "Playing"
@@ -524,7 +527,9 @@ const ControlPanel = ({
           onClick: onPlayPause,
           className: `p-2 text-white rounded-lg transition-colors ${isPlaying ? colors.buttonActive : colors.button}`,
           title: "Play/Pause (P)",
-          children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Play, { className: "w-4 h-4" })
+          "aria-label": isPlaying ? "Pause" : "Play",
+          "aria-pressed": isPlaying,
+          children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "w-4 h-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Play, { className: "w-4 h-4", "aria-hidden": "true" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -534,7 +539,8 @@ const ControlPanel = ({
           disabled: isPlaying || currentStep <= 0,
           className: "p-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors disabled:opacity-50",
           title: "Step Back ([)",
-          children: /* @__PURE__ */ jsx(SkipBack, { className: "w-4 h-4" })
+          "aria-label": "Step back",
+          children: /* @__PURE__ */ jsx(SkipBack, { className: "w-4 h-4", "aria-hidden": "true" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -544,7 +550,8 @@ const ControlPanel = ({
           disabled: isPlaying || currentStep >= totalSteps - 1,
           className: "p-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors disabled:opacity-50",
           title: "Step Forward (])",
-          children: /* @__PURE__ */ jsx(SkipForward, { className: "w-4 h-4" })
+          "aria-label": "Step forward",
+          children: /* @__PURE__ */ jsx(SkipForward, { className: "w-4 h-4", "aria-hidden": "true" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -553,7 +560,8 @@ const ControlPanel = ({
           onClick: onReset,
           className: "p-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors",
           title: "Reset (R)",
-          children: /* @__PURE__ */ jsx(RotateCcw, { className: "w-4 h-4" })
+          "aria-label": "Reset",
+          children: /* @__PURE__ */ jsx(RotateCcw, { className: "w-4 h-4", "aria-hidden": "true" })
         }
       ),
       showShuffle && onShuffle && /* @__PURE__ */ jsx(
@@ -563,13 +571,14 @@ const ControlPanel = ({
           disabled: isPlaying,
           className: `bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors disabled:opacity-50 ${shuffleLabel ? "px-3 py-2 text-sm" : "p-2"}`,
           title: shuffleLabel || "Shuffle",
-          children: shuffleLabel || /* @__PURE__ */ jsx(Shuffle, { className: "w-4 h-4" })
+          "aria-label": shuffleLabel || "Shuffle",
+          children: shuffleLabel || /* @__PURE__ */ jsx(Shuffle, { className: "w-4 h-4", "aria-hidden": "true" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", role: "group", "aria-label": "Speed control", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-xs text-gray-500", children: "Speed" }),
+        /* @__PURE__ */ jsx("label", { id: speedLabelId, className: "text-xs text-gray-500", children: "Speed" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -578,7 +587,11 @@ const ControlPanel = ({
             max: "100",
             value: speed,
             onChange: (e) => onSpeedChange(Number(e.target.value)),
-            className: "w-24 h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer"
+            className: "w-24 h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer",
+            "aria-labelledby": speedLabelId,
+            "aria-valuemin": 1,
+            "aria-valuemax": 100,
+            "aria-valuenow": speed
           }
         )
       ] }),
@@ -1446,11 +1459,11 @@ const InterviewModePanel = ({
 }) => {
   const colors = ACCENT_COLORS[accentColor];
   if (isComplete) {
-    return /* @__PURE__ */ jsx("div", { className: "p-6 bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx(Trophy, { className: "w-16 h-16 mx-auto mb-4 text-yellow-500" }),
+    return /* @__PURE__ */ jsx("div", { className: "p-6 bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-200", role: "region", "aria-label": "Quiz results", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Trophy, { className: "w-16 h-16 mx-auto mb-4 text-yellow-500", "aria-hidden": "true" }),
       /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Interview Complete!" }),
-      /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-5xl font-bold text-gray-900 mb-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-6", "aria-live": "polite", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-5xl font-bold text-gray-900 mb-1", "aria-label": `Score: ${score.percentage} percent`, children: [
           score.percentage,
           "%"
         ] }),
@@ -1466,7 +1479,7 @@ const InterviewModePanel = ({
             ${score.percentage >= 80 ? "bg-green-100 text-green-700" : ""}
             ${score.percentage >= 60 && score.percentage < 80 ? "bg-yellow-100 text-yellow-700" : ""}
             ${score.percentage < 60 ? "bg-red-100 text-red-700" : ""}
-          `, children: [
+          `, role: "status", children: [
         score.percentage >= 80 && "🎉 Excellent! Ready for interviews!",
         score.percentage >= 60 && score.percentage < 80 && "👍 Good job! Keep practicing!",
         score.percentage < 60 && "📚 Review the concepts and try again!"
@@ -1475,13 +1488,14 @@ const InterviewModePanel = ({
         "button",
         {
           onClick: onRestart,
+          "aria-label": "Restart quiz",
           className: `
               flex items-center gap-2 mx-auto px-6 py-3 rounded-lg
               text-white font-medium transition-colors
               ${colors.button}
             `,
           children: [
-            /* @__PURE__ */ jsx(RotateCcw, { className: "w-5 h-5" }),
+            /* @__PURE__ */ jsx(RotateCcw, { className: "w-5 h-5", "aria-hidden": "true" }),
             "Try Again"
           ]
         }
@@ -1521,7 +1535,7 @@ const InterviewModePanel = ({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsx("h4", { className: "text-lg font-semibold text-gray-900 mb-4", children: currentQuestion.question }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-4", children: currentQuestion.options.map((option, index) => {
+      /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-4", role: "radiogroup", "aria-label": "Answer options", children: currentQuestion.options.map((option, index) => {
         const isSelected = selectedAnswer === index;
         const isCorrect = index === currentQuestion.correctAnswer;
         const showResult = showExplanation;
@@ -1540,6 +1554,9 @@ const InterviewModePanel = ({
           {
             onClick: () => !isAnswered && onSelectAnswer(index),
             disabled: isAnswered,
+            role: "radio",
+            "aria-checked": isSelected,
+            "aria-disabled": isAnswered,
             className: `
                   w-full p-3 rounded-lg border-2 text-left transition-all
                   flex items-center gap-3
@@ -1547,24 +1564,31 @@ const InterviewModePanel = ({
                   ${isAnswered ? "cursor-default" : "cursor-pointer"}
                 `,
             children: [
-              /* @__PURE__ */ jsxs("span", { className: `
-                  w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold
-                  ${showResult && isCorrect ? "bg-green-500 text-white" : ""}
-                  ${showResult && isSelected && !isCorrect ? "bg-red-500 text-white" : ""}
-                  ${!showResult ? "bg-gray-200 text-gray-600" : ""}
-                `, children: [
-                showResult && isCorrect && /* @__PURE__ */ jsx(CircleCheckBig, { className: "w-4 h-4" }),
-                showResult && isSelected && !isCorrect && /* @__PURE__ */ jsx(CircleX, { className: "w-4 h-4" }),
-                !showResult && String.fromCharCode(65 + index)
-              ] }),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: `
+                    w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold
+                    ${showResult && isCorrect ? "bg-green-500 text-white" : ""}
+                    ${showResult && isSelected && !isCorrect ? "bg-red-500 text-white" : ""}
+                    ${!showResult ? "bg-gray-200 text-gray-600" : ""}
+                  `,
+                  "aria-hidden": "true",
+                  children: [
+                    showResult && isCorrect && /* @__PURE__ */ jsx(CircleCheckBig, { className: "w-4 h-4" }),
+                    showResult && isSelected && !isCorrect && /* @__PURE__ */ jsx(CircleX, { className: "w-4 h-4" }),
+                    !showResult && String.fromCharCode(65 + index)
+                  ]
+                }
+              ),
               /* @__PURE__ */ jsx("span", { className: `flex-1 ${showResult && isCorrect ? "font-medium text-green-700" : ""}`, children: option })
             ]
           },
           index
         );
       }) }),
-      currentQuestion.hint && !showExplanation && /* @__PURE__ */ jsx("div", { className: "mb-4", children: showHint ? /* @__PURE__ */ jsx("div", { className: "p-3 bg-yellow-50 rounded-lg border border-yellow-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-        /* @__PURE__ */ jsx(Lightbulb, { className: "w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" }),
+      currentQuestion.hint && !showExplanation && /* @__PURE__ */ jsx("div", { className: "mb-4", children: showHint ? /* @__PURE__ */ jsx("div", { className: "p-3 bg-yellow-50 rounded-lg border border-yellow-200", role: "note", "aria-label": "Hint", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(Lightbulb, { className: "w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-yellow-800 mb-1", children: "Hint" }),
           /* @__PURE__ */ jsx("div", { className: "text-sm text-yellow-700", children: currentQuestion.hint })
@@ -1574,8 +1598,9 @@ const InterviewModePanel = ({
         {
           onClick: onUseHint,
           className: "flex items-center gap-2 text-sm text-yellow-600 hover:text-yellow-700",
+          "aria-label": "Show hint for this question",
           children: [
-            /* @__PURE__ */ jsx(Lightbulb, { className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx(Lightbulb, { className: "w-4 h-4", "aria-hidden": "true" }),
             "Show hint"
           ]
         }
@@ -1591,19 +1616,20 @@ const InterviewModePanel = ({
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 bg-gray-50 border-t border-gray-200 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs("nav", { className: "px-4 py-3 bg-gray-50 border-t border-gray-200 flex items-center justify-between", "aria-label": "Question navigation", children: [
       /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: onPreviousQuestion,
           disabled: currentQuestionIndex === 0,
+          "aria-label": "Previous question",
           className: `
             flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium
             transition-colors
             ${currentQuestionIndex === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-200"}
           `,
           children: [
-            /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4", "aria-hidden": "true" }),
             "Previous"
           ]
         }
@@ -1613,6 +1639,7 @@ const InterviewModePanel = ({
         {
           onClick: onNextQuestion,
           disabled: currentQuestionIndex === totalQuestions - 1,
+          "aria-label": currentQuestionIndex === totalQuestions - 1 ? "Finish quiz" : "Next question",
           className: `
             flex items-center gap-1 px-4 py-2 rounded-lg text-sm font-medium
             transition-colors text-white
@@ -1620,7 +1647,7 @@ const InterviewModePanel = ({
           `,
           children: [
             currentQuestionIndex === totalQuestions - 1 ? "Finish" : "Next",
-            /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+            /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4", "aria-hidden": "true" })
           ]
         }
       )
@@ -1729,7 +1756,7 @@ const BINARY_SEARCH_CODE = [
   "      right = mid - 1",
   "  return -1  // Not found"
 ];
-const LEGEND_ITEMS$y = [
+const LEGEND_ITEMS$A = [
   { color: "bg-blue-100", label: "Search Space" },
   { color: "bg-gray-200", label: "Eliminated" },
   { color: "bg-purple-500", label: "Mid" },
@@ -2129,7 +2156,7 @@ const BinarySearchVisualizerComponent = ({
               accentColor: "green"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$y })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$A })
         ] })
       ]
     }
@@ -2194,7 +2221,7 @@ const ALGORITHM_CODE = {
     "    else arr[k++] = right[j++]"
   ]
 };
-const LEGEND_ITEMS$x = [
+const LEGEND_ITEMS$z = [
   { color: "bg-blue-500", label: "Default" },
   { color: "bg-yellow-400", label: "Comparing" },
   { color: "bg-red-500", label: "Swapping" },
@@ -3056,7 +3083,7 @@ const SortingVisualizerComponent = ({
               extraControls: sizeControl
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$x })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$z })
         ] })
       ]
     }
@@ -3602,7 +3629,7 @@ const DIJKSTRA_CODE = [
   "        dist[v] = dist[u]+w",
   "        pq.add((dist[v], v))"
 ];
-const LEGEND_ITEMS$w = [
+const LEGEND_ITEMS$y = [
   { color: "bg-blue-100", label: "Unvisited", border: "#60a5fa" },
   { color: "bg-yellow-400", label: "Current", border: "#ca8a04" },
   { color: "bg-green-400", label: "Visited", border: "#16a34a" }
@@ -3963,7 +3990,7 @@ const DijkstraVisualizerComponent = ({
               accentColor: "orange"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$w })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$y })
         ] })
       ]
     }
@@ -3987,7 +4014,7 @@ const KNAPSACK_CODE = [
   "      take = dp[i-1][w-weight] + value",
   "      dp[i][w] = max(skip, take)"
 ];
-const LEGEND_ITEMS$v = [
+const LEGEND_ITEMS$x = [
   { color: "bg-gray-50", label: "Not computed", border: "#d1d5db" },
   { color: "bg-blue-100", label: "Computed" },
   { color: "bg-green-400", label: "Take item" },
@@ -4283,7 +4310,7 @@ const DPVisualizerComponent = ({
               accentColor: "teal"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$v })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$x })
         ] })
       ]
     }
@@ -4322,7 +4349,7 @@ const BFS_CODE = [
   "        visited[neighbor] = true",
   "        queue.enqueue(neighbor)"
 ];
-const LEGEND_ITEMS$u = [
+const LEGEND_ITEMS$w = [
   { color: "bg-blue-100", label: "Unvisited", border: "#60a5fa" },
   { color: "bg-yellow-400", label: "Current", border: "#ca8a04" },
   { color: "bg-green-400", label: "Visited", border: "#16a34a" }
@@ -4749,7 +4776,7 @@ const GraphVisualizerComponent = ({
               accentColor: "purple"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$u })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$w })
         ] })
       ]
     }
@@ -4757,7 +4784,7 @@ const GraphVisualizerComponent = ({
 };
 const GraphVisualizer = React.memo(GraphVisualizerComponent);
 const BUCKET_COUNT$2 = 8;
-const OPERATIONS$h = [
+const OPERATIONS$j = [
   { op: "put", key: "Alice", value: 25 },
   { op: "put", key: "Bob", value: 30 },
   { op: "put", key: "Charlie", value: 35 },
@@ -4789,7 +4816,7 @@ const HASHMAP_CODE = [
   "      return entry.value",
   "  return null"
 ];
-const LEGEND_ITEMS$t = [
+const LEGEND_ITEMS$v = [
   { color: "bg-blue-50", label: "Current bucket", border: "#60a5fa" },
   { color: "bg-blue-500", label: "Insert/Update" },
   { color: "bg-green-400", label: "Found" },
@@ -4814,7 +4841,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$h) {
+  for (const { op, key, value } of OPERATIONS$j) {
     const hash = simpleHash$7(key);
     const index = hash % BUCKET_COUNT$2;
     if (op === "put") {
@@ -5101,7 +5128,7 @@ const HashMapVisualizerComponent = ({
               accentColor: "indigo"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$t })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$v })
         ] })
       ]
     }
@@ -5109,7 +5136,7 @@ const HashMapVisualizerComponent = ({
 };
 const HashMapVisualizer = React.memo(HashMapVisualizerComponent);
 const BUCKET_COUNT$1 = 8;
-const OPERATIONS$g = [
+const OPERATIONS$i = [
   { op: "put", key: "Alice", value: 25 },
   { op: "put", key: "Bob", value: 30 },
   { op: "put", key: "Charlie", value: 35 },
@@ -5118,7 +5145,7 @@ const OPERATIONS$g = [
   { op: "put", key: "Alice", value: 26 },
   { op: "get", key: "Frank" }
 ];
-const LEGEND_ITEMS$s = [
+const LEGEND_ITEMS$u = [
   { color: "bg-blue-50", label: "Current bucket", border: "#60a5fa" },
   { color: "bg-blue-500", label: "Insert/Update" },
   { color: "bg-green-400", label: "Found" },
@@ -5247,7 +5274,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$g) {
+  for (const { op, key, value } of OPERATIONS$i) {
     const hash = simpleHash$6(key);
     const index = hash % BUCKET_COUNT$1;
     if (op === "put") {
@@ -5488,7 +5515,7 @@ const HashMapInterviewVisualizerComponent = ({
               accentColor: "indigo"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$s })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$u })
         ] })
       ]
     }
@@ -5496,7 +5523,7 @@ const HashMapInterviewVisualizerComponent = ({
 };
 const HashMapInterviewVisualizer = React.memo(HashMapInterviewVisualizerComponent);
 const INITIAL_DATA = [10, 20, 30, 40, 50];
-const OPERATIONS$f = [
+const OPERATIONS$h = [
   { op: "get", index: 2 },
   { op: "addLast", value: 60 },
   { op: "addFirst", value: 5 },
@@ -5505,7 +5532,7 @@ const OPERATIONS$f = [
   { op: "removeLast" },
   { op: "removeMiddle", index: 2 }
 ];
-const LEGEND_ITEMS$r = [
+const LEGEND_ITEMS$t = [
   { color: "bg-blue-500", label: "ArrayList" },
   { color: "bg-green-500", label: "LinkedList" },
   { color: "bg-yellow-400", label: "Current element" },
@@ -5531,7 +5558,7 @@ function generateListComparisonSteps() {
     description: `Initialize both lists with [${INITIAL_DATA.join(", ")}]`,
     phase: "complete"
   });
-  for (const { op, index, value } of OPERATIONS$f) {
+  for (const { op, index, value } of OPERATIONS$h) {
     switch (op) {
       case "get": {
         const idx = index;
@@ -6033,14 +6060,14 @@ const ListComparisonVisualizerComponent = ({
               accentColor: "blue"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$r })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$t })
         ] })
       ]
     }
   );
 };
 const ListComparisonVisualizer = React.memo(ListComparisonVisualizerComponent);
-const OPERATIONS$e = [
+const OPERATIONS$g = [
   { op: "add", value: 50 },
   { op: "add", value: 30 },
   { op: "add", value: 70 },
@@ -6051,7 +6078,7 @@ const OPERATIONS$e = [
   { op: "contains", value: 40 },
   { op: "contains", value: 55 }
 ];
-const LEGEND_ITEMS$q = [
+const LEGEND_ITEMS$s = [
   { color: "bg-yellow-100", label: "Path", border: "#facc15" },
   { color: "bg-green-500", label: "Current/Found" },
   { color: "bg-red-500", label: "Not found" }
@@ -6215,7 +6242,7 @@ function generateTreeSetSteps$1() {
     path: [],
     description: "Initialize empty TreeSet (Binary Search Tree)"
   });
-  for (const { op, value } of OPERATIONS$e) {
+  for (const { op, value } of OPERATIONS$g) {
     if (op === "add") {
       const path = tree ? findPath$1(tree, value) : [];
       if (tree) {
@@ -6514,7 +6541,7 @@ const TreeSetInterviewVisualizerComponent = ({
               accentColor: "green"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$q })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$s })
         ] })
       ]
     }
@@ -6522,7 +6549,7 @@ const TreeSetInterviewVisualizerComponent = ({
 };
 const TreeSetInterviewVisualizer = React.memo(TreeSetInterviewVisualizerComponent);
 const INITIAL_ARRAY = [64, 34, 25, 12, 22, 11, 90];
-const LEGEND_ITEMS$p = [
+const LEGEND_ITEMS$r = [
   { color: "bg-yellow-400", label: "Comparing" },
   { color: "bg-red-400", label: "Swapping" },
   { color: "bg-green-400", label: "Sorted" },
@@ -6845,7 +6872,7 @@ const SortingInterviewVisualizerComponent = ({
               accentColor: "orange"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$p })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$r })
         ] })
       ]
     }
@@ -6870,7 +6897,7 @@ const EDGES$1 = [
   { from: "C", to: "G" },
   { from: "E", to: "F" }
 ];
-const LEGEND_ITEMS$o = [
+const LEGEND_ITEMS$q = [
   { color: "bg-blue-500", label: "Current" },
   { color: "bg-green-400", label: "Visited" },
   { color: "bg-yellow-100", label: "In Queue/Stack", border: "#facc15" }
@@ -7292,7 +7319,7 @@ const GraphInterviewVisualizerComponent = ({
               accentColor: "blue"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$o })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$q })
         ] })
       ]
     }
@@ -7301,7 +7328,7 @@ const GraphInterviewVisualizerComponent = ({
 const GraphInterviewVisualizer = React.memo(GraphInterviewVisualizerComponent);
 const BIT_ARRAY_SIZE$1 = 16;
 const K_HASH_FUNCTIONS = 3;
-const OPERATIONS$d = [
+const OPERATIONS$f = [
   { op: "add", element: "apple" },
   { op: "add", element: "banana" },
   { op: "add", element: "cherry" },
@@ -7309,7 +7336,7 @@ const OPERATIONS$d = [
   { op: "query", element: "grape" },
   { op: "query", element: "banana" }
 ];
-const LEGEND_ITEMS$n = [
+const LEGEND_ITEMS$p = [
   { color: "bg-gray-200", label: "Bit = 0" },
   { color: "bg-purple-500", label: "Bit = 1" },
   { color: "bg-pink-400", label: "Current hash position" }
@@ -7467,7 +7494,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$d) {
+  for (const { op, element } of OPERATIONS$f) {
     const positions = getHashPositions(element);
     if (op === "add") {
       steps.push({
@@ -7657,7 +7684,7 @@ const BloomFilterInterviewVisualizerComponent = ({
               accentColor: "purple"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$n })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$p })
         ] })
       ]
     }
@@ -7665,7 +7692,7 @@ const BloomFilterInterviewVisualizerComponent = ({
 };
 const BloomFilterInterviewVisualizer = React.memo(BloomFilterInterviewVisualizerComponent);
 const ORDER$1 = 3;
-const OPERATIONS$c = [
+const OPERATIONS$e = [
   { op: "insert", value: 10 },
   { op: "insert", value: 20 },
   { op: "insert", value: 5 },
@@ -7674,7 +7701,7 @@ const OPERATIONS$c = [
   { op: "search", value: 15 },
   { op: "search", value: 12 }
 ];
-const LEGEND_ITEMS$m = [
+const LEGEND_ITEMS$o = [
   { color: "bg-green-400", label: "Current node" },
   { color: "bg-yellow-100", label: "Search path", border: "#facc15" },
   { color: "bg-blue-400", label: "Found/Inserted" }
@@ -7866,7 +7893,7 @@ function generateBTreeSteps$1() {
     }
     return { node };
   }
-  for (const { op, value } of OPERATIONS$c) {
+  for (const { op, value } of OPERATIONS$e) {
     if (op === "insert") {
       steps.push({
         operation: "insert",
@@ -8101,14 +8128,14 @@ const BTreeInterviewVisualizerComponent = ({
               accentColor: "green"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$m })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$o })
         ] })
       ]
     }
   );
 };
 const BTreeInterviewVisualizer = React.memo(BTreeInterviewVisualizerComponent);
-const LEGEND_ITEMS$l = [
+const LEGEND_ITEMS$n = [
   { color: "bg-blue-100", label: "Unvisited", border: "#60a5fa" },
   { color: "bg-yellow-400", label: "Current" },
   { color: "bg-green-400", label: "Visited" }
@@ -8502,14 +8529,14 @@ const DijkstraInterviewVisualizerComponent = ({
               accentColor: "orange"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$l })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$n })
         ] })
       ]
     }
   );
 };
 const DijkstraInterviewVisualizer = React.memo(DijkstraInterviewVisualizerComponent);
-const LEGEND_ITEMS$k = [
+const LEGEND_ITEMS$m = [
   { color: "bg-gray-50", label: "Not computed", border: "#d1d5db" },
   { color: "bg-blue-100", label: "Computed" },
   { color: "bg-green-400", label: "Take item" },
@@ -8896,14 +8923,14 @@ const DPInterviewVisualizerComponent = ({
               accentColor: "cyan"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$k })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$m })
         ] })
       ]
     }
   );
 };
 const DPInterviewVisualizer = React.memo(DPInterviewVisualizerComponent);
-const LEGEND_ITEMS$j = [
+const LEGEND_ITEMS$l = [
   { color: "bg-blue-500", label: "Server A" },
   { color: "bg-green-500", label: "Server B" },
   { color: "bg-purple-500", label: "Server C" },
@@ -9346,14 +9373,14 @@ const ConsistentHashingInterviewVisualizerComponent = ({
               accentColor: "cyan"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$j })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$l })
         ] })
       ]
     }
   );
 };
 const ConsistentHashingInterviewVisualizer = React.memo(ConsistentHashingInterviewVisualizerComponent);
-const LEGEND_ITEMS$i = [
+const LEGEND_ITEMS$k = [
   { color: "bg-gray-400", label: "Follower" },
   { color: "bg-yellow-500", label: "Candidate" },
   { color: "bg-green-500", label: "Leader" },
@@ -9510,7 +9537,7 @@ const STATE_COLORS$1 = {
   candidate: "bg-yellow-500",
   leader: "bg-green-500"
 };
-function cloneNodes$2(nodes) {
+function cloneNodes$3(nodes) {
   return nodes.map((n) => ({
     ...n,
     log: n.log.map((e) => ({ ...e }))
@@ -9528,7 +9555,7 @@ function generateRaftSteps$1() {
   }));
   steps.push({
     operation: "init",
-    nodes: cloneNodes$2(nodes),
+    nodes: cloneNodes$3(nodes),
     description: `Initialize ${NODE_IDS$1.length} nodes as followers (term 0)`
   });
   const candidateId = "N1";
@@ -9538,7 +9565,7 @@ function generateRaftSteps$1() {
   candidateNode.votedFor = candidateId;
   steps.push({
     operation: "timeout",
-    nodes: cloneNodes$2(nodes),
+    nodes: cloneNodes$3(nodes),
     description: `${candidateId} timeout! Becomes candidate, term=1`,
     highlightNode: candidateId
   });
@@ -9550,7 +9577,7 @@ function generateRaftSteps$1() {
       votes++;
       steps.push({
         operation: "vote",
-        nodes: cloneNodes$2(nodes),
+        nodes: cloneNodes$3(nodes),
         description: `${node.id} votes for ${candidateId} (${votes}/${NODE_IDS$1.length})`,
         highlightNode: node.id,
         highlightEdge: { from: node.id, to: candidateId, type: "vote" }
@@ -9559,7 +9586,7 @@ function generateRaftSteps$1() {
         candidateNode.state = "leader";
         steps.push({
           operation: "becomeLeader",
-          nodes: cloneNodes$2(nodes),
+          nodes: cloneNodes$3(nodes),
           description: `${candidateId} wins election! (${votes} votes)`,
           highlightNode: candidateId
         });
@@ -9569,7 +9596,7 @@ function generateRaftSteps$1() {
   }
   steps.push({
     operation: "heartbeat",
-    nodes: cloneNodes$2(nodes),
+    nodes: cloneNodes$3(nodes),
     description: `Leader ${candidateId} sends heartbeats`,
     highlightNode: candidateId,
     messageType: "Heartbeat"
@@ -9579,7 +9606,7 @@ function generateRaftSteps$1() {
   leader.log.push({ term: 1, command, committed: false });
   steps.push({
     operation: "replicate",
-    nodes: cloneNodes$2(nodes),
+    nodes: cloneNodes$3(nodes),
     description: `Client request: "${command}"`,
     highlightNode: leader.id
   });
@@ -9599,7 +9626,7 @@ function generateRaftSteps$1() {
         }
         steps.push({
           operation: "commit",
-          nodes: cloneNodes$2(nodes),
+          nodes: cloneNodes$3(nodes),
           description: `Entry committed! (${acks} acks)`,
           highlightNode: leader.id
         });
@@ -9609,7 +9636,7 @@ function generateRaftSteps$1() {
   }
   steps.push({
     operation: "done",
-    nodes: cloneNodes$2(nodes),
+    nodes: cloneNodes$3(nodes),
     description: `✓ Consensus achieved! Leader: ${leader.id}`
   });
   return steps;
@@ -9813,14 +9840,14 @@ const RaftInterviewVisualizerComponent = ({
               accentColor: "orange"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$i })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$k })
         ] })
       ]
     }
   );
 };
 const RaftInterviewVisualizer = React.memo(RaftInterviewVisualizerComponent);
-const INITIAL_SIZE = 7;
+const INITIAL_SIZE$1 = 7;
 const LOAD_FACTOR_THRESHOLD = 0.7;
 const SAMPLE_KEYS = [
   "apple",
@@ -9841,7 +9868,7 @@ const HASH_TABLE_CODE = [
   "  if loadFactor > threshold:",
   "    rehash(newSize = size * 2)"
 ];
-const LEGEND_ITEMS$h = [
+const LEGEND_ITEMS$j = [
   { color: "bg-gray-50", label: "Empty", border: "#d1d5db" },
   { color: "bg-yellow-50", label: "Hashing", border: "#facc15" },
   { color: "bg-red-50", label: "Collision", border: "#f87171" },
@@ -9856,7 +9883,7 @@ function simpleHash$3(key, size) {
 }
 function generateHashSteps(keys) {
   const steps = [];
-  let buckets = Array(INITIAL_SIZE).fill(null).map(() => []);
+  let buckets = Array(INITIAL_SIZE$1).fill(null).map(() => []);
   let itemCount = 0;
   steps.push({
     operation: "done",
@@ -9864,7 +9891,7 @@ function generateHashSteps(keys) {
     hashValue: 0,
     bucketIndex: -1,
     buckets: buckets.map((b) => [...b]),
-    description: `Initialize hash table with ${INITIAL_SIZE} buckets (chaining)`,
+    description: `Initialize hash table with ${INITIAL_SIZE$1} buckets (chaining)`,
     codeLine: -1
   });
   for (const key of keys) {
@@ -10198,14 +10225,14 @@ const HashTableVisualizerComponent = ({
               ] })
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$h })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$j })
         ] })
       ]
     }
   );
 };
 const HashTableVisualizer = React.memo(HashTableVisualizerComponent);
-const OPERATIONS$b = [
+const OPERATIONS$d = [
   { op: "addFirst", value: 10 },
   { op: "addLast", value: 20 },
   { op: "addLast", value: 30 },
@@ -10237,25 +10264,25 @@ const LINKEDLIST_CODE = [
   "    node = node.next",
   "  return node.value"
 ];
-const LEGEND_ITEMS$g = [
+const LEGEND_ITEMS$i = [
   { color: "bg-white", label: "Node", border: "#d1d5db" },
   { color: "bg-blue-500", label: "Active" }
 ];
-let nodeIdCounter$1 = 0;
+let nodeIdCounter$2 = 0;
 function generateLinkedListSteps() {
   var _a, _b, _c;
   const steps = [];
   let nodes = [];
-  nodeIdCounter$1 = 0;
+  nodeIdCounter$2 = 0;
   steps.push({
     operation: "init",
     nodes: [],
     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$b) {
+  for (const { op, value, index } of OPERATIONS$d) {
     if (op === "addFirst" && value !== void 0) {
-      const newNode = { value, id: nodeIdCounter$1++ };
+      const newNode = { value, id: nodeIdCounter$2++ };
       nodes = [newNode, ...nodes];
       steps.push({
         operation: "addFirst",
@@ -10267,7 +10294,7 @@ function generateLinkedListSteps() {
         highlightNode: newNode.id
       });
     } else if (op === "addLast" && value !== void 0) {
-      const newNode = { value, id: nodeIdCounter$1++ };
+      const newNode = { value, id: nodeIdCounter$2++ };
       nodes = [...nodes, newNode];
       steps.push({
         operation: "addLast",
@@ -10483,7 +10510,7 @@ const LinkedListVisualizerComponent = ({
               accentColor: "blue"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$g })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$i })
         ] })
       ]
     }
@@ -10491,7 +10518,7 @@ const LinkedListVisualizerComponent = ({
 };
 const LinkedListVisualizer = React.memo(LinkedListVisualizerComponent);
 const BUCKET_COUNT = 6;
-const OPERATIONS$a = [
+const OPERATIONS$c = [
   { op: "put", key: "A", value: 10 },
   { op: "put", key: "B", value: 20 },
   { op: "put", key: "C", value: 30 },
@@ -10527,7 +10554,7 @@ const LINKEDHASHMAP_CODE = [
   "  }",
   "}"
 ];
-const LEGEND_ITEMS$f = [
+const LEGEND_ITEMS$h = [
   { color: "bg-blue-50", label: "Current bucket", border: "#60a5fa" },
   { color: "bg-blue-500", label: "Insert/Update" },
   { color: "bg-green-400", label: "Found" },
@@ -10556,7 +10583,7 @@ function generateLinkedHashMapSteps(accessOrder = true) {
     codeLine: 0,
     accessOrder
   });
-  for (const { op, key, value } of OPERATIONS$a) {
+  for (const { op, key, value } of OPERATIONS$c) {
     const hash = simpleHash$2(key);
     const index = hash % BUCKET_COUNT;
     if (op === "put") {
@@ -10992,7 +11019,7 @@ const LinkedHashMapVisualizerComponent = ({
               accentColor: "orange"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$f })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$h })
         ] })
       ]
     }
@@ -11000,7 +11027,7 @@ const LinkedHashMapVisualizerComponent = ({
 };
 const LinkedHashMapVisualizer = React.memo(LinkedHashMapVisualizerComponent);
 const INITIAL_CAPACITY$1 = 4;
-const OPERATIONS$9 = [
+const OPERATIONS$b = [
   { op: "add", value: 10 },
   { op: "add", value: 20 },
   { op: "add", value: 30 },
@@ -11031,7 +11058,7 @@ const ARRAYLIST_CODE = [
   "  shift elements left",
   "  size--"
 ];
-const LEGEND_ITEMS$e = [
+const LEGEND_ITEMS$g = [
   { color: "bg-white border-gray-300", label: "Used", border: "#d1d5db" },
   { color: "bg-gray-100", label: "Empty" },
   { color: "bg-orange-500", label: "Active" },
@@ -11050,7 +11077,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$9) {
+  for (const { op, value, index } of OPERATIONS$b) {
     if (op === "add" && value !== void 0) {
       if (size === capacity) {
         const oldCapacity = capacity;
@@ -11371,7 +11398,7 @@ const ArrayListVisualizerComponent = ({
               accentColor: "orange"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$e })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$g })
         ] })
       ]
     }
@@ -11379,7 +11406,7 @@ const ArrayListVisualizerComponent = ({
 };
 const ArrayListVisualizer = React.memo(ArrayListVisualizerComponent);
 const INITIAL_CAPACITY = 8;
-const OPERATIONS$8 = [
+const OPERATIONS$a = [
   { op: "addLast", value: 10 },
   { op: "addLast", value: 20 },
   { op: "addFirst", value: 5 },
@@ -11425,7 +11452,7 @@ const ARRAYDEQUE_CODE = [
   "  }",
   "}"
 ];
-const LEGEND_ITEMS$d = [
+const LEGEND_ITEMS$f = [
   { color: "bg-teal-500", label: "Head pointer" },
   { color: "bg-violet-500", label: "Tail pointer" },
   { color: "bg-green-400", label: "Added element" },
@@ -11449,7 +11476,7 @@ function generateArrayDequeSteps() {
     codeLine: 0,
     variables: { head, tail, capacity, size: 0 }
   });
-  for (const { op, value } of OPERATIONS$8) {
+  for (const { op, value } of OPERATIONS$a) {
     if (op === "addFirst" && value !== void 0) {
       if (getSize() === capacity - 1) {
         const oldCapacity = capacity;
@@ -11831,14 +11858,14 @@ const ArrayDequeVisualizerComponent = ({
               accentColor: "teal"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$d })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$f })
         ] })
       ]
     }
   );
 };
 const ArrayDequeVisualizer = React.memo(ArrayDequeVisualizerComponent);
-const OPERATIONS$7 = [
+const OPERATIONS$9 = [
   { op: "add", value: 50 },
   { op: "add", value: 30 },
   { op: "add", value: 70 },
@@ -11869,7 +11896,7 @@ const TREESET_CODE = [
   "      node = node.right",
   "    else: return // duplicate"
 ];
-const LEGEND_ITEMS$c = [
+const LEGEND_ITEMS$e = [
   { color: "bg-yellow-100", label: "Path", border: "#facc15" },
   { color: "bg-blue-500", label: "Current/Insert" },
   { color: "bg-green-500", label: "Found" },
@@ -11918,7 +11945,7 @@ function generateTreeSetSteps() {
     description: "Initialize empty TreeSet (Binary Search Tree). Values are stored in sorted order.",
     codeLine: -1
   });
-  for (const { op, value } of OPERATIONS$7) {
+  for (const { op, value } of OPERATIONS$9) {
     if (op === "add") {
       const path = tree ? findPath(tree, value) : [];
       if (tree) {
@@ -12298,7 +12325,7 @@ const TreeSetVisualizerComponent = ({
               accentColor: "green"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$c })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$e })
         ] })
       ]
     }
@@ -12314,7 +12341,7 @@ const DAYS_OF_WEEK = [
   "SATURDAY",
   "SUNDAY"
 ];
-const OPERATIONS$6 = [
+const OPERATIONS$8 = [
   { op: "add", value: "MONDAY" },
   { op: "add", value: "WEDNESDAY" },
   { op: "add", value: "FRIDAY" },
@@ -12347,7 +12374,7 @@ const ENUMSET_CODE = [
   "  }",
   "}"
 ];
-const LEGEND_ITEMS$b = [
+const LEGEND_ITEMS$d = [
   { color: "bg-green-500", label: "Bit set (1)" },
   { color: "bg-gray-200", label: "Bit clear (0)" },
   { color: "bg-blue-500", label: "Current operation" },
@@ -12366,7 +12393,7 @@ function generateEnumSetSteps() {
     codeLine: 1,
     variables: { elements: "0b0000000" }
   });
-  for (const { op, value } of OPERATIONS$6) {
+  for (const { op, value } of OPERATIONS$8) {
     const bitPos = getBitPosition(value);
     const bitMaskForValue = 1 << bitPos;
     const previousBitmask = bitmask;
@@ -12667,14 +12694,14 @@ const EnumSetVisualizerComponent = ({
               accentColor: "lime"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$b })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$d })
         ] })
       ]
     }
   );
 };
 const EnumSetVisualizer = React.memo(EnumSetVisualizerComponent);
-const OPERATIONS$5 = [
+const OPERATIONS$7 = [
   { op: "offer", value: 50 },
   { op: "offer", value: 30 },
   { op: "offer", value: 70 },
@@ -12703,7 +12730,7 @@ const HEAP_CODE = [
   "  siftDown(0)",
   "  return result"
 ];
-const LEGEND_ITEMS$a = [
+const LEGEND_ITEMS$c = [
   { color: "bg-purple-100", label: "Root (min)", border: "#c4b5fd" },
   { color: "bg-purple-500", label: "Active" },
   { color: "bg-purple-200", label: "Sift Path", border: "#a78bfa" },
@@ -12719,7 +12746,7 @@ function generateHeapSteps() {
     description: "Initialize min-heap PriorityQueue. Parent is always smaller than children. O(log n) insert/remove.",
     codeLine: -1
   });
-  for (const { op, value } of OPERATIONS$5) {
+  for (const { op, value } of OPERATIONS$7) {
     if (op === "offer" && value !== void 0) {
       heap.push(value);
       let idx = heap.length - 1;
@@ -13225,7 +13252,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
               accentColor: "purple"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$a })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$c })
         ] })
       ]
     }
@@ -13235,7 +13262,7 @@ const PriorityQueueVisualizer = React.memo(
   PriorityQueueVisualizerComponent
 );
 const SEGMENT_COUNT = 4;
-const OPERATIONS$4 = [
+const OPERATIONS$6 = [
   { thread: "T1", op: "put", key: "Alice", value: 100 },
   { thread: "T2", op: "put", key: "Bob", value: 200 },
   { thread: "T1", op: "put", key: "Charlie", value: 150 },
@@ -13258,7 +13285,7 @@ const CHM_CODE = [
   "  // Volatile reads ensure visibility",
   "  return bucket.get(key)"
 ];
-const LEGEND_ITEMS$9 = [
+const LEGEND_ITEMS$b = [
   { color: "bg-blue-50", label: "Active segment", border: "#60a5fa" },
   { color: "bg-red-50", label: "Locked", border: "#f87171" },
   { color: "bg-gray-50", label: "Unlocked", border: "#d1d5db" }
@@ -13285,7 +13312,7 @@ function generateConcurrentSteps() {
     codeLine: -1,
     activeThreads: []
   });
-  for (const { thread, op, key, value } of OPERATIONS$4) {
+  for (const { thread, op, key, value } of OPERATIONS$6) {
     const hash = simpleHash$1(key);
     const segmentId = hash % SEGMENT_COUNT;
     if (op === "put") {
@@ -13614,7 +13641,7 @@ const ConcurrentHashMapVisualizerComponent = ({ showControls = true, showCode =
               accentColor: "red"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$9 })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$b })
         ] })
       ]
     }
@@ -13624,7 +13651,7 @@ const ConcurrentHashMapVisualizer = React.memo(
   ConcurrentHashMapVisualizerComponent
 );
 const CAPACITY = 3;
-const OPERATIONS$3 = [
+const OPERATIONS$5 = [
   { thread: "P1", role: "producer", value: "Task-A" },
   { thread: "P2", role: "producer", value: "Task-B" },
   { thread: "C1", role: "consumer" },
@@ -13657,7 +13684,7 @@ const BQ_CODE = [
   "  notFull.signal()",
   "  lock.unlock()"
 ];
-const LEGEND_ITEMS$8 = [
+const LEGEND_ITEMS$a = [
   { color: "bg-green-100", label: "Producer" },
   { color: "bg-blue-100", label: "Consumer" },
   { color: "bg-red-100", label: "Blocked", border: "#fca5a5" }
@@ -13679,7 +13706,7 @@ function generateBlockingQueueSteps() {
     blockedProducers: [],
     blockedConsumers: []
   });
-  for (const { thread, role, value } of OPERATIONS$3) {
+  for (const { thread, role, value } of OPERATIONS$5) {
     if (role === "producer") {
       if (queue.length >= CAPACITY) {
         blockedProducers.push(thread);
@@ -14012,7 +14039,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
               accentColor: "cyan"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$8 })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$a })
         ] })
       ]
     }
@@ -14021,7 +14048,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
 const BlockingQueueVisualizer = React.memo(
   BlockingQueueVisualizerComponent
 );
-const OPERATIONS$2 = [
+const OPERATIONS$4 = [
   { thread: "R1", op: "read" },
   { thread: "R2", op: "read" },
   { thread: "W1", op: "write", value: "D" },
@@ -14043,7 +14070,7 @@ const COW_CODE = [
   "  array = newArray  // Atomic swap",
   "  lock.unlock()"
 ];
-const LEGEND_ITEMS$7 = [
+const LEGEND_ITEMS$9 = [
   { color: "bg-blue-500", label: "Reader" },
   { color: "bg-orange-500", label: "Writer" },
   { color: "bg-green-500", label: "New element" }
@@ -14061,7 +14088,7 @@ function generateCOWSteps() {
     codeLine: -1,
     activeReaders: []
   });
-  for (const { thread, op, value } of OPERATIONS$2) {
+  for (const { thread, op, value } of OPERATIONS$4) {
     if (op === "read") {
       if (!activeReaders.includes(thread)) {
         activeReaders.push(thread);
@@ -14355,7 +14382,7 @@ const CopyOnWriteVisualizerComponent = ({
               accentColor: "lime"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$7 })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$9 })
         ] })
       ]
     }
@@ -14378,7 +14405,7 @@ const IMMUTABLE_CODE = [
   "var newList = new ArrayList<>(list)",
   'newList.add("D")  // Works!'
 ];
-const LEGEND_ITEMS$6 = [
+const LEGEND_ITEMS$8 = [
   { color: "bg-violet-100", label: "Immutable", border: "#c4b5fd" },
   { color: "bg-green-100", label: "Mutable copy", border: "#86efac" },
   { color: "bg-red-100", label: "Error", border: "#fca5a5" }
@@ -14656,7 +14683,7 @@ const ImmutableCollectionsVisualizerComponent = ({ showControls = true, showCode
               accentColor: "violet"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$6 })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$8 })
         ] })
       ]
     }
@@ -14687,7 +14714,7 @@ const BLOOM_FILTER_CODE = [
   "        return False  # definitely not",
   "    return True  # probably yes"
 ];
-const LEGEND_ITEMS$5 = [
+const LEGEND_ITEMS$7 = [
   { color: "bg-gray-200", label: "Bit = 0" },
   { color: "bg-indigo-500", label: "Bit = 1" },
   { color: "bg-yellow-400", label: "Currently checking", border: "#fbbf24" },
@@ -15066,7 +15093,7 @@ const BloomFilterVisualizerComponent = ({
               accentColor: "purple"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$5 })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$7 })
         ] })
       ]
     }
@@ -15074,7 +15101,7 @@ const BloomFilterVisualizerComponent = ({
 };
 const BloomFilterVisualizer = React.memo(BloomFilterVisualizerComponent);
 const ORDER = 3;
-const OPERATIONS$1 = [
+const OPERATIONS$3 = [
   { op: "insert", key: 10 },
   { op: "insert", key: 20 },
   { op: "insert", key: 5 },
@@ -15105,7 +15132,7 @@ const BTREE_CODE = [
   "    split root, create new root",
   "  insertNonFull(root, key)"
 ];
-const LEGEND_ITEMS$4 = [
+const LEGEND_ITEMS$6 = [
   { color: "bg-gray-100", label: "Node", border: "#d1d5db" },
   { color: "bg-yellow-200", label: "Current node", border: "#fbbf24" },
   { color: "bg-blue-500", label: "Comparing key" },
@@ -15113,11 +15140,11 @@ const LEGEND_ITEMS$4 = [
   { color: "bg-red-400", label: "Not found" },
   { color: "bg-purple-400", label: "Splitting" }
 ];
-let nodeIdCounter = 0;
-function generateNodeId() {
-  return `node_${nodeIdCounter++}`;
+let nodeIdCounter$1 = 0;
+function generateNodeId$1() {
+  return `node_${nodeIdCounter$1++}`;
 }
-function cloneNodes$1(nodes) {
+function cloneNodes$2(nodes) {
   const cloned = /* @__PURE__ */ new Map();
   nodes.forEach((node, id) => {
     cloned.set(id, {
@@ -15129,11 +15156,11 @@ function cloneNodes$1(nodes) {
   return cloned;
 }
 function generateBTreeSteps() {
-  nodeIdCounter = 0;
+  nodeIdCounter$1 = 0;
   const steps = [];
   let nodes = /* @__PURE__ */ new Map();
   let rootId = "";
-  const initialRoot = generateNodeId();
+  const initialRoot = generateNodeId$1();
   rootId = initialRoot;
   nodes.set(initialRoot, {
     id: initialRoot,
@@ -15143,18 +15170,18 @@ function generateBTreeSteps() {
   });
   steps.push({
     operation: "init",
-    nodes: cloneNodes$1(nodes),
+    nodes: cloneNodes$2(nodes),
     rootId,
     description: `Initialize empty B-Tree of order ${ORDER} (max ${ORDER - 1} keys per node)`,
     codeLine: 0,
     variables: { order: ORDER, maxKeys: ORDER - 1 }
   });
-  for (const { op, key } of OPERATIONS$1) {
+  for (const { op, key } of OPERATIONS$3) {
     if (op === "insert") {
       const root = nodes.get(rootId);
       steps.push({
         operation: "insert",
-        nodes: cloneNodes$1(nodes),
+        nodes: cloneNodes$2(nodes),
         rootId,
         targetKey: key,
         currentNodeId: rootId,
@@ -15171,7 +15198,7 @@ function generateBTreeSteps() {
       insertNode2.keys.sort((a, b) => a - b);
       steps.push({
         operation: "insert",
-        nodes: cloneNodes$1(nodes),
+        nodes: cloneNodes$2(nodes),
         rootId,
         targetKey: key,
         currentNodeId: rootId,
@@ -15187,7 +15214,7 @@ function generateBTreeSteps() {
         const rightKeys = insertNode2.keys.slice(medianIndex + 1);
         steps.push({
           operation: "split",
-          nodes: cloneNodes$1(nodes),
+          nodes: cloneNodes$2(nodes),
           rootId,
           currentNodeId: rootId,
           description: `Node full (${insertNode2.keys.length} keys)! Split: median=${medianKey}, left=[${leftKeys.join(",")}], right=[${rightKeys.join(",")}]`,
@@ -15200,9 +15227,9 @@ function generateBTreeSteps() {
             rightKeys
           }
         });
-        const leftId = generateNodeId();
-        const rightId = generateNodeId();
-        const newRootId = generateNodeId();
+        const leftId = generateNodeId$1();
+        const rightId = generateNodeId$1();
+        const newRootId = generateNodeId$1();
         nodes.set(leftId, {
           id: leftId,
           keys: leftKeys,
@@ -15225,7 +15252,7 @@ function generateBTreeSteps() {
         rootId = newRootId;
         steps.push({
           operation: "split",
-          nodes: cloneNodes$1(nodes),
+          nodes: cloneNodes$2(nodes),
           rootId,
           description: `Split complete! New root with median ${medianKey}`,
           codeLine: 17,
@@ -15235,7 +15262,7 @@ function generateBTreeSteps() {
     } else {
       steps.push({
         operation: "search",
-        nodes: cloneNodes$1(nodes),
+        nodes: cloneNodes$2(nodes),
         rootId,
         targetKey: key,
         currentNodeId: rootId,
@@ -15248,7 +15275,7 @@ function generateBTreeSteps() {
         for (let i = 0; i < node.keys.length; i++) {
           steps.push({
             operation: "compare",
-            nodes: cloneNodes$1(nodes),
+            nodes: cloneNodes$2(nodes),
             rootId,
             targetKey: key,
             currentNodeId: nodeId,
@@ -15260,7 +15287,7 @@ function generateBTreeSteps() {
           if (key === node.keys[i]) {
             steps.push({
               operation: "found",
-              nodes: cloneNodes$1(nodes),
+              nodes: cloneNodes$2(nodes),
               rootId,
               targetKey: key,
               currentNodeId: nodeId,
@@ -15275,7 +15302,7 @@ function generateBTreeSteps() {
             if (node.isLeaf) {
               steps.push({
                 operation: "notFound",
-                nodes: cloneNodes$1(nodes),
+                nodes: cloneNodes$2(nodes),
                 rootId,
                 targetKey: key,
                 currentNodeId: nodeId,
@@ -15291,7 +15318,7 @@ function generateBTreeSteps() {
         if (node.isLeaf) {
           steps.push({
             operation: "notFound",
-            nodes: cloneNodes$1(nodes),
+            nodes: cloneNodes$2(nodes),
             rootId,
             targetKey: key,
             currentNodeId: nodeId,
@@ -15310,7 +15337,7 @@ function generateBTreeSteps() {
   nodes.forEach((node) => allKeys.push(...node.keys));
   steps.push({
     operation: "done",
-    nodes: cloneNodes$1(nodes),
+    nodes: cloneNodes$2(nodes),
     rootId,
     description: `✓ Done! B-Tree contains ${allKeys.length} keys across ${nodes.size} nodes.`,
     codeLine: -1,
@@ -15495,7 +15522,7 @@ const BTreeVisualizerComponent = ({
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "mb-4 p-2 bg-blue-50 rounded-lg border border-blue-200", children: [
               /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-blue-800 mb-1", children: "Operations" }),
-              /* @__PURE__ */ jsx("div", { className: "text-xs text-blue-700 font-mono", children: OPERATIONS$1.map((op, i) => /* @__PURE__ */ jsxs("span", { className: "mr-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-blue-700 font-mono", children: OPERATIONS$3.map((op, i) => /* @__PURE__ */ jsxs("span", { className: "mr-2", children: [
                 op.op,
                 "(",
                 op.key,
@@ -15540,13 +15567,899 @@ const BTreeVisualizerComponent = ({
               accentColor: "green"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$4 })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$6 })
         ] })
       ]
     }
   );
 };
 const BTreeVisualizer = React.memo(BTreeVisualizerComponent);
+const OPERATIONS$2 = [
+  { op: "insert", word: "cat" },
+  { op: "insert", word: "car" },
+  { op: "insert", word: "card" },
+  { op: "insert", word: "care" },
+  { op: "insert", word: "dog" },
+  { op: "search", word: "car" },
+  { op: "search", word: "cab" },
+  { op: "prefix", word: "car" }
+];
+const TRIE_CODE = [
+  "class TrieNode:",
+  "  children = {}  # char -> node",
+  "  isEndOfWord = false",
+  "",
+  "function insert(word):",
+  "  node = root",
+  "  for char in word:",
+  "    if char not in node.children:",
+  "      node.children[char] = TrieNode()",
+  "    node = node.children[char]",
+  "  node.isEndOfWord = true",
+  "",
+  "function search(word):",
+  "  node = root",
+  "  for char in word:",
+  "    if char not in node.children:",
+  "      return false",
+  "    node = node.children[char]",
+  "  return node.isEndOfWord"
+];
+const LEGEND_ITEMS$5 = [
+  { color: "bg-gray-100", label: "Node", border: "#d1d5db" },
+  { color: "bg-blue-200", label: "Current", border: "#60a5fa" },
+  { color: "bg-green-400", label: "End of word" },
+  { color: "bg-yellow-200", label: "Path", border: "#fbbf24" },
+  { color: "bg-purple-400", label: "Match found" },
+  { color: "bg-red-400", label: "Not found" }
+];
+let nodeIdCounter = 0;
+function generateNodeId() {
+  return `trie_${nodeIdCounter++}`;
+}
+function cloneNodes$1(nodes) {
+  const cloned = /* @__PURE__ */ new Map();
+  nodes.forEach((node, id) => {
+    cloned.set(id, {
+      ...node,
+      children: new Map(node.children)
+    });
+  });
+  return cloned;
+}
+function generateTrieSteps() {
+  nodeIdCounter = 0;
+  const steps = [];
+  const nodes = /* @__PURE__ */ new Map();
+  const rootId = generateNodeId();
+  nodes.set(rootId, {
+    id: rootId,
+    char: "",
+    children: /* @__PURE__ */ new Map(),
+    isEndOfWord: false
+  });
+  steps.push({
+    operation: "init",
+    nodes: cloneNodes$1(nodes),
+    rootId,
+    description: "Initialize empty Trie with root node. Each node stores a character and links to children.",
+    codeLine: 0
+  });
+  for (const { op, word } of OPERATIONS$2) {
+    if (op === "insert") {
+      steps.push({
+        operation: "insert",
+        nodes: cloneNodes$1(nodes),
+        rootId,
+        word,
+        currentNodeId: rootId,
+        description: `insert("${word}"): Start at root, traverse/create nodes for each character`,
+        codeLine: 4,
+        variables: { word: `"${word}"` }
+      });
+      let currentId = rootId;
+      const path = [rootId];
+      for (let i = 0; i < word.length; i++) {
+        const char = word[i];
+        const currentNode = nodes.get(currentId);
+        if (currentNode.children.has(char)) {
+          const nextId = currentNode.children.get(char);
+          path.push(nextId);
+          steps.push({
+            operation: "traverse",
+            nodes: cloneNodes$1(nodes),
+            rootId,
+            word,
+            currentNodeId: nextId,
+            highlightChar: char,
+            highlightPath: [...path],
+            description: `'${char}' exists → traverse to child node`,
+            codeLine: 9,
+            variables: { char: `'${char}'`, i, word: `"${word}"` }
+          });
+          currentId = nextId;
+        } else {
+          const newId = generateNodeId();
+          nodes.set(newId, {
+            id: newId,
+            char,
+            children: /* @__PURE__ */ new Map(),
+            isEndOfWord: false
+          });
+          currentNode.children.set(char, newId);
+          path.push(newId);
+          steps.push({
+            operation: "create",
+            nodes: cloneNodes$1(nodes),
+            rootId,
+            word,
+            currentNodeId: newId,
+            highlightChar: char,
+            highlightPath: [...path],
+            description: `'${char}' not found → create new node`,
+            codeLine: 8,
+            variables: { char: `'${char}'`, i, word: `"${word}"` }
+          });
+          currentId = newId;
+        }
+      }
+      const endNode = nodes.get(currentId);
+      endNode.isEndOfWord = true;
+      endNode.word = word;
+      steps.push({
+        operation: "markEnd",
+        nodes: cloneNodes$1(nodes),
+        rootId,
+        word,
+        currentNodeId: currentId,
+        highlightPath: path,
+        description: `Mark node as end of word "${word}"`,
+        codeLine: 10,
+        variables: { word: `"${word}"`, isEndOfWord: "true" }
+      });
+    } else if (op === "search") {
+      steps.push({
+        operation: "search",
+        nodes: cloneNodes$1(nodes),
+        rootId,
+        word,
+        currentNodeId: rootId,
+        description: `search("${word}"): Check if word exists in Trie`,
+        codeLine: 12,
+        variables: { word: `"${word}"` }
+      });
+      let currentId = rootId;
+      const path = [rootId];
+      let found = true;
+      for (let i = 0; i < word.length; i++) {
+        const char = word[i];
+        const currentNode = nodes.get(currentId);
+        if (currentNode.children.has(char)) {
+          const nextId = currentNode.children.get(char);
+          path.push(nextId);
+          steps.push({
+            operation: "traverse",
+            nodes: cloneNodes$1(nodes),
+            rootId,
+            word,
+            currentNodeId: nextId,
+            highlightChar: char,
+            highlightPath: [...path],
+            description: `'${char}' found → continue searching`,
+            codeLine: 17,
+            variables: { char: `'${char}'`, i, word: `"${word}"` }
+          });
+          currentId = nextId;
+        } else {
+          found = false;
+          steps.push({
+            operation: "notFound",
+            nodes: cloneNodes$1(nodes),
+            rootId,
+            word,
+            currentNodeId: currentId,
+            highlightChar: char,
+            highlightPath: path,
+            description: `'${char}' not found → word "${word}" does not exist`,
+            codeLine: 16,
+            variables: { char: `'${char}'`, result: "false" }
+          });
+          break;
+        }
+      }
+      if (found) {
+        const endNode = nodes.get(currentId);
+        if (endNode.isEndOfWord) {
+          steps.push({
+            operation: "found",
+            nodes: cloneNodes$1(nodes),
+            rootId,
+            word,
+            currentNodeId: currentId,
+            highlightPath: path,
+            description: `✓ Found! "${word}" exists in Trie`,
+            codeLine: 18,
+            variables: { word: `"${word}"`, result: "true" }
+          });
+        } else {
+          steps.push({
+            operation: "notFound",
+            nodes: cloneNodes$1(nodes),
+            rootId,
+            word,
+            currentNodeId: currentId,
+            highlightPath: path,
+            description: `Path exists but not marked as word end → "${word}" is only a prefix`,
+            codeLine: 18,
+            variables: { word: `"${word}"`, result: "false" }
+          });
+        }
+      }
+    } else if (op === "prefix") {
+      steps.push({
+        operation: "prefix",
+        nodes: cloneNodes$1(nodes),
+        rootId,
+        prefix: word,
+        currentNodeId: rootId,
+        description: `startsWith("${word}"): Find all words with this prefix`,
+        codeLine: 12,
+        variables: { prefix: `"${word}"` }
+      });
+      let currentId = rootId;
+      const path = [rootId];
+      let prefixExists = true;
+      for (let i = 0; i < word.length; i++) {
+        const char = word[i];
+        const currentNode = nodes.get(currentId);
+        if (currentNode.children.has(char)) {
+          const nextId = currentNode.children.get(char);
+          path.push(nextId);
+          currentId = nextId;
+        } else {
+          prefixExists = false;
+          break;
+        }
+      }
+      if (prefixExists) {
+        const matchedWords = [];
+        const collectWords = (nodeId) => {
+          const node = nodes.get(nodeId);
+          if (node.isEndOfWord && node.word) {
+            matchedWords.push(node.word);
+          }
+          node.children.forEach((childId) => collectWords(childId));
+        };
+        collectWords(currentId);
+        steps.push({
+          operation: "found",
+          nodes: cloneNodes$1(nodes),
+          rootId,
+          prefix: word,
+          currentNodeId: currentId,
+          highlightPath: path,
+          matchedWords,
+          description: `Found ${matchedWords.length} word(s) with prefix "${word}": ${matchedWords.join(", ")}`,
+          codeLine: 18,
+          variables: { prefix: `"${word}"`, count: matchedWords.length }
+        });
+      } else {
+        steps.push({
+          operation: "notFound",
+          nodes: cloneNodes$1(nodes),
+          rootId,
+          prefix: word,
+          highlightPath: path,
+          description: `No words found with prefix "${word}"`,
+          codeLine: 16,
+          variables: { prefix: `"${word}"`, count: 0 }
+        });
+      }
+    }
+  }
+  const allWords = [];
+  const collectAllWords = (nodeId) => {
+    const node = nodes.get(nodeId);
+    if (node.isEndOfWord && node.word) {
+      allWords.push(node.word);
+    }
+    node.children.forEach((childId) => collectAllWords(childId));
+  };
+  collectAllWords(rootId);
+  steps.push({
+    operation: "done",
+    nodes: cloneNodes$1(nodes),
+    rootId,
+    matchedWords: allWords,
+    description: `✓ Done! Trie contains ${allWords.length} words: ${allWords.join(", ")}`,
+    codeLine: -1
+  });
+  return steps;
+}
+const TrieNodeComponent = ({ nodeId, nodes, currentNodeId, highlightPath, depth }) => {
+  const node = nodes.get(nodeId);
+  if (!node) return null;
+  const isCurrent = currentNodeId === nodeId;
+  const isInPath = highlightPath == null ? void 0 : highlightPath.includes(nodeId);
+  const children = Array.from(node.children.entries());
+  let nodeStyle = "border-gray-300 bg-gray-50";
+  if (isCurrent) {
+    nodeStyle = "border-blue-400 bg-blue-100 ring-2 ring-blue-300";
+  } else if (isInPath) {
+    nodeStyle = "border-yellow-400 bg-yellow-100";
+  }
+  if (node.isEndOfWord) {
+    nodeStyle += " ring-2 ring-green-400";
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `
+          w-10 h-10 rounded-lg border-2 flex items-center justify-center
+          text-sm font-bold transition-all duration-300
+          ${nodeStyle}
+        `,
+        children: node.char || "∅"
+      }
+    ),
+    node.isEndOfWord && /* @__PURE__ */ jsx("div", { className: "text-[9px] text-green-600 font-medium mt-0.5", children: node.word }),
+    children.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "w-0.5 h-4 bg-gray-300" }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: children.map(([char, childId]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-500 mb-1", children: char }),
+        /* @__PURE__ */ jsx(
+          TrieNodeComponent,
+          {
+            nodeId: childId,
+            nodes,
+            currentNodeId,
+            highlightPath,
+            depth: depth + 1
+          }
+        )
+      ] }, childId)) })
+    ] })
+  ] });
+};
+const TrieVisualizerComponent = ({
+  showControls = true,
+  showCode = true,
+  className = ""
+}) => {
+  const VISUALIZER_ID = "trie-visualizer";
+  const { copyUrlToClipboard } = useUrlState({ prefix: "trie", scrollToId: VISUALIZER_ID });
+  const generateSteps = useMemo(() => generateTrieSteps, []);
+  const {
+    steps,
+    currentStep,
+    currentStepData,
+    isPlaying,
+    speed,
+    setSpeed,
+    handlePlayPause,
+    handleStep,
+    handleStepBack,
+    handleReset
+  } = useVisualizerPlayback({
+    generateSteps
+  });
+  const stepData = currentStepData || {
+    operation: "init",
+    nodes: /* @__PURE__ */ new Map(),
+    rootId: "",
+    description: ""
+  };
+  const getStatusVariant = () => {
+    if (stepData.operation === "notFound") return "error";
+    if (stepData.operation === "found" || stepData.operation === "markEnd") return "success";
+    if (stepData.operation === "done") return "warning";
+    return "default";
+  };
+  const handleShare = useCallback(async () => {
+    return copyUrlToClipboard({ step: currentStep });
+  }, [copyUrlToClipboard, currentStep]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: VISUALIZER_ID,
+      className: `bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-4 py-3 bg-gradient-to-r from-teal-50 to-cyan-50 border-b border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900", children: "Trie (Prefix Tree)" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 text-xs font-medium bg-teal-100 text-teal-700 rounded", children: "Insert: O(m)" }),
+              /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 text-xs font-medium bg-cyan-100 text-cyan-700 rounded", children: "Search: O(m)" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ShareButton, { onShare: handleShare })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
+          /* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 400, className: showCode ? "flex-1" : "w-full", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-gradient-to-r from-teal-50 to-cyan-50 rounded-lg border border-teal-200", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-teal-800 mb-2", children: "🌲 Trie - Prefix Tree" }),
+              /* @__PURE__ */ jsxs("div", { className: "text-xs text-teal-700 space-y-1", children: [
+                /* @__PURE__ */ jsx("div", { children: "• Each node represents a character" }),
+                /* @__PURE__ */ jsx("div", { children: "• Words share common prefixes (space efficient)" }),
+                /* @__PURE__ */ jsx("div", { children: "• Perfect for autocomplete & spell checking" }),
+                /* @__PURE__ */ jsx("div", { children: "• m = word length, n = number of words" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex justify-center overflow-x-auto py-4", children: stepData.nodes.size > 0 && /* @__PURE__ */ jsx(
+              TrieNodeComponent,
+              {
+                nodeId: stepData.rootId,
+                nodes: stepData.nodes,
+                currentNodeId: stepData.currentNodeId,
+                highlightPath: stepData.highlightPath,
+                depth: 0
+              }
+            ) }),
+            stepData.matchedWords && stepData.matchedWords.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-purple-50 rounded-lg border border-purple-200", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-purple-800 mb-2", children: "Words found:" }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: stepData.matchedWords.map((word) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "px-2 py-1 bg-purple-100 text-purple-700 text-sm rounded font-mono",
+                  children: word
+                },
+                word
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              StatusPanel,
+              {
+                description: stepData.description,
+                currentStep,
+                totalSteps: steps.length,
+                variant: getStatusVariant()
+              }
+            )
+          ] }),
+          showCode && /* @__PURE__ */ jsxs("div", { className: "w-full lg:w-56 flex-shrink-0 space-y-2", children: [
+            /* @__PURE__ */ jsx(
+              CodePanel,
+              {
+                code: TRIE_CODE,
+                activeLine: (currentStepData == null ? void 0 : currentStepData.codeLine) ?? -1,
+                variables: currentStepData == null ? void 0 : currentStepData.variables
+              }
+            ),
+            /* @__PURE__ */ jsx(HelpPanel, {})
+          ] })
+        ] }) }),
+        showControls && /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 bg-gray-50 border-t border-gray-200", children: [
+          /* @__PURE__ */ jsx(
+            ControlPanel,
+            {
+              isPlaying,
+              currentStep,
+              totalSteps: steps.length,
+              speed,
+              onPlayPause: handlePlayPause,
+              onStep: handleStep,
+              onStepBack: handleStepBack,
+              onReset: handleReset,
+              onSpeedChange: setSpeed,
+              accentColor: "teal"
+            }
+          ),
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$5 })
+        ] })
+      ]
+    }
+  );
+};
+const TrieVisualizer = React.memo(TrieVisualizerComponent);
+const INITIAL_SIZE = 8;
+const OPERATIONS$1 = [
+  { op: "union", a: 0, b: 1 },
+  { op: "union", a: 2, b: 3 },
+  { op: "union", a: 4, b: 5 },
+  { op: "union", a: 6, b: 7 },
+  { op: "union", a: 0, b: 2 },
+  { op: "union", a: 4, b: 6 },
+  { op: "find", a: 3 },
+  { op: "connected", a: 1, b: 3 },
+  { op: "connected", a: 0, b: 5 },
+  { op: "union", a: 0, b: 4 },
+  { op: "connected", a: 3, b: 7 }
+];
+const UF_CODE = [
+  "class UnionFind:",
+  "  parent[] = [0, 1, ..., n-1]",
+  "  rank[] = [0, 0, ..., 0]",
+  "",
+  "function find(x):",
+  "  if parent[x] != x:",
+  "    parent[x] = find(parent[x])",
+  "    # path compression",
+  "  return parent[x]",
+  "",
+  "function union(x, y):",
+  "  rootX = find(x)",
+  "  rootY = find(y)",
+  "  if rootX == rootY: return",
+  "  # union by rank",
+  "  if rank[rootX] < rank[rootY]:",
+  "    parent[rootX] = rootY",
+  "  else if rank[rootX] > rank[rootY]:",
+  "    parent[rootY] = rootX",
+  "  else:",
+  "    parent[rootY] = rootX",
+  "    rank[rootX] += 1"
+];
+const LEGEND_ITEMS$4 = [
+  { color: "bg-gray-100", label: "Element", border: "#d1d5db" },
+  { color: "bg-blue-200", label: "Current", border: "#60a5fa" },
+  { color: "bg-yellow-200", label: "Path to root", border: "#fbbf24" },
+  { color: "bg-green-400", label: "Root / Same set" },
+  { color: "bg-red-400", label: "Different sets" },
+  { color: "bg-purple-400", label: "Union edge" }
+];
+function cloneElements(elements) {
+  return elements.map((el) => ({ ...el }));
+}
+function generateUnionFindSteps() {
+  const steps = [];
+  const elements = Array.from({ length: INITIAL_SIZE }, (_, i) => ({
+    id: i,
+    parent: i,
+    rank: 0
+  }));
+  steps.push({
+    operation: "init",
+    elements: cloneElements(elements),
+    description: `Initialize ${INITIAL_SIZE} elements. Each element is its own parent (self-loop).`,
+    codeLine: 1,
+    variables: { n: INITIAL_SIZE }
+  });
+  const find = (x, trackPath = false) => {
+    const path = [x];
+    let current = x;
+    while (elements[current].parent !== current) {
+      current = elements[current].parent;
+      path.push(current);
+    }
+    if (trackPath && path.length > 2) {
+      for (let i = 0; i < path.length - 1; i++) {
+        elements[path[i]].parent = current;
+      }
+    }
+    return { root: current, path };
+  };
+  for (const operation of OPERATIONS$1) {
+    if (operation.op === "find") {
+      const x = operation.a;
+      steps.push({
+        operation: "find",
+        elements: cloneElements(elements),
+        highlightElements: [x],
+        description: `find(${x}): Find the root of element ${x}`,
+        codeLine: 4,
+        variables: { x }
+      });
+      const { root, path } = find(x);
+      steps.push({
+        operation: "find",
+        elements: cloneElements(elements),
+        highlightElements: [root],
+        pathToRoot: path,
+        description: `Path: ${path.join(" → ")}. Root is ${root}`,
+        codeLine: 8,
+        variables: { x, root }
+      });
+      if (path.length > 2) {
+        find(x, true);
+        steps.push({
+          operation: "pathCompress",
+          elements: cloneElements(elements),
+          highlightElements: path.slice(0, -1),
+          pathToRoot: path,
+          description: `Path compression: All nodes on path now point directly to root ${root}`,
+          codeLine: 6,
+          variables: { x, root }
+        });
+      }
+    } else if (operation.op === "union") {
+      const x = operation.a;
+      const y = operation.b;
+      steps.push({
+        operation: "union",
+        elements: cloneElements(elements),
+        highlightElements: [x, y],
+        description: `union(${x}, ${y}): Merge sets containing ${x} and ${y}`,
+        codeLine: 10,
+        variables: { x, y }
+      });
+      const { root: rootX, path: pathX } = find(x);
+      const { root: rootY, path: pathY } = find(y);
+      steps.push({
+        operation: "find",
+        elements: cloneElements(elements),
+        highlightElements: [rootX, rootY],
+        pathToRoot: [...pathX, ...pathY],
+        description: `find(${x}) = ${rootX}, find(${y}) = ${rootY}`,
+        codeLine: 11,
+        variables: { x, y, rootX, rootY }
+      });
+      if (rootX === rootY) {
+        steps.push({
+          operation: "sameSet",
+          elements: cloneElements(elements),
+          highlightElements: [rootX],
+          description: `Already in same set! No union needed.`,
+          codeLine: 13,
+          variables: { rootX, rootY, "same": "true" }
+        });
+      } else {
+        const rankX = elements[rootX].rank;
+        const rankY = elements[rootY].rank;
+        let newRoot;
+        if (rankX < rankY) {
+          elements[rootX].parent = rootY;
+          newRoot = rootY;
+        } else if (rankX > rankY) {
+          elements[rootY].parent = rootX;
+          newRoot = rootX;
+        } else {
+          elements[rootY].parent = rootX;
+          elements[rootX].rank++;
+          newRoot = rootX;
+        }
+        steps.push({
+          operation: "unionByRank",
+          elements: cloneElements(elements),
+          highlightElements: [newRoot],
+          highlightEdge: [rootX, rootY],
+          description: `Union by rank: rank[${rootX}]=${rankX}, rank[${rootY}]=${rankY}. ${newRoot} becomes root.`,
+          codeLine: rankX === rankY ? 20 : rankX < rankY ? 16 : 18,
+          variables: { rootX, rootY, rankX, rankY, newRoot }
+        });
+      }
+    } else if (operation.op === "connected") {
+      const x = operation.a;
+      const y = operation.b;
+      steps.push({
+        operation: "find",
+        elements: cloneElements(elements),
+        highlightElements: [x, y],
+        description: `connected(${x}, ${y}): Check if ${x} and ${y} are in the same set`,
+        codeLine: 4,
+        variables: { x, y }
+      });
+      const { root: rootX, path: pathX } = find(x);
+      const { root: rootY, path: pathY } = find(y);
+      const connected = rootX === rootY;
+      steps.push({
+        operation: "sameSet",
+        elements: cloneElements(elements),
+        highlightElements: connected ? [rootX] : [rootX, rootY],
+        pathToRoot: [...pathX, ...pathY],
+        description: connected ? `✓ Yes! Both ${x} and ${y} have root ${rootX}` : `✗ No! ${x} has root ${rootX}, ${y} has root ${rootY}`,
+        codeLine: 13,
+        variables: { x, y, rootX, rootY, connected: connected ? "true" : "false" },
+        queryResult: connected
+      });
+    }
+  }
+  const roots = /* @__PURE__ */ new Set();
+  for (let i = 0; i < INITIAL_SIZE; i++) {
+    roots.add(find(i).root);
+  }
+  steps.push({
+    operation: "done",
+    elements: cloneElements(elements),
+    description: `✓ Done! ${roots.size} distinct set(s) remain.`,
+    codeLine: -1,
+    variables: { sets: roots.size }
+  });
+  return steps;
+}
+const UnionFindVisualizerComponent = ({
+  showControls = true,
+  showCode = true,
+  className = ""
+}) => {
+  const VISUALIZER_ID = "unionfind-visualizer";
+  const { copyUrlToClipboard } = useUrlState({ prefix: "uf", scrollToId: VISUALIZER_ID });
+  const generateSteps = useMemo(() => generateUnionFindSteps, []);
+  const {
+    steps,
+    currentStep,
+    currentStepData,
+    isPlaying,
+    speed,
+    setSpeed,
+    handlePlayPause,
+    handleStep,
+    handleStepBack,
+    handleReset
+  } = useVisualizerPlayback({
+    generateSteps
+  });
+  const stepData = currentStepData || {
+    operation: "init",
+    elements: [],
+    description: ""
+  };
+  const groups = useMemo(() => {
+    const groupMap = /* @__PURE__ */ new Map();
+    for (const el of stepData.elements) {
+      let current = el.id;
+      while (stepData.elements[current].parent !== current) {
+        current = stepData.elements[current].parent;
+      }
+      const root = current;
+      if (!groupMap.has(root)) {
+        groupMap.set(root, []);
+      }
+      groupMap.get(root).push(el.id);
+    }
+    return groupMap;
+  }, [stepData.elements]);
+  const getElementStyle = (id) => {
+    var _a, _b, _c;
+    const isHighlighted = (_a = stepData.highlightElements) == null ? void 0 : _a.includes(id);
+    const isInPath = (_b = stepData.pathToRoot) == null ? void 0 : _b.includes(id);
+    const isRoot = ((_c = stepData.elements[id]) == null ? void 0 : _c.parent) === id;
+    if (isHighlighted && isRoot) return "border-green-500 bg-green-100 ring-2 ring-green-300";
+    if (isHighlighted) return "border-blue-400 bg-blue-100 ring-2 ring-blue-300";
+    if (isInPath) return "border-yellow-400 bg-yellow-100";
+    if (isRoot) return "border-green-300 bg-green-50";
+    return "border-gray-300 bg-gray-50";
+  };
+  const getStatusVariant = () => {
+    if (stepData.queryResult === false) return "error";
+    if (stepData.queryResult === true) return "success";
+    if (stepData.operation === "done") return "warning";
+    if (stepData.operation === "pathCompress" || stepData.operation === "unionByRank") return "success";
+    return "default";
+  };
+  const handleShare = useCallback(async () => {
+    return copyUrlToClipboard({ step: currentStep });
+  }, [copyUrlToClipboard, currentStep]);
+  const groupColors = ["bg-blue-50", "bg-green-50", "bg-yellow-50", "bg-purple-50", "bg-pink-50", "bg-cyan-50", "bg-orange-50", "bg-rose-50"];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: VISUALIZER_ID,
+      className: `bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-4 py-3 bg-gradient-to-r from-violet-50 to-purple-50 border-b border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900", children: "Union-Find (Disjoint Set)" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 text-xs font-medium bg-violet-100 text-violet-700 rounded", children: "Find: O(α(n))" }),
+              /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 text-xs font-medium bg-purple-100 text-purple-700 rounded", children: "Union: O(α(n))" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ShareButton, { onShare: handleShare })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
+          /* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 400, className: showCode ? "flex-1" : "w-full", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-gradient-to-r from-violet-50 to-purple-50 rounded-lg border border-violet-200", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-violet-800 mb-2", children: "🔗 Union-Find / Disjoint Set Union (DSU)" }),
+              /* @__PURE__ */ jsxs("div", { className: "text-xs text-violet-700 space-y-1", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  "• ",
+                  /* @__PURE__ */ jsx("strong", { children: "Path Compression" }),
+                  ": Flattens tree on find()"
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  "• ",
+                  /* @__PURE__ */ jsx("strong", { children: "Union by Rank" }),
+                  ": Attach smaller tree to larger"
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: "• α(n) = inverse Ackermann, practically ≤ 4" }),
+                /* @__PURE__ */ jsx("div", { children: "• Used in Kruskal's MST, cycle detection, networks" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Elements (parent pointers shown as arrows)" }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 justify-center", children: stepData.elements.map((el) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: `
+                        w-12 h-12 rounded-lg border-2 flex flex-col items-center justify-center
+                        text-sm font-bold transition-all duration-300
+                        ${getElementStyle(el.id)}
+                      `,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: el.id }),
+                      /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-gray-500", children: [
+                        "r:",
+                        el.rank
+                      ] })
+                    ]
+                  }
+                ),
+                el.parent !== el.id && /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
+                  "↑ ",
+                  el.parent
+                ] }),
+                el.parent === el.id && /* @__PURE__ */ jsx("div", { className: "text-xs text-green-600 mt-1 font-medium", children: "root" })
+              ] }, el.id)) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
+                "Connected Components (",
+                groups.size,
+                " set",
+                groups.size !== 1 ? "s" : "",
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: Array.from(groups.entries()).map(([root, members], idx) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `px-3 py-2 rounded-lg border ${groupColors[idx % groupColors.length]} border-gray-300`,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-600 mb-1", children: [
+                      "Root: ",
+                      root
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: members.sort((a, b) => a - b).map((m) => /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `w-6 h-6 rounded flex items-center justify-center text-xs font-medium
+                            ${m === root ? "bg-green-200 text-green-800" : "bg-white text-gray-700 border border-gray-300"}
+                          `,
+                        children: m
+                      },
+                      m
+                    )) })
+                  ]
+                },
+                root
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              StatusPanel,
+              {
+                description: stepData.description,
+                currentStep,
+                totalSteps: steps.length,
+                variant: getStatusVariant()
+              }
+            )
+          ] }),
+          showCode && /* @__PURE__ */ jsxs("div", { className: "w-full lg:w-56 flex-shrink-0 space-y-2", children: [
+            /* @__PURE__ */ jsx(
+              CodePanel,
+              {
+                code: UF_CODE,
+                activeLine: (currentStepData == null ? void 0 : currentStepData.codeLine) ?? -1,
+                variables: currentStepData == null ? void 0 : currentStepData.variables
+              }
+            ),
+            /* @__PURE__ */ jsx(HelpPanel, {})
+          ] })
+        ] }) }),
+        showControls && /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 bg-gray-50 border-t border-gray-200", children: [
+          /* @__PURE__ */ jsx(
+            ControlPanel,
+            {
+              isPlaying,
+              currentStep,
+              totalSteps: steps.length,
+              speed,
+              onPlayPause: handlePlayPause,
+              onStep: handleStep,
+              onStepBack: handleStepBack,
+              onReset: handleReset,
+              onSpeedChange: setSpeed,
+              accentColor: "violet"
+            }
+          ),
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$4 })
+        ] })
+      ]
+    }
+  );
+};
+const UnionFindVisualizer = React.memo(UnionFindVisualizerComponent);
 const VIRTUAL_NODES_PER_SERVER = 3;
 const OPERATIONS = [
   { op: "addServer", server: "Server-A" },
@@ -17711,6 +18624,8 @@ export {
   StepHistory,
   TreeSetInterviewVisualizer,
   TreeSetVisualizer,
+  TrieVisualizer,
+  UnionFindVisualizer,
   VisualizationArea,
   useInterviewMode,
   useUrlState,