zabi-components 1.0.0

package/dist/NotificationManager-BGzRVJn7.js

@@ -0,0 +1,74 @@
+import { p as g, l as _, a as H, i as J, c as K, f as O, b as Q, d as p, e as R, g as S, h as r, u as o, j as C, k as U, s as w, m as l, t as k, n as V, o as a, q as M, r as W, v as X, w as Y, x as Z, y as $ } from "./index-DInFKA3g.js";
+import { createEventDispatcher as ee } from "svelte";
+var te = C('<div><div class="flex items-center"><svg class="w-5 h-5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg> <span class="text-sm font-medium flex-1"> </span></div> <button class="ml-3 flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity" aria-label="Close notification"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button></div>'), se = C("<div></div>");
+function oe(N, i) {
+  S(i, !1);
+  let t = g(i, "notifications", 28, () => []), d = g(i, "position", 8, "top-right"), c = g(i, "maxNotifications", 8, 5);
+  const L = ee(), j = "px-4 py-3 rounded-md border flex items-center justify-between mb-3 shadow-lg", u = {
+    success: "bg-green-100 border-green-400 text-green-700",
+    error: "bg-red-100 border-red-400 text-red-700",
+    warning: "bg-yellow-100 border-yellow-400 text-yellow-700",
+    info: "bg-blue-100 border-blue-400 text-blue-700",
+    default: "bg-gray-100 border-gray-400 text-gray-700"
+  }, v = {
+    success: "M5 13l4 4L19 7",
+    error: "M6 18L18 6M6 6l12 12",
+    warning: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L3.732 16c-.77.833.192 2.5 1.732 2.5z",
+    info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+    default: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+  }, z = {
+    "top-right": "fixed top-4 right-4",
+    "top-left": "fixed top-4 left-4",
+    "bottom-right": "fixed bottom-4 right-4",
+    "bottom-left": "fixed bottom-4 left-4"
+  };
+  function B(e) {
+    return `${j} ${u[e] || u.default}`;
+  }
+  function E(e) {
+    return v[e] || v.default;
+  }
+  function m(e) {
+    L("remove", { id: e });
+  }
+  _(
+    () => (r(t()), r(c())),
+    () => {
+      t().length > c() && t(t().slice(-c()));
+    }
+  ), _(() => r(t()), () => {
+    t().length > 0 && t().forEach((e) => {
+      e.duration && e.duration > 0 && setTimeout(
+        () => {
+          m(e.id);
+        },
+        e.duration
+      );
+    });
+  }), H(), J();
+  var b = K(), q = O(b);
+  {
+    var D = (e) => {
+      var f = se();
+      U(f, 5, t, (h) => h.id, (h, s) => {
+        var n = te(), x = l(n), y = l(x), I = l(y), P = w(y, 2), T = l(P), A = w(x, 2);
+        k(
+          (F, G) => {
+            M(n, 1, F), W(I, "d", G), X(T, (a(s), o(() => a(s).message)));
+          },
+          [
+            () => V((a(s), o(() => B(a(s).type)))),
+            () => (a(s), o(() => E(a(s).type)))
+          ]
+        ), Y("click", A, () => m(a(s).id)), Z(3, n, () => $, () => ({ x: d().includes("right") ? 300 : -300, duration: 300 })), p(h, n);
+      }), k(() => M(f, 1, `${r(d()), o(() => z[d()]) ?? ""} z-50 max-w-sm w-full space-y-2`)), p(e, f);
+    };
+    Q(q, (e) => {
+      r(t()), o(() => t().length > 0) && e(D);
+    });
+  }
+  p(N, b), R();
+}
+export {
+  oe as N
+};

package/dist/Skeleton-CaVpFsgI.js

