@tomaszjarosz/react-visualizers 0.1.4 → 0.2.1

package/dist/index.cjs

@@ -3512,7 +3512,7 @@ const DPVisualizerComponent = ({
   showCode = true,
   className = ""
 }) => {
-  var _a;
+  var _a, _b, _c;
   const [items] = React.useState(DEFAULT_ITEMS);
   const [capacity] = React.useState(DEFAULT_CAPACITY);
   const [speed, setSpeed] = React.useState(25);
@@ -3636,33 +3636,83 @@ const DPVisualizerComponent = ({
           ] })
         ] }) }) }),
         /* @__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(VisualizationArea, { minHeight: 450, className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 p-4 bg-gradient-to-r from-teal-50 to-cyan-50 rounded-xl border-2 border-teal-200", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-teal-800 mb-3", children: "DP Recurrence Formula" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-teal-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-600 mb-2", children: [
+                  "dp[i][w] = max(",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-yellow-600 font-bold", children: " skip" }),
+                  ",",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-600 font-bold", children: " take" }),
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 text-xs mt-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-yellow-50 p-2 rounded border border-yellow-200", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-yellow-700 font-bold", children: "skip" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: " = dp[i-1][w]" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 mt-1", children: "Don't take item i" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-green-50 p-2 rounded border border-green-200", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-700 font-bold", children: "take" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: " = dp[i-1][w-weight] + value" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 mt-1", children: "Take item i" })
+                  ] })
+                ] })
+              ] }),
+              currentI > 0 && currentW > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-white rounded-lg border-2 border-purple-300", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-purple-800 mb-2", children: [
+                  "Current: dp[",
+                  currentI,
+                  "][",
+                  currentW,
+                  "]"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-sm", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-600", children: [
+                    "Item ",
+                    currentI,
+                    ": ",
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+                      "w=",
+                      (_b = items[currentI - 1]) == null ? void 0 : _b.weight,
+                      ", v=",
+                      (_c = items[currentI - 1]) == null ? void 0 : _c.value
+                    ] })
+                  ] }),
+                  decision && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `px-3 py-1 rounded-full font-bold ${decision === "take" ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`, children: decision === "take" ? "✓ TAKE" : "✗ SKIP" })
+                ] })
+              ] })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-36", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Items:" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-40", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Items (i = item index):" }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: `px-2 py-1 rounded text-xs ${idx + 1 === currentI ? "bg-purple-100 text-purple-800 font-medium" : idx + 1 < currentI ? "bg-blue-50 text-blue-600" : "bg-gray-100 text-gray-500"}`,
+                    className: `px-2 py-1.5 rounded text-xs transition-colors ${idx + 1 === currentI ? "bg-purple-200 text-purple-900 font-bold ring-2 ring-purple-400" : idx + 1 < currentI ? "bg-blue-50 text-blue-600" : "bg-gray-100 text-gray-500"}`,
                     children: [
-                      "Item ",
-                      idx + 1,
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+                        "i=",
+                        idx + 1
+                      ] }),
                       ": w=",
                       item.weight,
                       ", v=",
-                      item.value
+                      item.value,
+                      idx + 1 === currentI && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", children: "← CURRENT" })
                     ]
                   },
                   idx
                 )) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-sm", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700", children: "Capacity:" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-sm p-2 bg-gray-100 rounded", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700", children: "Max Capacity:" }),
                   " ",
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900", children: capacity })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900 font-mono", children: capacity })
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-x-auto", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "DP Table:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "DP Table (w = current capacity):" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "text-xs border-collapse", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
                     /* @__PURE__ */ jsxRuntime.jsx("th", { className: "w-8 p-1 text-gray-500 font-normal", children: "i\\w" }),
