@tomaszjarosz/react-visualizers 0.2.4 → 0.2.10

package/dist/index.cjs

@@ -1496,11 +1496,64 @@ const BinarySearchVisualizerComponent = ({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-green-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🎯" }),
+                " Binary Search Invariant"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-green-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-green-700 font-bold mb-2", children: "target ∈ arr[left..right]" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 text-center", children: "If target exists, it must be within current search bounds" })
+              ] }),
+              left <= right && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 p-2 bg-white rounded-lg border border-green-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-xs", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-green-700", children: "Search space:" }),
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+                      "[",
+                      left,
+                      "..",
+                      right,
+                      "]"
+                    ] }),
+                    " = ",
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-green-600", children: right - left + 1 }),
+                    " elements"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500", children: currentStep > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    "Eliminated: ",
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold text-red-500", children: [
+                      Math.round((1 - (right - left + 1) / array.length) * 100),
+                      "%"
+                    ] })
+                  ] }) })
+                ] }),
+                mid >= 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 text-xs text-center text-gray-600", children: [
+                  "mid = ⌊(",
+                  left,
+                  " + ",
+                  right,
+                  ") / 2⌋ = ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-purple-600", children: mid })
+                ] })
+              ] }),
+              found === true && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 p-2 bg-green-100 rounded-lg border border-green-300 text-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-3 p-2 bg-red-100 rounded-lg border border-red-300 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-800 font-bold", children: "✗ Not found - search space exhausted" }) })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-1 flex-wrap mb-4", children: array.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
               /* @__PURE__ */ jsxRuntime.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
                 }
               ),
@@ -2371,7 +2424,7 @@ const SortingVisualizerComponent = ({
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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)}%`,
@@ -2831,7 +2884,7 @@ const SortingComparisonVisualizerComponent = ({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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)}%`,
@@ -4142,6 +4195,25 @@ const GraphVisualizerComponent = ({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 400, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-purple-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🔍" }),
+                " DFS vs BFS"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-2 rounded-lg border ${algorithm === "dfs" ? "bg-purple-100 border-purple-300" : "bg-gray-100 border-gray-300"}`, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-purple-700", children: "Depth-First (DFS)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-purple-600", children: "Uses: Stack" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-purple-500", children: "Go deep before wide" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-2 rounded-lg border ${algorithm === "bfs" ? "bg-indigo-100 border-indigo-300" : "bg-gray-100 border-gray-300"}`, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-indigo-700", children: "Breadth-First (BFS)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-indigo-600", children: "Uses: Queue" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-indigo-500", children: "Level by level" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 400 300", className: "w-full h-64", children: [
                 graph.edges.map((edge, index) => {
@@ -4166,7 +4238,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__ */ jsxRuntime.jsx(
@@ -4499,6 +4571,40 @@ const HashMapVisualizerComponent = ({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, className: showCode ? "flex-1" : "w-full", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-indigo-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "#️⃣" }),
+                " Hash Function"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-indigo-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-indigo-700 font-bold mb-2", children: "index = hashCode(key) % capacity" }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-3 p-3 bg-white rounded-lg border border-indigo-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono mb-1", children: [
+                  "hashCode(",
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-indigo-600 font-bold", children: [
+                    '"',
+                    stepData.key,
+                    '"'
+                  ] }),
+                  ") = ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 font-bold", children: stepData.hash })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600", children: stepData.hash }),
+                  " % ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: BUCKET_COUNT$1 }),
+                  " = ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-indigo-600 font-bold text-lg", children: stepData.bucketIndex })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 text-indigo-600 text-lg", children: [
+                  "↓ bucket[",
+                  stepData.bucketIndex,
+                  "]"
+                ] })
+              ] }) })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
                 "Bucket Array (capacity: ",
@@ -4529,22 +4635,6 @@ const HashMapVisualizerComponent = ({
                 ] }, eIdx)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-gray-400 mt-1", children: "∅" }) })
               ] }, idx)) })
             ] }),
