@tomaszjarosz/react-visualizers 0.2.3 → 0.2.7

package/dist/index.js

@@ -5599,6 +5599,7 @@ const LinkedHashMapVisualizerComponent = ({
   });
   const stepData = currentStepData || {
     operation: "init",
+    key: "",
     buckets: [],
     linkedOrder: [],
     description: ""
@@ -5679,9 +5680,30 @@ const LinkedHashMapVisualizerComponent = ({
         ] }) }),
         /* @__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-3 p-2 bg-amber-50 rounded text-xs text-amber-700", children: [
-              /* @__PURE__ */ jsx("strong", { children: "Dual structure:" }),
-              " Hash table (O(1) lookup) + Doubly-linked list (ordered iteration)"
+            /* @__PURE__ */ 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__ */ jsxs("div", { className: "text-sm font-bold text-orange-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg", children: "🔗" }),
+                " LinkedHashMap = HashMap + LinkedList"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-white p-3 rounded-lg border border-orange-200", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-gray-700 mb-1", children: "🗂️ Hash Table" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-500", children: "O(1) get/put • Same as HashMap" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-white p-3 rounded-lg border border-orange-200", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-gray-700 mb-1", children: "🔗 Doubly Linked List" }),
+                  /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-gray-500", children: [
+                    accessOrder ? "Access order (LRU cache)" : "Insertion order",
+                    " • O(1) reorder"
+                  ] })
+                ] })
+              ] }),
+              stepData.operation === "access" && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-orange-100 rounded-lg border border-orange-300", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-center text-orange-800", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-bold", children: "LRU Update:" }),
+                ' Entry "',
+                stepData.key,
+                '" moved to end of list (most recently used)'
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
@@ -5713,22 +5735,31 @@ const LinkedHashMapVisualizerComponent = ({
                 ] }, eIdx)) : /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-400 mt-1", children: "∅" }) })
               ] }, idx)) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: accessOrder ? "Access Order (LRU: oldest → newest)" : "Insertion Order" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1", children: linkedOrder.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-500", children: "HEAD →" }),