@@ -0,0 +1,620 @@
+import { p as l, l as X, a as ue, i as de, j as P, b as E, d as r, e as se, g as ie, h as j, o as t, z as q, m as u, A as N, f as $, s as I, t as m, q as D, n as G, w as Z, u as ne, E as ve, r as ee, F as we, c as ae, B as oe, v as K, C as fe, G as le } from "./index-DInFKA3g.js";
+import { f as me, s as Q, g as _e } from "./Toggle-q1tBzXDR.js";
+import { createEventDispatcher as ge, onMount as he } from "svelte";
+var pe = P("<div></div>"), je = ve('<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" class="svelte-14njway"></path></svg>'), Ce = ve('<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" class="svelte-14njway"></path></svg>'), ke = P('<button type="button"><!> <!> <!> <!></button> <button type="button" aria-label="Close badge"><svg class="w-full h-full svelte-14njway" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" class="svelte-14njway"></path></svg></button>', 1), Pe = P("<div></div>"), Le = ve('<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" class="svelte-14njway"></path></svg>'), Ee = ve('<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" class="svelte-14njway"></path></svg>'), Ie = P("<span><!> <!> <!> <!></span>"), Be = P('<div class="inline-flex items-center gap-1 svelte-14njway"><!></div>');
+const Me = {
+  hash: "svelte-14njway",
+  code: `
+    /* Hover effects for closable badges */.badge-closable.svelte-14njway:hover {transform:translateY(-1px);box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}.badge-closable.svelte-14njway:active {transform:translateY(0);}
+
+    /* Focus styles for accessibility */.badge-closable.svelte-14njway:focus {outline:2px solid var(--color-plasma-red-500);outline-offset:2px;}
+
+    /* Animation for badge appearance */
+    @keyframes svelte-14njway-badge-enter {
+        0% {
+            opacity: 0;
+            transform: scale(0.8);
+        }
+        100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }.badge-enter.svelte-14njway {
+        animation: svelte-14njway-badge-enter 0.2s ease-out;}
+
+    /* Animation for badge removal */
+    @keyframes svelte-14njway-badge-exit {
+        0% {
+            opacity: 1;
+            transform: scale(1);
+        }
+        100% {
+            opacity: 0;
+            transform: scale(0.8);
+        }
+    }.badge-exit.svelte-14njway {
+        animation: svelte-14njway-badge-exit 0.2s ease-in;}
+
+    /* Dot animation */.badge-dot.svelte-14njway {
+        animation: svelte-14njway-badge-dot-pulse 2s infinite;}
+
+    @keyframes svelte-14njway-badge-dot-pulse {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.5;
+        }
+    }
+
+    /* Icon rotation for loading states */.badge-icon-loading.svelte-14njway {
+        animation: svelte-14njway-badge-icon-spin 1s linear infinite;}
+
+    @keyframes svelte-14njway-badge-icon-spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }`
+};
+function Qe(H, e) {
+  ie(e, !1), me(H, Me);
+  const x = q(), w = q(), b = q(), a = q(), d = q(), h = q(), W = q();
+  let T = l(e, "variant", 8, "default"), g = l(e, "size", 8, "md"), i = l(e, "shape", 8, "rounded"), c = l(e, "dot", 8, !1), _ = l(e, "closable", 8, !1), s = l(e, "icon", 8, void 0), L = l(e, "iconPosition", 8, "left");
+  const F = ge();
+  function R(n) {
+    n.stopPropagation(), F("close", { event: n });
+  }
+  function B(n) {
+    F("click", { event: n });
+  }
+  X(() => {
+  }, () => {
+    N(x, {
+      sm: "px-2 py-0.5 text-xs",
+      md: "px-3 py-1 text-sm",
+      lg: "px-4 py-1.5 text-base"
+    });
+  }), X(() => {
+  }, () => {
+    N(w, {
+      default: "bg-dark-700 text-white border-dark-600",
+      success: "bg-matrix-green-900/20 text-matrix-green-400 border-matrix-green-500/30 grainy-green",
+      warning: "bg-cyber-amber-900/20 text-cyber-amber-400 border-cyber-amber-500/30 grainy-amber",
+      error: "bg-blood-red-900/20 text-blood-red-400 border-blood-red-500/30 grainy-red",
+      info: "bg-blue-900/20 text-blue-400 border-blue-500/30 grainy-blue",
+      neutral: "bg-gray-800 text-gray-300 border-gray-600"
+    });
+  }), X(() => {
+  }, () => {
+    N(b, {
+      rounded: "rounded-md",
+      pill: "rounded-full",
+      square: "rounded-none"
+    });
+  }), X(() => {
+  }, () => {
+    N(a, { sm: "w-1.5 h-1.5", md: "w-2 h-2", lg: "w-2.5 h-2.5" });
+  }), X(
+    () => (t(x), j(g()), t(w), j(T()), t(b), j(i()), j(_())),
+    () => {
+      N(d, [
+        "inline-flex",
+        "items-center",
+        "gap-1.5",
+        "font-medium",
+        "border",
+        "transition-all",
+        "duration-200",
+        "ease-in-out",
+        "select-none",
+        "cursor-default",
+        t(x)[g()],
+        t(w)[T()],
+        t(b)[i()],
+        _() ? "cursor-pointer hover:opacity-80" : ""
+      ].join(" "));
+    }
+  ), X(() => j(g()), () => {
+    N(h, [
+      "flex-shrink-0",
+      g() === "sm" ? "w-3 h-3" : g() === "md" ? "w-4 h-4" : "w-5 h-5"
+    ].join(" "));
+  }), X(() => j(g()), () => {
+    N(W, [
+      "flex-shrink-0",
+      "ml-1",
+      "hover:bg-white/10",
+      "rounded-full",
+      "p-0.5",
+      "transition-colors",
+      "duration-150",
+      "ease-in-out",
+      g() === "sm" ? "w-3 h-3" : g() === "md" ? "w-4 h-4" : "w-5 h-5"
+    ].join(" "));
+  }), ue(), de();
+  var z = Be(), C = u(z);
+  {
+    var Y = (n) => {
+      var p = ke(), M = $(p), J = u(M);
+      {
+        var V = (f) => {
+          var A = pe();
+          m(() => D(
+            A,
+            1,
+            `w-2 h-2 rounded-full bg-current ${t(a), j(g()), ne(() => t(a)[g()]) ?? ""}`,
+            "svelte-14njway"
+          )), r(f, A);
+        };
+        E(J, (f) => {
+          c() && f(V);
+        });
+      }
+      var S = I(J, 2);
+      {
+        var o = (f) => {
+          var A = je(), te = u(A);
+          m(() => {
+            D(A, 0, G(t(h)), "svelte-14njway"), ee(te, "d", s());
+          }), r(f, A);
+        };
+        E(S, (f) => {
+          s() && L() === "left" && f(o);
+        });
+      }
+      var O = I(S, 2);
+      Q(O, e, "default", {}, null);
+      var U = I(O, 2);
+      {
+        var k = (f) => {
+          var A = Ce(), te = u(A);
+          m(() => {
+            D(A, 0, G(t(h)), "svelte-14njway"), ee(te, "d", s());
+          }), r(f, A);
+        };
+        E(U, (f) => {
+          s() && L() === "right" && f(k);
+        });
+      }
+      var y = I(M, 2);
+      m(() => {
+        D(M, 1, G(t(d)), "svelte-14njway"), D(y, 1, G(t(W)), "svelte-14njway");
+      }), Z("click", M, B), Z("keydown", M, (f) => f.key === "Enter" && B(f)), Z("click", y, R), Z("keydown", y, (f) => f.key === "Enter" && R(f)), r(n, p);
+    }, v = (n) => {
+      var p = Ie(), M = u(p);
+      {
+        var J = (k) => {
+          var y = Pe();
+          m(() => D(
+            y,
+            1,
+            `w-2 h-2 rounded-full bg-current ${t(a), j(g()), ne(() => t(a)[g()]) ?? ""}`,
+            "svelte-14njway"
+          )), r(k, y);
+        };
+        E(M, (k) => {
+          c() && k(J);
+        });
+      }
+      var V = I(M, 2);
+      {
+        var S = (k) => {
+          var y = Le(), f = u(y);
+          m(() => {
+            D(y, 0, G(t(h)), "svelte-14njway"), ee(f, "d", s());
+          }), r(k, y);
+        };
+        E(V, (k) => {
+          s() && L() === "left" && k(S);
+        });
+      }
+      var o = I(V, 2);
+      Q(o, e, "default", {}, null);
+      var O = I(o, 2);
+      {
+        var U = (k) => {
+          var y = Ee(), f = u(y);
+          m(() => {
+            D(y, 0, G(t(h)), "svelte-14njway"), ee(f, "d", s());
+          }), r(k, y);
+        };
+        E(O, (k) => {
+          s() && L() === "right" && k(U);
+        });
+      }
+      m(() => D(p, 1, G(t(d)), "svelte-14njway")), r(n, p);
+    };
+    E(C, (n) => {
+      _() ? n(Y) : n(v, !1);
+    });
+  }
+  r(H, z), se();
+}
+var De = P('<div class="absolute inset-0 bg-stone-800/50 rounded-lg flex items-center justify-center" aria-hidden="true"><div class="animate-spin rounded-full h-6 w-6 border-2 border-stone-400 border-t-transparent"></div></div>'), ze = P('<div><div class="card-header svelte-1qx5g6b"><!></div> <div class="card-content svelte-1qx5g6b"><!></div> <div class="card-footer svelte-1qx5g6b"><!></div> <!></div>');
+const Se = {
+  hash: "svelte-1qx5g6b",
+  code: ".card-header.svelte-1qx5g6b:empty {display:none;}.card-content.svelte-1qx5g6b:empty {display:none;}.card-footer.svelte-1qx5g6b:empty {display:none;}"
+};
+function Xe(H, e) {
+  ie(e, !1), me(H, Se);
+  const x = q(), w = q();
+  let b = l(e, "variant", 8, "default"), a = l(e, "density", 8, "comfortable"), d = l(e, "disabled", 8, !1), h = l(e, "loading", 8, !1), W = l(e, "className", 8, ""), T = l(e, "ariaLabel", 8, ""), g = l(e, "ariaDescribedBy", 8, "");
+  const i = ge(), c = {
+    compact: "p-3 sm:p-4 rounded-md shadow-sm",
+    comfortable: "p-4 sm:p-6 rounded-lg shadow-sm sm:shadow-md",
+    spacious: "p-6 sm:p-8 rounded-xl shadow-md sm:shadow-lg"
+  }, _ = {
+    default: "bg-stone-800 border border-stone-700",
+    interactive: "bg-stone-800 border border-stone-700 hover:bg-stone-700 hover:border-stone-600 focus:bg-stone-700 focus:border-stone-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-stone-900 cursor-pointer"
+  };
+  function s(o) {
+    if (d() || h()) {
+      o.preventDefault();
+      return;
+    }
+    i("click", o);
+  }
+  function L(o) {
+    if (!(d() || h())) {
+      if (b() === "interactive" && (o.key === "Enter" || o.key === " ")) {
+        o.preventDefault();
+        const O = new MouseEvent("click", { bubbles: !0, cancelable: !0, clientX: 0, clientY: 0 });
+        s(O);
+      }
+      o.key === "Escape" && o.target.blur();
+    }
+  }
+  function F(o) {
+    !d() && !h() && i("focus", o);
+  }
+  function R(o) {
+    !d() && !h() && i("blur", o);
+  }
+  function B(o) {
+    !d() && !h() && i("hover", o);
+  }
+  function z(o) {
+    !d() && !h() && i("leave", o);
+  }
+  X(
+    () => (j(b()), j(a()), j(d()), j(h()), j(W())),
+    () => {
+      N(x, [
+        "transition-all duration-200",
+        _[b()],
+        c[a()],
+        d() ? "opacity-50 cursor-not-allowed" : "",
+        h() ? "animate-pulse" : "",
+        W()
+      ].filter(Boolean).join(" "));
+    }
+  ), X(
+    () => (j(b()), j(d()), j(h()), j(T()), j(g())),
+    () => {
+      N(w, {
+        role: b() === "interactive" ? "button" : "presentation",
+        tabindex: b() === "interactive" ? d() ? -1 : 0 : void 0,
+        "aria-disabled": b() === "interactive" ? d() : void 0,
+        "aria-busy": h(),
+        "aria-label": T() || void 0,
+        "aria-describedby": g() || void 0
+      });
+    }
+  ), ue(), de();
+  var C = ze();
+  we(C, () => ({ class: t(x), ...t(w) }), void 0, void 0, "svelte-1qx5g6b");
+  var Y = u(C), v = u(Y);
+  Q(v, e, "header", {}, null);
+  var n = I(Y, 2), p = u(n);
+  Q(p, e, "default", {}, null);
+  var M = I(n, 2), J = u(M);
+  Q(J, e, "footer", {}, null);
+  var V = I(M, 2);
+  {
+    var S = (o) => {
+      var O = De();
+      r(o, O);
+    };
+    E(V, (o) => {
+      h() && o(S);
+    });
+  }
+  Z("click", C, s), Z("mouseenter", C, B), Z("mouseleave", C, z), Z("keydown", C, L), Z("focus", C, F), Z("blur", C, R), r(H, C), se();
+}
+var qe = P("<h1><!></h1>"), Ne = P("<h2><!></h2>"), Te = P("<h3><!></h3>"), Oe = P("<h4><!></h4>"), Ae = P("<h5><!></h5>"), He = P("<h6><!></h6>");
+function Ue(H, e) {
+  ie(e, !1);
+  const x = q();
+  let w = l(e, "level", 8, 1), b = l(e, "text", 8, ""), a = l(e, "color", 8, "text-white"), d = l(e, "spacing", 8, "normal");
+  const h = {
+    1: "!text-6xl md:!text-7xl font-bold leading-tight block",
+    2: "!text-4xl md:!text-5xl font-bold leading-tight block",
+    3: "!text-3xl md:!text-4xl font-semibold leading-snug block",
+    4: "!text-2xl md:!text-3xl font-semibold leading-snug block",
+    5: "!text-xl md:!text-2xl font-medium leading-normal block",
+    6: "!text-lg md:!text-xl font-medium leading-normal block"
+  }, W = {
+    tight: {
+      1: "mb-2",
+      2: "mb-3",
+      3: "mb-2",
+      4: "mb-2",
+      5: "mb-1",
+      6: "mb-1"
+    },
+    normal: {
+      1: "mb-4",
+      2: "mb-4",
+      3: "mb-3",
+      4: "mb-3",
+      5: "mb-2",
+      6: "mb-2"
+    },
+    loose: {
+      1: "mb-6",
+      2: "mb-6",
+      3: "mb-4",
+      4: "mb-4",
+      5: "mb-3",
+      6: "mb-3"
+    }
+  };
+  X(
+    () => (j(w()), j(a()), j(d())),
+    () => {
+      N(x, `${h[w()]} font-title ${a()} ${W[d()][w()]}`);
+    }
+  ), ue();
+  var T = ae(), g = $(T);
+  {
+    var i = (_) => {
+      var s = qe(), L = u(s);
+      Q(L, e, "default", {}, (F) => {
+        var R = oe();
+        m(() => K(R, b())), r(F, R);
+      }), m(() => D(s, 1, G(t(x)))), r(_, s);
+    }, c = (_) => {
+      var s = ae(), L = $(s);
+      {
+        var F = (B) => {
+          var z = Ne(), C = u(z);
+          Q(C, e, "default", {}, (Y) => {
+            var v = oe();
+            m(() => K(v, b())), r(Y, v);
+          }), m(() => D(z, 1, G(t(x)))), r(B, z);
+        }, R = (B) => {
+          var z = ae(), C = $(z);
+          {
+            var Y = (n) => {
+              var p = Te(), M = u(p);
+              Q(M, e, "default", {}, (J) => {
+                var V = oe();
+                m(() => K(V, b())), r(J, V);
+              }), m(() => D(p, 1, G(t(x)))), r(n, p);
+            }, v = (n) => {
+              var p = ae(), M = $(p);
+              {
+                var J = (S) => {
+                  var o = Oe(), O = u(o);
+                  Q(O, e, "default", {}, (U) => {
+                    var k = oe();
+                    m(() => K(k, b())), r(U, k);
+                  }), m(() => D(o, 1, G(t(x)))), r(S, o);
+                }, V = (S) => {
+                  var o = ae(), O = $(o);
+                  {
+                    var U = (y) => {
+                      var f = Ae(), A = u(f);
+                      Q(A, e, "default", {}, (te) => {
+                        var re = oe();
+                        m(() => K(re, b())), r(te, re);
+                      }), m(() => D(f, 1, G(t(x)))), r(y, f);
+                    }, k = (y) => {
+                      var f = ae(), A = $(f);
+                      {
+                        var te = (re) => {
+                          var ce = He(), ye = u(ce);
+                          Q(ye, e, "default", {}, (xe) => {
+                            var be = oe();
+                            m(() => K(be, b())), r(xe, be);
+                          }), m(() => D(ce, 1, G(t(x)))), r(re, ce);
+                        };
+                        E(
+                          A,
+                          (re) => {
+                            w() === 6 && re(te);
+                          },
+                          !0
+                        );
+                      }
+                      r(y, f);
+                    };
+                    E(
+                      O,
+                      (y) => {
+                        w() === 5 ? y(U) : y(k, !1);
+                      },
+                      !0
+                    );
+                  }
+                  r(S, o);
+                };
+                E(
+                  M,
+                  (S) => {
+                    w() === 4 ? S(J) : S(V, !1);
+                  },
+                  !0
+                );
+              }
+              r(n, p);
+            };
+            E(
+              C,
+              (n) => {
+                w() === 3 ? n(Y) : n(v, !1);
+              },
+              !0
+            );
+          }
+          r(B, z);
+        };
+        E(
+          L,
+          (B) => {
+            w() === 2 ? B(F) : B(R, !1);
+          },
+          !0
+        );
+      }
+      r(_, s);
+    };
+    E(g, (_) => {
+      w() === 1 ? _(i) : _(c, !1);
+    });
+  }
+  r(H, T), se();
+}
+var Fe = P('<img alt="" class="absolute inset-0 w-full h-full object-cover animate-pulse"/>'), Re = P('<img class="w-full h-full object-cover transition-opacity duration-300"/>'), Ve = P('<div class="absolute inset-0 bg-gray-200 flex items-center justify-center text-gray-500"><svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l2.586-2.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></div>'), Ge = P("<div><!> <!> <!></div>");
+function $e(H, e) {
+  ie(e, !1);
+  let x = l(e, "src", 8), w = l(e, "alt", 8, ""), b = l(e, "width", 8, "100%"), a = l(e, "height", 8, "auto"), d = l(e, "loading", 8, "lazy"), h = l(e, "className", 8, ""), W = l(e, "placeholder", 8, "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjNmNGY2Ii8+PC9zdmc+"), T = q(!1), g = q(!1), i = q(!1), c = q();
+  he(() => {
+    if (d() === "lazy") {
+      const v = new IntersectionObserver(
+        (n) => {
+          n.forEach((p) => {
+            p.isIntersecting && (N(i, !0), v.unobserve(p.target));
+          });
+        },
+        { rootMargin: "50px" }
+      );
+      return t(c) && v.observe(t(c)), () => v.disconnect();
+    } else
+      N(i, !0);
+  });
+  function _() {
+    N(T, !0);
+  }
+  function s() {
+    N(g, !0), console.warn("Failed to load image:", x());
+  }
+  de();
+  var L = Ge(), F = u(L);
+  {
+    var R = (v) => {
+      var n = Fe();
+      m(() => ee(n, "src", W())), r(v, n);
+    };
+    E(F, (v) => {
+      !t(T) && !t(g) && v(R);
+    });
+  }
+  var B = I(F, 2);
+  {
+    var z = (v) => {
+      var n = Re();
+      m(() => {
+        ee(n, "src", x()), ee(n, "alt", w()), ee(n, "loading", d()), fe(n, `opacity: ${t(T) ? 1 : 0};`);
+      }), Z("load", n, _), Z("error", n, s), r(v, n);
+    };
+    E(B, (v) => {
+      t(i) && !t(g) && v(z);
+    });
+  }
+  var C = I(B, 2);
+  {
+    var Y = (v) => {
+      var n = Ve();
+      r(v, n);
+    };
+    E(C, (v) => {
+      t(g) && v(Y);
+    });
+  }
+  _e(L, (v) => N(c, v), () => t(c)), m(() => {
+    D(L, 1, `relative overflow-hidden ${h() ?? ""}`), fe(L, `width: ${(typeof b() == "number" ? b() + "px" : b()) ?? ""}; height: ${(typeof a() == "number" ? a() + "px" : a()) ?? ""};`);
+  }), r(H, L), se();
+}
+var Ze = P('<div class="fixed bottom-4 left-4 bg-black/80 text-white p-4 rounded-lg text-xs font-mono z-50 max-w-xs"><div class="flex items-center justify-between mb-2"><h3 class="font-bold"> </h3> <button class="text-gray-400 hover:text-white">×</button></div> <div class="space-y-1"><div> </div> <div> </div> <div> </div> <div> </div> <div class="pt-1 border-t border-gray-600"><div class="font-semibold"> </div></div></div></div>');
+function et(H, e) {
+  ie(e, !1);
+  let x = l(e, "isVisible", 12, !1), w = l(e, "showInDev", 8, !0), b = l(e, "title", 8, "Debug Panel"), a = q({
+    domContentLoaded: 0,
+    loadComplete: 0,
+    firstPaint: 0,
+    firstContentfulPaint: 0,
+    largestContentfulPaint: 0,
+    cumulativeLayoutShift: 0
+  });
+  he(() => {
+    typeof window < "u" && "PerformanceObserver" in window && (new PerformanceObserver((i) => {
+      for (const c of i.getEntries())
+        c.name === "first-paint" && le(a, t(a).firstPaint = c.startTime);
+    }).observe({ entryTypes: ["paint"] }), new PerformanceObserver((i) => {
+      for (const c of i.getEntries())
+        c.name === "first-contentful-paint" && le(a, t(a).firstContentfulPaint = c.startTime);
+    }).observe({ entryTypes: ["paint"] }), new PerformanceObserver((i) => {
+      const c = i.getEntries(), _ = c[c.length - 1];
+      le(a, t(a).largestContentfulPaint = _.startTime);
+    }).observe({ entryTypes: ["largest-contentful-paint"] }), new PerformanceObserver((i) => {
+      for (const c of i.getEntries())
+        c.hadRecentInput || le(a, t(a).cumulativeLayoutShift += c.value);
+    }).observe({ entryTypes: ["layout-shift"] })), window.addEventListener("DOMContentLoaded", () => {
+      le(a, t(a).domContentLoaded = performance.now());
+    }), window.addEventListener("load", () => {
+      le(a, t(a).loadComplete = performance.now());
+    }), w();
+  });
+  function d(i) {
+    return `${Math.round(i)}ms`;
+  }
+  function h() {
+    const i = t(a).firstContentfulPaint, c = t(a).largestContentfulPaint, _ = t(a).cumulativeLayoutShift;
+    let s = 100;
+    return i > 1800 && (s -= 20), c > 2500 && (s -= 30), _ > 0.1 && (s -= 25), t(a).loadComplete > 3e3 && (s -= 25), s >= 90 ? "🟢 Excellent" : s >= 70 ? "🟡 Good" : s >= 50 ? "🟠 Needs Improvement" : "🔴 Poor";
+  }
+  de();
+  var W = ae(), T = $(W);
+  {
+    var g = (i) => {
+      var c = Ze(), _ = u(c), s = u(_), L = u(s), F = I(s, 2), R = I(_, 2), B = u(R), z = u(B), C = I(B, 2), Y = u(C), v = I(C, 2), n = u(v), p = I(v, 2), M = u(p), J = I(p, 2), V = u(J), S = u(V);
+      m(
+        (o, O, U, k, y) => {
+          K(L, b()), K(z, `FCP: ${o ?? ""}`), K(Y, `LCP: ${O ?? ""}`), K(n, `CLS: ${U ?? ""}`), K(M, `Load: ${k ?? ""}`), K(S, y);
+        },
+        [
+          () => (t(a), ne(() => d(t(a).firstContentfulPaint))),
+          () => (t(a), ne(() => d(t(a).largestContentfulPaint))),
+          () => (t(a), ne(() => t(a).cumulativeLayoutShift.toFixed(3))),
+          () => (t(a), ne(() => d(t(a).loadComplete))),
+          () => ne(h)
+        ]
+      ), Z("click", F, () => x(!1)), r(i, c);
+    };
+    E(T, (i) => {
+      x() && i(g);
+    });
+  }
+  r(H, W), se();
+}
+var We = P("<div></div>");
+function tt(H, e) {
+  let x = l(e, "width", 8, "100%"), w = l(e, "height", 8, "1rem"), b = l(e, "borderRadius", 8, "0.5rem"), a = l(e, "className", 8, "");
+  var d = We();
+  m(() => {
+    D(d, 1, `animate-pulse bg-stone-800 ${a() ?? ""}`), fe(d, `width: ${x() ?? ""}; height: ${w() ?? ""}; border-radius: ${b() ?? ""};`);
+  }), r(H, d);
+}
+export {
+  Qe as B,
+  Xe as C,
+  Ue as H,
+  $e as O,
+  et as P,
+  tt as S
+};