sibujs 1.0.0-beta.4 → 1.0.0-beta.6

package/README.md

@@ -353,10 +353,13 @@ div({
   // Events
   on: { click: handleClick, mouseover: handleHover },
 
-  // Ref
+  // Ref (reactive — works with resize(), draggable(), etc.)
   ref: myRef,
 
-  // Any other attribute
+  // onElement callback — called after element creation
+  onElement: (el) => inputMask.bind(el),
+
+  // Any other attribute (empty strings set boolean attributes)
   "data-testid": "my-card",
   disabled: () => isDisabled(),
 });
@@ -417,10 +420,11 @@ batch(() => {
 ```ts
 import { ref, memo, memoFn, array, deepSignal, store } from "sibujs";
 
-// Mutable ref (non-reactive — changing .current does NOT trigger updates)
-// Use for imperative access (focus, measure). For reactive element tracking, use signal instead.
-const ref = ref<HTMLElement>();
-ref.current; // the element
+// Reactive ref — reading .current tracks, writing .current notifies
+// Works with browser APIs like resize(), draggable(), dropZone()
+const elRef = ref<HTMLElement>();
+elRef.current; // read (tracks dependency)
+elRef.current = myElement; // write (notifies subscribers)
 
 // Memoized value (alias for derived)
 const expensive = memo(() => heavyComputation(data()));
@@ -671,7 +675,7 @@ function App() {
       ${RouterLink({ to: "/", nodes: "Home" })}
       ${RouterLink({ to: "/about", nodes: "About" })}
     </nav>
-    ${route()}
+    ${Route()}
   </div>`;
 }
 
@@ -751,22 +755,20 @@ can("RETRY");       // false (not in error state)
 ```ts
 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
@@ -780,7 +782,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");
@@ -924,14 +926,16 @@ const disposeTitle = title(() => `(${unread()}) My App`);
 const { scheme } = colorScheme();
 scheme(); // "dark" | "light"
 
-// Drag and drop
-const { isDragging } = draggable(() => dragEl, { type: "card", id: 1 });
-const { isOver } = dropZone(() => dropEl, {
+// Drag and drop — accepts ref or getter
+const dragRef = ref<HTMLElement>();
+const { isDragging } = draggable(dragRef, { type: "card", id: 1 });
+const { isOver } = dropZone(dragRef, {
   onDrop: (data, event) => handleDrop(data),
 });
 
-// Resize observer
-const { width, height } = resize(() => element);
+// Resize observer — accepts ref or getter
+const elRef = ref<HTMLElement>();
+const { width, height } = resize(elRef);
 
 // Scroll position
 const { scrollX, scrollY } = scroll();
@@ -1190,6 +1194,7 @@ tabs.activeTab();      // "general"
 tabs.setActiveTab("security");
 tabs.nextTab();        // keyboard arrow navigation
 tabs.prevTab();
+tabs.isActive("general"); // reactive check — safe inside each()
 ```
 
 ### Select
@@ -1224,6 +1229,7 @@ const accordion = accordion({
 
 accordion.toggle("faq-1");
 accordion.items(); // [{ id: "faq-1", label: "...", isExpanded: true }, ...]
+accordion.isExpanded("faq-1"); // reactive check — safe inside each()
 accordion.expandAll();
 accordion.collapseAll();
 ```
@@ -1291,6 +1297,7 @@ picker.nextMonth();
 picker.daysInMonth(); // [{ date, isCurrentMonth, isToday, isSelected, isDisabled }, ...]
 picker.select(new Date(2025, 5, 15));
 picker.selectedDate(); // Date
+picker.isSelected(someDate); // reactive check — safe inside each()
 ```
 
 ### Content Editable
@@ -1418,7 +1425,7 @@ import {
   startTransition,
   deferredValue,
   transitionState,
-  id,
+  uniqueId,
   scheduleUpdate,
   yieldToMain,
   processInChunks,
@@ -1437,7 +1444,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
@@ -1461,7 +1468,7 @@ await processInChunks(bigArray, (item) => processItem(item), 50);
 import {
   enableDebug,
   debugLog,
-  performance,
+  perfTracker,
   measureRender,
   getPerformanceReport,
   checkLeaks,
@@ -1474,7 +1481,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();
@@ -1557,7 +1564,7 @@ const theme = createTheme({ colors: { primary: "#007bff" } });
 
 ---
 
-## Build (`sibu/build`)
+## Build (`sibujs/build`)
 
 Bundler plugins and deployment utilities.
 
@@ -1575,7 +1582,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.
 

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() {
@@ -422,6 +425,9 @@ function effect(effectFn) {
 }
 
 // src/browser/resize.ts
+function resolveTarget(target) {
+  return typeof target === "function" ? target : () => target.current;
+}
 function resize(target) {
   const [width, setWidth] = signal(0);
   const [height, setHeight] = signal(0);
@@ -430,8 +436,9 @@ function resize(target) {
     return { width, height, dispose: () => {
     } };
   }
+  const getter = resolveTarget(target);
   const cleanup2 = effect(() => {
-    const el = target();
+    const el = getter();
     if (observer) {
       observer.disconnect();
       observer = null;
@@ -690,6 +697,9 @@ function clipboard() {
 }
 
 // src/browser/dragDrop.ts
+function resolveTarget2(target) {
+  return typeof target === "function" ? target : () => target.current;
+}
 function draggable(element, data) {
   const [isDragging, setIsDragging] = signal(false);
   if (typeof window === "undefined") {
@@ -699,12 +709,13 @@ function draggable(element, data) {
   let currentEl = null;
   let onDragStart = null;
   let onDragEnd = null;
+  const getter = resolveTarget2(element);
   const cleanup2 = effect(() => {
     if (currentEl && onDragStart && onDragEnd) {
       currentEl.removeEventListener("dragstart", onDragStart);
       currentEl.removeEventListener("dragend", onDragEnd);
     }
-    const el = element();
+    const el = getter();
     currentEl = el;
     if (!el) return;
     el.draggable = true;
@@ -741,6 +752,7 @@ function dropZone(element, options) {
   let onDragEnter = null;
   let onDragLeave = null;
   let onDrop = null;
+  const getter = resolveTarget2(element);
   const cleanup2 = effect(() => {
     if (currentEl && onDragOver && onDragEnter && onDragLeave && onDrop) {
       currentEl.removeEventListener("dragover", onDragOver);
@@ -748,7 +760,7 @@ function dropZone(element, options) {
       currentEl.removeEventListener("dragleave", onDragLeave);
       currentEl.removeEventListener("drop", onDrop);
     }
-    const el = element();
+    const el = getter();
     currentEl = el;
     if (!el) return;
     onDragOver = (e) => {

package/dist/browser.d.cts

@@ -10,14 +10,17 @@ declare function media(query: string): {
     dispose: () => void;
 };
 
+type ElementTarget$1 = (() => HTMLElement | null) | {
+    current: HTMLElement | null;
+};
 /**
  * resize tracks the dimensions of a target element reactively.
  * Uses the ResizeObserver API to monitor size changes.
  *
- * @param target Reactive getter returning the HTMLElement to observe (or null)
+ * @param target Reactive getter or ref returning the HTMLElement to observe (or null)
  * @returns Object with reactive width/height getters and a dispose function
  */
-declare function resize(target: () => HTMLElement | null): {
+declare function resize(target: ElementTarget$1): {
     width: () => number;
     height: () => number;
     dispose: () => void;
@@ -120,16 +123,19 @@ declare function clipboard(): {
     dispose: () => void;
 };
 
+type ElementTarget = (() => HTMLElement | null) | {
+    current: HTMLElement | null;
+};
 /**
  * draggable makes an element draggable and tracks its dragging state.
  * Sets the `draggable` attribute and attaches dragstart/dragend listeners.
  * Serializes the provided data as JSON into the dataTransfer.
  *
- * @param element Reactive getter returning the HTMLElement to make draggable (or null)
+ * @param element Reactive getter or ref returning the HTMLElement to make draggable (or null)
  * @param data Optional data payload to transfer on drag
  * @returns Object with reactive isDragging getter and dispose function
  */
-declare function draggable(element: () => HTMLElement | null, data?: unknown): {
+declare function draggable(element: ElementTarget, data?: unknown): {
     isDragging: () => boolean;
     dispose: () => void;
 };
@@ -138,11 +144,11 @@ declare function draggable(element: () => HTMLElement | null, data?: unknown): {
  * Listens for dragenter, dragleave, dragover, and drop events.
  * Calls options.onDrop with the parsed data payload and the DragEvent.
  *
- * @param element Reactive getter returning the HTMLElement to use as drop zone (or null)
+ * @param element Reactive getter or ref returning the HTMLElement to use as drop zone (or null)
  * @param options Object with onDrop callback receiving the transferred data and event
  * @returns Object with reactive isOver getter and dispose function
  */
-declare function dropZone(element: () => HTMLElement | null, options: {
+declare function dropZone(element: ElementTarget, options: {
     onDrop: (data: unknown, event: DragEvent) => void;
 }): {
     isOver: () => boolean;

package/dist/browser.d.ts

@@ -10,14 +10,17 @@ declare function media(query: string): {
     dispose: () => void;
 };
 
+type ElementTarget$1 = (() => HTMLElement | null) | {
+    current: HTMLElement | null;
+};
 /**
  * resize tracks the dimensions of a target element reactively.
  * Uses the ResizeObserver API to monitor size changes.
  *
- * @param target Reactive getter returning the HTMLElement to observe (or null)
+ * @param target Reactive getter or ref returning the HTMLElement to observe (or null)
  * @returns Object with reactive width/height getters and a dispose function
  */
-declare function resize(target: () => HTMLElement | null): {
+declare function resize(target: ElementTarget$1): {
     width: () => number;
     height: () => number;
     dispose: () => void;
@@ -120,16 +123,19 @@ declare function clipboard(): {
     dispose: () => void;
 };
 
+type ElementTarget = (() => HTMLElement | null) | {
+    current: HTMLElement | null;
+};
 /**
  * draggable makes an element draggable and tracks its dragging state.
  * Sets the `draggable` attribute and attaches dragstart/dragend listeners.
  * Serializes the provided data as JSON into the dataTransfer.
  *
- * @param element Reactive getter returning the HTMLElement to make draggable (or null)
+ * @param element Reactive getter or ref returning the HTMLElement to make draggable (or null)
  * @param data Optional data payload to transfer on drag
  * @returns Object with reactive isDragging getter and dispose function
  */
-declare function draggable(element: () => HTMLElement | null, data?: unknown): {
+declare function draggable(element: ElementTarget, data?: unknown): {
     isDragging: () => boolean;
     dispose: () => void;
 };
@@ -138,11 +144,11 @@ declare function draggable(element: () => HTMLElement | null, data?: unknown): {
  * Listens for dragenter, dragleave, dragover, and drop events.
  * Calls options.onDrop with the parsed data payload and the DragEvent.
  *
- * @param element Reactive getter returning the HTMLElement to use as drop zone (or null)
+ * @param element Reactive getter or ref returning the HTMLElement to use as drop zone (or null)
  * @param options Object with onDrop callback receiving the transferred data and event
  * @returns Object with reactive isOver getter and dispose function
  */
-declare function dropZone(element: () => HTMLElement | null, options: {
+declare function dropZone(element: ElementTarget, options: {
     onDrop: (data: unknown, event: DragEvent) => void;
 }): {
     isOver: () => boolean;