dalila 1.9.18 → 1.9.19

package/README.md

@@ -15,12 +15,14 @@ npm run dev
 
 Open http://localhost:4242 to see your app.
 
-## Manual Installation
+## Install
 
 ```bash
 npm install dalila
 ```
 
+## Minimal Example
+
 ```html
 <div id="app">
   <p>Count: {count}</p>
@@ -44,313 +46,61 @@ bind(document.getElementById('app')!, ctx);
 
 ## Docs
 
-### Getting Started
+### Start here
 
-- [Overview](./docs/index.md) — Philosophy and quick start
-- [Template Spec](./docs/template-spec.md) — Binding syntax reference
+- [Overview](./docs/index.md)
+- [Template Spec](./docs/template-spec.md)
+- [Router](./docs/router.md)
+- [Forms](./docs/forms.md)
+- [UI Components](./docs/ui.md)
+- [HTTP Client](./docs/http.md)
 
 ### Core
 
-- [Signals](./docs/core/signals.md) — `signal`, `computed`, `effect`
-- [Scopes](./docs/core/scope.md) — Lifecycle management and cleanup
-- [Persist](./docs/core/persist.md) — Automatic storage sync for signals
-- [Context](./docs/context.md) — Dependency injection
+- [Signals](./docs/core/signals.md)
+- [Scopes](./docs/core/scope.md)
+- [Persist](./docs/core/persist.md)
+- [Context](./docs/context.md)
+- [Scheduler](./docs/core/scheduler.md)
+- [Keys](./docs/core/key.md)
+- [Dev Mode](./docs/core/dev.md)
 
 ### Runtime
 
-- [Template Binding](./docs/runtime/bind.md) — `bind()`, `mount()`, `configure()`, transitions, portal, text interpolation, events
-- [Components](./docs/runtime/component.md) — `defineComponent`, typed props/emits/refs, slots
-- [Lazy Loading](./docs/runtime/lazy.md) — `createLazyComponent`, `d-lazy`, `createSuspense` wrapper, code splitting
-- [Error Boundary](./docs/runtime/boundary.md) — `createErrorBoundary`, `createErrorBoundaryState`, `withErrorBoundary`, `d-boundary`
-- [FOUC Prevention](./docs/runtime/fouc-prevention.md) — Automatic token hiding
-
-### Routing
-
-- [Router](./docs/router.md) — Client-side routing with nested layouts, preloading, and file-based route generation
-- [Template Check CLI](./docs/cli/check.md) — `dalila check` static analysis for template/context consistency
-
-### UI Components
-
-- [UI Components](./docs/ui.md) — Interactive components (Dialog, Drawer, Toast, Tabs, Calendar, etc.) with native HTML and full ARIA support
-
-### Rendering
-
-- [when](./docs/core/when.md) — Conditional visibility
-- [match](./docs/core/match.md) — Switch-style rendering
-- [for](./docs/core/for.md) — List rendering with keyed diffing
-- [Virtual Lists](./docs/core/virtual.md) — Fixed and dynamic-height windowed rendering with infinite-scroll hooks
-
-### Data
-
-- [Resources](./docs/core/resource.md) — Async data with loading/error states
-- [Query](./docs/core/query.md) — Cached queries
-- [Mutations](./docs/core/mutation.md) — Write operations
-
-### HTTP
-
-- [HTTP Client](./docs/http.md) — Native fetch-based client with XSRF protection and interceptors
+- [Template Binding](./docs/runtime/bind.md)
+- [Components](./docs/runtime/component.md)
+- [Lazy Loading](./docs/runtime/lazy.md)
+- [Error Boundary](./docs/runtime/boundary.md)
+- [FOUC Prevention](./docs/runtime/fouc-prevention.md)
 
-### Forms
+### Rendering & Data
 
-- [Forms](./docs/forms.md) — DOM-first form management with validation, field arrays, and accessibility
+- [when](./docs/core/when.md)
+- [match](./docs/core/match.md)
+- [for](./docs/core/for.md)
+- [Virtual Lists](./docs/core/virtual.md)
+- [Resources](./docs/core/resource.md)
+- [Query](./docs/core/query.md)
+- [Mutations](./docs/core/mutation.md)
 
-### Utilities
+### Tooling
 
-- [Scheduler](./docs/core/scheduler.md) — Batching and coordination
-- [Keys](./docs/core/key.md) — Cache key encoding
-- [Dev Mode](./docs/core/dev.md) — Warnings and helpers
-- [Devtools Extension](./devtools-extension/README.md) — Browser panel for reactive graph and scopes
+- [Template Check CLI](./docs/cli/check.md)
+- [Devtools Extension](./devtools-extension/README.md)
 
 Firefox extension workflows:
 
 - `npm run devtools:firefox:run` — launch Firefox with extension loaded for dev
 - `npm run devtools:firefox:build` — package extension artifact for submission/signing
 
-## Features
-
-```
-dalila           → signal, computed, effect, batch, ...
-dalila/runtime   → bind(), mount(), configure(), createPortalTarget(), defineComponent()
-dalila/context   → createContext, provide, inject
-dalila/http      → createHttpClient with XSRF protection
-```
-
-### Signals
-
-```ts
-import { signal, computed, effect, readonly, debounceSignal, throttleSignal } from 'dalila';
-
-const count = signal(0);
-const doubled = computed(() => count() * 2);
-const countRO = readonly(count);
-const search = signal('');
-const debouncedSearch = debounceSignal(search, 250);
-const scrollY = signal(0);
-const throttledScrollY = throttleSignal(scrollY, 16);
-
-effect(() => {
-  console.log('Count is', countRO());
-  console.log('Search after pause', debouncedSearch());
-  console.log('Scroll sample', throttledScrollY());
-});
-
-count.set(5); // logs: Count is 5
-```
-
-### Template Binding
-
-```ts
-import { configure, mount } from 'dalila/runtime';
-
-// Global component registry and options
-configure({ components: [MyComponent] });
-
-// Bind a selector to a reactive view-model
-const dispose = mount('.app', { count: signal(0) });
-
-// Cleanup when done
-dispose();
-```
-
-### Transitions and Portal
-
-```html
-<div d-when="open" d-transition="fade">Panel</div>
-<div d-portal="showModal ? '#modal-root' : null">Modal content</div>
-```
-
-```ts
-import { configure, createPortalTarget } from 'dalila/runtime';
-
-const modalTarget = createPortalTarget('modal-root');
-
-configure({
-  transitions: [{ name: 'fade', duration: 250 }],
-});
-```
-
-### Scopes
-
-```ts
-import { createScope, withScope, effect } from 'dalila';
-
-const scope = createScope();
-
-withScope(scope, () => {
-  effect(() => { /* auto-cleaned when scope disposes */ });
-});
-
-scope.dispose(); // stops all effects
-```
-
-### Context
-
-```ts
-import { createContext, provide, inject } from 'dalila';
-
-const ThemeContext = createContext<'light' | 'dark'>('theme');
-
-// In parent scope
-provide(ThemeContext, 'dark');
-
-// In child scope
-const theme = inject(ThemeContext); // 'dark'
-```
-
-### Persist
-
-```ts
-import { signal, persist } from 'dalila';
-
-// Auto-saves to localStorage
-const theme = persist(signal('dark'), { name: 'app-theme' });
-
-theme.set('light'); // Saved automatically
-// On reload: theme starts as 'light'
-```
-
-### HTTP Client
-
-```ts
-import { createHttpClient } from 'dalila/http';
-
-const http = createHttpClient({
-  baseURL: 'https://api.example.com',
-  xsrf: true, // XSRF protection
-  onError: (error) => {
-    if (error.status === 401) window.location.href = '/login';
-    throw error;
-  }
-});
-
-// GET request
-const response = await http.get('/users');
-console.log(response.data);
-
-// POST with auto JSON serialization
-await http.post('/users', { name: 'John', email: 'john@example.com' });
-```
-
-### File-Based Routing
+## Packages
 
 ```txt
