fiboui 2.2.0 → 2.2.3

package/dist/{index-DU2MC5u3.js → index-DbjaknWm.js}

@@ -1,14 +1,14 @@
 "use client";
-var X = Object.defineProperty;
-var q = (n, s, e) => s in n ? X(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
-var r = (n, s, e) => q(n, typeof s != "symbol" ? s + "" : s, e);
-import i, { useState as F, useRef as D, useLayoutEffect as G } from "react";
-import { v as p, F as _, D as J, B as V, P as K } from "./builder-KLTu7nAI.js";
+var G = Object.defineProperty;
+var X = (n, s, e) => s in n ? G(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
+var r = (n, s, e) => X(n, typeof s != "symbol" ? s + "" : s, e);
+import i, { useState as V, useRef as D, useLayoutEffect as q } from "react";
+import { w as _, x as b, I as J, G as F, P as K } from "./builder-3Bc2PfP9.js";
 import { P as W } from "./PluginManager-D5-ApsSN.js";
-import { R as Q, I as U } from "./index-ijbJR6lD.js";
-import { T as ee } from "./index-DhPBYTPt.js";
-import { e as te, L as ie } from "./Link-DDzSPY1Q.js";
-class se extends _ {
+import { R as Q, I as U } from "./index-CZQ5erLU.js";
+import { T as ee } from "./index-BObp1JkM.js";
+import { e as te, L as ie } from "./Link-ElmaMZB8.js";
+class se extends b {
   build() {
     const e = [
       "fibo-center",
@@ -28,8 +28,8 @@ class se extends _ {
     );
   }
 }
-const Ee = p(se);
-class re extends _ {
+const Ie = _(se);
+class re extends b {
   constructor() {
     super(...arguments);
     r(this, "_mainAxisAlignment", "start");
@@ -71,7 +71,8 @@ class re extends _ {
       "fibo-column",
       "flex",
       "flex-col",
-      this.isHug() ? "w-auto self-auto" : "w-full",
+      // min-w-0: allow shrink inside flex/grid so wide children (tables, nowrap) don't blow the track
+      this.isHug() ? "w-auto self-auto" : "w-full min-w-0",
       e[this._mainAxisAlignment],
       t[this._crossAxisAlignment],
       this._size ? o[this._size] : "",
@@ -90,8 +91,8 @@ class re extends _ {
     );
   }
 }
-const Se = p(re);
-class ne extends _ {
+const Se = _(re);
+class ne extends b {
   build() {
     const s = this.getClassName(), e = this.getStyle(), t = this.processChildren();
     return i.createElement(
@@ -105,8 +106,8 @@ class ne extends _ {
     );
   }
 }
-const Ie = p(ne);
-class le extends _ {
+const He = _(ne);
+class oe extends b {
   constructor() {
     super(...arguments);
     r(this, "_height");
@@ -136,7 +137,7 @@ class le extends _ {
     });
   }
 }
-const He = p(le), oe = i.memo((n) => {
+const ze = _(oe), le = i.memo((n) => {
   const {
     theme: s,
     locale: e,
@@ -149,7 +150,7 @@ const He = p(le), oe = i.memo((n) => {
   s && f.set("theme", s), e && f.set("locale", e), Object.entries(t).forEach(([B, w]) => {
     f.set(B, w);
   });
-  const b = i.createElement(
+  const p = i.createElement(
     "div",
     {
       className: `fibo-scaffold ${o || ""}`,
@@ -169,11 +170,11 @@ const He = p(le), oe = i.memo((n) => {
     K,
     {
       providers: f,
-      children: b
+      children: p
     }
-  ) : b;
+  ) : p;
 });
-class ae extends _ {
+class ae extends b {
   constructor() {
     super(...arguments);
     r(this, "_locale");
@@ -213,7 +214,7 @@ class ae extends _ {
       content: i.createElement(i.Fragment, null, ...J(e.children)),
       fixed: e.fixed ?? !1
     } : {
-      content: V(e),
+      content: F(e),
       fixed: !1
     };
   }
@@ -221,8 +222,8 @@ class ae extends _ {
     return !e || typeof e != "object" || i.isValidElement(e) || "build" in e && typeof e.build == "function" ? !1 : "children" in e && !("type" in e);
   }
   build() {
-    var N, C, z, j, y, E, S, L, R, $, A, O, l, a, m, g, I, M, H, P, T, Y;
-    const e = this.processChildren(), t = this._structure, o = this._headerBar && ((N = t.header) == null ? void 0 : N.visible) !== !1, h = this._footerBar && ((C = t.footer) == null ? void 0 : C.visible) !== !1, c = this._sideBarLeft && ((z = t.sidebarLeft) == null ? void 0 : z.visible) !== !1, d = this._sideBarRight && ((j = t.sidebarRight) == null ? void 0 : j.visible) !== !1, f = c && ((y = t.sidebarLeft) == null ? void 0 : y.fullHeight), b = d && ((E = t.sidebarRight) == null ? void 0 : E.fullHeight), B = i.createElement(
+    var N, C, z, j, y, E, I, L, R, $, A, O, l, a, m, g, S, M, H, P, T, Y;
+    const e = this.processChildren(), t = this._structure, o = this._headerBar && ((N = t.header) == null ? void 0 : N.visible) !== !1, h = this._footerBar && ((C = t.footer) == null ? void 0 : C.visible) !== !1, c = this._sideBarLeft && ((z = t.sidebarLeft) == null ? void 0 : z.visible) !== !1, d = this._sideBarRight && ((j = t.sidebarRight) == null ? void 0 : j.visible) !== !1, f = c && ((y = t.sidebarLeft) == null ? void 0 : y.fullHeight), p = d && ((E = t.sidebarRight) == null ? void 0 : E.fullHeight), B = i.createElement(
       "div",
       {
         key: "scaffold-middle",
@@ -239,7 +240,7 @@ class ae extends _ {
           key: "sidebar-left",
           className: "z-20",
           style: {
-            width: (S = t.sidebarLeft) == null ? void 0 : S.width,
+            width: (I = t.sidebarLeft) == null ? void 0 : I.width,
             position: ((L = t.sidebarLeft) == null ? void 0 : L.mode) === "over" ? "absolute" : ((R = t.sidebarLeft) == null ? void 0 : R.behavior) === "fixed" || this._sideBarLeft.fixed ? "sticky" : void 0,
             top: (($ = t.sidebarLeft) == null ? void 0 : $.behavior) === "fixed" || this._sideBarLeft.fixed ? 0 : void 0,
             height: ((A = t.sidebarLeft) == null ? void 0 : A.behavior) === "fixed" || this._sideBarLeft.fixed ? "100%" : void 0,
@@ -258,7 +259,7 @@ class ae extends _ {
             position: "relative"
           }
         }, e),
-        d && !b && i.createElement("div", {
+        d && !p && i.createElement("div", {
           key: "sidebar-right",
           className: "z-20",
           style: {
@@ -277,7 +278,7 @@ class ae extends _ {
         key: "header-bar",
         className: "z-30",
         style: {
-          height: (I = t.header) == null ? void 0 : I.height,
+          height: (S = t.header) == null ? void 0 : S.height,
           position: ((M = t.header) == null ? void 0 : M.position) || (this._headerBar.fixed ? "sticky" : "static"),
           top: 0,
           backgroundColor: "var(--fibo-surface, #ffffff)",
@@ -325,7 +326,7 @@ class ae extends _ {
         }
       }, this._sideBarLeft.content),
       u
-    ])), b && (u = i.createElement("div", {
+    ])), p && (u = i.createElement("div", {
       key: "full-height-right-wrapper",
       style: { display: "flex", flexDirection: "row", flex: 1, height: "100%", overflow: "hidden" }
     }, [
@@ -341,19 +342,19 @@ class ae extends _ {
         }
       }, this._sideBarRight.content)
     ]));
-    const v = W.getInstance().getOverlays().map((Z) => Z().build()), x = {
+    const x = W.getInstance().getOverlays().map((Z) => Z().build()), v = {
       theme: this._theme,
       locale: this._locale,
       providers: this._customProviders,
       className: this.getClassName(),
       style: this.getStyle(),
       children: u,
-      overlays: v
+      overlays: x
     };
-    return i.createElement(oe, x);
+    return i.createElement(le, v);
   }
 }
-const ze = p(ae), he = i.memo((n) => {
+const Le = _(ae), he = i.memo((n) => {
   const { height: s = 64, sticky: e, className: t, style: o, children: h, ...c } = n;
   return i.createElement(
     "header",
@@ -365,7 +366,7 @@ const ze = p(ae), he = i.memo((n) => {
     h
   );
 });
-class ce extends _ {
+class ce extends b {
   constructor() {
     super(...arguments);
     r(this, "_height", 64);
@@ -406,16 +407,16 @@ class ce extends _ {
     return i.createElement(he, e);
   }
 }
-const Le = p(ce), de = i.memo((n) => {
-  const { width: s = 260, collapsed: e, className: t, style: o, children: h, ...c } = n, d = te(), f = (d == null ? void 0 : d.currentPath) ?? (typeof window < "u" ? window.location.pathname : ""), b = e ? 80 : s, w = W.getInstance().getSidebarItems().map((u, k) => {
-    const v = f === u.path;
+const Re = _(ce), de = i.memo((n) => {
+  const { width: s = 260, collapsed: e, className: t, style: o, children: h, ...c } = n, d = te(), f = (d == null ? void 0 : d.currentPath) ?? "", p = e ? 80 : s, w = W.getInstance().getSidebarItems().map((u, k) => {
+    const x = f === u.path;
     return i.createElement(ie, {
       key: `plugin-item-${u.path || k}`,
       to: u.path,
       className: "no-underline block mb-1",
       children: Q().padding(12).alignItems("center").gap(12).className(`
                     transition-colors duration-200 rounded-lg mx-2
-                    ${v ? "bg-primary/10 text-primary" : "text-gray-600 hover:bg-gray-100"}
+                    ${x ? "bg-primary/10 text-primary" : "text-gray-600 hover:bg-gray-100"}
                 `).children([
         u.icon ? U(u.icon).size(20).build() : null,
         e ? null : ee(u.label).style({ fontSize: 14 }).weight(500).build()
@@ -426,14 +427,14 @@ const Le = p(ce), de = i.memo((n) => {
     "aside",
     {
       className: `flex flex-col border-r border-gray-200 bg-white transition-all duration-300 h-full ${t || ""}`,
-      style: { width: b, minWidth: b, ...o },
+      style: { width: p, minWidth: p, ...o },
       ...c
     },
     h,
     w
   );
 });
-class fe extends _ {
+class fe extends b {
   constructor() {
     super(...arguments);
     r(this, "_width", 260);
@@ -457,8 +458,8 @@ class fe extends _ {
     return i.createElement(de, e);
   }
 }
-const Re = p(fe), ue = i.memo((n) => {
-  const { sidebar: s, header: e, children: t, className: o, style: h, ...c } = n, [d, f] = F(!1);
+const $e = _(fe), ue = i.memo((n) => {
+  const { sidebar: s, header: e, children: t, className: o, style: h, ...c } = n, [d, f] = V(!1);
   return i.createElement(
     "div",
     {
@@ -509,17 +510,17 @@ const Re = p(fe), ue = i.memo((n) => {
     )
   );
 });
-class me extends _ {
+class me extends b {
   constructor() {
     super(...arguments);
     r(this, "_sidebar");
     r(this, "_header");
   }
   sidebar(e) {
-    return this._sidebar = V(e), this;
+    return this._sidebar = F(e), this;
   }
   header(e) {
-    return this._header = V(e), this;
+    return this._header = F(e), this;
   }
   build() {
     const e = {
@@ -533,8 +534,8 @@ class me extends _ {
     return i.createElement(ue, e);
   }
 }
-const $e = p(me);
-class ge extends _ {
+const Ae = _(me);
+class ge extends b {
   constructor() {
     super(...arguments);
     r(this, "_alignment", "center");
@@ -573,8 +574,8 @@ class ge extends _ {
     );
   }
 }
-const Ae = p(ge);
-class pe extends _ {
+const Oe = _(ge);
+class pe extends b {
   constructor() {
     super(...arguments);
     r(this, "_sizeHeight");
@@ -597,12 +598,19 @@ class pe extends _ {
     );
   }
 }
-const Oe = p(pe);
-class _e extends _ {
+const je = _(pe);
+function _e(...n) {
+  return (s) => {
+    for (const e of n)
+      e && (typeof e == "function" ? e(s) : e.current = s);
+  };
+}
+class be extends b {
   constructor() {
     super(...arguments);
     r(this, "_direction", "vertical");
     r(this, "_scrollbar", "auto");
+    r(this, "_controller");
   }
   direction(e) {
     return this._direction = e, this;
@@ -616,6 +624,10 @@ class _e extends _ {
   scrollbar(e) {
     return this._scrollbar = e, this;
   }
+  /** Attach a ScrollController for programmatic scroll (carousel prev/next). */
+  controller(e) {
+    return this._controller = e, this;
+  }
   build() {
     const e = {
       overflowX: this._direction === "horizontal" || this._direction === "both" ? "auto" : "hidden",
@@ -624,15 +636,27 @@ class _e extends _ {
       display: "flex",
       flexDirection: this._direction === "horizontal" ? "row" : "column",
       ...this.getStyle()
-    }, t = [...this.getClassName().split(" ")];
-    return this._scrollbar === "hidden" && (t.push("scrollbar-hide"), e.scrollbarWidth = "none", e.msOverflowStyle = "none"), i.createElement("div", {
-      className: t.join(" "),
-      style: e,
-      ...this._props
-    }, ...this.processChildren());
+    }, t = [...this.getClassName().split(" ").filter(Boolean)];
+    this._scrollbar === "hidden" && (t.push("scrollbar-hide"), e.scrollbarWidth = "none", e.msOverflowStyle = "none");
+    const o = this._controller, h = this._props.ref, { ref: c, ...d } = this._props, f = _e(
+      (p) => {
+        o == null || o.attach(p);
+      },
+      h
+    );
+    return i.createElement(
+      "div",
+      {
+        className: t.join(" "),
+        style: e,
+        ref: f,
+        ...d
+      },
+      ...this.processChildren()
+    );
   }
 }
-const je = p(_e), be = i.memo((n) => {
+const Me = _(be), ye = i.memo((n) => {
   const {
     children: s,
     itemHeight: e,
@@ -642,52 +666,52 @@ const je = p(_e), be = i.memo((n) => {
     containerHeight: c = 500,
     className: d,
     style: f
-  } = n, [b, B] = F(0), w = D(null), u = D(/* @__PURE__ */ new Map()), k = D(/* @__PURE__ */ new Map()), v = s.length, x = e !== void 0, N = (l) => x ? e : k.current.get(l) ?? t, C = (l) => {
-    if (x)
+  } = n, [p, B] = V(0), w = D(null), u = D(/* @__PURE__ */ new Map()), k = D(/* @__PURE__ */ new Map()), x = s.length, v = e !== void 0, N = (l) => v ? e : k.current.get(l) ?? t, C = (l) => {
+    if (v)
       return l * e;
     let a = 0;
     for (let m = 0; m < l; m++)
       a += N(m);
     return a;
   }, z = () => {
-    if (x)
-      return v * e;
+    if (v)
+      return x * e;
     let l = 0;
-    for (let a = 0; a < v; a++)
+    for (let a = 0; a < x; a++)
       l += N(a);
     return l;
   }, y = Math.max(0, ((l) => {
-    if (x)
+    if (v)
       return Math.floor(l / e);
-    let a = 0, m = v - 1;
+    let a = 0, m = x - 1;
     for (; a < m; ) {
       const g = Math.floor((a + m) / 2);
       C(g) < l ? a = g + 1 : m = g;
     }
     return Math.max(0, a - 1);
-  })(b) - h);
+  })(p) - h);
   let E;
-  if (x) {
+  if (v) {
     const l = Math.ceil(c / e);
-    E = Math.min(v, y + l + h * 2);
+    E = Math.min(x, y + l + h * 2);
   } else {
     let l = C(y), a = y;
-    for (; l < b + c + h * t && a < v; )
+    for (; l < p + c + h * t && a < x; )
       l += N(a), a++;
-    E = Math.min(v, a);
+    E = Math.min(x, a);
   }
-  const S = s.slice(y, E), L = C(y), R = z(), [$, A] = F(0);
-  G(() => {
-    if (!o || x) return;
+  const I = s.slice(y, E), L = C(y), R = z(), [$, A] = V(0);
+  q(() => {
+    if (!o || v) return;
     let l = !1;
-    S.forEach((a, m) => {
-      const g = y + m, I = u.current.get(g);
-      if (I) {
-        const H = I.getBoundingClientRect().height;
+    I.forEach((a, m) => {
+      const g = y + m, S = u.current.get(g);
+      if (S) {
+        const H = S.getBoundingClientRect().height;
         H > 0 && k.current.get(g) !== H && (k.current.set(g, H), l = !0);
       }
     }), l && A((a) => a + 1);
-  }, [S, y, o, x, $]);
+  }, [I, y, o, v, $]);
   const O = (l) => {
     B(l.currentTarget.scrollTop);
   };
@@ -723,14 +747,14 @@ const je = p(_e), be = i.memo((n) => {
           width: "100%"
         }
       },
-      S.map((l, a) => {
+      I.map((l, a) => {
         const m = y + a;
         return i.createElement(
           "div",
           {
             key: m,
             ref: (g) => {
-              g && o && !x ? u.current.set(m, g) : g || u.current.delete(m);
+              g && o && !v ? u.current.set(m, g) : g || u.current.delete(m);
             },
             style: { width: "100%" }
           },
@@ -740,7 +764,7 @@ const je = p(_e), be = i.memo((n) => {
     )
   );
 });
-class ye extends _ {
+class xe extends b {
   constructor() {
     super(...arguments);
     r(this, "_itemHeight");
@@ -775,21 +799,21 @@ class ye extends _ {
       className: this.getClassName(),
       style: this.getStyle()
     };
-    return i.createElement(be, t);
+    return i.createElement(ye, t);
   }
 }
-const Me = p(ye);
+const Pe = _(xe);
 export {
-  Ee as C,
-  $e as D,
-  Le as H,
-  Oe as L,
-  He as S,
-  Me as V,
-  Ae as Z,
+  Ie as C,
+  Ae as D,
+  Re as H,
+  je as L,
+  ze as S,
+  Pe as V,
+  Oe as Z,
   Se as a,
-  Ie as b,
-  ze as c,
-  Re as d,
-  je as e
+  He as b,
+  Le as c,
+  $e as d,
+  Me as e
 };

package/dist/{index-CbTvwN9K.js → index-DgRpEUs0.js}

@@ -3,10 +3,10 @@ var U = Object.defineProperty;
 var G = (n, s, e) => s in n ? U(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
 var r = (n, s, e) => G(n, typeof s != "symbol" ? s + "" : s, e);
 import t from "react";
-import { v as C, F } from "./builder-KLTu7nAI.js";
-import { B as j } from "./index-CYnY7jAX.js";
-import { T as O } from "./index-DhPBYTPt.js";
-import { R as J } from "./index-ijbJR6lD.js";
+import { w as C, x as F } from "./builder-3Bc2PfP9.js";
+import { B as j } from "./index-BlciuWzU.js";
+import { T as O } from "./index-BObp1JkM.js";
+import { R as J } from "./index-CZQ5erLU.js";
 import { jsxs as $, jsx as f } from "react/jsx-runtime";
 const K = ({ size: n }) => t.createElement(
   "svg",

package/dist/index.d.ts

@@ -267,7 +267,6 @@ declare abstract class GestureBuilder {
 	abstract wrap(children: React$1.ReactNode): React$1.ReactNode;
 }
 export declare class PseudoStateBuilder {
-	private baseClassName;
 	private pseudoState;
 	private parentBuilder;
 	private isGroup;
@@ -276,7 +275,7 @@ export declare class PseudoStateBuilder {
 	private transitionDelay;
 	private transitionProperties;
 	private transforms;
-	constructor(baseClassName: string, pseudoState: string, parentBuilder: FiboBuilder, isGroup?: boolean);
+	constructor(pseudoState: string, parentBuilder: FiboBuilder, isGroup?: boolean);
 	bg(color: string): this;
 	color(value: string): this;
 	text(color: string): this;
@@ -414,7 +413,6 @@ declare abstract class FiboBuilder {
 	protected _cssStyles: React$1.CSSProperties;
 	protected _classNames: string[];
 	protected _children: React$1.ReactNode[];
-	protected _responsive?: ResponsiveStyles;
 	protected _theme?: ThemeConfig;
 	protected _state: Map<string, any>;
 	protected _providers: Map<string, any>;
@@ -425,7 +423,6 @@ declare abstract class FiboBuilder {
 	protected _animationConfig?: Partial<AnimationOptions>;
 	protected _animatedProps: Map<string, Signal<any>>;
 	protected _transforms: string[];
-	protected _pseudoStateClassName?: string;
 	protected _transitionClass?: string;
 	protected _motionClass?: string;
 	protected _staggerMs?: number;
@@ -455,8 +452,11 @@ declare abstract class FiboBuilder {
 	 * that `.anchor()` applies).
 	 */
 	scrollMargin(value: number | string): this;
+	/** Stamp a class onto the host. Used by PseudoStateBuilder (hashed `:hover` etc.). */
+	addClassName(name: string): this;
 	/**
-	 * React list key. After this is called, React reads the key as a string.
+	 * React list key. After this is called, React reads the key as a string
+	 * on both the builder element and the inner host wrapper.
 	 * Builders are valid elements — you do not need `.build()`.
 	 */
 	key(value: string | number): this;
@@ -501,6 +501,11 @@ declare abstract class FiboBuilder {
 	color(value: string | Colors): this;
 	private resolveSemanticColor;
 	shadow(config?: ShadowConfig): this;
+	/**
+	 * Breakpoint styles compiled to CSS `@media` (same engine as `.md()`).
+	 * Tiers stay mutually exclusive: mobile `<768`, tablet `768–1023`, desktop `≥1024`.
+	 * No `window.innerWidth` — hydrate-safe.
+	 */
 	responsive(styles: ResponsiveStyles): this;
 	/**
 	 * CSS `@media` (min-width or a raw query). Compiles to a class — no resize JS.
@@ -508,6 +513,7 @@ declare abstract class FiboBuilder {
 	 * @example Box().padding(8).media('md', { padding: 16 }).media('(prefers-color-scheme: dark)', { backgroundColor: '#111' })
 	 */
 	media(query: BreakpointKey | string, styles: React$1.CSSProperties): this;
+	private registerMediaStyles;
 	sm(styles: React$1.CSSProperties): this;
 	md(styles: React$1.CSSProperties): this;
 	lg(styles: React$1.CSSProperties): this;
@@ -634,7 +640,6 @@ declare abstract class FiboBuilder {
 	focusRing(color?: string): this;
 	protected ensureInteractiveTransition(): void;
 	theme(themeConfig: ThemeConfig): this;
-	private getPseudoStateClassName;
 	hover(): PseudoStateBuilder;
 	hover(callback: PseudoStateFn): this;
 	focus(): PseudoStateBuilder;
@@ -1608,8 +1613,20 @@ export declare function supportsViewTimeline(): boolean;
 export declare function supportsScrollTimeline(): boolean;
 export declare function ensureMotionCss(): void;
 export declare function getMotionCss(): string;
+export declare function getCss(): string;
+/** `<style id="fibo-dynamic-styles">` HTML. Call **after** `renderToString` so rules are collected. */
+export declare function getStyleTag(): string;
+/**
+ * Inject collected CSS into a document. Place as a **later sibling** of the app
+ * so registrations from children run first during SSR.
+ */
+export declare function FiboStyles(): React$1.ReactElement;
 export declare function MotionStyles(): React$1.ReactElement;
-/** Current viewport width; SSR snapshot is 1024 (desktop). */
+/**
+ * Current viewport width. Hydration uses 1024 (desktop) so the first client
+ * render matches SSR; the real width arrives after mount.
+ * Prefer `.md()` / `.responsive()` (CSS `@media`) over this hook.
+ */
 export declare function useViewportWidth(): number;
 type Constructor<T = any> = new (...args: any[]) => T;
 type Factory<T = any> = () => T;
@@ -11341,15 +11358,33 @@ export declare const Line: () => LineBuilder & {
 	colorRendering: (value: import("csstype").Property.ColorRendering | undefined) => LineBuilder & /*elided*/ any & React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>;
 	glyphOrientationVertical: (value: import("csstype").Property.GlyphOrientationVertical | undefined) => LineBuilder & /*elided*/ any & React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>;
 } & React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>;
+/** Flutter-style handle for a mounted ScrollView — no document.querySelector. */
+export declare class ScrollController {
+	private _node;
+	/** @internal Attached by ScrollView on mount. */
+	attach(node: HTMLElement | null): void;
+	get node(): HTMLElement | null;
+	scrollBy(options: ScrollToOptions): void;
+	scrollTo(options: ScrollToOptions): void;
+	/**
+	 * Carousel step: scroll by the first child's outer width (+ gap).
+	 * Prefer this over measuring in app code.
+	 */
+	scrollByChild(dir?: -1 | 1, gap?: number): void;
+	scrollToChild(index: number, gap?: number): void;
+}
 type ScrollDirection = "vertical" | "horizontal" | "both";
 type ScrollbarVisibility = "hidden" | "visible" | "auto";
 declare class ScrollViewBuilder extends FiboBuilder {
 	private _direction;
 	private _scrollbar;
+	private _controller?;
 	direction(direction: ScrollDirection): this;
 	horizontal(): this;
 	vertical(): this;
 	scrollbar(visibility: ScrollbarVisibility): this;
+	/** Attach a ScrollController for programmatic scroll (carousel prev/next). */
+	controller(controller: ScrollController): this;
 	build(): React$1.ReactElement;
 }
 export declare const ScrollView: () => ScrollViewBuilder & {
@@ -43026,11 +43061,12 @@ declare class PathBuilder extends ShapeBuilder {
 }
 export declare const Path: () => PathBuilder;
 declare class LinearGradientBuilder extends FiboBuilder {
-	private _id;
+	private _id?;
 	private _colors;
 	private _stops?;
 	private _angle;
 	id(value: string): this;
+	private gradientId;
 	colors(colors: string[]): this;
 	stops(stops: number[]): this;
 	angle(degrees: number): this;
@@ -44778,6 +44814,7 @@ interface RouterContextValue {
 	replace: (path: string) => void;
 	params: Record<string, string>;
 	query: URLSearchParams;
+	hash: string;
 }
 interface NavigateOptions {
 	replace?: boolean;
@@ -44797,6 +44834,12 @@ interface RouterProps {
 	fallback?: React$1.ComponentType;
 	loading?: React$1.ReactNode;
 	basename?: string;
+	/** Request path for SSR. First client render uses this (or `/`), then window after mount. */
+	initialPath?: string;
+	/** Request search string (`?a=1` or `a=1`) for SSR. */
+	initialSearch?: string;
+	/** Request hash (`#section` or `section`) for SSR. */
+	initialHash?: string;
 	errorBoundary?: React$1.ReactNode | ((error: Error, errorInfo: React$1.ErrorInfo) => React$1.ReactNode);
 	onError?: (error: Error, errorInfo: React$1.ErrorInfo) => void;
 }