sibujs 1.0.0-beta.3 → 1.0.0-beta.5

package/README.md

@@ -671,7 +671,7 @@ function App() {
       ${RouterLink({ to: "/", nodes: "Home" })}
       ${RouterLink({ to: "/about", nodes: "About" })}
     </nav>
-    ${route()}
+    ${Route()}
   </div>`;
 }
 
@@ -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,30 +749,28 @@ 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: {
-    username: { initial: "", validators: [required(), minLength(3)] },
-    email: { initial: "", validators: [required(), email()] },
-  },
-  onSubmit: (values) => api.register(values),
+const myForm = form({
+  username: { initial: "", validators: [required(), minLength(3)] },
+  email: { initial: "", validators: [required(), email()] },
 });
 
 // Reactive getters
-form.fields.username.value();
-form.errors.username();
-form.isValid();
-form.isDirty();
+myForm.fields.username.value();
+myForm.fields.username.error();
+myForm.isValid();
+myForm.isDirty();
 
-// Handle submission
-form.handleSubmit();
+// Handle submission (pass callback to handleSubmit)
+const onSubmit = myForm.handleSubmit((values) => api.register(values));
+// Attach to form: on: { submit: onSubmit }
 ```
 
 ### Global Store
 
 ```ts
-import { globalStore } from "sibujs/extras";
+import { globalStore } from "sibujs/patterns";
 
 const store = globalStore({
   state: { count: 0, user: null },
@@ -780,7 +778,7 @@ const store = globalStore({
     increment: (state) => ({ ...state, count: state.count + 1 }),
     setUser: (state, user) => ({ ...state, user }),
   },
-  middleware: [(action, state) => console.log(action, state)],
+  middleware: [(state, action, payload, next) => { console.log(action, state); next(); }],
 });
 
 store.dispatch("increment");
@@ -791,7 +789,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 +799,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 +811,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 +819,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 +834,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 +870,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 +883,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 +902,7 @@ import {
   battery,
   idle,
   permissions,
-} from "sibujs/extras";
+} from "sibujs/browser";
 
 // Media queries
 const { matches: isMobile } = media("(max-width: 768px)");
@@ -952,7 +950,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 +975,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 +992,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 +1024,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 +1044,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 +1063,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 +1080,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 +1095,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 +1117,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 +1134,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 +1150,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 +1166,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 +1193,7 @@ tabs.prevTab();
 ### Select
 
 ```ts
-import { select } from "sibujs/extras";
+import { select } from "sibujs/widgets";
 
 const select = select({
   items: ["Apple", "Banana", "Cherry"],
@@ -1209,7 +1210,7 @@ select.isSelected("Apple"); // true
 ### Accordion
 
 ```ts
-import { accordion } from "sibujs/extras";
+import { accordion } from "sibujs/widgets";
 
 const accordion = accordion({
   items: [
@@ -1228,7 +1229,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 +1245,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 +1260,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 +1278,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 +1294,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 +1306,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 +1327,7 @@ defineElement("my-counter", (props) => {
 
 ---
 
-## SSR and Static Generation (`sibu/extras`)
+## SSR and Static Generation (`sibujs/ssr`)
 
 ### Server-Side Rendering
 
@@ -1336,7 +1337,7 @@ import {
   renderToStream,
   renderToDocument,
   hydrate,
-} from "sibujs/extras";
+} from "sibujs/ssr";
 
 // Render component to HTML string
 const markup = renderToString(App());
@@ -1361,7 +1362,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 +1381,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 +1395,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,19 +1409,19 @@ result.errors; // [{ path: "/blog/2", error: Error }]
 
 ---
 
-## Concurrent Rendering (`sibu/extras`)
+## Concurrent Rendering (`sibujs/performance`)
 
 ```ts
 import {
   startTransition,
   deferredValue,
   transitionState,
-  id,
+  uniqueId,
   scheduleUpdate,
   yieldToMain,
   processInChunks,
   Priority,
-} from "sibujs/extras";
+} from "sibujs/performance";
 
 // Non-blocking state updates
 startTransition(() => {
@@ -1434,7 +1435,7 @@ const deferredQuery = deferredValue(() => query());
 const [isPending, startTransition] = transitionState();
 
 // Unique IDs (SSR-safe)
-const id = id();       // "sibu-0"
+const myId = uniqueId();       // "sibu-0"
 const labelId = uniqueId("label"); // "sibu-1-label"
 
 // Priority-based scheduling
@@ -1450,7 +1451,7 @@ await processInChunks(bigArray, (item) => processItem(item), 50);
 
 ---
 
-## DevTools (`sibu/extras`)
+## DevTools (`sibujs/devtools`)
 
 ### Debugging and Performance
 
@@ -1458,11 +1459,11 @@ await processInChunks(bigArray, (item) => processItem(item), 50);
 import {
   enableDebug,
   debugLog,
-  performance,
+  perfTracker,
   measureRender,
   getPerformanceReport,
   checkLeaks,
-} from "sibujs/extras";
+} from "sibujs/devtools";
 
 enableDebug();
 debugLog("Counter", "increment", { value: 5 });
@@ -1471,7 +1472,7 @@ debugLog("Counter", "increment", { value: 5 });
 const MeasuredList = measureRender("ItemList", ItemList);
 
 // Manual performance tracking
-const perf = performance("search");
+const perf = perfTracker("search");
 perf.startMeasure();
 // ... expensive operation
 perf.endMeasure();
@@ -1488,7 +1489,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 +1510,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 +1526,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 +1547,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" } });
@@ -1554,7 +1555,7 @@ const theme = createTheme({ colors: { primary: "#007bff" } });
 
 ---
 
-## Build (`sibu/build`)
+## Build (`sibujs/build`)
 
 Bundler plugins and deployment utilities.
 
@@ -1572,7 +1573,7 @@ Additional build utilities: CDN deployment, type declaration generation, bundle
 
 ---
 
-## Testing (`sibu/testing`)
+## Testing (`sibujs/testing`)
 
 Component testing utilities, accessibility testing, E2E helpers, snapshot testing, and visual regression support. Works with Vitest, Jest, and Playwright.
 
@@ -1592,15 +1593,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 +1642,4 @@ before submitting a PR.
 
 ## License
 
-MIT -- (c) 2025 [hexplus](https://github.com/hexplus)
+MIT -- (c) 2025-2026 [hexplus](https://github.com/hexplus)

package/dist/browser.cjs

@@ -58,9 +58,12 @@ function track(effectFn, subscriber) {
   }
   subscriberStack[stackTop] = subscriber;
   currentSubscriber = subscriber;
-  effectFn();
-  stackTop--;
-  currentSubscriber = stackTop >= 0 ? subscriberStack[stackTop] : null;
+  try {
+    effectFn();
+  } finally {
+    stackTop--;
+    currentSubscriber = stackTop >= 0 ? subscriberStack[stackTop] : null;
+  }
   return () => cleanup(subscriber);
 }
 function suspendTracking() {