@floegence/floe-webapp-core 0.70.0 → 0.72.0

package/dist/layout.js

@@ -1,39 +1,41 @@
 import { ActivityBar as r } from "./components/layout/ActivityBar.js";
-import { BottomBar as a, BottomBarItem as i, StatusIndicator as m } from "./components/layout/BottomBar.js";
-import { BottomBarCompanion as n } from "./components/layout/BottomBarCompanion.js";
-import { DisplayModePageShell as x } from "./components/layout/DisplayModePageShell.js";
-import { DisplayModeSwitcher as d, sanitizeDisplayMode as S } from "./components/layout/DisplayModeSwitcher.js";
-import { KeepAliveStack as b } from "./components/layout/KeepAliveStack.js";
-import { MobileTabBar as c } from "./components/layout/MobileTabBar.js";
-import { Panel as P, PanelContent as y, PanelHeader as M } from "./components/layout/Panel.js";
-import { ResizeHandle as C } from "./components/layout/ResizeHandle.js";
-import { Shell as T } from "./components/layout/Shell.js";
-import { Sidebar as v, SidebarContent as z, SidebarItem as A, SidebarItemList as H, SidebarSection as g } from "./components/layout/Sidebar.js";
-import { SidebarPane as w } from "./components/layout/SidebarPane.js";
-import { TopBar as L } from "./components/layout/TopBar.js";
-import { TopBarIconButton as j } from "./components/layout/TopBarIconButton.js";
+import { AppViewport as a } from "./components/layout/AppViewport.js";
+import { BottomBar as i, BottomBarItem as m, StatusIndicator as n } from "./components/layout/BottomBar.js";
+import { BottomBarCompanion as x } from "./components/layout/BottomBarCompanion.js";
+import { DisplayModePageShell as d } from "./components/layout/DisplayModePageShell.js";
+import { DisplayModeSwitcher as B, sanitizeDisplayMode as b } from "./components/layout/DisplayModeSwitcher.js";
+import { KeepAliveStack as c } from "./components/layout/KeepAliveStack.js";
+import { MobileTabBar as P } from "./components/layout/MobileTabBar.js";
+import { Panel as M, PanelContent as h, PanelHeader as A } from "./components/layout/Panel.js";
+import { ResizeHandle as D } from "./components/layout/ResizeHandle.js";
+import { Shell as u } from "./components/layout/Shell.js";
+import { Sidebar as w, SidebarContent as z, SidebarItem as H, SidebarItemList as g, SidebarSection as k } from "./components/layout/Sidebar.js";
+import { SidebarPane as L } from "./components/layout/SidebarPane.js";
+import { TopBar as V } from "./components/layout/TopBar.js";
+import { TopBarIconButton as q } from "./components/layout/TopBarIconButton.js";
 export {
   r as ActivityBar,
-  a as BottomBar,
-  n as BottomBarCompanion,
-  i as BottomBarItem,
-  x as DisplayModePageShell,
-  d as DisplayModeSwitcher,
-  b as KeepAliveStack,
-  c as MobileTabBar,
-  P as Panel,
-  y as PanelContent,
-  M as PanelHeader,
-  C as ResizeHandle,
-  T as Shell,
-  v as Sidebar,
+  a as AppViewport,
+  i as BottomBar,
+  x as BottomBarCompanion,
+  m as BottomBarItem,
+  d as DisplayModePageShell,
+  B as DisplayModeSwitcher,
+  c as KeepAliveStack,
+  P as MobileTabBar,
+  M as Panel,
+  h as PanelContent,
+  A as PanelHeader,
+  D as ResizeHandle,
+  u as Shell,
+  w as Sidebar,
   z as SidebarContent,
-  A as SidebarItem,
-  H as SidebarItemList,
-  w as SidebarPane,
-  g as SidebarSection,
-  m as StatusIndicator,
-  L as TopBar,
-  j as TopBarIconButton,
-  S as sanitizeDisplayMode
+  H as SidebarItem,
+  g as SidebarItemList,
+  L as SidebarPane,
+  k as SidebarSection,
+  n as StatusIndicator,
+  V as TopBar,
+  q as TopBarIconButton,
+  b as sanitizeDisplayMode
 };

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
+};