@tomaszjarosz/react-visualizers 0.4.4 → 0.4.6

package/dist/index.cjs

@@ -5249,6 +5249,7 @@ const AStarVisualizerComponent = ({
   showCode = true,
   className = ""
 }) => {
+  var _a;
   const VISUALIZER_ID2 = "astar-visualizer";
   const { copyUrlToClipboard } = useUrlState({ prefix: "astar", scrollToId: VISUALIZER_ID2 });
   const generateSteps = React.useMemo(() => generateAStarSteps$1, []);
@@ -5274,8 +5275,8 @@ const AStarVisualizerComponent = ({
     description: ""
   };
   const getCellState = (row, col) => {
-    var _a, _b, _c, _d;
-    const cell = (_a = stepData.grid[row]) == null ? void 0 : _a[col];
+    var _a2, _b, _c, _d;
+    const cell = (_a2 = stepData.grid[row]) == null ? void 0 : _a2[col];
     if (!cell) return "default";
     if (cell.isStart) return "start";
     if (cell.isEnd) return "end";
@@ -5354,7 +5355,7 @@ const AStarVisualizerComponent = ({
         colIdx
       );
     }) }, rowIdx)) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 justify-center mb-4 text-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 justify-center mb-4 text-sm min-h-[32px]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-1 bg-blue-100 rounded", children: [
         "Open: ",
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: stepData.openSet.length })
@@ -5363,9 +5364,9 @@ const AStarVisualizerComponent = ({
         "Closed: ",
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: stepData.closedSet.length })
       ] }),
-      stepData.path && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-1 bg-purple-100 rounded", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `px-3 py-1 bg-purple-100 rounded ${!stepData.path ? "invisible" : ""}`, children: [
         "Path: ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: stepData.path.length }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: ((_a = stepData.path) == null ? void 0 : _a.length) || 0 }),
         " cells"
       ] })
     ] })
@@ -5734,7 +5735,7 @@ const TopologicalSortVisualizerComponent = ({
       ] }, node.id))
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-3 bg-blue-50 rounded-lg border border-blue-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-3 bg-blue-50 rounded-lg border border-blue-200 min-h-[72px]", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-blue-800 mb-2", children: "Queue (in-degree = 0)" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 min-h-[32px]", children: stepData.queue.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-blue-400 text-sm", children: "Empty" }) : stepData.queue.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
           "span",
