@tomaszjarosz/react-visualizers 0.2.13 → 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" })
           ]
         }
       )
@@ -1635,11 +1662,46 @@ const ALGORITHM_NAMES$1 = {
   merge: "MergeSort"
 };
 const ALGORITHM_COMPLEXITIES$1 = {
-  bubble: { time: "O(n²)", space: "O(1)" },
-  selection: { time: "O(n²)", space: "O(1)" },
-  insertion: { time: "O(n²)", space: "O(1)" },
-  quick: { time: "O(n log n)", space: "O(log n)" },
-  merge: { time: "O(n log n)", space: "O(n)" }
+  bubble: {
+    time: "O(n²)",
+    best: "O(n)",
+    average: "O(n²)",
+    worst: "O(n²)",
+    space: "O(1)",
+    stable: true
+  },
+  selection: {
+    time: "O(n²)",
+    best: "O(n²)",
+    average: "O(n²)",
+    worst: "O(n²)",
+    space: "O(1)",
+    stable: false
+  },
+  insertion: {
+    time: "O(n²)",
+    best: "O(n)",
+    average: "O(n²)",
+    worst: "O(n²)",
+    space: "O(1)",
+    stable: true
+  },
+  quick: {
+    time: "O(n log n)",
+    best: "O(n log n)",
+    average: "O(n log n)",
+    worst: "O(n²)",
+    space: "O(log n)",
+    stable: false
+  },
+  merge: {
+    time: "O(n log n)",
+    best: "O(n log n)",
+    average: "O(n log n)",
+    worst: "O(n log n)",
+    space: "O(n)",
+    stable: true
+  }
 };
 const ALGORITHM_CODE$1 = {
   bubble: [
@@ -1694,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" },
@@ -2094,7 +2156,7 @@ const BinarySearchVisualizerComponent = ({
               accentColor: "green"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$y })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$A })
         ] })
       ]
     }
@@ -2159,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" },
@@ -2640,6 +2702,7 @@ const SortingVisualizerComponent = ({
   const [customArray, setCustomArray] = useState(null);
   const [historyCollapsed, setHistoryCollapsed] = useState(true);
   const [urlStateLoaded, setUrlStateLoaded] = useState(false);
+  const [showComplexityTable, setShowComplexityTable] = useState(false);
   const playingRef = useRef(false);
   const timeoutRef = useRef(null);
   const VISUALIZER_ID = "sorting-visualizer";
@@ -2944,6 +3007,63 @@ const SortingVisualizerComponent = ({
             /* @__PURE__ */ jsx(HelpPanel, {})
           ] })
         ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "px-4 pb-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setShowComplexityTable(!showComplexityTable),
+              className: "flex items-center gap-2 text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: `w-4 h-4 transition-transform ${showComplexityTable ? "rotate-90" : ""}`,
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+                  }
+                ),
+                "Algorithm Complexity Comparison"
+              ]
+            }
+          ),
+          showComplexityTable && /* @__PURE__ */ jsxs("div", { className: "mt-3 p-4 bg-gradient-to-r from-indigo-50 to-blue-50 rounded-xl border border-indigo-200", children: [
+            /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-left text-indigo-900", children: [
+                /* @__PURE__ */ jsx("th", { className: "pb-2 pr-4 font-semibold", children: "Algorithm" }),
+                /* @__PURE__ */ jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Best" }),
+                /* @__PURE__ */ jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Average" }),
+                /* @__PURE__ */ jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Worst" }),
+                /* @__PURE__ */ jsx("th", { className: "pb-2 px-3 font-semibold text-center", children: "Space" }),
+                /* @__PURE__ */ jsx("th", { className: "pb-2 pl-3 font-semibold text-center", children: "Stable" })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { className: "text-gray-700", children: Object.keys(ALGORITHM_NAMES$1).map((alg) => {
+                const comp = ALGORITHM_COMPLEXITIES$1[alg];
+                const isCurrentAlgorithm = alg === algorithm;
+                return /* @__PURE__ */ jsxs(
+                  "tr",
+                  {
+                    className: `border-t border-indigo-100 ${isCurrentAlgorithm ? "bg-indigo-100/50 font-medium" : ""}`,
+                    children: [
+                      /* @__PURE__ */ jsx("td", { className: "py-2 pr-4", children: /* @__PURE__ */ jsx("span", { className: isCurrentAlgorithm ? "text-indigo-700" : "", children: ALGORITHM_NAMES$1[alg] }) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.best.includes("log") ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`, children: comp.best }) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.average.includes("log") ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`, children: comp.average }) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.worst.includes("log") ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`, children: comp.worst }) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-xs ${comp.space === "O(1)" ? "bg-green-100 text-green-700" : "bg-purple-100 text-purple-700"}`, children: comp.space }) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 pl-3 text-center", children: comp.stable ? /* @__PURE__ */ jsx("span", { className: "text-green-600", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-red-400", children: "✗" }) })
+                    ]
+                  },
+                  alg
+                );
+              }) })
+            ] }) }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs text-indigo-600", children: [
+              /* @__PURE__ */ jsx("strong", { children: "Stable:" }),
+              " A sorting algorithm is stable if elements with equal keys maintain their relative order."
+            ] })
+          ] })
+        ] }),
         showControls && /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 bg-gray-50 border-t border-gray-200", children: [
           /* @__PURE__ */ jsx(
             ControlPanel,
@@ -2963,7 +3083,7 @@ const SortingVisualizerComponent = ({
               extraControls: sizeControl
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$x })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$z })
         ] })
       ]
     }
