fiboui 2.4.4 → 2.6.0

package/README.md

@@ -1,61 +1,61 @@
 <div align="center">
 
-```
- ███████╗██╗██████╗  ██████╗ ██╗   ██╗██╗
- ██╔════╝██║██╔══██╗██╔═══██╗██║   ██║██║
- █████╗  ██║██████╔╝██║   ██║██║   ██║██║
- ██╔══╝  ██║██╔══██╗██║   ██║██║   ██║██║
- ██║     ██║██████╔╝╚██████╔╝╚██████╔╝██║
- ╚═╝     ╚═╝╚═════╝  ╚═════╝  ╚═════╝ ╚═╝
-```
+<img src="./docs/brand/logo.svg" width="88" alt="FiboUI logo" />
 
 # FiboUI
 
-**Fluent React UI.** Flutter & SwiftUI energy — chainable builders, signals, themes.
-
-Builders **are** React elements. Return them from functions. Skip `.build()`. Prefer the fluent API — no JSX tags.
+**Fluent React UI.** Flutter & SwiftUI energy for the web.  
+There is no JSX — the function return **is** the view.
 
 <br />
 
-[![npm](https://img.shields.io/npm/v/fiboui?style=flat-square&color=ff2d8a)](https://www.npmjs.com/package/fiboui)
-[![license](https://img.shields.io/npm/l/fiboui?style=flat-square)](./LICENSE)
-[![site](https://img.shields.io/badge/site-fiboui.vercel.app-0a0a0a?style=flat-square)](https://fiboui.vercel.app)
-[![store](https://img.shields.io/badge/demo-fiboui--store-c8ff00?style=flat-square&labelColor=0a0a0a)](https://fiboui-store.vercel.app)
+[![npm](https://img.shields.io/npm/v/fiboui?style=for-the-badge&color=ff2d8a&labelColor=0a0a0a)](https://www.npmjs.com/package/fiboui)
+[![downloads](https://img.shields.io/npm/dm/fiboui?style=for-the-badge&color=c8ff00&labelColor=0a0a0a)](https://www.npmjs.com/package/fiboui)
+[![license](https://img.shields.io/badge/license-MIT-0a0a0a?style=for-the-badge&labelColor=0a0a0a&color=ffffff)](https://github.com/felipeoliveiradev/fiboui)
+[![site](https://img.shields.io/badge/site-fiboui.vercel.app-0a0a0a?style=for-the-badge&labelColor=ff2d8a&color=0a0a0a)](https://fiboui.vercel.app)
 
-**Live**
-[`fiboui.vercel.app`](https://fiboui.vercel.app)
-·
-**Store demo**
-[`fiboui-store.vercel.app`](https://fiboui-store.vercel.app)
-·
-**npm**
-[`fiboui`](https://www.npmjs.com/package/fiboui)
+<br />
 
-```bash
-npm install fiboui
-```
+<img src="./docs/brand/banner.png" width="960" alt="FiboUI — Fluent React UI. There is no JSX." />
 
 </div>
 
 ---
 
-## Why FiboUI
+<div align="center">
 
-| | |
-| :--- | :--- |
-| **Assembly pattern** | Factories return builders for endless chaining |
-| **Zero-build children** | Pass builders to `.children()` — they finalize implicitly |
-| **Signals** | `signal()`, `computed()`, `.bindSignal()`, `.observer()` |
-| **Themes** | `.theme("noir")` · `extendTheme` · Material / Cupertino / Web / Noir |
-| **Motion** | `.animate('fadeIn')` · `.onScroll` · `.hoverEffect` · CSS-first |
-| **Type-safe** | TypeScript builders · `FiboChild` / `FiboChildren` |
+### Live product
+
+| Marketing site | Store demo |
+| :---: | :---: |
+| [![FiboUI site](./docs/brand/site-hero.png)](https://fiboui.vercel.app) | [![Fibo Store](./docs/brand/store-hero.png)](https://fiboui-store.vercel.app) |
+| [**fiboui.vercel.app**](https://fiboui.vercel.app) | [**fiboui-store.vercel.app**](https://fiboui-store.vercel.app) |
+
+Both ships are built **only** with FiboUI fluent builders — no JSX in the product UI.
+
+</div>
 
 ---
 
-## Quick start
+## Cursor / VS Code extension
+
+Fluent trees get Flutter-style **closing labels** (`// Column`, `// List`, `// Form`), **auto-indent** on Enter, **lineage guides** on `.children([…])`, snippets (`fcol`, `frow`, …), chain autocomplete, and the **FiboUI Noir** colour theme.
+
+```bash
+ln -sfn "$(pwd)/extensions/vscode-fiboui" \
+  "$HOME/.cursor/extensions/felipeoliveiradev.fiboui-0.1.0"
+```
+
+Reload the window, then pick theme **FiboUI Noir**. Details: [`extensions/vscode-fiboui/README.md`](./extensions/vscode-fiboui/README.md).
+
+## Install
+
+```bash
+npm install fiboui
+```
 
 ```tsx
-import 'fiboui/style.css'
+import 'fiboui/style.css' // required once — JS does not load CSS
 import { Button, Column, Text, mount } from 'fiboui'
 
 function App() {
@@ -71,33 +71,59 @@ function App() {
 mount('#root', App)
 ```
 
-**Required:** import `'fiboui/style.css'` once — the JS entry does not load CSS.  
-ESM-only (`import`, no `require`). Peer deps: **React 18 or 19**.
+ESM-only · React **18 / 19** · Next App Router → `'use client'` on files that call builders.
+
+---
 
-Next.js App Router: files that **call** builders must be Client Components (`'use client'`).
+## JSX vs FiboUI
+
+```tsx
+// ── JSX ──────────────────────────────────
+<div className="flex flex-col gap-3 p-6">
+  <h1>Hello</h1>
+  <button onClick={onShip}>Ship it</button>
+</div>
+
+// ── FiboUI ───────────────────────────────
+Column()
+  .gap(12)
+  .padding(24)
+  .children([
+    Text('Hello').variant('h1'),
+    Button('Ship it').onPress(onShip),
+  ])
+```
+
+Same tree. Method calls instead of tags. Layout, theme, motion, and reactivity stay on the builder.
 
 ---
 
-## Taste of the API
+## Runtime flow
 
-### Builders (no `.build()`)
+<img src="./docs/brand/flow-runtime.png" width="960" alt="Factory → fluent chain → children → React element → mount" />
 
-```tsx
-import { Card, Text } from 'fiboui'
+```mermaid
+flowchart LR
+  A["Column()"] --> B[".gap().padding()"]
+  B --> C[".children([...])"]
+  C --> D["React element"]
+  D --> E["mount / return"]
 
-function Hello() {
-  return Card()
-    .padding(32)
-    .bg('#111')
-    .children([Text('Hello').variant('h2')])
-}
+  style A fill:#141414,stroke:#fff,color:#fff
+  style B fill:#141414,stroke:#ff2d8a,color:#ff2d8a
+  style C fill:#141414,stroke:#c8ff00,color:#c8ff00
+  style D fill:#141414,stroke:#fff,color:#fff
+  style E fill:#c8ff00,stroke:#c8ff00,color:#0a0a0a
 ```
 
-`Button` uses **`.onPress`** (not `onClick`).
+Builders **are** valid React elements (`isValidElement(Button('Go'))`).  
+Return them. Nest them. **Skip `.build()`.**
 
-### Signals
+---
+
+## Signal flow
 
-`.bindSignal(sig)` re-assembles when the signal changes. Read values inside a **function child**:
+<img src="./docs/brand/flow-signals.png" width="960" alt="signal → bindSignal → function children → UI" />
 
 ```tsx
 import { Box, Button, Text, signal } from 'fiboui'
@@ -114,6 +140,61 @@ Box()
   ])
 ```
 
+`.bindSignal` re-assembles. Read `.value` inside a **function child** so updates are live. `` Text(`Total ${todos.$length}`) `` stays live without a function child. Forms and validation: [Form](docs/components/interactive-form.md).
+
+```mermaid
+sequenceDiagram
+  participant UI as Builder tree
+  participant S as signal(count)
+  participant H as onPress
+
+  UI->>S: .bindSignal(count)
+  H->>S: count.value += 1
+  S-->>UI: notify subscribers
+  UI->>UI: re-assemble children()
+```
+
+---
+
+## Package architecture
+
+<img src="./docs/brand/flow-architecture.png" width="960" alt="App over layout/content/structure/theme/reactivity over core" />
+
+```mermaid
+flowchart TB
+  APP["your app — screens · domain · mount"]
+  subgraph builders["fluent builders"]
+    L["layout / content<br/>Column · Row · Text · Button"]
+    S["structure / nav<br/>Box · Grid · Scaffold"]
+    T["theme / motion<br/>noir · animate · hover"]
+    R["reactivity<br/>signal · computed · store"]
+  end
+  CORE["core — FiboBuilder · styleManager · bindSignal"]
+
+  APP --> L & S & T & R
+  L & S & T & R --> CORE
+
+  style APP fill:#141414,stroke:#c8ff00,color:#c8ff00
+  style CORE fill:#c8ff00,stroke:#c8ff00,color:#0a0a0a
+  style L fill:#141414,stroke:#ff2d8a,color:#ff2d8a
+  style S fill:#141414,stroke:#fff,color:#fff
+  style T fill:#141414,stroke:#fff,color:#fff
+  style R fill:#141414,stroke:#fff,color:#fff
+```
+
+---
+
+## Why FiboUI
+
+| | |
+| :--- | :--- |
+| **Assembly pattern** | Factories return builders for endless chaining |
+| **Zero-build children** | Pass builders to `.children()` — they finalize implicitly |
+| **Signals** | `signal()`, `computed()`, `.bindSignal()`, `.observer()` |
+| **Themes** | `.theme("noir")` · `extendTheme` · Material / Cupertino / Web / Noir |
+| **Motion** | `.animate('fadeIn')` · `.onScroll` · `.hoverEffect` · CSS-first |
+| **Type-safe** | TypeScript builders · `FiboChild` / `FiboChildren` |
+
 ### Themes & motion
 
 ```tsx
@@ -122,17 +203,11 @@ Box()
   .animate('fadeIn')
   .ease('spring')
   .hover((h) => h.effect('sweepToRight'))
-```
 
-Responsive:
-
-```tsx
 Box().padding(8).md({ padding: 16 }).lg({ padding: 24 })
 ```
 
----
-
-## Layout notes
+### Layout notes
 
 FiboUI **2.x** matches Flutter / SwiftUI: `Column` defaults to `crossAxisAlignment('center')`.  
 `Row` uses `align-self: stretch` so `spaceBetween` still fills width.
@@ -141,26 +216,41 @@ FiboUI **2.x** matches Flutter / SwiftUI: `Column` defaults to `crossAxisAlignme
 Column().crossAxisAlignment('stretch')
 ```
 
-`Scaffold` uses `headerBar`, `footerBar`, `sideBarLeft`, `sideBarRight`.
+`Button` uses **`.onPress`** (not `onClick`).
 
 ---
 
-## Live demos
+## Brand
 
-| | |
-| :--- | :--- |
-| **[fiboui.vercel.app](https://fiboui.vercel.app)** | Marketing site — builders, signals, theme, motion, media |
-| **[fiboui-store.vercel.app](https://fiboui-store.vercel.app)** | Full retail demo — catalog → bag → checkout |
+<div align="center">
 
-Both are built **only** with FiboUI fluent builders.
+<img src="./docs/brand/logo-lockup.svg" width="280" alt="FiboUI lockup" />
+
+<br /><br />
+
+| Token | Hex | |
+| :---: | :---: | :--- |
+| **Ink** | `#0a0a0a` | background |
+| **Chalk** | `#ffffff` | type |
+| **Pink** | `#ff2d8a` | energy |
+| **Lime** | `#c8ff00` | mark / CTA |
+
+<img src="./docs/brand/fibonacci.svg" width="220" alt="Fibonacci spiral" />
+
+**Tailored to each request** · **Attention to detail**
+
+</div>
 
 ---
 
 ## Docs & contributing
 
-- Migration from 1.x → [MIGRATION.md](./MIGRATION.md)
-- Contributing & release → [CONTRIBUTING.md](./CONTRIBUTING.md)
-- Animation guide → `docs/guide/animation.md`
+| | |
+| :--- | :--- |
+| Migration from 1.x | [MIGRATION.md](./MIGRATION.md) |
+| Contributing & release | [CONTRIBUTING.md](./CONTRIBUTING.md) |
+| Animation guide | [`docs/guide/animation.md`](./docs/guide/animation.md) |
+| Brand assets | [`docs/brand/`](./docs/brand/) |
 
 Publishing is automated on **`main`** (GitHub Actions + `NPM_TOKEN`). Prefer not to `npm publish` locally.
 
@@ -168,6 +258,10 @@ Publishing is automated on **`main`** (GitHub Actions + `NPM_TOKEN`). Prefer not
 
 <div align="center">
 
+<img src="./docs/brand/logo-mark.svg" width="48" alt="" />
+
+<br /><br />
+
 **Wear the return.**
 
 MIT © 2025–2026 FiboUI

package/dist/Link-dHd4e7BS.js

@@ -0,0 +1,50 @@
+import { jsx as u } from "react/jsx-runtime";
+import { aa as m, as as p, a9 as v } from "./client-C9ZVisXx.js";
+const k = ({
+  to: t,
+  children: c,
+  replace: n = !1,
+  state: e,
+  className: l,
+  style: f,
+  onClick: i
+}) => {
+  const o = m(), a = p(), r = t.startsWith("http") || t.startsWith("//") || t.startsWith("#") ? t : `${(a == null ? void 0 : a.basename) ?? ""}${t}`;
+  return /* @__PURE__ */ u(
+    "a",
+    {
+      href: r,
+      onClick: (s) => {
+        s.ctrlKey || s.metaKey || s.shiftKey || s.button !== 0 || (s.preventDefault(), i && i(s), o(t, { replace: n, state: e }));
+      },
+      className: l,
+      style: f,
+      children: c
+    }
+  );
+}, W = ({
+  to: t,
+  children: c,
+  className: n = "",
+  style: e = {},
+  activeClassName: l = "active",
+  activeStyle: f = {},
+  exact: i = !1,
+  ...o
+}) => {
+  const { currentPath: a } = v(), r = i ? a === t : a.startsWith(t), h = r ? `${n} ${l}`.trim() : n, s = r ? { ...e, ...f } : e;
+  return /* @__PURE__ */ u(
+    k,
+    {
+      to: t,
+      className: h,
+      style: s,
+      ...o,
+      children: c
+    }
+  );
+};
+export {
+  k as L,
+  W as N
+};

package/dist/{PluginManager-D5-ApsSN.js → PluginManager-BRjgOLVa.js}

@@ -1,7 +1,6 @@
-"use client";
 var h = Object.defineProperty;
-var g = (c, t, e) => t in c ? h(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var s = (c, t, e) => g(c, typeof t != "symbol" ? t + "" : t, e);
+var g = (a, t, e) => t in a ? h(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var s = (a, t, e) => g(a, typeof t != "symbol" ? t + "" : t, e);
 const n = class n {
   constructor() {
     s(this, "services", /* @__PURE__ */ new Map());
@@ -49,8 +48,8 @@ const n = class n {
   }
 };
 s(n, "instance");
-let a = n;
-const l = a.getInstance(), i = class i {
+let c = n;
+const f = c.getInstance(), i = class i {
   constructor() {
     s(this, "plugins", /* @__PURE__ */ new Map());
     s(this, "routes", []);
@@ -67,7 +66,7 @@ const l = a.getInstance(), i = class i {
     return this.plugins.has(t.name) ? this : (this.plugins.set(t.name, t), t.setup(this), this);
   }
   registerService(t, e) {
-    l.register(t, e);
+    f.register(t, e);
   }
   registerStore(t, e) {
     const r = e ?? `store-${this.storeSeq++}`;