@floegence/floe-webapp-core 0.68.0 → 0.70.0

package/dist/reload-placeholder.d.ts

@@ -0,0 +1,24 @@
+export interface ReloadPlaceholderOptions {
+    /** Session-only presentation storage; never put resource data in this record. */
+    storageKey: string;
+    /** Optional session-storage identity to isolate navigation between environments. */
+    scopeStorageKey?: string;
+}
+export interface ReloadPlaceholder {
+    active(): boolean;
+    /** Keep the matching content placeholder while the live shell becomes usable. */
+    restrictTo(element: Element): void;
+    finish(): void;
+    /** Capture only anonymous geometry on pagehide, from the current authorized view. */
+    arm(root: Element, surfaces: string): void;
+    /** Explicit revocation discards the placeholder and its session record. */
+    clear(): void;
+}
+declare global {
+    interface Window {
+        __floeReloadPlaceholder?: ReloadPlaceholder;
+    }
+}
+/** Insert before external scripts/styles. It restores anonymous layout, never cached facts. */
+export declare function createReloadPlaceholderScript(options: ReloadPlaceholderOptions): string;
+export declare function getReloadPlaceholder(): ReloadPlaceholder | undefined;

package/dist/reload-placeholder.js

@@ -0,0 +1,124 @@
+function P(h) {
+  const s = document, $ = 48e3, b = 240, A = () => h.scopeStorageKey ? sessionStorage.getItem(h.scopeStorageKey) ?? "" : "", g = (o) => typeof o == "string" && o.length <= 120 && !/[;{}<>\\]|url\(|var\(/i.test(o) && CSS.supports("color", o);
+  let l, a, C = "", d;
+  try {
+    const o = sessionStorage.getItem(h.storageKey), e = o && o.length <= $ ? JSON.parse(o) : void 0;
+    e?.version === 1 && e.scope === A() && e.width === innerWidth && e.height === innerHeight && g(e.background) && Array.isArray(e.scroll) && e.scroll.length <= 12 && e.scroll.every((r) => Array.isArray(r) && r.length === 3 && /^[a-z0-9-]{1,48}$/.test(r[0]) && r.slice(1).every((i) => typeof i == "number" && Number.isFinite(i) && i >= 0 && i <= 1e7)) && Array.isArray(e.boxes) && e.boxes.length > 0 && e.boxes.length <= b && e.boxes.every((r) => Array.isArray(r) && r.length === 7 && r.slice(0, 5).every((i) => typeof i == "number" && Number.isFinite(i) && i >= 0 && i <= 2e4) && g(r[5]) && g(r[6])) && (d = e);
+  } catch {
+  }
+  const M = () => {
+    if (!(!d || !s.body)) {
+      l = s.createElement("div"), l.dataset.floeReloadPlaceholder = "", l.setAttribute("aria-hidden", "true"), l.inert = !0, Object.assign(l.style, {
+        position: "fixed",
+        inset: "0",
+        zIndex: "2147483000",
+        overflow: "hidden",
+        backgroundColor: d.background,
+        pointerEvents: "none",
+        contain: "strict"
+      });
+      for (const [o, e, r, i, x, m, w] of d.boxes) {
+        const p = s.createElement("div");
+        Object.assign(p.style, {
+          position: "absolute",
+          left: `${o}px`,
+          top: `${e}px`,
+          width: `${r}px`,
+          height: `${i}px`,
+          borderRadius: `${x}px`,
+          backgroundColor: m,
+          border: `1px solid ${w}`,
+          boxSizing: "border-box"
+        }), l.append(p);
+      }
+      s.body.append(l);
+    }
+  }, v = new MutationObserver(() => {
+    s.body && (v.disconnect(), M());
+  });
+  s.body ? M() : d && v.observe(s.documentElement, { childList: !0 });
+  const y = () => {
+    v.disconnect();
+    for (const [o, e, r] of d?.scroll ?? []) {
+      const i = s.querySelector(`[data-floe-reload-scroll="${o}"]`);
+      i && (i.scrollLeft = e, i.scrollTop = r);
+    }
+    d = void 0, l?.remove(), l = void 0;
+  }, N = () => {
+    a = void 0, y();
+    try {
+      sessionStorage.removeItem(h.storageKey);
+    } catch {
+    }
+  }, O = () => {
+    if (!a?.isConnected || l) return;
+    const o = [], e = getComputedStyle(s.body).backgroundColor;
+    if (!g(e)) return;
+    const r = (n) => {
+      const t = n.getBoundingClientRect(), c = getComputedStyle(n);
+      return t.width && t.height && t.bottom > 0 && t.right > 0 && t.top < innerHeight && t.left < innerWidth && c.visibility === "visible" ? t : null;
+    }, i = (n, t, c = "transparent", u = 3) => {
+      if (o.length >= b || !g(t) || !g(c)) return;
+      const f = Math.max(0, n.x), R = Math.max(0, n.y), k = Math.min(innerWidth, n.right) - f, E = Math.min(innerHeight, n.bottom) - R;
+      k <= 0 || E <= 0 || o.push([f, R, k, E, Math.max(0, Math.min(u, 100)), t, c]);
+    };
+    for (const n of a.querySelectorAll(C)) {
+      const t = r(n);
+      if (!t) continue;
+      const c = getComputedStyle(n);
+      i(t, c.backgroundColor, c.borderTopStyle === "none" ? "transparent" : c.borderTopColor, parseFloat(c.borderRadius) || 0);
+    }
+    const x = getComputedStyle(a).color, m = g(x) ? `color-mix(in srgb, ${x} 9%, ${e})` : "#d4d4d4";
+    for (const n of a.querySelectorAll("img,svg,input,textarea,canvas,video")) {
+      const t = r(n);
+      t && i(t, m, "transparent", Math.min(t.height / 4, 8));
+    }
+    const w = s.createTreeWalker(a, NodeFilter.SHOW_TEXT), p = s.createRange();
+    let S, T = 0;
+    for (; (S = w.nextNode()) && o.length < b && T++ < 12e3; ) {
+      const n = S.parentElement;
+      if (!(!n || n.closest('script,style,textarea,svg,[aria-hidden="true"]') || !r(n))) {
+        p.selectNodeContents(S);
+        for (const t of p.getClientRects())
+          t.width < 2 || i(new DOMRect(t.x, t.y + t.height * 0.22, t.width, t.height * 0.56), m);
+      }
+    }
+    if (o.length)
+      try {
+        const n = [];
+        for (const u of a.querySelectorAll("[data-floe-reload-scroll]")) {
+          const f = u.getAttribute("data-floe-reload-scroll");
+          /^[a-z0-9-]{1,48}$/.test(f) && n.length < 12 && r(u) && n.push([f, u.scrollLeft, u.scrollTop]);
+        }
+        const t = { version: 1, scope: A(), width: innerWidth, height: innerHeight, background: e, boxes: o, scroll: n }, c = JSON.stringify(t);
+        c.length <= $ && sessionStorage.setItem(h.storageKey, c);
+      } catch {
+      }
+  };
+  window.__floeReloadPlaceholder = {
+    active: () => !!d,
+    restrictTo(o) {
+      if (!l) return;
+      const e = o.getBoundingClientRect();
+      l.style.clipPath = `inset(${Math.max(0, e.top)}px ${Math.max(0, innerWidth - e.right)}px ${Math.max(0, innerHeight - e.bottom)}px ${Math.max(0, e.left)}px)`;
+    },
+    finish: y,
+    arm(o, e) {
+      a = o, C = e;
+    },
+    clear: N
+  }, window.addEventListener("pagehide", O), window.addEventListener("resize", y, { once: !0 }), window.addEventListener("pageshow", (o) => {
+    o.persisted && y();
+  });
+}
+function W(h) {
+  const s = JSON.stringify(h).replaceAll("<", "\\u003c").replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029");
+  return `;(${P.toString()})(${s});`;
+}
+function H() {
+  return typeof window > "u" ? void 0 : window.__floeReloadPlaceholder;
+}
+export {
+  W as createReloadPlaceholderScript,
+  H as getReloadPlaceholder
+};

package/dist/resource-cache.d.ts

@@ -38,6 +38,8 @@ export interface CachedResourceDefinition<T> {
 }
 export interface ResourceCache {
     resource<T>(definition: CachedResourceDefinition<T>): CachedResource<T>;
+    /** Abort pending refreshes without retiring snapshots, storage, hydration or subscribers. */
+    cancelRefreshes(scope: string): void;
     clearScope(scope: string): Promise<void>;
     flush(): Promise<void>;
     dispose(): void;

package/dist/resource-cache.js

@@ -1,177 +1,186 @@
-async function N(h, i) {
-  const g = [...await h.list()].sort((e, t) => e.lastAccessedAt - t.lastAccessedAt);
-  let l = g.reduce((e, t) => e + t.bytes, 0);
-  const n = [];
-  for (const e of g) {
-    if (l <= Math.max(0, i)) break;
-    await h.remove(e.key), n.push(e.key), l -= e.bytes;
+async function J(y, l) {
+  const m = [...await y.list()].sort((r, s) => r.lastAccessedAt - s.lastAccessedAt);
+  let i = m.reduce((r, s) => r + s.bytes, 0);
+  const a = [];
+  for (const r of m) {
+    if (i <= Math.max(0, l)) break;
+    await y.remove(r.key), a.push(r.key), i -= r.bytes;
   }
-  return n;
+  return a;
 }
-function I(h) {
-  const i = h.storage, g = Math.max(0, h.maxBytes ?? 32 * 1024 * 1024), l = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map();
-  let e, t = Promise.resolve(), o = !1;
-  const d = (s) => (t = t.then(s).catch(() => {
-  }), t), v = async () => {
-    const s = await N({
-      list: async () => (await i.list()).map((r) => ({ ...r, lastAccessedAt: Math.max(r.lastAccessedAt, l.get(r.key)?.accessedAt ?? 0) })),
-      remove: (r) => i.remove(r)
-    }, g);
-    for (const r of s) l.get(r)?.evicted();
-  }, y = async () => {
-    clearTimeout(e), e = void 0;
-    const s = [...n];
-    n.clear(), s.length && d(async () => {
-      for (const [r, f] of s)
-        if (f.valid())
+function z(y) {
+  const l = y.storage, m = Math.max(0, y.maxBytes ?? 32 * 1024 * 1024), i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map();
+  let r, s = Promise.resolve(), n = !1;
+  const d = (t) => (s = s.then(t).catch(() => {
+  }), s), f = async () => {
+    const t = await J({
+      list: async () => (await l.list()).map((e) => ({ ...e, lastAccessedAt: Math.max(e.lastAccessedAt, i.get(e.key)?.accessedAt ?? 0) })),
+      remove: (e) => l.remove(e)
+    }, m);
+    for (const e of t) i.get(e)?.evicted();
+  }, p = async () => {
+    clearTimeout(r), r = void 0;
+    const t = [...a];
+    a.clear(), t.length && d(async () => {
+      for (const [e, v] of t)
+        if (v.valid())
           try {
-            await i.set(r, f.value), f.stored();
+            await l.set(e, v.value), v.stored();
           } catch {
           }
-      await v();
-    }), await t;
-  }, k = (s, r, f, a) => {
-    n.set(s, { value: r, valid: f, stored: a }), e === void 0 && (e = setTimeout(() => {
-      y();
-    }, h.writeDelayMs ?? 100));
+      await f();
+    }), await s;
+  }, x = (t, e, v, o) => {
+    a.set(t, { value: e, valid: v, stored: o }), r === void 0 && (r = setTimeout(() => {
+      p();
+    }, y.writeDelayMs ?? 100));
   };
   return {
-    resource: (s) => {
-      if (o) throw new Error("Resource cache is disposed");
-      if (!s.scope || !s.key || !Number.isSafeInteger(s.version)) throw new Error("Invalid resource identity");
-      const r = JSON.stringify([s.scope, s.key, s.version]), f = l.get(r);
-      if (f)
-        return f.accessedAt = Date.now(), f.handle;
-      let a = { data: void 0, restoring: !0, refreshing: !1, stale: !0, error: void 0 };
-      const D = /* @__PURE__ */ new Set();
-      let R = 0, p = 0, q, x, b, w;
-      const m = () => {
-        for (const c of D) c();
-      }, E = (c) => {
-        ++R, a = { data: c, restoring: !1, refreshing: a.refreshing, stale: !1, error: void 0 };
+    resource: (t) => {
+      if (n) throw new Error("Resource cache is disposed");
+      if (!t.scope || !t.key || !Number.isSafeInteger(t.version)) throw new Error("Invalid resource identity");
+      const e = JSON.stringify([t.scope, t.key, t.version]), v = i.get(e);
+      if (v)
+        return v.accessedAt = Date.now(), v.handle;
+      let o = { data: void 0, restoring: !0, refreshing: !1, stale: !0, error: void 0 };
+      const S = /* @__PURE__ */ new Set();
+      let D = 0, w = 0, E, R, g, h, M;
+      const b = () => {
+        for (const c of S) c();
+      }, P = (c) => {
+        ++D, o = { data: c, restoring: !1, refreshing: o.refreshing, stale: !1, error: void 0 };
         try {
-          const u = JSON.stringify({ version: s.version, data: s.persist ? s.persist(c) : c });
-          q = u, u !== x ? k(r, u, () => q === u, () => {
-            x = u;
-          }) : n.delete(r);
+          const u = JSON.stringify({ version: t.version, data: t.persist ? t.persist(c) : c });
+          E = u, u !== R ? x(e, u, () => E === u, () => {
+            R = u;
+          }) : a.delete(e);
         } catch {
         }
-        m();
-      }, B = R, C = i.get(r).then((c) => {
-        if (!(o || R !== B || c === null))
+        b();
+      }, C = D, O = l.get(e).then((c) => {
+        if (!(n || D !== C || c === null))
           try {
             const u = JSON.parse(c);
-            if (u.version !== s.version) throw new Error("Unsupported snapshot");
-            const A = s.decode(u.data);
-            a = { ...a, data: A, stale: !0 }, q = c, x = c;
+            if (u.version !== t.version) throw new Error("Unsupported snapshot");
+            const A = t.decode(u.data);
+            o = { ...o, data: A, stale: !0 }, E = c, R = c;
           } catch {
-            d(() => i.remove(r));
+            d(() => l.remove(e));
           }
       }).catch(() => {
       }).finally(() => {
-        o || !a.restoring || (a = { ...a, restoring: !1 }, m());
-      }), M = {
-        snapshot: () => a,
-        subscribe: (c) => (D.add(c), () => {
-          D.delete(c);
+        n || !o.restoring || (o = { ...o, restoring: !1 }, b());
+      }), q = {
+        snapshot: () => o,
+        subscribe: (c) => (S.add(c), () => {
+          S.delete(c);
         }),
-        hydrate: () => C,
+        hydrate: () => O,
         refresh: (c) => {
-          if (w) return w;
-          const u = ++p, A = new AbortController();
-          return b = A, a = { ...a, refreshing: !0, error: void 0 }, m(), w = Promise.resolve().then(() => c(A.signal)).then((S) => (!o && u === p && !A.signal.aborted && E(S), S), (S) => {
-            throw !o && u === p && !A.signal.aborted && (a = { ...a, stale: !0, error: S }, m()), S;
-          }).finally(() => {
-            u === p && (w = void 0, b = void 0, a = { ...a, refreshing: !1 }, m());
-          }), w;
+          if (h) return h;
+          const u = ++w, A = new AbortController();
+          g = A, o = { ...o, refreshing: !0, error: void 0 }, b();
+          const B = new Promise((k, I) => {
+            M = () => I(new DOMException("Resource refresh cancelled", "AbortError"));
+          }), N = Promise.resolve().then(() => c(A.signal)).then((k) => (!n && u === w && !A.signal.aborted && P(k), k), (k) => {
+            throw !n && u === w && !A.signal.aborted && (o = { ...o, stale: !0, error: k }, b()), k;
+          });
+          return h = Promise.race([N, B]).finally(() => {
+            u === w && (h = void 0, g = void 0, M = void 0, o = { ...o, refreshing: !1 }, b());
+          }), h;
         },
         set: (c) => {
-          ++p, b?.abort(), w = void 0, a = { ...a, refreshing: !1 }, E(c);
+          ++w, g?.abort(), h = void 0, o = { ...o, refreshing: !1 }, P(c);
         },
         invalidate: (c = !1) => {
-          ++R, ++p, b?.abort(), b = void 0, w = void 0, q = void 0, x = void 0, n.delete(r), a = { data: c ? void 0 : a.data, restoring: !1, refreshing: !1, stale: !0, error: void 0 }, m(), d(() => i.remove(r));
+          ++D, ++w, g?.abort(), g = void 0, h = void 0, E = void 0, R = void 0, a.delete(e), o = { data: c ? void 0 : o.data, restoring: !1, refreshing: !1, stale: !0, error: void 0 }, b(), d(() => l.remove(e));
         }
       };
-      return l.set(r, { scope: s.scope, accessedAt: Date.now(), evicted: () => {
-        x = void 0;
-      }, handle: M, stop: () => {
-        ++p, b?.abort(), D.clear();
-      } }), M;
+      return i.set(e, { scope: t.scope, accessedAt: Date.now(), evicted: () => {
+        R = void 0;
+      }, handle: q, cancelRefresh: () => {
+        h && (++w, M?.(), M = void 0, g?.abort(), g = void 0, h = void 0, o = { ...o, refreshing: !1, stale: !0 }, b());
+      }, stop: () => {
+        ++w, g?.abort(), S.clear();
+      } }), q;
     },
-    flush: y,
-    clearScope: async (s) => {
-      for (const r of l.values()) r.scope === s && r.handle.invalidate(!0);
+    flush: p,
+    cancelRefreshes: (t) => {
+      for (const e of i.values()) e.scope === t && e.cancelRefresh();
+    },
+    clearScope: async (t) => {
+      for (const e of i.values()) e.scope === t && e.handle.invalidate(!0);
       await d(async () => {
-        for (const r of await i.list())
+        for (const e of await l.list())
           try {
-            JSON.parse(r.key)[0] === s && await i.remove(r.key);
+            JSON.parse(e.key)[0] === t && await l.remove(e.key);
           } catch {
           }
       });
     },
     dispose: () => {
-      if (!o) {
-        o = !0;
-        for (const s of l.values()) s.stop();
-        y(), l.clear();
+      if (!n) {
+        n = !0;
+        for (const t of i.values()) t.stop();
+        p(), i.clear();
       }
     }
   };
 }
-function J(h = "floe-resource-cache") {
-  let i;
-  const g = () => i ??= new Promise((n, e) => {
-    const t = indexedDB.open(h, 1);
-    t.onupgradeneeded = () => t.result.createObjectStore("snapshots", { keyPath: "key" }), t.onsuccess = () => {
-      const o = t.result;
-      o.onversionchange = () => {
-        o.close(), i = void 0;
-      }, n(o);
-    }, t.onerror = () => {
-      i = void 0, e(t.error);
-    }, t.onblocked = () => {
-      i = void 0, e(new Error("Resource cache database is blocked"));
+function L(y = "floe-resource-cache") {
+  let l;
+  const m = () => l ??= new Promise((a, r) => {
+    const s = indexedDB.open(y, 1);
+    s.onupgradeneeded = () => s.result.createObjectStore("snapshots", { keyPath: "key" }), s.onsuccess = () => {
+      const n = s.result;
+      n.onversionchange = () => {
+        n.close(), l = void 0;
+      }, a(n);
+    }, s.onerror = () => {
+      l = void 0, r(s.error);
+    }, s.onblocked = () => {
+      l = void 0, r(new Error("Resource cache database is blocked"));
     };
-  }), l = async (n, e) => {
-    const t = await g();
-    return new Promise((o, d) => {
-      const v = t.transaction("snapshots", n);
-      let y;
-      v.oncomplete = () => o(y), v.onerror = () => d(v.error), v.onabort = () => d(v.error ?? new Error("Resource cache transaction aborted")), e(v.objectStore("snapshots"), (k) => {
-        y = k;
+  }), i = async (a, r) => {
+    const s = await m();
+    return new Promise((n, d) => {
+      const f = s.transaction("snapshots", a);
+      let p;
+      f.oncomplete = () => n(p), f.onerror = () => d(f.error), f.onabort = () => d(f.error ?? new Error("Resource cache transaction aborted")), r(f.objectStore("snapshots"), (x) => {
+        p = x;
       });
     });
   };
   return {
-    get: (n) => l("readwrite", (e, t) => {
-      const o = e.get(n);
-      o.onsuccess = () => {
-        const d = o.result;
-        d && e.put({ ...d, lastAccessedAt: Date.now() }), t(d?.value ?? null);
+    get: (a) => i("readwrite", (r, s) => {
+      const n = r.get(a);
+      n.onsuccess = () => {
+        const d = n.result;
+        d && r.put({ ...d, lastAccessedAt: Date.now() }), s(d?.value ?? null);
       };
     }),
-    set: (n, e) => l("readwrite", (t, o) => {
-      t.put({ key: n, value: e, bytes: new TextEncoder().encode(e).byteLength, lastAccessedAt: Date.now() }), o(void 0);
+    set: (a, r) => i("readwrite", (s, n) => {
+      s.put({ key: a, value: r, bytes: new TextEncoder().encode(r).byteLength, lastAccessedAt: Date.now() }), n(void 0);
     }),
-    remove: (n) => l("readwrite", (e, t) => {
-      e.delete(n), t(void 0);
+    remove: (a) => i("readwrite", (r, s) => {
+      r.delete(a), s(void 0);
     }),
-    list: () => l("readonly", (n, e) => {
-      const t = [], o = n.openCursor();
-      o.onsuccess = () => {
-        const d = o.result;
+    list: () => i("readonly", (a, r) => {
+      const s = [], n = a.openCursor();
+      n.onsuccess = () => {
+        const d = n.result;
         if (!d) {
-          e(t);
+          r(s);
           return;
         }
-        const { key: v, bytes: y, lastAccessedAt: k } = d.value;
-        t.push({ key: v, bytes: y, lastAccessedAt: k }), d.continue();
+        const { key: f, bytes: p, lastAccessedAt: x } = d.value;
+        s.push({ key: f, bytes: p, lastAccessedAt: x }), d.continue();
       };
     })
   };
 }
 export {
-  J as createIndexedDBResourceCacheStorage,
-  I as createResourceCache,
-  N as enforceResourceCacheBudget
+  L as createIndexedDBResourceCacheStorage,
+  z as createResourceCache,
+  J as enforceResourceCacheBudget
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.68.0",
+  "version": "0.70.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -112,6 +112,10 @@
       "types": "./dist/window-status.d.ts",
       "import": "./dist/window-status.js",
       "default": "./dist/window-status.js"
+    },
+    "./reload-placeholder": {
+      "types": "./dist/reload-placeholder.d.ts",
+      "import": "./dist/reload-placeholder.js"
     }
   },
   "files": [