-            stepData.hash !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-600", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Hash Calculation:" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 font-mono text-indigo-600", children: [
-                'hashCode("',
-                stepData.key,
-                '") = ',
-                stepData.hash
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-purple-600", children: [
-                stepData.hash,
-                " % ",
-                BUCKET_COUNT$1,
-                " = ",
-                stepData.bucketIndex
-              ] })
-            ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               StatusPanel,
               {
@@ -5217,6 +5307,27 @@ const LinkedListVisualizerComponent = ({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, className: showCode ? "flex-1" : "w-full", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-blue-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🔗" }),
+                " LinkedList vs ArrayList"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-2 text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white p-2 rounded-lg border border-blue-200 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-gray-700 mb-1", children: "Operation" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-blue-700 mb-1", children: "LinkedList" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-orange-100 p-2 rounded-lg border border-orange-300 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-orange-700 mb-1", children: "ArrayList" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "add/remove (ends)" }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "add/remove (middle)" }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "bg-white p-2 rounded-lg border border-gray-200 text-center font-medium", children: "get(index)" }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-2 text-[10px] text-gray-500 text-center", children: "* amortized | ** if you have the node reference" })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Doubly-Linked List" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50 rounded-lg p-4 overflow-x-auto", children: nodes.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 min-w-max", children: [
@@ -5225,7 +5336,7 @@ const LinkedListVisualizerComponent = ({
                   /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                           "div",
@@ -5601,6 +5712,7 @@ const LinkedHashMapVisualizerComponent = ({
   });
   const stepData = currentStepData || {
     operation: "init",
+    key: "",
     buckets: [],
     linkedOrder: [],
     description: ""
@@ -5681,9 +5793,30 @@ const LinkedHashMapVisualizerComponent = ({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 400, className: showCode ? "flex-1" : "w-full", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 p-2 bg-amber-50 rounded text-xs text-amber-700", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Dual structure:" }),
-              " Hash table (O(1) lookup) + Doubly-linked list (ordered iteration)"
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl border-2 border-orange-200", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-orange-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🔗" }),
+                " LinkedHashMap = HashMap + LinkedList"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-3 rounded-lg border border-orange-200", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold text-gray-700 mb-1", children: "🗂️ Hash Table" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-gray-500", children: "O(1) get/put • Same as HashMap" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-3 rounded-lg border border-orange-200", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold text-gray-700 mb-1", children: "🔗 Doubly Linked List" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[10px] text-gray-500", children: [
+                    accessOrder ? "Access order (LRU cache)" : "Insertion order",
+                    " • O(1) reorder"
+                  ] })
+                ] })
+              ] }),
+              stepData.operation === "access" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 p-2 bg-orange-100 rounded-lg border border-orange-300", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-center text-orange-800", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: "LRU Update:" }),
+                ' Entry "',
+                stepData.key,
+                '" moved to end of list (most recently used)'
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
@@ -5715,22 +5848,31 @@ const LinkedHashMapVisualizerComponent = ({
                 ] }, eIdx)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-gray-400 mt-1", children: "∅" }) })
               ] }, idx)) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: accessOrder ? "Access Order (LRU: oldest → newest)" : "Insertion Order" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1", children: linkedOrder.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-500", children: "HEAD →" }),
-                linkedOrder.map((key, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-                  idx > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-orange-400", children: "→" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: `px-2 py-0.5 text-xs font-medium rounded transition-all ${getLinkedNodeStyle(key)}`,
-                      children: key
-                    }
-                  )
-                ] }, key)),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-500", children: "→ TAIL" })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 italic", children: "Empty list" }) })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-gradient-to-r from-orange-100 to-amber-100 rounded-xl border-2 border-orange-300", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-orange-800 mb-2 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "🔗" }),
+                " ",
+                accessOrder ? "Access Order (LRU: oldest → newest)" : "Insertion Order"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg p-3 border border-orange-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1", children: linkedOrder.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1 bg-gray-100 text-[10px] text-gray-600 rounded font-semibold", children: "HEAD" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-orange-400 font-bold", children: "→" }),
+                  linkedOrder.map((key, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+                    idx > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-orange-400 font-bold", children: "⇄" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: `px-3 py-1 text-xs font-bold rounded-full transition-colors ${getLinkedNodeStyle(key)}`,
+                        children: key
+                      }
+                    )
+                  ] }, key)),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-orange-400 font-bold", children: "→" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1 bg-gray-100 text-[10px] text-gray-600 rounded font-semibold", children: "TAIL" })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 italic", children: "HEAD → TAIL (empty)" }) }),
+                linkedOrder.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 pt-2 border-t border-orange-200 text-[10px] text-gray-500 text-center", children: "Doubly linked: each entry has prev/next pointers" })
+              ] })
             ] }),
             accessOrder && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-blue-700", children: [
               /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "LRU Cache Usage:" }),