@@ -5745,7 +5746,7 @@ const TopologicalSortVisualizerComponent = ({
           id
         )) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-3 bg-green-50 rounded-lg border border-green-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-3 bg-green-50 rounded-lg border border-green-200 min-h-[72px]", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-green-800 mb-2", children: "Result (sorted order)" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 min-h-[32px]", children: stepData.result.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-400 text-sm", children: "Empty" }) : stepData.result.map((id, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-8 h-8 flex items-center justify-center bg-green-400 text-white rounded font-bold", children: id }),
@@ -6032,7 +6033,7 @@ const HashMapVisualizerComponent = ({
         /* @__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.jsx("div", { className: "mt-3 p-3 bg-white rounded-lg border border-indigo-200 min-h-[80px]", children: stepData.hash !== void 0 && stepData.key ? /* @__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: [
@@ -6055,7 +6056,7 @@ const HashMapVisualizerComponent = ({
           stepData.bucketIndex,
           "]"
         ] })
-      ] }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-400 text-center py-4", children: "Ready to hash..." }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
@@ -13665,7 +13666,7 @@ const LinkedListVisualizerComponent = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 font-mono ml-2", children: "← tail" })
       ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-16 flex items-center justify-center text-gray-400 text-sm", children: "Empty list (head = tail = null)" }) })
     ] }),
-    nodes.length > 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 flex gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg min-h-[44px]", children: nodes.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-600 flex gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "head:" }),
         " ",
@@ -13681,7 +13682,7 @@ const LinkedListVisualizerComponent = ({
         " ",
         nodes.length
       ] })
-    ] }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-400 text-center", children: "head = tail = null, size = 0" }) })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
@@ -14162,7 +14163,7 @@ const LinkedHashMapVisualizerComponent = ({
         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("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg min-h-[52px]", children: accessOrder ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-blue-700", children: [
       /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "LRU Cache Usage:" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-[11px]", children: linkedOrder.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         "Least Recently Used: ",
@@ -14170,7 +14171,7 @@ const LinkedHashMapVisualizerComponent = ({
         " | Most Recently Used: ",
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: linkedOrder[linkedOrder.length - 1] })
       ] }) : "Cache empty" })
-    ] }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-400 text-center", children: "Insertion order mode (switch to access order for LRU behavior)" }) })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseVisualizerLayout,
@@ -14952,9 +14953,9 @@ const ArrayDequeVisualizerComponent = ({
         ] }, idx)) })
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg min-h-[60px]", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600 mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Logical Order (front → back):" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1", children: getLogicalElements().length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1 min-h-[24px]", children: getLogicalElements().length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-teal-600", children: "FRONT →" }),
         getLogicalElements().map((val, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
           idx > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "→" }),
@@ -15687,7 +15688,7 @@ const EnumSetVisualizerComponent = ({
           day
         );
       }) }),
-      showBinary && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-gray-900 rounded-lg text-sm font-mono", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-3 bg-gray-900 rounded-lg text-sm font-mono min-h-[76px] ${showBinary ? "" : "hidden"}`, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-gray-400", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-400", children: "elements" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "=" }),
@@ -15701,29 +15702,31 @@ const EnumSetVisualizerComponent = ({
             " in decimal)"
           ] })
         ] }),
-        stepData.operation === "add" && highlightBit !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 text-blue-300", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "// Set bit: " }),
-          "elements |= (1L << ",
-          highlightBit,
-          ")"
-        ] }),
-        stepData.operation === "remove" && highlightBit !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 text-orange-300", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "// Clear bit: " }),
-          "elements &= ~(1L << ",
-          highlightBit,
-          ")"
-        ] }),
-        stepData.operation === "contains" && highlightBit !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 text-purple-300", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "// Check bit: " }),
-          "(elements & (1L << ",
-          highlightBit,
-          ")) != 0"
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 min-h-[20px]", children: [
+          stepData.operation === "add" && highlightBit !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-blue-300", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "// Set bit: " }),
+            "elements |= (1L << ",
+            highlightBit,
+            ")"
+          ] }),
+          stepData.operation === "remove" && highlightBit !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-orange-300", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "// Clear bit: " }),
+            "elements &= ~(1L << ",
+            highlightBit,
+            ")"
+          ] }),
+          stepData.operation === "contains" && highlightBit !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-purple-300", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "// Check bit: " }),
+            "(elements & (1L << ",
+            highlightBit,
+            ")) != 0"
+          ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-gray-50 rounded-lg min-h-[68px]", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600 mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Set Contents:" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1 min-h-[24px]", children: [
         DAYS_OF_WEEK.filter((_, idx) => (bitmask & 1 << idx) !== 0).map(
           (day) => /* @__PURE__ */ jsxRuntime.jsx(
             "span",
@@ -16192,7 +16195,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
           ] })
         ] })
       ] }),
-      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.jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-purple-200 min-h-[36px]", children: currentIndex !== void 0 && currentIndex >= 0 ? /* @__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
@@ -16211,7 +16214,7 @@ const PriorityQueueVisualizerComponent = ({ showControls = true, showCode = true
           ") = ",
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 font-bold", children: 2 * currentIndex + 1 })
         ] })
