fiboui 2.4.0 → 2.4.2

package/dist/{builder-FPfXLYM6.js → builder-CCVmfPD1.js}

@@ -1,26 +1,26 @@
 "use client";
-var ko = Object.defineProperty;
-var yo = (t, o, i) => o in t ? ko(t, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[o] = i;
-var a = (t, o, i) => yo(t, typeof o != "symbol" ? o + "" : o, i);
-import g, { useRef as _, createContext as F, useContext as A, useCallback as N, useSyncExternalStore as j, useEffect as M, useState as oo, cloneElement as _o } from "react";
-import { jsx as S, Fragment as V } from "react/jsx-runtime";
-import { r as zo, f as $o, b as So } from "./themeData-CmTJt3dU.js";
-class io {
+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 _, createContext as M, useContext as D, useCallback as N, useSyncExternalStore as V, useEffect as Y, useState as fo, cloneElement as $o } from "react";
+import { jsx as C, Fragment as W } from "react/jsx-runtime";
+import { r as To, f as No, b as Eo } from "./themeData-CmTJt3dU.js";
+class ro {
   constructor() {
     a(this, "activeEffect", null);
   }
 }
-const to = new io(), X = [to];
-function eo() {
-  return new io();
+const no = new ro(), X = [no];
+function so() {
+  return new ro();
 }
-function fo() {
-  return X[X.length - 1] ?? to;
+function ao() {
+  return X[X.length - 1] ?? no;
 }
-function Y() {
-  return fo().activeEffect;
+function B() {
+  return ao().activeEffect;
 }
-function Co(t, o) {
+function Ro(t, o) {
   X.push(t);
   try {
     return o();
@@ -28,22 +28,22 @@ function Co(t, o) {
     X.pop();
   }
 }
-function T(t) {
-  const o = fo(), i = o.activeEffect;
+function E(t) {
+  const o = ao(), i = o.activeEffect;
   return o.activeEffect = t, i;
 }
-class Eo {
+class Io {
   constructor(o) {
     a(this, "dependencies", /* @__PURE__ */ new Set());
     a(this, "_onDispose");
     this.fn = o, this.run();
   }
   run() {
-    const o = T(this);
+    const o = E(this);
     try {
       this.cleanup(), this.fn();
     } finally {
-      T(o);
+      E(o);
     }
   }
   track(o) {
@@ -60,17 +60,17 @@ class Eo {
     this.cleanup(), (o = this._onDispose) == null || o.call(this);
   }
 }
-class No {
+class Fo {
   constructor(o) {
     a(this, "dependencies", /* @__PURE__ */ new Set());
     this._onInvalidate = o;
   }
   execute(o) {
-    const i = T(this);
+    const i = E(this);
     try {
       return this.cleanup(), o();
     } finally {
-      T(i);
+      E(i);
     }
   }
   track(o) {
@@ -86,14 +86,14 @@ class No {
     this.cleanup();
   }
 }
-class R {
+class I {
   constructor(o) {
     a(this, "listeners", /* @__PURE__ */ new Set());
     a(this, "effects", /* @__PURE__ */ new Set());
     this._value = o;
   }
   get value() {
-    const o = Y();
+    const o = B();
     return o && o.track(this), this._value;
   }
   set value(o) {
@@ -113,28 +113,28 @@ class R {
     o.forEach((e) => e.trigger()), i.forEach((e) => e(this._value));
   }
 }
-function Ii(t) {
-  return new R(t);
+function Oi(t) {
+  return new I(t);
 }
-class To {
+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 Eo(() => {
+    this.fn = o, this.internalEffect = new Io(() => {
       this._dirty || (this._dirty = !0, this.notify());
     });
   }
   get value() {
-    const o = Y();
+    const o = B();
     if (o && o.track(this), this._dirty) {
-      const i = T(this.internalEffect);
+      const i = E(this.internalEffect);
       try {
         this.internalEffect.cleanup(), this._value = this.fn(), this._dirty = !1;
       } finally {
-        T(i);
+        E(i);
       }
     }
     return this._value;
@@ -153,17 +153,17 @@ class To {
     o.forEach((e) => e.trigger()), i.forEach((e) => e(this._value));
   }
 }
-function Ri(t) {
-  return new To(t);
+function Ai(t) {
+  return new Xo(t);
 }
-class Io {
+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 = B();
     return o && o.track(this), this._value;
   }
   set(o) {
@@ -182,17 +182,17 @@ class Io {
     Array.from(this.effects).forEach((o) => o.trigger()), Array.from(this.listeners).forEach((o) => o(this._value));
   }
 }
-function Xi(t) {
-  return new Io(t);
+function Pi(t) {
+  return new Mo(t);
 }
-class Ro {
+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 = B();
     return o && o.track(this), this.state;
   }
   setState(o) {
@@ -212,47 +212,47 @@ class Ro {
     Array.from(this.effects).forEach((o) => o.trigger()), Array.from(this.listeners).forEach((o) => o(this.state));
   }
 }
-function Fi(t) {
-  return new Ro(t);
+function ji(t) {
+  return new Yo(t);
 }
-const Xo = eo(), ro = F(Xo);
-function Fo() {
-  return A(ro);
+const Bo = so(), co = M(Bo);
+function Lo() {
+  return D(co);
 }
-function Mi({ children: t, scope: o }) {
-  const i = _(o ?? eo()).current;
-  return /* @__PURE__ */ S(ro.Provider, { value: i, children: t });
+function Di({ children: t, scope: o }) {
+  const i = _(o ?? so()).current;
+  return /* @__PURE__ */ C(co.Provider, { value: i, children: t });
 }
-function Mo({ children: t }) {
+function Oo({ children: t }) {
   const o = _(0), i = _(/* @__PURE__ */ new Set()), e = _(null);
-  e.current || (e.current = new No(() => {
+  e.current || (e.current = new Fo(() => {
     o.current += 1, i.current.forEach((c) => c());
   }));
   const r = N((c) => (i.current.add(c), () => {
     i.current.delete(c);
   }), []), f = N(() => o.current, []);
-  j(r, f, f), M(() => () => {
+  V(r, f, f), Y(() => () => {
     var c;
     (c = e.current) == null || c.dispose();
   }, []);
-  const n = Fo();
+  const n = Lo();
   let s = null;
   try {
-    s = Co(n, () => e.current.execute(t));
+    s = Ro(n, () => e.current.execute(t));
   } catch {
     s = null;
   }
-  return /* @__PURE__ */ S(V, { children: s });
+  return /* @__PURE__ */ C(W, { children: s });
 }
-const Yo = F(/* @__PURE__ */ new Map()), no = F(null);
-function Yi(t) {
-  const o = A(no);
+const Ao = M(/* @__PURE__ */ new Map()), bo = M(null);
+function Vi(t) {
+  const o = D(bo);
   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 Bo({ stateMap: t = /* @__PURE__ */ new Map(), children: o }) {
-  const [i, e] = oo(() => new Map(t)), r = {
+function Po({ stateMap: t = /* @__PURE__ */ new Map(), children: o }) {
+  const [i, e] = fo(() => new Map(t)), r = {
     map: i,
     get: (f) => i.get(f),
     set: (f, n) => {
@@ -264,9 +264,9 @@ function Bo({ stateMap: t = /* @__PURE__ */ new Map(), children: o }) {
       });
     }
   };
-  return /* @__PURE__ */ S(no.Provider, { value: r, children: /* @__PURE__ */ S(Yo.Provider, { value: i, children: o }) });
+  return /* @__PURE__ */ C(bo.Provider, { value: r, children: /* @__PURE__ */ C(Ao.Provider, { value: i, children: o }) });
 }
-function Lo({ observables: t, children: o }) {
+function jo({ observables: t, children: o }) {
   const i = _(0), e = N((f) => {
     const n = Array.from(t).map(
       (s) => s.subscribe(() => {
@@ -275,9 +275,9 @@ function Lo({ observables: t, children: o }) {
     );
     return () => n.forEach((s) => s());
   }, [t]), r = N(() => i.current, []);
-  return j(e, r, r), /* @__PURE__ */ S(V, { children: typeof o == "function" ? o() : o });
+  return V(e, r, r), /* @__PURE__ */ C(W, { children: typeof o == "function" ? o() : o });
 }
-function Oo({ signals: t, children: o }) {
+function Do({ signals: t, children: o }) {
   const i = _(0), e = N((f) => {
     const n = Array.from(t).map(
       (s) => s.subscribe(() => {
@@ -286,67 +286,67 @@ function Oo({ signals: t, children: o }) {
     );
     return () => n.forEach((s) => s());
   }, [t]), r = N(() => i.current, []);
-  return j(e, r, r), /* @__PURE__ */ S(V, { children: typeof o == "function" ? o() : o });
+  return V(e, r, r), /* @__PURE__ */ C(W, { children: typeof o == "function" ? o() : o });
 }
-const so = F(/* @__PURE__ */ new Map());
-function Bi(t) {
-  const o = A(so);
+const uo = M(/* @__PURE__ */ new Map());
+function Wi(t) {
+  const o = D(uo);
   return o == null ? void 0 : o.get(t);
 }
-function Po({ providers: t = /* @__PURE__ */ new Map(), children: o }) {
-  return /* @__PURE__ */ S(so.Provider, { value: t, children: o });
+function Vo({ providers: t = /* @__PURE__ */ new Map(), children: o }) {
+  return /* @__PURE__ */ C(uo.Provider, { value: t, children: o });
 }
-function Ao(t) {
+function Wo(t) {
   return !!t && typeof t == "object" && "build" in t && typeof t.build == "function";
 }
-function jo(t) {
-  return g.isValidElement(t) ? t : Ao(t) ? t.build() : t;
+function Ho(t) {
+  return g.isValidElement(t) ? t : Wo(t) ? t.build() : t;
 }
-function D(t) {
+function H(t) {
   return typeof t == "string" || typeof t == "number";
 }
-function Vo(t, o) {
-  return g.isValidElement(t) && D(t.key) && t.key !== "" ? t.key : `.$fibo-${o}`;
+function Uo(t, o) {
+  return g.isValidElement(t) && H(t.key) && t.key !== "" ? t.key : `.$fibo-${o}`;
 }
-function Do(t, o) {
-  return !g.isValidElement(t) || D(t.key) && t.key !== "" ? t : g.cloneElement(t, { key: Vo(t, o) });
+function Go(t, o) {
+  return !g.isValidElement(t) || H(t.key) && t.key !== "" ? t : g.cloneElement(t, { key: Uo(t, o) });
 }
-function H(t) {
+function G(t) {
   if (t == null)
     return [];
   const o = typeof t == "function" ? t() : t;
-  return (Array.isArray(o) ? o : [o]).map((e, r) => Do(jo(e), r));
+  return (Array.isArray(o) ? o : [o]).map((e, r) => Go(Ho(e), r));
 }
-const U = /* @__PURE__ */ new Map(), Wo = {
+const K = /* @__PURE__ */ new Map(), Ko = {
   easeIn: "ease-in",
   easeOut: "ease-out",
   easeInOut: "ease-in-out",
   linear: "linear",
   ease: "ease"
 };
-function ao(t = {}) {
-  const o = t.stiffness ?? 170, i = t.damping ?? 26, e = t.mass ?? 1, r = `${o}:${i}:${e}`, f = U.get(r);
+function lo(t = {}) {
+  const o = t.stiffness ?? 170, i = t.damping ?? 26, e = t.mass ?? 1, r = `${o}:${i}:${e}`, f = K.get(r);
   if (f) return f;
   const n = 1 / 60, s = 1;
   let c = 0, h = 0;
   const b = [0];
   for (let d = 0; d < 180; d += 1) {
-    const k = -o * (c - s) - i * h;
-    if (h += k / 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 * 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;
   }
   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 k = d / (b.length - 1), z = Math.round(b[d] * 1e4) / 1e4;
-    p.push(d === 0 ? `${z}` : `${z} ${Math.round(k * 1e4) / 100}%`);
+    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 m = `linear(${p.join(", ")})`;
-  return U.set(r, m), m;
+  return K.set(r, m), m;
 }
-function $(t, o) {
-  return t === "spring" ? ao(o) : Wo[t] ?? t;
+function S(t, o) {
+  return t === "spring" ? lo(o) : Ko[t] ?? t;
 }
-const G = [
+const Z = [
   "fadeIn",
   "fadeOut",
   "fade",
@@ -362,35 +362,35 @@ const G = [
   "blur",
   "pop",
   "bounce"
-], Ho = {
+], Zo = {
   fade: "fadeIn",
   scale: "scaleIn",
   blur: "blurIn"
 };
-function Uo(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 K(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 Go(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 Ko(t) {
-  const o = Ho[t] ?? t;
-  if (!G.includes(o))
-    throw new Error(`Unknown motion preset "${t}". Use: ${G.join(", ")}`);
+function Jo(t) {
+  const o = Zo[t] ?? t;
+  if (!Z.includes(o))
+    throw new Error(`Unknown motion preset "${t}". Use: ${Z.join(", ")}`);
   return o;
 }
-const P = `
+const j = `
 .fibo-anim {
   animation-duration: var(--fibo-dur, 300ms);
   animation-timing-function: var(--fibo-ease, ease);
@@ -532,13 +532,13 @@ const P = `
   }
 }
 `.trim();
-function Z(t) {
+function Q(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 y = class y {
+const k = class k {
   constructor() {
     a(this, "sheet", null);
     a(this, "cache", /* @__PURE__ */ new Map());
@@ -547,14 +547,14 @@ const y = class y {
     this.attachSheet(), this.ensureDefaults();
   }
   static getInstance() {
-    return y.instance || (y.instance = new y()), y.instance;
+    return k.instance || (k.instance = new k()), k.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() {
-    y.getInstance().reset();
+    k.getInstance().reset();
   }
   attachSheet() {
     if (typeof document > "u") return;
@@ -572,12 +572,12 @@ const y = class y {
     const r = `@media ${o}|${i}:${e}`;
     if (this.cache.has(r))
       return this.cache.get(r);
-    const f = `fibo-mq-${Z(r)}`, n = `@media ${o} { .${f} { ${i}: ${e} !important; } }`;
+    const f = `fibo-mq-${Q(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(P)));
+    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 +590,7 @@ const y = class y {
   getCss() {
     this.ensureDefaults();
     const o = [...this.extras].sort();
-    return [P, ...o].filter(Boolean).join(`
+    return [j, ...o].filter(Boolean).join(`
 `);
   }
   registerKeyframes(o, i, e) {
@@ -635,83 +635,83 @@ const y = class y {
     const f = `${r ? "group:" : ""}${o}:${i}:${e}`;
     if (this.cache.has(f))
       return this.cache.get(f);
-    const n = `fibo-ps-${Z(f)}`, s = r ? `.group:${o} .${n} { ${i}: ${e} !important; }` : `.${n}:${o} { ${i}: ${e} !important; }`;
+    const n = `fibo-ps-${Q(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(y, "instance");
-let C = y;
-const u = C.getInstance();
+a(k, "instance");
+let $ = k;
+const u = $.getInstance();
 function w() {
-  C.getInstance().ensureDefaults();
+  $.getInstance().ensureDefaults();
 }
-function Li() {
-  return C.getInstance().getCss();
+function Hi() {
+  return $.getInstance().getCss();
 }
-function co() {
-  return C.getInstance().getCss();
+function ho() {
+  return $.getInstance().getCss();
 }
-function Oi() {
-  return `<style id="fibo-dynamic-styles" data-fibo="1">${co().replace(/<\/style/gi, "<\\/style")}</style>`;
+function Ui() {
+  return `<style id="fibo-dynamic-styles" data-fibo="1">${ho().replace(/<\/style/gi, "<\\/style")}</style>`;
 }
-function Pi() {
+function Gi() {
   return w(), g.createElement("style", {
     id: "fibo-dynamic-styles",
     "data-fibo": "1",
     suppressHydrationWarning: !0,
-    dangerouslySetInnerHTML: { __html: co() }
+    dangerouslySetInnerHTML: { __html: ho() }
   });
 }
-function Zo() {
+function oi() {
   return w(), g.createElement("style", {
     id: "fibo-motion-presets",
     "data-fibo-motion": "1",
-    dangerouslySetInnerHTML: { __html: P }
+    dangerouslySetInnerHTML: { __html: j }
   });
 }
-const bo = {
+const xo = {
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280
 };
-function qo(t) {
-  return t in bo;
+function ii(t) {
+  return t in xo;
 }
-function Qo(t) {
-  if (qo(t))
-    return `(min-width: ${bo[t]}px)`;
+function ti(t) {
+  if (ii(t))
+    return `(min-width: ${xo[t]}px)`;
   const o = t.trim();
   return o.startsWith("@media") ? o.replace(/^@media\s+/, "") : o;
 }
-function uo(t) {
+function po(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 = uo(t[o])) && (e && (e += " "), e += i);
+    for (o = 0; o < r; o++) t[o] && (i = po(t[o])) && (e && (e += " "), e += i);
   } else for (i in t) t[i] && (e && (e += " "), e += i);
   return e;
 }
-function Jo() {
-  for (var t, o, i = 0, e = "", r = arguments.length; i < r; i++) (t = arguments[i]) && (o = uo(t)) && (e && (e += " "), e += o);
+function ei() {
+  for (var t, o, i = 0, e = "", r = arguments.length; i < r; i++) (t = arguments[i]) && (o = po(t)) && (e && (e += " "), e += o);
   return e;
 }
-function oi(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, k = 4.0767416621 * p - 3.3077115913 * m + 0.2309699292 * d, z = -1.2684380046 * p + 2.6097574011 * m - 0.3413193965 * d, go = -0.0041960863 * p - 0.7034186147 * m + 1.707614701 * d, B = (I) => I >= 31308e-7 ? 1.055 * I ** (1 / 2.4) - 0.055 : 12.92 * I, mo = Math.max(0, Math.min(1, B(k))), vo = Math.max(0, Math.min(1, B(z))), wo = Math.max(0, Math.min(1, B(go))), L = (I) => {
-    var W;
-    const O = (W = Math.round(I * 255).toString(16)) == null ? void 0 : W.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), 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, yo = -0.0041960863 * p - 0.7034186147 * m + 1.707614701 * d, L = (R) => R >= 31308e-7 ? 1.055 * R ** (1 / 2.4) - 0.055 : 12.92 * R, ko = Math.max(0, Math.min(1, L(y))), _o = Math.max(0, Math.min(1, L(z))), zo = Math.max(0, Math.min(1, L(yo))), O = (R) => {
+    var U;
+    const A = (U = Math.round(R * 255).toString(16)) == null ? void 0 : U.toUpperCase();
+    return A.length === 1 ? `0${A}` : A;
   };
-  return `#${L(mo)}${L(vo)}${L(wo)}`;
+  return `#${O(ko)}${O(_o)}${O(zo)}`;
 }
-function ii(t) {
+function ri(t) {
   const o = {}, i = {}, e = t.split(`
 `);
   for (const r of e) {
@@ -720,7 +720,7 @@ function ii(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 = oi(h);
+      const [, c, h] = n, b = fi(h);
       o[b.toLowerCase()] = `bg-${c}`, i[b.toLowerCase()] = `text-${c}`;
     } else if (s) {
       const [, c, h] = s;
@@ -729,13 +729,13 @@ function ii(t) {
   }
   return { background: o, text: i };
 }
-const ti = (t) => {
+const ni = (t) => {
   if (t !== void 0)
     return typeof t == "number" ? `${t}px` : t.toString();
-}, E = (t, o) => {
-  const i = ti(o);
+}, T = (t, o) => {
+  const i = ni(o);
   return i === void 0 ? "" : `${t}-[${i}]`;
-}, ei = `
+}, 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 +980,7 @@ const ti = (t) => {
   --color-stone-950: oklch(0.147 0.004 49.25);
   --color-black: #000;
   --color-white: #fff;
-`, fi = ii(ei), lo = {
+`, ai = ri(si), go = {
   borderRadius: {
     0: "rounded-none",
     "0px": "rounded-none",
@@ -1077,7 +1077,7 @@ const ti = (t) => {
     fixed: "fixed",
     sticky: "sticky"
   }
-}, ri = (t, o) => ({
+}, ci = (t, o) => ({
   // 背景色
   backgroundColor: (i) => i.backgroundColor ? [t.background[i.backgroundColor.toLowerCase()] || `bg-[${i.backgroundColor}]`] : [],
   // 文字色
@@ -1086,14 +1086,14 @@ const ti = (t) => {
   borderRadius: (i) => {
     if (!i.borderRadius)
       return [];
-    const e = lo.borderRadius[i.borderRadius] || E("rounded", i.borderRadius);
+    const e = go.borderRadius[i.borderRadius] || T("rounded", i.borderRadius);
     return e ? [e] : [];
   },
   // 外边距
   margin: (i) => {
     const e = [];
     if (i.margin !== void 0) {
-      const f = E("m", i.margin);
+      const f = T("m", i.margin);
       return f ? [f] : [];
     }
     return [
@@ -1105,7 +1105,7 @@ const ti = (t) => {
       { prop: i.marginY, dir: "my" }
     ].forEach(({ prop: f, dir: n }) => {
       if (f !== void 0) {
-        const s = E(n, f);
+        const s = T(n, f);
         s && e.push(s);
       }
     }), e;
@@ -1114,7 +1114,7 @@ const ti = (t) => {
   padding: (i) => {
     const e = [];
     if (i.padding !== void 0) {
-      const f = E("p", i.padding);
+      const f = T("p", i.padding);
       return f ? [f] : [];
     }
     return [
@@ -1126,7 +1126,7 @@ const ti = (t) => {
       { prop: i.paddingY, dir: "py" }
     ].forEach(({ prop: f, dir: n }) => {
       if (f !== void 0) {
-        const s = E(n, f);
+        const s = T(n, f);
         s && e.push(s);
       }
     }), e;
@@ -1211,7 +1211,7 @@ const ti = (t) => {
       f && e.push(f);
     }
     if (i.gap) {
-      const r = E("gap", i.gap);
+      const r = T("gap", i.gap);
       r && e.push(r);
     }
     return e;
@@ -1233,7 +1233,7 @@ const ti = (t) => {
   },
   // 自定义类名
   className: (i) => i.className ? [i.className] : []
-}), ni = {
+}), bi = {
   backgroundColor: "backgroundColor",
   color: "color",
   borderRadius: "borderRadius",
@@ -1267,10 +1267,10 @@ const ti = (t) => {
   position: "position",
   opacity: "opacity",
   className: "className"
-}, si = (t, o) => {
-  const i = (o == null ? void 0 : o.colorMaps) || fi, e = (o == null ? void 0 : o.styleMaps) || lo, r = ri(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) || go, r = ci(i, e), f = [], n = /* @__PURE__ */ new Set();
   return Object.keys(t).forEach((s) => {
-    const c = ni[s];
+    const c = bi[s];
     if (c && !n.has(c)) {
       const h = r[c];
       if (h) {
@@ -1280,17 +1280,17 @@ const ti = (t) => {
     }
   }), f.filter(Boolean).join(" ");
 };
-function ai(t) {
+function li(t) {
   const o = {};
   return t.forEach((i, e) => {
     o[e] = i.value;
   }), o;
 }
-function ci({ animatedProps: t, animationConfig: o, children: i }) {
-  const [e, r] = oo(
-    () => ai(t)
+function hi({ animatedProps: t, animationConfig: o, children: i }) {
+  const [e, r] = fo(
+    () => li(t)
   );
-  M(() => {
+  Y(() => {
     const c = [];
     return t.forEach((h, b) => {
       const l = (x) => {
@@ -1308,16 +1308,16 @@ function ci({ animatedProps: t, animationConfig: o, children: i }) {
   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 = $(h, { stiffness: b, damping: l });
+    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 s = {
     ...i.props.style,
     ...n
   };
-  return _o(i, { style: s });
+  return $o(i, { style: s });
 }
-const ho = [
+const mo = [
   // —— 2D Transitions ——
   "grow",
   "shrink",
@@ -1437,7 +1437,7 @@ const ho = [
   "curlTopRight",
   "curlBottomRight",
   "curlBottomLeft"
-], q = {
+], J = {
   "pulse-grow": "pulseGrow",
   "pulse-shrink": "pulseShrink",
   "bounce-in": "bounceIn",
@@ -1534,29 +1534,29 @@ const ho = [
   "hvr-float": "float",
   "hvr-sweep-to-right": "sweepToRight"
 };
-function bi(t) {
+function xi(t) {
   return t.replace(/[A-Z]/g, (o) => `-${o.toLowerCase()}`);
 }
-function Q(t) {
-  return ho.includes(t);
+function oo(t) {
+  return mo.includes(t);
 }
-function ui(t) {
-  const o = t.trim(), i = q[o] ?? q[o.toLowerCase()];
+function pi(t) {
+  const o = t.trim(), i = J[o] ?? J[o.toLowerCase()];
   if (i) return i;
-  if (Q(o)) return o;
+  if (oo(o)) return o;
   const e = o.replace(/-([a-z])/g, (r, f) => f.toUpperCase());
-  if (Q(e)) return e;
+  if (oo(e)) return e;
   throw new Error(
-    `Unknown interaction effect "${t}". Use one of ${ho.length} presets — see INTERACTION_EFFECTS.`
+    `Unknown interaction effect "${t}". Use one of ${mo.length} presets — see INTERACTION_EFFECTS.`
   );
 }
-function li(t, o = !1) {
+function gi(t, o = !1) {
   return o ? `fibo-fx-on-group-${t}` : `fibo-fx-on-${t}`;
 }
-function hi(t) {
-  return `fibo-fx-${bi(t)}`;
+function di(t) {
+  return `fibo-fx-${xi(t)}`;
 }
-const xi = `
+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); } }
@@ -1650,7 +1650,8 @@ const xi = `
 
 .fibo-fx {
   -webkit-tap-highlight-color: transparent;
-  transform: perspective(1px) translateZ(0);
+  /* Do NOT set a resting transform — hover/active replace transform and would jump. */
+  backface-visibility: hidden;
   box-shadow: 0 0 1px rgba(0,0,0,0);
 }
 .fibo-fx[class*="fibo-fx-sweep"],
@@ -1945,7 +1946,7 @@ const xi = `
 .group:active .fibo-fx-backward.fibo-fx-on-group-active,
 .group:focus-within .fibo-fx-backward.fibo-fx-on-group-focus-within { transform:translateX(-8px); }
 
-.fibo-fx-nudge { transition-duration:.2s;transition-property:transform;transition-timing-function:ease-out; }
+.fibo-fx-nudge { transition-duration:.24s;transition-property:transform;transition-timing-function:ease-out; }
 .fibo-fx-nudge.fibo-fx-on-hover:hover,
 .fibo-fx-nudge.fibo-fx-on-active:active,
 .fibo-fx-nudge.fibo-fx-on-focus:focus,
@@ -1953,7 +1954,7 @@ const xi = `
 .fibo-fx-nudge.fibo-fx-on-focus-within:focus-within,
 .group:hover .fibo-fx-nudge.fibo-fx-on-group-hover,
 .group:active .fibo-fx-nudge.fibo-fx-on-group-active,
-.group:focus-within .fibo-fx-nudge.fibo-fx-on-group-focus-within { transform:translateX(3px); }
+.group:focus-within .fibo-fx-nudge.fibo-fx-on-group-focus-within { transform:translate3d(3px,0,0); }
 
 .fibo-fx-fade { transition-duration:.3s;transition-property:background-color,color,opacity; }
 .fibo-fx-fade.fibo-fx-on-hover:hover,
@@ -2846,13 +2847,58 @@ const xi = `
   }
 }
 `.trim();
-let J = !1;
-function pi() {
-  if (J) return;
-  J = !0;
-  const t = C.getInstance();
-  t.ensureDefaults(), t.injectExtra(xi, "fibo-interaction-fx");
+let io = !1;
+function vi() {
+  if (io) return;
+  io = !0;
+  const t = $.getInstance();
+  t.ensureDefaults(), t.injectExtra(mi, "fibo-interaction-fx");
+}
+function F(t, o, i, e = 0) {
+  const r = (Array.isArray(t) ? t : [t]).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 P(t) {
+  const o = { ...t };
+  let i = !1;
+  const e = o.background;
+  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 = 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 wi = "translate3d(0, 0, 0)";
+function to(t) {
+  return t.transform != null && String(t.transform).trim() !== "" ? t : { ...t, transform: wi };
+}
+function eo(t, o) {
+  const i = typeof o == "number" ? `${o}px` : o;
+  return t === "x" ? `translate3d(${i}, 0, 0)` : `translate3d(0, ${i}, 0)`;
+}
+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 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 _i = {
+  "background-color": ["background-color"],
+  "border-color": ["border-color"],
+  color: ["color"],
+  opacity: ["opacity"],
+  transform: ["transform"],
+  "box-shadow": ["box-shadow"],
+  "border-radius": ["border-radius"]
+};
 class v {
   constructor(o, i, e = !1) {
     a(this, "pseudoState");
@@ -2871,10 +2917,10 @@ class v {
    * Stamps CSS classes; sheet is fiboui-owned (not a Hover.css vendor).
    */
   effect(o) {
-    const i = ui(o);
-    return pi(), this.parentBuilder.addClassName("fibo-fx"), this.parentBuilder.addClassName(hi(i)), this.parentBuilder.addClassName(
-      li(this.pseudoState, this.isGroup)
-    ), this.parentBuilder.ensureEffectTransition([
+    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",
@@ -2906,12 +2952,10 @@ class v {
     return this.transforms.set("scale", `scale(${o})`), this.flushTransform();
   }
   translateX(o) {
-    const i = typeof o == "number" ? `${o}px` : o;
-    return this.transforms.set("translateX", `translateX(${i})`), this.flushTransform();
+    return this.transforms.set("translateX", eo("x", o)), this.flushTransform();
   }
   translateY(o) {
-    const i = typeof o == "number" ? `${o}px` : o;
-    return this.transforms.set("translateY", `translateY(${i})`), this.flushTransform();
+    return this.transforms.set("translateY", eo("y", o)), this.flushTransform();
   }
   rotate(o) {
     return this.transforms.set("rotate", `rotate(${o}deg)`), this.flushTransform();
@@ -2925,14 +2969,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 = $(e || this.transitionEasing), c = r ? `${r}ms` : "0ms";
-    return this.set("transition", `${f} ${n} ${s} ${c}`);
+    const f = Array.isArray(o) ? o : [o], n = S(e || this.transitionEasing);
+    return this.set(
+      "transition",
+      F(f, i || this.transitionDuration, n, r || 0)
+    );
   }
   duration(o) {
     return this.transitionDuration = o, this.applyTransition(), this;
   }
   easing(o) {
-    return this.transitionEasing = $(o), this.applyTransition(), this;
+    return this.transitionEasing = S(o), this.applyTransition(), this;
   }
   ease(o) {
     return this.easing(o);
@@ -2944,21 +2991,30 @@ 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",
+      F(
+        this.transitionProperties,
+        this.transitionDuration,
+        this.transitionEasing,
+        this.transitionDelay
+      )
+    );
   }
   flushTransform() {
     return this.set("transform", [...this.transforms.values()].join(" "));
   }
   set(o, i) {
-    const e = u.registerPseudo(this.pseudoState, o, i, this.isGroup);
-    return this.parentBuilder.addClassName(e), this;
+    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;
   }
   end() {
     return this.parentBuilder;
   }
 }
-function Ai(t, o) {
+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);
@@ -2968,7 +3024,7 @@ function Ai(t, o) {
     block: (o == null ? void 0 : o.block) ?? "start"
   });
 }
-function ji(t) {
+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);
@@ -2976,13 +3032,13 @@ function ji(t) {
   }
   t();
 }
-function gi() {
+function zi() {
   return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("animation-timeline", "view()");
 }
-function di() {
+function Si() {
   return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("animation-timeline", "scroll()");
 }
-function mi({
+function Ci({
   preset: t = "fadeUp",
   once: o = !0,
   rootMargin: i = "0px 0px -8% 0px",
@@ -2992,11 +3048,11 @@ function mi({
   children: n
 }) {
   const s = _(null);
-  M(() => {
+  Y(() => {
     w();
     const h = s.current;
     if (!h) return;
-    if (f && gi()) {
+    if (f && zi()) {
       h.classList.add("fibo-inview");
       return;
     }
@@ -3022,10 +3078,10 @@ function mi({
   ].filter(Boolean).join(" ");
   return g.createElement("div", { ref: s, className: c, "data-fibo-reveal": t }, n);
 }
-function vi({ children: t }) {
+function $i({ children: t }) {
   const o = _(null);
-  return M(() => {
-    if (w(), di()) return;
+  return Y(() => {
+    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);
@@ -3044,8 +3100,8 @@ function vi({ children: t }) {
     t
   );
 }
-const xo = 64, wi = `${xo}px`;
-class Vi {
+const vo = 64, Ti = `${vo}px`;
+class qi {
   constructor() {
     /** @internal Extra DOM props forwarded to the host element. */
     a(this, "_props", {});
@@ -3068,6 +3124,12 @@ class Vi {
     /** True while transition class was auto-managed for hover/effect presets (expandable). */
     a(this, "_autoEffectTransition", !1);
     a(this, "_effectTransitionProps", []);
+    /**
+     * When true, getStyle() promotes background/border shorthands to longhands and
+     * (optionally) stamps a resting translate3d so pseudo transforms ease cleanly.
+     */
+    a(this, "_smoothSurface", !1);
+    a(this, "_smoothNeedsRestTransform", !1);
     a(this, "_motionClass");
     a(this, "_staggerMs");
     a(this, "_reveal");
@@ -3305,8 +3367,8 @@ class Vi {
     }, e = (f) => f.startsWith("#") || f.startsWith("rgb") || f.startsWith("hsl") || ["red", "blue", "green", "yellow", "purple", "pink", "orange", "white", "black", "gray"].some((n) => f.includes(n)), r = (f, n, s, c) => {
       let l = s || "rgba(0, 0, 0, " + (c ?? 0.1) + ")";
       if (s && s.startsWith("#") && c !== void 0) {
-        const m = parseInt(s.slice(1, 3), 16), d = parseInt(s.slice(3, 5), 16), k = parseInt(s.slice(5, 7), 16);
-        l = `rgba(${m}, ${d}, ${k}, ${c})`;
+        const m = parseInt(s.slice(1, 3), 16), d = parseInt(s.slice(3, 5), 16), y = parseInt(s.slice(5, 7), 16);
+        l = `rgba(${m}, ${d}, ${y}, ${c})`;
       }
       const p = {
         sm: "2px",
@@ -3378,7 +3440,7 @@ class Vi {
    * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
    */
   media(o, i) {
-    return this.registerMediaStyles(Qo(o), i), this;
+    return this.registerMediaStyles(ti(o), i), this;
   }
   registerMediaStyles(o, i) {
     if (!i) return;
@@ -3591,16 +3653,16 @@ class Vi {
     return this._signals.add(o), this;
   }
   translateX(o) {
-    return o instanceof R ? this._animatedProps.set("translateX", o) : this._transforms.push(`translateX(${o}px)`), this;
+    return o instanceof I ? this._animatedProps.set("translateX", o) : this._transforms.push(`translateX(${o}px)`), this;
   }
   translateY(o) {
-    return o instanceof R ? this._animatedProps.set("translateY", o) : this._transforms.push(`translateY(${o}px)`), this;
+    return o instanceof I ? this._animatedProps.set("translateY", o) : this._transforms.push(`translateY(${o}px)`), this;
   }
   scale(o) {
-    return o instanceof R ? this._animatedProps.set("scale", o) : this._transforms.push(`scale(${o})`), this;
+    return o instanceof I ? this._animatedProps.set("scale", o) : this._transforms.push(`scale(${o})`), this;
   }
   rotate(o) {
-    return o instanceof R ? this._animatedProps.set("rotate", o) : this._transforms.push(`rotate(${o}deg)`), this;
+    return o instanceof I ? this._animatedProps.set("rotate", o) : this._transforms.push(`rotate(${o}deg)`), this;
   }
   gesture(o) {
     return this._gesture = o, this;
@@ -3629,8 +3691,13 @@ class Vi {
   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 = $(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 = S(e || this._transitionEasing);
+    return this.replaceTransitionClass(
+      u.register(
+        "transition",
+        F(f, i || this._transitionDuration, n, r || 0)
+      )
+    ), this;
   }
   /**
    * Set transition duration in milliseconds
@@ -3644,7 +3711,7 @@ class Vi {
    * Example: .easing('ease-in-out')
    */
   easing(o) {
-    return this._transitionEasing = $(o), this._motionClass ? (this._style["--fibo-ease"] = this._transitionEasing, this) : (this._applyTransition(), this);
+    return this._transitionEasing = S(o), this._motionClass ? (this._style["--fibo-ease"] = this._transitionEasing, this) : (this._applyTransition(), this);
   }
   /** Alias of `.easing()`. `'spring'` becomes CSS `linear()`. */
   ease(o) {
@@ -3668,16 +3735,24 @@ class Vi {
    * 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",
+        F(
+          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 = Uo(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,
@@ -3685,20 +3760,20 @@ class Vi {
       mass: (e ? o.mass : i == null ? void 0 : i.mass) ?? void 0
     };
     if (e) {
-      const b = K(o.from), l = K(o.to), x = u.registerKeyframes(Go(`${b}=>${l}`), b, l);
+      const b = q(o.from), l = q(o.to), x = u.registerKeyframes(Qo(`${b}=>${l}`), b, l);
       this._motionClass = `fibo-anim ${x}`, this._props["data-fibo-anim"] = "custom";
     } else {
-      const b = Ko(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 = $(n ?? "ease", s);
+    const c = S(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;
   }
   /** CSS `linear()` spring. Works on `.animate()` and `.transition()` / `.hover()`. */
   spring(o) {
-    const i = ao(o);
+    const i = lo(o);
     return this._transitionEasing = i, this._motionClass ? (this._style["--fibo-ease"] = i, this) : (this._applyTransition(), this);
   }
   reducedMotion(o = "reduce") {
@@ -3786,7 +3861,7 @@ class Vi {
     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 ? wi : typeof o == "number" ? `${Math.max(o, xo)}px` : o;
+    const e = o === !0 || o === 0 ? Ti : typeof o == "number" ? `${Math.max(o, vo)}px` : o;
     return this.publishStickyOffset(e), this;
   }
   /**
@@ -3807,7 +3882,7 @@ class Vi {
     }), this;
   }
   ensureInteractiveTransition() {
-    this.ensureEffectTransition([
+    this._smoothSurface = !0, this.promoteSurfaceLonghands(), this.ensureEffectTransition([
       "transform",
       "opacity",
       "box-shadow",
@@ -3815,6 +3890,23 @@ class Vi {
       "border-color"
     ]);
   }
+  /**
+   * Prepare resting styles + transition so pseudo-state longhands (bg/border/transform)
+   * interpolate instead of snapping. Safe to call repeatedly from PseudoStateBuilder.
+   * @internal
+   */
+  prepareSmoothInteraction(o) {
+    this._smoothSurface = !0, o.some((i) => i === "transform") && (this._smoothNeedsRestTransform = !0), this.promoteSurfaceLonghands(), this._smoothNeedsRestTransform && this.ensureRestTransform(), this.ensureEffectTransition(o);
+  }
+  /** @internal Convert inline background/border shorthands → longhands. */
+  promoteSurfaceLonghands() {
+    this._style = P(this._style), this._cssStyles = P(this._cssStyles);
+  }
+  /** @internal Stamp translate3d(0,0,0) when no resting transform exists. */
+  ensureRestTransform() {
+    const o = to(this._style);
+    o !== this._style && (this._style = o);
+  }
   /**
    * Ensure the base element transitions the properties an interaction effect needs.
    * Expands an auto-managed transition; no-ops if the caller set `.transition(...)`
@@ -3824,11 +3916,13 @@ class Vi {
   ensureEffectTransition(o) {
     if (this._motionClass || this._transitionClass && !this._autoEffectTransition) return;
     const i = new Set(this._effectTransitionProps);
-    for (const e of o) i.add(e);
-    i.add("transform"), i.add("opacity"), this._effectTransitionProps = [...i], this._autoEffectTransition = !0, this.replaceTransitionClass(
+    for (const f of o) i.add(f);
+    i.add("transform"), i.add("opacity"), this._effectTransitionProps = [...i], this._autoEffectTransition = !0;
+    const e = this._transitionEasing === "ease-in-out" ? "ease-out" : this._transitionEasing, r = this._transitionDuration === 200 ? 240 : this._transitionDuration;
+    this.replaceTransitionClass(
       u.register(
         "transition",
-        `${this._effectTransitionProps.join(", ")} ${this._transitionDuration}ms ${this._transitionEasing}`
+        F(this._effectTransitionProps, r, e)
       )
     );
   }
@@ -3838,8 +3932,8 @@ class Vi {
    * SSR-safe: class + inline vars on first paint (no useEffect).
    */
   theme(o) {
-    const i = zo(o);
-    return this._theme = i, this.addClassName($o(i)), this;
+    const i = To(o);
+    return this._theme = i, this.addClassName(No(i)), this;
   }
   /** Prefer dark/light system chrome for native controls under this subtree. */
   colorScheme(o) {
@@ -3898,16 +3992,16 @@ class Vi {
     return this._classNames.push("group"), this;
   }
   children(o) {
-    return typeof o == "function" ? (this._childFunction = o, this._children = []) : (this._children = H(o), this._childFunction = void 0), this;
+    return typeof o == "function" ? (this._childFunction = o, this._children = []) : (this._children = G(o), this._childFunction = void 0), this;
   }
   getClassName() {
     let o;
-    return Object.keys(this._cssStyles).length > 0 && (o = si(this._cssStyles) || void 0), Jo(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._theme && (o = {
-      ...So(this._theme),
+    if (this._smoothSurface && (o = P(o), this._smoothNeedsRestTransform && (o = to(o))), this._theme && (o = {
+      ...Eo(this._theme),
       ...o,
       backgroundColor: o.backgroundColor ?? this._theme.colors.background,
       color: o.color ?? this._theme.colors.onBackground,
@@ -3917,18 +4011,18 @@ class Vi {
       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 = $(e, { stiffness: r, damping: f });
+      const { duration: i = 300, curve: e = "easeOut", stiffness: r, damping: f } = this._animationConfig, n = S(e, { stiffness: r, damping: f });
       o.transition = `all ${i}ms ${n}`;
     }
     return o;
   }
   processChildren() {
-    const o = this._childFunction ? H(this._childFunction) : this._children;
+    const o = this._childFunction ? G(this._childFunction) : this._children;
     return this._staggerMs == null ? o : o.map(
       (i, e) => g.createElement(
         "span",
         {
-          key: g.isValidElement(i) && D(i.key) ? i.key : `fibo-stagger-${e}`,
+          key: g.isValidElement(i) && H(i.key) ? i.key : `fibo-stagger-${e}`,
           className: "fibo-stagger-item",
           style: { "--fibo-i": String(e) }
         },
@@ -3940,7 +4034,7 @@ class Vi {
     return this._childFunction;
   }
 }
-const ki = /* @__PURE__ */ new Set([
+const Ni = /* @__PURE__ */ new Set([
   "$$typeof",
   "type",
   "props",
@@ -3953,25 +4047,25 @@ const ki = /* @__PURE__ */ new Set([
   "_debugTask",
   "_debugInfo"
 ]);
-function yi(t) {
+function Ei(t) {
   var i;
   const o = (i = t._props) == null ? void 0 : i.key;
   if (!(o == null || o === ""))
     return o;
 }
-function _i(t) {
-  const o = t._isObserver, i = t._signals, e = t._observers, r = t._state, f = t._providers, n = yi(t), s = () => {
+function Ri(t) {
+  const o = t._isObserver, i = t._signals, e = t._observers, r = t._state, f = t._providers, n = Ei(t), s = () => {
     var z;
     let x = t.build();
     const p = t._animatedProps, m = t._animationConfig;
-    p && p.size > 0 && (x = g.createElement(ci, {
+    p && p.size > 0 && (x = g.createElement(hi, {
       key: n,
       animatedProps: p,
       animationConfig: m,
       children: x
     }));
     const d = t._reveal;
-    d && (x = g.createElement(mi, {
+    d && (x = g.createElement(Ci, {
       key: n,
       preset: d.preset,
       once: d.once,
@@ -3980,38 +4074,38 @@ function _i(t) {
       forceMotion: t._reducedMotion === "never",
       preferTimeline: (z = t._classNames) == null ? void 0 : z.includes("fibo-view-timeline"),
       children: x
-    })), t._scrollProgress && (x = g.createElement(vi, { key: n, children: x })), t._usesCssMotion && (x = g.createElement(
+    })), t._scrollProgress && (x = g.createElement($i, { key: n, children: x })), t._usesCssMotion && (x = g.createElement(
       g.Fragment,
       { key: n },
-      g.createElement(Zo),
+      g.createElement(oi),
       x
     ));
-    const k = t._gesture;
-    return k && (x = k.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(Mo, {
+    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(Oo, {
     key: n,
     children: s
   }) : null, b = () => h ?? s();
   let l = b();
-  return c && i && i.size > 0 ? l = g.createElement(Oo, {
+  return c && i && i.size > 0 ? l = g.createElement(Do, {
     key: n,
     signals: i,
     children: b
-  }) : c && e && e.size > 0 && (l = g.createElement(Lo, {
+  }) : c && e && e.size > 0 && (l = g.createElement(jo, {
     key: n,
     observables: e,
     children: b
-  })), c && r && r.size > 0 && (l = g.createElement(Bo, {
+  })), c && r && r.size > 0 && (l = g.createElement(Po, {
     key: n,
     stateMap: r,
     children: l
-  })), c && f && f.size > 0 && (l = g.createElement(Po, {
+  })), c && f && f.size > 0 && (l = g.createElement(Vo, {
     key: n,
     providers: f,
     children: l
   })), l;
 }
-function po(t, o, i) {
+function wo(t, o, i) {
   const e = function() {
     return o();
   };
@@ -4028,10 +4122,10 @@ function po(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 Di(t) {
+function Qi(t) {
   return (...o) => {
-    const i = new t(...o), e = t.name.replace(/Builder$/, "") || "Fibo", r = () => _i(i);
-    return po(i, r, e), new Proxy(i, {
+    const i = new t(...o), e = t.name.replace(/Builder$/, "") || "Fibo", r = () => Ri(i);
+    return wo(i, r, e), new Proxy(i, {
       get(f, n, s) {
         var c, h;
         if (n === "build")
@@ -4053,7 +4147,7 @@ function Di(t) {
           }, x = Object.getPrototypeOf(f).props;
           return typeof x == "function" ? Object.assign((m) => (x.call(f, m), s), l) : l;
         }
-        return ki.has(n) || Reflect.has(f, n) ? Reflect.get(f, n, s) : (b) => {
+        return Ni.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;
         };
@@ -4061,7 +4155,7 @@ function Di(t) {
     });
   };
 }
-const zi = ({
+const Ii = ({
   signal: t,
   builder: o,
   loading: i,
@@ -4073,13 +4167,13 @@ const zi = ({
     () => t.value
   ), f = r == null ? void 0 : r.error;
   return f && e ? e(f) : ((r == null ? void 0 : r.isLoading) || (r == null ? void 0 : r.loading)) === !0 && i ? i() : o ? o(r) : null;
-}, $i = g.memo(zi);
-class Si {
+}, Fi = g.memo(Ii);
+class Xi {
   constructor(o) {
     a(this, "_loading");
     a(this, "_error");
     a(this, "_builder");
-    this._signal = o, po(this, () => this.build(), "ValueBuilder");
+    this._signal = o, wo(this, () => this.build(), "ValueBuilder");
   }
   loading(o) {
     return this._loading = typeof o == "function" ? o : () => o, this;
@@ -4094,7 +4188,7 @@ class Si {
     return this._builder = o, this;
   }
   build() {
-    return g.createElement($i, {
+    return g.createElement(Fi, {
       signal: this._signal,
       builder: this._builder,
       loading: this._loading,
@@ -4102,59 +4196,59 @@ class Si {
     });
   }
 }
-function Wi(t) {
-  return new Si(t);
+function Ji(t) {
+  return new Xi(t);
 }
 export {
-  Oi as A,
-  Di as B,
-  To as C,
-  Vi as D,
-  Fo as E,
-  xi as F,
-  Eo as G,
+  Ui as A,
+  Qi as B,
+  Xo as C,
+  qi as D,
+  Lo as E,
+  mi as F,
+  Io as G,
   w as H,
-  ho as I,
-  Ko as J,
-  Bo as K,
-  Ao as L,
-  G as M,
-  jo as N,
-  Io as O,
-  Po as P,
-  Vo as Q,
-  Mi as R,
-  R as S,
-  H as T,
-  Z as U,
-  Wi as V,
-  P as W,
-  bo as X,
-  Qo as Y,
-  Fi as a,
-  eo as b,
-  Ri as c,
-  Mo as d,
-  Bi as e,
-  mi as f,
-  fo as g,
-  vi as h,
-  Ai as i,
-  ji as j,
-  gi as k,
-  di as l,
-  ao as m,
-  $ as n,
-  Xi as o,
-  ui as p,
-  hi as q,
-  Co as r,
-  Ii as s,
-  bi as t,
-  Yi as u,
-  pi as v,
-  Zo as w,
-  Pi as x,
-  Li as y,
-  co as z
+  mo as I,
+  Jo as J,
+  Po as K,
+  Wo as L,
+  Z as M,
+  Ho as N,
+  Mo as O,
+  Vo as P,
+  Uo as Q,
+  Di as R,
+  I as S,
+  G as T,
+  Q as U,
+  Ji as V,
+  j as W,
+  xo as X,
+  ti as Y,
+  ji as a,
+  so as b,
+  Ai as c,
+  Oo as d,
+  Wi as e,
+  Ci as f,
+  ao as g,
+  $i as h,
+  Ki as i,
+  Zi as j,
+  zi as k,
+  Si as l,
+  lo as m,
+  S as n,
+  Pi as o,
+  pi as p,
+  di as q,
+  Ro as r,
+  Oi as s,
+  xi as t,
+  Vi as u,
+  vi as v,
+  oi as w,
+  Gi as x,
+  Hi as y,
+  ho as z
 };