@engineerplaybook/design-system 0.0.1

package/dist/design-system.es.js

@@ -0,0 +1,1121 @@
+import ie, { useState as p, useRef as ce, forwardRef as q, createElement as O, useEffect as de, memo as xe, useMemo as me } from "react";
+var I = { exports: {} }, w = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Y;
+function ue() {
+  if (Y) return w;
+  Y = 1;
+  var r = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
+  function n(l, s, i) {
+    var d = null;
+    if (i !== void 0 && (d = "" + i), s.key !== void 0 && (d = "" + s.key), "key" in s) {
+      i = {};
+      for (var x in s)
+        x !== "key" && (i[x] = s[x]);
+    } else i = s;
+    return s = i.ref, {
+      $$typeof: r,
+      type: l,
+      key: d,
+      ref: s !== void 0 ? s : null,
+      props: i
+    };
+  }
+  return w.Fragment = o, w.jsx = n, w.jsxs = n, w;
+}
+var E = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var H;
+function he() {
+  return H || (H = 1, process.env.NODE_ENV !== "production" && function() {
+    function r(t) {
+      if (t == null) return null;
+      if (typeof t == "function")
+        return t.$$typeof === ne ? null : t.displayName || t.name || null;
+      if (typeof t == "string") return t;
+      switch (t) {
+        case T:
+          return "Fragment";
+        case G:
+          return "Profiler";
+        case X:
+          return "StrictMode";
+        case te:
+          return "Suspense";
+        case re:
+          return "SuspenseList";
+        case ae:
+          return "Activity";
+      }
+      if (typeof t == "object")
+        switch (typeof t.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), t.$$typeof) {
+          case Z:
+            return "Portal";
+          case K:
+            return t.displayName || "Context";
+          case Q:
+            return (t._context.displayName || "Context") + ".Consumer";
+          case ee:
+            var a = t.render;
+            return t = t.displayName, t || (t = a.displayName || a.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
+          case se:
+            return a = t.displayName || null, a !== null ? a : r(t.type) || "Memo";
+          case R:
+            a = t._payload, t = t._init;
+            try {
+              return r(t(a));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function o(t) {
+      return "" + t;
+    }
+    function n(t) {
+      try {
+        o(t);
+        var a = !1;
+      } catch {
+        a = !0;
+      }
+      if (a) {
+        a = console;
+        var c = a.error, m = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
+        return c.call(
+          a,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          m
+        ), o(t);
+      }
+    }
+    function l(t) {
+      if (t === T) return "<>";
+      if (typeof t == "object" && t !== null && t.$$typeof === R)
+        return "<...>";
+      try {
+        var a = r(t);
+        return a ? "<" + a + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function s() {
+      var t = S.A;
+      return t === null ? null : t.getOwner();
+    }
+    function i() {
+      return Error("react-stack-top-frame");
+    }
+    function d(t) {
+      if ($.call(t, "key")) {
+        var a = Object.getOwnPropertyDescriptor(t, "key").get;
+        if (a && a.isReactWarning) return !1;
+      }
+      return t.key !== void 0;
+    }
+    function x(t, a) {
+      function c() {
+        z || (z = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          a
+        ));
+      }
+      c.isReactWarning = !0, Object.defineProperty(t, "key", {
+        get: c,
+        configurable: !0
+      });
+    }
+    function b() {
+      var t = r(this.type);
+      return L[t] || (L[t] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), t = this.props.ref, t !== void 0 ? t : null;
+    }
+    function j(t, a, c, m, _, M) {
+      var u = c.ref;
+      return t = {
+        $$typeof: h,
+        type: t,
+        key: a,
+        props: c,
+        _owner: m
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(t, "ref", {
+        enumerable: !1,
+        get: b
+      }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(t, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(t, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: _
+      }), Object.defineProperty(t, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: M
+      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
+    }
+    function f(t, a, c, m, _, M) {
+      var u = a.children;
+      if (u !== void 0)
+        if (m)
+          if (oe(u)) {
+            for (m = 0; m < u.length; m++)
+              v(u[m]);
+            Object.freeze && Object.freeze(u);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else v(u);
+      if ($.call(a, "key")) {
+        u = r(t);
+        var k = Object.keys(a).filter(function(le) {
+          return le !== "key";
+        });
+        m = 0 < k.length ? "{key: someKey, " + k.join(": ..., ") + ": ...}" : "{key: someKey}", V[u + m] || (k = 0 < k.length ? "{" + k.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          m,
+          u,
+          k,
+          u
+        ), V[u + m] = !0);
+      }
+      if (u = null, c !== void 0 && (n(c), u = "" + c), d(a) && (n(a.key), u = "" + a.key), "key" in a) {
+        c = {};
+        for (var A in a)
+          A !== "key" && (c[A] = a[A]);
+      } else c = a;
+      return u && x(
+        c,
+        typeof t == "function" ? t.displayName || t.name || "Unknown" : t
+      ), j(
+        t,
+        u,
+        c,
+        s(),
+        _,
+        M
+      );
+    }
+    function v(t) {
+      N(t) ? t._store && (t._store.validated = 1) : typeof t == "object" && t !== null && t.$$typeof === R && (t._payload.status === "fulfilled" ? N(t._payload.value) && t._payload.value._store && (t._payload.value._store.validated = 1) : t._store && (t._store.validated = 1));
+    }
+    function N(t) {
+      return typeof t == "object" && t !== null && t.$$typeof === h;
+    }
+    var y = ie, h = Symbol.for("react.transitional.element"), Z = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), X = Symbol.for("react.strict_mode"), G = Symbol.for("react.profiler"), Q = Symbol.for("react.consumer"), K = Symbol.for("react.context"), ee = Symbol.for("react.forward_ref"), te = Symbol.for("react.suspense"), re = Symbol.for("react.suspense_list"), se = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), ae = Symbol.for("react.activity"), ne = Symbol.for("react.client.reference"), S = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, oe = Array.isArray, C = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    y = {
+      react_stack_bottom_frame: function(t) {
+        return t();
+      }
+    };
+    var z, L = {}, F = y.react_stack_bottom_frame.bind(
+      y,
+      i
+    )(), D = C(l(i)), V = {};
+    E.Fragment = T, E.jsx = function(t, a, c) {
+      var m = 1e4 > S.recentlyCreatedOwnerStacks++;
+      return f(
+        t,
+        a,
+        c,
+        !1,
+        m ? Error("react-stack-top-frame") : F,
+        m ? C(l(t)) : D
+      );
+    }, E.jsxs = function(t, a, c) {
+      var m = 1e4 > S.recentlyCreatedOwnerStacks++;
+      return f(
+        t,
+        a,
+        c,
+        !0,
+        m ? Error("react-stack-top-frame") : F,
+        m ? C(l(t)) : D
+      );
+    };
+  }()), E;
+}
+process.env.NODE_ENV === "production" ? I.exports = ue() : I.exports = he();
+var e = I.exports;
+const Je = () => {
+  const [r, o] = p(!1), n = ce(!1), [l, s] = p(!1), i = async () => {
+    for (o(!0), n.current = !1; !n.current; )
+      await new Promise((x) => setTimeout(x, 0));
+    o(!1);
+  }, d = () => {
+    n.current = !0;
+  };
+  return /* @__PURE__ */ e.jsxs("section", { className: "bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden font-sans", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "p-6 border-b border-gray-100 bg-gray-50/50", children: [
+      /* @__PURE__ */ e.jsx("h3", { className: "text-xl font-bold text-gray-900 mb-2 flex items-center gap-2", children: '☕ The "Starbucks Queue" Simulator' }),
+      /* @__PURE__ */ e.jsxs("p", { className: "text-gray-600 text-sm", children: [
+        "JavaScript is ",
+        /* @__PURE__ */ e.jsx("strong", { children: "Single Threaded" }),
+        ". If a heavy task blocks the main thread, the browser cannot respond to clicks, typing, or rendering updates."
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "p-6 grid lg:grid-cols-2 gap-8 items-start", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "bg-amber-50 p-6 rounded-xl border border-amber-100", children: [
+          /* @__PURE__ */ e.jsx("div", { className: "flex gap-4 mb-4", children: r ? /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              onClick: d,
+              className: "flex-1 py-3 px-4 bg-red-600 text-white font-bold rounded-lg shadow-sm hover:bg-red-700 transition-all active:scale-95 animate-pulse",
+              children: "⏹️ Stop Process"
+            }
+          ) : /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              onClick: i,
+              className: "flex-1 py-3 px-4 bg-green-600 text-white font-bold rounded-lg shadow-sm hover:bg-green-700 transition-all active:scale-95",
+              children: "▶️ Start Heavy Process"
+            }
+          ) }),
+          /* @__PURE__ */ e.jsxs("div", { className: "bg-white p-4 rounded-lg border border-amber-200", children: [
+            /* @__PURE__ */ e.jsx("label", { className: "text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 block", children: "INTERACTIVITY TEST" }),
+            /* @__PURE__ */ e.jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: r ? "🚫 I can't type..." : "✍️ Type here to test responsiveness...",
+                className: `w-full px-3 py-2 rounded border transition-colors text-sm ${r ? "bg-red-50 border-red-200 cursor-not-allowed placeholder-red-400" : "bg-white border-gray-300 focus:border-amber-500 focus:ring-1 focus:ring-amber-500"}`
+              }
+            ),
+            /* @__PURE__ */ e.jsx("p", { className: "text-xs text-gray-400 mt-2 text-center", children: r ? "Notice the lag? The Main Thread is busy!" : "Silky smooth. The Main Thread is free." })
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            onClick: () => s(!l),
+            className: "text-sm font-medium text-blue-600 hover:text-blue-800 flex items-center gap-1",
+            children: l ? "▼ Hide Explanation" : "▶ How It Works (Pseudo-code)"
+          }
+        ),
+        l && /* @__PURE__ */ e.jsx("div", { className: "bg-gray-900 rounded-lg p-4 text-xs font-mono text-gray-300 overflow-x-auto", children: `// ❌ The Problem: Blocking the Main Thread
+function heavyTask() {
+  while (true) {
+    // This loop never ends!
+    // Browser cannot Paint, Click, or Type.
+  }
+}
+
+// ✅ The Simulator (What's happening now):
+async function energeticJank() {
+  while (shouldContinue) {
+    const start = Date.now();
+    // 1. Block thread for 500ms
+    while (Date.now() - start < 500) {
+       // Burn CPU 🔥
+    }
+    // 2. Yield briefly (allows you to click Stop)
+    await new Promise(r => setTimeout(r, 0));
+  }
+}` })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-center p-6 bg-gray-50 rounded-xl border border-gray-100 min-h-[300px]", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "relative w-48 h-48 flex items-center justify-center bg-white rounded-full border-4 border-gray-100 shadow-sm", children: [
+          /* @__PURE__ */ e.jsx("div", { className: `text-8xl transition-all duration-300 ${r ? "text-red-200 rotate-12" : "text-amber-400 animate-spin"}`, children: "⚙️" }),
+          /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 flex items-center justify-center flex-col", children: r ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            /* @__PURE__ */ e.jsx("div", { className: "text-4xl mb-1 animate-pulse", children: "🛑" }),
+            /* @__PURE__ */ e.jsx("span", { className: "bg-red-100 text-red-700 text-[10px] font-bold px-2 py-1 rounded-full border border-red-200", children: "BLOCKED" })
+          ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            /* @__PURE__ */ e.jsx("div", { className: "text-4xl mb-1", children: "☕" }),
+            /* @__PURE__ */ e.jsx("span", { className: "bg-green-100 text-green-700 text-[10px] font-bold px-2 py-1 rounded-full border border-green-200", children: "IDLE" })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "mt-6 text-center", children: [
+          /* @__PURE__ */ e.jsx("div", { className: "text-xs font-bold text-gray-400 uppercase tracking-widest mb-1", children: "THREAD STATUS" }),
+          /* @__PURE__ */ e.jsx("div", { className: `font-mono font-bold text-lg ${r ? "text-red-600" : "text-green-600"}`, children: r ? "FPS: ~1 (Laggy)" : "FPS: 60 (Smooth)" })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const B = (...r) => r.filter((o, n, l) => !!o && o.trim() !== "" && l.indexOf(o) === n).join(" ").trim();
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const pe = (r) => r.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ge = (r) => r.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (o, n, l) => l ? l.toUpperCase() : n.toLowerCase()
+);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const U = (r) => {
+  const o = ge(r);
+  return o.charAt(0).toUpperCase() + o.slice(1);
+};
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var be = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const fe = (r) => {
+  for (const o in r)
+    if (o.startsWith("aria-") || o === "role" || o === "title")
+      return !0;
+  return !1;
+};
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ye = q(
+  ({
+    color: r = "currentColor",
+    size: o = 24,
+    strokeWidth: n = 2,
+    absoluteStrokeWidth: l,
+    className: s = "",
+    children: i,
+    iconNode: d,
+    ...x
+  }, b) => O(
+    "svg",
+    {
+      ref: b,
+      ...be,
+      width: o,
+      height: o,
+      stroke: r,
+      strokeWidth: l ? Number(n) * 24 / Number(o) : n,
+      className: B("lucide", s),
+      ...!i && !fe(x) && { "aria-hidden": "true" },
+      ...x
+    },
+    [
+      ...d.map(([j, f]) => O(j, f)),
+      ...Array.isArray(i) ? i : [i]
+    ]
+  )
+);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const g = (r, o) => {
+  const n = q(
+    ({ className: l, ...s }, i) => O(ye, {
+      ref: i,
+      iconNode: o,
+      className: B(
+        `lucide-${pe(U(r))}`,
+        `lucide-${r}`,
+        l
+      ),
+      ...s
+    })
+  );
+  return n.displayName = U(r), n;
+};
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const je = [
+  [
+    "path",
+    {
+      d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2",
+      key: "169zse"
+    }
+  ]
+], W = g("activity", je);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ve = [
+  [
+    "path",
+    {
+      d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z",
+      key: "lc1i9w"
+    }
+  ],
+  ["path", { d: "m7 16.5-4.74-2.85", key: "1o9zyk" }],
+  ["path", { d: "m7 16.5 5-3", key: "va8pkn" }],
+  ["path", { d: "M7 16.5v5.17", key: "jnp8gn" }],
+  [
+    "path",
+    {
+      d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z",
+      key: "8zsnat"
+    }
+  ],
+  ["path", { d: "m17 16.5-5-3", key: "8arw3v" }],
+  ["path", { d: "m17 16.5 4.74-2.85", key: "8rfmw" }],
+  ["path", { d: "M17 16.5v5.17", key: "k6z78m" }],
+  [
+    "path",
+    {
+      d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z",
+      key: "1xygjf"
+    }
+  ],
+  ["path", { d: "M12 8 7.26 5.15", key: "1vbdud" }],
+  ["path", { d: "m12 8 4.74-2.85", key: "3rx089" }],
+  ["path", { d: "M12 13.5V8", key: "1io7kd" }]
+], Ne = g("boxes", ve);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ke = [
+  ["path", { d: "M12 18V5", key: "adv99a" }],
+  ["path", { d: "M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4", key: "1e3is1" }],
+  ["path", { d: "M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5", key: "1gqd8o" }],
+  ["path", { d: "M17.997 5.125a4 4 0 0 1 2.526 5.77", key: "iwvgf7" }],
+  ["path", { d: "M18 18a4 4 0 0 0 2-7.464", key: "efp6ie" }],
+  ["path", { d: "M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517", key: "1gq6am" }],
+  ["path", { d: "M6 18a4 4 0 0 1-2-7.464", key: "k1g0md" }],
+  ["path", { d: "M6.003 5.125a4 4 0 0 0-2.526 5.77", key: "q97ue3" }]
+], P = g("brain", ke);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const we = [
+  ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
+  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
+], Ee = g("circle-check-big", we);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const _e = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
+  ["path", { d: "m9 9 6 6", key: "z0biqf" }]
+], Te = g("circle-x", _e);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Re = [
+  ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }],
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
+], Se = g("clock", Re);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ce = [
+  ["path", { d: "m16 18 6-6-6-6", key: "eg8j8" }],
+  ["path", { d: "m8 6-6 6 6 6", key: "ppft3o" }]
+], Me = g("code", Ce);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ae = [
+  [
+    "path",
+    {
+      d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+      key: "zw3jo"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+      key: "1wduqc"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+      key: "kqbvx6"
+    }
+  ]
+], Pe = g("layers", Ae);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Oe = [
+  [
+    "path",
+    {
+      d: "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5",
+      key: "1gvzjb"
+    }
+  ],
+  ["path", { d: "M9 18h6", key: "x1upvd" }],
+  ["path", { d: "M10 22h4", key: "ceow96" }]
+], Ie = g("lightbulb", Oe);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const $e = [
+  ["path", { d: "M3 5h.01", key: "18ugdj" }],
+  ["path", { d: "M3 12h.01", key: "nlz23k" }],
+  ["path", { d: "M3 19h.01", key: "noohij" }],
+  ["path", { d: "M8 5h13", key: "1pao27" }],
+  ["path", { d: "M8 12h13", key: "1za7za" }],
+  ["path", { d: "M8 19h13", key: "m83p4d" }]
+], ze = g("list", $e);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Le = [
+  ["path", { d: "M14 4.1 12 6", key: "ita8i4" }],
+  ["path", { d: "m5.1 8-2.9-.8", key: "1go3kf" }],
+  ["path", { d: "m6 12-1.9 2", key: "mnht97" }],
+  ["path", { d: "M7.2 2.2 8 5.1", key: "1cfko1" }],
+  [
+    "path",
+    {
+      d: "M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z",
+      key: "s0h3yz"
+    }
+  ]
+], Fe = g("mouse-pointer-click", Le);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const De = [
+  ["path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8", key: "1p45f6" }],
+  ["path", { d: "M21 3v5h-5", key: "1q7to0" }]
+], Ve = g("rotate-cw", De);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ye = [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+], He = g("triangle-alert", Ye);
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ue = [
+  [
+    "path",
+    {
+      d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z",
+      key: "1xq2db"
+    }
+  ]
+], We = g("zap", Ue), Ze = () => {
+  const [r, o] = p(!1), [n, l] = p(0), [s, i] = p(!1);
+  return /* @__PURE__ */ e.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden font-sans", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "p-6 border-b border-gray-100 bg-gray-50/50", children: [
+      /* @__PURE__ */ e.jsxs("h3", { className: "text-xl font-bold text-gray-900 mb-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ e.jsx(Pe, { className: "text-blue-600", size: 24 }),
+        " Virtualization Strategy"
+      ] }),
+      /* @__PURE__ */ e.jsx("p", { className: "text-gray-600 text-sm", children: "Rendering 10,000 items crashes the browser. Virtualization only renders what is currently visible matches the viewport (plus a small buffer)." })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "p-6 grid md:grid-cols-[280px_1fr] gap-8", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "bg-blue-50 p-6 rounded-xl border border-blue-100", children: [
+          /* @__PURE__ */ e.jsxs("h4", { className: "font-bold text-blue-900 mb-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ e.jsx(ze, { size: 20 }),
+            " List Demo"
+          ] }),
+          /* @__PURE__ */ e.jsxs("p", { className: "text-xs text-blue-700 mb-4", children: [
+            "Toggle between rendering ",
+            /* @__PURE__ */ e.jsx("strong", { children: "10,000 Nodes" }),
+            " (Laggy) vs ",
+            /* @__PURE__ */ e.jsx("strong", { children: "~20 Nodes" }),
+            " (Smooth)."
+          ] }),
+          /* @__PURE__ */ e.jsxs(
+            "div",
+            {
+              className: "flex items-center gap-3 bg-white p-3 rounded-lg border border-blue-200 cursor-pointer hover:border-blue-300 transition-colors",
+              onClick: () => {
+                o(!r), l(0);
+              },
+              children: [
+                /* @__PURE__ */ e.jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: r,
+                    readOnly: !0,
+                    className: "w-5 h-5 text-blue-600 rounded focus:ring-blue-500 cursor-pointer"
+                  }
+                ),
+                /* @__PURE__ */ e.jsx("span", { className: "text-sm font-bold text-gray-700 select-none", children: "Enable Virtualization" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            onClick: () => i(!s),
+            className: "text-sm font-medium text-gray-500 hover:text-gray-800 flex items-center gap-1 transition-colors",
+            children: s ? "▼ Hide Code" : "▶ How It Works (Math)"
+          }
+        ),
+        s && /* @__PURE__ */ e.jsx("div", { className: "bg-gray-900 rounded-lg p-4 text-xs font-mono text-gray-300 overflow-x-auto shadow-inner", children: `// 🧮 The Math of Windowing:
+
+// 1. Where are we?
+const startIndex = Math.floor(scrollTop / 35px);
+
+// 2. How many fit?
+const visibleCount = Math.ceil(height / 35px);
+
+// 3. Render ONLY that slice
+const items = allItems.slice(
+  startIndex, 
+  startIndex + visibleCount + buffer
+);
+
+// 4. Fake the scroll height so scrollbar works
+<div style={{ height: totalItems * 35px }} />` })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ e.jsx("h5", { className: "font-bold text-gray-900 text-sm flex items-center gap-2", children: r ? /* @__PURE__ */ e.jsxs("span", { className: "text-green-600 flex items-center gap-1", children: [
+            /* @__PURE__ */ e.jsx(Ee, { size: 16 }),
+            " Optimized"
+          ] }) : /* @__PURE__ */ e.jsxs("span", { className: "text-red-600 flex items-center gap-1", children: [
+            /* @__PURE__ */ e.jsx(Te, { size: 16 }),
+            " Unoptimized"
+          ] }) }),
+          /* @__PURE__ */ e.jsx("div", { className: "text-xs font-mono text-gray-500", children: r ? "~10 DOM Nodes" : "10,000 DOM Nodes" })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            className: "border border-gray-200 rounded-lg overflow-auto relative bg-white shadow-inner",
+            style: { height: "320px" },
+            onScroll: (d) => l(d.currentTarget.scrollTop),
+            children: r ? (
+              // VIRTUALIZED LIST
+              /* @__PURE__ */ e.jsx("div", { style: { height: `${1e4 * 35}px`, position: "relative" }, children: (() => {
+                const j = Math.floor(n / 35), f = Math.min(1e4, j + Math.ceil(320 / 35)), v = Math.max(0, j - 5), N = Math.min(1e4, f + 5), y = [];
+                for (let h = v; h < N; h++)
+                  y.push(
+                    /* @__PURE__ */ e.jsxs(
+                      "div",
+                      {
+                        className: "absolute top-0 left-0 w-full h-[35px] border-b border-gray-50 px-4 flex items-center justify-between text-sm text-gray-600 hover:bg-blue-50 transition-colors",
+                        style: { transform: `translateY(${h * 35}px)` },
+                        children: [
+                          /* @__PURE__ */ e.jsxs("span", { children: [
+                            "Item #",
+                            h + 1
+                          ] }),
+                          /* @__PURE__ */ e.jsx("span", { className: "text-[10px] bg-gray-100 px-2 rounded-full text-gray-500", children: "Virtual" })
+                        ]
+                      },
+                      h
+                    )
+                  );
+                return y;
+              })() })
+            ) : (
+              // HEAVY LIST (Render All)
+              /* @__PURE__ */ e.jsx("div", { children: Array.from({ length: 1e4 }).map((d, x) => /* @__PURE__ */ e.jsxs(
+                "div",
+                {
+                  className: "h-[35px] border-b border-gray-50 px-4 flex items-center justify-between text-sm text-gray-600 hover:bg-red-50 transition-colors",
+                  children: [
+                    /* @__PURE__ */ e.jsxs("span", { children: [
+                      "Item #",
+                      x + 1
+                    ] }),
+                    /* @__PURE__ */ e.jsx("span", { className: "text-[10px] bg-red-100 text-red-700 px-2 rounded-full", children: "Heavy" })
+                  ]
+                },
+                x
+              )) })
+            )
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("div", { className: "mt-3 flex justify-between items-center bg-gray-50 p-3 rounded-lg border border-gray-100", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ e.jsx(Fe, { size: 14, className: "text-gray-400" }),
+            /* @__PURE__ */ e.jsx("span", { className: "text-gray-600", children: "Try scrolling fast!" })
+          ] }),
+          /* @__PURE__ */ e.jsx("span", { className: `text-xs font-bold ${r ? "text-green-600" : "text-red-500"}`, children: r ? "🚀 60 FPS Scrolling" : "🐌 Initial Lag / Scrolling Jitter" })
+        ] })
+      ] })
+    ] })
+  ] });
+}, Xe = () => {
+  const [r, o] = p(0), [n, l] = p(!1), [s, i] = p(!1);
+  return de(() => {
+    if (!n) return;
+    let d;
+    const x = () => {
+      o((b) => b + 1), d = requestAnimationFrame(x);
+    };
+    return x(), () => cancelAnimationFrame(d);
+  }, [n]), /* @__PURE__ */ e.jsxs("section", { className: "bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden font-sans", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "p-6 border-b border-gray-100 bg-gray-50/50", children: [
+      /* @__PURE__ */ e.jsxs("h3", { className: "text-xl font-bold text-gray-900 mb-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ e.jsx(W, { className: "text-blue-600", size: 24 }),
+        ' The "Renders are Bad" Myth'
+      ] }),
+      /* @__PURE__ */ e.jsxs("p", { className: "text-gray-600 text-sm", children: [
+        "React is fast. JavaScript blocking the main thread is what makes it feel slow. Let's prove that updating state ",
+        /* @__PURE__ */ e.jsx("strong", { children: "60 times per second" }),
+        " provides a smooth experience."
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "p-6 grid md:grid-cols-2 gap-8 items-center", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-baseline gap-2", children: [
+          /* @__PURE__ */ e.jsx("div", { className: `text-7xl font-mono font-bold tabular-nums tracking-tighter transition-colors ${n ? "text-blue-600" : "text-gray-300"}`, children: r }),
+          /* @__PURE__ */ e.jsx("span", { className: "text-sm font-bold text-gray-400 uppercase tracking-widest", children: "Renders" })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            onClick: () => l(!n),
+            className: `w-full py-4 px-6 rounded-xl font-bold text-lg transition-all shadow-lg transform hover:-translate-y-1 flex items-center justify-center gap-2 ${n ? "bg-red-500 text-white shadow-red-500/30" : "bg-blue-600 text-white shadow-blue-500/30"}`,
+            children: n ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              /* @__PURE__ */ e.jsx(He, { size: 20 }),
+              " Stop The Madness"
+            ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              /* @__PURE__ */ e.jsx(We, { size: 20 }),
+              " Start Fast Renders"
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("p", { className: "text-xs text-gray-500 text-center", children: [
+          "Updating state via ",
+          /* @__PURE__ */ e.jsx("code", { children: "requestAnimationFrame" }),
+          " (~16ms)"
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            onClick: () => i(!s),
+            className: "text-sm font-medium text-gray-500 hover:text-gray-800 flex items-center gap-1 mx-auto",
+            children: s ? "▼ Hide Code" : "▶ How It Works"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "space-y-4", children: s ? /* @__PURE__ */ e.jsxs("div", { className: "bg-gray-900 rounded-lg p-5 text-xs font-mono text-gray-300 shadow-inner overflow-hidden relative", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "absolute top-2 right-2 text-gray-600", children: /* @__PURE__ */ e.jsx(Me, { size: 16 }) }),
+        `// 🚀 This runs 60 times/sec
+// React handles this EASILY.
+
+useEffect(() => {
+  const animate = () => {
+    // 1. Update State
+    setCount(c => c + 1); 
+    
+    // 2. Schedule next frame
+    requestAnimationFrame(animate);
+  };
+  animate(); 
+}, []);`
+      ] }) : /* @__PURE__ */ e.jsxs("div", { className: "bg-blue-50 p-6 rounded-xl border border-blue-100 text-blue-800 text-sm leading-relaxed relative", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "absolute -top-3 -right-3 bg-blue-100 p-2 rounded-full", children: /* @__PURE__ */ e.jsx(W, { size: 20, className: "text-blue-600" }) }),
+        /* @__PURE__ */ e.jsx("p", { className: "mb-2", children: /* @__PURE__ */ e.jsx("strong", { children: "Wait, isn't re-rendering bad?" }) }),
+        /* @__PURE__ */ e.jsx("p", { className: "mb-2", children: "Not necessarily! React's Virtual DOM diffing is extremely optimized." }),
+        /* @__PURE__ */ e.jsxs("p", { children: [
+          "The problem usually isn't ",
+          /* @__PURE__ */ e.jsx("em", { children: "rendering" }),
+          " - it's ",
+          /* @__PURE__ */ e.jsx("strong", { children: "Computation" }),
+          ". If `render()` takes 50ms, then 60fps is impossible. But if `render()` is cheap, you can do it all day."
+        ] })
+      ] }) })
+    ] })
+  ] });
+}, J = ({ label: r }) => /* @__PURE__ */ e.jsxs("div", { className: "p-4 border border-gray-200 rounded-lg bg-gray-50 flex items-center justify-between", children: [
+  /* @__PURE__ */ e.jsxs("div", { children: [
+    /* @__PURE__ */ e.jsx("span", { className: "font-bold text-gray-700", children: r }),
+    /* @__PURE__ */ e.jsxs("div", { className: "text-xs text-red-500 font-mono mt-1 flex items-center gap-1", children: [
+      /* @__PURE__ */ e.jsx(Se, { size: 12 }),
+      " Rendered: ",
+      (/* @__PURE__ */ new Date()).toLocaleTimeString().split(" ")[0]
+    ] })
+  ] }),
+  /* @__PURE__ */ e.jsx("span", { className: "px-2 py-1 bg-gray-200 rounded text-xs text-gray-600 font-medium", children: "I am slow 🐌" })
+] }), qe = xe(J), Ge = () => {
+  const [r, o] = p(0), [n, l] = p(!1), [s, i] = p(!1), [d, x] = p(10), [b, j] = p(!1), [f, v] = p(!1), N = (h) => h * 2, y = me(() => N(d), [d, b ? "enabled" : Date.now()]);
+  return /* @__PURE__ */ e.jsxs("section", { className: "space-y-8 font-sans", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between bg-indigo-50 p-6 rounded-xl border border-indigo-100", children: [
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsxs("h3", { className: "text-xl font-bold text-indigo-900 mb-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ e.jsx(P, { className: "text-indigo-600", size: 24 }),
+          " Interactive Optimizations"
+        ] }),
+        /* @__PURE__ */ e.jsxs("p", { className: "text-indigo-700 text-sm", children: [
+          "Memoization is about ",
+          /* @__PURE__ */ e.jsx("strong", { children: "Caching" }),
+          ". Don't re-do work if the inputs haven't changed."
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          onClick: () => v(!f),
+          className: "text-sm font-bold text-indigo-600 hover:text-indigo-800 flex items-center gap-1 bg-white px-4 py-2 rounded-lg shadow-sm border border-indigo-200",
+          children: f ? "▼ Hide Logic" : "▶ How It Works"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "grid md:grid-cols-2 gap-8", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "bg-white p-8 rounded-2xl shadow-sm border border-gray-200 flex flex-col h-full", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "mb-6", children: [
+          /* @__PURE__ */ e.jsxs("h4", { className: "text-xl font-bold text-purple-600 mb-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ e.jsx(Ne, { size: 20 }),
+            " React.memo"
+          ] }),
+          /* @__PURE__ */ e.jsx("p", { className: "text-gray-600 text-sm", children: "Prevents a child component from re-rendering if its props haven't changed." })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "space-y-6 flex-1", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between p-4 bg-purple-50 rounded-xl", children: [
+            /* @__PURE__ */ e.jsxs("div", { children: [
+              /* @__PURE__ */ e.jsx("div", { className: "text-sm font-bold text-purple-900", children: "Parent State Updates" }),
+              /* @__PURE__ */ e.jsx("div", { className: "text-xs text-purple-700", children: "Clicking button forces Parent render" })
+            ] }),
+            /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: () => o((h) => h + 1),
+                className: "px-4 py-2 bg-purple-600 text-white rounded-lg font-bold shadow hover:bg-purple-700 active:scale-95 transition-all flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ e.jsx(Ve, { size: 16 }),
+                  " Force Render (",
+                  r,
+                  ")"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3 bg-white p-3 rounded-lg border border-purple-100 cursor-pointer", onClick: () => l(!n), children: [
+            /* @__PURE__ */ e.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: n,
+                readOnly: !0,
+                className: "w-5 h-5 text-purple-600 rounded focus:ring-purple-500 cursor-pointer"
+              }
+            ),
+            /* @__PURE__ */ e.jsxs("div", { className: "text-sm font-bold text-gray-700 select-none", children: [
+              "Enable ",
+              /* @__PURE__ */ e.jsx("code", { className: "bg-gray-100 px-1 rounded text-purple-600", children: "React.memo" })
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pt-4 border-t border-gray-100", children: [
+            /* @__PURE__ */ e.jsx("p", { className: "text-xs font-bold text-gray-400 uppercase tracking-widest mb-2", children: "CHILD COMPONENT" }),
+            n ? /* @__PURE__ */ e.jsx(qe, { label: "I am Memoized (Stable)" }) : /* @__PURE__ */ e.jsx(J, { label: "I am NOT Memoized" })
+          ] })
+        ] }),
+        f && /* @__PURE__ */ e.jsx("div", { className: "mt-4 bg-gray-900 rounded-lg p-3 text-xs font-mono text-gray-300", children: `const Child = React.memo((props) => {
+  // Only re-renders if 
+  // prevProps !== nextProps
+  return <div>{props.label}</div>;
+});` })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: `p-8 rounded-2xl shadow-sm border transition-colors duration-300 flex flex-col h-full ${s ? "bg-gray-900 border-gray-700" : "bg-white border-gray-200"}`, children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "mb-6", children: [
+          /* @__PURE__ */ e.jsxs("h4", { className: `text-xl font-bold mb-2 flex items-center gap-2 ${s ? "text-blue-400" : "text-blue-600"}`, children: [
+            /* @__PURE__ */ e.jsx(P, { size: 20 }),
+            " useMemo"
+          ] }),
+          /* @__PURE__ */ e.jsx("p", { className: `text-sm ${s ? "text-gray-400" : "text-gray-600"}`, children: "Caches a heavy calculation result. It only re-runs if dependencies change." })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "space-y-6 flex-1", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: `p-4 rounded-xl flex items-center justify-between ${s ? "bg-gray-800" : "bg-blue-50"}`, children: [
+            /* @__PURE__ */ e.jsxs("div", { children: [
+              /* @__PURE__ */ e.jsx("div", { className: `text-sm font-bold ${s ? "text-gray-200" : "text-blue-900"}`, children: "Unrelated State" }),
+              /* @__PURE__ */ e.jsx("div", { className: `text-xs ${s ? "text-gray-500" : "text-blue-700"}`, children: "Toggling theme triggers render." })
+            ] }),
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: () => i(!s),
+                className: `px-4 py-2 rounded-lg font-bold shadow transition-all flex items-center gap-2 ${s ? "bg-gray-700 text-white hover:bg-gray-600" : "bg-white text-blue-600 hover:bg-blue-100"}`,
+                children: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                  /* @__PURE__ */ e.jsx(Ie, { size: 16 }),
+                  " Light"
+                ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                  /* @__PURE__ */ e.jsx(P, { size: 16 }),
+                  " Dark"
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: `flex items-center gap-3 p-3 rounded-lg border cursor-pointer ${s ? "bg-gray-800 border-gray-700" : "bg-white border-gray-100"}`, onClick: () => j(!b), children: [
+            /* @__PURE__ */ e.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: b,
+                readOnly: !0,
+                className: "w-5 h-5 text-blue-600 rounded focus:ring-blue-500 cursor-pointer"
+              }
+            ),
+            /* @__PURE__ */ e.jsxs("div", { className: `text-sm font-bold select-none ${s ? "text-gray-300" : "text-gray-700"}`, children: [
+              "Enable ",
+              /* @__PURE__ */ e.jsx("code", { className: `px-1 rounded ${s ? "bg-gray-700 text-blue-400" : "bg-gray-100 text-blue-600"}`, children: "useMemo" })
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: `pt-4 border-t ${s ? "border-gray-800" : "border-gray-100"}`, children: [
+            /* @__PURE__ */ e.jsx("p", { className: "text-xs font-bold text-gray-400 uppercase tracking-widest mb-2", children: "EXPENSIVE CALCULATION" }),
+            /* @__PURE__ */ e.jsxs("div", { className: `p-4 rounded-lg flex flex-col gap-2 ${s ? "bg-gray-800" : "bg-gray-50"}`, children: [
+              /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center", children: [
+                /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ e.jsxs("span", { className: `text-sm ${s ? "text-gray-300" : "text-gray-600"}`, children: [
+                    "Input: ",
+                    d
+                  ] }),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      onClick: () => x((h) => h + 1),
+                      className: "px-2 py-0.5 bg-gray-200 rounded text-xs hover:bg-gray-300 font-bold text-gray-700",
+                      children: "+"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e.jsxs("span", { className: "font-mono font-bold text-green-500", children: [
+                  "Result: ",
+                  y
+                ] })
+              ] }),
+              /* @__PURE__ */ e.jsx("div", { className: `text-xs ${s ? "text-gray-500" : "text-gray-400"}`, children: "(Simulated 100ms lag on calculation)" }),
+              !b && /* @__PURE__ */ e.jsx("div", { className: "text-xs text-red-500 bg-red-50 p-2 rounded border border-red-100 font-bold", children: "⚠️ Lagged during Theme Toggle!" })
+            ] })
+          ] })
+        ] }),
+        f && /* @__PURE__ */ e.jsx("div", { className: "mt-4 bg-gray-900 rounded-lg p-3 text-xs font-mono text-gray-300", children: `const value = useMemo(() => {
+  // 🐢 Heavy Math (100ms)
+  return calculate(input);
+}, [input]); // 👈 Only runs if 'input' changes` })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Je as JankSimulator,
+  Ge as MemoizationLab,
+  Xe as RenderVisualizer,
+  Ze as VirtualList
+};