@tomaszjarosz/react-visualizers 0.2.2 → 0.2.4

package/dist/index.cjs

@@ -5841,6 +5841,7 @@ function generateArrayListSteps() {
     if (op === "add" && value !== void 0) {
       if (size === capacity) {
         const oldCapacity = capacity;
+        const oldArray = [...array];
         capacity *= 2;
         const newArray = new Array(capacity).fill(null);
         for (let i = 0; i < size; i++) {
@@ -5850,9 +5851,11 @@ function generateArrayListSteps() {
         steps.push({
           operation: "resize",
           array: [...array],
+          oldArray,
           size,
           capacity,
-          description: `Resize! Array full (${oldCapacity}/${oldCapacity}). Create new array with capacity ${capacity}, copy elements → O(n)`,
+          oldCapacity,
+          description: `Resize! Array full (${oldCapacity}/${oldCapacity}). Create new array with capacity ${capacity}, copy ${size} elements → O(n)`,
           codeLine: 2,
           variables: { oldCapacity, newCapacity: capacity, copied: size }
         });
@@ -5982,7 +5985,7 @@ const ArrayListVisualizerComponent = ({
     capacity: INITIAL_CAPACITY$1,
     description: ""
   };
-  const { array, size, capacity, highlightIndex, shiftIndices, description } = stepData;
+  const { array, size, capacity, highlightIndex, shiftIndices, description, oldArray, oldCapacity, operation } = stepData;
   const getCellStyle = (idx) => {
     if (idx === highlightIndex) {
       return "bg-orange-500 border-orange-600 text-white";
@@ -6020,7 +6023,53 @@ const ArrayListVisualizerComponent = ({
           /* @__PURE__ */ jsxRuntime.jsx(ShareButton, { onShare: handleShare })
         ] }) }),
         /* @__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: showCode ? "flex-1" : "w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(VisualizationArea, { minHeight: 400, className: showCode ? "flex-1" : "w-full", children: [
+            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: "⚠️" }),
+                " RESIZE OPERATION (O(n) cost!)"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs font-medium text-gray-600 mb-2", children: [
+                    "OLD Array (capacity: ",
+                    oldCapacity,
+                    ") - FULL!"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg p-2 border border-red-200", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 flex-wrap", children: oldArray.map((val, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "w-10 h-10 flex items-center justify-center rounded border-2 text-sm font-medium bg-red-100 border-red-300 text-red-800",
+                      children: val !== null ? val : ""
+                    },
+                    idx
+                  )) }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center justify-center absolute left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl text-orange-500", children: "→" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs font-medium text-gray-600 mb-2", children: [
+                    "NEW Array (capacity: ",
+                    capacity,
+                    ") - 2x bigger"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg p-2 border border-green-200", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 flex-wrap", children: array.map((val, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: `w-10 h-10 flex items-center justify-center rounded border-2 text-sm font-medium ${idx < size ? "bg-green-100 border-green-300 text-green-800" : "bg-gray-100 border-gray-200 text-gray-300"}`,
+                      children: val !== null ? val : ""
+                    },
+                    idx
+                  )) }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-xs text-red-600 text-center", children: [
+                "All ",
+                size,
+                " elements copied to new array → This is why add() is O(1) ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "amortized" }),
+                ", not O(1)"
+              ] })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
                 "Internal Array (capacity: ",
@@ -6031,7 +6080,7 @@ const ArrayListVisualizerComponent = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: `w-12 h-12 flex items-center justify-center rounded border-2 font-medium transition-all ${getCellStyle(idx)}`,
+                    className: `w-12 h-12 flex items-center justify-center rounded border-2 font-medium transition-colors ${getCellStyle(idx)}`,
                     children: val !== null ? val : ""
                   }
                 ),
@@ -7227,7 +7276,7 @@ const EnumSetVisualizerComponent = ({
                       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "text-[10px] opacity-80", children: [
                               "bit ",
@@ -7293,27 +7342,27 @@ const EnumSetVisualizerComponent = ({
                 bitmask === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 italic", children: "Empty set" })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-700", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-blue-700", children: "vs HashSet:" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 grid grid-cols-2 gap-2 text-[10px]", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-600", children: "EnumSet:" }),
-                  " 1 long = 8 bytes"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "HashSet:" }),
-                  " ~40+ bytes per entry"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-600", children: "EnumSet:" }),
-                  " O(1) bit operation"
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-sm font-bold text-green-800 mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "💡" }),
+                " Why EnumSet? Memory Efficiency!"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-3 rounded-lg border-2 border-green-300", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-bold text-green-700 mb-2", children: "EnumSet" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold text-green-600 mb-1", children: "8 bytes" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600", children: "1 long for up to 64 enum values" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-xs text-green-600", children: "✓ Single CPU instruction per operation" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "HashSet:" }),
-                  " O(1) with hash overhead"
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-3 rounded-lg border-2 border-gray-300", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-bold text-gray-500 mb-2", children: "HashSet" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold text-gray-500 mb-1", children: "~280 bytes" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: "For 7 enum values (~40 bytes each)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-xs text-gray-500", children: "Hash computation + object overhead" })
                 ] })
-              ] })
-            ] }) }),
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
               StatusPanel,
               {