mnfst 0.5.198-next.1 → 0.5.198-next.3

package/lib/manifest.defer.js

@@ -14,8 +14,31 @@ const killed = !!document.querySelector('script[data-defer="off"]') || window.__
 
 const pending = new Set();
 let ready = false;
+let bootDrained = false;
 let idleHandle = null;
 
+// Urgent = mounted after boot, within a gesture window (a pane the user just opened), capped per gesture
+const URGENT_WINDOW_MS = 1500;
+const URGENT_CAP = 8;
+const PREWARM_CAP = (window.ManifestDeferConfig && window.ManifestDeferConfig.prewarmCap) || 48; // warm-but-unopened containers kept live
+const IDLE_BUDGET_MS = 4;
+const SLICE_MAX = 8;
+const warm = new Set();          // prewarmed, never opened by the user
+let lastGestureAt = -Infinity;
+let urgentWindowAt = -Infinity;
+let urgentInWindow = 0;
+let promoteTimer = null;
+let lastPromoteAt = -Infinity;
+let gestureX = 0, gestureY = 0;
+let idleIsTimer = false;
+const now = () => (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now();
+
+function isUrgent() {
+    if (!ready || !bootDrained || now() - lastGestureAt > URGENT_WINDOW_MS) return false;
+    if (urgentWindowAt !== lastGestureAt) { urgentWindowAt = lastGestureAt; urgentInWindow = 0; }
+    return urgentInWindow++ < URGENT_CAP;
+}
+
 // ---- Detection ----
 
 const isPopoverOpen = (el) => { try { return el.matches(':popover-open'); } catch (_) { return false; } };
@@ -87,7 +110,7 @@ function register(el, rule, opts) {
         lazy: !!(opts && opts.lazy),
         discard: !!(opts && opts.discard),
         priority: opts ? opts.priority : 0,
-        urgent: ready, // mounted after ready → the user just made it appear
+        urgent: isUrgent(),
         rendered: false,
         cleanup: []
     };
@@ -96,10 +119,11 @@ function register(el, rule, opts) {
     return rec;
 }
 
-function render(rec) {
-    if (rec.rendered) return;
+function render(rec, viaPrewarm) {
+    if (rec.rendered) { if (!viaPrewarm && warm.delete(rec)) schedule(); return; }
     rec.rendered = true;
     pending.delete(rec);
+    if (viaPrewarm) warm.add(rec); else warm.delete(rec);
     const { el, tpl } = rec;
     const content = rec.discard ? tpl.content.cloneNode(true) : tpl.content;
     Alpine.mutateDom(() => {
@@ -121,6 +145,38 @@ function teardown(rec) {
     });
 }
 
+// Evict a warm, still-closed, never-opened container back to its stash (least reachable first)
+function restash(rec) {
+    if (!rec.rendered) return;
+    rec.rendered = false;
+    rec.near = undefined;
+    const { el, tpl } = rec;
+    Alpine.mutateDom(() => {
+        Array.from(el.children).forEach((child) => Alpine.destroyTree(child));
+        while (el.firstChild) tpl.content.appendChild(el.firstChild);
+        el.appendChild(tpl);
+    });
+    warm.delete(rec);
+    pending.add(rec);
+}
+
+function evict() {
+    if (warm.size <= PREWARM_CAP) return;
+    for (const rec of warm) rec.near = undefined;
+    while (warm.size > PREWARM_CAP) {
+        let victim = null, score = -1;
+        for (const rec of warm) {
+            if (!rec.el.isConnected) { warm.delete(rec); continue; }
+            if (rec.rule === 'popover' && isPopoverOpen(rec.el)) continue;
+            if (rec.near === undefined) rec.near = nearViewport(rec);
+            const sc = (reachable(rec.el) ? 0 : 2) + (rec.near ? 0 : 1);
+            if (sc > score) { victim = rec; score = sc; }
+        }
+        if (!victim) return;
+        restash(victim);
+    }
+}
+
 // ---- Open signals ----
 
 function wire(rec) {
@@ -162,39 +218,117 @@ function wire(rec) {
 
 // ---- Idle prewarm (after manifest:ready; urgent first, then priority asc, then document order) ----
 
-const idle = (fn, timeout) => window.requestIdleCallback
-    ? window.requestIdleCallback(fn, { timeout })
-    : setTimeout(fn, 50);
+const idle = (fn, timeout) => {
+    idleIsTimer = !window.requestIdleCallback;
+    return idleIsTimer
+        ? setTimeout(() => fn({ didTimeout: true, timeRemaining: () => 0 }), 50)
+        : window.requestIdleCallback(fn, { timeout });
+};
+function cancelIdle() {
+    if (idleHandle === null) return;
+    if (idleIsTimer) clearTimeout(idleHandle); else if (window.cancelIdleCallback) window.cancelIdleCallback(idleHandle);
+    idleHandle = null;
+}
+
+// A gesture that revealed a pane (tab switch, panel open) makes its containers urgent
+function promoteNearViewport() {
+    promoteTimer = null;
+    if (!ready || !bootDrained) return;
+    // The on-screen containers nearest the gesture point (a revealed pane sits under the click)
+    const candidates = [];
+    for (const rec of pending) {
+        if (rec.urgent || !rec.el.isConnected || !reachable(rec.el)) continue;
+        const r = anchorRect(rec);
+        rec.near = !!r && r.bottom > 0 && r.top < window.innerHeight && r.right > 0 && r.left < window.innerWidth;
+        if (!rec.near) continue;
+        const dx = Math.max(r.left - gestureX, 0, gestureX - r.right);
+        const dy = Math.max(r.top - gestureY, 0, gestureY - r.bottom);
+        candidates.push([dx * dx + dy * dy, rec]);
+    }
+    if (!candidates.length) return;
+    candidates.sort((a, b) => (a[1].priority - b[1].priority) || (a[0] - b[0])); // authored priority first, then nearest
+    let n = 0;
+    for (const [, rec] of candidates) { if (n++ >= URGENT_CAP) break; rec.urgent = true; }
+    cancelIdle();
+    schedule();
+}
+function onGesture(e) {
+    lastGestureAt = now();
+    if (e && typeof e.clientX === 'number' && (e.clientX || e.clientY)) { gestureX = e.clientX; gestureY = e.clientY; }
+    if (promoteTimer !== null || now() - lastPromoteAt < 500) return;
+    lastPromoteAt = now();
+    promoteTimer = setTimeout(promoteNearViewport, 150);
+}
 
+// Only containers the user can reach: not under a hidden route; visible parents first
+const reachable = (el) => !el.closest('[x-route][hidden]');
+// Judge by the invoker (popovertarget / aria-controls), else the nearest ancestor with a box
+// Rect of the invoker or the nearest boxed ancestor (null when nothing has a box)
+function anchorRect(rec) {
+    const el = rec.el;
+    if (!rec.invoker && el.id && window.CSS && CSS.escape) {
+        const id = CSS.escape(el.id);
+        rec.invoker = document.querySelector(`[popovertarget="${id}"], [aria-controls="${id}"]`) || null;
+    }
+    let p = (rec.invoker && rec.invoker.isConnected) ? rec.invoker : el.parentElement;
+    for (let depth = 0; p && depth < 6; p = p.parentElement, depth++) {
+        const r = p.getBoundingClientRect();
+        if (r.width || r.height) return r;
+    }
+    return null;
+}
+function nearViewport(rec) {
+    const r = anchorRect(rec);
+    return !!r && r.bottom > 0 && r.top < window.innerHeight && r.right > 0 && r.left < window.innerWidth;
+}
+function rank(rec) {
+    if (rec.near === undefined) rec.near = nearViewport(rec);
+    return (rec.urgent ? 0 : 4) + (rec.near ? 0 : 2);
+}
 function next() {
-    let best = null;
+    let best = null, bestRank = 0;
     for (const rec of pending) {
         if (!rec.el.isConnected) { pending.delete(rec); continue; }
+        if (!reachable(rec.el)) continue;
+        const r = rank(rec);
         if (!best
-            || (rec.urgent && !best.urgent)
-            || (rec.urgent === best.urgent && (rec.priority < best.priority
+            || r < bestRank
+            || (r === bestRank && (rec.priority < best.priority
                 || (rec.priority === best.priority && (best.el.compareDocumentPosition(rec.el) & Node.DOCUMENT_POSITION_PRECEDING))))) {
-            best = rec;
+            best = rec; bestRank = r;
         }
     }
     return best;
 }
 
 function schedule() {
-    if (idleHandle !== null || !ready || pending.size === 0) return;
+    if (pending.size === 0) { if (ready) bootDrained = true; return; }
+    if (idleHandle !== null || !ready) return;
     const head = next();
-    idleHandle = idle(() => {
+    if (!head) { if (ready) bootDrained = true; return; }
+    if (!head.urgent && warm.size >= PREWARM_CAP) return;       // paused at the cap; resumes when a warm one opens or evicts
+    idleHandle = idle((deadline) => {
         idleHandle = null;
-        const rec = next();
-        if (rec) render(rec);
+        // Forced fire (never-idle page): one container. Genuine idle: batch within the budget.
+        let n = 0;
+        do {
+            const rec = next();
+            if (!rec) break;
+            if (!rec.urgent && warm.size >= PREWARM_CAP) break;   // cap = max warm; only urgent renders may exceed it
+            for (const other of pending) other.near = undefined;
+            render(rec, true);
+            n++;
+        } while (deadline && !deadline.didTimeout && deadline.timeRemaining() > IDLE_BUDGET_MS && n < SLICE_MAX);
+        evict();
         schedule();
-    }, head && head.urgent ? 100 : 1000);
+    }, head.urgent ? 100 : 500);
 }
 
 function markReady() {
     if (ready) return;
     ready = true;
     schedule();
+    setTimeout(() => { bootDrained = true; }, 5000); // lazy components may keep the boot queue busy
 }
 
 function armReady() {
@@ -227,6 +361,7 @@ function intercept(el, skip) {
 function initializeDeferPlugin() {
     Alpine.directive('defer', () => { });
     if (!killed) Alpine.interceptInit(Alpine.skipDuringClone(intercept));
+    ['pointerdown', 'keydown'].forEach((type) => document.addEventListener(type, onGesture, { capture: true, passive: true }));
     armReady();
 }
 
@@ -234,7 +369,8 @@ window.ManifestDefer = {
     enabled: !killed,
     defer,
     render: (el) => { if (el && el.__mnfstDefer) render(el.__mnfstDefer); },
-    isPending: (el) => !!(el && el.__mnfstDefer && !el.__mnfstDefer.rendered)
+    isPending: (el) => !!(el && el.__mnfstDefer && !el.__mnfstDefer.rendered),
+    stats: () => ({ pending: pending.size, warm: warm.size, cap: PREWARM_CAP, ready, bootDrained, armed: idleHandle !== null, head: (() => { const h = next(); return h ? (h.el.id || h.el.tagName) : null; })() })
 };
 if (window.Manifest && typeof window.Manifest === 'object') window.Manifest.defer = defer;
 

package/lib/manifest.integrity.json

@@ -12,7 +12,7 @@
   "manifest.computed.js": "sha384-LDxER8pyYyYwUxIYIyiJA02s+49g8CzpSlOj28On0DFIUgetT3UmvE/9xOsTwT66",
   "manifest.data.js": "sha384-urUiANuQfrc+AfwTB7+nMneF2C1+EfV+S5+eg4PQnZCJ0Aid50KwSARufiVrGAXd",
   "manifest.datepicker.js": "sha384-8vTJYkLqqvgXgm1w1becuaRR/jUEpiLBjBJ6RsRbUr+ZkypvspD6EsssuDrX4SQq",
-  "manifest.defer.js": "sha384-wjQ3a8ClODUJi4xlBRI03G7qWOF+DN+fJQXyxcp1jekNwrMqbgshR0LSCgkJJUiH",
+  "manifest.defer.js": "sha384-szMa04R4gWsZl3nICHz3Mtku8vgROEHvrAIMap+wuqITKvMVQHJOa0kVzHHjMcwN",
   "manifest.dropdowns.js": "sha384-4HuHkBt4i8sTPUDLB9rNLli2/lWLY1tjtCLzey37gRwueG+FRLCnVH1q7ljiVvJR",
   "manifest.edit.js": "sha384-ZvgV3ax7yHtSC23zdvRYJPzBsBpGFBLuBJMgfQ1IDumv97Cn2bpHOePxyQikfl5L",
   "manifest.export.js": "sha384-HCy3n6ifrcAGIyzTRgZ5JIRvSX9q9/8ykMKRSbt1QTnhXz6PgYlV0AE2N2Yi2re+",
@@ -33,6 +33,6 @@
   "manifest.tooltips.js": "sha384-uXVVQADl6pY2Pj9i/UaSclZN7dzbKhLkmevv7Ad0+wXR8LgqodALNFrc5jZJjlwm",
   "manifest.url.parameters.js": "sha384-J2aSVBOPsoqsbafHndrWLHEDpKb4AKJAoQnVmKA4gZh5P/8HHjFWHO/lkusmG84l",
   "manifest.utilities.js": "sha384-YcGKTEviTv9FLkw890CTociA7Rjp6xuhLyfpn3Gk4mT0fexDFqpW7VSuohcpGfsw",
-  "manifest.virtual.js": "sha384-OPHiW1zQxunoL+yJrCxFU3AzTfTlZQfUf6X3XSRrSyNDPlr3BvsYe6vZa0DlOjoY",
+  "manifest.virtual.js": "sha384-YwwmAsZNddajnAkLhBWtrK8edHMJOhD7cJkQi3qmm5o1Thg0wbtDU0dsfrCHKTIQ",
   "manifest.js": "sha384-IaRa1ZZNj8C/mcB9e6qNiTqK7oriQr0Vmt4Q7FcGWOqfUgPxojYixbs+g8XR9lNz"
 }

package/lib/manifest.virtual.js

@@ -421,7 +421,7 @@ function initializeVirtualPlugin() {
 
         let resizeTimer = null;
         const ro = new ResizeObserver(() => {
-            if (!ready) { render(); return; }                    // first paint once sized
+            if (!ready) { requestAnimationFrame(render); return; } // first paint once sized, off the observer tick
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout(() => { rebuild(); render(); }, 100);  // debounced re-pack
         });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.198-next.1",
+    "version": "0.5.198-next.3",
     "private": false,
     "workspaces": [
         "templates/starter",