@tomaszjarosz/react-visualizers 0.1.1 → 0.1.3

package/dist/index.js

@@ -312,7 +312,7 @@ const CodePanel = ({
   /* @__PURE__ */ jsx("div", { children: code.map((line, idx) => /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `px-0.5 rounded transition-all whitespace-pre ${idx === activeLine ? "bg-yellow-500/30 text-yellow-200 border-l border-yellow-400" : "text-gray-400 border-l border-transparent"}`,
+      className: `px-0.5 rounded transition-colors whitespace-pre ${idx === activeLine ? "bg-yellow-500/30 text-yellow-200 border-l border-yellow-400" : "text-gray-400 border-l border-transparent"}`,
       children: [
         /* @__PURE__ */ jsx("span", { className: "text-gray-600 mr-1 select-none text-[9px]", children: idx + 1 }),
         line || " "
@@ -320,9 +320,9 @@ const CodePanel = ({
     },
     idx
   )) }),
-  variables && Object.keys(variables).length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-1 pt-1 border-t border-gray-700", children: [
+  /* @__PURE__ */ jsxs("div", { className: "mt-1 pt-1 border-t border-gray-700 min-h-[36px]", children: [
     /* @__PURE__ */ jsx("div", { className: "text-[8px] text-gray-500 uppercase tracking-wide mb-0.5", children: "Vars" }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-0.5", children: Object.entries(variables).map(([key, value]) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-0.5", children: variables && Object.keys(variables).length > 0 ? Object.entries(variables).map(([key, value]) => /* @__PURE__ */ jsxs(
       "span",
       {
         className: "px-0.5 bg-gray-800 rounded text-[9px] text-gray-300",
@@ -333,7 +333,7 @@ const CodePanel = ({
         ]
       },
       key
-    )) })
+    )) : /* @__PURE__ */ jsx("span", { className: "text-[9px] text-gray-600", children: "—" }) })
   ] })
 ] });
 const HelpPanel = () => /* @__PURE__ */ jsxs("div", { className: "bg-gray-100 rounded-lg p-2 text-[10px]", children: [
@@ -4829,48 +4829,39 @@ const HashTableVisualizerComponent = ({
                 buckets.length,
                 " buckets):"
               ] }),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2", children: buckets.map((bucket, idx) => /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "grid gap-2",
-                  style: {
-                    gridTemplateColumns: `repeat(auto-fill, minmax(120px, 1fr))`
-                  },
-                  children: buckets.map((bucket, idx) => /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: `p-2 rounded border-2 min-h-[60px] transition-colors ${getBucketStyle(idx)}`,
-                      children: [
-                        /* @__PURE__ */ jsxs("div", { className: "text-xs font-mono text-gray-500 mb-1", children: [
-                          "[",
-                          idx,
-                          "]"
-                        ] }),
-                        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: bucket.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 italic", children: "empty" }) : bucket.map((bucketKey, keyIdx) => /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            className: `px-1.5 py-0.5 text-xs rounded border ${getKeyStyle(bucketKey)}`,
-                            children: bucketKey
-                          },
-                          keyIdx
-                        )) })
-                      ]
-                    },
-                    idx
-                  ))
-                }
-              )
+                  className: `p-2 rounded border-2 min-h-[60px] transition-colors ${getBucketStyle(idx)}`,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "text-xs font-mono text-gray-500 mb-1", children: [
+                      "[",
+                      idx,
+                      "]"
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: bucket.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 italic", children: "empty" }) : bucket.map((bucketKey, keyIdx) => /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `px-1.5 py-0.5 text-xs rounded border ${getKeyStyle(bucketKey)}`,
+                        children: bucketKey
+                      },
+                      keyIdx
+                    )) })
+                  ]
+                },
+                idx
+              )) })
             ] }),
-            operation === "insert" && key && /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg min-h-[52px]", children: [
               /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-1", children: "Hash Calculation:" }),
-              /* @__PURE__ */ jsxs("div", { className: "font-mono text-sm", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-mono text-sm", children: operation === "insert" && key ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 'hash("',
                 key,
                 '") mod ',
                 buckets.length,
                 " = ",
                 bucketIndex
-              ] })
+              ] }) : /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "—" }) })
             ] }),
             /* @__PURE__ */ jsx(
               StatusPanel,