@floegence/floe-webapp-core 0.53.4 → 0.54.0

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,22 +1,23 @@
-import { use as ct, spread as at, mergeProps as dt, insert as C, createComponent as f, Portal as st, addEventListener as ut, template as X, delegateEvents as lt } from "solid-js/web";
-import { createSignal as I, createMemo as m, untrack as b, createEffect as h, onCleanup as W, Show as gt } from "solid-js";
-import { clientToCanvasWorld as O } from "../ui/canvasGeometry.js";
-import { createUIFirstSelection as wt } from "../../utils/uiFirstSelection.js";
-import { WorkbenchCanvas as ft } from "./WorkbenchCanvas.js";
-import { WorkbenchContextMenu as kt } from "./WorkbenchContextMenu.js";
-import { WorkbenchDock as mt } from "./WorkbenchFilterBar.js";
-import { WorkbenchHud as vt } from "./WorkbenchHud.js";
-import { WorkbenchLockButton as yt } from "./WorkbenchLockButton.js";
-import { installWorkbenchContextMenuDismissListeners as At } from "./workbenchContextMenuDismiss.js";
-import { createContextMenuPosition as Ct, WORKBENCH_CONTEXT_MENU_WIDTH_PX as ht, estimateContextMenuHeight as bt } from "./workbenchHelpers.js";
-import { resolveWorkbenchWidgetPlacementPreview as Wt, resolveWorkbenchToolPlacementPreview as St } from "./workbenchPlacement.js";
-import { useWorkbenchModel as pt } from "./useWorkbenchModel.js";
-import { sortWorkbenchDockFocusCandidates as xt, workbenchDockFocusCandidateKey as R, resolveWorkbenchDockFocusCycle as It } from "./workbenchDockFocusCycle.js";
-import { resolveWorkbenchInteractionAdapter as Dt } from "./workbenchInteractionAdapter.js";
-import { SURFACE_PORTAL_LAYER_ATTR as Mt, DIALOG_SURFACE_HOST_ATTR as Lt } from "../ui/dialogSurfaceScope.js";
-var Tt = /* @__PURE__ */ X("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), Ft = /* @__PURE__ */ X("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const Bt = "F1";
-function N(c) {
+import { createComponent as f, use as ut, spread as lt, mergeProps as gt, insert as C, Portal as wt, addEventListener as ft, template as z, delegateEvents as mt } from "solid-js/web";
+import { WorkbenchCompositionMessagesContext as kt } from "./workbenchCompositionMessages.js";
+import { createSignal as L, createMemo as v, untrack as W, createEffect as y, onCleanup as p, Show as vt } from "solid-js";
+import { clientToCanvasWorld as P } from "../ui/canvasGeometry.js";
+import { createUIFirstSelection as yt } from "../../utils/uiFirstSelection.js";
+import { WorkbenchCanvas as At } from "./WorkbenchCanvas.js";
+import { WorkbenchContextMenu as ht } from "./WorkbenchContextMenu.js";
+import { WorkbenchDock as bt } from "./WorkbenchFilterBar.js";
+import { WorkbenchHud as Ct } from "./WorkbenchHud.js";
+import { WorkbenchLockButton as Wt } from "./WorkbenchLockButton.js";
+import { installWorkbenchContextMenuDismissListeners as pt } from "./workbenchContextMenuDismiss.js";
+import { createContextMenuPosition as St, WORKBENCH_CONTEXT_MENU_WIDTH_PX as xt, estimateContextMenuHeight as It } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetPlacementPreview as Mt, resolveWorkbenchToolPlacementPreview as Dt } from "./workbenchPlacement.js";
+import { useWorkbenchModel as Lt } from "./useWorkbenchModel.js";
+import { sortWorkbenchDockFocusCandidates as Tt, workbenchDockFocusCandidateKey as Y, resolveWorkbenchDockFocusCycle as Ft } from "./workbenchDockFocusCycle.js";
+import { resolveWorkbenchInteractionAdapter as Bt } from "./workbenchInteractionAdapter.js";
+import { SURFACE_PORTAL_LAYER_ATTR as Et, DIALOG_SURFACE_HOST_ATTR as _t } from "../ui/dialogSurfaceScope.js";
+var Rt = /* @__PURE__ */ z("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), Ot = /* @__PURE__ */ z("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const Nt = "F1";
+function q(c) {
   if (c)
     try {
       c.focus({
@@ -26,8 +27,8 @@ function N(c) {
       c.focus();
     }
 }
-function Zt(c) {
-  const e = pt({
+function oe(c) {
+  const e = Lt({
     state: () => c.state(),
     setState: (t) => c.setState(t),
     widgetDefinitions: () => c.widgetDefinitions,
@@ -35,7 +36,7 @@ function Zt(c) {
     backgroundLayerDefaults: () => c.backgroundLayerDefaults,
     onClose: () => {
     }
-  }), u = wt({
+  }), u = yt({
     committed: e.selectedWidgetId,
     commitEqualRequests: !0,
     commit: (t, n) => {
@@ -46,7 +47,7 @@ function Zt(c) {
       e.canvas.selectWidget(t), n?.bringToFront && e.canvas.commitFront(t);
     },
     onEvent: (t) => c.onWidgetActivationEvent?.(t)
-  }), Y = () => c.widgetActivationMode === "after-paint" ? u.visual() : e.selectedWidgetId(), S = () => {
+  }), V = () => c.widgetActivationMode === "after-paint" ? u.visual() : e.selectedWidgetId(), S = () => {
     if (c.widgetActivationMode !== "after-paint" || !u.pending())
       return e.selectedObject();
     const t = u.visual();
@@ -54,7 +55,7 @@ function Zt(c) {
       kind: "widget",
       id: t
     } : null;
-  }, q = (t) => {
+  }, $ = (t) => {
     if (c.widgetActivationMode === "after-paint") {
       if (u.pending() && u.visual() === t) return;
       u.request(t, {
@@ -63,7 +64,7 @@ function Zt(c) {
       return;
     }
     e.canvas.selectWidget(t);
-  }, D = (t) => {
+  }, T = (t) => {
     if (c.widgetActivationMode === "after-paint") {
       if (u.pending() && u.visual() === t) return;
       u.request(t, {
@@ -72,77 +73,77 @@ function Zt(c) {
       return;
     }
     e.canvas.selectWidget(t), e.canvas.commitFront(t);
-  }, [l, P] = I(null), [z, V] = I(null), d = m(() => Dt(c.interactionAdapter)), [M, w] = I(b(() => d().createInitialInputOwner())), L = m(() => {
+  }, [l, j] = L(null), [H, U] = L(null), s = v(() => Bt(c.interactionAdapter)), [F, m] = L(W(() => s().createInitialInputOwner())), B = v(() => {
     const t = c.launcherWidgetTypes;
     return !t || t.length <= 0 ? null : new Set(t);
-  }), H = m(() => {
-    const t = e.widgetDefinitions(), n = L();
+  }), K = v(() => {
+    const t = e.widgetDefinitions(), n = B();
     return n ? t.filter((o) => n.has(o.type)) : t;
-  }), T = m(() => {
-    const t = e.contextMenu.state(), n = e.contextMenu.items(), o = L(), r = o ? n.filter((s) => {
-      if (s.kind !== "action")
+  }), E = v(() => {
+    const t = e.contextMenu.state(), n = e.contextMenu.items(), o = B(), i = o ? n.filter((d) => {
+      if (d.kind !== "action")
         return !0;
-      const A = /^add-(.+)$/.exec(String(s.id ?? ""));
-      return A ? o.has(A[1]) : !0;
+      const w = /^add-(.+)$/.exec(String(d.id ?? ""));
+      return w ? o.has(w[1]) : !0;
     }) : n;
     if (!t || !c.resolveContextMenuItems)
-      return r;
-    const i = t.target?.kind === "widget" ? t.target.id : !t.target && t.widgetId ? t.widgetId : null, a = i ? e.queries.findWidgetById(i) : null;
+      return i;
+    const r = t.target?.kind === "widget" ? t.target.id : !t.target && t.widgetId ? t.widgetId : null, a = r ? e.queries.findWidgetById(r) : null;
     return c.resolveContextMenuItems({
       menu: t,
-      items: r,
+      items: i,
       widgets: e.widgets(),
       widget: a,
       closeMenu: e.contextMenu.close
     });
-  }), F = m(() => {
+  }), _ = v(() => {
     const t = e.contextMenu.state();
     if (!t) return;
-    const n = T(), o = n.filter((i) => i.kind === "action").length, r = n.filter((i) => i.kind === "separator").length;
-    return Ct({
+    const n = E(), o = n.filter((r) => r.kind === "action").length, i = n.filter((r) => r.kind === "separator").length;
+    return St({
       clientX: t.clientX,
       clientY: t.clientY,
-      menuWidth: ht,
-      menuHeight: bt(o, r)
+      menuWidth: xt,
+      menuHeight: It(o, i)
     });
-  }), B = (t, n, o) => {
-    const r = d(), i = r.findWidgetRoot(t), a = r.readWidgetId(i);
+  }), R = (t, n, o) => {
+    const i = s(), r = i.findWidgetRoot(t), a = i.readWidgetId(r);
     if (a) {
       if (e.queries.findStickyNoteById(a)) {
-        w(r.createCanvasInputOwner(n === "focus" ? "background_focus" : "background_pointer"));
+        m(i.createCanvasInputOwner(n === "focus" ? "background_focus" : "background_pointer"));
         return;
       }
-      w(r.createWidgetInputOwner(a, n));
+      m(i.createWidgetInputOwner(a, n));
       return;
     }
-    const s = l();
-    s && t instanceof Node && s.contains(t) && w(r.createCanvasInputOwner(o));
-  }, _ = (t = "selection_cleared") => {
-    const n = d(), o = l();
-    e.selection.clear(), w(n.createCanvasInputOwner(t)), queueMicrotask(() => {
+    const d = l();
+    d && t instanceof Node && d.contains(t) && m(i.createCanvasInputOwner(o));
+  }, O = (t = "selection_cleared") => {
+    const n = s(), o = l();
+    e.selection.clear(), m(n.createCanvasInputOwner(t)), queueMicrotask(() => {
       if (!o || typeof document > "u") return;
-      const r = document.activeElement;
-      if (!(r instanceof HTMLElement) || !o.contains(r)) {
-        N(o);
+      const i = document.activeElement;
+      if (!(i instanceof HTMLElement) || !o.contains(i)) {
+        q(o);
         return;
       }
-      const i = n.findWidgetRoot(r);
-      N(o), i && document.activeElement === r && r.isConnected && r.blur();
+      const r = n.findWidgetRoot(i);
+      q(o), r && document.activeElement === i && i.isConnected && i.blur();
     });
-  }, v = () => {
-    const t = l()?.querySelector('[data-floe-workbench-canvas-frame="true"]'), n = e.viewport(), o = t?.getBoundingClientRect(), r = o?.width ?? 0, i = o?.height ?? 0;
+  }, A = () => {
+    const t = l()?.querySelector('[data-floe-workbench-canvas-frame="true"]'), n = e.viewport(), o = t?.getBoundingClientRect(), i = o?.width ?? 0, r = o?.height ?? 0;
     return {
-      worldX: r > 0 ? (r / 2 - n.x) / n.scale : 240,
-      worldY: i > 0 ? (i / 2 - n.y) / n.scale : 180
+      worldX: i > 0 ? (i / 2 - n.x) / n.scale : 240,
+      worldY: r > 0 ? (r / 2 - n.y) / n.scale : 180
     };
   }, k = (t) => {
-    const n = b(d), o = b(l);
+    const n = W(s), o = W(l);
     queueMicrotask(() => {
-      n.focusWidgetElement(o, t), w(n.createWidgetInputOwner(t, "activation"));
+      n.focusWidgetElement(o, t), m(n.createWidgetInputOwner(t, "activation"));
     });
   };
-  let y = null;
-  const U = (t) => `${t.kind}:${String(t.id)}`, g = (t, n) => ({
+  let h = null;
+  const G = (t) => `${t.kind}:${String(t.id)}`, g = (t, n) => ({
     kind: t,
     id: n.id,
     x: n.x,
@@ -150,26 +151,26 @@ function Zt(c) {
     width: n.width,
     height: n.height,
     createdAtUnixMs: n.created_at_unix_ms
-  }), p = (t) => t.kind === "widget" ? e.widgets().filter((n) => n.type === t.id).map((n) => g("widget", n)) : t.id === "sticky-note" ? e.stickyNotes().map((n) => g("sticky_note", n)) : t.id === "text" ? e.annotations().map((n) => g("annotation", n)) : t.id === "background-region" ? e.backgroundLayers().map((n) => g("background_layer", n)) : [], $ = (t) => {
-    const n = b(l);
+  }), x = (t) => t.kind === "widget" ? e.widgets().filter((n) => n.type === t.id).map((n) => g("widget", n)) : t.id === "sticky-note" ? e.stickyNotes().map((n) => g("sticky_note", n)) : t.id === "text" ? e.annotations().map((n) => g("annotation", n)) : t.id === "background-region" ? e.backgroundLayers().map((n) => g("background_layer", n)) : [], Z = (t) => {
+    const n = W(l);
     queueMicrotask(() => {
       if (!n) return;
       const o = t.kind === "sticky_note" ? "sticky" : t.kind === "annotation" ? "text" : t.kind === "background_layer" ? "region" : null;
       if (!o) return;
-      const r = [...n.querySelectorAll("[data-wb-object-id]")].find((A) => A.getAttribute("data-wb-object-kind") === o && A.getAttribute("data-wb-object-id") === t.id);
-      if (!(r instanceof HTMLElement)) return;
-      const i = r.querySelector('[data-wb-part="content"]'), s = i instanceof HTMLElement && i.getAttribute("contenteditable") !== null && i.getAttribute("contenteditable") !== "false" ? i : r;
-      s.hasAttribute("tabindex") || (s.tabIndex = -1);
+      const i = [...n.querySelectorAll("[data-wb-object-id]")].find((w) => w.getAttribute("data-wb-object-kind") === o && w.getAttribute("data-wb-object-id") === t.id);
+      if (!(i instanceof HTMLElement)) return;
+      const r = i.querySelector('[data-wb-part="content"]'), d = r instanceof HTMLElement && r.getAttribute("contenteditable") !== null && r.getAttribute("contenteditable") !== "false" ? r : i;
+      d.hasAttribute("tabindex") || (d.tabIndex = -1);
       try {
-        s.focus({
+        d.focus({
           preventScroll: !0
         });
       } catch {
-        s.focus();
+        d.focus();
       }
-      w(d().createCanvasInputOwner("background_focus"));
+      m(s().createCanvasInputOwner("background_focus"));
     });
-  }, j = (t) => {
+  }, J = (t) => {
     e.navigation.centerOnWidget({
       id: t.id,
       type: "dock-focus-target",
@@ -181,77 +182,77 @@ function Zt(c) {
       z_index: 0,
       created_at_unix_ms: t.createdAtUnixMs
     });
-  }, K = (t) => {
+  }, Q = (t) => {
     if (t.kind === "widget") {
       const n = e.queries.findWidgetById(t.id);
       if (!n) return;
-      D(n.id), e.navigation.centerOnWidget(n), k(n.id);
+      T(n.id), e.navigation.centerOnWidget(n), k(n.id);
       return;
     }
-    t.kind === "sticky_note" ? e.canvas.selectStickyNote(t.id) : t.kind === "annotation" ? e.canvas.selectAnnotation(t.id) : e.canvas.selectBackgroundLayer(t.id), j(t), $(t);
-  }, G = (t) => {
-    const n = v();
+    t.kind === "sticky_note" ? e.canvas.selectStickyNote(t.id) : t.kind === "annotation" ? e.canvas.selectAnnotation(t.id) : e.canvas.selectBackgroundLayer(t.id), J(t), Z(t);
+  }, tt = (t) => {
+    const n = A();
     if (t.kind === "widget") {
       const o = e.widgetActions.addWidgetAtWorldCenter(t.id, n.worldX, n.worldY);
       return o ? g("widget", o) : null;
     }
     return t.id === "sticky-note" ? g("sticky_note", e.widgetActions.addStickyNoteAtCursor(n.worldX, n.worldY)) : t.id === "text" ? g("annotation", e.widgetActions.addTextAnnotationAtCursor(n.worldX, n.worldY)) : t.id === "background-region" ? g("background_layer", e.widgetActions.addBackgroundLayerAtCursor(n.worldX, n.worldY)) : null;
-  }, Z = (t) => {
-    let n = p(t), o = S();
+  }, et = (t) => {
+    let n = x(t), o = S();
     if (n.length === 0) {
-      const i = G(t);
-      if (!i) {
-        y = null;
+      const r = tt(t);
+      if (!r) {
+        h = null;
         return;
       }
-      n = p(t), o = {
-        kind: i.kind,
-        id: i.id
+      n = x(t), o = {
+        kind: r.kind,
+        id: r.id
       };
     }
-    const r = It({
-      dockItemKey: U(t),
+    const i = Ft({
+      dockItemKey: G(t),
       candidates: n,
       selectedObject: o,
-      session: y
+      session: h
     });
-    y = r.session, r.target && K(r.target);
-  }, J = (t) => {
-    const n = xt(p(t)), o = S(), r = o ? R(o) : null, i = r ? n.findIndex((a) => R(a) === r) : -1;
+    h = i.session, i.target && Q(i.target);
+  }, nt = (t) => {
+    const n = Tt(x(t)), o = S(), i = o ? Y(o) : null, r = i ? n.findIndex((a) => Y(a) === i) : -1;
     return {
       count: n.length,
-      currentIndex: i >= 0 ? i : null,
-      active: i >= 0
+      currentIndex: r >= 0 ? r : null,
+      active: r >= 0
     };
-  }, Q = (t) => {
-    y?.dockItemKey !== `${t.kind}:${t.id}` && (y = null);
-  }, tt = (t) => {
+  }, ot = (t) => {
+    h?.dockItemKey !== `${t.kind}:${t.id}` && (h = null);
+  }, rt = (t) => {
     const n = e.navigation.fitWidget(t);
     k(n.id);
-  }, et = (t) => {
+  }, it = (t) => {
     const n = e.navigation.overviewWidget(t);
     k(n.id);
   };
-  h(() => {
+  y(() => {
     c.onApiReady?.({
       ensureWidget: (t, n) => e.widgetActions.ensureWidget(t, n) ?? null,
       createWidget: (t, n) => {
-        const o = v(), r = e.widgetActions.addWidgetAtWorldCenter(t, n?.worldX ?? o.worldX, n?.worldY ?? o.worldY) ?? null;
-        return r && n?.centerViewport !== !1 && e.navigation.centerOnWidget(r), r;
+        const o = A(), i = e.widgetActions.addWidgetAtWorldCenter(t, n?.worldX ?? o.worldX, n?.worldY ?? o.worldY) ?? null;
+        return i && n?.centerViewport !== !1 && e.navigation.centerOnWidget(i), i;
       },
       createTextAnnotation: (t) => {
-        const n = v();
+        const n = A();
         return e.widgetActions.addTextAnnotationAtCursor(t?.worldX ?? n.worldX, t?.worldY ?? n.worldY) ?? null;
       },
       createStickyNote: (t) => {
-        const n = v();
+        const n = A();
         return e.widgetActions.addStickyNoteAtCursor(t?.worldX ?? n.worldX, t?.worldY ?? n.worldY) ?? null;
       },
       createBackgroundLayer: (t) => {
-        const n = v();
+        const n = A();
         return e.widgetActions.addBackgroundLayerAtCursor(t?.worldX ?? n.worldX, t?.worldY ?? n.worldY) ?? null;
       },
-      clearSelection: () => _("selection_cleared"),
+      clearSelection: () => O("selection_cleared"),
       focusWidget: (t, n) => {
         const o = e.navigation.focusWidget(t, n);
         return k(o.id), o;
@@ -270,12 +271,12 @@ function Zt(c) {
       findAnnotationById: (t) => e.queries.findAnnotationById(t),
       findBackgroundLayerById: (t) => e.queries.findBackgroundLayerById(t),
       updateWidgetTitle: (t, n) => {
-        const o = String(t ?? "").trim(), r = String(n ?? "").trim();
-        !o || !r || c.setState((i) => ({
-          ...i,
-          widgets: i.widgets.map((a) => a.id === o && a.title !== r ? {
+        const o = String(t ?? "").trim(), i = String(n ?? "").trim();
+        !o || !i || c.setState((r) => ({
+          ...r,
+          widgets: r.widgets.map((a) => a.id === o && a.title !== i ? {
             ...a,
-            title: r
+            title: i
           } : a)
         }));
       },
@@ -285,46 +286,46 @@ function Zt(c) {
       deleteStickyNote: (t) => e.widgetActions.deleteStickyNote(t),
       deleteAnnotation: (t) => e.widgetActions.deleteAnnotation(t),
       deleteBackgroundLayer: (t) => e.widgetActions.deleteBackgroundLayer(t)
-    }), W(() => {
+    }), p(() => {
       c.onApiReady?.(null);
     });
   });
-  const E = () => c.lockShortcut === void 0 ? Bt : c.lockShortcut;
-  h(() => {
+  const N = () => c.lockShortcut === void 0 ? Nt : c.lockShortcut;
+  y(() => {
     if (typeof window > "u" || !e.contextMenu.state()) return;
-    const t = At({
+    const t = pt({
       ownerWindow: window,
       onDismiss: e.contextMenu.close
     });
-    W(() => t());
-  }), h(() => {
-    const t = M();
+    p(() => t());
+  }), y(() => {
+    const t = F();
     if (t.kind !== "widget") return;
-    e.widgets().some((o) => o.id === t.widgetId) || w(d().createCanvasInputOwner("widget_removed"));
-  }), h(() => {
+    e.widgets().some((o) => o.id === t.widgetId) || m(s().createCanvasInputOwner("widget_removed"));
+  }), y(() => {
     const t = l();
     if (!t) return;
-    const n = (r) => {
-      B(r.target, "pointer", "background_pointer");
-    }, o = (r) => {
-      B(r.target, "focus", "background_focus");
+    const n = (i) => {
+      R(i.target, "pointer", "background_pointer");
+    }, o = (i) => {
+      R(i.target, "focus", "background_focus");
     };
-    t.addEventListener("pointerdown", n, !0), t.addEventListener("focusin", o), W(() => {
+    t.addEventListener("pointerdown", n, !0), t.addEventListener("focusin", o), p(() => {
       t.removeEventListener("pointerdown", n, !0), t.removeEventListener("focusin", o);
     });
-  }), h(() => {
+  }), y(() => {
     if (c.enableKeyboard === !1 || typeof document > "u") return;
-    const t = E(), n = (o) => {
+    const t = N(), n = (o) => {
       if (!(o.defaultPrevented || o.isComposing)) {
         if (t !== null && o.key === t) {
           o.preventDefault(), e.lock.toggle();
           return;
         }
-        if (!d().shouldBypassGlobalHotkeys({
+        if (!s().shouldBypassGlobalHotkeys({
           root: l(),
           target: o.target,
-          owner: M(),
-          interactiveSelector: d().interactiveSelector
+          owner: F(),
+          interactiveSelector: s().interactiveSelector
         }))
           switch (o.key) {
             case "ArrowUp":
@@ -346,52 +347,52 @@ function Zt(c) {
           }
       }
     };
-    document.addEventListener("keydown", n, !0), W(() => document.removeEventListener("keydown", n, !0));
+    document.addEventListener("keydown", n, !0), p(() => document.removeEventListener("keydown", n, !0));
   });
-  const x = (t, n, o) => {
+  const I = (t, n, o) => {
     if (o?.worldPoint)
       return o.worldPoint;
     if (o?.canvasFrame)
-      return O(o.canvasFrame, e.viewport(), {
+      return P(o.canvasFrame, e.viewport(), {
         clientX: t,
         clientY: n
       });
-    const r = l()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
-    if (!r) return null;
-    const i = r.getBoundingClientRect();
-    return O(i, e.viewport(), {
+    const i = l()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
+    if (!i) return null;
+    const r = i.getBoundingClientRect();
+    return P(r, e.viewport(), {
       clientX: t,
       clientY: n
     });
-  }, nt = (t, n, o, r) => {
-    const i = x(n, o, r);
-    i && e.widgetActions.addWidgetAtWorldCenter(t, i.worldX, i.worldY);
-  }, ot = (t, n, o, r) => {
-    const i = x(n, o, r);
-    if (i) {
+  }, ct = (t, n, o, i) => {
+    const r = I(n, o, i);
+    r && e.widgetActions.addWidgetAtWorldCenter(t, r.worldX, r.worldY);
+  }, at = (t, n, o, i) => {
+    const r = I(n, o, i);
+    if (r) {
       if (t === "sticky-note") {
-        e.widgetActions.addStickyNoteAtCursor(i.worldX, i.worldY);
+        e.widgetActions.addStickyNoteAtCursor(r.worldX, r.worldY);
         return;
       }
       if (t === "text") {
-        e.widgetActions.addTextAnnotationAtCursor(i.worldX, i.worldY);
+        e.widgetActions.addTextAnnotationAtCursor(r.worldX, r.worldY);
         return;
       }
-      t === "background-region" && e.widgetActions.addBackgroundLayerAtCursor(i.worldX, i.worldY);
+      t === "background-region" && e.widgetActions.addBackgroundLayerAtCursor(r.worldX, r.worldY);
     }
-  }, rt = (t) => {
-    t.button === 0 && (d().findWidgetRoot(t.target) || _("background_pointer"));
-  }, it = m(() => {
-    const t = z();
+  }, dt = (t) => {
+    t.button === 0 && (s().findWidgetRoot(t.target) || O("background_pointer"));
+  }, st = v(() => {
+    const t = H();
     if (!t) return null;
-    const n = x(t.clientX, t.clientY, t);
-    return n ? t.kind === "widget" ? Wt({
+    const n = I(t.clientX, t.clientY, t);
+    return n ? t.kind === "widget" ? Mt({
       type: t.id,
       widgetDefinitions: e.widgetDefinitions(),
       worldX: n.worldX,
       worldY: n.worldY,
       dropAllowed: t.dropAllowed
-    }) : St({
+    }) : Dt({
       tool: t.id,
       label: t.label,
       worldX: n.worldX,
@@ -400,275 +401,296 @@ function Zt(c) {
       textDefaults: c.textAnnotationDefaults,
       backgroundDefaults: c.backgroundLayerDefaults
     }) : null;
+  }), M = () => {
+    const t = document.activeElement;
+    if (!(t instanceof HTMLElement) || !t.isContentEditable || !l()?.contains(t)) return;
+    const n = t.closest("[data-wb-object-id]")?.getAttribute("data-wb-object-id"), o = e.stickyNotes().find((D) => D.id === n), i = e.annotations().find((D) => D.id === n), r = o ?? i;
+    if (!r) return;
+    const a = e.canvasFrameSize(), d = e.viewport(), w = d.x + r.x * d.scale, X = d.y + r.y * d.scale;
+    if (d.scale >= 0.85 && w >= 12 && w + r.width * d.scale <= a.width - 12 && X >= 12 && X + r.height * d.scale <= a.height - 12) return;
+    const b = Math.min(1, Math.max(0.85, (a.width - 40) / r.width));
+    e.canvas.commitViewport({
+      x: (a.width - r.width * b) / 2 - r.x * b,
+      y: Math.max(100, (a.height - r.height * b) / 2) - r.y * b,
+      scale: b
+    });
+  };
+  return y(() => {
+    const t = e.canvasFrameSize();
+    t.width > 0 && t.height > 0 && W(M);
+  }), f(kt.Provider, {
+    value: () => c.compositionMessages,
+    get children() {
+      var t = Ot(), n = t.firstChild;
+      return t.$$keyup = (o) => {
+        o.key === "Tab" && M();
+      }, t.$$click = M, ut(j, t), lt(t, gt({
+        get class() {
+          return `workbench-surface${c.class ? ` ${c.class}` : ""}`;
+        }
+      }, () => ({
+        [s().surfaceRootAttr]: "true",
+        [s().dialogSurfaceHostAttr]: "true",
+        [_t]: "true",
+        [Et]: "true"
+      }), {
+        get "data-workbench-theme"() {
+          return e.theme();
+        },
+        get "data-workbench-mode"() {
+          return e.mode();
+        },
+        tabIndex: -1
+      }), !1, !0), C(n, f(At, {
+        get widgetDefinitions() {
+          return e.widgetDefinitions();
+        },
+        get widgets() {
+          return e.widgets();
+        },
+        get stickyNotes() {
+          return e.stickyNotes();
+        },
+        get annotations() {
+          return e.annotations();
+        },
+        get backgroundLayers() {
+          return e.backgroundLayers();
+        },
+        get placementPreview() {
+          return st();
+        },
+        get viewport() {
+          return e.viewport();
+        },
+        get canvasFrameSize() {
+          return e.canvasFrameSize();
+        },
+        get selectedWidgetId() {
+          return V();
+        },
+        get selectedObject() {
+          return S();
+        },
+        get mode() {
+          return e.mode();
+        },
+        get visualFrontOwnerId() {
+          return e.visualFrontOwnerId();
+        },
+        get locked() {
+          return e.locked();
+        },
+        get filters() {
+          return e.filters();
+        },
+        get interactionAdapter() {
+          return s();
+        },
+        get setCanvasFrameRef() {
+          return e.setCanvasFrameRef;
+        },
+        get onViewportCommit() {
+          return e.canvas.commitViewport;
+        },
+        get onViewportInteractionStart() {
+          return e.canvas.cancelViewportNavigation;
+        },
+        get onCanvasContextMenu() {
+          return e.canvas.openCanvasContextMenu;
+        },
+        onCanvasPointerDown: dt,
+        onSelectWidget: $,
+        onActivateWidget: T,
+        get onWidgetContextMenu() {
+          return e.canvas.openWidgetContextMenu;
+        },
+        get onClaimVisualFrontOwner() {
+          return e.canvas.claimVisualFrontOwner;
+        },
+        get onCommitFront() {
+          return e.canvas.commitFront;
+        },
+        get onCommitMove() {
+          return e.canvas.commitMove;
+        },
+        get onCommitResize() {
+          return e.canvas.commitResize;
+        },
+        get onSelectStickyNote() {
+          return e.canvas.selectStickyNote;
+        },
+        get onStickyNoteContextMenu() {
+          return e.canvas.openStickyNoteContextMenu;
+        },
+        get onClaimStickyVisualFrontOwner() {
+          return e.canvas.claimVisualFrontOwner;
+        },
+        get onCommitStickyFront() {
+          return e.canvas.commitStickyFront;
+        },
+        get onCommitStickyMove() {
+          return e.canvas.commitStickyMove;
+        },
+        get onCommitStickyResize() {
+          return e.canvas.commitStickyResize;
+        },
+        get onUpdateStickyNote() {
+          return e.widgetActions.updateStickyNote;
+        },
+        get onDeleteStickyNote() {
+          return e.widgetActions.deleteStickyNote;
+        },
+        get onSelectAnnotation() {
+          return e.canvas.selectAnnotation;
+        },
+        get onAnnotationContextMenu() {
+          return e.canvas.openAnnotationContextMenu;
+        },
+        get onCommitAnnotationMove() {
+          return e.canvas.commitAnnotationMove;
+        },
+        get onCommitAnnotationResize() {
+          return e.canvas.commitAnnotationResize;
+        },
+        get onUpdateTextAnnotation() {
+          return e.widgetActions.updateTextAnnotation;
+        },
+        get onDeleteAnnotation() {
+          return e.widgetActions.deleteAnnotation;
+        },
+        get onSelectBackgroundLayer() {
+          return e.canvas.selectBackgroundLayer;
+        },
+        get onBackgroundLayerContextMenu() {
+          return e.canvas.openBackgroundLayerContextMenu;
+        },
+        get onCommitBackgroundMove() {
+          return e.canvas.commitBackgroundMove;
+        },
+        get onCommitBackgroundResize() {
+          return e.canvas.commitBackgroundResize;
+        },
+        get onUpdateBackgroundLayer() {
+          return e.widgetActions.updateBackgroundLayer;
+        },
+        get onDeleteBackgroundLayer() {
+          return e.widgetActions.deleteBackgroundLayer;
+        },
+        onRequestOverview: it,
+        onRequestFit: rt,
+        get onRequestDelete() {
+          return c.onRequestDelete ?? e.widgetActions.deleteWidget;
+        },
+        get onLayoutInteractionStart() {
+          return c.onLayoutInteractionStart;
+        },
+        get onLayoutInteractionEnd() {
+          return c.onLayoutInteractionEnd;
+        }
+      })), C(t, f(Wt, {
+        get locked() {
+          return e.locked();
+        },
+        get onToggle() {
+          return e.lock.toggle;
+        },
+        get shortcutLabel() {
+          return N() ?? void 0;
+        }
+      }), null), C(t, f(bt, {
+        get widgetDefinitions() {
+          return K();
+        },
+        get widgets() {
+          return e.widgets();
+        },
+        get filters() {
+          return e.filters();
+        },
+        get mode() {
+          return e.mode();
+        },
+        get activationMode() {
+          return c.dockItemActivationMode;
+        },
+        get viewport() {
+          return e.viewport();
+        },
+        get onSoloFilter() {
+          return e.filter.solo;
+        },
+        onFocusCycleItem: et,
+        resolveItemPresentation: nt,
+        onDockActivation: ot,
+        get onSelectMode() {
+          return e.modes.setMode;
+        },
+        get onViewportCommit() {
+          return e.canvas.commitViewport;
+        },
+        onViewportInteractionStart: () => e.canvas.cancelViewportNavigation(),
+        onCreateAt: ct,
+        onCreateToolAt: at,
+        get onItemClick() {
+          return c.onDockItemClick;
+        },
+        get modeIcons() {
+          return c.dockModeIcons;
+        },
+        get dockActions() {
+          return c.dockActions;
+        },
+        get dockItems() {
+          return c.dockItems;
+        },
+        get registerExternalDockDragController() {
+          return c.registerExternalDockDragController;
+        },
+        onDragPreviewChange: U
+      }), null), C(t, f(Ct, {
+        get scaleLabel() {
+          return e.scaleLabel();
+        },
+        get onZoomOut() {
+          return e.hud.zoomOut;
+        },
+        get onZoomIn() {
+          return e.hud.zoomIn;
+        },
+        get activeTheme() {
+          return e.theme();
+        },
+        onSelectTheme: (o) => e.appearance.setTheme(o)
+      }), null), C(t, f(vt, {
+        get when() {
+          return e.contextMenu.state();
+        },
+        get children() {
+          return f(wt, {
+            get children() {
+              return [(() => {
+                var o = Rt();
+                return ft(o, "contextmenu", e.contextMenu.retarget, !0), o;
+              })(), f(ht, {
+                get x() {
+                  return _()?.left ?? 0;
+                },
+                get y() {
+                  return _()?.top ?? 0;
+                },
+                get items() {
+                  return E();
+                }
+              })];
+            }
+          });
+        }
+      }), null), t;
+    }
   });
-  return (() => {
-    var t = Ft(), n = t.firstChild;
-    return ct(P, t), at(t, dt({
-      get class() {
-        return `workbench-surface${c.class ? ` ${c.class}` : ""}`;
-      }
-    }, () => ({
-      [d().surfaceRootAttr]: "true",
-      [d().dialogSurfaceHostAttr]: "true",
-      [Lt]: "true",
-      [Mt]: "true"
-    }), {
-      get "data-workbench-theme"() {
-        return e.theme();
-      },
-      get "data-workbench-mode"() {
-        return e.mode();
-      },
-      tabIndex: -1
-    }), !1, !0), C(n, f(ft, {
-      get widgetDefinitions() {
-        return e.widgetDefinitions();
-      },
-      get widgets() {
-        return e.widgets();
-      },
-      get stickyNotes() {
-        return e.stickyNotes();
-      },
-      get annotations() {
-        return e.annotations();
-      },
-      get backgroundLayers() {
-        return e.backgroundLayers();
-      },
-      get placementPreview() {
-        return it();
-      },
-      get viewport() {
-        return e.viewport();
-      },
-      get canvasFrameSize() {
-        return e.canvasFrameSize();
-      },
-      get selectedWidgetId() {
-        return Y();
-      },
-      get selectedObject() {
-        return S();
-      },
-      get mode() {
-        return e.mode();
-      },
-      get visualFrontOwnerId() {
-        return e.visualFrontOwnerId();
-      },
-      get locked() {
-        return e.locked();
-      },
-      get filters() {
-        return e.filters();
-      },
-      get interactionAdapter() {
-        return d();
-      },
-      get setCanvasFrameRef() {
-        return e.setCanvasFrameRef;
-      },
-      get onViewportCommit() {
-        return e.canvas.commitViewport;
-      },
-      get onViewportInteractionStart() {
-        return e.canvas.cancelViewportNavigation;
-      },
-      get onCanvasContextMenu() {
-        return e.canvas.openCanvasContextMenu;
-      },
-      onCanvasPointerDown: rt,
-      onSelectWidget: q,
-      onActivateWidget: D,
-      get onWidgetContextMenu() {
-        return e.canvas.openWidgetContextMenu;
-      },
-      get onClaimVisualFrontOwner() {
-        return e.canvas.claimVisualFrontOwner;
-      },
-      get onCommitFront() {
-        return e.canvas.commitFront;
-      },
-      get onCommitMove() {
-        return e.canvas.commitMove;
-      },
-      get onCommitResize() {
-        return e.canvas.commitResize;
-      },
-      get onSelectStickyNote() {
-        return e.canvas.selectStickyNote;
-      },
-      get onStickyNoteContextMenu() {
-        return e.canvas.openStickyNoteContextMenu;
-      },
-      get onClaimStickyVisualFrontOwner() {
-        return e.canvas.claimVisualFrontOwner;
-      },
-      get onCommitStickyFront() {
-        return e.canvas.commitStickyFront;
-      },
-      get onCommitStickyMove() {
-        return e.canvas.commitStickyMove;
-      },
-      get onCommitStickyResize() {
-        return e.canvas.commitStickyResize;
-      },
-      get onUpdateStickyNote() {
-        return e.widgetActions.updateStickyNote;
-      },
-      get onDeleteStickyNote() {
-        return e.widgetActions.deleteStickyNote;
-      },
-      get onSelectAnnotation() {
-        return e.canvas.selectAnnotation;
-      },
-      get onAnnotationContextMenu() {
-        return e.canvas.openAnnotationContextMenu;
-      },
-      get onCommitAnnotationMove() {
-        return e.canvas.commitAnnotationMove;
-      },
-      get onCommitAnnotationResize() {
-        return e.canvas.commitAnnotationResize;
-      },
-      get onUpdateTextAnnotation() {
-        return e.widgetActions.updateTextAnnotation;
-      },
-      get onDeleteAnnotation() {
-        return e.widgetActions.deleteAnnotation;
-      },
-      get onSelectBackgroundLayer() {
-        return e.canvas.selectBackgroundLayer;
-      },
-      get onBackgroundLayerContextMenu() {
-        return e.canvas.openBackgroundLayerContextMenu;
-      },
-      get onCommitBackgroundMove() {
-        return e.canvas.commitBackgroundMove;
-      },
-      get onCommitBackgroundResize() {
-        return e.canvas.commitBackgroundResize;
-      },
-      get onUpdateBackgroundLayer() {
-        return e.widgetActions.updateBackgroundLayer;
-      },
-      get onDeleteBackgroundLayer() {
-        return e.widgetActions.deleteBackgroundLayer;
-      },
-      onRequestOverview: et,
-      onRequestFit: tt,
-      get onRequestDelete() {
-        return c.onRequestDelete ?? e.widgetActions.deleteWidget;
-      },
-      get onLayoutInteractionStart() {
-        return c.onLayoutInteractionStart;
-      },
-      get onLayoutInteractionEnd() {
-        return c.onLayoutInteractionEnd;
-      }
-    })), C(t, f(yt, {
-      get locked() {
-        return e.locked();
-      },
-      get onToggle() {
-        return e.lock.toggle;
-      },
-      get shortcutLabel() {
-        return E() ?? void 0;
-      }
-    }), null), C(t, f(mt, {
-      get widgetDefinitions() {
-        return H();
-      },
-      get widgets() {
-        return e.widgets();
-      },
-      get filters() {
-        return e.filters();
-      },
-      get mode() {
-        return e.mode();
-      },
-      get activationMode() {
-        return c.dockItemActivationMode;
-      },
-      get viewport() {
-        return e.viewport();
-      },
-      get onSoloFilter() {
-        return e.filter.solo;
-      },
-      onFocusCycleItem: Z,
-      resolveItemPresentation: J,
-      onDockActivation: Q,
-      get onSelectMode() {
-        return e.modes.setMode;
-      },
-      get onViewportCommit() {
-        return e.canvas.commitViewport;
-      },
-      onViewportInteractionStart: () => e.canvas.cancelViewportNavigation(),
-      onCreateAt: nt,
-      onCreateToolAt: ot,
-      get onItemClick() {
-        return c.onDockItemClick;
-      },
-      get modeIcons() {
-        return c.dockModeIcons;
-      },
-      get dockActions() {
-        return c.dockActions;
-      },
-      get dockItems() {
-        return c.dockItems;
-      },
-      get registerExternalDockDragController() {
-        return c.registerExternalDockDragController;
-      },
-      onDragPreviewChange: V
-    }), null), C(t, f(vt, {
-      get scaleLabel() {
-        return e.scaleLabel();
-      },
-      get onZoomOut() {
-        return e.hud.zoomOut;
-      },
-      get onZoomIn() {
-        return e.hud.zoomIn;
-      },
-      get activeTheme() {
-        return e.theme();
-      },
-      onSelectTheme: (o) => e.appearance.setTheme(o)
-    }), null), C(t, f(gt, {
-      get when() {
-        return e.contextMenu.state();
-      },
-      get children() {
-        return f(st, {
-          get children() {
-            return [(() => {
-              var o = Tt();
-              return ut(o, "contextmenu", e.contextMenu.retarget, !0), o;
-            })(), f(kt, {
-              get x() {
-                return F()?.left ?? 0;
-              },
-              get y() {
-                return F()?.top ?? 0;
-              },
-              get items() {
-                return T();
-              }
-            })];
-          }
-        });
-      }
-    }), null), t;
-  })();
 }
-lt(["contextmenu"]);
+mt(["click", "keyup", "contextmenu"]);
 export {
-  Zt as WorkbenchSurface
+  oe as WorkbenchSurface
 };