@floegence/floe-webapp-core 0.55.2 → 0.56.2

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,23 +1,23 @@
-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) {
+import { createComponent as l, use as ct, spread as at, mergeProps as dt, insert as C, Portal as st, addEventListener as ut, template as P, delegateEvents as lt } from "solid-js/web";
+import { WorkbenchCompositionActionsContext as gt, WorkbenchCompositionMessagesContext as ft } from "./workbenchCompositionMessages.js";
+import { createSignal as I, createMemo as m, untrack as b, createEffect as h, onCleanup as W, Show as wt } from "solid-js";
+import { clientToCanvasWorld as O } from "../ui/canvasGeometry.js";
+import { createUIFirstSelection as kt } from "../../utils/uiFirstSelection.js";
+import { WorkbenchCanvas as mt } from "./WorkbenchCanvas.js";
+import { WorkbenchContextMenu as vt } from "./WorkbenchContextMenu.js";
+import { WorkbenchDock as yt } from "./WorkbenchFilterBar.js";
+import { WorkbenchHud as At } from "./WorkbenchHud.js";
+import { WorkbenchLockButton as Ct } from "./WorkbenchLockButton.js";
+import { installWorkbenchContextMenuDismissListeners as ht } from "./workbenchContextMenuDismiss.js";
+import { createContextMenuPosition as bt, WORKBENCH_CONTEXT_MENU_WIDTH_PX as Wt, estimateContextMenuHeight as pt } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetPlacementPreview as St, resolveWorkbenchToolPlacementPreview as xt } from "./workbenchPlacement.js";
+import { useWorkbenchModel as It } from "./useWorkbenchModel.js";
+import { sortWorkbenchDockFocusCandidates as Dt, workbenchDockFocusCandidateKey as R, resolveWorkbenchDockFocusCycle as Mt } from "./workbenchDockFocusCycle.js";
+import { resolveWorkbenchInteractionAdapter as Lt } from "./workbenchInteractionAdapter.js";
+import { SURFACE_PORTAL_LAYER_ATTR as Ft, DIALOG_SURFACE_HOST_ATTR as Tt } from "../ui/dialogSurfaceScope.js";
+var Bt = /* @__PURE__ */ P("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), _t = /* @__PURE__ */ P("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const Et = "F1";
+function N(c) {
   if (c)
     try {
       c.focus({
@@ -27,8 +27,8 @@ function q(c) {
       c.focus();
     }
 }
-function oe(c) {
-  const e = Lt({
+function te(c) {
+  const e = It({
     state: () => c.state(),
     setState: (t) => c.setState(t),
     widgetDefinitions: () => c.widgetDefinitions,
@@ -36,7 +36,7 @@ function oe(c) {
     backgroundLayerDefaults: () => c.backgroundLayerDefaults,
     onClose: () => {
     }
-  }), u = yt({
+  }), u = kt({
     committed: e.selectedWidgetId,
     commitEqualRequests: !0,
     commit: (t, n) => {
@@ -47,7 +47,7 @@ function oe(c) {
       e.canvas.selectWidget(t), n?.bringToFront && e.canvas.commitFront(t);
     },
     onEvent: (t) => c.onWidgetActivationEvent?.(t)
-  }), V = () => c.widgetActivationMode === "after-paint" ? u.visual() : e.selectedWidgetId(), S = () => {
+  }), X = () => c.widgetActivationMode === "after-paint" ? u.visual() : e.selectedWidgetId(), p = () => {
     if (c.widgetActivationMode !== "after-paint" || !u.pending())
       return e.selectedObject();
     const t = u.visual();
@@ -55,7 +55,7 @@ function oe(c) {
       kind: "widget",
       id: t
     } : null;
-  }, $ = (t) => {
+  }, q = (t) => {
     if (c.widgetActivationMode === "after-paint") {
       if (u.pending() && u.visual() === t) return;
       u.request(t, {
@@ -64,7 +64,7 @@ function oe(c) {
       return;
     }
     e.canvas.selectWidget(t);
-  }, T = (t) => {
+  }, D = (t) => {
     if (c.widgetActivationMode === "after-paint") {
       if (u.pending() && u.visual() === t) return;
       u.request(t, {
@@ -73,77 +73,77 @@ function oe(c) {
       return;
     }
     e.canvas.selectWidget(t), e.canvas.commitFront(t);
-  }, [l, j] = L(null), [H, U] = L(null), s = v(() => Bt(c.interactionAdapter)), [F, m] = L(W(() => s().createInitialInputOwner())), B = v(() => {
+  }, [g, Y] = I(null), [z, V] = I(null), d = m(() => Lt(c.interactionAdapter)), [M, w] = I(b(() => d().createInitialInputOwner())), L = m(() => {
     const t = c.launcherWidgetTypes;
     return !t || t.length <= 0 ? null : new Set(t);
-  }), K = v(() => {
-    const t = e.widgetDefinitions(), n = B();
+  }), H = m(() => {
+    const t = e.widgetDefinitions(), n = L();
     return n ? t.filter((o) => n.has(o.type)) : t;
-  }), E = v(() => {
-    const t = e.contextMenu.state(), n = e.contextMenu.items(), o = B(), i = o ? n.filter((d) => {
-      if (d.kind !== "action")
+  }), F = m(() => {
+    const t = e.contextMenu.state(), n = e.contextMenu.items(), o = L(), r = o ? n.filter((s) => {
+      if (s.kind !== "action")
         return !0;
-      const w = /^add-(.+)$/.exec(String(d.id ?? ""));
-      return w ? o.has(w[1]) : !0;
+      const A = /^add-(.+)$/.exec(String(s.id ?? ""));
+      return A ? o.has(A[1]) : !0;
     }) : n;
     if (!t || !c.resolveContextMenuItems)
-      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 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 c.resolveContextMenuItems({
       menu: t,
-      items: i,
+      items: r,
       widgets: e.widgets(),
       widget: a,
       closeMenu: e.contextMenu.close
     });
-  }), _ = v(() => {
+  }), T = m(() => {
     const t = e.contextMenu.state();
     if (!t) return;
-    const n = E(), o = n.filter((r) => r.kind === "action").length, i = n.filter((r) => r.kind === "separator").length;
-    return St({
+    const n = F(), o = n.filter((i) => i.kind === "action").length, r = n.filter((i) => i.kind === "separator").length;
+    return bt({
       clientX: t.clientX,
       clientY: t.clientY,
-      menuWidth: xt,
-      menuHeight: It(o, i)
+      menuWidth: Wt,
+      menuHeight: pt(o, r)
     });
-  }), R = (t, n, o) => {
-    const i = s(), r = i.findWidgetRoot(t), a = i.readWidgetId(r);
+  }), B = (t, n, o) => {
+    const r = d(), i = r.findWidgetRoot(t), a = r.readWidgetId(i);
     if (a) {
       if (e.queries.findStickyNoteById(a)) {
-        m(i.createCanvasInputOwner(n === "focus" ? "background_focus" : "background_pointer"));
+        w(r.createCanvasInputOwner(n === "focus" ? "background_focus" : "background_pointer"));
         return;
       }
-      m(i.createWidgetInputOwner(a, n));
+      w(r.createWidgetInputOwner(a, n));
       return;
     }
-    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(() => {
+    const s = g();
+    s && t instanceof Node && s.contains(t) && w(r.createCanvasInputOwner(o));
+  }, _ = (t = "selection_cleared") => {
+    const n = d(), o = g();
+    e.selection.clear(), w(n.createCanvasInputOwner(t)), queueMicrotask(() => {
       if (!o || typeof document > "u") return;
-      const i = document.activeElement;
-      if (!(i instanceof HTMLElement) || !o.contains(i)) {
-        q(o);
+      const r = document.activeElement;
+      if (!(r instanceof HTMLElement) || !o.contains(r)) {
+        N(o);
         return;
       }
-      const r = n.findWidgetRoot(i);
-      q(o), r && document.activeElement === i && i.isConnected && i.blur();
+      const i = n.findWidgetRoot(r);
+      N(o), i && document.activeElement === r && r.isConnected && r.blur();
     });
-  }, 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;
+  }, v = () => {
+    const t = g()?.querySelector('[data-floe-workbench-canvas-frame="true"]'), n = e.viewport(), o = t?.getBoundingClientRect(), r = o?.width ?? 0, i = o?.height ?? 0;
     return {
-      worldX: i > 0 ? (i / 2 - n.x) / n.scale : 240,
-      worldY: r > 0 ? (r / 2 - n.y) / n.scale : 180
+      worldX: r > 0 ? (r / 2 - n.x) / n.scale : 240,
+      worldY: i > 0 ? (i / 2 - n.y) / n.scale : 180
     };
   }, k = (t) => {
-    const n = W(s), o = W(l);
+    const n = b(d), o = b(g);
     queueMicrotask(() => {
-      n.focusWidgetElement(o, t), m(n.createWidgetInputOwner(t, "activation"));
+      n.focusWidgetElement(o, t), w(n.createWidgetInputOwner(t, "activation"));
     });
   };
-  let h = null;
-  const G = (t) => `${t.kind}:${String(t.id)}`, g = (t, n) => ({
+  let y = null;
+  const U = (t) => `${t.kind}:${String(t.id)}`, f = (t, n) => ({
     kind: t,
     id: n.id,
     x: n.x,
@@ -151,26 +151,26 @@ function oe(c) {
     width: n.width,
     height: n.height,
     createdAtUnixMs: n.created_at_unix_ms
-  }), 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);
+  }), S = (t) => t.kind === "widget" ? e.widgets().filter((n) => n.type === t.id).map((n) => f("widget", n)) : t.id === "sticky-note" ? e.stickyNotes().map((n) => f("sticky_note", n)) : t.id === "text" ? e.annotations().map((n) => f("annotation", n)) : t.id === "background-region" ? e.backgroundLayers().map((n) => f("background_layer", n)) : [], $ = (t) => {
+    const n = b(g);
     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 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);
+      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);
       try {
-        d.focus({
+        s.focus({
           preventScroll: !0
         });
       } catch {
-        d.focus();
+        s.focus();
       }
-      m(s().createCanvasInputOwner("background_focus"));
+      w(d().createCanvasInputOwner("background_focus"));
     });
-  }, J = (t) => {
+  }, j = (t) => {
     e.navigation.centerOnWidget({
       id: t.id,
       type: "dock-focus-target",
@@ -182,77 +182,77 @@ function oe(c) {
       z_index: 0,
       created_at_unix_ms: t.createdAtUnixMs
     });
-  }, Q = (t) => {
+  }, K = (t) => {
     if (t.kind === "widget") {
       const n = e.queries.findWidgetById(t.id);
       if (!n) return;
-      T(n.id), e.navigation.centerOnWidget(n), k(n.id);
+      D(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), Z(t);
-  }, tt = (t) => {
-    const n = A();
+    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();
     if (t.kind === "widget") {
       const o = e.widgetActions.addWidgetAtWorldCenter(t.id, n.worldX, n.worldY);
-      return o ? g("widget", o) : null;
+      return o ? f("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;
-  }, et = (t) => {
-    let n = x(t), o = S();
+    return t.id === "sticky-note" ? f("sticky_note", e.widgetActions.addStickyNoteAtCursor(n.worldX, n.worldY)) : t.id === "text" ? f("annotation", e.widgetActions.addTextAnnotationAtCursor(n.worldX, n.worldY)) : t.id === "background-region" ? f("background_layer", e.widgetActions.addBackgroundLayerAtCursor(n.worldX, n.worldY)) : null;
+  }, Z = (t) => {
+    let n = S(t), o = p();
     if (n.length === 0) {
-      const r = tt(t);
-      if (!r) {
-        h = null;
+      const i = G(t);
+      if (!i) {
+        y = null;
         return;
       }
-      n = x(t), o = {
-        kind: r.kind,
-        id: r.id
+      n = S(t), o = {
+        kind: i.kind,
+        id: i.id
       };
     }
-    const i = Ft({
-      dockItemKey: G(t),
+    const r = Mt({
+      dockItemKey: U(t),
       candidates: n,
       selectedObject: o,
-      session: h
+      session: y
     });
-    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;
+    y = r.session, r.target && K(r.target);
+  }, J = (t) => {
+    const n = Dt(S(t)), o = p(), r = o ? R(o) : null, i = r ? n.findIndex((a) => R(a) === r) : -1;
     return {
       count: n.length,
-      currentIndex: r >= 0 ? r : null,
-      active: r >= 0
+      currentIndex: i >= 0 ? i : null,
+      active: i >= 0
     };
-  }, ot = (t) => {
-    h?.dockItemKey !== `${t.kind}:${t.id}` && (h = null);
-  }, rt = (t) => {
+  }, Q = (t) => {
+    y?.dockItemKey !== `${t.kind}:${t.id}` && (y = null);
+  }, tt = (t) => {
     const n = e.navigation.fitWidget(t);
     k(n.id);
-  }, it = (t) => {
+  }, et = (t) => {
     const n = e.navigation.overviewWidget(t);
     k(n.id);
   };
-  y(() => {
+  h(() => {
     c.onApiReady?.({
       ensureWidget: (t, n) => e.widgetActions.ensureWidget(t, n) ?? null,
       createWidget: (t, n) => {
-        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;
+        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;
       },
       createTextAnnotation: (t) => {
-        const n = A();
+        const n = v();
         return e.widgetActions.addTextAnnotationAtCursor(t?.worldX ?? n.worldX, t?.worldY ?? n.worldY) ?? null;
       },
       createStickyNote: (t) => {
-        const n = A();
+        const n = v();
         return e.widgetActions.addStickyNoteAtCursor(t?.worldX ?? n.worldX, t?.worldY ?? n.worldY) ?? null;
       },
       createBackgroundLayer: (t) => {
-        const n = A();
+        const n = v();
         return e.widgetActions.addBackgroundLayerAtCursor(t?.worldX ?? n.worldX, t?.worldY ?? n.worldY) ?? null;
       },
-      clearSelection: () => O("selection_cleared"),
+      clearSelection: () => _("selection_cleared"),
       focusWidget: (t, n) => {
         const o = e.navigation.focusWidget(t, n);
         return k(o.id), o;
@@ -271,12 +271,12 @@ function oe(c) {
       findAnnotationById: (t) => e.queries.findAnnotationById(t),
       findBackgroundLayerById: (t) => e.queries.findBackgroundLayerById(t),
       updateWidgetTitle: (t, n) => {
-        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 ? {
+        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 ? {
             ...a,
-            title: i
+            title: r
           } : a)
         }));
       },
@@ -286,46 +286,46 @@ function oe(c) {
       deleteStickyNote: (t) => e.widgetActions.deleteStickyNote(t),
       deleteAnnotation: (t) => e.widgetActions.deleteAnnotation(t),
       deleteBackgroundLayer: (t) => e.widgetActions.deleteBackgroundLayer(t)
-    }), p(() => {
+    }), W(() => {
       c.onApiReady?.(null);
     });
   });
-  const N = () => c.lockShortcut === void 0 ? Nt : c.lockShortcut;
-  y(() => {
+  const E = () => c.lockShortcut === void 0 ? Et : c.lockShortcut;
+  h(() => {
     if (typeof window > "u" || !e.contextMenu.state()) return;
-    const t = pt({
+    const t = ht({
       ownerWindow: window,
       onDismiss: e.contextMenu.close
     });
-    p(() => t());
-  }), y(() => {
-    const t = F();
+    W(() => t());
+  }), h(() => {
+    const t = M();
     if (t.kind !== "widget") return;
-    e.widgets().some((o) => o.id === t.widgetId) || m(s().createCanvasInputOwner("widget_removed"));
-  }), y(() => {
-    const t = l();
+    e.widgets().some((o) => o.id === t.widgetId) || w(d().createCanvasInputOwner("widget_removed"));
+  }), h(() => {
+    const t = g();
     if (!t) return;
-    const n = (i) => {
-      R(i.target, "pointer", "background_pointer");
-    }, o = (i) => {
-      R(i.target, "focus", "background_focus");
+    const n = (r) => {
+      B(r.target, "pointer", "background_pointer");
+    }, o = (r) => {
+      B(r.target, "focus", "background_focus");
     };
-    t.addEventListener("pointerdown", n, !0), t.addEventListener("focusin", o), p(() => {
+    t.addEventListener("pointerdown", n, !0), t.addEventListener("focusin", o), W(() => {
       t.removeEventListener("pointerdown", n, !0), t.removeEventListener("focusin", o);
     });
-  }), y(() => {
+  }), h(() => {
     if (c.enableKeyboard === !1 || typeof document > "u") return;
-    const t = N(), n = (o) => {
+    const t = E(), n = (o) => {
       if (!(o.defaultPrevented || o.isComposing)) {
         if (t !== null && o.key === t) {
           o.preventDefault(), e.lock.toggle();
           return;
         }
-        if (!s().shouldBypassGlobalHotkeys({
-          root: l(),
+        if (!d().shouldBypassGlobalHotkeys({
+          root: g(),
           target: o.target,
-          owner: F(),
-          interactiveSelector: s().interactiveSelector
+          owner: M(),
+          interactiveSelector: d().interactiveSelector
         }))
           switch (o.key) {
             case "ArrowUp":
@@ -347,52 +347,52 @@ function oe(c) {
           }
       }
     };
-    document.addEventListener("keydown", n, !0), p(() => document.removeEventListener("keydown", n, !0));
+    document.addEventListener("keydown", n, !0), W(() => document.removeEventListener("keydown", n, !0));
   });
-  const I = (t, n, o) => {
+  const x = (t, n, o) => {
     if (o?.worldPoint)
       return o.worldPoint;
     if (o?.canvasFrame)
-      return P(o.canvasFrame, e.viewport(), {
+      return O(o.canvasFrame, e.viewport(), {
         clientX: t,
         clientY: n
       });
-    const i = l()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
-    if (!i) return null;
-    const r = i.getBoundingClientRect();
-    return P(r, e.viewport(), {
+    const r = g()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
+    if (!r) return null;
+    const i = r.getBoundingClientRect();
+    return O(i, e.viewport(), {
       clientX: t,
       clientY: n
     });
-  }, 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) {
+  }, 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) {
       if (t === "sticky-note") {
-        e.widgetActions.addStickyNoteAtCursor(r.worldX, r.worldY);
+        e.widgetActions.addStickyNoteAtCursor(i.worldX, i.worldY);
         return;
       }
       if (t === "text") {
-        e.widgetActions.addTextAnnotationAtCursor(r.worldX, r.worldY);
+        e.widgetActions.addTextAnnotationAtCursor(i.worldX, i.worldY);
         return;
       }
-      t === "background-region" && e.widgetActions.addBackgroundLayerAtCursor(r.worldX, r.worldY);
+      t === "background-region" && e.widgetActions.addBackgroundLayerAtCursor(i.worldX, i.worldY);
     }
-  }, dt = (t) => {
-    t.button === 0 && (s().findWidgetRoot(t.target) || O("background_pointer"));
-  }, st = v(() => {
-    const t = H();
+  }, rt = (t) => {
+    t.button === 0 && (d().findWidgetRoot(t.target) || _("background_pointer"));
+  }, it = m(() => {
+    const t = z();
     if (!t) return null;
-    const n = I(t.clientX, t.clientY, t);
-    return n ? t.kind === "widget" ? Mt({
+    const n = x(t.clientX, t.clientY, t);
+    return n ? t.kind === "widget" ? St({
       type: t.id,
       widgetDefinitions: e.widgetDefinitions(),
       worldX: n.worldX,
       worldY: n.worldY,
       dropAllowed: t.dropAllowed
-    }) : Dt({
+    }) : xt({
       tool: t.id,
       label: t.label,
       worldX: n.worldX,
@@ -401,296 +401,298 @@ function oe(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}` : ""}`;
+  });
+  return l(gt.Provider, {
+    value: {
+      duplicate: (t) => {
+        if (t.kind === "sticky_note") {
+          const n = e.queries.findStickyNoteById(t.id);
+          n && e.widgetActions.duplicateStickyNoteFrom(n);
         }
-      }, () => ({
-        [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;
+        if (t.kind === "annotation") {
+          const n = e.annotations().find((o) => o.id === t.id);
+          n && e.widgetActions.duplicateTextAnnotationFrom(n);
         }
-      })), C(t, f(Wt, {
-        get locked() {
-          return e.locked();
-        },
-        get onToggle() {
-          return e.lock.toggle;
-        },
-        get shortcutLabel() {
-          return N() ?? void 0;
+        if (t.kind === "background_layer") {
+          const n = e.backgroundLayers().find((o) => o.id === t.id);
+          n && e.widgetActions.duplicateBackgroundLayerFrom(n);
         }
-      }), 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 l(ft.Provider, {
+        value: () => c.compositionMessages,
         get children() {
-          return f(wt, {
+          var t = _t(), n = t.firstChild;
+          return ct(Y, t), at(t, dt({
+            get class() {
+              return `workbench-surface${c.class ? ` ${c.class}` : ""}`;
+            }
+          }, () => ({
+            [d().surfaceRootAttr]: "true",
+            [d().dialogSurfaceHostAttr]: "true",
+            [Tt]: "true",
+            [Ft]: "true"
+          }), {
+            get "data-workbench-theme"() {
+              return e.theme();
+            },
+            get "data-workbench-mode"() {
+              return e.mode();
+            },
+            tabIndex: -1
+          }), !1, !0), C(n, l(mt, {
+            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 X();
+            },
+            get selectedObject() {
+              return p();
+            },
+            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, l(Ct, {
+            get locked() {
+              return e.locked();
+            },
+            get onToggle() {
+              return e.lock.toggle;
+            },
+            get shortcutLabel() {
+              return E() ?? void 0;
+            }
+          }), null), C(t, l(yt, {
+            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, l(At, {
+            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, l(wt, {
+            get when() {
+              return e.contextMenu.state();
+            },
             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();
+              return l(st, {
+                get children() {
+                  return [(() => {
+                    var o = Bt();
+                    return ut(o, "contextmenu", e.contextMenu.retarget, !0), o;
+                  })(), l(vt, {
+                    get x() {
+                      return T()?.left ?? 0;
+                    },
+                    get y() {
+                      return T()?.top ?? 0;
+                    },
+                    get items() {
+                      return F();
+                    }
+                  })];
                 }
-              })];
+              });
             }
-          });
+          }), null), t;
         }
-      }), null), t;
+      });
     }
   });
 }
-mt(["click", "keyup", "contextmenu"]);
+lt(["contextmenu"]);
 export {
-  oe as WorkbenchSurface
+  te as WorkbenchSurface
 };