@tomaszjarosz/react-visualizers 0.2.7 → 0.2.11

package/dist/index.d.ts

@@ -203,6 +203,8 @@ declare type SortingAlgorithm = 'bubble' | 'selection' | 'insertion' | 'quick' |
 export declare const SortingComparisonVisualizer: default_2.NamedExoticComponent<SortingComparisonVisualizerProps>;
 
 declare interface SortingComparisonVisualizerProps {
+    showControls?: boolean;
+    showCode?: boolean;
     className?: string;
 }
 

package/dist/index.js

@@ -1208,6 +1208,46 @@ const ALGORITHM_COMPLEXITIES$1 = {
   quick: { time: "O(n log n)", space: "O(log n)" },
   merge: { time: "O(n log n)", space: "O(n)" }
 };
+const ALGORITHM_CODE$1 = {
+  bubble: [
+    "for (i = 0; i < n-1; i++)",
+    "  for (j = 0; j < n-i-1; j++)",
+    "    if (arr[j] > arr[j+1])",
+    "      swap(arr[j], arr[j+1])"
+  ],
+  selection: [
+    "for (i = 0; i < n-1; i++)",
+    "  minIdx = i",
+    "  for (j = i+1; j < n; j++)",
+    "    if (arr[j] < arr[minIdx])",
+    "      minIdx = j",
+    "  swap(arr[i], arr[minIdx])"
+  ],
+  insertion: [
+    "for (i = 1; i < n; i++)",
+    "  key = arr[i]",
+    "  j = i - 1",
+    "  while (j >= 0 && arr[j] > key)",
+    "    arr[j+1] = arr[j]",
+    "    j--",
+    "  arr[j+1] = key"
+  ],
+  quick: [
+    "quickSort(arr, low, high)",
+    "  if (low < high)",
+    "    pi = partition(arr, low, high)",
+    "    quickSort(arr, low, pi-1)",
+    "    quickSort(arr, pi+1, high)"
+  ],
+  merge: [
+    "mergeSort(arr, l, r)",
+    "  if (l < r)",
+    "    m = (l + r) / 2",
+    "    mergeSort(arr, l, m)",
+    "    mergeSort(arr, m+1, r)",
+    "    merge(arr, l, m, r)"
+  ]
+};
 const BINARY_SEARCH_CODE = [
   "binarySearch(arr, target):",
   "  left = 0, right = n - 1",
@@ -1494,11 +1534,64 @@ const BinarySearchVisualizerComponent = ({
         ] }) }),
         /* @__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: 350, children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border-2 border-green-200", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-green-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg", children: "🎯" }),
+                " Binary Search Invariant"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-green-200", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-center text-green-700 font-bold mb-2", children: "target ∈ arr[left..right]" }),
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 text-center", children: "If target exists, it must be within current search bounds" })
+              ] }),
+              left <= right && /* @__PURE__ */ jsxs("div", { className: "mt-3 p-2 bg-white rounded-lg border border-green-200", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-xs", children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold text-green-700", children: "Search space:" }),
+                    " ",
+                    /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+                      "[",
+                      left,
+                      "..",
+                      right,
+                      "]"
+                    ] }),
+                    " = ",
+                    /* @__PURE__ */ jsx("span", { className: "font-bold text-green-600", children: right - left + 1 }),
+                    " elements"
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "text-gray-500", children: currentStep > 0 && /* @__PURE__ */ jsxs("span", { children: [
+                    "Eliminated: ",
+                    /* @__PURE__ */ jsxs("span", { className: "font-bold text-red-500", children: [
+                      Math.round((1 - (right - left + 1) / array.length) * 100),
+                      "%"
+                    ] })
+                  ] }) })
+                ] }),
+                mid >= 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-center text-gray-600", children: [
+                  "mid = ⌊(",
+                  left,
+                  " + ",
+                  right,
+                  ") / 2⌋ = ",
+                  /* @__PURE__ */ jsx("span", { className: "font-bold text-purple-600", children: mid })
+                ] })
+              ] }),
+              found === true && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-green-100 rounded-lg border border-green-300 text-center", children: /* @__PURE__ */ jsxs("span", { className: "text-green-800 font-bold", children: [
+                "✓ Found in ",
+                currentStep,
+                " steps (log₂",
+                array.length,
+                " ≈ ",
+                Math.ceil(Math.log2(array.length)),
+                " max)"
+              ] }) }),
+              found === false && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-red-100 rounded-lg border border-red-300 text-center", children: /* @__PURE__ */ jsx("span", { className: "text-red-800 font-bold", children: "✗ Not found - search space exhausted" }) })
+            ] }),
             /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1 flex-wrap mb-4", children: array.map((value, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: `w-10 h-10 flex items-center justify-center rounded-lg font-medium text-sm transition-all duration-300 ${getElementStyle(index)}`,