@@ -6437,7 +6579,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) {
@@ -6977,6 +7119,59 @@ const TreeSetVisualizerComponent = ({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 400, className: showCode ? "flex-1" : "w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-emerald-50 to-teal-50 rounded-xl border-2 border-emerald-200", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-emerald-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🌳" }),
+                " Binary Search Tree Property"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-emerald-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-emerald-700 font-bold text-base mb-2", children: [
+                  "left < ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-800", children: "node" }),
+                  " < right"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 text-center", children: "All values in left subtree are smaller • All values in right subtree are larger" })
+              ] }),
+              currentStepData.operation === "add" && currentStepData.value !== void 0 && currentNode !== void 0 && currentNode !== currentStepData.value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-emerald-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-emerald-700", children: "Comparing:" }),
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+                  currentStepData.value,
+                  " ",
+                  currentStepData.value < currentNode ? "<" : ">",
+                  " ",
+                  currentNode
+                ] }),
+                " → ",
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `font-bold ${currentStepData.value < currentNode ? "text-blue-600" : "text-orange-600"}`, children: [
+                  "Go ",
+                  currentStepData.value < currentNode ? "LEFT" : "RIGHT"
+                ] })
+              ] }) }),
+              currentStepData.operation === "contains" && currentStepData.value !== void 0 && currentNode !== void 0 && !found && path.length > 0 && path[path.length - 1] !== currentStepData.value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-emerald-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-emerald-700", children: "Comparing:" }),
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+                  currentStepData.value,
+                  " ",
+                  currentStepData.value < currentNode ? "<" : ">",
+                  " ",
+                  currentNode
+                ] }),
+                " → ",
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `font-bold ${currentStepData.value < currentNode ? "text-blue-600" : "text-orange-600"}`, children: [
+                  "Go ",
+                  currentStepData.value < currentNode ? "LEFT" : "RIGHT"
+                ] })
+              ] }) }),
+              found === true && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 p-2 bg-green-100 rounded-lg border border-green-300", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-center text-green-800 font-bold", children: [
+                "✓ Found! ",
+                currentStepData.value,
+                " == ",
+                currentNode
+              ] }) }),
+              found === false && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 p-2 bg-red-100 rounded-lg border border-red-300", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-center text-red-800 font-bold", children: "✗ Not found! Reached null (no more children to check)" }) })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Binary Search Tree" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50 rounded-lg p-2 overflow-x-auto", children: tree ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "300", height: "250", className: "mx-auto", children: renderTree(tree) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-32 flex items-center justify-center text-gray-400 text-sm", children: "Empty tree" }) })
@@ -7440,6 +7635,7 @@ const HEAP_CODE = [
 const LEGEND_ITEMS$6 = [
   { color: "bg-purple-100", label: "Root (min)", border: "#c4b5fd" },
   { color: "bg-purple-500", label: "Active" },
+  { color: "bg-purple-200", label: "Sift Path", border: "#a78bfa" },
   { color: "bg-yellow-300", label: "Comparing" },
   { color: "bg-green-400", label: "Swapped" }
 ];
@@ -7456,6 +7652,15 @@ function generateHeapSteps() {
     if (op === "offer" && value !== void 0) {
       heap.push(value);
       let idx = heap.length - 1;
+      const getPathToRoot = (index) => {
+        const path = [index];
+        let i = index;
+        while (i > 0) {
+          i = Math.floor((i - 1) / 2);
+          path.push(i);
+        }
+        return path;
+      };
       steps.push({
         operation: "offer",
         value,
@@ -7463,7 +7668,9 @@ function generateHeapSteps() {
         description: `offer(${value}): Add to end of heap at index ${idx}`,
         codeLine: 1,
         variables: { value, index: idx },
-        highlightIndex: idx
+        highlightIndex: idx,
+        siftPath: getPathToRoot(idx),
+        currentIndex: idx
       });
       while (idx > 0) {
         const parentIdx = Math.floor((idx - 1) / 2);
@@ -7478,7 +7685,9 @@ function generateHeapSteps() {
             child: heap[idx],
             parentVal: heap[parentIdx]
           },
-          compareIndices: [idx, parentIdx]
+          compareIndices: [idx, parentIdx],
+          siftPath: getPathToRoot(idx),
+          currentIndex: idx
         });
         if (heap[idx] < heap[parentIdx]) {
           [heap[idx], heap[parentIdx]] = [heap[parentIdx], heap[idx]];
@@ -7489,7 +7698,9 @@ function generateHeapSteps() {
             codeLine: 8,
             variables: { swapped: heap[parentIdx], index: parentIdx },
             swapIndices: [idx, parentIdx],
-            highlightIndex: parentIdx
+            highlightIndex: parentIdx,
+            siftPath: getPathToRoot(parentIdx),
+            currentIndex: parentIdx
           });
           idx = parentIdx;
         } else {
@@ -7499,7 +7710,9 @@ function generateHeapSteps() {
             description: `siftUp: ${heap[idx]} >= ${heap[parentIdx]}, heap property satisfied!`,
             codeLine: 7,
             variables: { index: idx },
-            highlightIndex: idx
+            highlightIndex: idx,
+            siftPath: getPathToRoot(idx),
+            currentIndex: idx
           });
           break;
         }
@@ -7509,6 +7722,21 @@ function generateHeapSteps() {
       const removed = heap[0];
       const last = heap.pop();
       if (last === void 0) continue;
+      const getPathToLeaf = (heapSize, startIdx) => {
+        const path = [startIdx];
+        let i = startIdx;
+        while (2 * i + 1 < heapSize) {
+          const left = 2 * i + 1;
+          const right = 2 * i + 2;
+          if (right < heapSize) {
+            path.push(left, right);
+          } else {
+            path.push(left);
+          }
+          i = left;
+        }
+        return path;
+      };
       if (heap.length === 0) {
         steps.push({
           operation: "poll",
@@ -7528,7 +7756,9 @@ function generateHeapSteps() {
         description: `poll(): Remove min ${removed}, move last element ${last} to root`,
         codeLine: 13,
         variables: { removed, moved: last },
-        highlightIndex: 0
+        highlightIndex: 0,
+        siftPath: getPathToLeaf(heap.length, 0),
+        currentIndex: 0
       });
       let idx = 0;
       while (true) {
@@ -7548,7 +7778,8 @@ function generateHeapSteps() {
             description: `siftDown: ${heap[idx]} is smaller than children, heap property satisfied!`,
             codeLine: 14,
             variables: { index: idx, value: heap[idx] },
-            highlightIndex: idx
+            highlightIndex: idx,
+            currentIndex: idx
           });
           break;
         }
@@ -7562,7 +7793,9 @@ function generateHeapSteps() {
             child: heap[smallestIdx],
             childIdx: smallestIdx
           },
-          compareIndices: [idx, smallestIdx]
+          compareIndices: [idx, smallestIdx],
+          siftPath: [idx, leftIdx < heap.length ? leftIdx : -1, rightIdx < heap.length ? rightIdx : -1].filter((i) => i >= 0),
+          currentIndex: idx
         });
         [heap[idx], heap[smallestIdx]] = [heap[smallestIdx], heap[idx]];
         steps.push({
@@ -7572,7 +7805,8 @@ function generateHeapSteps() {
           codeLine: 14,
           variables: { index: smallestIdx },
           swapIndices: [idx, smallestIdx],
-          highlightIndex: smallestIdx
+          highlightIndex: smallestIdx,
+          currentIndex: smallestIdx
         });
         idx = smallestIdx;
       }
@@ -7698,7 +7932,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
     heap: [],
     description: ""
   };