-                linkedOrder.map((key, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                  idx > 0 && /* @__PURE__ */ jsx("span", { className: "text-orange-400", children: "→" }),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: `px-2 py-0.5 text-xs font-medium rounded transition-all ${getLinkedNodeStyle(key)}`,
-                      children: key
-                    }
-                  )
-                ] }, key)),
-                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-500", children: "→ TAIL" })
-              ] }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 italic", children: "Empty list" }) })
+            /* @__PURE__ */ 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__ */ jsxs("div", { className: "text-sm font-semibold text-orange-800 mb-2 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { children: "🔗" }),
+                " ",
+                accessOrder ? "Access Order (LRU: oldest → newest)" : "Insertion Order"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg p-3 border border-orange-200", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1", children: linkedOrder.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "px-2 py-1 bg-gray-100 text-[10px] text-gray-600 rounded font-semibold", children: "HEAD" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-orange-400 font-bold", children: "→" }),
+                  linkedOrder.map((key, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                    idx > 0 && /* @__PURE__ */ jsx("span", { className: "text-orange-400 font-bold", children: "⇄" }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: `px-3 py-1 text-xs font-bold rounded-full transition-colors ${getLinkedNodeStyle(key)}`,
+                        children: key
+                      }
+                    )
+                  ] }, key)),
+                  /* @__PURE__ */ jsx("span", { className: "text-orange-400 font-bold", children: "→" }),
+                  /* @__PURE__ */ jsx("div", { className: "px-2 py-1 bg-gray-100 text-[10px] text-gray-600 rounded font-semibold", children: "TAIL" })
+                ] }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 italic", children: "HEAD → TAIL (empty)" }) }),
+                linkedOrder.length > 0 && /* @__PURE__ */ 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__ */ jsx("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-blue-700", children: [
               /* @__PURE__ */ jsx("strong", { children: "LRU Cache Usage:" }),
@@ -6975,6 +7006,59 @@ const TreeSetVisualizerComponent = ({
         ] }) }),
         /* @__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-emerald-50 to-teal-50 rounded-xl border-2 border-emerald-200", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-emerald-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg", children: "🌳" }),
+                " Binary Search Tree Property"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-emerald-200", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-center text-emerald-700 font-bold text-base mb-2", children: [
+                  "left < ",
+                  /* @__PURE__ */ jsx("span", { className: "text-gray-800", children: "node" }),
+                  " < right"
+                ] }),
+                /* @__PURE__ */ 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__ */ jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-emerald-200", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-center", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold text-emerald-700", children: "Comparing:" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+                  currentStepData.value,
+                  " ",
+                  currentStepData.value < currentNode ? "<" : ">",
+                  " ",
+                  currentNode
+                ] }),
+                " → ",
+                /* @__PURE__ */ 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__ */ jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-emerald-200", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-center", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold text-emerald-700", children: "Comparing:" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+                  currentStepData.value,
+                  " ",
+                  currentStepData.value < currentNode ? "<" : ">",
+                  " ",
+                  currentNode
+                ] }),
+                " → ",
+                /* @__PURE__ */ jsxs("span", { className: `font-bold ${currentStepData.value < currentNode ? "text-blue-600" : "text-orange-600"}`, children: [
+                  "Go ",
+                  currentStepData.value < currentNode ? "LEFT" : "RIGHT"
+                ] })
+              ] }) }),
+              found === true && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-green-100 rounded-lg border border-green-300", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-center text-green-800 font-bold", children: [
+                "✓ Found! ",
+                currentStepData.value,
+                " == ",
+                currentNode
+              ] }) }),
+              found === false && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-red-100 rounded-lg border border-red-300", children: /* @__PURE__ */ jsx("div", { className: "text-xs text-center text-red-800 font-bold", children: "✗ Not found! Reached null (no more children to check)" }) })
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Binary Search Tree" }),
               /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-lg p-2 overflow-x-auto", children: tree ? /* @__PURE__ */ jsx("svg", { width: "300", height: "250", className: "mx-auto", children: renderTree(tree) }) : /* @__PURE__ */ jsx("div", { className: "h-32 flex items-center justify-center text-gray-400 text-sm", children: "Empty tree" }) })
@@ -7274,7 +7358,7 @@ const EnumSetVisualizerComponent = ({
                       /* @__PURE__ */ jsxs(
                         "div",
                         {
-                          className: `w-14 h-10 flex flex-col items-center justify-center text-xs font-medium rounded transition-all duration-200 ${getBitStyle(idx)}`,
+                          className: `w-14 h-10 flex flex-col items-center justify-center text-xs font-medium rounded transition-colors duration-200 ${getBitStyle(idx)}`,
                           children: [
                             /* @__PURE__ */ jsxs("span", { className: "text-[10px] opacity-80", children: [
                               "bit ",
@@ -7340,27 +7424,27 @@ const EnumSetVisualizerComponent = ({
                 bitmask === 0 && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 italic", children: "Empty set" })
               ] })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-700", children: [
-              /* @__PURE__ */ jsx("span", { className: "font-semibold text-blue-700", children: "vs HashSet:" }),
-              /* @__PURE__ */ jsxs("div", { className: "mt-1 grid grid-cols-2 gap-2 text-[10px]", children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-green-600", children: "EnumSet:" }),
-                  " 1 long = 8 bytes"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "HashSet:" }),
-                  " ~40+ bytes per entry"
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-green-600", children: "EnumSet:" }),
-                  " O(1) bit operation"
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-green-50 to-lime-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: "💡" }),
+                " Why EnumSet? Memory Efficiency!"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-white p-3 rounded-lg border-2 border-green-300", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-sm font-bold text-green-700 mb-2", children: "EnumSet" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-green-600 mb-1", children: "8 bytes" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-600", children: "1 long for up to 64 enum values" }),
+                  /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-green-600", children: "✓ Single CPU instruction per operation" })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "HashSet:" }),
-                  " O(1) with hash overhead"
+                /* @__PURE__ */ jsxs("div", { className: "bg-white p-3 rounded-lg border-2 border-gray-300", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-sm font-bold text-gray-500 mb-2", children: "HashSet" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-gray-500 mb-1", children: "~280 bytes" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: "For 7 enum values (~40 bytes each)" }),
+                  /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-gray-500", children: "Hash computation + object overhead" })
                 ] })