+                  className: `w-10 h-10 flex items-center justify-center rounded-lg font-medium text-sm transition-colors duration-300 ${getElementStyle(index)}`,
                   children: value
                 }
               ),
@@ -2369,7 +2462,7 @@ const SortingVisualizerComponent = ({
             /* @__PURE__ */ jsx("div", { className: "flex items-end justify-center gap-1 h-48 bg-gray-50 rounded-lg p-4", children: bars.map((bar, index) => /* @__PURE__ */ jsxs(
               "div",
               {
-                className: `${getBarColor(bar.state)} rounded-t transition-all duration-200 flex items-end justify-center relative group`,
+                className: `${getBarColor(bar.state)} rounded-t transition-colors duration-200 flex items-end justify-center relative group`,
                 style: {
                   height: `${bar.value / maxValue * 100}%`,
                   width: `${Math.max(100 / bars.length - 1, 8)}%`,
@@ -2719,6 +2812,8 @@ function generateRandomArray(size) {
   return Array.from({ length: size }, () => Math.floor(Math.random() * 100) + 5);
 }
 const SortingComparisonVisualizerComponent = ({
+  showControls = true,
+  showCode = true,
   className = ""
 }) => {
   const [algorithm1, setAlgorithm1] = useState("bubble");
@@ -2829,7 +2924,7 @@ const SortingComparisonVisualizerComponent = ({
       /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx("div", { className: "flex items-end justify-center gap-0.5 h-32 bg-gray-50 rounded p-2", children: step.array.map((value, index) => /* @__PURE__ */ jsx(
         "div",
         {
-          className: `${getBarColor(step, index)} rounded-t transition-all duration-150`,
+          className: `${getBarColor(step, index)} rounded-t transition-colors duration-150`,
           style: {
             height: `${value / maxValue * 100}%`,
             width: `${Math.max(100 / step.array.length - 1, 6)}%`,
@@ -2887,7 +2982,17 @@ const SortingComparisonVisualizerComponent = ({
       /* @__PURE__ */ jsx("div", { className: "flex items-center text-2xl font-bold text-gray-300", children: "VS" }),
       renderAlgorithmPanel(algorithm2, state2, setAlgorithm2, algorithm1, "border-purple-200")
     ] }) }) }),
-    /* @__PURE__ */ jsx("div", { className: "px-4 py-3 bg-gray-50 border-t border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between flex-wrap gap-3", children: [
+    showCode && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-t border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-indigo-600 mb-2", children: ALGORITHM_NAMES$1[algorithm1] }),
+        /* @__PURE__ */ jsx(CodePanel, { code: ALGORITHM_CODE$1[algorithm1], activeLine: -1 })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-purple-600 mb-2", children: ALGORITHM_NAMES$1[algorithm2] }),
+        /* @__PURE__ */ jsx(CodePanel, { code: ALGORITHM_CODE$1[algorithm2], activeLine: -1 })
+      ] })
+    ] }) }),
+    showControls && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 bg-gray-50 border-t border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between flex-wrap gap-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         isPlaying && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-indigo-600 font-medium", children: [
           /* @__PURE__ */ jsx("span", { className: "w-2 h-2 bg-indigo-500 rounded-full animate-pulse" }),
@@ -4140,6 +4245,25 @@ const GraphVisualizerComponent = ({
         ] }) }),
         /* @__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, children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl border-2 border-purple-200", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-purple-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg", children: "🔍" }),
+                " DFS vs BFS"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
+                /* @__PURE__ */ jsxs("div", { className: `p-2 rounded-lg border ${algorithm === "dfs" ? "bg-purple-100 border-purple-300" : "bg-gray-100 border-gray-300"}`, children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-bold text-purple-700", children: "Depth-First (DFS)" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-purple-600", children: "Uses: Stack" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] text-purple-500", children: "Go deep before wide" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: `p-2 rounded-lg border ${algorithm === "bfs" ? "bg-indigo-100 border-indigo-300" : "bg-gray-100 border-gray-300"}`, children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-bold text-indigo-700", children: "Breadth-First (BFS)" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-indigo-600", children: "Uses: Queue" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] text-indigo-500", children: "Level by level" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 text-[10px] text-gray-600 text-center", children: "Both O(V+E) time • DFS for paths/cycles • BFS for shortest path (unweighted)" })
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
               /* @__PURE__ */ jsx("div", { className: "flex-1 bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 400 300", className: "w-full h-64", children: [
                 graph.edges.map((edge, index) => {
@@ -4164,7 +4288,7 @@ const GraphVisualizerComponent = ({
                       cx: node.x,
                       cy: node.y,
                       r: 20,
-                      className: `${getNodeColor(node.id)} stroke-2 transition-all duration-300`
+                      className: `${getNodeColor(node.id)} stroke-2 transition-colors duration-300`
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -4497,6 +4621,40 @@ const HashMapVisualizerComponent = ({
         ] }) }),
         /* @__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: 350, className: showCode ? "flex-1" : "w-full", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl border-2 border-indigo-200", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-indigo-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg", children: "#️⃣" }),
+                " Hash Function"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-indigo-200", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-center text-indigo-700 font-bold mb-2", children: "index = hashCode(key) % capacity" }),
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 text-center", children: "Same key → same index (deterministic) • Different keys may collide → chaining" })
+              ] }),
+              stepData.hash !== void 0 && stepData.key && /* @__PURE__ */ jsx("div", { className: "mt-3 p-3 bg-white rounded-lg border border-indigo-200", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-center", children: [
+                /* @__PURE__ */ jsxs("div", { className: "font-mono mb-1", children: [
+                  "hashCode(",
+                  /* @__PURE__ */ jsxs("span", { className: "text-indigo-600 font-bold", children: [
+                    '"',
+                    stepData.key,
+                    '"'
+                  ] }),
+                  ") = ",
+                  /* @__PURE__ */ jsx("span", { className: "text-purple-600 font-bold", children: stepData.hash })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "font-mono", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-purple-600", children: stepData.hash }),
+                  " % ",
+                  /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: BUCKET_COUNT$1 }),
+                  " = ",
+                  /* @__PURE__ */ jsx("span", { className: "text-indigo-600 font-bold text-lg", children: stepData.bucketIndex })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-2 text-indigo-600 text-lg", children: [
+                  "↓ bucket[",
+                  stepData.bucketIndex,
+                  "]"
+                ] })
+              ] }) })
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
                 "Bucket Array (capacity: ",
@@ -4527,22 +4685,6 @@ const HashMapVisualizerComponent = ({
                 ] }, eIdx)) : /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-400 mt-1", children: "∅" }) })
               ] }, idx)) })
             ] }),