-      ] }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-400 text-center", children: "Ready for heap operations..." }) })
     ] }),
     /* @__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" }),
@@ -16659,7 +16662,7 @@ const ConcurrentHashMapVisualizerComponent = ({ showControls = true, showCode =
                 seg.lockOwner
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: seg.entries.length > 0 ? seg.entries.map((entry, eIdx) => /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 min-h-[60px]", children: seg.entries.length > 0 ? seg.entries.map((entry, eIdx) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 className: "flex justify-between px-2 py-1 bg-white rounded text-xs border border-gray-200",
@@ -17387,7 +17390,7 @@ const CopyOnWriteVisualizerComponent = ({
       ] }),
       /* @__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: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-4 bg-gray-50 rounded-lg min-h-[100px]", 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: "→" }),
       renderArray(newArray, "New Array (being created)", true)
@@ -17639,13 +17642,13 @@ const ImmutableCollectionsVisualizerComponent = ({ showControls = true, showCode
     return "default";
   };
   const visualization = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 space-y-4", children: [
-      original.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 bg-violet-50 rounded-lg border-2 border-violet-200", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 space-y-4 min-h-[180px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-4 bg-violet-50 rounded-lg border-2 border-violet-200 min-h-[80px] ${original.length === 0 ? "hidden" : ""}`, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Lock, { className: "w-4 h-4 text-violet-600" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-violet-700", children: "Immutable List (List.of)" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 min-h-[48px]", children: [
           original.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -17657,10 +17660,10 @@ const ImmutableCollectionsVisualizerComponent = ({ showControls = true, showCode
           error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center text-red-600 text-sm font-medium ml-2", children: "✗ Cannot modify!" })
         ] })
       ] }),
-      showDerived && derived && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 bg-green-50 rounded-lg border-2 border-green-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-4 bg-green-50 rounded-lg border-2 border-green-200 min-h-[80px] ${!(showDerived && derived) ? "invisible" : ""}`, children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-green-700", children: "Mutable Copy (ArrayList)" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-          derived.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 min-h-[48px]", children: [
+          derived && derived.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: `w-12 h-12 flex items-center justify-center rounded-lg border-2 font-bold ${idx === derived.length - 1 && derived.length > original.length ? "bg-green-500 border-green-600 text-white" : "bg-green-100 border-green-300 text-green-700"}`,
@@ -17668,7 +17671,7 @@ const ImmutableCollectionsVisualizerComponent = ({ showControls = true, showCode
             },
             idx
           )),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center text-green-600 text-sm font-medium ml-2", children: "✓ Modifiable" })
+          showDerived && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center text-green-600 text-sm font-medium ml-2", children: "✓ Modifiable" })
         ] })
       ] })
     ] }),
@@ -18978,16 +18981,16 @@ const TrieVisualizerComponent = ({
         depth: 0
       }
     ) }),
-    stepData.matchedWords && stepData.matchedWords.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-purple-50 rounded-lg border border-purple-200", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-purple-50 rounded-lg border border-purple-200 min-h-[64px]", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-purple-800 mb-2", children: "Words found:" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: stepData.matchedWords.map((word) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 min-h-[28px]", children: stepData.matchedWords && stepData.matchedWords.length > 0 ? stepData.matchedWords.map((word) => /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           className: "px-2 py-1 bg-purple-100 text-purple-700 text-sm rounded font-mono",
           children: word
         },
         word
-      )) })
+      )) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-purple-400 italic", children: "No words matched yet..." }) })
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -19355,7 +19358,7 @@ const UnionFindVisualizerComponent = ({
         groups.size !== 1 ? "s" : "",
         ")"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: Array.from(groups.entries()).map(([root, members], idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 min-h-[60px]", children: Array.from(groups.entries()).map(([root, members], idx) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: `px-3 py-2 rounded-lg border ${groupColors[idx % groupColors.length]} border-gray-300`,
@@ -20149,7 +20152,7 @@ const SegmentTreeVisualizerComponent = ({
           idx
         );
       }) }),
-      stepData.queryRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-xs text-gray-600 mt-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-xs text-gray-600 mt-2 min-h-[20px]", children: stepData.queryRange ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         "Query range: [",
         stepData.queryRange[0],
         ", ",
@@ -20159,7 +20162,7 @@ const SegmentTreeVisualizerComponent = ({
           "= ",
           stepData.queryResult
         ] })
-      ] })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "Ready for query..." }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
@@ -21209,10 +21212,10 @@ const RaftVisualizerComponent = ({
         ] }, node.id);
       })
     ] }) }),
-    stepData.messageType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-center min-h-[32px]", children: stepData.messageType ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium", children: [
       "📨 ",
       stepData.messageType
-    ] }) }),
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300 text-sm", children: "—" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-xs", children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "bg-gray-100", children: [
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-left", children: "Node" }),