@floegence/floe-webapp-core 0.86.18 → 0.86.20

package/dist/components/graph/GraphCanvas.d.ts

@@ -1,4 +1,5 @@
 import { type JSX } from 'solid-js';
+import { type GraphMinimapProps } from './GraphMinimap';
 import type { GraphLayout, GraphLayoutNode, GraphObjectEvent, GraphObjectRef, GraphViewport } from './types';
 export interface GraphNodeRenderContext {
     selected: () => boolean;
@@ -22,9 +23,7 @@ export interface GraphCanvasProps {
     /** Overlay content should use shared SurfaceFloatingLayer for point placement. */
     overlay?: JSX.Element;
     /** Optional interactive overview. Its geometry follows the same visible layout. */
-    minimap?: {
-        ariaLabel: string;
-    };
+    minimap?: Pick<GraphMinimapProps, 'ariaLabel' | 'nodeStyle'>;
     class?: string;
 }
 /** Controlled graph surface. Hosts own documents and selection; Floe owns geometry and input. */

package/dist/components/graph/GraphCanvas.js

@@ -1,11 +1,11 @@
-import { insert as w, createComponent as x, setAttribute as l, effect as S, className as K, template as I, memo as ae, setStyleProperty as T, use as ie, delegateEvents as oe } from "solid-js/web";
+import { insert as w, createComponent as x, setAttribute as l, effect as L, className as K, template as I, memo as ae, setStyleProperty as T, use as ie, delegateEvents as oe } from "solid-js/web";
 import { createUniqueId as le, createSignal as O, createMemo as y, onMount as ce, For as j, Show as D, onCleanup as de } from "solid-js";
 import { InfiniteCanvas as ue } from "../ui/InfiniteCanvas.js";
 import { resolveSurfaceInteractionTargetRole as se } from "../ui/localInteractionSurface.js";
 import { graphRelatedEdges as U, graphEdgeLabelPosition as he, graphSectionPath as ge } from "./geometry.js";
 import { GraphMinimap as fe } from "./GraphMinimap.js";
 var ve = /* @__PURE__ */ I("<div data-floe-canvas-pan-surface=true role=group tabindex=0>"), me = /* @__PURE__ */ I("<div role=region tabindex=0>"), be = /* @__PURE__ */ I('<svg class=floe-graph__edges width=1 height=1><defs><marker viewBox="0 0 8 8"refX=7 refY=4 markerWidth=7 markerHeight=7 orient=auto-start-reverse><path d="M1 1 L7 4 L1 7"fill=none stroke=context-stroke stroke-width=1.2>'), xe = /* @__PURE__ */ I("<svg><g><path class=floe-graph__edge></path><path class=floe-graph__edge-target tabindex=0 role=button data-floe-canvas-pan-surface=true></svg>", !1, !0, !1), ye = /* @__PURE__ */ I("<svg><text class=floe-graph__edge-label aria-hidden=true></svg>", !1, !0, !1);
-function Le(i) {
+function Ee(i) {
   const H = `graph-arrow-${le()}`;
   let g;
   const [J, Q] = O(null), [V, Z] = O({
@@ -103,7 +103,7 @@ function Le(i) {
       }, r.$$focusout = () => f(null), r.$$focusin = () => f(t), r.addEventListener("pointerleave", () => f(null)), r.addEventListener("pointerenter", () => f(t)), w(r, (() => {
         var a = ae(() => !!(e.kind === "group" && i.renderGroup));
         return () => a() ? i.renderGroup(e, n) : i.renderNode(e, n);
-      })()), S((a) => {
+      })()), L((a) => {
         var m = e.kind === "group" ? "floe-graph__group" : "floe-graph__node", c = e.id, d = A(t), _ = `${e.x}px`, P = `${e.y}px`, $ = `${e.width}px`, u = `${e.height}px`, v = e.label;
         return m !== a.e && K(r, a.e = m), c !== a.t && l(r, "data-graph-object", a.t = c), d !== a.a && l(r, "data-selected", a.a = d), _ !== a.o && T(r, "left", a.o = _), P !== a.i && T(r, "top", a.i = P), $ !== a.n && T(r, "width", a.n = $), u !== a.s && T(r, "height", a.s = u), v !== a.h && l(r, "aria-label", a.h = v), a;
       }, {
@@ -179,9 +179,9 @@ function Le(i) {
                     },
                     children: (o) => (() => {
                       var b = ye();
-                      return w(b, () => u.label), S((h) => {
-                        var M = /^\d+$/.test(u.label), E = o().x, L = o().y - 6;
-                        return M !== h.e && l(b, "data-count", h.e = M), E !== h.t && l(b, "x", h.t = E), L !== h.a && l(b, "y", h.a = L), h;
+                      return w(b, () => u.label), L((h) => {
+                        var M = /^\d+$/.test(u.label), S = o().x, E = o().y - 6;
+                        return M !== h.e && l(b, "data-count", h.e = M), S !== h.t && l(b, "x", h.t = S), E !== h.a && l(b, "y", h.a = E), h;
                       }, {
                         e: void 0,
                         t: void 0,
@@ -190,9 +190,9 @@ function Le(i) {
                     })()
                   }), s), s.$$keydown = (o) => G(v, o), s.$$contextmenu = (o) => z(v, o), s.$$click = (o) => {
                     o.stopPropagation(), i.onActivate?.(k(v, o.currentTarget, o));
-                  }, s.addEventListener("blur", () => f(null)), s.addEventListener("focus", () => f(v)), s.addEventListener("pointerleave", () => f(null)), s.addEventListener("pointerenter", () => f(v)), S((o) => {
-                    var b = u.id, h = ee().has(u.id), M = A(v), E = W(), L = W(), q = u.label;
-                    return b !== o.e && l(C, "data-graph-object", o.e = b), h !== o.t && l(C, "data-emphasized", o.t = h), M !== o.a && l(C, "data-selected", o.a = M), E !== o.o && l(R, "d", o.o = E), L !== o.i && l(s, "d", o.i = L), q !== o.n && l(s, "aria-label", o.n = q), o;
+                  }, s.addEventListener("blur", () => f(null)), s.addEventListener("focus", () => f(v)), s.addEventListener("pointerleave", () => f(null)), s.addEventListener("pointerenter", () => f(v)), L((o) => {
+                    var b = u.id, h = ee().has(u.id), M = A(v), S = W(), E = W(), q = u.label;
+                    return b !== o.e && l(C, "data-graph-object", o.e = b), h !== o.t && l(C, "data-emphasized", o.t = h), M !== o.a && l(C, "data-selected", o.a = M), S !== o.o && l(R, "d", o.o = S), E !== o.i && l(s, "d", o.i = E), q !== o.n && l(s, "aria-label", o.n = q), o;
                   }, {
                     e: void 0,
                     t: void 0,
@@ -204,7 +204,7 @@ function Le(i) {
                 }
               });
             }
-          }), null), S(() => l(d, "aria-label", i.ariaLabel)), d;
+          }), null), L(() => l(d, "aria-label", i.ariaLabel)), d;
         })(), x(j, {
           get each() {
             return m();
@@ -234,9 +234,12 @@ function Le(i) {
         },
         get ariaLabel() {
           return n().ariaLabel;
+        },
+        get nodeStyle() {
+          return n().nodeStyle;
         }
       })
-    }), null), w(e, () => i.overlay, null), S((n) => {
+    }), null), w(e, () => i.overlay, null), L((n) => {
       var r = `floe-graph ${i.class ?? ""}`, a = i.ariaLabel;
       return r !== n.e && K(e, n.e = r), a !== n.t && l(e, "aria-label", n.t = a), n;
     }, {
@@ -247,5 +250,5 @@ function Le(i) {
 }
 oe(["focusin", "focusout", "click", "contextmenu", "keydown"]);
 export {
-  Le as GraphCanvas
+  Ee as GraphCanvas
 };

package/dist/components/graph/GraphMinimap.d.ts

@@ -1,4 +1,9 @@
-import type { GraphLayout, GraphViewport } from './types';
+import type { GraphLayout, GraphLayoutNode, GraphViewport } from './types';
+export interface GraphMinimapNodeStyle {
+    /** CSS colors, including theme variables. Omitted colors retain the defaults. */
+    fill?: string;
+    stroke?: string;
+}
 export interface GraphMinimapProps {
     layout: GraphLayout;
     viewport: GraphViewport;
@@ -9,6 +14,8 @@ export interface GraphMinimapProps {
     onViewportChange: (viewport: GraphViewport) => void;
     onInteractionStart?: () => void;
     ariaLabel: string;
+    /** Host appearance over the exact layout. Equal styles share one SVG path. */
+    nodeStyle?: (node: GraphLayoutNode) => GraphMinimapNodeStyle | undefined;
 }
 /** A lightweight navigator over the exact main-canvas geometry. No second layout. */
 export declare function GraphMinimap(props: GraphMinimapProps): import("solid-js").JSX.Element;

package/dist/components/graph/GraphMinimap.js

@@ -1,74 +1,127 @@
-import { effect as S, setAttribute as d, template as z, use as A, delegateEvents as k } from "solid-js/web";
-import { createMemo as w } from "solid-js";
-import { graphSectionPath as D, fitGraphViewport as L } from "./geometry.js";
-var V = /* @__PURE__ */ z('<svg class=floe-graph__minimap role=region tabindex=0 preserveAspectRatio="xMidYMid meet"data-floe-canvas-interactive=true><path class=floe-graph__minimap-groups></path><path class=floe-graph__minimap-edges></path><path class=floe-graph__minimap-nodes></path><rect class=floe-graph__minimap-viewport>');
-function R(e) {
-  let h, n;
-  const c = w(() => {
+import { insert as k, createComponent as _, effect as g, setAttribute as h, style as C, template as f, use as S, delegateEvents as z } from "solid-js/web";
+import { createMemo as w, For as I } from "solid-js";
+import { graphSectionPath as A, fitGraphViewport as D } from "./geometry.js";
+var L = /* @__PURE__ */ f('<svg class=floe-graph__minimap role=region tabindex=0 preserveAspectRatio="xMidYMid meet"data-floe-canvas-interactive=true><path class=floe-graph__minimap-edges></path><rect class=floe-graph__minimap-viewport>'), V = /* @__PURE__ */ f("<svg><path class=floe-graph__minimap-groups></svg>", !1, !0, !1), E = /* @__PURE__ */ f("<svg><path class=floe-graph__minimap-nodes></svg>", !1, !0, !1);
+function R(i) {
+  let v, s;
+  const u = w(() => {
     const {
-      x: i,
-      y: o,
-      width: s,
-      height: v
-    } = e.layout.bounds, a = Math.max(s, v, 1) * 0.04;
+      x: e,
+      y: l,
+      width: d,
+      height: n
+    } = i.layout.bounds, t = Math.max(d, n, 1) * 0.04;
     return {
-      x: i - a,
-      y: o - a,
-      width: s + a * 2,
-      height: v + a * 2
+      x: e - t,
+      y: l - t,
+      width: d + t * 2,
+      height: n + t * 2
     };
-  }), g = (i) => e.layout.nodes.filter((o) => (o.kind === "group" ? "group" : "node") === i).map((o) => `M${o.x},${o.y}h${o.width}v${o.height}h${-o.width}Z`).join(""), C = w(() => g("node")), I = w(() => g("group")), P = w(() => e.layout.edges.flatMap((i) => i.sections.map(D)).join(" ")), u = (i) => {
-    const o = h?.getScreenCTM();
-    return o ? new DOMPoint(i.clientX, i.clientY).matrixTransform(o.inverse()) : void 0;
-  }, f = (i) => {
-    n?.id === i.pointerId && (n = void 0, h?.hasPointerCapture(i.pointerId) && h.releasePointerCapture(i.pointerId));
+  }), m = w(() => {
+    const e = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
+    for (const n of i.layout.nodes) {
+      const t = i.nodeStyle?.(n) ?? {}, o = n.kind === "group" ? e : l, r = JSON.stringify([t.fill ?? null, t.stroke ?? null]);
+      let a = o.get(r);
+      a || (a = {
+        ...t,
+        paths: []
+      }, o.set(r, a)), a.paths.push(`M${n.x},${n.y}h${n.width}v${n.height}h${-n.width}Z`);
+    }
+    const d = (n) => [...n.values()].map(({
+      paths: t,
+      ...o
+    }) => ({
+      ...o,
+      path: t.join("")
+    }));
+    return {
+      groups: d(e),
+      nodes: d(l)
+    };
+  }), p = (e) => ({
+    "--graph-minimap-fill": e.fill,
+    "--graph-minimap-stroke": e.stroke,
+    "--graph-minimap-opacity": e.fill || e.stroke ? "1" : void 0
+  }), P = w(() => i.layout.edges.flatMap((e) => e.sections.map(A)).join(" ")), y = (e) => {
+    const l = v?.getScreenCTM();
+    return l ? new DOMPoint(e.clientX, e.clientY).matrixTransform(l.inverse()) : void 0;
+  }, x = (e) => {
+    s?.id === e.pointerId && (s = void 0, v?.hasPointerCapture(e.pointerId) && v.releasePointerCapture(e.pointerId));
   };
   return (() => {
-    var i = V(), o = i.firstChild, s = o.nextSibling, v = s.nextSibling, a = v.nextSibling;
-    i.$$keydown = (t) => {
-      const l = {
+    var e = L(), l = e.firstChild, d = l.nextSibling;
+    e.$$keydown = (t) => {
+      const r = {
         ArrowLeft: [1, 0],
         ArrowRight: [-1, 0],
         ArrowUp: [0, 1],
         ArrowDown: [0, -1]
       }[t.key];
-      !l && t.key !== "Home" || (t.preventDefault(), t.stopPropagation(), e.onInteractionStart?.(), e.onViewportChange(l ? {
-        ...e.viewport,
-        x: e.viewport.x + l[0] * e.size.width * 0.2,
-        y: e.viewport.y + l[1] * e.size.height * 0.2
-      } : L(e.layout.bounds, e.size, 24)));
-    }, i.addEventListener("lostpointercapture", () => {
-      n = void 0;
-    }), i.addEventListener("pointercancel", f), i.$$pointerup = f, i.$$pointermove = (t) => {
-      if (n?.id !== t.pointerId) return;
-      const r = u(t);
-      r && e.onViewportChange({
-        ...n.viewport,
-        x: n.viewport.x - (r.x - n.x) * n.viewport.scale,
-        y: n.viewport.y - (r.y - n.y) * n.viewport.scale
+      !r && t.key !== "Home" || (t.preventDefault(), t.stopPropagation(), i.onInteractionStart?.(), i.onViewportChange(r ? {
+        ...i.viewport,
+        x: i.viewport.x + r[0] * i.size.width * 0.2,
+        y: i.viewport.y + r[1] * i.size.height * 0.2
+      } : D(i.layout.bounds, i.size, 24)));
+    }, e.addEventListener("lostpointercapture", () => {
+      s = void 0;
+    }), e.addEventListener("pointercancel", x), e.$$pointerup = x, e.$$pointermove = (t) => {
+      if (s?.id !== t.pointerId) return;
+      const o = y(t);
+      o && i.onViewportChange({
+        ...s.viewport,
+        x: s.viewport.x - (o.x - s.x) * s.viewport.scale,
+        y: s.viewport.y - (o.y - s.y) * s.viewport.scale
       });
-    }, i.$$pointerdown = (t) => {
+    }, e.$$pointerdown = (t) => {
       if (t.button !== 0) return;
-      const r = u(t);
-      r && (t.preventDefault(), t.stopPropagation(), e.onInteractionStart?.(), h.focus({
+      const o = y(t);
+      o && (t.preventDefault(), t.stopPropagation(), i.onInteractionStart?.(), v.focus({
         preventScroll: !0
-      }), t.target.matches(".floe-graph__minimap-viewport") || e.onViewportChange({
-        ...e.viewport,
-        x: e.size.width / 2 - r.x * e.viewport.scale,
-        y: e.size.height / 2 - r.y * e.viewport.scale
-      }), n = {
+      }), t.target.matches(".floe-graph__minimap-viewport") || i.onViewportChange({
+        ...i.viewport,
+        x: i.size.width / 2 - o.x * i.viewport.scale,
+        y: i.size.height / 2 - o.y * i.viewport.scale
+      }), s = {
         id: t.pointerId,
-        x: r.x,
-        y: r.y,
+        x: o.x,
+        y: o.y,
         viewport: {
-          ...e.viewport
+          ...i.viewport
         }
-      }, h.setPointerCapture(t.pointerId));
+      }, v.setPointerCapture(t.pointerId));
     };
-    var m = h;
-    return typeof m == "function" ? A(m, i) : h = i, S((t) => {
-      var r = e.ariaLabel, l = `${c().x} ${c().y} ${c().width} ${c().height}`, x = I(), y = P(), p = C(), $ = -e.viewport.x / e.viewport.scale, b = -e.viewport.y / e.viewport.scale, _ = e.size.width / e.viewport.scale, M = e.size.height / e.viewport.scale;
-      return r !== t.e && d(i, "aria-label", t.e = r), l !== t.t && d(i, "viewBox", t.t = l), x !== t.a && d(o, "d", t.a = x), y !== t.o && d(s, "d", t.o = y), p !== t.i && d(v, "d", t.i = p), $ !== t.n && d(a, "x", t.n = $), b !== t.s && d(a, "y", t.s = b), _ !== t.h && d(a, "width", t.h = _), M !== t.r && d(a, "height", t.r = M), t;
+    var n = v;
+    return typeof n == "function" ? S(n, e) : v = e, k(e, _(I, {
+      get each() {
+        return m().groups;
+      },
+      children: (t) => (() => {
+        var o = V();
+        return g((r) => {
+          var a = t.path, c = p(t);
+          return a !== r.e && h(o, "d", r.e = a), r.t = C(o, c, r.t), r;
+        }, {
+          e: void 0,
+          t: void 0
+        }), o;
+      })()
+    }), l), k(e, _(I, {
+      get each() {
+        return m().nodes;
+      },
+      children: (t) => (() => {
+        var o = E();
+        return g((r) => {
+          var a = t.path, c = p(t);
+          return a !== r.e && h(o, "d", r.e = a), r.t = C(o, c, r.t), r;
+        }, {
+          e: void 0,
+          t: void 0
+        }), o;
+      })()
+    }), d), g((t) => {
+      var o = i.ariaLabel, r = `${u().x} ${u().y} ${u().width} ${u().height}`, a = P(), c = -i.viewport.x / i.viewport.scale, $ = -i.viewport.y / i.viewport.scale, b = i.size.width / i.viewport.scale, M = i.size.height / i.viewport.scale;
+      return o !== t.e && h(e, "aria-label", t.e = o), r !== t.t && h(e, "viewBox", t.t = r), a !== t.a && h(l, "d", t.a = a), c !== t.o && h(d, "x", t.o = c), $ !== t.i && h(d, "y", t.i = $), b !== t.n && h(d, "width", t.n = b), M !== t.s && h(d, "height", t.s = M), t;
     }, {
       e: void 0,
       t: void 0,
@@ -76,13 +129,11 @@ function R(e) {
       o: void 0,
       i: void 0,
       n: void 0,
-      s: void 0,
-      h: void 0,
-      r: void 0
-    }), i;
+      s: void 0
+    }), e;
   })();
 }
-k(["pointerdown", "pointermove", "pointerup", "keydown"]);
+z(["pointerdown", "pointermove", "pointerup", "keydown"]);
 export {
   R as GraphMinimap
 };

package/dist/graph.css

@@ -90,13 +90,16 @@
   outline-offset: 2px;
 }
 .floe-graph__minimap-nodes {
-  fill: var(--muted-foreground);
-  opacity: 0.65;
+  fill: var(--graph-minimap-fill, var(--muted-foreground));
+  stroke: var(--graph-minimap-stroke, none);
+  stroke-width: 0.7px;
+  vector-effect: non-scaling-stroke;
+  opacity: var(--graph-minimap-opacity, 0.65);
   pointer-events: none;
 }
 .floe-graph__minimap-groups {
-  fill: color-mix(in srgb, var(--primary) 10%, transparent);
-  stroke: var(--muted-foreground);
+  fill: var(--graph-minimap-fill, color-mix(in srgb, var(--primary) 10%, transparent));
+  stroke: var(--graph-minimap-stroke, var(--muted-foreground));
   stroke-width: 0.7px;
   vector-effect: non-scaling-stroke;
   pointer-events: none;
@@ -147,6 +150,11 @@
   }
   .floe-graph__minimap-nodes {
     fill: CanvasText;
+    stroke: CanvasText;
+    opacity: 1;
+  }
+  .floe-graph__minimap-groups {
+    fill: Canvas;
   }
   .floe-graph__minimap-groups,
   .floe-graph__minimap-edges {

package/dist/remote-input.d.ts

@@ -23,8 +23,8 @@ export interface RemoteInputOptions<T> {
 export interface RemoteInputController<T> {
     readonly element: HTMLTextAreaElement;
     bindTarget(target: T | null): void;
-    /** Physical preserves the host layout; text uses every local confirmed edit. */
-    setTextInputMode(mode: 'physical' | 'text'): void;
+    /** Physical-only bypasses the local editor and input method entirely. */
+    setTextInputMode(mode: 'physical' | 'text' | 'physical-only'): void;
     setAnchor(clientX: number, clientY: number): void;
     focus(): void;
     setKeyboardVisible(visible: boolean): void;

package/dist/remote-input.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.86.18",
+  "version": "0.86.20",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",