-            stepData.hash !== void 0 && /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-600", children: [
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Hash Calculation:" }),
-              /* @__PURE__ */ jsxs("div", { className: "mt-1 font-mono text-indigo-600", children: [
-                'hashCode("',
-                stepData.key,
-                '") = ',
-                stepData.hash
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "font-mono text-purple-600", children: [
-                stepData.hash,
-                " % ",
-                BUCKET_COUNT$1,
-                " = ",
-                stepData.bucketIndex
-              ] })
-            ] }) }),
             /* @__PURE__ */ jsx(
               StatusPanel,
               {
@@ -5215,6 +5357,27 @@ const LinkedListVisualizerComponent = ({
         ] }) }),
         /* @__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: 350, className: showCode ? "flex-1" : "w-full", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border-2 border-blue-200", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-blue-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg", children: "🔗" }),
+                " LinkedList vs ArrayList"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2 text-xs", children: [
+                /* @__PURE__ */ jsx("div", { className: "bg-white p-2 rounded-lg border border-blue-200 text-center", children: /* @__PURE__ */ jsx("div", { className: "font-semibold text-gray-700 mb-1", children: "Operation" }) }),
+                /* @__PURE__ */ jsx("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: /* @__PURE__ */ jsx("div", { className: "font-semibold text-blue-700 mb-1", children: "LinkedList" }) }),
+                /* @__PURE__ */ jsx("div", { className: "bg-orange-100 p-2 rounded-lg border border-orange-300 text-center", children: /* @__PURE__ */ jsx("div", { className: "font-semibold text-orange-700 mb-1", children: "ArrayList" }) }),
+                /* @__PURE__ */ jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "add/remove (ends)" }),
+                /* @__PURE__ */ jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)" }),
+                /* @__PURE__ */ jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)*" }),
+                /* @__PURE__ */ jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "add/remove (middle)" }),
+                /* @__PURE__ */ jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)**" }),
+                /* @__PURE__ */ jsx("div", { className: "bg-red-100 p-2 rounded-lg border border-red-300 text-center font-bold text-red-700", children: "O(n)" }),
+                /* @__PURE__ */ jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "get(index)" }),
+                /* @__PURE__ */ jsx("div", { className: "bg-red-100 p-2 rounded-lg border border-red-300 text-center font-bold text-red-700", children: "O(n)" }),
+                /* @__PURE__ */ jsx("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center font-bold text-green-700", children: "O(1)" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 text-[10px] text-gray-500 text-center", children: "* amortized | ** if you have the node reference" })
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Doubly-Linked List" }),
               /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-lg p-4 overflow-x-auto", children: nodes.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 min-w-max", children: [
@@ -5223,7 +5386,7 @@ const LinkedListVisualizerComponent = ({
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: `flex flex-col items-center transition-all ${node.id === highlightNode ? "scale-110" : ""}`,
+                      className: `flex flex-col items-center transition-colors ${node.id === highlightNode ? "scale-110" : ""}`,
                       children: [
                         /* @__PURE__ */ jsx(
                           "div",
@@ -6466,7 +6629,7 @@ const ArrayDequeVisualizerComponent = ({
     const isTail = index === tail;
     const isHighlighted = index === highlightIndex;
     const hasValue = array[index] !== null;
-    let baseStyle = "border-2 transition-all duration-200 ";
+    let baseStyle = "border-2 transition-colors duration-200 ";
     if (resizing) {
       baseStyle += "bg-yellow-100 border-yellow-400 ";
     } else if (isHighlighted) {
@@ -8335,6 +8498,25 @@ const ConcurrentHashMapVisualizerComponent = ({ showControls = true, showCode =
         ] }) }),
         /* @__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: 350, children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-red-50 to-orange-50 rounded-xl border-2 border-red-200", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-red-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg", children: "⚡" }),
+                " Why ConcurrentHashMap?"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-red-100 p-2 rounded-lg border border-red-300", children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-bold text-red-700", children: "synchronized HashMap" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-red-600", children: "❌ Single lock for entire map" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] text-red-500", children: "All threads wait for one lock" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300", children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-bold text-green-700", children: "ConcurrentHashMap" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-green-600", children: "✓ Segment-level locking" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] text-green-500", children: "Threads work in parallel on different segments" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 text-[10px] text-gray-600 text-center", children: "get() never blocks • put() only locks one segment • Much better concurrency!" })
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Segments (independent locks)" }),
               /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: segments.map((seg, idx) => /* @__PURE__ */ jsxs(
@@ -8685,13 +8867,39 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
         ] }) }) }),
         /* @__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: 350, children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-cyan-50 to-blue-50 rounded-xl border-2 border-cyan-200", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-cyan-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg", children: "🔄" }),
+                " Producer-Consumer Pattern"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2 text-xs", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-bold text-green-700", children: "Producers" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-green-600", children: "put() → queue" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] text-green-500", children: "Block if FULL" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-gray-100 p-2 rounded-lg border border-gray-300 text-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-bold text-gray-700", children: "BlockingQueue" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-gray-600", children: "Thread-safe buffer" }),
+                  /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-gray-500", children: [
+                    "Capacity: ",
+                    capacity
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-bold text-blue-700", children: "Consumers" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: "take() ← queue" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] text-blue-500", children: "Block if EMPTY" })
+                ] })
+              ] })
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                 /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 mb-2 text-center", children: "Producers" }),
                 /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: ["P1", "P2"].map((p) => /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: `px-3 py-2 rounded-lg text-center text-sm font-medium transition-all ${activeThread === p ? "bg-green-500 text-white scale-105" : blockedProducers.includes(p) ? "bg-red-100 text-red-700 border-2 border-red-300" : "bg-green-100 text-green-700"}`,
+                    className: `px-3 py-2 rounded-lg text-center text-sm font-medium transition-colors ${activeThread === p ? "bg-green-500 text-white" : blockedProducers.includes(p) ? "bg-red-100 text-red-700 border-2 border-red-300" : "bg-green-100 text-green-700"}`,
                     children: [
                       p,
                       blockedProducers.includes(p) && /* @__PURE__ */ jsx("span", { className: "block text-[10px]", children: "BLOCKED" })
