fiboui 2.2.0 → 2.2.1

package/dist/{builder-KLTu7nAI.js → builder-KX69ixME.js}

@@ -1,37 +1,37 @@
 "use client";
-var yt = Object.defineProperty;
-var _t = (r, t, e) => t in r ? yt(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var c = (r, t, e) => _t(r, typeof t != "symbol" ? t + "" : t, e);
-import g, { useRef as w, createContext as P, useContext as O, useCallback as E, useSyncExternalStore as I, useEffect as j, useState as q, memo as kt, cloneElement as Z } from "react";
-import { jsx as v, Fragment as B } from "react/jsx-runtime";
+var gt = Object.defineProperty;
+var bt = (r, t, e) => t in r ? gt(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var c = (r, t, e) => bt(r, typeof t != "symbol" ? t + "" : t, e);
+import g, { useRef as w, createContext as j, useContext as O, useCallback as E, useSyncExternalStore as B, useEffect as A, useState as q, cloneElement as yt } from "react";
+import { jsx as C, Fragment as W } from "react/jsx-runtime";
 class J {
   constructor() {
     c(this, "activeEffect", null);
   }
 }
-const Q = new J(), R = [Q];
+const Q = new J(), z = [Q];
 function tt() {
   return new J();
 }
 function et() {
-  return R[R.length - 1] ?? Q;
+  return z[z.length - 1] ?? Q;
 }
-function A() {
+function D() {
   return et().activeEffect;
 }
-function xt(r, t) {
-  R.push(r);
+function kt(r, t) {
+  z.push(r);
   try {
     return t();
   } finally {
-    R.pop();
+    z.pop();
   }
 }
 function M(r) {
   const t = et(), e = t.activeEffect;
   return t.activeEffect = r, e;
 }
-class wt {
+class _t {
   constructor(t) {
     c(this, "dependencies", /* @__PURE__ */ new Set());
     c(this, "_onDispose");
@@ -59,7 +59,7 @@ class wt {
     this.cleanup(), (t = this._onDispose) == null || t.call(this);
   }
 }
-class $t {
+class xt {
   constructor(t) {
     c(this, "dependencies", /* @__PURE__ */ new Set());
     this._onInvalidate = t;
@@ -85,14 +85,14 @@ class $t {
     this.cleanup();
   }
 }
-class z {
+class R {
   constructor(t) {
     c(this, "listeners", /* @__PURE__ */ new Set());
     c(this, "effects", /* @__PURE__ */ new Set());
     this._value = t;
   }
   get value() {
-    const t = A();
+    const t = D();
     return t && t.track(this), this._value;
   }
   set value(t) {
@@ -112,22 +112,22 @@ class z {
     t.forEach((s) => s.trigger()), e.forEach((s) => s(this._value));
   }
 }
-function ye(r) {
-  return new z(r);
+function ge(r) {
+  return new R(r);
 }
-class St {
+class $t {
   constructor(t) {
     c(this, "listeners", /* @__PURE__ */ new Set());
     c(this, "effects", /* @__PURE__ */ new Set());
     c(this, "_value");
     c(this, "_dirty", !0);
     c(this, "internalEffect");
-    this.fn = t, this.internalEffect = new wt(() => {
+    this.fn = t, this.internalEffect = new _t(() => {
       this._dirty || (this._dirty = !0, this.notify());
     });
   }
   get value() {
-    const t = A();
+    const t = D();
     if (t && t.track(this), this._dirty) {
       const e = M(this.internalEffect);
       try {
@@ -152,17 +152,17 @@ class St {
     t.forEach((s) => s.trigger()), e.forEach((s) => s(this._value));
   }
 }
-function _e(r) {
-  return new St(r);
+function be(r) {
+  return new $t(r);
 }
-class Nt {
+class wt {
   constructor(t) {
     c(this, "listeners", /* @__PURE__ */ new Set());
     c(this, "effects", /* @__PURE__ */ new Set());
     this._value = t;
   }
   get() {
-    const t = A();
+    const t = D();
     return t && t.track(this), this._value;
   }
   set(t) {
@@ -181,22 +181,22 @@ class Nt {
     Array.from(this.effects).forEach((t) => t.trigger()), Array.from(this.listeners).forEach((t) => t(this._value));
   }
 }
-function ke(r) {
-  return new Nt(r);
+function ye(r) {
+  return new wt(r);
 }
-class vt {
+class St {
   constructor(t) {
     c(this, "listeners", /* @__PURE__ */ new Set());
     c(this, "effects", /* @__PURE__ */ new Set());
     this.state = t;
   }
   getState() {
-    const t = A();
+    const t = D();
     return t && t.track(this), this.state;
   }
   setState(t) {
-    const e = typeof t == "function" ? t(this.state) : t, s = { ...this.state, ...e }, o = Object.keys(this.state), i = Object.keys(s);
-    o.length === i.length && i.every((a) => Object.is(s[a], this.state[a])) || (this.state = s, this.notify());
+    const e = typeof t == "function" ? t(this.state) : t, s = { ...this.state, ...e }, i = Object.keys(this.state), o = Object.keys(s);
+    i.length === o.length && o.every((a) => Object.is(s[a], this.state[a])) || (this.state = s, this.notify());
   }
   subscribe(t) {
     return this.listeners.add(t), () => this.listeners.delete(t);
@@ -211,115 +211,112 @@ class vt {
     Array.from(this.effects).forEach((t) => t.trigger()), Array.from(this.listeners).forEach((t) => t(this.state));
   }
 }
-function xe(r) {
-  return new vt(r);
+function ke(r) {
+  return new St(r);
 }
-const Ct = tt(), st = P(Ct);
-function Et() {
+const vt = tt(), st = j(vt);
+function Ct() {
   return O(st);
 }
-function we({ children: r, scope: t }) {
+function _e({ children: r, scope: t }) {
   const e = w(t ?? tt()).current;
-  return /* @__PURE__ */ v(st.Provider, { value: e, children: r });
+  return /* @__PURE__ */ C(st.Provider, { value: e, children: r });
 }
-function Mt({ children: r }) {
+function Nt({ children: r }) {
   const t = w(0), e = w(/* @__PURE__ */ new Set()), s = w(null);
-  s.current || (s.current = new $t(() => {
+  s.current || (s.current = new xt(() => {
     t.current += 1, e.current.forEach((l) => l());
   }));
-  const o = E((l) => (e.current.add(l), () => {
+  const i = E((l) => (e.current.add(l), () => {
     e.current.delete(l);
-  }), []), i = E(() => t.current, []);
-  I(o, i, i), j(() => () => {
+  }), []), o = E(() => t.current, []);
+  B(i, o, o), A(() => () => {
     var l;
     (l = s.current) == null || l.dispose();
   }, []);
-  const n = Et();
+  const n = Ct();
   let a = null;
   try {
-    a = xt(n, () => s.current.execute(r));
+    a = kt(n, () => s.current.execute(r));
   } catch {
     a = null;
   }
-  return /* @__PURE__ */ v(B, { children: a });
+  return /* @__PURE__ */ C(W, { children: a });
 }
-const Tt = P(/* @__PURE__ */ new Map()), rt = P(null);
-function $e(r) {
+const Et = j(/* @__PURE__ */ new Map()), rt = j(null);
+function xe(r) {
   const t = O(rt);
   if (!t)
     throw new Error("useBuilderState must be used under a builder that called .state()");
   return [t.get(r), (e) => t.set(r, e)];
 }
-function zt({ stateMap: r = /* @__PURE__ */ new Map(), children: t }) {
-  const [e, s] = q(() => new Map(r)), o = {
+function Mt({ stateMap: r = /* @__PURE__ */ new Map(), children: t }) {
+  const [e, s] = q(() => new Map(r)), i = {
     map: e,
-    get: (i) => e.get(i),
-    set: (i, n) => {
+    get: (o) => e.get(o),
+    set: (o, n) => {
       s((a) => {
-        if (Object.is(a.get(i), n))
+        if (Object.is(a.get(o), n))
           return a;
         const l = new Map(a);
-        return l.set(i, n), l;
+        return l.set(o, n), l;
       });
     }
   };
-  return /* @__PURE__ */ v(rt.Provider, { value: o, children: /* @__PURE__ */ v(Tt.Provider, { value: e, children: t }) });
+  return /* @__PURE__ */ C(rt.Provider, { value: i, children: /* @__PURE__ */ C(Et.Provider, { value: e, children: t }) });
 }
-function It({ observables: r, children: t }) {
-  const e = w(0), s = E((i) => {
+function Tt({ observables: r, children: t }) {
+  const e = w(0), s = E((o) => {
     const n = Array.from(r).map(
       (a) => a.subscribe(() => {
-        e.current += 1, i();
+        e.current += 1, o();
       })
     );
     return () => n.forEach((a) => a());
-  }, [r]), o = E(() => e.current, []);
-  return I(s, o, o), /* @__PURE__ */ v(B, { children: typeof t == "function" ? t() : t });
+  }, [r]), i = E(() => e.current, []);
+  return B(s, i, i), /* @__PURE__ */ C(W, { children: typeof t == "function" ? t() : t });
 }
-function Rt({ signals: r, children: t }) {
-  const e = w(0), s = E((i) => {
+function It({ signals: r, children: t }) {
+  const e = w(0), s = E((o) => {
     const n = Array.from(r).map(
       (a) => a.subscribe(() => {
-        e.current += 1, i();
+        e.current += 1, o();
       })
     );
     return () => n.forEach((a) => a());
-  }, [r]), o = E(() => e.current, []);
-  return I(s, o, o), /* @__PURE__ */ v(B, { children: typeof t == "function" ? t() : t });
+  }, [r]), i = E(() => e.current, []);
+  return B(s, i, i), /* @__PURE__ */ C(W, { children: typeof t == "function" ? t() : t });
 }
-const ot = P(/* @__PURE__ */ new Map());
-function Se(r) {
+const ot = j(/* @__PURE__ */ new Map());
+function $e(r) {
   const t = O(ot);
   return t == null ? void 0 : t.get(r);
 }
-function Pt({ providers: r = /* @__PURE__ */ new Map(), children: t }) {
-  return /* @__PURE__ */ v(ot.Provider, { value: r, children: t });
+function Rt({ providers: r = /* @__PURE__ */ new Map(), children: t }) {
+  return /* @__PURE__ */ C(ot.Provider, { value: r, children: t });
 }
-function jt(r) {
+function zt(r) {
   return !!r && typeof r == "object" && "build" in r && typeof r.build == "function";
 }
-function At(r) {
-  return g.isValidElement(r) ? r : jt(r) ? r.build() : r;
+function jt(r) {
+  return g.isValidElement(r) ? r : zt(r) ? r.build() : r;
 }
 function H(r) {
+  return typeof r == "string" || typeof r == "number";
+}
+function At(r, t) {
+  return g.isValidElement(r) && H(r.key) && r.key !== "" ? r.key : `.$fibo-${t}`;
+}
+function Dt(r, t) {
+  return !g.isValidElement(r) || H(r.key) && r.key !== "" ? r : g.cloneElement(r, { key: At(r, t) });
+}
+function K(r) {
   if (r == null)
     return [];
   const t = typeof r == "function" ? r() : r;
-  return (Array.isArray(t) ? t : [t]).map(At);
-}
-function Vt(r, t, e) {
-  if (!t) return r;
-  const s = e ?? (typeof window < "u" ? window.innerWidth : void 0);
-  if (s === void 0)
-    return r;
-  let o = { ...r };
-  return s < 768 && t.mobile ? o = { ...o, ...t.mobile } : s >= 768 && s < 1024 && t.tablet ? o = { ...o, ...t.tablet } : s >= 1024 && t.desktop && (o = { ...o, ...t.desktop }), o;
-}
-function Ne(r, t) {
-  const e = kt(r, t);
-  return (s) => g.createElement(e, s);
+  return (Array.isArray(t) ? t : [t]).map((s, i) => Dt(jt(s), i));
 }
-const Y = /* @__PURE__ */ new Map(), Dt = {
+const Y = /* @__PURE__ */ new Map(), Lt = {
   easeIn: "ease-in",
   easeOut: "ease-out",
   easeInOut: "ease-in-out",
@@ -327,26 +324,26 @@ const Y = /* @__PURE__ */ new Map(), Dt = {
   ease: "ease"
 };
 function it(r = {}) {
-  const t = r.stiffness ?? 170, e = r.damping ?? 26, s = r.mass ?? 1, o = `${t}:${e}:${s}`, i = Y.get(o);
-  if (i) return i;
+  const t = r.stiffness ?? 170, e = r.damping ?? 26, s = r.mass ?? 1, i = `${t}:${e}:${s}`, o = Y.get(i);
+  if (o) return o;
   const n = 1 / 60, a = 1;
-  let l = 0, h = 0;
-  const f = [0];
+  let l = 0, d = 0;
+  const h = [0];
   for (let b = 0; b < 180; b += 1) {
-    const k = -t * (l - a) - e * h;
-    if (h += k / s * n, l += h * n, f.push(l), b > 8 && Math.abs(l - a) < 2e-3 && Math.abs(h) < 2e-3) break;
+    const x = -t * (l - a) - e * d;
+    if (d += x / s * n, l += d * n, h.push(l), b > 8 && Math.abs(l - a) < 2e-3 && Math.abs(d) < 2e-3) break;
   }
-  f[f.length - 1] !== 1 && f.push(1);
-  const m = Math.max(1, Math.floor((f.length - 1) / 24)), p = [];
-  for (let b = 0; b < f.length; b += m) {
-    const k = b / (f.length - 1), $ = Math.round(f[b] * 1e4) / 1e4;
-    p.push(b === 0 ? `${$}` : `${$} ${Math.round(k * 1e4) / 100}%`);
+  h[h.length - 1] !== 1 && h.push(1);
+  const m = Math.max(1, Math.floor((h.length - 1) / 24)), p = [];
+  for (let b = 0; b < h.length; b += m) {
+    const x = b / (h.length - 1), S = Math.round(h[b] * 1e4) / 1e4;
+    p.push(b === 0 ? `${S}` : `${S} ${Math.round(x * 1e4) / 100}%`);
   }
   const y = `linear(${p.join(", ")})`;
-  return Y.set(o, y), y;
+  return Y.set(i, y), y;
 }
-function N(r, t) {
-  return r === "spring" ? it(t) : Dt[r] ?? r;
+function v(r, t) {
+  return r === "spring" ? it(t) : Lt[r] ?? r;
 }
 const U = [
   "fadeIn",
@@ -364,30 +361,30 @@ const U = [
   "blur",
   "pop",
   "bounce"
-], Lt = {
+], Vt = {
   fade: "fadeIn",
   scale: "scaleIn",
   blur: "blurIn"
 };
-function Ft(r) {
+function Pt(r) {
   if (!r || typeof r != "object") return !1;
   const t = r;
   return typeof t.from == "object" && t.from !== null && typeof t.to == "object" && t.to !== null;
 }
-function K(r) {
+function G(r) {
   const t = /* @__PURE__ */ new Set(["opacity", "zIndex", "z-index", "flex", "fontWeight", "lineHeight"]);
   return Object.entries(r).map(([e, s]) => {
-    const o = e.replace(/[A-Z]/g, (n) => `-${n.toLowerCase()}`), i = typeof s == "number" && !t.has(e) ? `${s}px` : String(s);
-    return `${o}: ${i}`;
+    const i = e.replace(/[A-Z]/g, (n) => `-${n.toLowerCase()}`), o = typeof s == "number" && !t.has(e) ? `${s}px` : String(s);
+    return `${i}: ${o}`;
   }).join("; ");
 }
-function Wt(r) {
+function Ft(r) {
   let t = 5381;
   for (let e = 0; e < r.length; e += 1) t = (t << 5) + t ^ r.charCodeAt(e);
   return (t >>> 0).toString(36);
 }
 function Ot(r) {
-  const t = Lt[r] ?? r;
+  const t = Vt[r] ?? r;
   if (!U.includes(t))
     throw new Error(`Unknown motion preset "${r}". Use: ${U.join(", ")}`);
   return t;
@@ -531,53 +528,76 @@ const F = `
     filter: none !important;
   }
 }
-`.trim(), S = class S {
+`.trim();
+function Z(r) {
+  let t = 5381;
+  for (let e = 0; e < r.length; e += 1)
+    t = (t << 5) + t ^ r.charCodeAt(e);
+  return (t >>> 0).toString(36);
+}
+const $ = class $ {
   constructor() {
     c(this, "sheet", null);
     c(this, "cache", /* @__PURE__ */ new Map());
     c(this, "extras", []);
     c(this, "defaultsReady", !1);
-    typeof document < "u" && (this.sheet = document.createElement("style"), this.sheet.id = "fibo-dynamic-styles", document.head.appendChild(this.sheet)), this.ensureDefaults();
+    this.attachSheet(), this.ensureDefaults();
   }
   static getInstance() {
-    return S.instance || (S.instance = new S()), S.instance;
+    return $.instance || ($.instance = new $()), $.instance;
+  }
+  /** Test-only: empty cache/sheet so a simulated client starts cold. */
+  reset() {
+    this.cache.clear(), this.extras = [], this.defaultsReady = !1, this.sheet = null, this.attachSheet(), this.ensureDefaults();
+  }
+  static resetForTests() {
+    $.getInstance().reset();
+  }
+  attachSheet() {
+    if (typeof document > "u") return;
+    const t = document.getElementById("fibo-dynamic-styles");
+    if (t) {
+      this.sheet = t, this.defaultsReady = !0;
+      return;
+    }
+    this.sheet = document.createElement("style"), this.sheet.id = "fibo-dynamic-styles", this.sheet.setAttribute("data-fibo", "1"), document.head.appendChild(this.sheet);
   }
   /**
-   * CSS `@media` rule, deduped. Used by `.media()` / `.md()` — not JS resize.
+   * CSS `@media` rule, deduped. Used by `.media()` / `.md()` / `.responsive()` — not JS resize.
    */
   registerMedia(t, e, s) {
-    const o = `@media ${t}|${e}:${s}`;
-    if (this.cache.has(o))
-      return this.cache.get(o);
-    const i = `fibo-mq-${Bt(o)}`, n = `@media ${t} { .${i} { ${e}: ${s} !important; } }`;
-    return this.insert(n), this.cache.set(o, i), i;
+    const i = `@media ${t}|${e}:${s}`;
+    if (this.cache.has(i))
+      return this.cache.get(i);
+    const o = `fibo-mq-${Z(i)}`, n = `@media ${t} { .${o} { ${e}: ${s} !important; } }`;
+    return this.insert(n), this.cache.set(i, o), o;
   }
   ensureDefaults() {
     var t;
     this.defaultsReady || (this.defaultsReady = !0, this.sheet && !((t = this.sheet.textContent) != null && t.includes("fibo-fadeIn")) && this.sheet.appendChild(document.createTextNode(F)));
   }
   getCss() {
-    var e;
     this.ensureDefaults();
-    const t = (e = this.sheet) != null && e.sheet ? Array.from(this.sheet.sheet.cssRules).map((s) => s.cssText).join(`
-`) : "";
-    return [F, ...this.extras, t].filter(Boolean).join(`
+    const t = [...this.extras].sort();
+    return [F, ...t].filter(Boolean).join(`
 `);
   }
   registerKeyframes(t, e, s) {
-    const o = `kf:${e}=>${s}`;
-    if (this.cache.has(o)) return this.cache.get(o);
-    const i = `fibo-c-${t}`;
-    return this.insert(`@keyframes ${i} { from { ${e} } to { ${s} } }`), this.insert(`.${i} { animation-name: ${i}; }`), this.cache.set(o, i), i;
+    const i = `kf:${e}=>${s}`;
+    if (this.cache.has(i)) return this.cache.get(i);
+    const o = `fibo-c-${t}`;
+    return this.insert(`@keyframes ${o} { from { ${e} } to { ${s} } }`), this.insert(`.${o} { animation-name: ${o}; }`), this.cache.set(i, o), o;
   }
   insert(t, e = !0) {
-    if (e && this.extras.push(t), this.sheet && this.sheet.sheet)
-      try {
-        this.sheet.sheet.insertRule(t, this.sheet.sheet.cssRules.length);
-      } catch {
-        this.sheet && this.sheet.appendChild(document.createTextNode(t));
-      }
-    else this.sheet && this.sheet.appendChild(document.createTextNode(t));
+    var s;
+    if (!(e && this.extras.includes(t)) && (e && this.extras.push(t), !(this.sheet && ((s = this.sheet.textContent) != null && s.includes(t)))))
+      if (this.sheet && this.sheet.sheet)
+        try {
+          this.sheet.sheet.insertRule(t, this.sheet.sheet.cssRules.length);
+        } catch {
+          this.sheet && this.sheet.appendChild(document.createTextNode(t));
+        }
+      else this.sheet && this.sheet.appendChild(document.createTextNode(t));
   }
   /** Set a `:root` custom property (e.g. `--fibo-sticky-offset`). */
   registerRoot(t, e) {
@@ -593,110 +613,118 @@ const F = `
     const s = `${t}:${e}`;
     if (this.cache.has(s))
       return this.cache.get(s);
-    const o = e.replace(/[^a-zA-Z0-9-]/g, "_"), i = `fibo-${t}-${o}`, n = `.${i} { ${t}: ${e} !important; }`;
-    return this.insert(n), this.cache.set(s, i), i;
+    const i = e.replace(/[^a-zA-Z0-9-]/g, "_"), o = `fibo-${t}-${i}`, n = `.${o} { ${t}: ${e} !important; }`;
+    return this.insert(n), this.cache.set(s, o), o;
   }
-  registerPseudo(t, e, s, o) {
-    const i = `${t}:${e}:${s}:${o}`;
-    if (this.cache.has(i))
-      return t;
-    const n = `.${t}:${e} { ${s}: ${o} !important; }`;
-    return this.insert(n), this.cache.set(i, t), t;
+  /**
+   * One class per (pseudo, property, value). Same rules → same class on server and client.
+   * Order-independent: each declaration hashes on its own.
+   */
+  registerPseudo(t, e, s, i = !1) {
+    const o = `${i ? "group:" : ""}${t}:${e}:${s}`;
+    if (this.cache.has(o))
+      return this.cache.get(o);
+    const n = `fibo-ps-${Z(o)}`, a = i ? `.group:${t} .${n} { ${e}: ${s} !important; }` : `.${n}:${t} { ${e}: ${s} !important; }`;
+    return this.insert(a), this.cache.set(o, n), n;
   }
-  registerGroupPseudo(t, e, s, o) {
-    const i = `group:${t}:${e}:${s}:${o}`;
-    if (this.cache.has(i))
-      return t;
-    const n = `.group:${e} .${t} { ${s}: ${o} !important; }`;
-    return this.insert(n), this.cache.set(i, t), t;
+  registerGroupPseudo(t, e, s, i) {
+    return this.registerPseudo(e, s, i, !0);
   }
 };
-c(S, "instance");
-let W = S;
-function Bt(r) {
-  let t = 5381;
-  for (let e = 0; e < r.length; e += 1)
-    t = (t << 5) + t ^ r.charCodeAt(e);
-  return (t >>> 0).toString(36);
+c($, "instance");
+let T = $;
+const f = T.getInstance();
+function _() {
+  T.getInstance().ensureDefaults();
+}
+function we() {
+  return T.getInstance().getCss();
 }
-const u = W.getInstance();
-function x() {
-  u.ensureDefaults();
+function nt() {
+  return T.getInstance().getCss();
+}
+function Se() {
+  return `<style id="fibo-dynamic-styles" data-fibo="1">${nt().replace(/<\/style/gi, "<\\/style")}</style>`;
 }
 function ve() {
-  return u.getCss();
+  return _(), g.createElement("style", {
+    id: "fibo-dynamic-styles",
+    "data-fibo": "1",
+    suppressHydrationWarning: !0,
+    dangerouslySetInnerHTML: { __html: nt() }
+  });
 }
-function Xt() {
-  return x(), g.createElement("style", {
+function Bt() {
+  return _(), g.createElement("style", {
     id: "fibo-motion-presets",
     "data-fibo-motion": "1",
     dangerouslySetInnerHTML: { __html: F }
   });
 }
-const nt = {
+const at = {
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280
 };
-function Ht(r) {
-  return r in nt;
+function Wt(r) {
+  return r in at;
 }
-function Yt(r) {
-  if (Ht(r))
-    return `(min-width: ${nt[r]}px)`;
+function Ht(r) {
+  if (Wt(r))
+    return `(min-width: ${at[r]}px)`;
   const t = r.trim();
   return t.startsWith("@media") ? t.replace(/^@media\s+/, "") : t;
 }
-function at(r) {
+function ct(r) {
   var t, e, s = "";
   if (typeof r == "string" || typeof r == "number") s += r;
   else if (typeof r == "object") if (Array.isArray(r)) {
-    var o = r.length;
-    for (t = 0; t < o; t++) r[t] && (e = at(r[t])) && (s && (s += " "), s += e);
+    var i = r.length;
+    for (t = 0; t < i; t++) r[t] && (e = ct(r[t])) && (s && (s += " "), s += e);
   } else for (e in r) r[e] && (s && (s += " "), s += e);
   return s;
 }
-function Ut() {
-  for (var r, t, e = 0, s = "", o = arguments.length; e < o; e++) (r = arguments[e]) && (t = at(r)) && (s && (s += " "), s += t);
+function Xt() {
+  for (var r, t, e = 0, s = "", i = arguments.length; e < i; e++) (r = arguments[e]) && (t = ct(r)) && (s && (s += " "), s += t);
   return s;
 }
 function Kt(r) {
   const t = r.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/);
   if (!t)
     return r;
-  const [, e, s, o] = t, i = parseFloat(e), n = parseFloat(s), a = parseFloat(o), l = n * Math.cos(a * Math.PI / 180), h = n * Math.sin(a * Math.PI / 180), f = i + 0.3963377774 * l + 0.2158037573 * h, d = i - 0.1055613458 * l - 0.0638541728 * h, m = i - 0.0894841775 * l - 1.291485548 * h, p = f * f * f, y = d * d * d, b = m * m * m, k = 4.0767416621 * p - 3.3077115913 * y + 0.2309699292 * b, $ = -1.2684380046 * p + 2.6097574011 * y - 0.3413193965 * b, mt = -0.0041960863 * p - 0.7034186147 * y + 1.707614701 * b, V = (T) => T >= 31308e-7 ? 1.055 * T ** (1 / 2.4) - 0.055 : 12.92 * T, pt = Math.max(0, Math.min(1, V(k))), gt = Math.max(0, Math.min(1, V($))), bt = Math.max(0, Math.min(1, V(mt))), D = (T) => {
+  const [, e, s, i] = t, o = parseFloat(e), n = parseFloat(s), a = parseFloat(i), l = n * Math.cos(a * Math.PI / 180), d = n * Math.sin(a * Math.PI / 180), h = o + 0.3963377774 * l + 0.2158037573 * d, u = o - 0.1055613458 * l - 0.0638541728 * d, m = o - 0.0894841775 * l - 1.291485548 * d, p = h * h * h, y = u * u * u, b = m * m * m, x = 4.0767416621 * p - 3.3077115913 * y + 0.2309699292 * b, S = -1.2684380046 * p + 2.6097574011 * y - 0.3413193965 * b, ut = -0.0041960863 * p - 0.7034186147 * y + 1.707614701 * b, L = (I) => I >= 31308e-7 ? 1.055 * I ** (1 / 2.4) - 0.055 : 12.92 * I, dt = Math.max(0, Math.min(1, L(x))), mt = Math.max(0, Math.min(1, L(S))), pt = Math.max(0, Math.min(1, L(ut))), V = (I) => {
     var X;
-    const L = (X = Math.round(T * 255).toString(16)) == null ? void 0 : X.toUpperCase();
-    return L.length === 1 ? `0${L}` : L;
+    const P = (X = Math.round(I * 255).toString(16)) == null ? void 0 : X.toUpperCase();
+    return P.length === 1 ? `0${P}` : P;
   };
-  return `#${D(pt)}${D(gt)}${D(bt)}`;
+  return `#${V(dt)}${V(mt)}${V(pt)}`;
 }
-function Gt(r) {
+function Yt(r) {
   const t = {}, e = {}, s = r.split(`
 `);
-  for (const o of s) {
-    const i = o.trim();
-    if (!i || i.startsWith("//") || i.startsWith("*") || i === "@theme {" || i === "}")
+  for (const i of s) {
+    const o = i.trim();
+    if (!o || o.startsWith("//") || o.startsWith("*") || o === "@theme {" || o === "}")
       continue;
-    const n = i.match(/^--color-([a-z0-9\-]+): (oklch\([^)]+\));?$/), a = i.match(/^--color-([a-z0-9\-]+): (#[a-fA-F0-9]{3,6});?$/);
+    const n = o.match(/^--color-([a-z0-9\-]+): (oklch\([^)]+\));?$/), a = o.match(/^--color-([a-z0-9\-]+): (#[a-fA-F0-9]{3,6});?$/);
     if (n) {
-      const [, l, h] = n, f = Kt(h);
-      t[f.toLowerCase()] = `bg-${l}`, e[f.toLowerCase()] = `text-${l}`;
-    } else if (a) {
-      const [, l, h] = a;
+      const [, l, d] = n, h = Kt(d);
       t[h.toLowerCase()] = `bg-${l}`, e[h.toLowerCase()] = `text-${l}`;
+    } else if (a) {
+      const [, l, d] = a;
+      t[d.toLowerCase()] = `bg-${l}`, e[d.toLowerCase()] = `text-${l}`;
     }
   }
   return { background: t, text: e };
 }
-const qt = (r) => {
+const Ut = (r) => {
   if (r !== void 0)
     return typeof r == "number" ? `${r}px` : r.toString();
-}, C = (r, t) => {
-  const e = qt(t);
+}, N = (r, t) => {
+  const e = Ut(t);
   return e === void 0 ? "" : `${r}-[${e}]`;
-}, Zt = `
+}, Gt = `
   --color-red-50: oklch(0.971 0.013 17.38);
   --color-red-100: oklch(0.936 0.032 17.717);
   --color-red-200: oklch(0.885 0.062 18.334);
@@ -941,7 +969,7 @@ const qt = (r) => {
   --color-stone-950: oklch(0.147 0.004 49.25);
   --color-black: #000;
   --color-white: #fff;
-`, Jt = Gt(Zt), ct = {
+`, Zt = Yt(Gt), lt = {
   borderRadius: {
     0: "rounded-none",
     "0px": "rounded-none",
@@ -1038,7 +1066,7 @@ const qt = (r) => {
     fixed: "fixed",
     sticky: "sticky"
   }
-}, Qt = (r, t) => ({
+}, qt = (r, t) => ({
   // 背景色
   backgroundColor: (e) => e.backgroundColor ? [r.background[e.backgroundColor.toLowerCase()] || `bg-[${e.backgroundColor}]`] : [],
   // 文字色
@@ -1047,15 +1075,15 @@ const qt = (r) => {
   borderRadius: (e) => {
     if (!e.borderRadius)
       return [];
-    const s = ct.borderRadius[e.borderRadius] || C("rounded", e.borderRadius);
+    const s = lt.borderRadius[e.borderRadius] || N("rounded", e.borderRadius);
     return s ? [s] : [];
   },
   // 外边距
   margin: (e) => {
     const s = [];
     if (e.margin !== void 0) {
-      const i = C("m", e.margin);
-      return i ? [i] : [];
+      const o = N("m", e.margin);
+      return o ? [o] : [];
     }
     return [
       { prop: e.marginTop, dir: "mt" },
@@ -1064,9 +1092,9 @@ const qt = (r) => {
       { prop: e.marginLeft, dir: "ml" },
       { prop: e.marginX, dir: "mx" },
       { prop: e.marginY, dir: "my" }
-    ].forEach(({ prop: i, dir: n }) => {
-      if (i !== void 0) {
-        const a = C(n, i);
+    ].forEach(({ prop: o, dir: n }) => {
+      if (o !== void 0) {
+        const a = N(n, o);
         a && s.push(a);
       }
     }), s;
@@ -1075,8 +1103,8 @@ const qt = (r) => {
   padding: (e) => {
     const s = [];
     if (e.padding !== void 0) {
-      const i = C("p", e.padding);
-      return i ? [i] : [];
+      const o = N("p", e.padding);
+      return o ? [o] : [];
     }
     return [
       { prop: e.paddingTop, dir: "pt" },
@@ -1085,9 +1113,9 @@ const qt = (r) => {
       { prop: e.paddingLeft, dir: "pl" },
       { prop: e.paddingX, dir: "px" },
       { prop: e.paddingY, dir: "py" }
-    ].forEach(({ prop: i, dir: n }) => {
-      if (i !== void 0) {
-        const a = C(n, i);
+    ].forEach(({ prop: o, dir: n }) => {
+      if (o !== void 0) {
+        const a = N(n, o);
         a && s.push(a);
       }
     }), s;
@@ -1096,28 +1124,28 @@ const qt = (r) => {
   font: (e) => {
     const s = [];
     if (e.fontSize && s.push(t.fontSize[e.fontSize.toString()] || `text-[${e.fontSize}]`), e.fontWeight) {
-      const o = t.fontWeight[e.fontWeight.toString()];
-      o && s.push(o);
+      const i = t.fontWeight[e.fontWeight.toString()];
+      i && s.push(i);
     }
     if (e.textAlign) {
-      const o = t.textAlign[e.textAlign];
-      o && s.push(o);
+      const i = t.textAlign[e.textAlign];
+      i && s.push(i);
     }
     if (e.fontFamily) {
-      const o = t.fontFamily[e.fontFamily];
-      o && s.push(o);
+      const i = t.fontFamily[e.fontFamily];
+      i && s.push(i);
     }
     if (e.textDecoration) {
-      const o = t.textDecoration[e.textDecoration];
-      o && s.push(o);
+      const i = t.textDecoration[e.textDecoration];
+      i && s.push(i);
     }
     if (e.fontVariantNumeric) {
-      const o = t.fontVariantNumeric[e.fontVariantNumeric];
-      o && s.push(o);
+      const i = t.fontVariantNumeric[e.fontVariantNumeric];
+      i && s.push(i);
     }
     if (e.fontStyle) {
-      const o = t.fontStyle[e.fontStyle];
-      o && s.push(o);
+      const i = t.fontStyle[e.fontStyle];
+      i && s.push(i);
     }
     return s;
   },
@@ -1125,12 +1153,12 @@ const qt = (r) => {
   size: (e) => {
     const s = [];
     if (e.width) {
-      const o = e.width.toString();
-      s.push(`w-[${o}]`);
+      const i = e.width.toString();
+      s.push(`w-[${i}]`);
     }
     if (e.height) {
-      const o = e.height.toString();
-      s.push(`h-[${o}]`);
+      const i = e.height.toString();
+      s.push(`h-[${i}]`);
     }
     return s;
   },
@@ -1138,20 +1166,20 @@ const qt = (r) => {
   layout: (e) => {
     const s = [];
     if (e.display) {
-      const o = t.display[e.display];
-      o && s.push(o);
+      const i = t.display[e.display];
+      i && s.push(i);
     }
     if (e.flexDirection) {
-      const i = {
+      const o = {
         row: "flex-row",
         column: "flex-col",
         "row-reverse": "flex-row-reverse",
         "column-reverse": "flex-col-reverse"
       }[e.flexDirection];
-      i && s.push(i);
+      o && s.push(o);
     }
     if (e.justifyContent) {
-      const i = {
+      const o = {
         "flex-start": "justify-start",
         "flex-end": "justify-end",
         center: "justify-center",
@@ -1159,21 +1187,21 @@ const qt = (r) => {
         "space-around": "justify-around",
         "space-evenly": "justify-evenly"
       }[e.justifyContent];
-      i && s.push(i);
+      o && s.push(o);
     }
     if (e.alignItems) {
-      const i = {
+      const o = {
         "flex-start": "items-start",
         "flex-end": "items-end",
         center: "items-center",
         baseline: "items-baseline",
         stretch: "items-stretch"
       }[e.alignItems];
-      i && s.push(i);
+      o && s.push(o);
     }
     if (e.gap) {
-      const o = C("gap", e.gap);
-      o && s.push(o);
+      const i = N("gap", e.gap);
+      i && s.push(i);
     }
     return s;
   },
@@ -1194,7 +1222,7 @@ const qt = (r) => {
   },
   // 自定义类名
   className: (e) => e.className ? [e.className] : []
-}), te = {
+}), Jt = {
   backgroundColor: "backgroundColor",
   color: "color",
   borderRadius: "borderRadius",
@@ -1228,59 +1256,58 @@ const qt = (r) => {
   position: "position",
   opacity: "opacity",
   className: "className"
-}, ee = (r, t) => {
-  const e = (t == null ? void 0 : t.colorMaps) || Jt, s = (t == null ? void 0 : t.styleMaps) || ct, o = Qt(e, s), i = [], n = /* @__PURE__ */ new Set();
+}, Qt = (r, t) => {
+  const e = (t == null ? void 0 : t.colorMaps) || Zt, s = (t == null ? void 0 : t.styleMaps) || lt, i = qt(e, s), o = [], n = /* @__PURE__ */ new Set();
   return Object.keys(r).forEach((a) => {
-    const l = te[a];
+    const l = Jt[a];
     if (l && !n.has(l)) {
-      const h = o[l];
-      if (h) {
-        const f = h(r);
-        i.push(...f), n.add(l);
+      const d = i[l];
+      if (d) {
+        const h = d(r);
+        o.push(...h), n.add(l);
       }
     }
-  }), i.filter(Boolean).join(" ");
+  }), o.filter(Boolean).join(" ");
 };
-function se(r) {
+function te(r) {
   const t = {};
   return r.forEach((e, s) => {
     t[s] = e.value;
   }), t;
 }
-function re({ animatedProps: r, animationConfig: t, children: e }) {
-  const [s, o] = q(
-    () => se(r)
+function ee({ animatedProps: r, animationConfig: t, children: e }) {
+  const [s, i] = q(
+    () => te(r)
   );
-  j(() => {
+  A(() => {
     const l = [];
-    return r.forEach((h, f) => {
-      const d = (m) => {
-        o((p) => ({
+    return r.forEach((d, h) => {
+      const u = (m) => {
+        i((p) => ({
           ...p,
-          [f]: m
+          [h]: m
         }));
       };
-      l.push(h.subscribe(d)), d(h.value);
+      l.push(d.subscribe(u)), u(d.value);
     }), () => {
-      l.forEach((h) => h());
+      l.forEach((d) => d());
     };
   }, [r]);
-  const i = [];
-  s.translateX !== void 0 && i.push(`translateX(${s.translateX}px)`), s.translateY !== void 0 && i.push(`translateY(${s.translateY}px)`), s.scale !== void 0 && i.push(`scale(${s.scale})`), s.rotate !== void 0 && i.push(`rotate(${s.rotate}deg)`);
+  const o = [];
+  s.translateX !== void 0 && o.push(`translateX(${s.translateX}px)`), s.translateY !== void 0 && o.push(`translateY(${s.translateY}px)`), s.scale !== void 0 && o.push(`scale(${s.scale})`), s.rotate !== void 0 && o.push(`rotate(${s.rotate}deg)`);
   const n = {};
-  if (i.length > 0 && (n.transform = i.join(" ")), t) {
-    const { duration: l = 300, curve: h = "easeOut", stiffness: f, damping: d } = t, m = N(h, { stiffness: f, damping: d });
+  if (o.length > 0 && (n.transform = o.join(" ")), t) {
+    const { duration: l = 300, curve: d = "easeOut", stiffness: h, damping: u } = t, m = v(d, { stiffness: h, damping: u });
     n.transition = `transform ${l}ms ${m}`;
   }
   const a = {
     ...e.props.style,
     ...n
   };
-  return Z(e, { style: a });
+  return yt(e, { style: a });
 }
-class _ {
-  constructor(t, e, s, o = !1) {
-    c(this, "baseClassName");
+class k {
+  constructor(t, e, s = !1) {
     c(this, "pseudoState");
     c(this, "parentBuilder");
     c(this, "isGroup");
@@ -1289,7 +1316,7 @@ class _ {
     c(this, "transitionDelay", 0);
     c(this, "transitionProperties", ["all"]);
     c(this, "transforms", /* @__PURE__ */ new Map());
-    this.baseClassName = t, this.pseudoState = e, this.parentBuilder = s, this.isGroup = o;
+    this.pseudoState = t, this.parentBuilder = e, this.isGroup = s;
   }
   bg(t) {
     return this.set("background-color", t);
@@ -1329,17 +1356,17 @@ class _ {
   css(t, e) {
     return this.set(t, e);
   }
-  transition(t, e, s, o) {
+  transition(t, e, s, i) {
     if (typeof t == "string" && e === void 0)
       return this.set("transition", t);
-    const i = Array.isArray(t) ? t.join(", ") : t, n = `${e || this.transitionDuration}ms`, a = N(s || this.transitionEasing), l = o ? `${o}ms` : "0ms";
-    return this.set("transition", `${i} ${n} ${a} ${l}`);
+    const o = Array.isArray(t) ? t.join(", ") : t, n = `${e || this.transitionDuration}ms`, a = v(s || this.transitionEasing), l = i ? `${i}ms` : "0ms";
+    return this.set("transition", `${o} ${n} ${a} ${l}`);
   }
   duration(t) {
     return this.transitionDuration = t, this.applyTransition(), this;
   }
   easing(t) {
-    return this.transitionEasing = N(t), this.applyTransition(), this;
+    return this.transitionEasing = v(t), this.applyTransition(), this;
   }
   ease(t) {
     return this.easing(t);
@@ -1351,38 +1378,21 @@ class _ {
     return this.transitionProperties = t, this.applyTransition(), this;
   }
   applyTransition() {
-    const t = this.transitionProperties.join(", "), e = `${this.transitionDuration}ms`, s = this.transitionEasing, o = this.transitionDelay > 0 ? `${this.transitionDelay}ms` : "0ms";
-    this.set("transition", `${t} ${e} ${s} ${o}`);
+    const t = this.transitionProperties.join(", "), e = `${this.transitionDuration}ms`, s = this.transitionEasing, i = this.transitionDelay > 0 ? `${this.transitionDelay}ms` : "0ms";
+    this.set("transition", `${t} ${e} ${s} ${i}`);
   }
   flushTransform() {
     return this.set("transform", [...this.transforms.values()].join(" "));
   }
   set(t, e) {
-    return this.isGroup ? u.registerGroupPseudo(this.baseClassName, this.pseudoState, t, e) : u.registerPseudo(this.baseClassName, this.pseudoState, t, e), this;
+    const s = f.registerPseudo(this.pseudoState, t, e, this.isGroup);
+    return this.parentBuilder.addClassName(s), this;
   }
   end() {
     return this.parentBuilder;
   }
 }
-function lt(r) {
-  return typeof window > "u" ? () => {
-  } : (window.addEventListener("resize", r), () => window.removeEventListener("resize", r));
-}
-function ht() {
-  return typeof window > "u" ? 1024 : window.innerWidth;
-}
-function oe({ responsive: r, children: t }) {
-  const e = I(lt, ht, () => 1024), s = Vt(t.props.style ?? {}, r, e);
-  return Z(t, { style: s });
-}
-function Ce() {
-  return I(lt, ht, () => 1024);
-}
-let G = 0;
-function ut(r) {
-  return G += 1, `${r}-${G}`;
-}
-function Ee(r, t) {
+function Ce(r, t) {
   if (typeof document > "u") return;
   const e = typeof r == "string" ? document.querySelector(r) : r;
   e && e.scrollIntoView({
@@ -1390,7 +1400,7 @@ function Ee(r, t) {
     block: (t == null ? void 0 : t.block) ?? "start"
   });
 }
-function Me(r) {
+function Ne(r) {
   const t = typeof document < "u" ? document : void 0, e = t == null ? void 0 : t.startViewTransition;
   if (typeof e == "function") {
     e.call(t, r);
@@ -1398,62 +1408,62 @@ function Me(r) {
   }
   r();
 }
-function ie() {
+function se() {
   return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("animation-timeline", "view()");
 }
-function ne() {
+function re() {
   return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("animation-timeline", "scroll()");
 }
-function ae({
+function oe({
   preset: r = "fadeUp",
   once: t = !0,
   rootMargin: e = "0px 0px -8% 0px",
   threshold: s = 0.12,
-  forceMotion: o = !1,
-  preferTimeline: i = !1,
+  forceMotion: i = !1,
+  preferTimeline: o = !1,
   children: n
 }) {
   const a = w(null);
-  j(() => {
-    x();
-    const h = a.current;
-    if (!h) return;
-    if (i && ie()) {
-      h.classList.add("fibo-inview");
+  A(() => {
+    _();
+    const d = a.current;
+    if (!d) return;
+    if (o && se()) {
+      d.classList.add("fibo-inview");
       return;
     }
     if (typeof IntersectionObserver > "u") {
-      h.classList.add("fibo-inview");
+      d.classList.add("fibo-inview");
       return;
     }
-    const f = new IntersectionObserver(
-      (d) => {
-        for (const m of d)
-          m.isIntersecting ? (m.target.classList.add("fibo-inview"), t && f.unobserve(m.target)) : t || m.target.classList.remove("fibo-inview");
+    const h = new IntersectionObserver(
+      (u) => {
+        for (const m of u)
+          m.isIntersecting ? (m.target.classList.add("fibo-inview"), t && h.unobserve(m.target)) : t || m.target.classList.remove("fibo-inview");
       },
       { rootMargin: e, threshold: s }
     );
-    return f.observe(h), () => f.disconnect();
-  }, [t, e, s, i]);
+    return h.observe(d), () => h.disconnect();
+  }, [t, e, s, o]);
   const l = [
     "fibo-reveal",
     `fibo-reveal-${r}`,
-    o ? "fibo-motion-force" : ""
+    i ? "fibo-motion-force" : ""
   ].filter(Boolean).join(" ");
   return g.createElement("div", { ref: a, className: l, "data-fibo-reveal": r }, n);
 }
-function ce({ children: r }) {
+function ie({ children: r }) {
   const t = w(null);
-  return j(() => {
-    if (x(), ne()) return;
+  return A(() => {
+    if (_(), re()) return;
     const e = () => {
-      var i, n;
-      return ((i = t.current) == null ? void 0 : i.querySelector(".fibo-scroll-progress")) ?? ((n = t.current) == null ? void 0 : n.firstElementChild);
+      var o, n;
+      return ((o = t.current) == null ? void 0 : o.querySelector(".fibo-scroll-progress")) ?? ((n = t.current) == null ? void 0 : n.firstElementChild);
     }, s = () => {
-      const o = e();
-      if (!o) return;
-      const i = document.documentElement.scrollHeight - window.innerHeight, n = i > 0 ? Math.min(1, Math.max(0, window.scrollY / i)) : 0;
-      o.style.setProperty("--fibo-progress", String(n));
+      const i = e();
+      if (!i) return;
+      const o = document.documentElement.scrollHeight - window.innerHeight, n = o > 0 ? Math.min(1, Math.max(0, window.scrollY / o)) : 0;
+      i.style.setProperty("--fibo-progress", String(n));
     };
     return s(), window.addEventListener("scroll", s, { passive: !0 }), window.addEventListener("resize", s), () => {
       window.removeEventListener("scroll", s), window.removeEventListener("resize", s);
@@ -1464,8 +1474,8 @@ function ce({ children: r }) {
     r
   );
 }
-const ft = 64, le = `${ft}px`;
-class Te {
+const ht = 64, ne = `${ht}px`;
+class Ee {
   constructor() {
     /** @internal Extra DOM props forwarded to the host element. */
     c(this, "_props", {});
@@ -1473,7 +1483,6 @@ class Te {
     c(this, "_cssStyles", {});
     c(this, "_classNames", []);
     c(this, "_children", []);
-    c(this, "_responsive");
     c(this, "_theme");
     c(this, "_state", /* @__PURE__ */ new Map());
     c(this, "_providers", /* @__PURE__ */ new Map());
@@ -1484,7 +1493,6 @@ class Te {
     c(this, "_animationConfig");
     c(this, "_animatedProps", /* @__PURE__ */ new Map());
     c(this, "_transforms", []);
-    c(this, "_pseudoStateClassName");
     c(this, "_transitionClass");
     c(this, "_motionClass");
     c(this, "_staggerMs");
@@ -1520,7 +1528,7 @@ class Te {
    */
   anchor(t) {
     return this.id(t), this._explicitScrollMargin || this._classNames.push(
-      u.register("scroll-margin-top", "var(--fibo-sticky-offset, 0px)")
+      f.register("scroll-margin-top", "var(--fibo-sticky-offset, 0px)")
     ), this;
   }
   /**
@@ -1530,30 +1538,37 @@ class Te {
   scrollMargin(t) {
     this._explicitScrollMargin = !0;
     const e = typeof t == "number" ? `${t}px` : t;
-    return this._classNames.push(u.register("scroll-margin-top", e)), this;
+    return this._classNames.push(f.register("scroll-margin-top", e)), this;
+  }
+  /** Stamp a class onto the host. Used by PseudoStateBuilder (hashed `:hover` etc.). */
+  addClassName(t) {
+    return t && !this._classNames.includes(t) && this._classNames.push(t), this;
   }
   /**
-   * React list key. After this is called, React reads the key as a string.
+   * React list key. After this is called, React reads the key as a string
+   * on both the builder element and the inner host wrapper.
    * Builders are valid elements — you do not need `.build()`.
    */
   key(t) {
-    return this._props.key = t, this;
+    this._props.key = t;
+    const e = this.__fiboElementProps;
+    return e && typeof e == "object" && (this.__fiboElementProps = { ...e, key: String(t) }), this;
   }
   paddingHorizontal(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = u.register("padding-left", e), o = u.register("padding-right", e);
-    return this._classNames.push(s, o), this;
+    const e = typeof t == "number" ? `${t}px` : t, s = f.register("padding-left", e), i = f.register("padding-right", e);
+    return this._classNames.push(s, i), this;
   }
   paddingVertical(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = u.register("padding-top", e), o = u.register("padding-bottom", e);
-    return this._classNames.push(s, o), this;
+    const e = typeof t == "number" ? `${t}px` : t, s = f.register("padding-top", e), i = f.register("padding-bottom", e);
+    return this._classNames.push(s, i), this;
   }
   marginHorizontal(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = u.register("margin-left", e), o = u.register("margin-right", e);
-    return this._classNames.push(s, o), this;
+    const e = typeof t == "number" ? `${t}px` : t, s = f.register("margin-left", e), i = f.register("margin-right", e);
+    return this._classNames.push(s, i), this;
   }
   marginVertical(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = u.register("margin-top", e), o = u.register("margin-bottom", e);
-    return this._classNames.push(s, o), this;
+    const e = typeof t == "number" ? `${t}px` : t, s = f.register("margin-top", e), i = f.register("margin-bottom", e);
+    return this._classNames.push(s, i), this;
   }
   flexDirection(t) {
     return this._classNames.push(`flex-${t}`), this;
@@ -1567,7 +1582,7 @@ class Te {
   flex(t) {
     if (this._classNames.push("flex"), t !== void 0)
       if (typeof t == "number") {
-        const e = u.register("flex", String(t));
+        const e = f.register("flex", String(t));
         this._classNames.push(e);
       } else typeof t == "string" && this._classNames.push(`flex-${t}`);
     return this;
@@ -1618,18 +1633,18 @@ class Te {
     return this._classNames.push("h-full"), this;
   }
   square(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = u.register("width", e), o = u.register("height", e);
-    return this._classNames.push(s, o), this;
+    const e = typeof t == "number" ? `${t}px` : t, s = f.register("width", e), i = f.register("height", e);
+    return this._classNames.push(s, i), this;
   }
   circle() {
     return this._classNames.push("rounded-full"), this;
   }
   opacity(t) {
-    const e = u.register("opacity", String(t));
+    const e = f.register("opacity", String(t));
     return this._classNames.push(e), this;
   }
   p(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = u.register("padding", e);
+    const e = typeof t == "number" ? `${t}px` : t, s = f.register("padding", e);
     return this._classNames.push(s), this;
   }
   px(t) {
@@ -1645,7 +1660,7 @@ class Te {
     return this.paddingVertical(t);
   }
   m(t) {
-    const e = typeof t == "number" ? `${t}px` : t, s = u.register("margin", e);
+    const e = typeof t == "number" ? `${t}px` : t, s = f.register("margin", e);
     return this._classNames.push(s), this;
   }
   mx(t) {
@@ -1661,15 +1676,15 @@ class Te {
     return this.marginVertical(t);
   }
   bg(t) {
-    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = u.register("background-color", e);
+    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = f.register("background-color", e);
     return this._classNames.push(s), this;
   }
   text(t) {
-    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = u.register("color", e);
+    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = f.register("color", e);
     return this._classNames.push(s), this;
   }
   color(t) {
-    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = u.register("color", e);
+    const e = typeof t == "string" && !t.startsWith("#") && !t.startsWith("rgb") ? this.resolveSemanticColor(t) : t, s = f.register("color", e);
     return this._classNames.push(s), this;
   }
   resolveSemanticColor(t) {
@@ -1699,8 +1714,8 @@ class Te {
   }
   shadow(t) {
     if (t === null || t === "none") {
-      const i = u.register("box-shadow", "none");
-      return this._classNames.push(i), this;
+      const o = f.register("box-shadow", "none");
+      return this._classNames.push(o), this;
     }
     const e = {
       sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
@@ -1713,11 +1728,11 @@ class Te {
       modal: "0 10px 40px rgba(0, 0, 0, 0.2)",
       float: "0 8px 16px rgba(0, 0, 0, 0.15)",
       inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
-    }, s = (i) => i.startsWith("#") || i.startsWith("rgb") || i.startsWith("hsl") || ["red", "blue", "green", "yellow", "purple", "pink", "orange", "white", "black", "gray"].some((n) => i.includes(n)), o = (i, n, a, l) => {
-      let d = a || "rgba(0, 0, 0, " + (l ?? 0.1) + ")";
+    }, s = (o) => o.startsWith("#") || o.startsWith("rgb") || o.startsWith("hsl") || ["red", "blue", "green", "yellow", "purple", "pink", "orange", "white", "black", "gray"].some((n) => o.includes(n)), i = (o, n, a, l) => {
+      let u = a || "rgba(0, 0, 0, " + (l ?? 0.1) + ")";
       if (a && a.startsWith("#") && l !== void 0) {
-        const y = parseInt(a.slice(1, 3), 16), b = parseInt(a.slice(3, 5), 16), k = parseInt(a.slice(5, 7), 16);
-        d = `rgba(${y}, ${b}, ${k}, ${l})`;
+        const y = parseInt(a.slice(1, 3), 16), b = parseInt(a.slice(3, 5), 16), x = parseInt(a.slice(5, 7), 16);
+        u = `rgba(${y}, ${b}, ${x}, ${l})`;
       }
       const p = {
         sm: "2px",
@@ -1726,57 +1741,62 @@ class Te {
         xl: "12px",
         "2xl": "16px"
       }[n] || "4px";
-      switch (i) {
+      switch (o) {
         case "top":
-          return `0 -${p} ${p} -1px ${d}`;
+          return `0 -${p} ${p} -1px ${u}`;
         case "bottom":
-          return `0 ${p} ${p} -1px ${d}`;
+          return `0 ${p} ${p} -1px ${u}`;
         case "left":
-          return `-${p} 0 ${p} -1px ${d}`;
+          return `-${p} 0 ${p} -1px ${u}`;
         case "right":
-          return `${p} 0 ${p} -1px ${d}`;
+          return `${p} 0 ${p} -1px ${u}`;
         case "top-bottom":
         case "vertical":
-          return `0 -${p} ${p} -1px ${d}, 0 ${p} ${p} -1px ${d}`;
+          return `0 -${p} ${p} -1px ${u}, 0 ${p} ${p} -1px ${u}`;
         case "left-right":
         case "horizontal":
-          return `-${p} 0 ${p} -1px ${d}, ${p} 0 ${p} -1px ${d}`;
+          return `-${p} 0 ${p} -1px ${u}, ${p} 0 ${p} -1px ${u}`;
         case "all":
         default:
           return e[n] || e.md;
       }
     };
     if (!t) {
-      const i = u.register("box-shadow", e.md);
-      return this._classNames.push(i), this;
+      const o = f.register("box-shadow", e.md);
+      return this._classNames.push(o), this;
     }
     if (typeof t == "string") {
       if (s(t)) {
-        const a = o("all", "md", t), l = u.register("box-shadow", a);
+        const a = i("all", "md", t), l = f.register("box-shadow", a);
         return this._classNames.push(l), this;
       }
-      const i = e[t] || e.md, n = u.register("box-shadow", i);
+      const o = e[t] || e.md, n = f.register("box-shadow", o);
       return this._classNames.push(n), this;
     }
     if (Array.isArray(t)) {
-      const [i, n, a, l] = t;
-      if (typeof i == "string" && s(i)) {
-        const d = o("all", "md", i, n), m = u.register("box-shadow", d);
+      const [o, n, a, l] = t;
+      if (typeof o == "string" && s(o)) {
+        const u = i("all", "md", o, n), m = f.register("box-shadow", u);
         return this._classNames.push(m), this;
       }
-      const h = i;
+      const d = o;
       if (typeof n == "string" && s(n)) {
-        const d = o(h, "md", n, a), m = u.register("box-shadow", d);
+        const u = i(d, "md", n, a), m = f.register("box-shadow", u);
         return this._classNames.push(m), this;
       } else {
-        const m = o(h, n, a, l), p = u.register("box-shadow", m);
+        const m = i(d, n, a, l), p = f.register("box-shadow", m);
         return this._classNames.push(p), this;
       }
     }
     return this;
   }
+  /**
+   * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).
+   * Tiers stay mutually exclusive: mobile `<768`, tablet `768–1023`, desktop `≥1024`.
+   * No `window.innerWidth` — hydrate-safe.
+   */
   responsive(t) {
-    return this._responsive = t, this;
+    return this.registerMediaStyles("(max-width: 767px)", t.mobile), this.registerMediaStyles("(min-width: 768px) and (max-width: 1023px)", t.tablet), this.registerMediaStyles("(min-width: 1024px)", t.desktop), this;
   }
   /**
    * CSS `@media` (min-width or a raw query). Compiles to a class — no resize JS.
@@ -1784,7 +1804,11 @@ class Te {
    * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
    */
   media(t, e) {
-    const s = Yt(t), o = /* @__PURE__ */ new Set([
+    return this.registerMediaStyles(Ht(t), e), this;
+  }
+  registerMediaStyles(t, e) {
+    if (!e) return;
+    const s = /* @__PURE__ */ new Set([
       "opacity",
       "zIndex",
       "z-index",
@@ -1795,12 +1819,11 @@ class Te {
       "fontWeight",
       "lineHeight"
     ]);
-    for (const [i, n] of Object.entries(e)) {
-      if (n == null) continue;
-      const a = i.replace(/[A-Z]/g, (h) => `-${h.toLowerCase()}`), l = typeof n == "number" && !o.has(i) && !o.has(a) ? `${n}px` : String(n);
-      this._classNames.push(u.registerMedia(s, a, l));
+    for (const [i, o] of Object.entries(e)) {
+      if (o == null) continue;
+      const n = i.replace(/[A-Z]/g, (l) => `-${l.toLowerCase()}`), a = typeof o == "number" && !s.has(i) && !s.has(n) ? `${o}px` : String(o);
+      this._classNames.push(f.registerMedia(t, n, a));
     }
-    return this;
   }
   sm(t) {
     return this.media("sm", t);
@@ -1816,23 +1839,23 @@ class Te {
   }
   rounded(t) {
     if (typeof t == "number") {
-      const e = u.register("border-radius", `${t}px`);
+      const e = f.register("border-radius", `${t}px`);
       this._classNames.push(e);
     } else if (typeof t == "string" && (t.startsWith("rounded-") || ["sm", "md", "lg", "xl", "2xl", "3xl", "full", "none"].includes(t))) {
       const e = t.startsWith("rounded-") ? t : `rounded-${t}`;
       this._classNames.push(e);
     } else {
-      const e = u.register("border-radius", t);
+      const e = f.register("border-radius", t);
       this._classNames.push(e);
     }
     return this;
   }
   borderRadius(t) {
     if (typeof t == "number") {
-      const e = u.register("border-radius", `${t}px`);
+      const e = f.register("border-radius", `${t}px`);
       this._classNames.push(e);
     } else {
-      const e = u.register("border-radius", t);
+      const e = f.register("border-radius", t);
       this._classNames.push(e);
     }
     return this;
@@ -1843,45 +1866,45 @@ class Te {
     else if (["red", "blue", "green", "gray", "white", "black", "transparent"].some((e) => t.includes(e)))
       this._classNames.push(`border-${t}`);
     else {
-      const e = u.register("border-color", t);
+      const e = f.register("border-color", t);
       this._classNames.push(e);
     }
     return this;
   }
   width(t) {
     if (typeof t == "number") {
-      const e = u.register("width", `${t}px`);
+      const e = f.register("width", `${t}px`);
       this._classNames.push(e);
     } else if (typeof t == "string" && (t.startsWith("w-") || t === "full" || t === "screen" || t === "min" || t === "max" || t === "fit")) {
       const e = t.startsWith("w-") ? t : `w-${t}`;
       this._classNames.push(e);
     } else {
-      const e = u.register("width", t);
+      const e = f.register("width", t);
       this._classNames.push(e);
     }
     return this;
   }
   height(t) {
     if (typeof t == "number") {
-      const e = u.register("height", `${t}px`);
+      const e = f.register("height", `${t}px`);
       this._classNames.push(e);
     } else if (typeof t == "string" && (t.startsWith("h-") || t === "full" || t === "screen" || t === "min" || t === "max" || t === "fit")) {
       const e = t.startsWith("h-") ? t : `h-${t}`;
       this._classNames.push(e);
     } else {
-      const e = u.register("height", t);
+      const e = f.register("height", t);
       this._classNames.push(e);
     }
     return this;
   }
   gap(t) {
     if (typeof t == "number") {
-      const e = u.register("gap", `${t}px`);
+      const e = f.register("gap", `${t}px`);
       this._classNames.push(e);
     } else if (typeof t == "string" && t.startsWith("gap-"))
       this._classNames.push(t);
     else {
-      const e = u.register("gap", t);
+      const e = f.register("gap", t);
       this._classNames.push(e);
     }
     return this;
@@ -1932,18 +1955,18 @@ class Te {
     ), this;
   }
   borderInput(t = "gray-300", e = "blue-500") {
-    const s = (n) => ["red", "blue", "green", "yellow", "purple", "pink", "indigo", "gray", "orange", "teal", "cyan", "emerald", "lime", "amber", "fuchsia", "rose", "violet", "sky", "slate", "zinc", "neutral", "stone"].includes(n) ? `${n}-500` : n, o = s(t), i = s(e);
+    const s = (n) => ["red", "blue", "green", "yellow", "purple", "pink", "indigo", "gray", "orange", "teal", "cyan", "emerald", "lime", "amber", "fuchsia", "rose", "violet", "sky", "slate", "zinc", "neutral", "stone"].includes(n) ? `${n}-500` : n, i = s(t), o = s(e);
     return this._classNames.push(
       "border",
-      `border-${o}`,
+      `border-${i}`,
       "focus-within:ring-2",
-      `focus-within:ring-${i}`,
-      `focus-within:border-${i}`
+      `focus-within:ring-${o}`,
+      `focus-within:border-${o}`
     ), this.clean();
   }
   weight(t) {
     if (typeof t == "number") {
-      const e = u.register("font-weight", String(t));
+      const e = f.register("font-weight", String(t));
       this._classNames.push(e);
     } else {
       const e = {
@@ -1960,7 +1983,7 @@ class Te {
       if (e[t])
         this._classNames.push(e[t]);
       else {
-        const s = u.register("font-weight", t);
+        const s = f.register("font-weight", t);
         this._classNames.push(s);
       }
     }
@@ -1994,16 +2017,16 @@ class Te {
     return this._signals.add(t), this;
   }
   translateX(t) {
-    return t instanceof z ? this._animatedProps.set("translateX", t) : this._transforms.push(`translateX(${t}px)`), this;
+    return t instanceof R ? this._animatedProps.set("translateX", t) : this._transforms.push(`translateX(${t}px)`), this;
   }
   translateY(t) {
-    return t instanceof z ? this._animatedProps.set("translateY", t) : this._transforms.push(`translateY(${t}px)`), this;
+    return t instanceof R ? this._animatedProps.set("translateY", t) : this._transforms.push(`translateY(${t}px)`), this;
   }
   scale(t) {
-    return t instanceof z ? this._animatedProps.set("scale", t) : this._transforms.push(`scale(${t})`), this;
+    return t instanceof R ? this._animatedProps.set("scale", t) : this._transforms.push(`scale(${t})`), this;
   }
   rotate(t) {
-    return t instanceof z ? this._animatedProps.set("rotate", t) : this._transforms.push(`rotate(${t}deg)`), this;
+    return t instanceof R ? this._animatedProps.set("rotate", t) : this._transforms.push(`rotate(${t}deg)`), this;
   }
   gesture(t) {
     return this._gesture = t, this;
@@ -2029,11 +2052,11 @@ class Te {
   props(t) {
     return this._props = { ...this._props, ...t }, this;
   }
-  transition(t, e, s, o) {
+  transition(t, e, s, i) {
     if (typeof t == "string" && e === void 0)
-      return this.replaceTransitionClass(u.register("transition", t)), this;
-    const i = Array.isArray(t) ? t.join(", ") : t, n = `${e || this._transitionDuration}ms`, a = N(s || this._transitionEasing), l = o ? `${o}ms` : "0ms";
-    return this.replaceTransitionClass(u.register("transition", `${i} ${n} ${a} ${l}`)), this;
+      return this.replaceTransitionClass(f.register("transition", t)), this;
+    const o = Array.isArray(t) ? t.join(", ") : t, n = `${e || this._transitionDuration}ms`, a = v(s || this._transitionEasing), l = i ? `${i}ms` : "0ms";
+    return this.replaceTransitionClass(f.register("transition", `${o} ${n} ${a} ${l}`)), this;
   }
   /**
    * Set transition duration in milliseconds
@@ -2047,7 +2070,7 @@ class Te {
    * Example: .easing('ease-in-out')
    */
   easing(t) {
-    return this._transitionEasing = N(t), this._motionClass ? (this._style["--fibo-ease"] = this._transitionEasing, this) : (this._applyTransition(), this);
+    return this._transitionEasing = v(t), this._motionClass ? (this._style["--fibo-ease"] = this._transitionEasing, this) : (this._applyTransition(), this);
   }
   /** Alias of `.easing()`. `'spring'` becomes CSS `linear()`. */
   ease(t) {
@@ -2071,15 +2094,15 @@ class Te {
    * Apply the built transition to the element
    */
   _applyTransition() {
-    const t = this._transitionProperties.join(", "), e = `${this._transitionDuration}ms`, s = this._transitionEasing, o = this._transitionDelay > 0 ? `${this._transitionDelay}ms` : "0ms";
-    this.replaceTransitionClass(u.register("transition", `${t} ${e} ${s} ${o}`));
+    const t = this._transitionProperties.join(", "), e = `${this._transitionDuration}ms`, s = this._transitionEasing, i = this._transitionDelay > 0 ? `${this._transitionDelay}ms` : "0ms";
+    this.replaceTransitionClass(f.register("transition", `${t} ${e} ${s} ${i}`));
   }
   replaceTransitionClass(t) {
     this._transitionClass && (this._classNames = this._classNames.filter((e) => e !== this._transitionClass)), this._transitionClass = t, this._classNames.push(t);
   }
   animate(t, e) {
-    x(), this._usesCssMotion = !0, this._motionClass && (this._classNames = this._classNames.filter((f) => f !== this._motionClass));
-    const s = Ft(t), o = (s ? t.duration : e == null ? void 0 : e.duration) ?? this._transitionDuration, i = (s ? t.delay : e == null ? void 0 : e.delay) ?? this._transitionDelay;
+    _(), this._usesCssMotion = !0, this._motionClass && (this._classNames = this._classNames.filter((h) => h !== this._motionClass));
+    const s = Pt(t), i = (s ? t.duration : e == null ? void 0 : e.duration) ?? this._transitionDuration, o = (s ? t.delay : e == null ? void 0 : e.delay) ?? this._transitionDelay;
     let n = s ? t.ease : e == null ? void 0 : e.ease;
     const a = {
       stiffness: (s ? t.stiffness : e == null ? void 0 : e.stiffness) ?? void 0,
@@ -2087,16 +2110,16 @@ class Te {
       mass: (s ? t.mass : e == null ? void 0 : e.mass) ?? void 0
     };
     if (s) {
-      const f = K(t.from), d = K(t.to), m = u.registerKeyframes(Wt(`${f}=>${d}`), f, d);
+      const h = G(t.from), u = G(t.to), m = f.registerKeyframes(Ft(`${h}=>${u}`), h, u);
       this._motionClass = `fibo-anim ${m}`, this._props["data-fibo-anim"] = "custom";
     } else {
-      const f = Ot(t);
-      this._motionClass = `fibo-anim fibo-anim-${f}`, this._props["data-fibo-anim"] = f, (e == null ? void 0 : e.from) !== void 0 && (this._style["--fibo-from"] = typeof e.from == "number" ? `${e.from}px` : e.from), !n && f === "pop" && (n = "spring");
+      const h = Ot(t);
+      this._motionClass = `fibo-anim fibo-anim-${h}`, this._props["data-fibo-anim"] = h, (e == null ? void 0 : e.from) !== void 0 && (this._style["--fibo-from"] = typeof e.from == "number" ? `${e.from}px` : e.from), !n && h === "pop" && (n = "spring");
     }
-    const l = N(n ?? "ease", a);
+    const l = v(n ?? "ease", a);
     this._classNames.push(this._motionClass);
-    const h = this._style;
-    return h["--fibo-dur"] = `${o}ms`, h["--fibo-ease"] = l, h["--fibo-delay"] = `${i}ms`, this._reducedMotion === "never" && !this._classNames.includes("fibo-motion-force") && this._classNames.push("fibo-motion-force"), this;
+    const d = this._style;
+    return d["--fibo-dur"] = `${i}ms`, d["--fibo-ease"] = l, d["--fibo-delay"] = `${o}ms`, this._reducedMotion === "never" && !this._classNames.includes("fibo-motion-force") && this._classNames.push("fibo-motion-force"), this;
   }
   /** CSS `linear()` spring. Works on `.animate()` and `.transition()` / `.hover()`. */
   spring(t) {
@@ -2112,15 +2135,15 @@ class Te {
     }), this);
   }
   focusVisible(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "focus-visible", this);
-    return t ? (t(s), this) : s;
+    const e = new k("focus-visible", this);
+    return t ? (t(e), this) : e;
   }
   stagger(t) {
-    return this._staggerMs = t, this._usesCssMotion = !0, this._style["--fibo-stagger"] = `${t}ms`, x(), this;
+    return this._staggerMs = t, this._usesCssMotion = !0, this._style["--fibo-stagger"] = `${t}ms`, _(), this;
   }
   /** Scroll-reveal: IntersectionObserver toggles `.fibo-inview`. */
   reveal(t = "fadeUp") {
-    return this._reveal = typeof t == "string" ? { preset: t, once: !0 } : { preset: "fadeUp", once: !0, ...t }, this._usesCssMotion = !0, x(), this;
+    return this._reveal = typeof t == "string" ? { preset: t, once: !0 } : { preset: "fadeUp", once: !0, ...t }, this._usesCssMotion = !0, _(), this;
   }
   /** Alias of `.reveal()` for scroll-triggered presets. */
   onScroll(t = "fadeIn") {
@@ -2128,26 +2151,26 @@ class Te {
   }
   /** CSS `animation-timeline: view()` / `scroll()`; IntersectionObserver reveal is the fallback. */
   scrollTimeline(t = "view") {
-    return x(), this._classNames.push(t === "scroll" ? "fibo-scroll-timeline" : "fibo-view-timeline"), this._usesCssMotion = !0, t === "view" && !this._reveal && (this._reveal = { preset: "fadeUp", once: !0 }), this;
+    return _(), this._classNames.push(t === "scroll" ? "fibo-scroll-timeline" : "fibo-view-timeline"), this._usesCssMotion = !0, t === "view" && !this._reveal && (this._reveal = { preset: "fadeUp", once: !0 }), this;
   }
   scrollProgress() {
-    return x(), this._scrollProgress = !0, this._classNames.push("fibo-scroll-progress"), this._usesCssMotion = !0, this;
+    return _(), this._scrollProgress = !0, this._classNames.push("fibo-scroll-progress"), this._usesCssMotion = !0, this;
   }
   smoothScroll() {
-    return this._classNames.push(u.register("scroll-behavior", "smooth")), this;
+    return this._classNames.push(f.register("scroll-behavior", "smooth")), this;
   }
   scrollSnap(t = "y") {
-    return x(), this._classNames.push(`fibo-snap-${t}`), this;
+    return _(), this._classNames.push(`fibo-snap-${t}`), this;
   }
   scrollSnapAlign(t = "start") {
-    return x(), this._classNames.push(`fibo-snap-${t}`), this;
+    return _(), this._classNames.push(`fibo-snap-${t}`), this;
   }
   sticky(t = 0) {
     if (t === !1) return this;
-    this._classNames.push(u.register("position", "sticky"));
+    this._classNames.push(f.register("position", "sticky"));
     const e = t === !0 ? "0px" : typeof t == "number" ? `${t}px` : t;
-    this._classNames.push(u.register("top", e));
-    const s = t === !0 || t === 0 ? le : typeof t == "number" ? `${Math.max(t, ft)}px` : t;
+    this._classNames.push(f.register("top", e));
+    const s = t === !0 || t === 0 ? ne : typeof t == "number" ? `${Math.max(t, ht)}px` : t;
     return this.publishStickyOffset(s), this;
   }
   /**
@@ -2156,7 +2179,7 @@ class Te {
    */
   publishStickyOffset(t) {
     const e = typeof t == "number" ? `${t}px` : t;
-    u.registerRoot("--fibo-sticky-offset", e), u.ensureScrollPadding();
+    f.registerRoot("--fibo-sticky-offset", e), f.ensureScrollPadding();
   }
   viewTransition(t) {
     return this._viewTransition = t, this._style.viewTransitionName = t, this;
@@ -2169,7 +2192,7 @@ class Te {
   }
   ensureInteractiveTransition() {
     this._transitionClass || this._motionClass || this.replaceTransitionClass(
-      u.register(
+      f.register(
         "transition",
         `transform ${this._transitionDuration}ms ${this._transitionEasing}, opacity ${this._transitionDuration}ms ${this._transitionEasing}`
       )
@@ -2178,67 +2201,64 @@ class Te {
   theme(t) {
     return this._theme = t, this;
   }
-  getPseudoStateClassName() {
-    return this._pseudoStateClassName || (this._pseudoStateClassName = ut("fibo-pseudo"), this._classNames.push(this._pseudoStateClassName)), this._pseudoStateClassName;
-  }
   hover(t) {
     this.ensureInteractiveTransition();
-    const e = this.getPseudoStateClassName(), s = new _(e, "hover", this);
-    return t ? (t(s), this) : s;
+    const e = new k("hover", this);
+    return t ? (t(e), this) : e;
   }
   focus(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "focus", this);
-    return t ? (t(s), this) : s;
+    const e = new k("focus", this);
+    return t ? (t(e), this) : e;
   }
   active(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "active", this);
-    return t ? (t(s), this) : s;
+    const e = new k("active", this);
+    return t ? (t(e), this) : e;
   }
   visited(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "visited", this);
-    return t ? (t(s), this) : s;
+    const e = new k("visited", this);
+    return t ? (t(e), this) : e;
   }
   disabledState(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "disabled", this);
-    return t ? (t(s), this) : s;
+    const e = new k("disabled", this);
+    return t ? (t(e), this) : e;
   }
   focusWithin(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "focus-within", this);
-    return t ? (t(s), this) : s;
+    const e = new k("focus-within", this);
+    return t ? (t(e), this) : e;
   }
   firstChild(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "first-child", this);
-    return t ? (t(s), this) : s;
+    const e = new k("first-child", this);
+    return t ? (t(e), this) : e;
   }
   lastChild(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "last-child", this);
-    return t ? (t(s), this) : s;
+    const e = new k("last-child", this);
+    return t ? (t(e), this) : e;
   }
   groupHover(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "hover", this, !0);
-    return t ? (t(s), this) : s;
+    const e = new k("hover", this, !0);
+    return t ? (t(e), this) : e;
   }
   groupFocus(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "focus", this, !0);
-    return t ? (t(s), this) : s;
+    const e = new k("focus", this, !0);
+    return t ? (t(e), this) : e;
   }
   groupActive(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "active", this, !0);
-    return t ? (t(s), this) : s;
+    const e = new k("active", this, !0);
+    return t ? (t(e), this) : e;
   }
   groupFocusWithin(t) {
-    const e = this.getPseudoStateClassName(), s = new _(e, "focus-within", this, !0);
-    return t ? (t(s), this) : s;
+    const e = new k("focus-within", this, !0);
+    return t ? (t(e), this) : e;
   }
   group() {
     return this._classNames.push("group"), this;
   }
   children(t) {
-    return typeof t == "function" ? (this._childFunction = t, this._children = []) : (this._children = H(t), this._childFunction = void 0), this;
+    return typeof t == "function" ? (this._childFunction = t, this._children = []) : (this._children = K(t), this._childFunction = void 0), this;
   }
   getClassName() {
     let t;
-    return Object.keys(this._cssStyles).length > 0 && (t = ee(this._cssStyles) || void 0), Ut(this._classNames, t);
+    return Object.keys(this._cssStyles).length > 0 && (t = Qt(this._cssStyles) || void 0), Xt(this._classNames, t);
   }
   getStyle() {
     let t = { ...this._style, ...this._cssStyles };
@@ -2254,18 +2274,18 @@ class Te {
       t.transform = e ? `${e} ${this._transforms.join(" ")}` : this._transforms.join(" ");
     }
     if (this._animationConfig && this._animatedProps.size === 0) {
-      const { duration: e = 300, curve: s = "easeOut", stiffness: o, damping: i } = this._animationConfig, n = N(s, { stiffness: o, damping: i });
+      const { duration: e = 300, curve: s = "easeOut", stiffness: i, damping: o } = this._animationConfig, n = v(s, { stiffness: i, damping: o });
       t.transition = `all ${e}ms ${n}`;
     }
     return t;
   }
   processChildren() {
-    const t = this._childFunction ? H(this._childFunction) : this._children;
+    const t = this._childFunction ? K(this._childFunction) : this._children;
     return this._staggerMs == null ? t : t.map(
       (e, s) => g.createElement(
         "span",
         {
-          key: g.isValidElement(e) && e.key != null ? e.key : `fibo-stagger-${s}`,
+          key: g.isValidElement(e) && H(e.key) ? e.key : `fibo-stagger-${s}`,
           className: "fibo-stagger-item",
           style: { "--fibo-i": String(s) }
         },
@@ -2277,7 +2297,7 @@ class Te {
     return this._childFunction;
   }
 }
-const he = /* @__PURE__ */ new Set([
+const ae = /* @__PURE__ */ new Set([
   "$$typeof",
   "type",
   "props",
@@ -2290,61 +2310,72 @@ const he = /* @__PURE__ */ new Set([
   "_debugTask",
   "_debugInfo"
 ]);
-function ue(r) {
-  const t = r._isObserver, e = r._signals, s = r._observers, o = r._state, i = r._providers, n = () => {
-    var $;
-    let d = r.build();
-    const m = r._animatedProps, p = r._animationConfig;
-    m && m.size > 0 && (d = g.createElement(re, {
-      animatedProps: m,
-      animationConfig: p,
-      children: d
+function ce(r) {
+  var e;
+  const t = (e = r._props) == null ? void 0 : e.key;
+  if (!(t == null || t === ""))
+    return t;
+}
+function le(r) {
+  const t = r._isObserver, e = r._signals, s = r._observers, i = r._state, o = r._providers, n = ce(r), a = () => {
+    var S;
+    let m = r.build();
+    const p = r._animatedProps, y = r._animationConfig;
+    p && p.size > 0 && (m = g.createElement(ee, {
+      key: n,
+      animatedProps: p,
+      animationConfig: y,
+      children: m
     }));
-    const y = r._reveal;
-    y && (d = g.createElement(ae, {
-      preset: y.preset,
-      once: y.once,
-      rootMargin: y.rootMargin,
-      threshold: y.threshold,
+    const b = r._reveal;
+    b && (m = g.createElement(oe, {
+      key: n,
+      preset: b.preset,
+      once: b.once,
+      rootMargin: b.rootMargin,
+      threshold: b.threshold,
       forceMotion: r._reducedMotion === "never",
-      preferTimeline: ($ = r._classNames) == null ? void 0 : $.includes("fibo-view-timeline"),
-      children: d
-    })), r._scrollProgress && (d = g.createElement(ce, { children: d })), r._usesCssMotion && (d = g.createElement(g.Fragment, null, g.createElement(Xt), d));
-    const b = r._gesture;
-    b && (d = b.wrap(d));
-    const k = r._responsive;
-    return k && (d = g.createElement(oe, {
-      responsive: k,
-      children: d
-    })), d;
-  }, a = typeof r.hasStateManagement == "function" ? r.hasStateManagement() : !!(t || e && e.size || s && s.size || o && o.size || i && i.size), l = t ? g.createElement(Mt, {
-    key: r._props.key,
-    children: n
-  }) : null, h = () => l ?? n();
-  let f = h();
-  return a && e && e.size > 0 ? f = g.createElement(Rt, {
-    key: r._props.key,
+      preferTimeline: (S = r._classNames) == null ? void 0 : S.includes("fibo-view-timeline"),
+      children: m
+    })), r._scrollProgress && (m = g.createElement(ie, { key: n, children: m })), r._usesCssMotion && (m = g.createElement(
+      g.Fragment,
+      { key: n },
+      g.createElement(Bt),
+      m
+    ));
+    const x = r._gesture;
+    return x && (m = x.wrap(m)), m;
+  }, l = typeof r.hasStateManagement == "function" ? r.hasStateManagement() : !!(t || e && e.size || s && s.size || i && i.size || o && o.size), d = t ? g.createElement(Nt, {
+    key: n,
+    children: a
+  }) : null, h = () => d ?? a();
+  let u = h();
+  return l && e && e.size > 0 ? u = g.createElement(It, {
+    key: n,
     signals: e,
     children: h
-  }) : a && s && s.size > 0 && (f = g.createElement(It, {
+  }) : l && s && s.size > 0 && (u = g.createElement(Tt, {
+    key: n,
     observables: s,
     children: h
-  })), a && o && o.size > 0 && (f = g.createElement(zt, {
-    stateMap: o,
-    children: f
-  })), a && i && i.size > 0 && (f = g.createElement(Pt, {
-    providers: i,
-    children: f
-  })), f;
-}
-function dt(r, t, e) {
+  })), l && i && i.size > 0 && (u = g.createElement(Mt, {
+    key: n,
+    stateMap: i,
+    children: u
+  })), l && o && o.size > 0 && (u = g.createElement(Rt, {
+    key: n,
+    providers: o,
+    children: u
+  })), u;
+}
+function ft(r, t, e) {
   const s = function() {
     return t();
   };
   s.displayName = e;
-  const o = g.createElement(s);
+  const i = g.createElement(s);
   Object.defineProperty(r, "$$typeof", {
-    value: o.$$typeof,
+    value: i.$$typeof,
     enumerable: !0,
     configurable: !0
   }), Object.defineProperty(r, "type", {
@@ -2352,57 +2383,60 @@ function dt(r, t, e) {
     enumerable: !0,
     configurable: !0,
     writable: !0
-  }), r.ref = o.ref ?? null, r.__fiboElementProps = o.props ?? {}, o._owner !== void 0 && (r._owner = o._owner), r._store = { validated: 1 };
+  }), r.ref = i.ref ?? null, r.__fiboElementProps = i.props ?? {}, i._owner !== void 0 && (r._owner = i._owner), r._store = { validated: 1 };
 }
-function ze(r) {
+function Me(r) {
   return (...t) => {
-    const e = new r(...t), s = r.name.replace(/Builder$/, "") || "Fibo", o = () => ue(e);
-    return dt(e, o, s), new Proxy(e, {
-      get(i, n, a) {
-        var l;
+    const e = new r(...t), s = r.name.replace(/Builder$/, "") || "Fibo", i = () => le(e);
+    return ft(e, i, s), new Proxy(e, {
+      get(o, n, a) {
+        var l, d;
         if (n === "build")
-          return o;
+          return i;
         if (n === "key") {
-          const h = (l = i._props) == null ? void 0 : l.key;
+          const h = (l = o._props) == null ? void 0 : l.key;
           if (h != null && h !== "")
-            return typeof h == "number" ? String(h) : h;
-          if (!i.__fiboKeyFn) {
-            const f = ut("fibo"), d = (m) => (i.key(m), a);
-            d.toString = () => f, d.valueOf = () => f, i.__fiboKeyFn = d, i.__fiboAutoKey = f;
+            return String(h);
+          if (!o.__fiboKeyFn) {
+            const u = (m) => (o.key(m), a);
+            o.__fiboKeyFn = u;
           }
-          return i.__fiboKeyFn;
+          return o.__fiboKeyFn;
         }
         if (n === "props") {
-          const h = Object.getPrototypeOf(i).props;
-          return typeof h == "function" ? Object.assign((d) => (h.call(i, d), a), i.__fiboElementProps ?? {}) : i.__fiboElementProps ?? {};
+          const h = (d = o._props) == null ? void 0 : d.key, u = {
+            ...o.__fiboElementProps ?? {},
+            ...h != null && h !== "" ? { key: String(h) } : {}
+          }, m = Object.getPrototypeOf(o).props;
+          return typeof m == "function" ? Object.assign((y) => (m.call(o, y), a), u) : u;
         }
-        return he.has(n) || Reflect.has(i, n) ? Reflect.get(i, n, a) : (h) => {
-          const f = n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), m = ["opacity", "z-index", "flex", "flex-grow", "flex-shrink", "order", "font-weight", "line-height"].includes(f), p = typeof h == "number" && !m ? `${h}px` : String(h), y = u.register(f, p);
-          return i.className(y), a;
+        return ae.has(n) || Reflect.has(o, n) ? Reflect.get(o, n, a) : (h) => {
+          const u = n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase(), p = ["opacity", "z-index", "flex", "flex-grow", "flex-shrink", "order", "font-weight", "line-height"].includes(u), y = typeof h == "number" && !p ? `${h}px` : String(h), b = f.register(u, y);
+          return o.className(b), a;
         };
       }
     });
   };
 }
-const fe = ({
+const he = ({
   signal: r,
   builder: t,
   loading: e,
   error: s
 }) => {
-  const o = g.useSyncExternalStore(
+  const i = g.useSyncExternalStore(
     g.useCallback((a) => r.subscribe ? r.subscribe(a) : () => {
     }, [r]),
     () => r.value
-  ), i = o == null ? void 0 : o.error;
-  return i && s ? s(i) : ((o == null ? void 0 : o.isLoading) || (o == null ? void 0 : o.loading)) === !0 && e ? e() : t ? t(o) : null;
-}, de = g.memo(fe);
-class me {
+  ), o = i == null ? void 0 : i.error;
+  return o && s ? s(o) : ((i == null ? void 0 : i.isLoading) || (i == null ? void 0 : i.loading)) === !0 && e ? e() : t ? t(i) : null;
+}, fe = g.memo(he);
+class ue {
   constructor(t) {
     c(this, "_loading");
     c(this, "_error");
     c(this, "_builder");
-    this._signal = t, dt(this, () => this.build(), "ValueBuilder");
+    this._signal = t, ft(this, () => this.build(), "ValueBuilder");
   }
   loading(t) {
     return this._loading = typeof t == "function" ? t : () => t, this;
@@ -2417,7 +2451,7 @@ class me {
     return this._builder = t, this;
   }
   build() {
-    return g.createElement(de, {
+    return g.createElement(fe, {
       signal: this._signal,
       builder: this._builder,
       loading: this._loading,
@@ -2425,52 +2459,53 @@ class me {
     });
   }
 }
-function Ie(r) {
-  return new me(r);
+function Te(r) {
+  return new ue(r);
 }
 export {
-  jt as A,
-  At as B,
-  St as C,
-  H as D,
-  wt as E,
-  Te as F,
-  ut as G,
-  Ne as H,
-  F as I,
-  nt as J,
-  Yt as K,
-  Ce as L,
+  Ot as A,
+  Mt as B,
+  $t as C,
+  zt as D,
+  _t as E,
+  ve as F,
+  jt as G,
+  At as H,
+  K as I,
+  Z as J,
+  F as K,
+  at as L,
   U as M,
-  Nt as O,
-  Pt as P,
-  we as R,
-  z as S,
-  Ie as V,
-  xe as a,
+  Ht as N,
+  wt as O,
+  Rt as P,
+  _e as R,
+  R as S,
+  Te as V,
+  ke as a,
   tt as b,
-  _e as c,
-  Mt as d,
-  Se as e,
-  Vt as f,
+  be as c,
+  Nt as d,
+  $e as e,
+  oe as f,
   et as g,
-  ae as h,
-  ce as i,
-  Ee as j,
-  Me as k,
-  ie as l,
-  ne as m,
-  it as n,
-  ke as o,
-  N as p,
-  Xt as q,
-  xt as r,
-  ye as s,
-  ve as t,
-  $e as u,
-  ze as v,
-  Et as w,
-  x,
-  Ot as y,
-  zt as z
+  ie as h,
+  Ce as i,
+  Ne as j,
+  se as k,
+  re as l,
+  it as m,
+  v as n,
+  ye as o,
+  Bt as p,
+  we as q,
+  kt as r,
+  ge as s,
+  nt as t,
+  xe as u,
+  Se as v,
+  Me as w,
+  Ee as x,
+  Ct as y,
+  _ as z
 };