@floegence/floe-webapp-core 0.36.23 → 0.36.25

package/dist/components/ui/index.d.ts

@@ -9,7 +9,7 @@ export { CommandPalette } from './CommandPalette';
 export { InfiniteCanvas, type InfiniteCanvasProps, type InfiniteCanvasPoint, type InfiniteCanvasContextMenuEvent, } from './InfiniteCanvas';
 export { startPointerSession, type PointerSessionController, type PointerSessionEndEvent, type PointerSessionEndReason, type PointerSessionSnapshot, type StartPointerSessionOptions, } from './pointerSession';
 export { clientToCanvasLocal, clientToCanvasWorld, createViewportFromZoomAnchor, isPointInsideCanvasRect, localToCanvasWorld, type CanvasClientPoint, type CanvasLocalPoint, type CanvasViewportLike, type CanvasViewportRectLike, type CanvasWorldPoint, } from './canvasGeometry';
-export { CANVAS_WHEEL_INTERACTIVE_ATTR, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR, LOCAL_INTERACTION_SURFACE_ATTR, DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR, WORKBENCH_WIDGET_SHELL_ATTR, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR, isLocalInteractionSurfaceTarget, resolveSurfaceInteractionTargetRole, resolveSurfaceWheelRouting, resolveWorkbenchWidgetEventOwnership, shouldActivateWorkbenchWidgetLocalTarget, type SurfaceInteractionRoutingOptions, type SurfaceInteractionTargetRole, type SurfaceWheelLocalReason, type SurfaceWheelRoutingDecision, type SurfaceWheelRoutingOptions, type WorkbenchWidgetEventOwnership, type WorkbenchWidgetEventOwnershipOptions, type WorkbenchWidgetLocalActivationTargetOptions, } from './localInteractionSurface';
+export { CANVAS_WHEEL_INTERACTIVE_ATTR, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR, LOCAL_INTERACTION_SURFACE_ATTR, DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR, WORKBENCH_WIDGET_ACTIVATION_SURFACE_ATTR, DEFAULT_WORKBENCH_WIDGET_ACTIVATION_SURFACE_SELECTOR, WORKBENCH_WIDGET_SHELL_ATTR, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR, isLocalInteractionSurfaceTarget, resolveSurfaceInteractionTargetRole, resolveSurfaceWheelRouting, resolveWorkbenchWidgetEventOwnership, resolveWorkbenchWidgetLocalTypingTarget, shouldActivateWorkbenchWidgetLocalTarget, type SurfaceInteractionRoutingOptions, type SurfaceInteractionTargetRole, type SurfaceWheelLocalReason, type SurfaceWheelRoutingDecision, type SurfaceWheelRoutingOptions, type WorkbenchWidgetEventOwnership, type WorkbenchWidgetEventOwnershipOptions, type WorkbenchWidgetLocalActivationTargetOptions, } from './localInteractionSurface';
 export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, isSurfacePortalMode, projectSurfacePortalPosition, projectSurfacePortalRect, resolveSurfacePortalBoundaryRect, resolveSurfacePortalHost, resolveSurfacePortalMount, resolveSurfacePortalMountRect, __resetSurfacePortalScopeForTests, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalInteractionSnapshot, type SurfacePortalMode, type SurfacePortalRect, } from './surfacePortalScope';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Interactive3DCard, AnimatedBorderCard, NeonCard, MorphCard, type CardProps, type CardVariant, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, type Interactive3DCardProps, type AnimatedBorderCardProps, type NeonCardProps, type MorphCardProps, } from './Card';
 export { Tabs, TabPanel, type TabsProps, type TabPanelProps, type TabItem, type TabsFeatures, type TabsSlotClassNames, type TabsIndicatorMode, type TabsIndicatorColorToken, } from './Tabs';

package/dist/components/ui/localInteractionSurface.d.ts

