@floegence/floe-webapp-core 0.69.0 → 0.71.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/remote-input.css

@@ -0,0 +1,22 @@
+/* A real input anchors the operating system's IME without covering the surface. */
+.floe-remote-input {
+  position: fixed;
+  z-index: 10;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+  resize: none;
+  overflow: hidden;
+  font: 16px/1.5 sans-serif;
+}
+.floe-remote-input[data-composing] {
+  width: 20rem;
+  height: 1.5em;
+  opacity: 1;
+  color: var(--foreground, CanvasText);
+  background: var(--background, Canvas);
+}

package/dist/remote-input.d.ts

@@ -0,0 +1,38 @@
+/** Client-owned editing for a remote surface. No document contents are mirrored. */
+export interface RemoteInputKey {
+    key: string;
+    code: string;
+    pressed: boolean;
+    repeat: boolean;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+    location: number;
+}
+export interface RemoteInputOptions<T> {
+    surface: HTMLElement;
+    label: string;
+    commitText(text: string, target: T): void;
+    sendKey(key: RemoteInputKey, target: T): void;
+    release(target: T): void;
+    /** Existing clipboard transport may own a shortcut; never submit it twice. */
+    clipboard?: (event: KeyboardEvent, target: T) => boolean;
+    onKeyboardVisibilityChange?: (visible: boolean) => void;
+}
+export interface RemoteInputController<T> {
+    readonly element: HTMLTextAreaElement;
+    bindTarget(target: T | null): void;
+    setAnchor(clientX: number, clientY: number): void;
+    focus(): void;
+    setKeyboardVisible(visible: boolean): void;
+    release(): void;
+    reset(): void;
+    dispose(): void;
+}
+/**
+ * The caller gives this controller exclusive keyboard/editing ownership of its
+ * surface. Pointer transport and clipboard synchronization remain caller-owned.
+ * Targets are immutable identity tokens; bind a new token when ownership changes.
+ */
+export declare function createRemoteInput<T>(options: RemoteInputOptions<T>): RemoteInputController<T>;

package/dist/remote-input.js