@@ -8712,7 +8920,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
                   /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: queue.length > 0 ? queue.map((item, idx) => /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `px-2 py-1.5 bg-white rounded border text-xs font-medium text-center transition-all ${idx === 0 ? "border-blue-300 bg-blue-50" : "border-gray-200"}`,
+                      className: `px-2 py-1.5 bg-white rounded border text-xs font-medium text-center transition-colors ${idx === 0 ? "border-blue-300 bg-blue-50" : "border-gray-200"}`,
                       children: item.value
                     },
                     item.id
@@ -8720,7 +8928,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
                   /* @__PURE__ */ jsx("div", { className: "mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `h-full transition-all ${queue.length === capacity ? "bg-red-500" : "bg-cyan-500"}`,
+                      className: `h-full transition-colors ${queue.length === capacity ? "bg-red-500" : "bg-cyan-500"}`,
                       style: { width: `${queue.length / capacity * 100}%` }
                     }
                   ) })
@@ -8731,7 +8939,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
                 /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: ["C1", "C2"].map((c) => /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: `px-3 py-2 rounded-lg text-center text-sm font-medium transition-all ${activeThread === c ? "bg-blue-500 text-white scale-105" : blockedConsumers.includes(c) ? "bg-red-100 text-red-700 border-2 border-red-300" : "bg-blue-100 text-blue-700"}`,
+                    className: `px-3 py-2 rounded-lg text-center text-sm font-medium transition-colors ${activeThread === c ? "bg-blue-500 text-white" : blockedConsumers.includes(c) ? "bg-red-100 text-red-700 border-2 border-red-300" : "bg-blue-100 text-blue-700"}`,
                     children: [
                       c,
                       blockedConsumers.includes(c) && /* @__PURE__ */ jsx("span", { className: "block text-[10px]", children: "BLOCKED" })
@@ -9015,7 +9223,7 @@ const CopyOnWriteVisualizerComponent = ({
     /* @__PURE__ */ jsx("div", { className: "flex justify-center gap-1", children: arr.map((item, idx) => /* @__PURE__ */ jsx(
       "div",
       {
-        className: `w-10 h-10 flex items-center justify-center rounded border-2 font-medium transition-all ${isNew && idx === highlightIndex ? "bg-green-500 border-green-600 text-white scale-110" : isNew ? "bg-green-100 border-green-300 text-green-700" : "bg-gray-100 border-gray-300 text-gray-700"}`,
+        className: `w-10 h-10 flex items-center justify-center rounded border-2 font-medium transition-colors ${isNew && idx === highlightIndex ? "bg-green-500 border-green-600 text-white" : isNew ? "bg-green-100 border-green-300 text-green-700" : "bg-gray-100 border-gray-300 text-gray-700"}`,
         children: item
       },
       idx
@@ -9056,6 +9264,25 @@ const CopyOnWriteVisualizerComponent = ({
         ] }) }),
         /* @__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: 350, children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-lime-50 to-green-50 rounded-xl border-2 border-lime-200", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-lime-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg", children: "📋" }),
+                " Copy-on-Write Pattern"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-bold text-blue-700", children: "Read (get)" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-2xl text-blue-600", children: "O(1)" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] text-blue-500", children: "No lock, no copy" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-orange-100 p-2 rounded-lg border border-orange-300 text-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-bold text-orange-700", children: "Write (add/set)" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-2xl text-orange-600", children: "O(n)" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] text-orange-500", children: "Full array copy" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 text-[10px] text-gray-600 text-center", children: "Best for: Read-heavy, rarely-modified collections • Iterators never throw ConcurrentModificationException" })
+            ] }),
             /* @__PURE__ */ jsx("div", { className: "mb-4 p-4 bg-gray-50 rounded-lg", children: showCopy ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
               renderArray(oldArray, "Old Array (readers use this)"),
               /* @__PURE__ */ jsx("div", { className: "text-2xl text-gray-400", children: "→" }),
@@ -9333,7 +9560,7 @@ const ImmutableCollectionsVisualizerComponent = ({ showControls = true, showCode
                   original.map((item, idx) => /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `w-12 h-12 flex items-center justify-center rounded-lg border-2 font-bold transition-all ${error ? "bg-red-100 border-red-300 text-red-700 animate-pulse" : "bg-violet-100 border-violet-300 text-violet-700"}`,
+                      className: `w-12 h-12 flex items-center justify-center rounded-lg border-2 font-bold transition-colors ${error ? "bg-red-100 border-red-300 text-red-700 animate-pulse" : "bg-violet-100 border-violet-300 text-violet-700"}`,
                       children: item
                     },
                     idx
@@ -9766,14 +9993,14 @@ const GCVisualizerComponent = ({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute inset-y-0 left-0 bg-opacity-30 bg-gray-500 transition-all duration-300",
+            className: "absolute inset-y-0 left-0 bg-opacity-30 bg-gray-500 transition-[width] duration-300",
             style: { width: `${fillPercent}%` }
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-wrap items-center gap-1 p-1", children: genObjects.map((obj) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: `px-1.5 py-0.5 text-[9px] font-medium rounded transition-all duration-200 ${getObjectStyle(obj)}`,
+            className: `px-1.5 py-0.5 text-[9px] font-medium rounded transition-colors duration-200 ${getObjectStyle(obj)}`,
             title: `${obj.id} (age: ${obj.age}, ${obj.reachable ? "reachable" : "garbage"})`,
             children: [
               obj.id.replace("obj", ""),
@@ -9831,6 +10058,28 @@ const GCVisualizerComponent = ({
         ] }) }),
         /* @__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-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl border-2 border-purple-200", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-purple-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg", children: "🧬" }),
+                " Generational Hypothesis"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-purple-200", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-center text-purple-700 font-bold mb-2", children: '"Most objects die young"' }),
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 text-center", children: "~95% of objects become garbage before first GC • Optimize for the common case" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-bold text-blue-700", children: "Young Gen" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: "Fast copy collection" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] text-blue-500", children: "Minor GC (frequent)" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-amber-100 p-2 rounded-lg border border-amber-300 text-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-bold text-amber-700", children: "Old Gen" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-amber-600", children: "Mark-sweep collection" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] text-amber-500", children: "Major GC (rare, slow)" })
+                ] })
+              ] })
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "JVM Heap Memory" }),
               /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: [