fiboui 2.4.1 → 2.4.3

package/dist/{builder-Dnz93Wem.js → builder-B5cebEWZ.js}

@@ -1,49 +1,49 @@
 "use client";
-var zo = Object.defineProperty;
-var So = (t, o, i) => o in t ? zo(t, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[o] = i;
-var a = (t, o, i) => So(t, typeof o != "symbol" ? o + "" : o, i);
-import g, { useRef as _, createContext as X, useContext as j, useCallback as T, useSyncExternalStore as D, useEffect as M, useState as eo, cloneElement as $o } from "react";
-import { jsx as $, Fragment as V } from "react/jsx-runtime";
-import { r as Co, f as No, b as To } from "./themeData-CmTJt3dU.js";
-class fo {
+var So = Object.defineProperty;
+var Co = (t, o, i) => o in t ? So(t, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[o] = i;
+var a = (t, o, i) => Co(t, typeof o != "symbol" ? o + "" : o, i);
+import g, { useRef as z, createContext as B, useContext as V, useCallback as E, useSyncExternalStore as W, useEffect as L, useState as ro, cloneElement as $o } from "react";
+import { jsx as T, Fragment as H } from "react/jsx-runtime";
+import { r as To, f as No, b as Eo } from "./themeData-Dtm0M_mF.js";
+class no {
   constructor() {
     a(this, "activeEffect", null);
   }
 }
-const ro = new fo(), F = [ro];
-function no() {
-  return new fo();
+const so = new no(), Y = [so];
+function ao() {
+  return new no();
 }
-function so() {
-  return F[F.length - 1] ?? ro;
+function co() {
+  return Y[Y.length - 1] ?? so;
 }
-function Y() {
-  return so().activeEffect;
+function O() {
+  return co().activeEffect;
 }
-function Eo(t, o) {
-  F.push(t);
+function Ro(t, o) {
+  Y.push(t);
   try {
     return o();
   } finally {
-    F.pop();
+    Y.pop();
   }
 }
-function E(t) {
-  const o = so(), i = o.activeEffect;
+function R(t) {
+  const o = co(), i = o.activeEffect;
   return o.activeEffect = t, i;
 }
-class Ro {
+class Io {
   constructor(o) {
     a(this, "dependencies", /* @__PURE__ */ new Set());
     a(this, "_onDispose");
     this.fn = o, this.run();
   }
   run() {
-    const o = E(this);
+    const o = R(this);
     try {
       this.cleanup(), this.fn();
     } finally {
-      E(o);
+      R(o);
     }
   }
   track(o) {
@@ -60,17 +60,17 @@ class Ro {
     this.cleanup(), (o = this._onDispose) == null || o.call(this);
   }
 }
-class Io {
+class Fo {
   constructor(o) {
     a(this, "dependencies", /* @__PURE__ */ new Set());
     this._onInvalidate = o;
   }
   execute(o) {
-    const i = E(this);
+    const i = R(this);
     try {
       return this.cleanup(), o();
     } finally {
-      E(i);
+      R(i);
     }
   }
   track(o) {
@@ -86,14 +86,15 @@ class Io {
     this.cleanup();
   }
 }
-class I {
+class X {
   constructor(o) {
     a(this, "listeners", /* @__PURE__ */ new Set());
     a(this, "effects", /* @__PURE__ */ new Set());
+    a(this, "_notifyDepth", 0);
     this._value = o;
   }
   get value() {
-    const o = Y();
+    const o = O();
     return o && o.track(this), this._value;
   }
   set value(o) {
@@ -109,32 +110,42 @@ class I {
     this.effects.delete(o);
   }
   notify() {
-    const o = Array.from(this.effects), i = Array.from(this.listeners);
-    o.forEach((e) => e.trigger()), i.forEach((e) => e(this._value));
+    if (this._notifyDepth > 32) {
+      typeof console < "u" && console.error("[fiboui] Signal update loop detected — aborting notify");
+      return;
+    }
+    this._notifyDepth += 1;
+    try {
+      const o = Array.from(this.effects), i = Array.from(this.listeners);
+      o.forEach((e) => e.trigger()), i.forEach((e) => e(this._value));
+    } finally {
+      this._notifyDepth -= 1;
+    }
   }
 }
 function Li(t) {
-  return new I(t);
+  return new X(t);
 }
-class Fo {
+class Xo {
   constructor(o) {
     a(this, "listeners", /* @__PURE__ */ new Set());
     a(this, "effects", /* @__PURE__ */ new Set());
     a(this, "_value");
     a(this, "_dirty", !0);
     a(this, "internalEffect");
-    this.fn = o, this.internalEffect = new Ro(() => {
+    a(this, "_notifyDepth", 0);
+    this.fn = o, this.internalEffect = new Io(() => {
       this._dirty || (this._dirty = !0, this.notify());
     });
   }
   get value() {
-    const o = Y();
+    const o = O();
     if (o && o.track(this), this._dirty) {
-      const i = E(this.internalEffect);
+      const i = R(this.internalEffect);
       try {
         this.internalEffect.cleanup(), this._value = this.fn(), this._dirty = !1;
       } finally {
-        E(i);
+        R(i);
       }
     }
     return this._value;
@@ -149,21 +160,30 @@ class Fo {
     this.effects.delete(o);
   }
   notify() {
-    const o = Array.from(this.effects), i = Array.from(this.listeners);
-    o.forEach((e) => e.trigger()), i.forEach((e) => e(this._value));
+    if (this._notifyDepth > 32) {
+      typeof console < "u" && console.error("[fiboui] ComputedSignal update loop detected — aborting notify");
+      return;
+    }
+    this._notifyDepth += 1;
+    try {
+      const o = Array.from(this.effects), i = Array.from(this.listeners);
+      o.forEach((e) => e.trigger()), i.forEach((e) => e(this._value));
+    } finally {
+      this._notifyDepth -= 1;
+    }
   }
 }
 function Oi(t) {
-  return new Fo(t);
+  return new Xo(t);
 }
-class Xo {
+class Mo {
   constructor(o) {
     a(this, "listeners", /* @__PURE__ */ new Set());
     a(this, "effects", /* @__PURE__ */ new Set());
     this._value = o;
   }
   get() {
-    const o = Y();
+    const o = O();
     return o && o.track(this), this._value;
   }
   set(o) {
@@ -182,17 +202,17 @@ class Xo {
     Array.from(this.effects).forEach((o) => o.trigger()), Array.from(this.listeners).forEach((o) => o(this._value));
   }
 }
-function Pi(t) {
-  return new Xo(t);
+function Ai(t) {
+  return new Mo(t);
 }
-class Mo {
+class Yo {
   constructor(o) {
     a(this, "listeners", /* @__PURE__ */ new Set());
     a(this, "effects", /* @__PURE__ */ new Set());
     this.state = o;
   }
   getState() {
-    const o = Y();
+    const o = O();
     return o && o.track(this), this.state;
   }
   setState(o) {
@@ -212,47 +232,47 @@ class Mo {
     Array.from(this.effects).forEach((o) => o.trigger()), Array.from(this.listeners).forEach((o) => o(this.state));
   }
 }
-function Ai(t) {
-  return new Mo(t);
+function Pi(t) {
+  return new Yo(t);
 }
-const Yo = no(), ao = X(Yo);
-function Bo() {
-  return j(ao);
+const Bo = ao(), bo = B(Bo);
+function Lo() {
+  return V(bo);
 }
-function ji({ children: t, scope: o }) {
-  const i = _(o ?? no()).current;
-  return /* @__PURE__ */ $(ao.Provider, { value: i, children: t });
+function Di({ children: t, scope: o }) {
+  const i = z(o ?? ao()).current;
+  return /* @__PURE__ */ T(bo.Provider, { value: i, children: t });
 }
-function Lo({ children: t }) {
-  const o = _(0), i = _(/* @__PURE__ */ new Set()), e = _(null);
-  e.current || (e.current = new Io(() => {
+function Oo({ children: t }) {
+  const o = z(0), i = z(/* @__PURE__ */ new Set()), e = z(null);
+  e.current || (e.current = new Fo(() => {
     o.current += 1, i.current.forEach((c) => c());
   }));
-  const r = T((c) => (i.current.add(c), () => {
+  const r = E((c) => (i.current.add(c), () => {
     i.current.delete(c);
-  }), []), f = T(() => o.current, []);
-  D(r, f, f), M(() => () => {
+  }), []), f = E(() => o.current, []);
+  W(r, f, f), L(() => () => {
     var c;
     (c = e.current) == null || c.dispose();
   }, []);
-  const n = Bo();
+  const n = Lo();
   let s = null;
   try {
-    s = Eo(n, () => e.current.execute(t));
+    s = Ro(n, () => e.current.execute(t));
   } catch {
     s = null;
   }
-  return /* @__PURE__ */ $(V, { children: s });
+  return /* @__PURE__ */ T(H, { children: s });
 }
-const Oo = X(/* @__PURE__ */ new Map()), co = X(null);
-function Di(t) {
-  const o = j(co);
+const Ao = B(/* @__PURE__ */ new Map()), uo = B(null);
+function ji(t) {
+  const o = V(uo);
   if (!o)
     throw new Error("useBuilderState must be used under a builder that called .state()");
   return [o.get(t), (i) => o.set(t, i)];
 }
 function Po({ stateMap: t = /* @__PURE__ */ new Map(), children: o }) {
-  const [i, e] = eo(() => new Map(t)), r = {
+  const [i, e] = ro(() => new Map(t)), r = {
     map: i,
     get: (f) => i.get(f),
     set: (f, n) => {
@@ -264,89 +284,89 @@ function Po({ stateMap: t = /* @__PURE__ */ new Map(), children: o }) {
       });
     }
   };
-  return /* @__PURE__ */ $(co.Provider, { value: r, children: /* @__PURE__ */ $(Oo.Provider, { value: i, children: o }) });
+  return /* @__PURE__ */ T(uo.Provider, { value: r, children: /* @__PURE__ */ T(Ao.Provider, { value: i, children: o }) });
 }
-function Ao({ observables: t, children: o }) {
-  const i = _(0), e = T((f) => {
+function Do({ observables: t, children: o }) {
+  const i = z(0), e = E((f) => {
     const n = Array.from(t).map(
       (s) => s.subscribe(() => {
         i.current += 1, f();
       })
     );
     return () => n.forEach((s) => s());
-  }, [t]), r = T(() => i.current, []);
-  return D(e, r, r), /* @__PURE__ */ $(V, { children: typeof o == "function" ? o() : o });
+  }, [t]), r = E(() => i.current, []);
+  return W(e, r, r), /* @__PURE__ */ T(H, { children: typeof o == "function" ? o() : o });
 }
 function jo({ signals: t, children: o }) {
-  const i = _(0), e = T((f) => {
+  const i = z(0), e = E((f) => {
     const n = Array.from(t).map(
       (s) => s.subscribe(() => {
         i.current += 1, f();
       })
     );
     return () => n.forEach((s) => s());
-  }, [t]), r = T(() => i.current, []);
-  return D(e, r, r), /* @__PURE__ */ $(V, { children: typeof o == "function" ? o() : o });
+  }, [t]), r = E(() => i.current, []);
+  return W(e, r, r), /* @__PURE__ */ T(H, { children: typeof o == "function" ? o() : o });
 }
-const bo = X(/* @__PURE__ */ new Map());
+const lo = B(/* @__PURE__ */ new Map());
 function Vi(t) {
-  const o = j(bo);
+  const o = V(lo);
   return o == null ? void 0 : o.get(t);
 }
-function Do({ providers: t = /* @__PURE__ */ new Map(), children: o }) {
-  return /* @__PURE__ */ $(bo.Provider, { value: t, children: o });
+function Vo({ providers: t = /* @__PURE__ */ new Map(), children: o }) {
+  return /* @__PURE__ */ T(lo.Provider, { value: t, children: o });
 }
-function Vo(t) {
+function Wo(t) {
   return !!t && typeof t == "object" && "build" in t && typeof t.build == "function";
 }
-function Wo(t) {
-  return g.isValidElement(t) ? t : Vo(t) ? t.build() : t;
+function Ho(t) {
+  return g.isValidElement(t) ? t : Wo(t) ? t.build() : t;
 }
-function W(t) {
+function U(t) {
   return typeof t == "string" || typeof t == "number";
 }
-function Ho(t, o) {
-  return g.isValidElement(t) && W(t.key) && t.key !== "" ? t.key : `.$fibo-${o}`;
-}
 function Uo(t, o) {
-  return !g.isValidElement(t) || W(t.key) && t.key !== "" ? t : g.cloneElement(t, { key: Ho(t, o) });
+  return g.isValidElement(t) && U(t.key) && t.key !== "" ? t.key : `.$fibo-${o}`;
 }
-function U(t) {
+function Go(t, o) {
+  return !g.isValidElement(t) || U(t.key) && t.key !== "" ? t : g.cloneElement(t, { key: Uo(t, o) });
+}
+function K(t) {
   if (t == null)
     return [];
   const o = typeof t == "function" ? t() : t;
-  return (Array.isArray(o) ? o : [o]).map((e, r) => Uo(Wo(e), r));
+  return (Array.isArray(o) ? o : [o]).map((e, r) => Go(Ho(e), r));
 }
-const G = /* @__PURE__ */ new Map(), Go = {
+const Z = /* @__PURE__ */ new Map(), Ko = {
   easeIn: "ease-in",
   easeOut: "ease-out",
   easeInOut: "ease-in-out",
   linear: "linear",
   ease: "ease"
 };
-function uo(t = {}) {
-  const o = t.stiffness ?? 170, i = t.damping ?? 26, e = t.mass ?? 1, r = `${o}:${i}:${e}`, f = G.get(r);
+function ho(t = {}) {
+  const o = t.stiffness ?? 170, i = t.damping ?? 26, e = t.mass ?? 1, r = `${o}:${i}:${e}`, f = Z.get(r);
   if (f) return f;
   const n = 1 / 60, s = 1;
-  let c = 0, h = 0;
+  let c = 0, x = 0;
   const b = [0];
   for (let d = 0; d < 180; d += 1) {
-    const y = -o * (c - s) - i * h;
-    if (h += y / e * n, c += h * n, b.push(c), d > 8 && Math.abs(c - s) < 2e-3 && Math.abs(h) < 2e-3) break;
+    const y = -o * (c - s) - i * x;
+    if (x += y / e * n, c += x * n, b.push(c), d > 8 && Math.abs(c - s) < 2e-3 && Math.abs(x) < 2e-3) break;
   }
   b[b.length - 1] !== 1 && b.push(1);
-  const x = Math.max(1, Math.floor((b.length - 1) / 24)), p = [];
-  for (let d = 0; d < b.length; d += x) {
-    const y = d / (b.length - 1), z = Math.round(b[d] * 1e4) / 1e4;
-    p.push(d === 0 ? `${z}` : `${z} ${Math.round(y * 1e4) / 100}%`);
+  const h = Math.max(1, Math.floor((b.length - 1) / 24)), p = [];
+  for (let d = 0; d < b.length; d += h) {
+    const y = d / (b.length - 1), S = Math.round(b[d] * 1e4) / 1e4;
+    p.push(d === 0 ? `${S}` : `${S} ${Math.round(y * 1e4) / 100}%`);
   }
   const m = `linear(${p.join(", ")})`;
-  return G.set(r, m), m;
+  return Z.set(r, m), m;
 }
-function S(t, o) {
-  return t === "spring" ? uo(o) : Go[t] ?? t;
+function $(t, o) {
+  return t === "spring" ? ho(o) : Ko[t] ?? t;
 }
-const K = [
+const q = [
   "fadeIn",
   "fadeOut",
   "fade",
@@ -362,35 +382,35 @@ const K = [
   "blur",
   "pop",
   "bounce"
-], Ko = {
+], Zo = {
   fade: "fadeIn",
   scale: "scaleIn",
   blur: "blurIn"
 };
-function Zo(t) {
+function qo(t) {
   if (!t || typeof t != "object") return !1;
   const o = t;
   return typeof o.from == "object" && o.from !== null && typeof o.to == "object" && o.to !== null;
 }
-function Z(t) {
+function Q(t) {
   const o = /* @__PURE__ */ new Set(["opacity", "zIndex", "z-index", "flex", "fontWeight", "lineHeight"]);
   return Object.entries(t).map(([i, e]) => {
     const r = i.replace(/[A-Z]/g, (n) => `-${n.toLowerCase()}`), f = typeof e == "number" && !o.has(i) ? `${e}px` : String(e);
     return `${r}: ${f}`;
   }).join("; ");
 }
-function qo(t) {
+function Qo(t) {
   let o = 5381;
   for (let i = 0; i < t.length; i += 1) o = (o << 5) + o ^ t.charCodeAt(i);
   return (o >>> 0).toString(36);
 }
-function Qo(t) {
-  const o = Ko[t] ?? t;
-  if (!K.includes(o))
-    throw new Error(`Unknown motion preset "${t}". Use: ${K.join(", ")}`);
+function Jo(t) {
+  const o = Zo[t] ?? t;
+  if (!q.includes(o))
+    throw new Error(`Unknown motion preset "${t}". Use: ${q.join(", ")}`);
   return o;
 }
-const A = `
+const j = `
 .fibo-anim {
   animation-duration: var(--fibo-dur, 300ms);
   animation-timing-function: var(--fibo-ease, ease);
@@ -532,13 +552,13 @@ const A = `
   }
 }
 `.trim();
-function q(t) {
+function J(t) {
   let o = 5381;
   for (let i = 0; i < t.length; i += 1)
     o = (o << 5) + o ^ t.charCodeAt(i);
   return (o >>> 0).toString(36);
 }
-const k = class k {
+const _ = class _ {
   constructor() {
     a(this, "sheet", null);
     a(this, "cache", /* @__PURE__ */ new Map());
@@ -547,14 +567,14 @@ const k = class k {
     this.attachSheet(), this.ensureDefaults();
   }
   static getInstance() {
-    return k.instance || (k.instance = new k()), k.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() {
-    k.getInstance().reset();
+    _.getInstance().reset();
   }
   attachSheet() {
     if (typeof document > "u") return;
@@ -572,12 +592,12 @@ const k = class k {
     const r = `@media ${o}|${i}:${e}`;
     if (this.cache.has(r))
       return this.cache.get(r);
-    const f = `fibo-mq-${q(r)}`, n = `@media ${o} { .${f} { ${i}: ${e} !important; } }`;
+    const f = `fibo-mq-${J(r)}`, n = `@media ${o} { .${f} { ${i}: ${e} !important; } }`;
     return this.insert(n), this.cache.set(r, f), f;
   }
   ensureDefaults() {
     var o;
-    this.defaultsReady || (this.defaultsReady = !0, this.sheet && !((o = this.sheet.textContent) != null && o.includes("fibo-fadeIn")) && this.sheet.appendChild(document.createTextNode(A)));
+    this.defaultsReady || (this.defaultsReady = !0, this.sheet && !((o = this.sheet.textContent) != null && o.includes("fibo-fadeIn")) && this.sheet.appendChild(document.createTextNode(j)));
   }
   /**
    * Append a large static CSS blob once (keyed). Used by interaction-effect presets.
@@ -590,7 +610,7 @@ const k = class k {
   getCss() {
     this.ensureDefaults();
     const o = [...this.extras].sort();
-    return [A, ...o].filter(Boolean).join(`
+    return [j, ...o].filter(Boolean).join(`
 `);
   }
   registerKeyframes(o, i, e) {
@@ -635,83 +655,87 @@ const k = class k {
     const f = `${r ? "group:" : ""}${o}:${i}:${e}`;
     if (this.cache.has(f))
       return this.cache.get(f);
-    const n = `fibo-ps-${q(f)}`, s = r ? `.group:${o} .${n} { ${i}: ${e} !important; }` : `.${n}:${o} { ${i}: ${e} !important; }`;
+    const n = `fibo-ps-${J(f)}`, s = r ? `.group:${o} .${n} { ${i}: ${e} !important; }` : `.${n}:${o} { ${i}: ${e} !important; }`;
     return this.insert(s), this.cache.set(f, n), n;
   }
   registerGroupPseudo(o, i, e, r) {
     return this.registerPseudo(i, e, r, !0);
   }
 };
-a(k, "instance");
-let C = k;
-const u = C.getInstance();
+a(_, "instance");
+let k = _;
+const u = k.getInstance();
 function w() {
-  C.getInstance().ensureDefaults();
+  k.getInstance().ensureDefaults();
 }
 function Wi() {
-  return C.getInstance().getCss();
+  return k.getInstance().getCss();
 }
-function lo() {
-  return C.getInstance().getCss();
+function xo() {
+  return k.getInstance().getCss();
 }
 function Hi() {
-  return `<style id="fibo-dynamic-styles" data-fibo="1">${lo().replace(/<\/style/gi, "<\\/style")}</style>`;
+  const o = `<style id="fibo-dynamic-styles" data-fibo="1">${xo().replace(/<\/style/gi, "<\\/style")}</style>`;
+  return typeof document > "u" && k.resetForTests(), o;
 }
 function Ui() {
+  k.resetForTests();
+}
+function Gi() {
   return w(), g.createElement("style", {
     id: "fibo-dynamic-styles",
     "data-fibo": "1",
     suppressHydrationWarning: !0,
-    dangerouslySetInnerHTML: { __html: lo() }
+    dangerouslySetInnerHTML: { __html: xo() }
   });
 }
-function Jo() {
+function oi() {
   return w(), g.createElement("style", {
     id: "fibo-motion-presets",
     "data-fibo-motion": "1",
-    dangerouslySetInnerHTML: { __html: A }
+    dangerouslySetInnerHTML: { __html: j }
   });
 }
-const ho = {
+const po = {
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280
 };
-function oi(t) {
-  return t in ho;
-}
 function ii(t) {
-  if (oi(t))
-    return `(min-width: ${ho[t]}px)`;
+  return t in po;
+}
+function ti(t) {
+  if (ii(t))
+    return `(min-width: ${po[t]}px)`;
   const o = t.trim();
   return o.startsWith("@media") ? o.replace(/^@media\s+/, "") : o;
 }
-function xo(t) {
+function go(t) {
   var o, i, e = "";
   if (typeof t == "string" || typeof t == "number") e += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var r = t.length;
-    for (o = 0; o < r; o++) t[o] && (i = xo(t[o])) && (e && (e += " "), e += i);
+    for (o = 0; o < r; o++) t[o] && (i = go(t[o])) && (e && (e += " "), e += i);
   } else for (i in t) t[i] && (e && (e += " "), e += i);
   return e;
 }
-function ti() {
-  for (var t, o, i = 0, e = "", r = arguments.length; i < r; i++) (t = arguments[i]) && (o = xo(t)) && (e && (e += " "), e += o);
+function ei() {
+  for (var t, o, i = 0, e = "", r = arguments.length; i < r; i++) (t = arguments[i]) && (o = go(t)) && (e && (e += " "), e += o);
   return e;
 }
-function ei(t) {
+function fi(t) {
   const o = t.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/);
   if (!o)
     return t;
-  const [, i, e, r] = o, f = parseFloat(i), n = parseFloat(e), s = parseFloat(r), c = n * Math.cos(s * Math.PI / 180), h = n * Math.sin(s * Math.PI / 180), b = f + 0.3963377774 * c + 0.2158037573 * h, l = f - 0.1055613458 * c - 0.0638541728 * h, x = f - 0.0894841775 * c - 1.291485548 * h, p = b * b * b, m = l * l * l, d = x * x * x, y = 4.0767416621 * p - 3.3077115913 * m + 0.2309699292 * d, z = -1.2684380046 * p + 2.6097574011 * m - 0.3413193965 * d, wo = -0.0041960863 * p - 0.7034186147 * m + 1.707614701 * d, B = (R) => R >= 31308e-7 ? 1.055 * R ** (1 / 2.4) - 0.055 : 12.92 * R, yo = Math.max(0, Math.min(1, B(y))), ko = Math.max(0, Math.min(1, B(z))), _o = Math.max(0, Math.min(1, B(wo))), L = (R) => {
-    var H;
-    const O = (H = Math.round(R * 255).toString(16)) == null ? void 0 : H.toUpperCase();
-    return O.length === 1 ? `0${O}` : O;
+  const [, i, e, r] = o, f = parseFloat(i), n = parseFloat(e), s = parseFloat(r), c = n * Math.cos(s * Math.PI / 180), x = n * Math.sin(s * Math.PI / 180), b = f + 0.3963377774 * c + 0.2158037573 * x, l = f - 0.1055613458 * c - 0.0638541728 * x, h = f - 0.0894841775 * c - 1.291485548 * x, p = b * b * b, m = l * l * l, d = h * h * h, y = 4.0767416621 * p - 3.3077115913 * m + 0.2309699292 * d, S = -1.2684380046 * p + 2.6097574011 * m - 0.3413193965 * d, I = -0.0041960863 * p - 0.7034186147 * m + 1.707614701 * d, C = (F) => F >= 31308e-7 ? 1.055 * F ** (1 / 2.4) - 0.055 : 12.92 * F, ko = Math.max(0, Math.min(1, C(y))), _o = Math.max(0, Math.min(1, C(S))), zo = Math.max(0, Math.min(1, C(I))), A = (F) => {
+    var G;
+    const P = (G = Math.round(F * 255).toString(16)) == null ? void 0 : G.toUpperCase();
+    return P.length === 1 ? `0${P}` : P;
   };
-  return `#${L(yo)}${L(ko)}${L(_o)}`;
+  return `#${A(ko)}${A(_o)}${A(zo)}`;
 }
-function fi(t) {
+function ri(t) {
   const o = {}, i = {}, e = t.split(`
 `);
   for (const r of e) {
@@ -720,22 +744,22 @@ function fi(t) {
       continue;
     const n = f.match(/^--color-([a-z0-9\-]+): (oklch\([^)]+\));?$/), s = f.match(/^--color-([a-z0-9\-]+): (#[a-fA-F0-9]{3,6});?$/);
     if (n) {
-      const [, c, h] = n, b = ei(h);
+      const [, c, x] = n, b = fi(x);
       o[b.toLowerCase()] = `bg-${c}`, i[b.toLowerCase()] = `text-${c}`;
     } else if (s) {
-      const [, c, h] = s;
-      o[h.toLowerCase()] = `bg-${c}`, i[h.toLowerCase()] = `text-${c}`;
+      const [, c, x] = s;
+      o[x.toLowerCase()] = `bg-${c}`, i[x.toLowerCase()] = `text-${c}`;
     }
   }
   return { background: o, text: i };
 }
-const ri = (t) => {
+const ni = (t) => {
   if (t !== void 0)
     return typeof t == "number" ? `${t}px` : t.toString();
 }, N = (t, o) => {
-  const i = ri(o);
+  const i = ni(o);
   return i === void 0 ? "" : `${t}-[${i}]`;
-}, ni = `
+}, si = `
   --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);
@@ -980,7 +1004,7 @@ const ri = (t) => {
   --color-stone-950: oklch(0.147 0.004 49.25);
   --color-black: #000;
   --color-white: #fff;
-`, si = fi(ni), po = {
+`, ai = ri(si), mo = {
   borderRadius: {
     0: "rounded-none",
     "0px": "rounded-none",
@@ -1077,7 +1101,7 @@ const ri = (t) => {
     fixed: "fixed",
     sticky: "sticky"
   }
-}, ai = (t, o) => ({
+}, ci = (t, o) => ({
   // 背景色
   backgroundColor: (i) => i.backgroundColor ? [t.background[i.backgroundColor.toLowerCase()] || `bg-[${i.backgroundColor}]`] : [],
   // 文字色
@@ -1086,7 +1110,7 @@ const ri = (t) => {
   borderRadius: (i) => {
     if (!i.borderRadius)
       return [];
-    const e = po.borderRadius[i.borderRadius] || N("rounded", i.borderRadius);
+    const e = mo.borderRadius[i.borderRadius] || N("rounded", i.borderRadius);
     return e ? [e] : [];
   },
   // 外边距
@@ -1233,7 +1257,7 @@ const ri = (t) => {
   },
   // 自定义类名
   className: (i) => i.className ? [i.className] : []
-}), ci = {
+}), bi = {
   backgroundColor: "backgroundColor",
   color: "color",
   borderRadius: "borderRadius",
@@ -1267,49 +1291,49 @@ const ri = (t) => {
   position: "position",
   opacity: "opacity",
   className: "className"
-}, bi = (t, o) => {
-  const i = (o == null ? void 0 : o.colorMaps) || si, e = (o == null ? void 0 : o.styleMaps) || po, r = ai(i, e), f = [], n = /* @__PURE__ */ new Set();
+}, ui = (t, o) => {
+  const i = (o == null ? void 0 : o.colorMaps) || ai, e = (o == null ? void 0 : o.styleMaps) || mo, r = ci(i, e), f = [], n = /* @__PURE__ */ new Set();
   return Object.keys(t).forEach((s) => {
-    const c = ci[s];
+    const c = bi[s];
     if (c && !n.has(c)) {
-      const h = r[c];
-      if (h) {
-        const b = h(t);
+      const x = r[c];
+      if (x) {
+        const b = x(t);
         f.push(...b), n.add(c);
       }
     }
   }), f.filter(Boolean).join(" ");
 };
-function ui(t) {
+function li(t) {
   const o = {};
   return t.forEach((i, e) => {
     o[e] = i.value;
   }), o;
 }
-function li({ animatedProps: t, animationConfig: o, children: i }) {
-  const [e, r] = eo(
-    () => ui(t)
+function hi({ animatedProps: t, animationConfig: o, children: i }) {
+  const [e, r] = ro(
+    () => li(t)
   );
-  M(() => {
+  L(() => {
     const c = [];
-    return t.forEach((h, b) => {
-      const l = (x) => {
+    return t.forEach((x, b) => {
+      const l = (h) => {
         r((p) => ({
           ...p,
-          [b]: x
+          [b]: h
         }));
       };
-      c.push(h.subscribe(l)), l(h.value);
+      c.push(x.subscribe(l)), l(x.value);
     }), () => {
-      c.forEach((h) => h());
+      c.forEach((x) => x());
     };
   }, [t]);
   const f = [];
   e.translateX !== void 0 && f.push(`translateX(${e.translateX}px)`), e.translateY !== void 0 && f.push(`translateY(${e.translateY}px)`), e.scale !== void 0 && f.push(`scale(${e.scale})`), e.rotate !== void 0 && f.push(`rotate(${e.rotate}deg)`);
   const n = {};
   if (f.length > 0 && (n.transform = f.join(" ")), o) {
-    const { duration: c = 300, curve: h = "easeOut", stiffness: b, damping: l } = o, x = S(h, { stiffness: b, damping: l });
-    n.transition = `transform ${c}ms ${x}`;
+    const { duration: c = 300, curve: x = "easeOut", stiffness: b, damping: l } = o, h = $(x, { stiffness: b, damping: l });
+    n.transition = `transform ${c}ms ${h}`;
   }
   const s = {
     ...i.props.style,
@@ -1317,7 +1341,7 @@ function li({ animatedProps: t, animationConfig: o, children: i }) {
   };
   return $o(i, { style: s });
 }
-const go = [
+const vo = [
   // —— 2D Transitions ——
   "grow",
   "shrink",
@@ -1437,7 +1461,7 @@ const go = [
   "curlTopRight",
   "curlBottomRight",
   "curlBottomLeft"
-], Q = {
+], oo = {
   "pulse-grow": "pulseGrow",
   "pulse-shrink": "pulseShrink",
   "bounce-in": "bounceIn",
@@ -1534,29 +1558,29 @@ const go = [
   "hvr-float": "float",
   "hvr-sweep-to-right": "sweepToRight"
 };
-function hi(t) {
+function xi(t) {
   return t.replace(/[A-Z]/g, (o) => `-${o.toLowerCase()}`);
 }
-function J(t) {
-  return go.includes(t);
+function io(t) {
+  return vo.includes(t);
 }
-function xi(t) {
-  const o = t.trim(), i = Q[o] ?? Q[o.toLowerCase()];
+function pi(t) {
+  const o = t.trim(), i = oo[o] ?? oo[o.toLowerCase()];
   if (i) return i;
-  if (J(o)) return o;
+  if (io(o)) return o;
   const e = o.replace(/-([a-z])/g, (r, f) => f.toUpperCase());
-  if (J(e)) return e;
+  if (io(e)) return e;
   throw new Error(
-    `Unknown interaction effect "${t}". Use one of ${go.length} presets — see INTERACTION_EFFECTS.`
+    `Unknown interaction effect "${t}". Use one of ${vo.length} presets — see INTERACTION_EFFECTS.`
   );
 }
-function pi(t, o = !1) {
+function gi(t, o = !1) {
   return o ? `fibo-fx-on-group-${t}` : `fibo-fx-on-${t}`;
 }
-function gi(t) {
-  return `fibo-fx-${hi(t)}`;
+function di(t) {
+  return `fibo-fx-${xi(t)}`;
 }
-const di = `
+const mi = `
 @keyframes fibo-fx-pulse { 25% { transform: scale(1.1); } 75% { transform: scale(0.9); } }
 @keyframes fibo-fx-pulse-grow { to { transform: scale(1.1); } }
 @keyframes fibo-fx-pulse-shrink { to { transform: scale(0.9); } }
@@ -1571,10 +1595,10 @@ const di = `
   100% { transform: scale(0); opacity: 0; }
 }
 @keyframes fibo-fx-bob {
-  0% { transform: translateY(-8px); } 50% { transform: translateY(-4px); } 100% { transform: translateY(-8px); }
+  0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); }
 }
 @keyframes fibo-fx-hang {
-  0% { transform: translateY(8px); } 50% { transform: translateY(4px); } 100% { transform: translateY(8px); }
+  0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); }
 }
 @keyframes fibo-fx-wobble-h {
   16.65% { transform: translateX(8px); } 33.3% { transform: translateX(-6px); }
@@ -1613,8 +1637,9 @@ const di = `
   83.25% { transform: skew(-2deg); } 100% { transform: skew(0); }
 }
 @keyframes fibo-fx-buzz {
-  50% { transform: translateX(3px) rotate(2deg); }
-  100% { transform: translateX(-3px) rotate(-2deg); }
+  0%,100% { transform: translateX(0) rotate(0); }
+  25% { transform: translateX(3px) rotate(2deg); }
+  75% { transform: translateX(-3px) rotate(-2deg); }
 }
 @keyframes fibo-fx-buzz-out {
   10% { transform: translateX(3px) rotate(2deg); }
@@ -1629,14 +1654,15 @@ const di = `
   100% { opacity: 1; transform: translateY(0); }
 }
 @keyframes fibo-fx-icon-bob {
-  0%,100% { transform: translateY(-6px); } 50% { transform: translateY(-2px); }
+  0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); }
 }
 @keyframes fibo-fx-icon-hang {
-  0%,100% { transform: translateY(6px); } 50% { transform: translateY(2px); }
+  0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); }
 }
 @keyframes fibo-fx-icon-buzz {
-  50% { transform: translateX(3px) rotate(2deg); }
-  100% { transform: translateX(-3px) rotate(-2deg); }
+  0%,100% { transform: translateX(0) rotate(0); }
+  25% { transform: translateX(3px) rotate(2deg); }
+  75% { transform: translateX(-3px) rotate(-2deg); }
 }
 @keyframes fibo-fx-back-pulse {
   50% { background-color: rgba(127,127,127,0.25); }
@@ -2847,44 +2873,50 @@ const di = `
   }
 }
 `.trim();
-let oo = !1;
-function mi() {
-  if (oo) return;
-  oo = !0;
-  const t = C.getInstance();
-  t.ensureDefaults(), t.injectExtra(di, "fibo-interaction-fx");
+let to = !1;
+function vi() {
+  if (to) return;
+  to = !0;
+  const t = k.getInstance();
+  t.ensureDefaults(), t.injectExtra(mi, "fibo-interaction-fx");
 }
-function P(t) {
+function M(t, o, i, e = 0) {
+  const r = (Array.isArray(t) ? t : [t]).flatMap((s) => String(s).split(",")).map((s) => s.trim()).filter(Boolean);
+  r.length === 0 && r.push("all");
+  const f = `${o}ms`, n = e > 0 ? ` ${e}ms` : "";
+  return r.map((s) => `${s} ${f} ${i}${n}`).join(", ");
+}
+function D(t) {
   const o = { ...t };
   let i = !1;
   const e = o.background;
-  typeof e == "string" && e.trim() && o.backgroundColor == null && wi(e) && (o.backgroundColor = e, delete o.background, i = !0);
+  typeof e == "string" && e.trim() && o.backgroundColor == null && yi(e) && (o.backgroundColor = e, delete o.background, i = !0);
   const r = o.border;
   if (typeof r == "string" && r.trim()) {
-    const f = yi(r);
+    const f = ki(r);
     f && (o.borderWidth == null && f.width != null && (o.borderWidth = f.width), o.borderStyle == null && f.style != null && (o.borderStyle = f.style), o.borderColor == null && f.color != null && (o.borderColor = f.color), delete o.border, i = !0);
   }
   return i ? o : t;
 }
-const vi = "translate3d(0, 0, 0)";
-function io(t) {
-  return t.transform != null && String(t.transform).trim() !== "" ? t : { ...t, transform: vi };
+const wi = "translate3d(0, 0, 0)";
+function eo(t) {
+  return t.transform != null && String(t.transform).trim() !== "" ? t : { ...t, transform: wi };
 }
-function to(t, o) {
+function fo(t, o) {
   const i = typeof o == "number" ? `${o}px` : o;
   return t === "x" ? `translate3d(${i}, 0, 0)` : `translate3d(0, ${i}, 0)`;
 }
-function wi(t) {
+function yi(t) {
   const o = t.trim().toLowerCase();
   return !(!o || o.includes("gradient(") || o.includes("url(") || o.includes("image(") || o.includes("element(") || o.startsWith("repeat") || o.includes(" / "));
 }
-function yi(t) {
+function ki(t) {
   const o = t.trim();
   if (!o) return null;
   const i = o.match(/^(\S+)\s+(\S+)\s+(.+)$/);
   return i ? { width: i[1], style: i[2], color: i[3] } : null;
 }
-const ki = {
+const _i = {
   "background-color": ["background-color"],
   "border-color": ["border-color"],
   color: ["color"],
@@ -2911,18 +2943,17 @@ class v {
    * Stamps CSS classes; sheet is fiboui-owned (not a Hover.css vendor).
    */
   effect(o) {
-    const i = xi(o);
-    return mi(), this.parentBuilder.addClassName("fibo-fx"), this.parentBuilder.addClassName(gi(i)), this.parentBuilder.addClassName(
-      pi(this.pseudoState, this.isGroup)
+    const i = pi(o);
+    return vi(), this.parentBuilder.addClassName("fibo-fx"), this.parentBuilder.addClassName(di(i)), this.parentBuilder.addClassName(
+      gi(this.pseudoState, this.isGroup)
     ), this.parentBuilder.prepareSmoothInteraction([
-      "transform",
       "opacity",
       "box-shadow",
       "background-color",
       "border-color",
       "color",
       "border-radius"
-    ]), this;
+    ]), this.parentBuilder.ensureEffectTransition(["transform"]), this;
   }
   bg(o) {
     return this.set("background-color", o);
@@ -2946,10 +2977,10 @@ class v {
     return this.transforms.set("scale", `scale(${o})`), this.flushTransform();
   }
   translateX(o) {
-    return this.transforms.set("translateX", to("x", o)), this.flushTransform();
+    return this.transforms.set("translateX", fo("x", o)), this.flushTransform();
   }
   translateY(o) {
-    return this.transforms.set("translateY", to("y", o)), this.flushTransform();
+    return this.transforms.set("translateY", fo("y", o)), this.flushTransform();
   }
   rotate(o) {
     return this.transforms.set("rotate", `rotate(${o}deg)`), this.flushTransform();
@@ -2963,14 +2994,17 @@ class v {
   transition(o, i, e, r) {
     if (typeof o == "string" && i === void 0)
       return this.set("transition", o);
-    const f = Array.isArray(o) ? o.join(", ") : o, n = `${i || this.transitionDuration}ms`, s = S(e || this.transitionEasing), c = r ? `${r}ms` : "0ms";
-    return this.set("transition", `${f} ${n} ${s} ${c}`);
+    const f = Array.isArray(o) ? o : [o], n = $(e || this.transitionEasing);
+    return this.set(
+      "transition",
+      M(f, i || this.transitionDuration, n, r || 0)
+    );
   }
   duration(o) {
     return this.transitionDuration = o, this.applyTransition(), this;
   }
   easing(o) {
-    return this.transitionEasing = S(o), this.applyTransition(), this;
+    return this.transitionEasing = $(o), this.applyTransition(), this;
   }
   ease(o) {
     return this.easing(o);
@@ -2982,14 +3016,21 @@ class v {
     return this.transitionProperties = o, this.applyTransition(), this;
   }
   applyTransition() {
-    const o = this.transitionProperties.join(", "), i = `${this.transitionDuration}ms`, e = this.transitionEasing, r = this.transitionDelay > 0 ? `${this.transitionDelay}ms` : "0ms";
-    this.set("transition", `${o} ${i} ${e} ${r}`);
+    this.set(
+      "transition",
+      M(
+        this.transitionProperties,
+        this.transitionDuration,
+        this.transitionEasing,
+        this.transitionDelay
+      )
+    );
   }
   flushTransform() {
     return this.set("transform", [...this.transforms.values()].join(" "));
   }
   set(o, i) {
-    const e = ki[o];
+    const e = _i[o];
     e && this.parentBuilder.prepareSmoothInteraction(e);
     const r = u.registerPseudo(this.pseudoState, o, i, this.isGroup);
     return this.parentBuilder.addClassName(r), this;
@@ -2998,61 +3039,33 @@ class v {
     return this.parentBuilder;
   }
 }
-function Gi(t, o) {
-  if (typeof document > "u") return;
-  const i = typeof t == "string" ? t : null, e = (i == null ? void 0 : i.replace(/^#/, "")) ?? null;
-  o != null && o.hash && e && typeof window < "u" && (window.location.hash = e);
-  const r = typeof t == "string" ? document.getElementById(t.replace(/^#/, "")) ?? document.querySelector(t.startsWith("#") ? t : `#${t}`) ?? document.querySelector(t) : t;
-  r && r.scrollIntoView({
-    behavior: (o == null ? void 0 : o.behavior) ?? "smooth",
-    block: (o == null ? void 0 : o.block) ?? "start"
-  });
-}
-function Ki(t) {
-  const o = typeof document < "u" ? document : void 0, i = o == null ? void 0 : o.startViewTransition;
-  if (typeof i == "function") {
-    i.call(o, t);
-    return;
-  }
-  t();
-}
-function _i() {
-  return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("animation-timeline", "view()");
-}
-function zi() {
-  return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("animation-timeline", "scroll()");
-}
-function Si({
+function zi({
   preset: t = "fadeUp",
   once: o = !0,
   rootMargin: i = "0px 0px -8% 0px",
   threshold: e = 0.12,
   forceMotion: r = !1,
-  preferTimeline: f = !1,
+  style: f,
   children: n
 }) {
-  const s = _(null);
-  M(() => {
+  const s = z(null);
+  L(() => {
     w();
-    const h = s.current;
-    if (!h) return;
-    if (f && _i()) {
-      h.classList.add("fibo-inview");
-      return;
-    }
+    const x = s.current;
+    if (!x) return;
     if (typeof IntersectionObserver > "u") {
-      h.classList.add("fibo-inview");
+      x.classList.add("fibo-inview");
       return;
     }
     const b = new IntersectionObserver(
       (l) => {
-        for (const x of l)
-          x.isIntersecting ? (x.target.classList.add("fibo-inview"), o && b.unobserve(x.target)) : o || x.target.classList.remove("fibo-inview");
+        for (const h of l)
+          h.isIntersecting ? (h.target.classList.add("fibo-inview"), o && b.unobserve(h.target)) : o || h.target.classList.remove("fibo-inview");
       },
       { rootMargin: i, threshold: e }
     );
-    return b.observe(h), () => b.disconnect();
-  }, [o, i, e, f]);
+    return b.observe(x), () => b.disconnect();
+  }, [o, i, e]);
   const c = [
     "fibo-reveal",
     `fibo-reveal-${t}`,
@@ -3060,12 +3073,40 @@ function Si({
     "min-w-0",
     r ? "fibo-motion-force" : ""
   ].filter(Boolean).join(" ");
-  return g.createElement("div", { ref: s, className: c, "data-fibo-reveal": t }, n);
+  return g.createElement(
+    "div",
+    { ref: s, className: c, style: f, "data-fibo-reveal": t },
+    n
+  );
+}
+function Ki(t, o) {
+  if (typeof document > "u") return;
+  const i = typeof t == "string" ? t : null, e = (i == null ? void 0 : i.replace(/^#/, "")) ?? null;
+  o != null && o.hash && e && typeof window < "u" && (window.location.hash = e);
+  const r = typeof t == "string" ? document.getElementById(t.replace(/^#/, "")) ?? document.querySelector(t.startsWith("#") ? t : `#${t}`) ?? document.querySelector(t) : t;
+  r && r.scrollIntoView({
+    behavior: (o == null ? void 0 : o.behavior) ?? "smooth",
+    block: (o == null ? void 0 : o.block) ?? "start"
+  });
+}
+function Zi(t) {
+  const o = typeof document < "u" ? document : void 0, i = o == null ? void 0 : o.startViewTransition;
+  if (typeof i == "function") {
+    i.call(o, t);
+    return;
+  }
+  t();
+}
+function qi() {
+  return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("animation-timeline", "view()");
+}
+function Si() {
+  return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("animation-timeline", "scroll()");
 }
-function $i({ children: t }) {
-  const o = _(null);
-  return M(() => {
-    if (w(), zi()) return;
+function Ci({ children: t }) {
+  const o = z(null);
+  return L(() => {
+    if (w(), Si()) return;
     const i = () => {
       var f, n;
       return ((f = o.current) == null ? void 0 : f.querySelector(".fibo-scroll-progress")) ?? ((n = o.current) == null ? void 0 : n.firstElementChild);
@@ -3084,8 +3125,8 @@ function $i({ children: t }) {
     t
   );
 }
-const mo = 64, Ci = `${mo}px`;
-class Zi {
+const wo = 64, $i = `${wo}px`;
+class Qi {
   constructor() {
     /** @internal Extra DOM props forwarded to the host element. */
     a(this, "_props", {});
@@ -3323,6 +3364,9 @@ class Zi {
       "on-tertiary-container",
       "error",
       "on-error",
+      "success",
+      "warning",
+      "info",
       "background",
       "on-background",
       "surface",
@@ -3396,15 +3440,15 @@ class Zi {
     if (Array.isArray(o)) {
       const [f, n, s, c] = o;
       if (typeof f == "string" && e(f)) {
-        const l = r("all", "md", f, n), x = u.register("box-shadow", l);
-        return this._classNames.push(x), this;
+        const l = r("all", "md", f, n), h = u.register("box-shadow", l);
+        return this._classNames.push(h), this;
       }
-      const h = f;
+      const x = f;
       if (typeof n == "string" && e(n)) {
-        const l = r(h, "md", n, s), x = u.register("box-shadow", l);
-        return this._classNames.push(x), this;
+        const l = r(x, "md", n, s), h = u.register("box-shadow", l);
+        return this._classNames.push(h), this;
       } else {
-        const x = r(h, n, s, c), p = u.register("box-shadow", x);
+        const h = r(x, n, s, c), p = u.register("box-shadow", h);
         return this._classNames.push(p), this;
       }
     }
@@ -3424,7 +3468,7 @@ class Zi {
    * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
    */
   media(o, i) {
-    return this.registerMediaStyles(ii(o), i), this;
+    return this.registerMediaStyles(ti(o), i), this;
   }
   registerMediaStyles(o, i) {
     if (!i) return;
@@ -3637,16 +3681,16 @@ class Zi {
     return this._signals.add(o), this;
   }
   translateX(o) {
-    return o instanceof I ? this._animatedProps.set("translateX", o) : this._transforms.push(`translateX(${o}px)`), this;
+    return o instanceof X ? this._animatedProps.set("translateX", o) : this._transforms.push(`translateX(${o}px)`), this;
   }
   translateY(o) {
-    return o instanceof I ? this._animatedProps.set("translateY", o) : this._transforms.push(`translateY(${o}px)`), this;
+    return o instanceof X ? this._animatedProps.set("translateY", o) : this._transforms.push(`translateY(${o}px)`), this;
   }
   scale(o) {
-    return o instanceof I ? this._animatedProps.set("scale", o) : this._transforms.push(`scale(${o})`), this;
+    return o instanceof X ? this._animatedProps.set("scale", o) : this._transforms.push(`scale(${o})`), this;
   }
   rotate(o) {
-    return o instanceof I ? this._animatedProps.set("rotate", o) : this._transforms.push(`rotate(${o}deg)`), this;
+    return o instanceof X ? this._animatedProps.set("rotate", o) : this._transforms.push(`rotate(${o}deg)`), this;
   }
   gesture(o) {
     return this._gesture = o, this;
@@ -3675,22 +3719,27 @@ class Zi {
   transition(o, i, e, r) {
     if (this._autoEffectTransition = !1, this._effectTransitionProps = [], typeof o == "string" && i === void 0)
       return this.replaceTransitionClass(u.register("transition", o)), this;
-    const f = Array.isArray(o) ? o.join(", ") : o, n = `${i || this._transitionDuration}ms`, s = S(e || this._transitionEasing), c = r ? `${r}ms` : "0ms";
-    return this.replaceTransitionClass(u.register("transition", `${f} ${n} ${s} ${c}`)), this;
+    const f = Array.isArray(o) ? o : [o], n = $(e || this._transitionEasing);
+    return this.replaceTransitionClass(
+      u.register(
+        "transition",
+        M(f, i || this._transitionDuration, n, r || 0)
+      )
+    ), this;
   }
   /**
    * Set transition duration in milliseconds
    * Example: .duration(200) → 200ms
    */
   duration(o) {
-    return this._transitionDuration = o, this._motionClass ? (this._style["--fibo-dur"] = `${o}ms`, this) : (this._applyTransition(), this);
+    return this._transitionDuration = o, (this._motionClass || this._reveal || this._usesCssMotion) && (this._style["--fibo-dur"] = `${o}ms`, this._motionClass) ? this : (this._applyTransition(), this);
   }
   /**
    * Set transition easing function
    * Example: .easing('ease-in-out')
    */
   easing(o) {
-    return this._transitionEasing = S(o), this._motionClass ? (this._style["--fibo-ease"] = this._transitionEasing, this) : (this._applyTransition(), this);
+    return this._transitionEasing = $(o), (this._motionClass || this._reveal || this._usesCssMotion) && (this._style["--fibo-ease"] = this._transitionEasing, this._motionClass) ? this : (this._applyTransition(), this);
   }
   /** Alias of `.easing()`. `'spring'` becomes CSS `linear()`. */
   ease(o) {
@@ -3701,7 +3750,7 @@ class Zi {
    * Example: .delay(100) → 100ms delay
    */
   delay(o) {
-    return this._transitionDelay = o, this._motionClass ? (this._style["--fibo-delay"] = `${o}ms`, this) : (this._applyTransition(), this);
+    return this._transitionDelay = o, (this._motionClass || this._reveal || this._usesCssMotion) && (this._style["--fibo-delay"] = `${o}ms`, this._motionClass) ? this : (this._applyTransition(), this);
   }
   /**
    * Set which properties to transition
@@ -3714,16 +3763,24 @@ class Zi {
    * Apply the built transition to the element
    */
   _applyTransition() {
-    this._autoEffectTransition = !1, this._effectTransitionProps = [];
-    const o = this._transitionProperties.join(", "), i = `${this._transitionDuration}ms`, e = this._transitionEasing, r = this._transitionDelay > 0 ? `${this._transitionDelay}ms` : "0ms";
-    this.replaceTransitionClass(u.register("transition", `${o} ${i} ${e} ${r}`));
+    this._autoEffectTransition = !1, this._effectTransitionProps = [], this.replaceTransitionClass(
+      u.register(
+        "transition",
+        M(
+          this._transitionProperties,
+          this._transitionDuration,
+          this._transitionEasing,
+          this._transitionDelay
+        )
+      )
+    );
   }
   replaceTransitionClass(o) {
     this._transitionClass && (this._classNames = this._classNames.filter((i) => i !== this._transitionClass)), this._transitionClass = o, this._classNames.push(o);
   }
   animate(o, i) {
     w(), this._usesCssMotion = !0, this._motionClass && (this._classNames = this._classNames.filter((b) => b !== this._motionClass));
-    const e = Zo(o), r = (e ? o.duration : i == null ? void 0 : i.duration) ?? this._transitionDuration, f = (e ? o.delay : i == null ? void 0 : i.delay) ?? this._transitionDelay;
+    const e = qo(o), r = (e ? o.duration : i == null ? void 0 : i.duration) ?? this._transitionDuration, f = (e ? o.delay : i == null ? void 0 : i.delay) ?? this._transitionDelay;
     let n = e ? o.ease : i == null ? void 0 : i.ease;
     const s = {
       stiffness: (e ? o.stiffness : i == null ? void 0 : i.stiffness) ?? void 0,
@@ -3731,20 +3788,20 @@ class Zi {
       mass: (e ? o.mass : i == null ? void 0 : i.mass) ?? void 0
     };
     if (e) {
-      const b = Z(o.from), l = Z(o.to), x = u.registerKeyframes(qo(`${b}=>${l}`), b, l);
-      this._motionClass = `fibo-anim ${x}`, this._props["data-fibo-anim"] = "custom";
+      const b = Q(o.from), l = Q(o.to), h = u.registerKeyframes(Qo(`${b}=>${l}`), b, l);
+      this._motionClass = `fibo-anim ${h}`, this._props["data-fibo-anim"] = "custom";
     } else {
-      const b = Qo(o);
+      const b = Jo(o);
       this._motionClass = `fibo-anim fibo-anim-${b}`, this._props["data-fibo-anim"] = b, (i == null ? void 0 : i.from) !== void 0 && (this._style["--fibo-from"] = typeof i.from == "number" ? `${i.from}px` : i.from), !n && b === "pop" && (n = "spring");
     }
-    const c = S(n ?? "ease", s);
+    const c = $(n ?? "ease", s);
     this._classNames.push(this._motionClass);
-    const h = this._style;
-    return h["--fibo-dur"] = `${r}ms`, h["--fibo-ease"] = c, h["--fibo-delay"] = `${f}ms`, this._reducedMotion === "never" && !this._classNames.includes("fibo-motion-force") && this._classNames.push("fibo-motion-force"), this;
+    const x = this._style;
+    return x["--fibo-dur"] = `${r}ms`, x["--fibo-ease"] = c, x["--fibo-delay"] = `${f}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(o) {
-    const i = uo(o);
+    const i = ho(o);
     return this._transitionEasing = i, this._motionClass ? (this._style["--fibo-ease"] = i, this) : (this._applyTransition(), this);
   }
   reducedMotion(o = "reduce") {
@@ -3832,7 +3889,7 @@ class Zi {
     this._classNames.push(u.register("position", "sticky"));
     const i = o === !0 ? "0px" : typeof o == "number" ? `${o}px` : o;
     this._classNames.push(u.register("top", i));
-    const e = o === !0 || o === 0 ? Ci : typeof o == "number" ? `${Math.max(o, mo)}px` : o;
+    const e = o === !0 || o === 0 ? $i : typeof o == "number" ? `${Math.max(o, wo)}px` : o;
     return this.publishStickyOffset(e), this;
   }
   /**
@@ -3871,11 +3928,11 @@ class Zi {
   }
   /** @internal Convert inline background/border shorthands → longhands. */
   promoteSurfaceLonghands() {
-    this._style = P(this._style), this._cssStyles = P(this._cssStyles);
+    this._style = D(this._style), this._cssStyles = D(this._cssStyles);
   }
   /** @internal Stamp translate3d(0,0,0) when no resting transform exists. */
   ensureRestTransform() {
-    const o = io(this._style);
+    const o = eo(this._style);
     o !== this._style && (this._style = o);
   }
   /**
@@ -3885,7 +3942,7 @@ class Zi {
    * @internal Used by PseudoStateBuilder.effect() and hover/press shortcuts.
    */
   ensureEffectTransition(o) {
-    if (this._motionClass || this._transitionClass && !this._autoEffectTransition) return;
+    if (this._transitionClass && !this._autoEffectTransition) return;
     const i = new Set(this._effectTransitionProps);
     for (const f of o) i.add(f);
     i.add("transform"), i.add("opacity"), this._effectTransitionProps = [...i], this._autoEffectTransition = !0;
@@ -3893,7 +3950,7 @@ class Zi {
     this.replaceTransitionClass(
       u.register(
         "transition",
-        `${this._effectTransitionProps.join(", ")} ${r}ms ${e}`
+        M(this._effectTransitionProps, r, e)
       )
     );
   }
@@ -3903,7 +3960,7 @@ class Zi {
    * SSR-safe: class + inline vars on first paint (no useEffect).
    */
   theme(o) {
-    const i = Co(o);
+    const i = To(o);
     return this._theme = i, this.addClassName(No(i)), this;
   }
   /** Prefer dark/light system chrome for native controls under this subtree. */
@@ -3916,10 +3973,12 @@ class Zi {
     return o ? (o(i), this) : i;
   }
   focus(o) {
+    this.ensureInteractiveTransition();
     const i = new v("focus", this);
     return o ? (o(i), this) : i;
   }
   active(o) {
+    this.ensureInteractiveTransition();
     const i = new v("active", this);
     return o ? (o(i), this) : i;
   }
@@ -3948,7 +4007,7 @@ class Zi {
     return o ? (o(i), this) : i;
   }
   groupFocus(o) {
-    const i = new v("focus", this, !0);
+    const i = new v("focus-within", this, !0);
     return o ? (o(i), this) : i;
   }
   groupActive(o) {
@@ -3963,16 +4022,16 @@ class Zi {
     return this._classNames.push("group"), this;
   }
   children(o) {
-    return typeof o == "function" ? (this._childFunction = o, this._children = []) : (this._children = U(o), this._childFunction = void 0), this;
+    return typeof o == "function" ? (this._childFunction = o, this._children = []) : (this._children = K(o), this._childFunction = void 0), this;
   }
   getClassName() {
     let o;
-    return Object.keys(this._cssStyles).length > 0 && (o = bi(this._cssStyles) || void 0), ti(this._classNames, o);
+    return Object.keys(this._cssStyles).length > 0 && (o = ui(this._cssStyles) || void 0), ei(this._classNames, o);
   }
   getStyle() {
     let o = { ...this._style, ...this._cssStyles };
-    if (this._smoothSurface && (o = P(o), this._smoothNeedsRestTransform && (o = io(o))), this._theme && (o = {
-      ...To(this._theme),
+    if (this._smoothSurface && (o = D(o), this._smoothNeedsRestTransform && (o = eo(o))), this._theme && (o = {
+      ...Eo(this._theme),
       ...o,
       backgroundColor: o.backgroundColor ?? this._theme.colors.background,
       color: o.color ?? this._theme.colors.onBackground,
@@ -3982,18 +4041,18 @@ class Zi {
       o.transform = i ? `${i} ${this._transforms.join(" ")}` : this._transforms.join(" ");
     }
     if (this._animationConfig && this._animatedProps.size === 0) {
-      const { duration: i = 300, curve: e = "easeOut", stiffness: r, damping: f } = this._animationConfig, n = S(e, { stiffness: r, damping: f });
+      const { duration: i = 300, curve: e = "easeOut", stiffness: r, damping: f } = this._animationConfig, n = $(e, { stiffness: r, damping: f });
       o.transition = `all ${i}ms ${n}`;
     }
     return o;
   }
   processChildren() {
-    const o = this._childFunction ? U(this._childFunction) : this._children;
+    const o = this._childFunction ? K(this._childFunction) : this._children;
     return this._staggerMs == null ? o : o.map(
       (i, e) => g.createElement(
         "span",
         {
-          key: g.isValidElement(i) && W(i.key) ? i.key : `fibo-stagger-${e}`,
+          key: g.isValidElement(i) && U(i.key) ? i.key : `fibo-stagger-${e}`,
           className: "fibo-stagger-item",
           style: { "--fibo-i": String(e) }
         },
@@ -4005,7 +4064,7 @@ class Zi {
     return this._childFunction;
   }
 }
-const Ni = /* @__PURE__ */ new Set([
+const Ti = /* @__PURE__ */ new Set([
   "$$typeof",
   "type",
   "props",
@@ -4018,51 +4077,56 @@ const Ni = /* @__PURE__ */ new Set([
   "_debugTask",
   "_debugInfo"
 ]);
-function Ti(t) {
+function Ni(t) {
   var i;
   const o = (i = t._props) == null ? void 0 : i.key;
   if (!(o == null || o === ""))
     return o;
 }
 function Ei(t) {
-  const o = t._isObserver, i = t._signals, e = t._observers, r = t._state, f = t._providers, n = Ti(t), s = () => {
-    var z;
-    let x = t.build();
+  const o = t._isObserver, i = t._signals, e = t._observers, r = t._state, f = t._providers, n = Ni(t), s = () => {
+    let h = t.build();
     const p = t._animatedProps, m = t._animationConfig;
-    p && p.size > 0 && (x = g.createElement(li, {
+    p && p.size > 0 && (h = g.createElement(hi, {
       key: n,
       animatedProps: p,
       animationConfig: m,
-      children: x
+      children: h
     }));
     const d = t._reveal;
-    d && (x = g.createElement(Si, {
-      key: n,
-      preset: d.preset,
-      once: d.once,
-      rootMargin: d.rootMargin,
-      threshold: d.threshold,
-      forceMotion: t._reducedMotion === "never",
-      preferTimeline: (z = t._classNames) == null ? void 0 : z.includes("fibo-view-timeline"),
-      children: x
-    })), t._scrollProgress && (x = g.createElement($i, { key: n, children: x })), t._usesCssMotion && (x = g.createElement(
+    if (d) {
+      const S = t._style || {}, I = {};
+      for (const C of ["--fibo-dur", "--fibo-ease", "--fibo-delay", "--fibo-stagger", "--fibo-from"])
+        S[C] != null && (I[C] = S[C]);
+      h = g.createElement(zi, {
+        key: n,
+        preset: d.preset,
+        once: d.once,
+        rootMargin: d.rootMargin,
+        threshold: d.threshold,
+        forceMotion: t._reducedMotion === "never",
+        style: Object.keys(I).length > 0 ? I : void 0,
+        children: h
+      });
+    }
+    t._scrollProgress && (h = g.createElement(Ci, { key: n, children: h })), t._usesCssMotion && (h = g.createElement(
       g.Fragment,
       { key: n },
-      g.createElement(Jo),
-      x
+      g.createElement(oi),
+      h
     ));
     const y = t._gesture;
-    return y && (x = y.wrap(x)), x;
-  }, c = typeof t.hasStateManagement == "function" ? t.hasStateManagement() : !!(o || i && i.size || e && e.size || r && r.size || f && f.size), h = o ? g.createElement(Lo, {
+    return y && (h = y.wrap(h)), h;
+  }, c = typeof t.hasStateManagement == "function" ? t.hasStateManagement() : !!(o || i && i.size || e && e.size || r && r.size || f && f.size), x = o ? g.createElement(Oo, {
     key: n,
     children: s
-  }) : null, b = () => h ?? s();
+  }) : null, b = () => x ?? s();
   let l = b();
   return c && i && i.size > 0 ? l = g.createElement(jo, {
     key: n,
     signals: i,
     children: b
-  }) : c && e && e.size > 0 && (l = g.createElement(Ao, {
+  }) : c && e && e.size > 0 && (l = g.createElement(Do, {
     key: n,
     observables: e,
     children: b
@@ -4070,13 +4134,13 @@ function Ei(t) {
     key: n,
     stateMap: r,
     children: l
-  })), c && f && f.size > 0 && (l = g.createElement(Do, {
+  })), c && f && f.size > 0 && (l = g.createElement(Vo, {
     key: n,
     providers: f,
     children: l
   })), l;
 }
-function vo(t, o, i) {
+function yo(t, o, i) {
   const e = function() {
     return o();
   };
@@ -4093,12 +4157,12 @@ function vo(t, o, i) {
     writable: !0
   }), t.ref = r.ref ?? null, t.__fiboElementProps = r.props ?? {}, r._owner !== void 0 && (t._owner = r._owner), t._store = { validated: 1 };
 }
-function qi(t) {
+function Ji(t) {
   return (...o) => {
     const i = new t(...o), e = t.name.replace(/Builder$/, "") || "Fibo", r = () => Ei(i);
-    return vo(i, r, e), new Proxy(i, {
+    return yo(i, r, e), new Proxy(i, {
       get(f, n, s) {
-        var c, h;
+        var c, x;
         if (n === "build")
           return r;
         if (n === "key") {
@@ -4106,19 +4170,19 @@ function qi(t) {
           if (b != null && b !== "")
             return String(b);
           if (!f.__fiboKeyFn) {
-            const l = (x) => (f.key(x), s);
+            const l = (h) => (f.key(h), s);
             f.__fiboKeyFn = l;
           }
           return f.__fiboKeyFn;
         }
         if (n === "props") {
-          const b = (h = f._props) == null ? void 0 : h.key, l = {
+          const b = (x = f._props) == null ? void 0 : x.key, l = {
             ...f.__fiboElementProps ?? {},
             ...b != null && b !== "" ? { key: String(b) } : {}
-          }, x = Object.getPrototypeOf(f).props;
-          return typeof x == "function" ? Object.assign((m) => (x.call(f, m), s), l) : l;
+          }, h = Object.getPrototypeOf(f).props;
+          return typeof h == "function" ? Object.assign((m) => (h.call(f, m), s), l) : l;
         }
-        return Ni.has(n) || Reflect.has(f, n) ? Reflect.get(f, n, s) : (b) => {
+        return Ti.has(n) || Reflect.has(f, n) ? Reflect.get(f, n, s) : (b) => {
           const l = 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(l), m = typeof b == "number" && !p ? `${b}px` : String(b), d = u.register(l, m);
           return f.className(d), s;
         };
@@ -4144,7 +4208,7 @@ class Fi {
     a(this, "_loading");
     a(this, "_error");
     a(this, "_builder");
-    this._signal = o, vo(this, () => this.build(), "ValueBuilder");
+    this._signal = o, yo(this, () => this.build(), "ValueBuilder");
   }
   loading(o) {
     return this._loading = typeof o == "function" ? o : () => o, this;
@@ -4167,59 +4231,60 @@ class Fi {
     });
   }
 }
-function Qi(t) {
+function ot(t) {
   return new Fi(t);
 }
 export {
   Hi as A,
-  qi as B,
-  Fo as C,
-  Zi as D,
-  Bo as E,
-  di as F,
-  Ro as G,
-  w as H,
-  go as I,
-  Qo as J,
-  Po as K,
-  Vo as L,
-  K as M,
+  Ui as B,
+  Xo as C,
+  Ji as D,
+  Qi as E,
+  mi as F,
+  Lo as G,
+  Io as H,
+  vo as I,
+  w as J,
+  Jo as K,
+  Po as L,
+  q as M,
   Wo as N,
-  Xo as O,
-  Do as P,
+  Mo as O,
+  Vo as P,
   Ho as Q,
-  ji as R,
-  I as S,
-  U as T,
-  q as U,
-  Qi as V,
-  A as W,
-  ho as X,
-  ii as Y,
-  Ai as a,
-  no as b,
+  Di as R,
+  X as S,
+  Uo as T,
+  K as U,
+  ot as V,
+  J as W,
+  j as X,
+  po as Y,
+  ti as Z,
+  Pi as a,
+  ao as b,
   Oi as c,
-  Lo as d,
+  Oo as d,
   Vi as e,
-  Si as f,
-  so as g,
-  $i as h,
-  Gi as i,
-  Ki as j,
-  _i as k,
-  zi as l,
-  uo as m,
-  S as n,
-  Pi as o,
-  xi as p,
-  gi as q,
-  Eo as r,
+  zi as f,
+  co as g,
+  Ci as h,
+  Ki as i,
+  Zi as j,
+  qi as k,
+  Si as l,
+  ho as m,
+  $ as n,
+  Ai as o,
+  pi as p,
+  di as q,
+  Ro as r,
   Li as s,
-  hi as t,
-  Di as u,
-  mi as v,
-  Jo as w,
-  Ui as x,
+  xi as t,
+  ji as u,
+  vi as v,
+  oi as w,
+  Gi as x,
   Wi as y,
-  lo as z
+  xo as z
 };