-  const { heap, highlightIndex, swapIndices, compareIndices, description } = currentStepData;
+  const { heap, highlightIndex, swapIndices, compareIndices, description, siftPath, currentIndex } = currentStepData;
   const positions = getTreePositions(heap.length);
   const getNodeStyle = (idx) => {
     if (idx === highlightIndex) {
@@ -7710,11 +7944,25 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
     if (compareIndices == null ? void 0 : compareIndices.includes(idx)) {
       return "fill-yellow-300 stroke-yellow-400";
     }
+    if ((siftPath == null ? void 0 : siftPath.includes(idx)) && idx !== currentIndex) {
+      return "fill-purple-200 stroke-purple-400";
+    }
     if (idx === 0) {
       return "fill-purple-100 stroke-purple-300";
     }
     return "fill-white stroke-gray-300";
   };
+  const isEdgeOnPath = (parentIdx, childIdx) => {
+    if (!siftPath || siftPath.length < 2) return false;
+    for (let i = 0; i < siftPath.length - 1; i++) {
+      const a = siftPath[i];
+      const b = siftPath[i + 1];
+      if (a === parentIdx && b === childIdx || a === childIdx && b === parentIdx) {
+        return true;
+      }
+    }
+    return false;
+  };
   const getTextColor = (idx) => {
     if (idx === highlightIndex || (swapIndices == null ? void 0 : swapIndices.includes(idx))) {
       return "white";
@@ -7735,6 +7983,49 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
         ] }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 400, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-purple-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🏔️" }),
+                " Min-Heap Property"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-purple-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-purple-700 font-bold mb-2", children: "heap[parent] ≤ heap[children]" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs text-gray-600", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-purple-50 p-2 rounded text-center", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "parent(i)" }),
+                    " = ⌊(i-1)/2⌋"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-purple-50 p-2 rounded text-center", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "left(i)" }),
+                    " = 2i + 1"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-purple-50 p-2 rounded text-center", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "right(i)" }),
+                    " = 2i + 2"
+                  ] })
+                ] })
+              ] }),
+              currentIndex !== void 0 && currentIndex >= 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-purple-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-600 text-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-purple-700", children: [
+                  "Current: i = ",
+                  currentIndex
+                ] }),
+                currentIndex > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mx-2", children: [
+                  "→ parent(",
+                  currentIndex,
+                  ") = ⌊(",
+                  currentIndex,
+                  "-1)/2⌋ = ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 font-bold", children: Math.floor((currentIndex - 1) / 2) })
+                ] }),
+                2 * currentIndex + 1 < heap.length && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mx-2", children: [
+                  "→ left(",
+                  currentIndex,
+                  ") = ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 font-bold", children: 2 * currentIndex + 1 })
+                ] })
+              ] }) })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Binary Heap Structure" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50 rounded-lg p-2 overflow-x-auto", children: heap.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7751,6 +8042,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
                       const childPos = positions[idx];
                       if (!parentPos || !childPos) return null;
                       const isHighlighted = (compareIndices == null ? void 0 : compareIndices.includes(idx)) && (compareIndices == null ? void 0 : compareIndices.includes(parentIdx)) || (swapIndices == null ? void 0 : swapIndices.includes(idx)) && (swapIndices == null ? void 0 : swapIndices.includes(parentIdx));
