sibujs 1.0.0-beta.3 → 1.0.0-beta.4

package/README.md

@@ -710,14 +710,14 @@ Trans("greeting", { name: "Mark" });
 
 ---
 
-## Extras (`sibu/extras`)
+## Patterns (`sibujs/patterns`)
 
-Advanced features, imported separately to keep the core lean.
+Advanced state management patterns, imported separately to keep the core lean.
 
 ### State Machines
 
 ```ts
-import { machine } from "sibujs/extras";
+import { machine } from "sibujs/patterns";
 
 const { state, send, matches, can } = machine({
   initial: "idle",
@@ -749,7 +749,7 @@ can("RETRY");       // false (not in error state)
 ### Form Validation
 
 ```ts
-import { form, required, email, minLength } from "sibujs/extras";
+import { form, required, email, minLength } from "sibujs/ui";
 
 const form = form({
   fields: {
@@ -772,7 +772,7 @@ form.handleSubmit();
 ### Global Store
 
 ```ts
-import { globalStore } from "sibujs/extras";
+import { globalStore } from "sibujs/patterns";
 
 const store = globalStore({
   state: { count: 0, user: null },
@@ -791,7 +791,7 @@ count(); // 1
 ### Persistent State
 
 ```ts
-import { persisted } from "sibujs/extras";
+import { persisted } from "sibujs/patterns";
 
 // Auto-saves to localStorage, restores on page load
 const [theme, setTheme] = persisted("app-theme", "light");
@@ -801,7 +801,7 @@ setTheme("dark"); // saved to localStorage automatically
 ### Time Travel
 
 ```ts
-import { timeline } from "sibujs/extras";
+import { timeline } from "sibujs/patterns";
 
 const { value, set, undo, redo, canUndo, canRedo } = timeline("initial");
 set("second");
@@ -813,7 +813,7 @@ redo(); // value() === "third"
 ### Optimistic Updates
 
 ```ts
-import { optimistic } from "sibujs/extras";
+import { optimistic } from "sibujs/patterns";
 
 const [likes, addLike] = optimistic(0);
 addLike(likes() + 1, async () => {
@@ -821,10 +821,10 @@ addLike(likes() + 1, async () => {
 });
 ```
 
-### Data Fetching
+## Data Fetching (`sibujs/data`)
 
 ```ts
-import { query, mutation, infiniteQuery, resource } from "sibujs/extras";
+import { query, mutation, infiniteQuery, resource } from "sibujs/data";
 
 // Query with caching, stale-while-revalidate, and auto-refetch
 const { data, loading, error, refetch } = query("users", async ({ signal }) => {
@@ -836,7 +836,7 @@ const { data, loading, error, refetch } = query("users", async ({ signal }) => {
 });
 
 // Cache management
-import { invalidateQueries, setQueryData } from "sibujs/extras";
+import { invalidateQueries, setQueryData } from "sibujs/data";
 invalidateQueries("users");
 setQueryData("users", (prev) => [...prev, newUser]);
 
@@ -872,7 +872,7 @@ resource.data(); // reactive
 ### Debounce, Throttle, and Previous
 
 ```ts
-import { debounce, throttle, previous } from "sibujs/extras";
+import { debounce, throttle, previous } from "sibujs/data";
 
 // Debounced reactive value (updates after 300ms of inactivity)
 const debouncedSearch = debounce(() => searchInput(), 300);
@@ -885,7 +885,7 @@ const prevCount = previous(count);
 // prevCount() is the value before the last change
 ```
 
-### Browser APIs
+## Browser APIs (`sibujs/browser`)
 
 All browser APIs return reactive getters and a `dispose` function for cleanup.
 
@@ -904,7 +904,7 @@ import {
   battery,
   idle,
   permissions,
-} from "sibujs/extras";
+} from "sibujs/browser";
 
 // Media queries
 const { matches: isMobile } = media("(max-width: 768px)");
@@ -952,7 +952,8 @@ const { state: cameraPermission } = permissions("camera");
 ### Real-Time Communication
 
 ```ts
-import { socket, stream, eventBus } from "sibujs/extras";
+import { socket, stream } from "sibujs/data";
+import { eventBus } from "sibujs/ui";
 
 // WebSocket with auto-reconnect and heartbeat
 const { data, status, send, close } = socket("wss://api.example.com/ws", {
@@ -976,11 +977,13 @@ bus.emit("notify", "Hello!");
 off(); // unsubscribe
 ```
 
+## UI Utilities (`sibujs/ui`)
+
 ### Virtual List
 
 ```ts
 import { html, signal } from "sibujs";
-import { VirtualList } from "sibujs/extras";
+import { VirtualList } from "sibujs/ui";
 
 VirtualList({
   items: () => largeArray(),
@@ -991,10 +994,10 @@ VirtualList({
 });
 ```
 
-### Transitions and Animations
+## Transitions and Animations (`sibujs/motion`)
 
 ```ts
-import { transition, TransitionGroup, viewTransition } from "sibujs/extras";
+import { transition, TransitionGroup, viewTransition } from "sibujs/motion";
 
 // Single element transition
 const { enter, leave } = transition(element, {
@@ -1023,7 +1026,7 @@ await start();
 ### Dialogs and Toasts
 
 ```ts
-import { dialog, toast } from "sibujs/extras";
+import { dialog, toast } from "sibujs/ui";
 
 // Dialog state
 const dialog = dialog();
@@ -1043,7 +1046,7 @@ dismiss(id);
 ### Pagination and Infinite Scroll
 
 ```ts
-import { pagination, infiniteScroll } from "sibujs/extras";
+import { pagination, infiniteScroll } from "sibujs/ui";
 
 // Pagination
 const { page, totalPages, next, prev, goTo, startIndex, endIndex } = pagination({
@@ -1062,7 +1065,7 @@ const { sentinelRef, loading } = infiniteScroll({
 ### Intersection Observer and Lazy Loading
 
 ```ts
-import { intersection, lazyLoad } from "sibujs/extras";
+import { intersection, lazyLoad } from "sibujs/ui";
 
 // Track element visibility
 const { isIntersecting, intersectionRatio, observe } = intersection({
@@ -1079,7 +1082,7 @@ const cleanup = lazyLoad(placeholder, () => {
 ### Input Masks
 
 ```ts
-import { inputMask, phoneMask, dateMask, creditCardMask } from "sibujs/extras";
+import { inputMask, phoneMask, dateMask, creditCardMask } from "sibujs/ui";
 
 const phone = inputMask(phoneMask());     // (999) 999-9999
 const date = inputMask(dateMask());       // 99/99/9999
@@ -1094,7 +1097,7 @@ phone.rawValue(); // unformatted: "5551234567"
 
 ```ts
 import { html } from "sibujs";
-import { aria, FocusTrap, hotkey, announce } from "sibujs/extras";
+import { aria, FocusTrap, hotkey, announce } from "sibujs/ui";
 
 // Reactive ARIA attributes
 aria(element, {
@@ -1116,7 +1119,7 @@ announce("Item deleted", "polite");
 
 ```ts
 import { html } from "sibujs";
-import { scopedStyle, withScopedStyle } from "sibujs/extras";
+import { scopedStyle, withScopedStyle } from "sibujs/ui";
 
 // Manual scoping
 const { scope, attr } = scopedStyle(`
@@ -1133,7 +1136,7 @@ const StyledCard = withScopedStyle(`
 ### Higher-Order Components
 
 ```ts
-import { withDefaults, withWrapper, compose } from "sibujs/extras";
+import { withDefaults, withWrapper, compose } from "sibujs/patterns";
 
 const Button = withDefaults(BaseButton, { variant: "primary", size: "md" });
 
@@ -1149,7 +1152,7 @@ const EnhancedButton = compose(withLogging, withTheme, withTooltip)(BaseButton);
 
 ```ts
 import { html, signal } from "sibujs";
-import { composable } from "sibujs/extras";
+import { composable } from "sibujs/ui";
 
 const counterSetup = composable(() => {
   const [count, setCount] = signal(0);
@@ -1165,14 +1168,14 @@ function MyComponent() {
 
 ---
 
-## Widgets (`sibu/extras`)
+## Widgets (`sibujs/widgets`)
 
 Headless UI primitives -- state logic and keyboard navigation without opinions on markup. Build your own UI on top.
 
 ### Tabs
 
 ```ts
-import { tabs } from "sibujs/extras";
+import { tabs } from "sibujs/widgets";
 
 const tabs = tabs({
   tabs: [
@@ -1192,7 +1195,7 @@ tabs.prevTab();
 ### Select
 
 ```ts
-import { select } from "sibujs/extras";
+import { select } from "sibujs/widgets";
 
 const select = select({
   items: ["Apple", "Banana", "Cherry"],
@@ -1209,7 +1212,7 @@ select.isSelected("Apple"); // true
 ### Accordion
 
 ```ts
-import { accordion } from "sibujs/extras";
+import { accordion } from "sibujs/widgets";
 
 const accordion = accordion({
   items: [
@@ -1228,7 +1231,7 @@ accordion.collapseAll();
 ### Combobox
 
 ```ts
-import { combobox } from "sibujs/extras";
+import { combobox } from "sibujs/widgets";
 
 const combo = combobox({
   items: ["New York", "Los Angeles", "Chicago", "Houston"],
@@ -1244,7 +1247,7 @@ combo.selectedItem();        // "Chicago"
 ### Popover and Tooltip
 
 ```ts
-import { popover, tooltip } from "sibujs/extras";
+import { popover, tooltip } from "sibujs/widgets";
 
 const popover = popover();
 popover.toggle();
@@ -1259,7 +1262,7 @@ tooltip.isVisible(); // true (after 200ms delay)
 ### File Upload
 
 ```ts
-import { fileUpload } from "sibujs/extras";
+import { fileUpload } from "sibujs/widgets";
 
 const upload = fileUpload({
   accept: "image/*",
@@ -1277,7 +1280,7 @@ upload.clear();
 ### Date Picker
 
 ```ts
-import { datePicker } from "sibujs/extras";
+import { datePicker } from "sibujs/widgets";
 
 const picker = datePicker({
   minDate: new Date(2020, 0, 1),
@@ -1293,7 +1296,7 @@ picker.selectedDate(); // Date
 ### Content Editable
 
 ```ts
-import { contentEditable } from "sibujs/extras";
+import { contentEditable } from "sibujs/widgets";
 
 const editor = contentEditable();
 editor.setContent("<b>Hello</b> world");
@@ -1305,11 +1308,11 @@ editor.content();   // reactive HTML string
 
 ---
 
-## Web Components (`sibu/extras`)
+## Web Components (`sibujs/ui`)
 
 ```ts
 import { html, signal } from "sibujs";
-import { defineElement } from "sibujs/extras";
+import { defineElement } from "sibujs/ui";
 
 defineElement("my-counter", (props) => {
   const [count, setCount] = signal(Number(props.initial) || 0);
@@ -1326,7 +1329,7 @@ defineElement("my-counter", (props) => {
 
 ---
 
-## SSR and Static Generation (`sibu/extras`)
+## SSR and Static Generation (`sibujs/ssr`)
 
 ### Server-Side Rendering
 
@@ -1336,7 +1339,7 @@ import {
   renderToStream,
   renderToDocument,
   hydrate,
-} from "sibujs/extras";
+} from "sibujs/ssr";
 
 // Render component to HTML string
 const markup = renderToString(App());
@@ -1361,7 +1364,7 @@ hydrate(App, document.getElementById("root"));
 ### Islands Architecture
 
 ```ts
-import { island, hydrateIslands, hydrateProgressively } from "sibujs/extras";
+import { island, hydrateIslands, hydrateProgressively } from "sibujs/ssr";
 
 // Server: mark interactive islands
 const header = island("header", () => InteractiveHeader());
@@ -1380,7 +1383,7 @@ hydrateProgressively(document.body, islands, { threshold: 0.1 });
 
 ```ts
 import { html } from "sibujs";
-import { ssrSuspense, renderToSuspenseStream, suspenseSwapScript } from "sibujs/extras";
+import { ssrSuspense, renderToSuspenseStream, suspenseSwapScript } from "sibujs/ssr";
 
 const boundary = ssrSuspense({
   fallback: () => html`<div>Loading...</div>`,
@@ -1394,7 +1397,7 @@ const stream = renderToSuspenseStream(shell, [boundary.promise]);
 ### Static Site Generation
 
 ```ts
-import { generateStaticSite } from "sibujs/extras";
+import { generateStaticSite } from "sibujs/ssr";
 
 const result = await generateStaticSite({
   routes: ["/", "/about", "/blog/1", "/blog/2"],
@@ -1408,7 +1411,7 @@ result.errors; // [{ path: "/blog/2", error: Error }]
 
 ---
 
-## Concurrent Rendering (`sibu/extras`)
+## Concurrent Rendering (`sibujs/performance`)
 
 ```ts
 import {
@@ -1420,7 +1423,7 @@ import {
   yieldToMain,
   processInChunks,
   Priority,
-} from "sibujs/extras";
+} from "sibujs/performance";
 
 // Non-blocking state updates
 startTransition(() => {
@@ -1450,7 +1453,7 @@ await processInChunks(bigArray, (item) => processItem(item), 50);
 
 ---
 
-## DevTools (`sibu/extras`)
+## DevTools (`sibujs/devtools`)
 
 ### Debugging and Performance
 
@@ -1462,7 +1465,7 @@ import {
   measureRender,
   getPerformanceReport,
   checkLeaks,
-} from "sibujs/extras";
+} from "sibujs/devtools";
 
 enableDebug();
 debugLog("Counter", "increment", { value: 5 });
@@ -1488,7 +1491,7 @@ checkLeaks(); // { "Counter": 2 } -- 2 unclean instances
 ### DevTools Integration
 
 ```ts
-import { initDevTools, devState, getActiveDevTools } from "sibujs/extras";
+import { initDevTools, devState, getActiveDevTools } from "sibujs/devtools";
 
 const devtools = initDevTools({ maxEvents: 1000 });
 
@@ -1509,7 +1512,7 @@ devtools.snapshot();
 ### Hot Module Replacement
 
 ```ts
-import { hmrState, registerHMR, createHMRBoundary } from "sibujs/extras";
+import { hmrState, registerHMR, createHMRBoundary } from "sibujs/devtools";
 
 // State that persists across HMR updates
 const [count, setCount] = hmrState("counter", 0);
@@ -1525,12 +1528,12 @@ boundary.accept(() => console.log("Module updated"));
 
 ---
 
-## Ecosystem Adapters (`sibu/extras`)
+## Ecosystem Adapters (`sibujs/ecosystem`)
 
 ### State Management
 
 ```ts
-import { reduxAdapter, zustandAdapter, mobXAdapter } from "sibujs/extras";
+import { reduxAdapter, zustandAdapter, mobXAdapter } from "sibujs/ecosystem";
 
 // Use Redux store with Sibu reactivity
 const { useSelector, dispatch } = reduxAdapter(reduxStore);
@@ -1546,7 +1549,7 @@ const { useObservable } = mobXAdapter();
 ### UI Framework Integration
 
 ```ts
-import { componentAdapter, createTheme } from "sibujs/extras";
+import { componentAdapter, createTheme } from "sibujs/ecosystem";
 
 const adapter = componentAdapter();
 const theme = createTheme({ colors: { primary: "#007bff" } });
@@ -1592,15 +1595,20 @@ unmount();
 Sibu is split into modular entry points. Import only what you use.
 
 ```
-sibujs              Core: signal, effect, derived, mount, each, when, html, tags, ErrorBoundary
-sibujs/data         Data fetching: query, mutation, infiniteQuery, socket, stream
-sibujs/browser      Browser APIs: media, geo, resize, scroll, online, battery, ...
-sibujs/patterns     State patterns: machine, persisted, timeline, optimistic, store
-sibujs/motion       Transitions: transition, spring, viewTransition, reducedMotion
-sibujs/ui           Forms, a11y, dialogs, toasts, virtual lists, composables, web components
-sibujs/plugins      Router, i18n
-sibujs/build        Vite plugin, Webpack plugin, CDN utilities, template compiler
-sibujs/testing      Component testing utilities
+sibujs                Core: signal, effect, derived, mount, each, when, html, tags, ErrorBoundary
+sibujs/plugins        Router, i18n
+sibujs/data           Data fetching: query, mutation, infiniteQuery, socket, stream
+sibujs/browser        Browser APIs: media, geo, resize, scroll, online, battery, ...
+sibujs/patterns       State patterns: machine, persisted, timeline, optimistic, globalStore
+sibujs/motion         Transitions: transition, TransitionGroup, viewTransition, reducedMotion
+sibujs/ui             Forms, a11y, dialogs, toasts, virtual lists, composables, web components
+sibujs/widgets        Headless UI: tabs, select, accordion, combobox, popover, datePicker, ...
+sibujs/ssr            SSR, hydration, islands, static site generation
+sibujs/performance    Concurrent rendering, scheduling, DOM recycling, chunk loading
+sibujs/devtools       Debugging, profiling, HMR, component introspection
+sibujs/ecosystem      Adapters: Redux, MobX, Zustand, Material UI, Chakra, Ant Design
+sibujs/build          Vite plugin, Webpack plugin, template compiler, CDN utilities
+sibujs/testing        Component testing utilities
 ```
 
 The core has zero dependencies beyond TypeScript. Tree shaking works at the module level -- unused subpaths are not included in your bundle.
@@ -1636,4 +1644,4 @@ before submitting a PR.
 
 ## License
 
-MIT -- (c) 2025 [hexplus](https://github.com/hexplus)
+MIT -- (c) 2025-2026 [hexplus](https://github.com/hexplus)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sibujs",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "A lightweight, function-based frontend framework that combines the best of React, Svelte, and Vue — with zero VDOM and maximum simplicity. Designed for developers who want fine-grained reactivity and full control without compilation or magic.",
   "keywords": [
     "frontend",