-src/app/
-├── layout.html
-├── page.html
-├── about/
-│   └── page.html
-└── users/
-    └── [id]/
-        └── page.html
-```
-
-```bash
-npx dalila routes generate
-```
-
-```ts
-import { createRouter } from 'dalila/router';
-import { routes } from './routes.generated.js';
-import { routeManifest } from './routes.generated.manifest.js';
-
-const router = createRouter({
-  outlet: document.getElementById('app')!,
-  routes,
-  routeManifest
-});
-
-router.start();
-```
-
-### Forms
-
-```ts
-import { createForm } from 'dalila';
-
-const userForm = createForm({
-  defaultValues: { name: '', email: '' },
-  validate: (data) => {
-    const errors: Record<string, string> = {};
-    if (!data.name) errors.name = 'Name is required';
-    if (!data.email?.includes('@')) errors.email = 'Invalid email';
-    return errors;
-  }
-});
-
-async function handleSubmit(data, { signal }) {
-  await fetch('/api/users', {
-    method: 'POST',
-    body: JSON.stringify(data),
-    signal
-  });
-}
-```
-
-```html
-<form d-form="userForm" d-on-submit="handleSubmit">
-  <label>
-    Name
-    <input d-field="name" />
-  </label>
-  <span d-error="name"></span>
-
-  <label>
-    Email
-    <input d-field="email" type="email" />
-  </label>
-  <span d-error="email"></span>
-
-  <button type="submit">Save</button>
-  <span d-form-error="userForm"></span>
-</form>
-```
-
-### UI Components with Router
-
-```ts
-// page.ts
-import { computed, signal } from 'dalila';
-import { createDialog, mountUI } from 'dalila/components/ui';
-
-class HomePageVM {
-  count = signal(0);
-  status = computed(() => `Count: ${this.count()}`);
-  dialog = createDialog({ closeOnBackdrop: true, closeOnEscape: true });
-  increment = () => this.count.update(n => n + 1);
-  openModal = () => this.dialog.show();
-  closeModal = () => this.dialog.close();
-}
-
-export function loader() {
-  return new HomePageVM();
-}
-
-// Called after view is mounted
-export function onMount(root: HTMLElement, data: HomePageVM) {
-  return mountUI(root, {
-    dialogs: { dialog: data.dialog },
-    events: []
-  });
-}
-
-// Optional extra hook on route leave
-export function onUnmount(_root: HTMLElement) {}
-```
-
-```html
-<!-- page.html -->
-<d-button d-on-click="increment">Increment</d-button>
-<d-button d-on-click="openModal">Open Dialog</d-button>
-
-<d-dialog d-ui="dialog">
-  <d-dialog-header>
-    <d-dialog-title>{status}</d-dialog-title>
-    <d-dialog-close d-on-click="closeModal">&times;</d-dialog-close>
-  </d-dialog-header>
-  <d-dialog-body>
-    <p>Modal controlled by the official route + UI pattern.</p>
-  </d-dialog-body>
-</d-dialog>
+dalila           → signals, scope, persist, forms, resources, query, mutations
+dalila/runtime   → bind(), mount(), configure(), components, lazy, transitions
+dalila/context   → createContext(), provide(), inject()
+dalila/router    → createRouter(), file-based routes, preloading
+dalila/http      → createHttpClient()
 ```
 
 ## Development

package/dist/core/scheduler.d.ts

@@ -20,6 +20,15 @@
  * - Flushes always drain with `splice(0)` to release references eagerly.
  */
 type Task = () => void;
+export type SchedulerPriority = 'high' | 'medium' | 'low';
+export interface ScheduleOptions {
+    /** Priority used by RAF/microtask queues. Default: 'medium'. */
+    priority?: SchedulerPriority;
+}
+interface SchedulerPriorityContextOptions {
+    /** Warn when `fn` returns a promise. Default: true. */
+    warnOnAsync?: boolean;
+}
 export interface TimeSliceOptions {
     /** Time budget per slice in milliseconds. Default: 8 */
     budgetMs?: number;
@@ -71,7 +80,7 @@ export declare function getSchedulerConfig(): Readonly<SchedulerConfig>;
  * Use this for DOM-affecting work you want grouped per frame.
  * (In Node tests, `requestAnimationFrame` is typically mocked.)
  */
-export declare function schedule(task: Task): void;
+export declare function schedule(task: Task, options?: ScheduleOptions): void;
 /**
  * Schedule work in a microtask.
  *
@@ -79,7 +88,7 @@ export declare function schedule(task: Task): void;
  * - run after the current call stack,
  * - but before the next frame.
  */
-export declare function scheduleMicrotask(task: Task): void;
+export declare function scheduleMicrotask(task: Task, options?: ScheduleOptions): void;
 /**
  * Returns true while inside a `batch()` call.
  *
@@ -108,6 +117,14 @@ export declare function queueInBatch(task: Task): void;
  * - We flush batched tasks in *one RAF* to group visible DOM work per frame.
  */
 export declare function batch(fn: () => void): void;
+/**
+ * Run work under a temporary scheduler priority context.
+ *
+ * Sync-only helper: tasks scheduled without explicit priority inside the
+ * synchronous body of `fn` inherit this priority.
+ * Useful for framework internals (e.g. user input event handlers).
+ */
+export declare function withSchedulerPriority<T>(priority: SchedulerPriority, fn: () => T, options?: SchedulerPriorityContextOptions): T;
 /**
  * DOM read discipline helper.
  *

package/dist/core/scheduler.js

@@ -23,6 +23,13 @@ const schedulerConfig = {
     maxMicrotaskIterations: 1000,
     maxRafIterations: 100,
 };
+const PRIORITY_ORDER = ['high', 'medium', 'low'];
+const FAIRNESS_QUOTAS = {
+    high: 8,
+    medium: 4,
+    low: 2,
+};
+const VALID_SCHEDULER_PRIORITIES = new Set(PRIORITY_ORDER);
 /**
  * Configure scheduler limits.
  *
@@ -44,11 +51,22 @@ export function getSchedulerConfig() {
 }
 let rafScheduled = false;
 let microtaskScheduled = false;
+let currentPriorityContext = null;
+const warnedInvalidPriorityValues = new Set();
+let warnedAsyncPriorityContextUsage = false;
 let isFlushingRaf = false;
 let isFlushingMicrotasks = false;
-/** FIFO queues. */
-const rafQueue = [];
-const microtaskQueue = [];
+/** FIFO queues split by priority. */
+const rafQueue = {
+    high: [],
+    medium: [],
+    low: [],
+};
+const microtaskQueue = {
+    high: [],
+    medium: [],
+    low: [],
+};
 const rafImpl = typeof globalThis !== 'undefined' && typeof globalThis.requestAnimationFrame === 'function'
     ? (cb) => globalThis.requestAnimationFrame(() => cb())
     : (cb) => setTimeout(cb, 0);
@@ -64,6 +82,21 @@ function assertNotAborted(signal) {
     if (signal?.aborted)
         throw createAbortError();
 }
+function isSchedulerPriority(value) {
+    return typeof value === 'string' && VALID_SCHEDULER_PRIORITIES.has(value);
+}
+function warnInvalidSchedulerPriority(value, source) {
+    const key = `${source}:${String(value)}`;
+    if (warnedInvalidPriorityValues.has(key))
+        return;
+    warnedInvalidPriorityValues.add(key);
+    console.warn(`[Dalila] Invalid scheduler priority from ${source}: "${String(value)}". Falling back to "medium".`);
+}
+function isPromiseLike(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        typeof value.then === 'function');
+}
 /**
  * Batching state.
  *
@@ -80,8 +113,8 @@ const batchQueueSet = new Set();
  * Use this for DOM-affecting work you want grouped per frame.
  * (In Node tests, `requestAnimationFrame` is typically mocked.)
  */
-export function schedule(task) {
-    rafQueue.push(task);
+export function schedule(task, options = {}) {
+    rafQueue[normalizePriority(options.priority)].push(task);
     if (!rafScheduled) {
         rafScheduled = true;
         rafImpl(flushRaf);
@@ -94,8 +127,8 @@ export function schedule(task) {
  * - run after the current call stack,
  * - but before the next frame.
  */
-export function scheduleMicrotask(task) {
-    microtaskQueue.push(task);
+export function scheduleMicrotask(task, options = {}) {
+    microtaskQueue[normalizePriority(options.priority)].push(task);
     if (!microtaskScheduled) {
         microtaskScheduled = true;
         Promise.resolve().then(flushMicrotasks);
@@ -160,7 +193,7 @@ function flushBatch() {
     schedule(() => {
         for (const t of tasks)
             t();
-    });
+    }, { priority: 'medium' });
 }
 /**
  * Drain the microtask queue.
@@ -177,23 +210,21 @@ function flushMicrotasks() {
     let iterations = 0;
     const maxIterations = schedulerConfig.maxMicrotaskIterations;
     try {
-        while (microtaskQueue.length > 0 && iterations < maxIterations) {
+        while (hasQueuedTasks(microtaskQueue) && iterations < maxIterations) {
             iterations++;
-            const tasks = microtaskQueue.splice(0);
-            for (const t of tasks)
-                t();
+            drainPriorityCycle(microtaskQueue);
         }
-        if (iterations >= maxIterations && microtaskQueue.length > 0) {
+        if (iterations >= maxIterations && hasQueuedTasks(microtaskQueue)) {
             console.error(`[Dalila] Scheduler exceeded ${maxIterations} microtask iterations. ` +
-                `Possible infinite loop detected. Remaining ${microtaskQueue.length} tasks discarded.`);
-            microtaskQueue.length = 0;
+                `Possible infinite loop detected. Remaining ${countQueuedTasks(microtaskQueue)} tasks discarded.`);
+            clearPriorityQueues(microtaskQueue);
         }
     }
     finally {
         isFlushingMicrotasks = false;
         microtaskScheduled = false;
         // If tasks were queued after we stopped flushing, reschedule a new microtask turn.
-        if (microtaskQueue.length > 0 && !microtaskScheduled) {
+        if (hasQueuedTasks(microtaskQueue) && !microtaskScheduled) {
             microtaskScheduled = true;
             Promise.resolve().then(flushMicrotasks);
         }
@@ -213,28 +244,110 @@ function flushRaf() {
     let iterations = 0;
     const maxIterations = schedulerConfig.maxRafIterations;
     try {
-        while (rafQueue.length > 0 && iterations < maxIterations) {
+        while (hasQueuedTasks(rafQueue) && iterations < maxIterations) {
             iterations++;
-            const tasks = rafQueue.splice(0);
-            for (const t of tasks)
-                t();
+            drainPriorityCycle(rafQueue);
         }
-        if (iterations >= maxIterations && rafQueue.length > 0) {
+        if (iterations >= maxIterations && hasQueuedTasks(rafQueue)) {
             console.error(`[Dalila] Scheduler exceeded ${maxIterations} RAF iterations. ` +
-                `Possible infinite loop detected. Remaining ${rafQueue.length} tasks discarded.`);
-            rafQueue.length = 0;
+                `Possible infinite loop detected. Remaining ${countQueuedTasks(rafQueue)} tasks discarded.`);
+            clearPriorityQueues(rafQueue);
         }
     }
     finally {
         isFlushingRaf = false;
         rafScheduled = false;
         // If tasks were queued during the flush, schedule another frame.
-        if (rafQueue.length > 0 && !rafScheduled) {
+        if (hasQueuedTasks(rafQueue) && !rafScheduled) {
             rafScheduled = true;
             rafImpl(flushRaf);
         }
     }
 }
+function normalizePriority(priority) {
+    const candidate = priority ?? currentPriorityContext;
+    if (candidate == null)
+        return 'medium';
+    if (isSchedulerPriority(candidate))
+        return candidate;
+    warnInvalidSchedulerPriority(candidate, priority != null ? 'schedule-options' : 'priority-context');
+    return 'medium';
+}
+/**
+ * Run work under a temporary scheduler priority context.
+ *
+ * Sync-only helper: tasks scheduled without explicit priority inside the
+ * synchronous body of `fn` inherit this priority.
+ * Useful for framework internals (e.g. user input event handlers).
+ */
+export function withSchedulerPriority(priority, fn, options = {}) {
+    const nextPriority = isSchedulerPriority(priority) ? priority : (warnInvalidSchedulerPriority(priority, 'withSchedulerPriority'), 'medium');
+    const prev = currentPriorityContext;
+    currentPriorityContext = nextPriority;
+    try {
+        const result = fn();
+        if ((options.warnOnAsync ?? true) && isPromiseLike(result) && !warnedAsyncPriorityContextUsage) {
+            warnedAsyncPriorityContextUsage = true;
+            console.warn('[Dalila] withSchedulerPriority() is sync-only and does not preserve priority across async boundaries.');
+        }
+        return result;
+    }
+    finally {
+        currentPriorityContext = prev;
+    }
+}
+function hasQueuedTasks(queues) {
+    return queues.high.length > 0 || queues.medium.length > 0 || queues.low.length > 0;
+}
+function hasPendingPriorityCounts(counts) {
+    return counts.high > 0 || counts.medium > 0 || counts.low > 0;
+}
+function countQueuedTasks(queues) {
+    return queues.high.length + queues.medium.length + queues.low.length;
+}
+function clearPriorityQueues(queues) {
+    queues.high.length = 0;
+    queues.medium.length = 0;
+    queues.low.length = 0;
+}
+/**
+ * Drain one fairness wave from the current queue snapshot:
+ * - prioritize `high`
+ * - still guarantee progress for `medium`/`low` if queued
+ *
+ * Tasks enqueued while draining are deferred to the next outer iteration so
+ * loop-protection still counts requeue waves instead of fairness slices.
+ */
+function drainPriorityCycle(queues) {
+    const snapshot = {
+        high: queues.high.splice(0),
+        medium: queues.medium.splice(0),
+        low: queues.low.splice(0)
+    };
+    const indices = {
+        high: 0,
+        medium: 0,
+        low: 0
+    };
+    const remaining = {
+        high: snapshot.high.length,
+        medium: snapshot.medium.length,
+        low: snapshot.low.length
+    };
+    while (hasPendingPriorityCounts(remaining)) {
+        for (const priority of PRIORITY_ORDER) {
+            if (remaining[priority] === 0)
+                continue;
+            const start = indices[priority];
+            const end = Math.min(start + FAIRNESS_QUOTAS[priority], snapshot[priority].length);
+            indices[priority] = end;
+            remaining[priority] -= end - start;
+            for (let i = start; i < end; i++) {
+                snapshot[priority][i]();
+            }
+        }
+    }
+}
 /**
  * DOM read discipline helper.
  *

package/dist/core/signal.js

@@ -84,7 +84,7 @@ function scheduleEffect(eff) {
     if (isBatching())
         queueInBatch(eff.runner);
     else
-        scheduleMicrotask(eff.runner);
+        scheduleMicrotask(eff.runner, { priority: 'medium' });
 }
 function trySubscribeActiveEffect(subscribers, signalRef) {
     if (!activeEffect || activeEffect.disposed)

package/dist/router/router.js

@@ -1,4 +1,5 @@
 import { signal } from '../core/signal.js';
+import { withSchedulerPriority } from '../core/scheduler.js';
 import { createScope, withScope, withScopeAsync } from '../core/scope.js';
 import { normalizeRules, validateValue } from './validation.js';
 import { compileRoutes, findCompiledRouteStackResult, normalizePath } from './route-tables.js';
@@ -568,7 +569,7 @@ export function createRouter(config) {
         }
         return collectPrefetchCandidatesFromRoutes(routes);
     }
-    async function prefetchCandidates(candidates) {
+    async function prefetchCandidates(candidates, priority = 'medium') {
         if (candidates.length === 0)
             return;
         const seenStaticPaths = new Set();
@@ -580,7 +581,7 @@ export function createRouter(config) {
                 if (seenStaticPaths.has(staticPath))
                     continue;
                 seenStaticPaths.add(staticPath);
-                tasks.push(preloadPath(staticPath).catch((error) => {
+                tasks.push(preloadPath(staticPath, priority).catch((error) => {
                     console.warn('[Dalila] Route prefetch failed:', error);
                 }));
                 continue;
@@ -1402,7 +1403,7 @@ export function createRouter(config) {
      * functions. Awaits all pending entry promises before returning so that
      * callers like prefetchByTag can trust the data is ready.
      */
-    async function preloadPath(path) {
+    async function preloadPath(path, priority = 'medium') {
         const location = parseLocation(path);
         const stackResult = findCompiledRouteStackResult(location.pathname, compiledRoutes);
         if (!stackResult || !stackResult.exact)
@@ -1461,18 +1462,22 @@ export function createRouter(config) {
             }
             const settled = entry.promise
                 .then((data) => {
-                if (!controller.signal.aborted) {
-                    entry.status = 'fulfilled';
-                    entry.data = data;
-                }
-                preloadScope.dispose();
+                withSchedulerPriority(priority, () => {
+                    if (!controller.signal.aborted) {
+                        entry.status = 'fulfilled';
+                        entry.data = data;
+                    }
+                    preloadScope.dispose();
+                });
             })
                 .catch((error) => {
-                if (!isAbortError(error)) {
-                    entry.status = 'rejected';
-                    entry.error = error;
-                }
-                preloadScope.dispose();
+                withSchedulerPriority(priority, () => {
+                    if (!isAbortError(error)) {
+                        entry.status = 'rejected';
+                        entry.error = error;
+                    }
+                    preloadScope.dispose();
+                });
             });
             pending.push(settled);
         }
@@ -1481,27 +1486,33 @@ export function createRouter(config) {
         }
     }
     function preload(path) {
-        void preloadPath(path).catch((error) => {
+        void preloadPath(path, 'low').catch((error) => {
             console.warn('[Dalila] Route prefetch failed:', error);
         });
     }
     async function prefetchByTag(tag) {
-        const normalizedTag = tag.trim();
-        if (!normalizedTag)
+        const candidates = withSchedulerPriority('low', () => {
+            const normalizedTag = tag.trim();
+            if (!normalizedTag)
+                return null;
+            return collectPrefetchCandidates().filter((candidate) => candidate.tags.includes(normalizedTag));
+        });
+        if (!candidates)
             return;
-        const candidates = collectPrefetchCandidates().filter((candidate) => candidate.tags.includes(normalizedTag));
-        await prefetchCandidates(candidates);
+        await prefetchCandidates(candidates, 'low');
     }
     async function prefetchByScore(minScore) {
         if (!Number.isFinite(minScore))
             return;
-        const threshold = Number(minScore);
-        const candidates = collectPrefetchCandidates().filter((candidate) => {
-            if (typeof candidate.score !== 'number')
-                return false;
-            return candidate.score >= threshold;
+        const candidates = withSchedulerPriority('low', () => {
+            const threshold = Number(minScore);
+            return collectPrefetchCandidates().filter((candidate) => {
+                if (typeof candidate.score !== 'number')
+                    return false;
+                return candidate.score >= threshold;
+            });
         });
-        await prefetchCandidates(candidates);
+        await prefetchCandidates(candidates, 'low');
     }
     function start() {
         if (started)

package/dist/runtime/bind.js

@@ -7,6 +7,7 @@
  * @module dalila/runtime
  */
 import { effect, createScope, withScope, isInDevMode, signal, computeVirtualRange } from '../core/index.js';
+import { schedule, withSchedulerPriority } from '../core/scheduler.js';
 import { WRAPPED_HANDLER } from '../form/form.js';
 import { linkScopeToDom, withDevtoolsDomTarget } from '../core/devtools.js';
 import { isComponent, normalizePropDef, coercePropValue, kebabToCamel, camelToKebab } from './component.js';
@@ -244,13 +245,14 @@ const templateInterpolationPlanCache = new Map();
 const TEMPLATE_PLAN_CACHE_MAX_ENTRIES = 250;
 const TEMPLATE_PLAN_CACHE_TTL_MS = 10 * 60 * 1000;
 const TEMPLATE_PLAN_CACHE_CONFIG_KEY = '__dalila_bind_template_cache';
-const BENCH_FLAG = '__dalila_bind_bench';
-const BENCH_STATS_KEY = '__dalila_bind_bench_stats';
 function nowMs() {
     return typeof performance !== 'undefined' && typeof performance.now === 'function'
         ? performance.now()
         : Date.now();
 }
+function resolveListRenderPriority() {
+    return 'low';
+}
 function coerceCacheSetting(value, fallback) {
     if (typeof value !== 'number' || !Number.isFinite(value))
         return fallback;
@@ -263,40 +265,6 @@ function resolveTemplatePlanCacheConfig(options) {
     const ttlMs = coerceCacheSetting(fromOptions?.ttlMs ?? globalRaw?.ttlMs, TEMPLATE_PLAN_CACHE_TTL_MS);
     return { maxEntries, ttlMs };
 }
-function createBindBenchSession() {
-    const enabled = isInDevMode() && globalThis[BENCH_FLAG] === true;
-    return {
-        enabled,
-        scanMs: 0,
-        parseMs: 0,
-        totalExpressions: 0,
-        fastPathExpressions: 0,
-        planCacheHit: false,
-    };
-}
-function flushBindBenchSession(session) {
-    if (!session.enabled)
-        return;
-    const stats = {
-        scanMs: Number(session.scanMs.toFixed(3)),
-        parseMs: Number(session.parseMs.toFixed(3)),
-        totalExpressions: session.totalExpressions,
-        fastPathExpressions: session.fastPathExpressions,
-        fastPathHitPercent: session.totalExpressions === 0
-            ? 0
-            : Number(((session.fastPathExpressions / session.totalExpressions) * 100).toFixed(2)),
-        planCacheHit: session.planCacheHit,
-    };
-    const globalObj = globalThis;
-    const bucket = globalObj[BENCH_STATS_KEY] ?? {};
-    const runs = Array.isArray(bucket.runs) ? bucket.runs : [];
-    runs.push(stats);
-    if (runs.length > 200)
-        runs.shift();
-    bucket.runs = runs;
-    bucket.last = stats;
-    globalObj[BENCH_STATS_KEY] = bucket;
-}
 function compileFastPathExpression(expression) {
     let i = 0;
     const literalKeywords = {
@@ -788,22 +756,15 @@ function compileInterpolationExpression(expression) {
     }
     return { kind: 'parser', expression };
 }
-function parseInterpolationExpression(expression, benchSession) {
+function parseInterpolationExpression(expression) {
     let ast = expressionCache.get(expression);
     if (ast === undefined) {
-        const parseStart = benchSession?.enabled ? nowMs() : 0;
         try {
             ast = parseExpression(expression);
             expressionCache.set(expression, ast);
-            if (benchSession?.enabled) {
-                benchSession.parseMs += nowMs() - parseStart;
-            }
         }
         catch (err) {
             expressionCache.set(expression, null);
-            if (benchSession?.enabled) {
-                benchSession.parseMs += nowMs() - parseStart;
-            }
             return {
                 ok: false,
                 message: `Text interpolation parse error in "{${expression}}": ${err.message}`,
@@ -1029,11 +990,11 @@ function createInterpolationTemplatePlan(root, rawTextSelectors) {
         fastPathExpressions,
     };
 }
-function resolveCompiledExpression(compiled, benchSession) {
+function resolveCompiledExpression(compiled) {
     if (compiled.kind === 'fast_path') {
         return { ok: true, ast: compiled.ast };
     }
-    return parseInterpolationExpression(compiled.expression, benchSession);
+    return parseInterpolationExpression(compiled.expression);
 }
 function pruneTemplatePlanCache(now, config) {
     // 1) Remove expired plans first.
@@ -1079,7 +1040,7 @@ function setCachedTemplatePlan(signature, plan, now, config) {
     });
     pruneTemplatePlanCache(now, config);
 }
-function bindTextNodeFromPlan(node, plan, ctx, benchSession) {
+function bindTextNodeFromPlan(node, plan, ctx) {
     const frag = document.createDocumentFragment();
     for (const segment of plan.segments) {
         if (segment.type === 'text') {
@@ -1114,7 +1075,7 @@ function bindTextNodeFromPlan(node, plan, ctx, benchSession) {
             }
             textNode.data = result.value == null ? '' : String(result.value);
         };
-        const parsed = resolveCompiledExpression(segment.compiled, benchSession);
+        const parsed = resolveCompiledExpression(segment.compiled);
         if (!parsed.ok) {
             applyResult({ ok: false, reason: 'parse', message: parsed.message });
             frag.appendChild(textNode);
@@ -1134,23 +1095,14 @@ function bindTextNodeFromPlan(node, plan, ctx, benchSession) {
         node.parentNode.replaceChild(frag, node);
     }
 }
-function bindTextInterpolation(root, ctx, rawTextSelectors, cacheConfig, benchSession) {
+function bindTextInterpolation(root, ctx, rawTextSelectors, cacheConfig) {
     const signature = createInterpolationTemplateSignature(root, rawTextSelectors);
     const now = nowMs();
     let plan = getCachedTemplatePlan(signature, now, cacheConfig);
-    const scanStart = benchSession?.enabled ? nowMs() : 0;
     if (!plan) {
         plan = createInterpolationTemplatePlan(root, rawTextSelectors);
         setCachedTemplatePlan(signature, plan, now, cacheConfig);
     }
-    else if (benchSession) {
-        benchSession.planCacheHit = true;
-    }
-    if (benchSession?.enabled) {
-        benchSession.scanMs += nowMs() - scanStart;
-        benchSession.totalExpressions = plan.totalExpressions;
-        benchSession.fastPathExpressions = plan.fastPathExpressions;
-    }
     if (plan.bindings.length === 0)
         return;
     const nodesToBind = [];
@@ -1161,7 +1113,7 @@ function bindTextInterpolation(root, ctx, rawTextSelectors, cacheConfig, benchSe
         }
     }
     for (const item of nodesToBind) {
-        bindTextNodeFromPlan(item.node, item.binding, ctx, benchSession);
+        bindTextNodeFromPlan(item.node, item.binding, ctx);
     }
 }
 // ============================================================================
@@ -1187,8 +1139,11 @@ function bindEvents(root, ctx, events, cleanups) {
                 warn(`Event handler "${handlerName}" is not a function`);
                 continue;
             }
-            el.addEventListener(eventName, handler);
-            cleanups.push(() => el.removeEventListener(eventName, handler));
+            const wrappedHandler = function (event) {
+                return withSchedulerPriority('high', () => handler.call(this, event), { warnOnAsync: false });
+            };
+            el.addEventListener(eventName, wrappedHandler);
+            cleanups.push(() => el.removeEventListener(eventName, wrappedHandler));
         }
     }
 }
@@ -2279,6 +2234,8 @@ function bindVirtualEach(root, ctx, cleanups) {
             }
         };
         function renderVirtualList(items) {
+            if (virtualListDisposed)
+                return;
             const parent = comment.parentNode;
             if (!parent)
                 return;
@@ -2393,34 +2350,33 @@ function bindVirtualEach(root, ctx, cleanups) {
             maybeTriggerEndReached(visibleEndForEndReached, items.length);
         }
         let framePending = false;
-        let pendingRaf = null;
-        let pendingTimeout = null;
+        let virtualListDisposed = false;
         const scheduleRender = () => {
+            if (virtualListDisposed)
+                return;
             if (framePending)
                 return;
             framePending = true;
-            const flush = () => {
+            const listRenderPriority = resolveListRenderPriority();
+            schedule(() => {
                 framePending = false;
-                renderVirtualList(currentItems);
-            };
-            if (typeof requestAnimationFrame === 'function') {
-                pendingRaf = requestAnimationFrame(() => {
-                    pendingRaf = null;
-                    flush();
+                if (virtualListDisposed)
+                    return;
+                withSchedulerPriority(listRenderPriority, () => {
+                    renderVirtualList(currentItems);
                 });
-                return;
-            }
-            pendingTimeout = setTimeout(() => {
-                pendingTimeout = null;
-                flush();
-            }, 0);
+            }, { priority: listRenderPriority });
         };
         const onScroll = () => scheduleRender();
         const onResize = () => scheduleRender();
         scrollContainer?.addEventListener('scroll', onScroll, { passive: true });
         let containerResizeObserver = null;
         if (typeof ResizeObserver !== 'undefined' && scrollContainer) {
-            containerResizeObserver = new ResizeObserver(() => scheduleRender());
+            containerResizeObserver = new ResizeObserver(() => {
+                if (virtualListDisposed)
+                    return;
+                scheduleRender();
+            });
             containerResizeObserver.observe(scrollContainer);
         }
         else if (typeof window !== 'undefined') {
@@ -2428,6 +2384,8 @@ function bindVirtualEach(root, ctx, cleanups) {
         }
         if (dynamicHeight && typeof ResizeObserver !== 'undefined' && heightsIndex) {
             rowResizeObserver = new ResizeObserver((entries) => {
+                if (virtualListDisposed)
+                    return;
                 let changed = false;
                 for (const entry of entries) {
                     const target = entry.target;
@@ -2483,6 +2441,7 @@ function bindVirtualEach(root, ctx, cleanups) {
             scrollContainer.__dalilaVirtualList = virtualApi;
         }
         if (isSignal(binding)) {
+            let hasRenderedInitialSignalPass = false;
             bindEffect(scrollContainer ?? el, () => {
                 const value = binding();
                 if (Array.isArray(value)) {
@@ -2496,17 +2455,30 @@ function bindVirtualEach(root, ctx, cleanups) {
                     }
                     replaceItems([]);
                 }
-                renderVirtualList(currentItems);
+                if (!hasRenderedInitialSignalPass) {
+                    hasRenderedInitialSignalPass = true;
+                    const listRenderPriority = resolveListRenderPriority();
+                    withSchedulerPriority(listRenderPriority, () => {
+                        renderVirtualList(currentItems);
+                    });
+                    return;
+                }
+                scheduleRender();
             });
         }
         else if (Array.isArray(binding)) {
             replaceItems(binding);
-            renderVirtualList(currentItems);
+            const listRenderPriority = resolveListRenderPriority();
+            withSchedulerPriority(listRenderPriority, () => {
+                renderVirtualList(currentItems);
+            });
         }
         else {
             warn(`d-virtual-each: "${bindingName}" is not an array or signal-of-array`);
         }
         cleanups.push(() => {
+            virtualListDisposed = true;
+            framePending = false;
             scrollContainer?.removeEventListener('scroll', onScroll);
             if (containerResizeObserver) {
                 containerResizeObserver.disconnect();
@@ -2514,13 +2486,6 @@ function bindVirtualEach(root, ctx, cleanups) {
             else if (typeof window !== 'undefined') {
                 window.removeEventListener('resize', onResize);
             }
-            if (pendingRaf != null && typeof cancelAnimationFrame === 'function') {
-                cancelAnimationFrame(pendingRaf);
-            }
-            pendingRaf = null;
-            if (pendingTimeout != null)
-                clearTimeout(pendingTimeout);
-            pendingTimeout = null;
             if (rowResizeObserver) {
                 rowResizeObserver.disconnect();
             }
@@ -2759,20 +2724,62 @@ function bindEach(root, ctx, cleanups) {
                 referenceNode = clone;
             }
         }
+        let lowPriorityRenderQueued = false;
+        let listRenderDisposed = false;
+        let pendingListItems = null;
+        const scheduleLowPriorityListRender = (items) => {
+            if (listRenderDisposed)
+                return;
+            const listRenderPriority = resolveListRenderPriority();
+            pendingListItems = items;
+            if (lowPriorityRenderQueued)
+                return;
+            lowPriorityRenderQueued = true;
+            schedule(() => {
+                lowPriorityRenderQueued = false;
+                if (listRenderDisposed) {
+                    pendingListItems = null;
+                    return;
+                }
+                const next = pendingListItems;
+                pendingListItems = null;
+                if (!next)
+                    return;
+                withSchedulerPriority(listRenderPriority, () => {
+                    renderList(next);
+                });
+            }, { priority: listRenderPriority });
+        };
         if (isSignal(binding)) {
+            let hasRenderedInitialSignalPass = false;
             // Effect owned by templateScope — no manual stop needed
             bindEffect(el, () => {
                 const value = binding();
-                renderList(Array.isArray(value) ? value : []);
+                const items = Array.isArray(value) ? value : [];
+                if (!hasRenderedInitialSignalPass) {
+                    hasRenderedInitialSignalPass = true;
+                    const listRenderPriority = resolveListRenderPriority();
+                    withSchedulerPriority(listRenderPriority, () => {
+                        renderList(items);
+                    });
+                    return;
+                }
+                scheduleLowPriorityListRender(items);
             });
         }
         else if (Array.isArray(binding)) {
-            renderList(binding);
+            const listRenderPriority = resolveListRenderPriority();
+            withSchedulerPriority(listRenderPriority, () => {
+                renderList(binding);
+            });
         }
         else {
             warn(`d-each: "${bindingName}" is not an array or signal`);
         }
         cleanups.push(() => {
+            listRenderDisposed = true;
+            lowPriorityRenderQueued = false;
+            pendingListItems = null;
             for (const clone of clonesByKey.values())
                 clone.remove();
             for (const dispose of disposesByKey.values())
@@ -3212,13 +3219,16 @@ function bindForm(root, ctx, cleanups) {
                     ? originalHandler
                     : form.handleSubmit(originalHandler);
                 // Add submit listener directly to form element (not via d-on-submit)
-                // This avoids mutating the shared context
-                el.addEventListener('submit', finalHandler);
+                // This avoids mutating the shared context while preserving high-priority event context.
+                const wrappedSubmitHandler = function (event) {
+                    return withSchedulerPriority('high', () => finalHandler.call(this, event), { warnOnAsync: false });
+                };
+                el.addEventListener('submit', wrappedSubmitHandler);
                 // Remove d-on-submit to prevent bindEvents from adding duplicate listener
                 el.removeAttribute('d-on-submit');
                 // Restore attribute on cleanup so dispose()+bind() (HMR) can rediscover it
                 cleanups.push(() => {
-                    el.removeEventListener('submit', finalHandler);
+                    el.removeEventListener('submit', wrappedSubmitHandler);
                     el.setAttribute('d-on-submit', submitHandlerName);
                 });
             }
@@ -4181,7 +4191,6 @@ export function bind(root, ctx, options = {}) {
     const rawTextSelectors = options.rawTextSelectors ?? DEFAULT_RAW_TEXT_SELECTORS;
     const templatePlanCacheConfig = resolveTemplatePlanCacheConfig(options);
     const transitionRegistry = createTransitionRegistry(options.transitions);
-    const benchSession = createBindBenchSession();
     const htmlRoot = root;
     // HMR support: Register binding context globally in dev mode.
     // Skip for internal (d-each clone) bindings — only the top-level bind owns HMR.
@@ -4217,7 +4226,7 @@ export function bind(root, ctx, options = {}) {
             // 7.5. d-text — safe textContent binding (before text interpolation)
             bindText(root, ctx, cleanups);
             // 7. Text interpolation (template plan cache + lazy parser fallback)
-            bindTextInterpolation(root, ctx, rawTextSelectors, templatePlanCacheConfig, benchSession);
+            bindTextInterpolation(root, ctx, rawTextSelectors, templatePlanCacheConfig);
             // 8. d-attr bindings
             bindAttrs(root, ctx, cleanups);
             // 9. d-bind-* two-way bindings
@@ -4256,7 +4265,6 @@ export function bind(root, ctx, options = {}) {
             htmlRoot.setAttribute('d-ready', '');
         });
     }
-    flushBindBenchSession(benchSession);
     // Return BindHandle (callable dispose + ref accessors)
     const dispose = () => {
         // Run manual cleanups (event listeners)

package/dist/runtime/lazy.d.ts

@@ -9,6 +9,7 @@
  * @module dalila/runtime/lazy
  */
 import { signal } from '../core/index.js';
+import { type SchedulerPriority } from '../core/scheduler.js';
 import type { Component } from './component.js';
 export interface LazyComponentOptions {
     /** Loading fallback template */
@@ -26,7 +27,7 @@ export interface LazyComponentState {
     /** The loaded component (if successful) */
     component: ReturnType<typeof signal<Component | null>>;
     /** Function to trigger loading */
-    load: () => void;
+    load: (priority?: SchedulerPriority) => void;
     /** Function to retry after error */
     retry: () => void;
     /** Whether the component has been loaded */

package/dist/runtime/lazy.js

@@ -9,6 +9,7 @@
  * @module dalila/runtime/lazy
  */
 import { signal } from '../core/index.js';
+import { withSchedulerPriority } from '../core/scheduler.js';
 import { defineComponent, isComponent } from './component.js';
 // ============================================================================
 // Lazy Component Registry
@@ -53,47 +54,57 @@ export function createLazyComponent(loader, options = {}) {
     const loadedSignal = signal(false);
     let loadingTimeout = null;
     let loadInFlight = false;
-    const load = () => {
+    const load = (priority = 'medium') => {
         if (loadedSignal() || loadInFlight)
             return;
         loadInFlight = true;
         // Handle loading delay
         if (loadingDelay > 0) {
             loadingTimeout = setTimeout(() => {
-                loadingSignal.set(true);
+                withSchedulerPriority(priority, () => {
+                    loadingSignal.set(true);
+                }, { warnOnAsync: false });
             }, loadingDelay);
         }
         else {
-            loadingSignal.set(true);
+            withSchedulerPriority(priority, () => {
+                loadingSignal.set(true);
+            }, { warnOnAsync: false });
         }
-        errorSignal.set(null);
+        withSchedulerPriority(priority, () => {
+            errorSignal.set(null);
+        }, { warnOnAsync: false });
         Promise.resolve()
-            .then(() => loader())
+            .then(() => withSchedulerPriority(priority, () => loader(), { warnOnAsync: false }))
             .then((module) => {
-            // Clear timeout if still pending
-            if (loadingTimeout) {
-                clearTimeout(loadingTimeout);
-                loadingTimeout = null;
-            }
-            const loadedComp = isComponent(module)
-                ? module
-                : ('default' in module ? module.default : null);
-            if (!loadedComp) {
-                throw new Error('Lazy component: failed to load component from module');
-            }
-            componentSignal.set(loadedComp);
-            loadingSignal.set(false);
-            loadedSignal.set(true);
-            loadInFlight = false;
+            withSchedulerPriority(priority, () => {
+                // Clear timeout if still pending
+                if (loadingTimeout) {
+                    clearTimeout(loadingTimeout);
+                    loadingTimeout = null;
+                }
+                const loadedComp = isComponent(module)
+                    ? module
+                    : ('default' in module ? module.default : null);
+                if (!loadedComp) {
+                    throw new Error('Lazy component: failed to load component from module');
+                }
+                componentSignal.set(loadedComp);
+                loadingSignal.set(false);
+                loadedSignal.set(true);
+                loadInFlight = false;
+            }, { warnOnAsync: false });
         })
             .catch((err) => {
-            if (loadingTimeout) {
-                clearTimeout(loadingTimeout);
-                loadingTimeout = null;
-            }
-            errorSignal.set(err instanceof Error ? err : new Error(String(err)));
-            loadingSignal.set(false);
-            loadInFlight = false;
+            withSchedulerPriority(priority, () => {
+                if (loadingTimeout) {
+                    clearTimeout(loadingTimeout);
+                    loadingTimeout = null;
+                }
+                errorSignal.set(err instanceof Error ? err : new Error(String(err)));
+                loadingSignal.set(false);
+                loadInFlight = false;
+            }, { warnOnAsync: false });
         });
     };
     const retry = () => {
@@ -177,7 +188,7 @@ export function createSuspense(options = {}) {
 export function preloadLazyComponent(tag) {
     const lazyResult = lazyComponentRegistry.get(tag);
     if (lazyResult) {
-        lazyResult.state.load();
+        lazyResult.state.load('low');
     }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dalila",
-  "version": "1.9.18",
+  "version": "1.9.19",
   "description": "DOM-first reactive framework based on signals",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",