@@ -3509,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" }
@@ -3870,7 +3990,7 @@ const DijkstraVisualizerComponent = ({
               accentColor: "orange"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$w })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$y })
         ] })
       ]
     }
@@ -3894,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" },
@@ -4190,7 +4310,7 @@ const DPVisualizerComponent = ({
               accentColor: "teal"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$v })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$x })
         ] })
       ]
     }
@@ -4229,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" }
@@ -4656,7 +4776,7 @@ const GraphVisualizerComponent = ({
               accentColor: "purple"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$u })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$w })
         ] })
       ]
     }
@@ -4664,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 },
@@ -4696,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" },
@@ -4721,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") {
@@ -5008,7 +5128,7 @@ const HashMapVisualizerComponent = ({
               accentColor: "indigo"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$t })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$v })
         ] })
       ]
     }
@@ -5016,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 },
@@ -5025,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" },
@@ -5154,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") {
@@ -5395,7 +5515,7 @@ const HashMapInterviewVisualizerComponent = ({
               accentColor: "indigo"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$s })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$u })
         ] })
       ]
     }
@@ -5403,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 },
@@ -5412,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" },
@@ -5438,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;
@@ -5940,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 },
@@ -5958,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" }
@@ -6122,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) {
@@ -6421,7 +6541,7 @@ const TreeSetInterviewVisualizerComponent = ({
               accentColor: "green"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$q })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$s })
         ] })
       ]
     }
@@ -6429,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" },
@@ -6752,7 +6872,7 @@ const SortingInterviewVisualizerComponent = ({
               accentColor: "orange"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$p })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$r })
         ] })
       ]
     }
@@ -6777,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" }
@@ -7199,7 +7319,7 @@ const GraphInterviewVisualizerComponent = ({
               accentColor: "blue"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$o })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$q })
         ] })
       ]
     }
@@ -7208,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" },
@@ -7216,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" }
@@ -7374,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({
@@ -7564,7 +7684,7 @@ const BloomFilterInterviewVisualizerComponent = ({
               accentColor: "purple"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$n })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$p })
         ] })
       ]
     }
@@ -7572,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 },
@@ -7581,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" }
@@ -7773,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",
@@ -8008,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" }
@@ -8409,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" },
@@ -8803,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" },
@@ -9253,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" },
@@ -9417,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 }))
@@ -9435,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";
@@ -9445,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
   });
@@ -9457,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" }
@@ -9466,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
         });
@@ -9476,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"
@@ -9486,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
   });
@@ -9506,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
         });
@@ -9516,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;
@@ -9720,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",
@@ -9748,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" },
@@ -9763,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",
@@ -9771,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) {
@@ -10105,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 },
@@ -10144,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",
@@ -10174,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",
@@ -10390,7 +10510,7 @@ const LinkedListVisualizerComponent = ({
               accentColor: "blue"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$g })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$i })
         ] })
       ]
     }
@@ -10398,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 },
@@ -10434,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" },
@@ -10463,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") {
@@ -10899,7 +11019,7 @@ const LinkedHashMapVisualizerComponent = ({
               accentColor: "orange"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$f })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$h })
         ] })
       ]
     }
@@ -10907,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 },
@@ -10938,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" },
@@ -10957,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;
@@ -11278,7 +11398,7 @@ const ArrayListVisualizerComponent = ({
               accentColor: "orange"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$e })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$g })
         ] })
       ]
     }