@@ -4,6 +4,8 @@ export declare const CANVAS_WHEEL_INTERACTIVE_ATTR = "data-floe-canvas-wheel-int
 export declare const DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR = "[data-floe-canvas-wheel-interactive=\"true\"]";
 export declare const WORKBENCH_WIDGET_SHELL_ATTR = "data-floe-workbench-widget-shell";
 export declare const DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR = "[data-floe-workbench-widget-shell=\"true\"]";
+export declare const WORKBENCH_WIDGET_ACTIVATION_SURFACE_ATTR = "data-floe-workbench-widget-activation-surface";
+export declare const DEFAULT_WORKBENCH_WIDGET_ACTIVATION_SURFACE_SELECTOR = "[data-floe-workbench-widget-activation-surface=\"true\"]";
 export type SurfaceInteractionTargetRole = 'canvas' | 'local_surface' | 'pan_surface';
 export type SurfaceWheelLocalReason = 'typing_element' | 'local_interaction_surface' | 'wheel_interactive';
 export type SurfaceWheelRoutingDecision = {
@@ -26,7 +28,9 @@ export interface WorkbenchWidgetEventOwnershipOptions extends SurfaceInteraction
     widgetRoot: Element | EventTarget | null;
     shellSelector?: string;
 }
-export type WorkbenchWidgetLocalActivationTargetOptions = WorkbenchWidgetEventOwnershipOptions;
+export interface WorkbenchWidgetLocalActivationTargetOptions extends WorkbenchWidgetEventOwnershipOptions {
+    widgetActivationSurfaceSelector?: string;
+}
 export interface SurfaceWheelRoutingOptions {
     target: EventTarget | null;
     disablePanZoom: boolean;

package/dist/components/ui/localInteractionSurface.js

@@ -1,90 +1,94 @@
-import { isTypingElement as u } from "../../utils/dom.js";
-const E = "data-floe-local-interaction-surface", i = `[${E}="true"]`, d = "data-floe-canvas-wheel-interactive", _ = `[${d}="true"]`, g = "data-floe-workbench-widget-shell", s = `[${g}="true"]`;
-function o(e) {
+import { isTypingElement as i } from "../../utils/dom.js";
+const T = "data-floe-local-interaction-surface", s = `[${T}="true"]`, S = "data-floe-canvas-wheel-interactive", g = `[${S}="true"]`, A = "data-floe-workbench-widget-shell", f = `[${A}="true"]`, m = "data-floe-workbench-widget-activation-surface", _ = `[${m}="true"]`;
+function u(e) {
   return typeof Element < "u" && e instanceof Element ? e : typeof Node < "u" && e instanceof Node ? e.parentElement : null;
 }
-function T(e) {
+function R(e) {
   if (!e || typeof HTMLElement > "u" || !(e instanceof HTMLElement))
     return !1;
   if (e.matches("button, input, select, textarea, summary") || e.matches("a[href], area[href]") || e.matches('iframe, [contenteditable="true"]')) return !0;
-  const r = e.getAttribute("tabindex");
-  return r !== null && r !== "-1";
+  const t = e.getAttribute("tabindex");
+  return t !== null && t !== "-1";
 }
-function S(e, r) {
-  let l = e;
-  for (; l && l !== r; ) {
-    if (u(l) || T(l))
+function h(e, t) {
+  let r = e;
+  for (; r && r !== t; ) {
+    if (i(r) || R(r))
       return !0;
-    l = l.parentElement;
+    r = r.parentElement;
   }
   return !1;
 }
-function f(e) {
+function d(e) {
   const {
-    target: r,
-    interactiveSelector: l,
-    panSurfaceSelector: c,
-    localInteractionSurfaceSelector: t = i
-  } = e, n = r instanceof Element ? r : null;
-  return n ? n.closest(c) !== null ? "pan_surface" : u(n) || n.closest(l) !== null || n.closest(t) !== null ? "local_surface" : "canvas" : "canvas";
+    target: t,
+    interactiveSelector: r,
+    panSurfaceSelector: a,
+    localInteractionSurfaceSelector: l = s
+  } = e, c = t instanceof Element ? t : null;
+  return c ? c.closest(a) !== null ? "pan_surface" : i(c) || c.closest(r) !== null || c.closest(l) !== null ? "local_surface" : "canvas" : "canvas";
 }
-function m(e) {
+function I(e) {
   const {
-    target: r,
-    localInteractionSurfaceSelector: l = i,
-    wheelInteractiveSelector: c = _
-  } = e, t = o(r);
-  return t ? u(t) ? "typing_element" : t.closest(l) !== null ? "local_interaction_surface" : t.closest(c) !== null ? "wheel_interactive" : null : null;
+    target: t,
+    localInteractionSurfaceSelector: r = s,
+    wheelInteractiveSelector: a = g
+  } = e, l = u(t);
+  return l ? i(l) ? "typing_element" : l.closest(r) !== null ? "local_interaction_surface" : l.closest(a) !== null ? "wheel_interactive" : null : null;
 }
-function R(e) {
-  const r = m(e);
-  return r ? { kind: "local_surface", reason: r } : e.disablePanZoom ? { kind: "ignore", reason: "pan_zoom_disabled" } : { kind: "canvas_zoom" };
+function w(e) {
+  const t = I(e);
+  return t ? { kind: "local_surface", reason: t } : e.disablePanZoom ? { kind: "ignore", reason: "pan_zoom_disabled" } : { kind: "canvas_zoom" };
 }
-function A(e) {
-  return f(e) !== "canvas";
+function C(e) {
+  return d(e) !== "canvas";
 }
-function h(e) {
+function E(e) {
   const {
-    widgetRoot: r,
-    shellSelector: l = s
-  } = e, c = o(r), t = o(e.target);
-  return !c || !t || !c.contains(t) ? "outside_widget" : f(e) !== "canvas" ? "widget_local" : t === c || t.closest(l) !== null ? "widget_shell" : "widget_local";
+    widgetRoot: t,
+    shellSelector: r = f
+  } = e, a = u(t), l = u(e.target);
+  return !a || !l || !a.contains(l) ? "outside_widget" : d(e) !== "canvas" ? "widget_local" : l === a || l.closest(r) !== null ? "widget_shell" : "widget_local";
 }
-function w(e) {
+function v(e) {
   const {
-    widgetRoot: r,
-    shellSelector: l = s,
-    localInteractionSurfaceSelector: c = i
-  } = e, t = o(r), n = o(e.target);
-  return !t || !n || !t.contains(n) || n === t || n.closest(l) !== null || n.closest(e.panSurfaceSelector) !== null || n.closest(c) !== null || S(n, t) ? !1 : h(e) === "widget_local";
+    widgetRoot: t,
+    shellSelector: r = f,
+    localInteractionSurfaceSelector: a = s,
+    widgetActivationSurfaceSelector: l = _
+  } = e, c = u(t), n = u(e.target);
+  return !c || !n || !c.contains(n) || n === c || n.closest(r) !== null || n.closest(e.panSurfaceSelector) !== null || n.closest(a) !== null ? !1 : n.closest(l) !== null ? E(e) === "widget_local" : h(n, c) ? !1 : E(e) === "widget_local";
 }
-function I(e) {
+function W(e) {
   const {
-    widgetRoot: r,
-    shellSelector: l = s,
-    localInteractionSurfaceSelector: c = i
-  } = e, t = o(r), n = o(e.target);
-  if (!t || !n || !t.contains(n) || n === t || n.closest(l) !== null || n.closest(e.panSurfaceSelector) !== null || n.closest(c) !== null)
+    widgetRoot: t,
+    shellSelector: r = f,
+    localInteractionSurfaceSelector: a = s,
+    widgetActivationSurfaceSelector: l = _
+  } = e, c = u(t), n = u(e.target);
+  if (!c || !n || !c.contains(n) || n === c || n.closest(r) !== null || n.closest(e.panSurfaceSelector) !== null || n.closest(a) !== null || n.closest(l) !== null)
     return null;
-  let a = n;
-  for (; a && a !== t; ) {
-    if (a instanceof HTMLElement && u(a))
-      return a;
-    a = a.parentElement;
+  let o = n;
+  for (; o && o !== c; ) {
+    if (o instanceof HTMLElement && i(o))
+      return o;
+    o = o.parentElement;
   }
   return null;
 }
 export {
-  d as CANVAS_WHEEL_INTERACTIVE_ATTR,
-  _ as DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR,
-  i as DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR,
-  s as DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR,
-  E as LOCAL_INTERACTION_SURFACE_ATTR,
-  g as WORKBENCH_WIDGET_SHELL_ATTR,
-  A as isLocalInteractionSurfaceTarget,
-  f as resolveSurfaceInteractionTargetRole,
-  R as resolveSurfaceWheelRouting,
-  h as resolveWorkbenchWidgetEventOwnership,
-  I as resolveWorkbenchWidgetLocalTypingTarget,
-  w as shouldActivateWorkbenchWidgetLocalTarget
+  S as CANVAS_WHEEL_INTERACTIVE_ATTR,
+  g as DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR,
+  s as DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR,
+  _ as DEFAULT_WORKBENCH_WIDGET_ACTIVATION_SURFACE_SELECTOR,
+  f as DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR,
+  T as LOCAL_INTERACTION_SURFACE_ATTR,
+  m as WORKBENCH_WIDGET_ACTIVATION_SURFACE_ATTR,
+  A as WORKBENCH_WIDGET_SHELL_ATTR,
+  C as isLocalInteractionSurfaceTarget,
+  d as resolveSurfaceInteractionTargetRole,
+  w as resolveSurfaceWheelRouting,
+  E as resolveWorkbenchWidgetEventOwnership,
+  W as resolveWorkbenchWidgetLocalTypingTarget,
+  v as shouldActivateWorkbenchWidgetLocalTarget
 };

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,173 +1,195 @@
-import { use as L, spread as O, mergeProps as T, insert as g, createComponent as d, Portal as _, addEventListener as B, template as S, delegateEvents as q } from "solid-js/web";
-import { createSignal as y, createMemo as m, untrack as h, createEffect as f, onCleanup as v, Show as z } from "solid-js";
-import { clientToCanvasWorld as $ } from "../ui/canvasGeometry.js";
-import { WorkbenchCanvas as V } from "./WorkbenchCanvas.js";
-import { WorkbenchContextMenu as N } from "./WorkbenchContextMenu.js";
-import { WorkbenchFilterBar as P } from "./WorkbenchFilterBar.js";
-import { WorkbenchHud as X } from "./WorkbenchHud.js";
-import { WorkbenchLockButton as Y } from "./WorkbenchLockButton.js";
-import { installWorkbenchContextMenuDismissListeners as H } from "./workbenchContextMenuDismiss.js";
-import { useWorkbenchModel as K } from "./useWorkbenchModel.js";
-import { resolveWorkbenchInteractionAdapter as U } from "./workbenchInteractionAdapter.js";
-var Z = /* @__PURE__ */ S("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), G = /* @__PURE__ */ S("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const j = "F1";
-function ue(i) {
-  const t = K({
+import { use as T, spread as _, mergeProps as B, insert as f, createComponent as u, Portal as q, addEventListener as z, template as A, delegateEvents as $ } from "solid-js/web";
+import { createSignal as S, createMemo as w, untrack as h, createEffect as m, onCleanup as v, Show as V } from "solid-js";
+import { clientToCanvasWorld as N } from "../ui/canvasGeometry.js";
+import { WorkbenchCanvas as P } from "./WorkbenchCanvas.js";
+import { WorkbenchContextMenu as H } from "./WorkbenchContextMenu.js";
+import { WorkbenchFilterBar as X } from "./WorkbenchFilterBar.js";
+import { WorkbenchHud as Y } from "./WorkbenchHud.js";
+import { WorkbenchLockButton as K } from "./WorkbenchLockButton.js";
+import { installWorkbenchContextMenuDismissListeners as U } from "./workbenchContextMenuDismiss.js";
+import { useWorkbenchModel as Z } from "./useWorkbenchModel.js";
+import { resolveWorkbenchInteractionAdapter as G } from "./workbenchInteractionAdapter.js";
+var j = /* @__PURE__ */ A("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), J = /* @__PURE__ */ A("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const Q = "F1";
+function I(i) {
+  if (i)
+    try {
+      i.focus({
+        preventScroll: !0
+      });
+    } catch {
+      i.focus();
+    }
+}
+function ge(i) {
+  const t = Z({
     state: () => i.state(),
     setState: (e) => i.setState(e),
     widgetDefinitions: () => i.widgetDefinitions,
     onClose: () => {
     }
-  }), [u, A] = y(null), a = m(() => U(i.interactionAdapter)), [W, w] = y(h(() => a().createInitialInputOwner())), p = m(() => {
+  }), [s, x] = S(null), a = w(() => G(i.interactionAdapter)), [p, l] = S(h(() => a().createInitialInputOwner())), W = w(() => {
     const e = i.launcherWidgetTypes;
     return !e || e.length <= 0 ? null : new Set(e);
-  }), I = m(() => {
-    const e = t.widgetDefinitions(), n = p();
-    return n ? e.filter((r) => n.has(r.type)) : e;
-  }), D = m(() => {
-    const e = t.contextMenu.items(), n = p();
-    return n ? e.filter((r) => {
-      if (r.kind !== "action")
+  }), D = w(() => {
+    const e = t.widgetDefinitions(), r = W();
+    return r ? e.filter((n) => r.has(n.type)) : e;
+  }), E = w(() => {
+    const e = t.contextMenu.items(), r = W();
+    return r ? e.filter((n) => {
+      if (n.kind !== "action")
         return !0;
-      const o = /^add-(.+)$/.exec(String(r.id ?? ""));
-      return o ? n.has(o[1]) : !0;
+      const o = /^add-(.+)$/.exec(String(n.id ?? ""));
+      return o ? r.has(o[1]) : !0;
     }) : e;
-  }), k = (e, n, r) => {
-    const o = a(), c = o.findWidgetRoot(e), s = o.readWidgetId(c);
-    if (s) {
-      w(o.createWidgetInputOwner(s, n));
+  }), k = (e, r, n) => {
+    const o = a(), c = o.findWidgetRoot(e), d = o.readWidgetId(c);
+    if (d) {
+      l(o.createWidgetInputOwner(d, r));
       return;
     }
-    const b = u();
-    b && e instanceof Node && b.contains(e) && w(o.createCanvasInputOwner(r));
-  }, x = () => {
-    const e = u()?.querySelector('[data-floe-workbench-canvas-frame="true"]'), n = t.viewport(), r = e?.getBoundingClientRect(), o = r?.width ?? 0, c = r?.height ?? 0;
+    const y = s();
+    y && e instanceof Node && y.contains(e) && l(o.createCanvasInputOwner(n));
+  }, b = (e = "selection_cleared") => {
+    const r = a(), n = s();
+    t.selection.clear(), l(r.createCanvasInputOwner(e)), queueMicrotask(() => {
+      if (!n || typeof document > "u") return;
+      const o = document.activeElement;
+      if (!(o instanceof HTMLElement) || !n.contains(o)) {
+        I(n);
+        return;
+      }
+      const c = r.findWidgetRoot(o);
+      I(n), c && document.activeElement === o && o.isConnected && o.blur();
+    });
+  }, R = () => {
+    const e = s()?.querySelector('[data-floe-workbench-canvas-frame="true"]'), r = t.viewport(), n = e?.getBoundingClientRect(), o = n?.width ?? 0, c = n?.height ?? 0;
     return {
-      worldX: o > 0 ? (o / 2 - n.x) / n.scale : 240,
-      worldY: c > 0 ? (c / 2 - n.y) / n.scale : 180
+      worldX: o > 0 ? (o / 2 - r.x) / r.scale : 240,
+      worldY: c > 0 ? (c / 2 - r.y) / r.scale : 180
     };
-  }, l = (e) => {
-    const n = h(a), r = h(u);
+  }, g = (e) => {
+    const r = h(a), n = h(s);
     queueMicrotask(() => {
-      n.focusWidgetElement(r, e), w(n.createWidgetInputOwner(e, "activation"));
+      r.focusWidgetElement(n, e), l(r.createWidgetInputOwner(e, "activation"));
     });
   }, M = (e) => {
-    const n = t.navigation.fitWidget(e);
-    l(n.id);
-  }, R = (e) => {
-    const n = t.navigation.overviewWidget(e);
-    l(n.id);
+    const r = t.navigation.fitWidget(e);
+    g(r.id);
+  }, L = (e) => {
+    const r = t.navigation.overviewWidget(e);
+    g(r.id);
   };
-  f(() => {
+  m(() => {
     i.onApiReady?.({
-      ensureWidget: (e, n) => t.widgetActions.ensureWidget(e, n) ?? null,
-      createWidget: (e, n) => {
-        const r = x(), o = t.widgetActions.addWidgetAtCursor(e, n?.worldX ?? r.worldX, n?.worldY ?? r.worldY) ?? null;
-        return o && n?.centerViewport !== !1 && t.navigation.centerOnWidget(o), o;
+      ensureWidget: (e, r) => t.widgetActions.ensureWidget(e, r) ?? null,
+      createWidget: (e, r) => {
+        const n = R(), o = t.widgetActions.addWidgetAtCursor(e, r?.worldX ?? n.worldX, r?.worldY ?? n.worldY) ?? null;
+        return o && r?.centerViewport !== !1 && t.navigation.centerOnWidget(o), o;
       },
-      clearSelection: () => t.selection.clear(),
-      focusWidget: (e, n) => {
-        const r = t.navigation.focusWidget(e, n);
-        return l(r.id), r;
+      clearSelection: () => b("selection_cleared"),
+      focusWidget: (e, r) => {
+        const n = t.navigation.focusWidget(e, r);
+        return g(n.id), n;
       },
       fitWidget: (e) => {
-        const n = t.navigation.fitWidget(e);
-        return l(n.id), n;
+        const r = t.navigation.fitWidget(e);
+        return g(r.id), r;
       },
       overviewWidget: (e) => {
-        const n = t.navigation.overviewWidget(e);
-        return l(n.id), n;
+        const r = t.navigation.overviewWidget(e);
+        return g(r.id), r;
       },
       findWidgetByType: (e) => t.queries.findWidgetByType(e),
       findWidgetById: (e) => t.queries.findWidgetById(e),
-      updateWidgetTitle: (e, n) => {
-        const r = String(e ?? "").trim(), o = String(n ?? "").trim();
-        !r || !o || i.setState((c) => ({
+      updateWidgetTitle: (e, r) => {
+        const n = String(e ?? "").trim(), o = String(r ?? "").trim();
+        !n || !o || i.setState((c) => ({
           ...c,
-          widgets: c.widgets.map((s) => s.id === r && s.title !== o ? {
-            ...s,
+          widgets: c.widgets.map((d) => d.id === n && d.title !== o ? {
+            ...d,
             title: o
-          } : s)
+          } : d)
         }));
       }
     }), v(() => {
       i.onApiReady?.(null);
     });
   });
-  const C = () => i.lockShortcut === void 0 ? j : i.lockShortcut;
-  f(() => {
+  const C = () => i.lockShortcut === void 0 ? Q : i.lockShortcut;
+  m(() => {
     if (typeof window > "u" || !t.contextMenu.state()) return;
-    const e = H({
+    const e = U({
       ownerWindow: window,
       onDismiss: t.contextMenu.close
     });
     v(() => e());
-  }), f(() => {
-    const e = W();
+  }), m(() => {
+    const e = p();
     if (e.kind !== "widget") return;
-    t.widgets().some((r) => r.id === e.widgetId) || w(a().createCanvasInputOwner("widget_removed"));
-  }), f(() => {
-    const e = u();
+    t.widgets().some((n) => n.id === e.widgetId) || l(a().createCanvasInputOwner("widget_removed"));
+  }), m(() => {
+    const e = s();
     if (!e) return;
-    const n = (o) => {
+    const r = (o) => {
       k(o.target, "pointer", "background_pointer");
-    }, r = (o) => {
+    }, n = (o) => {
       k(o.target, "focus", "background_focus");
     };
-    e.addEventListener("pointerdown", n, !0), e.addEventListener("focusin", r), v(() => {
-      e.removeEventListener("pointerdown", n, !0), e.removeEventListener("focusin", r);
+    e.addEventListener("pointerdown", r, !0), e.addEventListener("focusin", n), v(() => {
+      e.removeEventListener("pointerdown", r, !0), e.removeEventListener("focusin", n);
     });
-  }), f(() => {
+  }), m(() => {
     if (i.enableKeyboard === !1 || typeof document > "u") return;
-    const e = C(), n = (r) => {
-      if (!(r.defaultPrevented || r.isComposing)) {
-        if (e !== null && r.key === e) {
-          r.preventDefault(), t.lock.toggle();
+    const e = C(), r = (n) => {
+      if (!(n.defaultPrevented || n.isComposing)) {
+        if (e !== null && n.key === e) {
+          n.preventDefault(), t.lock.toggle();
           return;
         }
         if (!a().shouldBypassGlobalHotkeys({
-          root: u(),
-          target: r.target,
-          owner: W(),
+          root: s(),
+          target: n.target,
+          owner: p(),
           interactiveSelector: a().interactiveSelector
         }))
-          switch (r.key) {
+          switch (n.key) {
             case "ArrowUp":
-              r.preventDefault(), t.navigation.handleArrowNavigation("up");
+              n.preventDefault(), t.navigation.handleArrowNavigation("up");
               break;
             case "ArrowDown":
-              r.preventDefault(), t.navigation.handleArrowNavigation("down");
+              n.preventDefault(), t.navigation.handleArrowNavigation("down");
               break;
             case "ArrowLeft":
-              r.preventDefault(), t.navigation.handleArrowNavigation("left");
+              n.preventDefault(), t.navigation.handleArrowNavigation("left");
               break;
             case "ArrowRight":
-              r.preventDefault(), t.navigation.handleArrowNavigation("right");
+              n.preventDefault(), t.navigation.handleArrowNavigation("right");
               break;
             case "Delete":
             case "Backspace":
-              t.selectedWidgetId() && (r.preventDefault(), t.widgetActions.deleteSelected());
+              t.selectedWidgetId() && (n.preventDefault(), t.widgetActions.deleteSelected());
               break;
           }
       }
     };
-    document.addEventListener("keydown", n, !0), v(() => document.removeEventListener("keydown", n, !0));
+    document.addEventListener("keydown", r, !0), v(() => document.removeEventListener("keydown", r, !0));
   });
-  const E = (e, n) => {
-    const r = u()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
-    if (!r) return null;
-    const o = r.getBoundingClientRect();
-    return $(o, t.viewport(), {
+  const F = (e, r) => {
+    const n = s()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
+    if (!n) return null;
+    const o = n.getBoundingClientRect();
+    return N(o, t.viewport(), {
       clientX: e,
-      clientY: n
+      clientY: r
     });
-  }, F = (e, n, r) => {
-    const o = E(n, r);
+  }, O = (e, r, n) => {
+    const o = F(r, n);
     o && t.widgetActions.addWidgetAtCursor(e, o.worldX, o.worldY);
   };
   return (() => {
-    var e = G(), n = e.firstChild;
-    return L(A, e), O(e, T({
+    var e = J(), r = e.firstChild;
+    return T(x, e), _(e, B({
       get class() {
         return `workbench-surface${i.class ? ` ${i.class}` : ""}`;
       }
@@ -176,8 +198,9 @@ function ue(i) {
     }), {
       get "data-workbench-theme"() {
         return t.theme();
-      }
-    }), !1, !0), g(n, d(V, {
+      },
+      tabIndex: -1
+    }), !1, !0), f(r, u(P, {
       get widgetDefinitions() {
         return t.widgetDefinitions();
       },
@@ -217,9 +240,7 @@ function ue(i) {
       get onCanvasContextMenu() {
         return t.canvas.openCanvasContextMenu;
       },
-      get onCanvasPointerDown() {
-        return t.selection.clear;
-      },
+      onCanvasPointerDown: () => b("background_pointer"),
       get onSelectWidget() {
         return t.canvas.selectWidget;
       },
@@ -238,7 +259,7 @@ function ue(i) {
       get onCommitResize() {
         return t.canvas.commitResize;
       },
-      onRequestOverview: R,
+      onRequestOverview: L,
       onRequestFit: M,
       get onRequestDelete() {
         return i.onRequestDelete ?? t.widgetActions.deleteWidget;
@@ -249,7 +270,7 @@ function ue(i) {
       get onLayoutInteractionEnd() {
         return i.onLayoutInteractionEnd;
       }
-    })), g(e, d(Y, {
+    })), f(e, u(K, {
       get locked() {
         return t.locked();
       },
@@ -259,9 +280,9 @@ function ue(i) {
       get shortcutLabel() {
         return C() ?? void 0;
       }
-    }), null), g(e, d(P, {
+    }), null), f(e, u(X, {
       get widgetDefinitions() {
-        return I();
+        return D();
       },
       get widgets() {
         return t.widgets();
@@ -275,8 +296,8 @@ function ue(i) {
       get onShowAll() {
         return t.filter.showAll;
       },
-      onCreateAt: F
-    }), null), g(e, d(X, {
+      onCreateAt: O
+    }), null), f(e, u(Y, {
       get scaleLabel() {
         return t.scaleLabel();
       },
@@ -289,18 +310,18 @@ function ue(i) {
       get activeTheme() {
         return t.theme();
       },
-      onSelectTheme: (r) => t.appearance.setTheme(r)
-    }), null), g(e, d(z, {
+      onSelectTheme: (n) => t.appearance.setTheme(n)
+    }), null), f(e, u(V, {
       get when() {
         return t.contextMenu.state();
       },
       get children() {
-        return d(_, {
+        return u(q, {
           get children() {
             return [(() => {
-              var r = Z();
-              return B(r, "contextmenu", t.contextMenu.retarget, !0), r;
-            })(), d(N, {
+              var n = j();
+              return z(n, "contextmenu", t.contextMenu.retarget, !0), n;
+            })(), u(H, {
               get x() {
                 return t.contextMenu.position()?.left ?? 0;
               },
@@ -308,7 +329,7 @@ function ue(i) {
                 return t.contextMenu.position()?.top ?? 0;
               },
               get items() {
-                return D();
+                return E();
               }
             })];
           }
@@ -317,7 +338,7 @@ function ue(i) {
     }), null), e;
   })();
 }
-q(["contextmenu"]);
+$(["contextmenu"]);
 export {
-  ue as WorkbenchSurface
+  ge as WorkbenchSurface
 };