fiboui 2.2.1 → 2.2.3

package/README.md

@@ -1,4 +1,4 @@
-# FiboUI v2.2.1
+# FiboUI v2.2.3
 
 **A Flutter & SwiftUI-inspired React UI framework featuring a fluent builder API and fine-grained reactivity.**
 

package/dist/{FineGrain-uhDvqyeZ.js → FineGrain-BEvB51B2.js}

@@ -1,6 +1,6 @@
 "use client";
 import s, { useRef as l, useEffect as p } from "react";
-import { y as x, r as m, E } from "./builder-KX69ixME.js";
+import { y as x, r as m, E } from "./builder-3Bc2PfP9.js";
 function R({
   compute: e,
   as: n = "span",

package/dist/{builder-KX69ixME.js → builder-3Bc2PfP9.js}

@@ -463,6 +463,8 @@ const F = `
 .fibo-stagger-item { display: contents; }
 
 .fibo-reveal {
+  min-width: 0;
+  max-width: 100%;
   opacity: 0;
   transform: translate3d(0, 12px, 0);
   transition-property: opacity, transform, filter;
@@ -1448,6 +1450,8 @@ function oe({
   const l = [
     "fibo-reveal",
     `fibo-reveal-${r}`,
+    // min-w-0 only — do NOT force w-full (breaks horizontal ScrollView / carousel slides)
+    "min-w-0",
     i ? "fibo-motion-force" : ""
   ].filter(Boolean).join(" ");
   return g.createElement("div", { ref: a, className: l, "data-fibo-reveal": r }, n);

package/dist/content.js

@@ -1,7 +1,7 @@
 "use client";
-import { b as s, A as r, B as o, I as t, c as n, L as I, P as g, a as l, S as m } from "./index-B7jJYOv5.js";
-import { T as x } from "./index-Dj85aIkg.js";
-import { I as f } from "./index-CgPc0zLh.js";
+import { b as s, A as r, B as o, I as t, c as n, L as I, P as g, a as l, S as m } from "./index-DgRpEUs0.js";
+import { T as x } from "./index-BObp1JkM.js";
+import { I as f } from "./index-CZQ5erLU.js";
 export {
   s as Alert,
   r as Avatar,

package/dist/core.js

@@ -1,7 +1,7 @@
 "use client";
-import { C as a, F as r, M as o, p as t, O as i, d as l, P as n, R as u, f as p, h as S, S as c, V as g, c as b, b as v, a as d, t as m, g as T, q as R, v as P, o as F, n as y, r as C, i as E, s as f, m as M, j as O, l as x, k as V, u as B, e as h } from "./builder-KX69ixME.js";
-import { E as k, l as w, F as A, k as I, P as q, c as G, j as N, m as W, t as _, g as z, b as D, h as H, a as J, i as K, u as L, e as Q, f as U, d as X } from "./mount-DX2mgYvd.js";
-import { F as Z, b as $ } from "./FineGrain-uhDvqyeZ.js";
+import { C as a, F as r, M as o, p as t, O as i, d as l, P as n, R as u, f as p, h as S, S as c, V as g, c as b, b as v, a as d, t as m, g as T, q as R, v as P, o as F, n as y, r as C, i as E, s as f, m as M, j as O, l as x, k as V, u as B, e as h } from "./builder-3Bc2PfP9.js";
+import { E as k, l as w, F as A, k as I, P as q, c as G, j as N, m as W, t as _, g as z, b as D, h as H, a as J, i as K, u as L, e as Q, f as U, d as X } from "./mount-D59e1COl.js";
+import { F as Z, b as $ } from "./FineGrain-BEvB51B2.js";
 export {
   a as ComputedSignal,
   k as Easing,

package/dist/{index-Dj85aIkg.js → index-BObp1JkM.js}

@@ -1,10 +1,10 @@
 "use client";
-var p = Object.defineProperty;
-var m = (i, e, t) => e in i ? p(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var o = (i, e, t) => m(i, typeof e != "symbol" ? e + "" : e, t);
-import s from "react";
-import { w as c, x as f } from "./builder-KX69ixME.js";
-import { F as g } from "./FineGrain-uhDvqyeZ.js";
+var m = Object.defineProperty;
+var p = (i, e, t) => e in i ? m(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var o = (i, e, t) => p(i, typeof e != "symbol" ? e + "" : e, t);
+import h from "react";
+import { w as c, x as f } from "./builder-3Bc2PfP9.js";
+import { F as g } from "./FineGrain-BEvB51B2.js";
 const y = {
   h1: { fontSize: "2.25rem", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.2 },
   h2: { fontSize: "1.875rem", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.25 },
@@ -17,10 +17,17 @@ const y = {
   label: { fontSize: "0.875rem", fontWeight: 500, lineHeight: 1.4 }
 };
 function r(i, e) {
-  return { margin: 0, ...y[i], ...e };
+  return {
+    margin: 0,
+    overflowWrap: "anywhere",
+    wordBreak: "break-word",
+    maxWidth: "100%",
+    ...y[i],
+    ...e
+  };
 }
-const u = s.memo((i) => {
-  const { text: e, type: t, className: h, style: n, ...a } = i, l = {
+const u = h.memo((i) => {
+  const { text: e, type: t, className: n, style: s, ...a } = i, l = {
     h1: "h1",
     h2: "h2",
     h3: "h3",
@@ -31,11 +38,11 @@ const u = s.memo((i) => {
     caption: "span",
     label: "label"
   };
-  return s.createElement(
+  return h.createElement(
     l[t],
     {
-      className: `fibo-text fibo-text-${t} ${h}`,
-      style: r(t, n),
+      className: `fibo-text fibo-text-${t} min-w-0 ${n}`,
+      style: r(t, s),
       ...a
     },
     e
@@ -79,26 +86,26 @@ class x extends f {
       label: "label"
     };
     if (typeof this._text == "function") {
-      const n = this._text;
-      return s.createElement(g, {
-        compute: n,
+      const s = this._text;
+      return h.createElement(g, {
+        compute: s,
         as: t[this._type],
-        className: `fibo-text fibo-text-${this._type} ${this.getClassName()}`,
+        className: `fibo-text fibo-text-${this._type} min-w-0 ${this.getClassName()}`,
         style: r(this._type, this.getStyle()),
         ...this._props
       });
     }
-    const h = {
+    const n = {
       text: this._text,
       type: this._type,
       className: this.getClassName(),
       style: this.getStyle(),
       ...this._props
     };
-    return s.createElement(u, h);
+    return h.createElement(u, n);
   }
 }
-const z = c(x);
+const W = c(x);
 export {
-  z as T
+  W as T
 };

package/dist/{index-hNxXTy6z.js → index-BlciuWzU.js}

@@ -1,6 +1,6 @@
 "use client";
 import o from "react";
-import { w as n, x as i } from "./builder-KX69ixME.js";
+import { w as l, x as i } from "./builder-3Bc2PfP9.js";
 const a = o.memo((r) => {
   const { className: c, style: e, children: s, ...t } = r;
   return o.createElement(
@@ -17,17 +17,18 @@ class m extends i {
   build() {
     const e = [
       "fibo-box",
+      "min-w-0",
       ...this._classNames
-    ].filter(Boolean).join(" "), s = this.getStyle(), t = this.processChildren(), l = {
+    ].filter(Boolean).join(" "), s = this.getStyle(), t = this.processChildren(), n = {
       className: e,
       style: s,
       children: t,
       ...this._props
     };
-    return o.createElement(a, l);
+    return o.createElement(a, n);
   }
 }
-const B = n(m);
+const B = l(m);
 export {
   B
 };

package/dist/{index-CgPc0zLh.js → index-CZQ5erLU.js}

@@ -3,7 +3,7 @@ var m = Object.defineProperty;
 var p = (e, t, s) => t in e ? m(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
 var r = (e, t, s) => p(e, typeof t != "symbol" ? t + "" : t, s);
 import o from "react";
-import { w as a, x as u } from "./builder-KX69ixME.js";
+import { w as a, x as u } from "./builder-3Bc2PfP9.js";
 class g extends u {
   constructor() {
     super(...arguments);
@@ -40,7 +40,8 @@ class g extends u {
       "fibo-row",
       "flex",
       "flex-row",
-      this.isHug() ? "w-auto self-auto shrink-0" : "w-full self-stretch",
+      // min-w-0: flex item can shrink below content intrinsic width (grid/flex overflow)
+      this.isHug() ? "w-auto self-auto shrink-0" : "w-full min-w-0 self-stretch",
       s[this._mainAxisAlignment],
       i[this._crossAxisAlignment],
       ...this._classNames

package/dist/{index-Cud42ieq.js → index-Cae2Rtx1.js}

@@ -3,7 +3,7 @@ var H = Object.defineProperty;
 var O = (c, l, e) => l in c ? H(c, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[l] = e;
 var r = (c, l, e) => O(c, typeof l != "symbol" ? l + "" : l, e);
 import t, { useState as M, useEffect as j, useRef as F } from "react";
-import { w as $, x as D, S as P } from "./builder-KX69ixME.js";
+import { w as $, x as D, S as P } from "./builder-3Bc2PfP9.js";
 import { t as L } from "./bundle-mjs-wppB-TKB.js";
 const q = t.memo((c) => {
   const {

package/dist/{index-D7exw6yn.js → index-CxbrZGXa.js}

@@ -3,10 +3,10 @@ var oe = Object.defineProperty;
 var le = (n, s, e) => s in n ? oe(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
 var i = (n, s, e) => le(n, typeof s != "symbol" ? s + "" : s, e);
 import t, { useState as D, useRef as L, useLayoutEffect as Z, useEffect as ce } from "react";
-import { w, x as I, G as T, H as q } from "./builder-KX69ixME.js";
-import { B as C } from "./index-hNxXTy6z.js";
+import { w, x as I, G as T, H as q } from "./builder-3Bc2PfP9.js";
+import { B as C } from "./index-BlciuWzU.js";
 import { t as de } from "./bundle-mjs-wppB-TKB.js";
-import { T as me } from "./index-Dj85aIkg.js";
+import { T as me } from "./index-BObp1JkM.js";
 const he = t.memo((n) => {
   const { text: s, subtitle: e, number: r, color: d, className: p, style: c, children: u, ...g } = n;
   return t.createElement(

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

@@ -3,12 +3,12 @@ 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 p, x as _, I as J, G as F, P as K } from "./builder-KX69ixME.js";
+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-CgPc0zLh.js";
-import { T as ee } from "./index-Dj85aIkg.js";
+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 _ {
+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 Ie = 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 Se = 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");
@@ -222,7 +223,7 @@ class ae extends _ {
   }
   build() {
     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), b = d && ((E = t.sidebarRight) == null ? void 0 : E.fullHeight), B = i.createElement(
+    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",
@@ -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: {
@@ -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" }
     }, [
@@ -350,10 +351,10 @@ class ae extends _ {
       children: u,
       overlays: x
     };
-    return i.createElement(oe, v);
+    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,8 +407,8 @@ 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) ?? "", b = e ? 80 : s, w = W.getInstance().getSidebarItems().map((u, k) => {
+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}`,
@@ -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,7 +458,7 @@ class fe extends _ {
     return i.createElement(de, e);
   }
 }
-const Re = p(fe), ue = i.memo((n) => {
+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,7 +510,7 @@ const Re = p(fe), ue = i.memo((n) => {
     )
   );
 });
-class me extends _ {
+class me extends b {
   constructor() {
     super(...arguments);
     r(this, "_sidebar");
@@ -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,7 +666,7 @@ const je = p(_e), be = i.memo((n) => {
     containerHeight: c = 500,
     className: d,
     style: f
-  } = n, [b, 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) => {
+  } = 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;
@@ -665,14 +689,14 @@ const je = p(_e), be = i.memo((n) => {
       C(g) < l ? a = g + 1 : m = g;
     }
     return Math.max(0, a - 1);
-  })(b) - h);
+  })(p) - h);
   let E;
   if (v) {
     const l = Math.ceil(c / e);
     E = Math.min(x, y + l + h * 2);
   } else {
     let l = C(y), a = y;
-    for (; l < b + c + h * t && a < x; )
+    for (; l < p + c + h * t && a < x; )
       l += N(a), a++;
     E = Math.min(x, a);
   }
@@ -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 a,
-  Se as b,
-  ze as c,
-  Re as d,
-  je as e
+  Ie as C,
+  Ae as D,
+  Re as H,
+  je as L,
+  ze as S,
+  Pe as V,
+  Oe as Z,
+  Se as a,
+  He as b,
+  Le as c,
+  $e as d,
+  Me as e
 };

package/dist/{index-B7jJYOv5.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 { w as C, x as F } from "./builder-KX69ixME.js";
-import { B as j } from "./index-hNxXTy6z.js";
-import { T as O } from "./index-Dj85aIkg.js";
-import { R as J } from "./index-CgPc0zLh.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

@@ -11358,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 & {