@@ -11286,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 },
@@ -11332,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" },
@@ -11356,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;
@@ -11738,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 },
@@ -11776,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" },
@@ -11825,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) {
@@ -12205,7 +12325,7 @@ const TreeSetVisualizerComponent = ({
               accentColor: "green"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$c })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$e })
         ] })
       ]
     }
@@ -12221,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" },
@@ -12254,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" },
@@ -12273,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;
@@ -12574,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 },
@@ -12610,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" },
@@ -12626,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;
@@ -13132,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 })
         ] })
       ]
     }
@@ -13142,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 },
@@ -13165,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" }
@@ -13192,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") {
@@ -13521,7 +13641,7 @@ const ConcurrentHashMapVisualizerComponent = ({ showControls = true, showCode =
               accentColor: "red"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$9 })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$b })
         ] })
       ]
     }
@@ -13531,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" },
@@ -13564,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" }
@@ -13586,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);
@@ -13919,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 })
         ] })
       ]
     }
@@ -13928,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" },
@@ -13950,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" }
@@ -13968,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);
@@ -14262,7 +14382,7 @@ const CopyOnWriteVisualizerComponent = ({
               accentColor: "lime"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$7 })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$9 })
         ] })
       ]
     }
@@ -14285,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" }
@@ -14563,7 +14683,7 @@ const ImmutableCollectionsVisualizerComponent = ({ showControls = true, showCode
               accentColor: "violet"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$6 })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$8 })
         ] })
       ]
     }
@@ -14594,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" },
@@ -14973,7 +15093,7 @@ const BloomFilterVisualizerComponent = ({
               accentColor: "purple"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$5 })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$7 })
         ] })
       ]
     }