@@ -0,0 +1,145 @@
+function I(a) {
+  const { surface: M } = a, k = M.ownerDocument, c = k.defaultView;
+  if (!c) throw new Error("Remote input requires an attached document");
+  const t = k.createElement("textarea");
+  t.className = "floe-remote-input", t.setAttribute("aria-label", a.label), t.setAttribute("autocorrect", "off"), t.autocomplete = "off", t.autocapitalize = "off", t.spellcheck = !1, t.wrap = "off", t.disabled = !0, t.tabIndex = -1, k.body.append(t);
+  let l = null, y = 0, u = !1, V = !1, o = null, p = !1, s = null;
+  const h = /* @__PURE__ */ new Set(), w = /* @__PURE__ */ new Set();
+  let C = null;
+  const E = [];
+  function n(e, i, r) {
+    const g = r;
+    e.addEventListener(i, g), E.push(() => e.removeEventListener(i, g));
+  }
+  const b = (e) => e.code || e.key, x = (e, i) => ({
+    key: e.key,
+    code: e.code,
+    pressed: i,
+    repeat: e.repeat,
+    location: e.location,
+    shiftKey: e.shiftKey,
+    ctrlKey: e.ctrlKey,
+    altKey: e.altKey,
+    metaKey: e.metaKey
+  });
+  function K(e) {
+    V !== e && (V = e, a.onKeyboardVisibilityChange?.(e));
+  }
+  function f() {
+    const e = M.getBoundingClientRect(), i = c.visualViewport, r = Math.max(e.left, i?.offsetLeft ?? 0), g = Math.max(e.top, i?.offsetTop ?? 0), D = Math.min(e.right, (i?.offsetLeft ?? 0) + (i?.width ?? c.innerWidth)), F = Math.min(e.bottom, (i?.offsetTop ?? 0) + (i?.height ?? c.innerHeight)), L = Math.max(1, Math.min(320, D - r - 8));
+    t.style.maxWidth = `${L}px`;
+    const S = t.getBoundingClientRect(), P = C?.x ?? r + 12, R = C?.y ?? g + 12;
+    t.style.left = `${Math.max(r, Math.min(P, D - S.width - 4))}px`, t.style.top = `${Math.max(g, Math.min(R, F - S.height - 4))}px`;
+  }
+  function d() {
+    t.value = "", delete t.dataset.composing, s = null;
+  }
+  function B() {
+    const e = l, i = h.size > 0;
+    h.clear(), e !== null && i && a.release(e);
+  }
+  function m() {
+    y++, o && (o.cancelled = !0), p = !0, d(), B(), o && k.activeElement === t && t.blur();
+  }
+  function T(e) {
+    !e || l === null || u || a.commitText(e, l);
+  }
+  function z(e) {
+    if (l === null) return;
+    const i = { key: e, code: e, pressed: !0, repeat: !1, shiftKey: !1, ctrlKey: !1, altKey: !1, metaKey: !1, location: 0 }, r = l;
+    a.sendKey(i, r), l === r && a.sendKey({ ...i, pressed: !1 }, r);
+  }
+  function A(e) {
+    if (l === null || u) {
+      d();
+      return;
+    }
+    if (o?.cancelled || o && o.epoch !== y) {
+      d();
+      return;
+    }
+    if (e.isComposing) {
+      o ??= { epoch: y, committed: !1, cancelled: !1 }, t.dataset.composing = "true", f();
+      return;
+    }
+    if (o) {
+      !o.committed && t.value && (o.committed = !0, T(t.value)), d();
+      return;
+    }
+    if (p || e.inputType === "insertFromComposition") {
+      p = !1, d();
+      return;
+    }
+    const i = t.value;
+    if (s && i === s.key && !s.altKey && i.length === 1) {
+      const r = s;
+      h.add(r.code || r.key), a.sendKey(r, l);
+    } else T(i);
+    d();
+  }
+  return n(t, "keydown", (e) => {
+    if (!(l === null || u)) {
+      if (e.stopPropagation(), o?.cancelled && !e.isComposing && e.key !== "Process" && e.keyCode !== 229 && (o = null), e.isComposing || o || e.key === "Process" || e.keyCode === 229) {
+        w.add(b(e)), s = null;
+        return;
+      }
+      if (w.delete(b(e)), p = !1, a.clipboard?.(e, l)) {
+        s = null;
+        return;
+      }
+      if (e.key === "Dead" || e.key === "Unidentified") {
+        s = null;
+        return;
+      }
+      if (Array.from(e.key).length === 1 && !e.metaKey && (!e.ctrlKey || e.getModifierState("AltGraph"))) {
+        s = x(e, !0);
+        return;
+      }
+      e.preventDefault(), h.add(b(e)), a.sendKey(x(e, !0), l);
+    }
+  }), n(t, "keyup", (e) => {
+    e.stopPropagation(), s = null, !w.delete(b(e)) && l !== null && h.delete(b(e)) && a.sendKey(x(e, !1), l);
+  }), n(t, "beforeinput", (e) => {
+    if (l === null || u) {
+      e.preventDefault();
+      return;
+    }
+    if (e.isComposing || o || e.inputType === "insertCompositionText" || e.inputType === "deleteCompositionText" || e.inputType === "insertFromComposition") return;
+    p = !1;
+    const r = { deleteContentBackward: "Backspace", deleteContentForward: "Delete", insertLineBreak: "Enter", insertParagraph: "Enter" }[e.inputType];
+    r && (e.preventDefault(), d(), z(r));
+  }), n(t, "input", A), n(t, "compositionstart", () => {
+    o = { epoch: y, committed: !1, cancelled: l === null }, p = !1, s = null, t.dataset.composing = "true", f();
+  }), n(t, "compositionend", (e) => {
+    const i = o;
+    o = null, p = !0, d(), i && !i.cancelled && !i.committed && i.epoch === y && T(e.data);
+  }), n(t, "blur", () => {
+    m(), K(!1);
+  }), n(c, "blur", m), n(c, "pagehide", m), n(c, "resize", f), c.visualViewport && (n(c.visualViewport, "resize", f), n(c.visualViewport, "scroll", f)), f(), {
+    element: t,
+    bindTarget(e) {
+      u || Object.is(l, e) || (m(), l = e, t.disabled = e === null);
+    },
+    setAnchor(e, i) {
+      !Number.isFinite(e) || !Number.isFinite(i) || (C = { x: e, y: i }, f());
+    },
+    focus() {
+      l === null || u || (t.focus({ preventScroll: !0 }), f());
+    },
+    setKeyboardVisible(e) {
+      e && l !== null && !u ? (t.focus({ preventScroll: !0 }), K(!0), f()) : (t.blur(), K(!1));
+    },
+    release: B,
+    reset: m,
+    dispose() {
+      if (!u) {
+        m(), u = !0, l = null;
+        for (const e of E) e();
+        t.remove(), K(!1);
+      }
+    }
+  };
+}
+export {
+  I as createRemoteInput
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.69.0",
+  "version": "0.71.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -108,10 +108,19 @@
     },
     "./progress-shimmer.css": "./dist/progress-shimmer.css",
     "./window-status.css": "./dist/window-status.css",
+    "./remote-input.css": "./dist/remote-input.css",
     "./window-status": {
       "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"
+    },
+    "./remote-input": {
+      "types": "./dist/remote-input.d.ts",
+      "import": "./dist/remote-input.js"
     }
   },
   "files": [