+                      const isOnPath = isEdgeOnPath(parentIdx, idx);
                       return /* @__PURE__ */ jsxRuntime.jsx(
                         "line",
                         {
@@ -7758,8 +8050,9 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
                           y1: parentPos.y,
                           x2: childPos.x,
                           y2: childPos.y,
-                          stroke: isHighlighted ? "#a855f7" : "#d1d5db",
-                          strokeWidth: isHighlighted ? 2 : 1
+                          stroke: isHighlighted ? "#a855f7" : isOnPath ? "#c4b5fd" : "#d1d5db",
+                          strokeWidth: isHighlighted ? 3 : isOnPath ? 2 : 1,
+                          strokeDasharray: isOnPath && !isHighlighted ? "4,2" : void 0
                         },
                         `edge-${idx}`
                       );
@@ -7776,7 +8069,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
                               "circle",
                               {
                                 r: "18",
-                                className: `${getNodeStyle(idx)} stroke-2 transition-all`
+                                className: `${getNodeStyle(idx)} stroke-2 transition-colors`
                               }
                             ),
                             /* @__PURE__ */ jsxRuntime.jsx(
@@ -8155,6 +8448,25 @@ const ConcurrentHashMapVisualizerComponent = ({ showControls = true, showCode =
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-red-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "⚡" }),
+                " Why ConcurrentHashMap?"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-red-100 p-2 rounded-lg border border-red-300", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-red-700", children: "synchronized HashMap" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-red-600", children: "❌ Single lock for entire map" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-red-500", children: "All threads wait for one lock" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-green-700", children: "ConcurrentHashMap" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-green-600", children: "✓ Segment-level locking" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-green-500", children: "Threads work in parallel on different segments" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Segments (independent locks)" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: segments.map((seg, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8505,13 +8817,39 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
         ] }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-cyan-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🔄" }),
+                " Producer-Consumer Pattern"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-2 text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-green-100 p-2 rounded-lg border border-green-300 text-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-green-700", children: "Producers" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-green-600", children: "put() → queue" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-green-500", children: "Block if FULL" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gray-100 p-2 rounded-lg border border-gray-300 text-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-gray-700", children: "BlockingQueue" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: "Thread-safe buffer" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[10px] text-gray-500", children: [
+                    "Capacity: ",
+                    capacity
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-blue-700", children: "Consumers" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: "take() ← queue" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-blue-500", children: "Block if EMPTY" })
+                ] })
+              ] })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 mb-2 text-center", children: "Producers" }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: ["P1", "P2"].map((p) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "block text-[10px]", children: "BLOCKED" })
@@ -8532,7 +8870,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: queue.length > 0 ? queue.map((item, idx) => /* @__PURE__ */ jsxRuntime.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
@@ -8540,7 +8878,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.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}%` }
                     }
                   ) })
@@ -8551,7 +8889,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: ["C1", "C2"].map((c) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "block text-[10px]", children: "BLOCKED" })
@@ -8835,7 +9173,7 @@ const CopyOnWriteVisualizerComponent = ({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center gap-1", children: arr.map((item, idx) => /* @__PURE__ */ jsxRuntime.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
@@ -8876,6 +9214,25 @@ const CopyOnWriteVisualizerComponent = ({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 350, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-lime-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "📋" }),
+                " Copy-on-Write Pattern"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-blue-700", children: "Read (get)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl text-blue-600", children: "O(1)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-blue-500", children: "No lock, no copy" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-orange-100 p-2 rounded-lg border border-orange-300 text-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-orange-700", children: "Write (add/set)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl text-orange-600", children: "O(n)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-orange-500", children: "Full array copy" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mb-4 p-4 bg-gray-50 rounded-lg", children: showCopy ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
               renderArray(oldArray, "Old Array (readers use this)"),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl text-gray-400", children: "→" }),
@@ -9153,7 +9510,7 @@ const ImmutableCollectionsVisualizerComponent = ({ showControls = true, showCode
                   original.map((item, idx) => /* @__PURE__ */ jsxRuntime.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
@@ -9586,14 +9943,14 @@ const GCVisualizerComponent = ({
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-wrap items-center gap-1 p-1", children: genObjects.map((obj) => /* @__PURE__ */ jsxRuntime.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", ""),
@@ -9651,6 +10008,28 @@ const GCVisualizerComponent = ({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 400, className: showCode ? "flex-1" : "w-full", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-purple-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "🧬" }),
+                " Generational Hypothesis"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-purple-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-purple-700 font-bold mb-2", children: '"Most objects die young"' }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-blue-100 p-2 rounded-lg border border-blue-300 text-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-blue-700", children: "Young Gen" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: "Fast copy collection" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-blue-500", children: "Minor GC (frequent)" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-amber-100 p-2 rounded-lg border border-amber-300 text-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-amber-700", children: "Old Gen" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-amber-600", children: "Mark-sweep collection" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-amber-500", children: "Major GC (rare, slow)" })
+                ] })
+              ] })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "JVM Heap Memory" }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: [