@@ -14981,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 },
@@ -15012,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" },
@@ -15020,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, {
@@ -15036,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,
@@ -15050,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,
@@ -15078,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,
@@ -15094,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(",")}]`,
@@ -15107,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,
@@ -15132,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,
@@ -15142,7 +15262,7 @@ function generateBTreeSteps() {
     } else {
       steps.push({
         operation: "search",
-        nodes: cloneNodes$1(nodes),
+        nodes: cloneNodes$2(nodes),
         rootId,
         targetKey: key,
         currentNodeId: rootId,
@@ -15155,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,
@@ -15167,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,
@@ -15182,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,
@@ -15198,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,
@@ -15217,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,
@@ -15402,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,
@@ -15447,40 +15567,926 @@ const BTreeVisualizerComponent = ({
               accentColor: "green"
             }
           ),
-          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$4 })
+          /* @__PURE__ */ jsx(Legend, { items: LEGEND_ITEMS$6 })
         ] })
       ]
     }
   );
 };
 const BTreeVisualizer = React.memo(BTreeVisualizerComponent);
-const VIRTUAL_NODES_PER_SERVER = 3;
-const OPERATIONS = [
-  { op: "addServer", server: "Server-A" },
-  { op: "addServer", server: "Server-B" },
-  { op: "addServer", server: "Server-C" },
-  { op: "addKey", key: "user:1001" },
-  { op: "addKey", key: "user:1002" },
-  { op: "addKey", key: "session:abc" },
-  { op: "addKey", key: "cache:page1" },
-  { op: "removeServer", server: "Server-B" }
+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 CONSISTENT_HASHING_CODE = [
-  "class ConsistentHash:",
-  "  ring = SortedMap()  # position → server",
-  "  virtualNodes = 3    # replicas per server",
+const TRIE_CODE = [
+  "class TrieNode:",
+  "  children = {}  # char -> node",
+  "  isEndOfWord = false",
   "",
-  "function addServer(server):",
-  "  for i in range(virtualNodes):",
-  '    pos = hash(server + "#" + i) % 360',
-  "    ring[pos] = server",
+  "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 getServer(key):",
-  "  pos = hash(key) % 360",
-  "  # Find first server with pos >= key pos",
-  "  server = ring.ceiling(pos)",
-  "  if server is null:",
-  "    server = ring.first()  # wrap around",
+  "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" },
+  { op: "addServer", server: "Server-B" },
+  { op: "addServer", server: "Server-C" },
+  { op: "addKey", key: "user:1001" },
+  { op: "addKey", key: "user:1002" },
+  { op: "addKey", key: "session:abc" },
+  { op: "addKey", key: "cache:page1" },
+  { op: "removeServer", server: "Server-B" }
+];
+const CONSISTENT_HASHING_CODE = [
+  "class ConsistentHash:",
+  "  ring = SortedMap()  # position → server",
+  "  virtualNodes = 3    # replicas per server",
+  "",
+  "function addServer(server):",
+  "  for i in range(virtualNodes):",
+  '    pos = hash(server + "#" + i) % 360',
+  "    ring[pos] = server",
+  "",
+  "function getServer(key):",
+  "  pos = hash(key) % 360",
+  "  # Find first server with pos >= key pos",
+  "  server = ring.ceiling(pos)",
+  "  if server is null:",
+  "    server = ring.first()  # wrap around",
   "  return server",
   "",
   "function removeServer(server):",
@@ -17458,15 +18464,75 @@ const SQLJoinVisualizerComponent = ({
                 }) : /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-400 text-center py-2", children: "No results yet" })
               ] })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-blue-700", children: [
-              /* @__PURE__ */ jsxs("strong", { children: [
-                joinType.toUpperCase(),
-                " JOIN:"
+            /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-gradient-to-r from-cyan-50 to-blue-50 rounded-lg border border-cyan-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 60", className: "w-24 h-14 flex-shrink-0", children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "35",
+                    cy: "30",
+                    r: "22",
+                    fill: joinType === "left" || joinType === "full" ? "#06b6d4" : joinType === "inner" ? "transparent" : "#e5e7eb",
+                    fillOpacity: joinType === "left" || joinType === "full" ? 0.6 : joinType === "inner" ? 0 : 0.5,
+                    stroke: "#0891b2",
+                    strokeWidth: "2"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "65",
+                    cy: "30",
+                    r: "22",
+                    fill: joinType === "right" || joinType === "full" ? "#06b6d4" : joinType === "inner" ? "transparent" : "#e5e7eb",
+                    fillOpacity: joinType === "right" || joinType === "full" ? 0.6 : joinType === "inner" ? 0 : 0.5,
+                    stroke: "#0891b2",
+                    strokeWidth: "2"
+                  }
+                ),
+                /* @__PURE__ */ jsx("clipPath", { id: "leftClip", children: /* @__PURE__ */ jsx("circle", { cx: "35", cy: "30", r: "22" }) }),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "65",
+                    cy: "30",
+                    r: "22",
+                    fill: "#22c55e",
+                    fillOpacity: "0.7",
+                    clipPath: "url(#leftClip)"
+                  }
+                ),
+                /* @__PURE__ */ jsx("text", { x: "22", y: "33", fontSize: "8", fill: "#0e7490", fontWeight: "bold", children: "L" }),
+                /* @__PURE__ */ jsx("text", { x: "74", y: "33", fontSize: "8", fill: "#0e7490", fontWeight: "bold", children: "R" })
               ] }),
-              joinType === "inner" && " Returns only rows with matches in BOTH tables.",
-              joinType === "left" && " Returns ALL rows from left + matching rows from right (NULL if no match).",
-              joinType === "right" && " Returns ALL rows from right + matching rows from left (NULL if no match).",
-              joinType === "full" && " Returns ALL rows from BOTH tables (NULL where no match exists)."
+              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-cyan-800 mb-1", children: [
+                  joinType.toUpperCase(),
+                  " JOIN"
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "text-xs text-cyan-700", children: [
+                  joinType === "inner" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "Returns only rows with matches in ",
+                    /* @__PURE__ */ jsx("strong", { children: "both" }),
+                    " tables (green intersection)."
+                  ] }),
+                  joinType === "left" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "Returns ",
+                    /* @__PURE__ */ jsx("strong", { children: "all" }),
+                    " rows from left table + matching rows from right. NULL if no match."
+                  ] }),
+                  joinType === "right" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "Returns ",
+                    /* @__PURE__ */ jsx("strong", { children: "all" }),
+                    " rows from right table + matching rows from left. NULL if no match."
+                  ] }),
+                  joinType === "full" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "Returns ",
+                    /* @__PURE__ */ jsx("strong", { children: "all" }),
+                    " rows from both tables. NULL where no match exists."
+                  ] })
+                ] })
+              ] })
             ] }) }),
             /* @__PURE__ */ jsx(
               StatusPanel,
@@ -17558,6 +18624,8 @@ export {
   StepHistory,
   TreeSetInterviewVisualizer,
   TreeSetVisualizer,
+  TrieVisualizer,
+  UnionFindVisualizer,
   VisualizationArea,
   useInterviewMode,
   useUrlState,