@floegence/floe-webapp-core 0.70.0 → 0.71.0

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.70.0",
+  "version": "0.71.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -108,6 +108,7 @@
     },
     "./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",
@@ -116,6 +117,10 @@
     "./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": [