@floegence/floe-webapp-core 0.69.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.69.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": [