fiboui 2.0.0 → 2.2.0

package/README.md

@@ -1,8 +1,8 @@
-# FiboUI v2.0.0
+# FiboUI v2.2.0
 
 **A Flutter & SwiftUI-inspired React UI framework featuring a fluent builder API and fine-grained reactivity.**
 
-FiboUI brings chainable builders to React. Compose screens with `Column()`, `Row()`, `Button()`, and `signal()` — builders passed to `.children()` are finalized automatically.
+FiboUI brings chainable builders to React. Compose screens with `Column()`, `Row()`, `Button()`, and `signal()`. Builders **are** React elements — return them from functions and skip `.build()`. Prefer the fluent API (no JSX tags).
 
 ---
 
@@ -13,6 +13,8 @@ FiboUI brings chainable builders to React. Compose screens with `Column()`, `Row
 - **Fine-grained reactivity** — `signal()`, `computed()`, `createStore()`, `.bindSignal()`, `.observer()`.
 - **Multi-theme** — Material, Cupertino, and Web tokens with CSS variables.
 - **Type-safe** — TypeScript builders; `FiboChild` / `FiboChildren` describe child slots.
+- **Media queries** — `Box().padding(8).md({ padding: 16 }).lg({ padding: 24 })` compiles to CSS `@media`. `.responsive({ mobile, tablet, desktop })` still works (JS).
+- **CSS motion & scroll** — `Box().animate('fadeIn').ease('spring')`, `.onScroll('fadeIn')`, `.stagger(80)`, `.scrollProgress()`, `Presence(open).enter('fadeIn').exit('fadeOut')`. Default path is CSS (no rAF). See `docs/guide/animation.md`.
 
 ---
 
@@ -49,26 +51,29 @@ Do not run `npm publish` locally. The `Publish` workflow runs on GitHub Release
 ```tsx
 import { Card, Text } from 'fiboui';
 
-Card()
-  .className('p-8')
-  .style({ backgroundColor: '#111' })
-  .children([Text('Hello')])
-  .build();
+function Hello() {
+  return Card()
+    .className('p-8')
+    .style({ backgroundColor: '#111' })
+    .children([Text('Hello')]);
+}
 ```
 
-### Implicit construction
+### No `.build()`
+
+Builders are valid React elements (`isValidElement(Button('Go'))`). Return them from functions, nest them in `.children()`, or pass them as `React.createElement` arguments. `.build()` still exists and is deprecated.
 
-Builders in `.children()` do not need `.build()`. The event API on `Button` is **`.onPress`** (not `onClick`). `FiboBuilder.onClick` still exists for raw DOM handlers on any builder.
+The event API on `Button` is **`.onPress`** (not `onClick`). `FiboBuilder.onClick` still exists for raw DOM handlers on any builder.
 
 ```tsx
 import { Button, Column, Text } from 'fiboui';
 
-Column()
-  .children([
+function App() {
+  return Column().children([
     Text('Title').variant('h1'),
     Button('Action').onPress(() => undefined),
-  ])
-  .build();
+  ]);
+}
 ```
 
 ---
@@ -77,7 +82,7 @@ Column()
 
 ### Signals
 
-`.bindSignal(sig)` subscribes the builder and **re-runs `build()`** when the signal changes. Read the signal inside a **function child** (or `Text(() => ...)`) so the new value is picked up. Interpolating `sig.value` into a string at construction time is a one-shot snapshot.
+`.bindSignal(sig)` subscribes the builder and **re-assembles** when the signal changes. Read the signal inside a **function child** (or `Text(() => ...)`) so the new value is picked up. Interpolating `sig.value` into a string at construction time is a one-shot snapshot.
 
 ```tsx
 import { Box, Button, Text, signal } from 'fiboui';
@@ -91,8 +96,7 @@ Box()
     Button('+').onPress(() => {
       count.value += 1;
     }),
-  ])
-  .build();
+  ]);
 ```
 
 `useSignal(count)` and `.observer()` with a function child also work. Signal subscriptions unsubscribe on unmount and are Safe for React 18/19 StrictMode (`useSyncExternalStore`). Signals are in-memory and client-only — do not rely on them during SSR.
@@ -110,8 +114,7 @@ const store = createStore({ theme: 'dark', user: 'John' });
 
 Box()
   .observer()
-  .children(() => Text(store.getState().user))
-  .build();
+  .children(() => Text(store.getState().user));
 ```
 
 ---
@@ -149,8 +152,7 @@ Scaffold()
   .sideBarLeft(
     Sidebar().width(240).children([Text('Home'), Text('Settings')])
   )
-  .children([Text('Welcome to the main content area.')])
-  .build();
+  .children([Text('Welcome to the main content area.')]);
 ```
 
 ---
@@ -206,8 +208,7 @@ export function ShopHeader() {
             ])
           )
         ),
-    ])
-    .build();
+    ]);
 }
 ```
 

package/dist/{FineGrain-kBxv0WeR.js → FineGrain-6w615KQw.js}

@@ -1,11 +1,11 @@
 "use client";
 import s, { useRef as l, useEffect as p } from "react";
-import { i as x, r as m, E } from "./builder-DjLYXkXu.js";
+import { w as x, r as m, E } from "./builder-KLTu7nAI.js";
 function R({
   compute: e,
   as: n = "span",
-  className: i,
-  style: o,
+  className: o,
+  style: i,
   ...u
 }) {
   const r = x(), t = l(null), a = e();
@@ -15,7 +15,7 @@ function R({
       t.current && t.current.textContent !== c && (t.current.textContent = c);
     });
     return () => f.dispose();
-  }), [e, r]), s.createElement(n, { ref: t, className: i, style: o, ...u }, a);
+  }), [e, r]), s.createElement(n, { ref: t, className: o, style: i, ...u }, a);
 }
 function d(e, n) {
   return s.createElement(R, {