-              ] })
-            ] }) }),
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mt-3 text-center", children: /* @__PURE__ */ jsx("span", { className: "inline-block px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-bold", children: "35x smaller memory footprint!" }) })
+            ] }),
             /* @__PURE__ */ jsx(
               StatusPanel,
               {
@@ -7438,6 +7522,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" }
 ];
@@ -7454,6 +7539,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,
@@ -7461,7 +7555,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);
@@ -7476,7 +7572,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]];
@@ -7487,7 +7585,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 {
@@ -7497,7 +7597,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;
         }
@@ -7507,6 +7609,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",
@@ -7526,7 +7643,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) {
@@ -7546,7 +7665,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;
         }
@@ -7560,7 +7680,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({
@@ -7570,7 +7692,8 @@ function generateHeapSteps() {
           codeLine: 14,
           variables: { index: smallestIdx },
           swapIndices: [idx, smallestIdx],
-          highlightIndex: smallestIdx
+          highlightIndex: smallestIdx,
+          currentIndex: smallestIdx
         });
         idx = smallestIdx;
       }
@@ -7696,7 +7819,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) {
@@ -7708,11 +7831,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";
@@ -7733,6 +7870,49 @@ const PriorityQueueVisualizerComponent = ({ 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: 400, 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: "🏔️" }),
+                " Min-Heap Property"
+              ] }),
+              /* @__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: "heap[parent] ≤ heap[children]" }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs text-gray-600", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 p-2 rounded text-center", children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "parent(i)" }),
+                    " = ⌊(i-1)/2⌋"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 p-2 rounded text-center", children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "left(i)" }),
+                    " = 2i + 1"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 p-2 rounded text-center", children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "right(i)" }),
+                    " = 2i + 2"
+                  ] })
+                ] })
+              ] }),
+              currentIndex !== void 0 && currentIndex >= 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-purple-200", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-600 text-center", children: [
+                /* @__PURE__ */ jsxs("span", { className: "font-semibold text-purple-700", children: [
+                  "Current: i = ",
+                  currentIndex
+                ] }),
+                currentIndex > 0 && /* @__PURE__ */ jsxs("span", { className: "mx-2", children: [
+                  "→ parent(",
+                  currentIndex,
+                  ") = ⌊(",
+                  currentIndex,
+                  "-1)/2⌋ = ",
+                  /* @__PURE__ */ jsx("span", { className: "text-purple-600 font-bold", children: Math.floor((currentIndex - 1) / 2) })
+                ] }),
+                2 * currentIndex + 1 < heap.length && /* @__PURE__ */ jsxs("span", { className: "mx-2", children: [
+                  "→ left(",
+                  currentIndex,
+                  ") = ",
+                  /* @__PURE__ */ jsx("span", { className: "text-purple-600 font-bold", children: 2 * currentIndex + 1 })
+                ] })
+              ] }) })
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Binary Heap Structure" }),
               /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-lg p-2 overflow-x-auto", children: heap.length > 0 ? /* @__PURE__ */ jsxs(
@@ -7749,6 +7929,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__ */ jsx(
                         "line",
                         {
@@ -7756,8 +7937,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}`
                       );
@@ -7774,7 +7956,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__ */ jsx(