@@ -4782,20 +4832,6 @@ const HashTableVisualizerComponent = ({
     key: ""
   };
   const { operation, buckets, bucketIndex, key } = currentStepData;
-  const getBucketStyle = (index) => {
-    if (index === bucketIndex) {
-      if (operation === "collision") return "border-red-400 bg-red-50";
-      if (operation === "placed") return "border-green-400 bg-green-50";
-      if (operation === "insert") return "border-yellow-400 bg-yellow-50";
-    }
-    return "border-gray-300 bg-gray-50";
-  };
-  const getKeyStyle = (bucketKey) => {
-    if (bucketKey === key && (operation === "placed" || operation === "insert")) {
-      return "bg-yellow-200 text-yellow-900 border-yellow-400";
-    }
-    return "bg-blue-100 text-blue-800 border-blue-300";
-  };
   const currentDescription = ((_a = steps[currentStep]) == null ? void 0 : _a.description) || "";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -4810,60 +4846,109 @@ const HashTableVisualizerComponent = ({
           ] })
         ] }) }) }),
         /* @__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: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 400, className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Keys to insert:" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: keys.map((k, idx) => {
                 const isInserted = steps.slice(0, currentStep + 1).some((s) => s.key === k && s.operation === "placed");
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
-                    className: `px-2 py-1 text-xs rounded border ${isInserted ? "bg-green-100 text-green-700 border-green-300" : k === key ? "bg-yellow-100 text-yellow-700 border-yellow-300" : "bg-gray-100 text-gray-600 border-gray-300"}`,
+                    className: `px-3 py-1.5 text-sm font-medium rounded-lg border-2 transition-colors ${isInserted ? "bg-green-100 text-green-700 border-green-400" : k === key ? "bg-yellow-100 text-yellow-700 border-yellow-400 ring-2 ring-yellow-300" : "bg-gray-50 text-gray-600 border-gray-300"}`,
                     children: k
                   },
                   idx
                 );
               }) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 p-4 bg-gradient-to-r from-violet-50 to-purple-50 rounded-xl border-2 border-violet-200 min-h-[80px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-violet-800 mb-2", children: "Hash Calculation" }),
+              operation === "insert" && key ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-lg text-gray-800", children: [
+                  "hash(",
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-violet-600 font-bold", children: [
+                    '"',
+                    key,
+                    '"'
+                  ] }),
+                  ") % ",
+                  buckets.length,
+                  " = ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-violet-600 font-bold text-xl", children: bucketIndex })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-violet-600 text-2xl animate-bounce", children: "↓" })
+              ] }) : operation === "collision" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-lg text-red-700", children: [
+                  "Collision at bucket ",
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
+                    "[",
+                    bucketIndex,
+                    "]"
+                  ] }),
+                  "! Adding to chain..."
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-red-500 text-2xl", children: "⚠️" })
+              ] }) : operation === "placed" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-mono text-lg text-green-700", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
+                    '"',
+                    key,
+                    '"'
+                  ] }),
+                  " placed in bucket ",
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
+                    "[",
+                    bucketIndex,
+                    "]"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-green-500 text-2xl", children: "✓" })
+              ] }) : operation === "rehash" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-lg text-orange-700", children: "Rehashing: expanding table..." }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-orange-500 text-2xl", children: "🔄" })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-400 text-center", children: "Click Play to start visualization" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700 mb-3", children: [
                 "Hash Table (",
                 buckets.length,
                 " buckets):"
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-2", children: buckets.map((bucket, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", style: { minWidth: "max-content" }, children: buckets.map((bucket, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: `p-2 rounded border-2 min-h-[60px] transition-colors ${getBucketStyle(idx)}`,
+                  className: "flex flex-col items-center",
+                  style: { minWidth: "70px" },
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs font-mono text-gray-500 mb-1", children: [
-                      "[",
-                      idx,
-                      "]"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: bucket.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 italic", children: "empty" }) : bucket.map((bucketKey, keyIdx) => /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
                       {
-                        className: `px-1.5 py-0.5 text-xs rounded border ${getKeyStyle(bucketKey)}`,
-                        children: bucketKey
-                      },
-                      keyIdx
-                    )) })
+                        className: `w-full text-center py-1 px-2 rounded-t-lg font-mono text-sm font-bold transition-colors ${idx === bucketIndex ? operation === "collision" ? "bg-red-500 text-white" : operation === "placed" ? "bg-green-500 text-white" : "bg-yellow-400 text-yellow-900" : "bg-gray-200 text-gray-600"}`,
+                        children: [
+                          "[",
+                          idx,
+                          "]"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: `w-full border-2 rounded-b-lg min-h-[100px] p-1 transition-colors ${idx === bucketIndex ? operation === "collision" ? "border-red-400 bg-red-50" : operation === "placed" ? "border-green-400 bg-green-50" : "border-yellow-400 bg-yellow-50" : "border-gray-300 bg-gray-50"}`,
+                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: bucket.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 italic text-center py-2", children: "empty" }) : bucket.map((bucketKey, keyIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: `px-2 py-1 text-xs font-medium rounded border text-center transition-colors ${bucketKey === key && (operation === "placed" || operation === "insert") ? "bg-yellow-200 text-yellow-900 border-yellow-400" : "bg-blue-100 text-blue-800 border-blue-300"}`,
+                            children: bucketKey
+                          },
+                          keyIdx
+                        )) })
+                      }
+                    )
                   ]
                 },
                 idx
-              )) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-gray-100 rounded-lg min-h-[52px]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-700 mb-1", children: "Hash Calculation:" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-sm", children: operation === "insert" && key ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                'hash("',
-                key,
-                '") mod ',
-                buckets.length,
-                " = ",
-                bucketIndex
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "—" }) })
+              )) }) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               StatusPanel,