@tomaszjarosz/react-visualizers 0.4.1 → 0.4.4

package/dist/index.cjs

@@ -713,23 +713,12 @@ const StatusPanel = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "p-3 bg-gray-50 rounded-lg overflow-hidden",
+      className: "p-3 bg-gray-50 rounded-lg",
       role: "status",
       "aria-live": "polite",
       "aria-atomic": "true",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: `text-sm font-medium ${VARIANT_STYLES$1[variant]} flex items-center gap-1.5 transition-all duration-150 ${isAnimating ? "opacity-0 translate-y-1" : "opacity-100 translate-y-0"}`,
-            children: [
-              Icon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "w-4 h-4 flex-shrink-0 animate-in fade-in duration-300", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: srPrefix }),
-              displayedDescription
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1 bg-gray-200 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -749,7 +738,18 @@ const StatusPanel = ({
               ]
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `text-sm font-medium ${VARIANT_STYLES$1[variant]} flex items-start gap-1.5 transition-all duration-150 ${isAnimating ? "opacity-0 translate-y-1" : "opacity-100 translate-y-0"}`,
+            children: [
+              Icon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "w-4 h-4 flex-shrink-0 animate-in fade-in duration-300 mt-0.5", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: srPrefix }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayedDescription })
+            ]
+          }
+        )
       ]
     }
   );
@@ -1146,13 +1146,15 @@ const ShareButton = ({
 const VisualizationArea = ({
   children,
   minHeight = 300,
+  fixedHeight = false,
   className = ""
 }) => {
+  const style = fixedHeight ? { height: `${minHeight}px`, minHeight: `${minHeight}px`, maxHeight: `${minHeight}px` } : { minHeight: `${minHeight}px` };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `relative ${className}`,
-      style: { minHeight: `${minHeight}px` },
+      className: `relative ${fixedHeight ? "overflow-auto" : ""} ${className}`,
+      style,
       children
     }
   );
@@ -1252,6 +1254,7 @@ const BaseVisualizerLayout = ({
   onShare,
   children,
   minHeight = 400,
+  fixedHeight = false,
   sidePanel,
   status,
   controls,
@@ -1290,11 +1293,9 @@ const BaseVisualizerLayout = ({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
           infoBox,
+          status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(StatusPanel, { ...status }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${hasSidePanel ? "flex-col lg:flex-row lg:items-start" : ""}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight, className: "flex-1", children: [
-              children,
-              status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(StatusPanel, { ...status }) })
-            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(VisualizationArea, { minHeight, fixedHeight, className: "flex-1", children }),
             hasSidePanel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:w-80 flex-shrink-0 flex flex-col gap-4 lg:sticky lg:top-4", children: [
               hasCodePanel && /* @__PURE__ */ jsxRuntime.jsx(
                 CodePanel,
@@ -2322,7 +2323,7 @@ const BinarySearchVisualizerComponent = ({
         /* @__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.jsx("div", { className: "mt-3 p-2 bg-white rounded-lg border border-green-200 min-h-[60px]", children: left <= right ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { 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:" }),
@@ -2354,8 +2355,7 @@ const BinarySearchVisualizerComponent = ({
           ") / 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 === true ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-1", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-green-800 font-bold", children: [
         "✓ Found in ",
         currentStep,
         " steps (log₂",
@@ -2363,8 +2363,7 @@ const BinarySearchVisualizerComponent = ({
         " ≈ ",
         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" }) })
+      ] }) }) : found === false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-800 font-bold", children: "✗ Not found - search space exhausted" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-xs text-gray-400 py-2", children: "Ready to search..." }) })
     ] }),
     /* @__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(
@@ -4109,7 +4108,7 @@ const DijkstraVisualizerComponent = ({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-600 font-bold", children: "update dist[v]" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-orange-50 rounded-lg border border-orange-200", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-orange-50 rounded-lg border border-orange-200 min-h-[72px]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-orange-800", children: "Priority Queue (min-heap)" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-orange-600", children: "(node:distance)" })
@@ -14437,6 +14436,35 @@ const ArrayListVisualizerComponent = ({
     return copyUrlToClipboard({ step: currentStep });
   }, [copyUrlToClipboard, currentStep]);
   const visualization = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-full bg-orange-500 transition-all",
+          style: { width: `${size / capacity * 100}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 text-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700", children: "size:" }),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-orange-600 font-mono", children: size })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700", children: "capacity:" }),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-amber-600 font-mono", children: capacity })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700", children: "load:" }),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+            Math.round(size / capacity * 100),
+            "%"
+          ] })
+        ] })
+      ] })
+    ] }),
     operation === "resize" && oldArray && /* @__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-700 mb-3 flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl", children: "⚠️" }),
@@ -14502,35 +14530,6 @@ const ArrayListVisualizerComponent = ({
           "]"
         ] })
       ] }, idx)) }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 text-xs", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700", children: "size:" }),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-orange-600 font-mono", children: size })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700", children: "capacity:" }),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-amber-600 font-mono", children: capacity })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700", children: "load:" }),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
-            Math.round(size / capacity * 100),
-            "%"
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 h-2 bg-gray-200 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "h-full bg-orange-500 transition-all",
-          style: { width: `${size / capacity * 100}%` }
-        }
-      ) })
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -15371,23 +15370,12 @@ const TreeSetVisualizerComponent = ({
         ] }),
         /* @__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("div", { className: "mt-3 p-2 bg-white rounded-lg border border-emerald-200 min-h-[40px]", children: found === true ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-center text-green-800 font-bold bg-green-100 rounded p-1", children: [
+        "✓ Found! ",
+        currentStepData.value,
+        " == ",
+        currentNode
+      ] }) : found === false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-center text-red-800 font-bold bg-red-100 rounded p-1", children: "✗ Not found! Reached null (no more children to check)" }) : (currentStepData.operation === "add" || currentStepData.operation === "contains") && currentStepData.value !== void 0 && currentNode !== void 0 && currentNode !== currentStepData.value ? /* @__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: [
@@ -15402,14 +15390,7 @@ const TreeSetVisualizerComponent = ({
           "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.jsx("div", { className: "text-xs text-center text-gray-400", children: "Ready for operation..." }) })
     ] }),
     /* @__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" }),
@@ -17027,6 +17008,10 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
         ] })
       ] })
     ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center gap-8 text-gray-400 text-lg mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "→ put()" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "take() →" })
+    ] }),
     /* @__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" }),
@@ -17051,6 +17036,13 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
           ")"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gray-100 rounded-lg p-2 min-h-[100px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 h-1.5 bg-gray-200 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `h-full transition-colors ${queue.length === capacity ? "bg-red-500" : "bg-cyan-500"}`,
+              style: { width: `${queue.length / capacity * 100}%` }
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: queue.length > 0 ? queue.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -17058,14 +17050,7 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
               children: item.value
             },
             item.id
-          )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-gray-400 text-xs py-4", children: "Empty" }) }),
-          /* @__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-colors ${queue.length === capacity ? "bg-red-500" : "bg-cyan-500"}`,
-              style: { width: `${queue.length / capacity * 100}%` }
-            }
-          ) })
+          )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-gray-400 text-xs py-4", children: "Empty" }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
@@ -17082,10 +17067,6 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
           c
         )) })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center gap-8 text-gray-400 text-lg mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "→ put()" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "take() →" })
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17096,7 +17077,8 @@ const BlockingQueueVisualizerComponent = ({ showControls = true, showCode = true
       badges: BADGES$c,
       gradient: "cyan",
       className,
-      minHeight: 350,
+      minHeight: 420,
+      fixedHeight: true,
       status: {
         description,
         currentStep,