@floegence/floe-webapp-core 0.36.15 → 0.36.17

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,27 +1,28 @@
-import { insert as v, createComponent as d, effect as D, setAttribute as S, template as I, Portal as F, setStyleProperty as H, delegateEvents as P } from "solid-js/web";
-import { createSignal as O, onCleanup as R, createMemo as B, For as T, Show as X } from "solid-js";
-import { Motion as C } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
-import { easing as y, duration as L } from "../../utils/animations.js";
-import { Layers as G, Plus as q } from "../icons/index.js";
-import { startHotInteraction as z } from "../../utils/hotInteraction.js";
-var N = /* @__PURE__ */ I("<button type=button class=workbench-dock__item>"), U = /* @__PURE__ */ I('<div class=workbench-dock data-floe-canvas-interactive=true><button type=button class=workbench-dock__item aria-label="Show all widgets"></button><span class=workbench-dock__divider aria-hidden=true>'), V = /* @__PURE__ */ I("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
-const x = 5, W = '[data-floe-workbench-canvas-frame="true"]';
-function j(e, l) {
-  const a = document.querySelector(W);
+import { insert as g, createComponent as d, effect as D, setAttribute as S, template as L, Portal as Y, setStyleProperty as M, delegateEvents as A } from "solid-js/web";
+import { createSignal as I, onCleanup as F, createMemo as H, For as P, Show as x } from "solid-js";
+import { Motion as w } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { easing as y, duration as C } from "../../utils/animations.js";
+import { Layers as R, Plus as T } from "../icons/index.js";
+import { startHotInteraction as B } from "../../utils/hotInteraction.js";
+import { startPointerSession as G } from "../ui/pointerSession.js";
+var q = /* @__PURE__ */ L("<button type=button class=workbench-dock__item>"), z = /* @__PURE__ */ L('<div class=workbench-dock data-floe-canvas-interactive=true><button type=button class=workbench-dock__item aria-label="Show all widgets"></button><span class=workbench-dock__divider aria-hidden=true>'), N = /* @__PURE__ */ L("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
+const O = 5, V = '[data-floe-workbench-canvas-frame="true"]';
+function W(t, l) {
+  const a = document.querySelector(V);
   if (!(a instanceof HTMLElement)) return !1;
-  const s = a.getBoundingClientRect();
-  return e >= s.left && e <= s.right && l >= s.top && l <= s.bottom;
+  const c = a.getBoundingClientRect();
+  return t >= c.left && t <= c.right && l >= c.top && l <= c.bottom;
 }
-function p(e) {
-  const l = () => e.hoverOffset === -1 ? {
+function j(t) {
+  const l = () => t.hoverOffset === -1 ? {
     scale: 1.26,
     y: -6,
     x: 0
-  } : e.hoverOffset === 1 ? {
+  } : t.hoverOffset === 1 ? {
     scale: 1.08,
     y: -2,
     x: 5
-  } : e.hoverOffset === -2 ? {
+  } : t.hoverOffset === -2 ? {
     scale: 1.08,
     y: -2,
     x: -5
@@ -29,31 +30,31 @@ function p(e) {
     scale: 1,
     y: 0,
     x: 0
-  }, a = () => e.hoverOffset === -1, s = (o) => {
-    o.button === 0 && e.onDragBegin(o, e.type, e.label, e.icon);
+  }, a = () => t.hoverOffset === -1, c = (i) => {
+    i.button === 0 && t.onDragBegin(i, t.type, t.label, t.icon);
   };
   return (() => {
-    var o = N();
-    return o.$$pointerdown = s, o.addEventListener("pointerleave", () => e.onLeave()), o.addEventListener("pointerenter", () => e.onEnter()), v(o, d(C.span, {
+    var i = q();
+    return i.$$pointerdown = c, i.addEventListener("pointerleave", () => t.onLeave()), i.addEventListener("pointerenter", () => t.onEnter()), g(i, d(w.span, {
       class: "workbench-dock__tile",
       get animate() {
         return l();
       },
       get transition() {
         return {
-          duration: L.fast,
+          duration: C.fast,
           easing: y.easeOut
         };
       },
       get children() {
         return (() => {
-          const t = e.icon;
-          return d(t, {
+          const n = t.icon;
+          return d(n, {
             class: "workbench-dock__icon"
           });
         })();
       }
-    }), null), v(o, d(C.span, {
+    }), null), g(i, d(w.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
@@ -63,90 +64,91 @@ function p(e) {
       },
       get transition() {
         return {
-          duration: L.fast,
+          duration: C.fast,
           easing: y.easeOut
         };
       },
       get children() {
-        return e.label;
+        return t.label;
       }
-    }), null), D((t) => {
-      var h = !!e.active, m = !!a(), f = !!e.isDragging, _ = `${e.label} — click to solo, drag to canvas to create`, b = e.active;
-      return h !== t.e && o.classList.toggle("is-active", t.e = h), m !== t.t && o.classList.toggle("is-hovered", t.t = m), f !== t.a && o.classList.toggle("is-source-dragging", t.a = f), _ !== t.o && S(o, "aria-label", t.o = _), b !== t.i && S(o, "aria-pressed", t.i = b), t;
+    }), null), D((n) => {
+      var f = !!t.active, k = !!a(), h = !!t.isDragging, _ = `${t.label} — click to solo, drag to canvas to create`, b = t.active;
+      return f !== n.e && i.classList.toggle("is-active", n.e = f), k !== n.t && i.classList.toggle("is-hovered", n.t = k), h !== n.a && i.classList.toggle("is-source-dragging", n.a = h), _ !== n.o && S(i, "aria-label", n.o = _), b !== n.i && S(i, "aria-pressed", n.i = b), n;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0
-    }), o;
+    }), i;
   })();
 }
-function re(e) {
-  const [l, a] = O(null), [s, o] = O(null);
-  let t;
-  R(() => {
-    t?.abort(), t = void 0, s()?.stopInteraction();
+function nt(t) {
+  const [l, a] = I(null), [c, i] = I(null);
+  let n;
+  F(() => {
+    n?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), n = void 0, c()?.stopInteraction();
   });
-  const h = B(() => e.widgetDefinitions.every((i) => e.filters[i.type])), m = (i) => {
+  const f = H(() => t.widgetDefinitions.every((o) => t.filters[o.type])), k = (o) => {
     const r = l();
-    return r === null ? 0 : r === i ? -1 : r === i + 1 ? -2 : r === i - 1 ? 1 : 0;
-  }, f = (i) => {
-    const r = s();
+    return r === null ? 0 : r === o ? -1 : r === o + 1 ? -2 : r === o - 1 ? 1 : 0;
+  }, h = (o) => {
+    const r = c();
     if (!r) return;
-    const n = !r.moved;
-    if (r.stopInteraction(), o(null), t?.abort(), t = void 0, n) {
-      e.onSoloFilter(r.type);
+    const e = !r.moved;
+    if (r.stopInteraction(), i(null), n = void 0, e) {
+      t.onSoloFilter(r.type);
       return;
     }
-    i && r.overCanvas && e.onCreateAt?.(r.type, r.clientX, r.clientY);
-  }, _ = (i, r, n, u) => {
-    i.preventDefault(), t?.abort(), o({
+    o && r.overCanvas && t.onCreateAt?.(r.type, r.clientX, r.clientY);
+  }, _ = (o, r, e, u) => {
+    o.preventDefault(), n?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), i({
       type: r,
-      label: n,
+      label: e,
       icon: u,
-      pointerId: i.pointerId,
-      startClientX: i.clientX,
-      startClientY: i.clientY,
-      clientX: i.clientX,
-      clientY: i.clientY,
+      pointerId: o.pointerId,
+      startClientX: o.clientX,
+      startClientY: o.clientY,
+      clientX: o.clientX,
+      clientY: o.clientY,
       moved: !1,
       overCanvas: !1,
-      stopInteraction: z({
+      stopInteraction: B({
         kind: "drag",
         cursor: "grabbing"
       })
     });
-    const c = new AbortController();
-    t = c;
-    const k = (g) => {
-      o((w) => {
-        if (!w || w.pointerId !== g.pointerId) return w;
-        const Y = g.clientX - w.startClientX, M = g.clientY - w.startClientY, E = w.moved || Math.abs(Y) > x || Math.abs(M) > x;
+    const v = (s) => {
+      i((m) => {
+        if (!m || m.pointerId !== s.pointerId) return m;
+        const X = s.clientX - m.startClientX, $ = s.clientY - m.startClientY, E = m.moved || Math.abs(X) > O || Math.abs($) > O;
         return {
-          ...w,
-          clientX: g.clientX,
-          clientY: g.clientY,
+          ...m,
+          clientX: s.clientX,
+          clientY: s.clientY,
           moved: E,
-          overCanvas: E && j(g.clientX, g.clientY)
+          overCanvas: E && W(s.clientX, s.clientY)
         };
       });
-    }, $ = (g) => {
-      g.pointerId === i.pointerId && f(!0);
-    }, A = (g) => {
-      g.pointerId === i.pointerId && f(!1);
     };
-    window.addEventListener("pointermove", k, {
-      signal: c.signal
-    }), window.addEventListener("pointerup", $, {
-      signal: c.signal
-    }), window.addEventListener("pointercancel", A, {
-      signal: c.signal
+    n = G({
+      pointerEvent: o,
+      captureEl: o.currentTarget,
+      onMove: v,
+      onEnd: ({
+        commit: s
+      }) => h(s)
     });
-  }, b = () => s()?.type ?? null;
+  }, b = () => c()?.type ?? null;
   return [(() => {
-    var i = U(), r = i.firstChild;
-    return r.nextSibling, i.addEventListener("pointerleave", () => a(null)), r.$$click = () => e.onShowAll(), r.addEventListener("pointerleave", () => a((n) => n === 0 ? null : n)), r.addEventListener("pointerenter", () => a(0)), v(r, d(C.span, {
+    var o = z(), r = o.firstChild;
+    return r.nextSibling, o.addEventListener("pointerleave", () => a(null)), r.$$click = () => t.onShowAll(), r.addEventListener("pointerleave", () => a((e) => e === 0 ? null : e)), r.addEventListener("pointerenter", () => a(0)), g(r, d(w.span, {
       class: "workbench-dock__tile",
       get animate() {
         return {
@@ -157,16 +159,16 @@ function re(e) {
       },
       get transition() {
         return {
-          duration: L.fast,
+          duration: C.fast,
           easing: y.easeOut
         };
       },
       get children() {
-        return d(G, {
+        return d(R, {
           class: "workbench-dock__icon"
         });
       }
-    }), null), v(r, d(C.span, {
+    }), null), g(r, d(w.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
@@ -176,92 +178,92 @@ function re(e) {
       },
       get transition() {
         return {
-          duration: L.fast,
+          duration: C.fast,
           easing: y.easeOut
         };
       },
       children: "Show all widgets"
-    }), null), v(i, d(T, {
+    }), null), g(o, d(P, {
       get each() {
-        return e.widgetDefinitions;
+        return t.widgetDefinitions;
       },
-      children: (n, u) => {
-        const c = () => u() + 1;
-        return d(p, {
+      children: (e, u) => {
+        const v = () => u() + 1;
+        return d(j, {
           get type() {
-            return n.type;
+            return e.type;
           },
           get label() {
-            return n.label;
+            return e.label;
           },
           get icon() {
-            return n.icon;
+            return e.icon;
           },
           get active() {
-            return e.filters[n.type];
+            return t.filters[e.type];
           },
           get hoverOffset() {
-            return m(c());
+            return k(v());
           },
           get isDragging() {
-            return b() === n.type;
+            return b() === e.type;
           },
-          onEnter: () => a(c()),
-          onLeave: () => a((k) => k === c() ? null : k),
-          onSolo: () => e.onSoloFilter(n.type),
+          onEnter: () => a(v()),
+          onLeave: () => a((s) => s === v() ? null : s),
+          onSolo: () => t.onSoloFilter(e.type),
           onDragBegin: _
         });
       }
-    }), null), D((n) => {
-      var u = !!h(), c = l() === 0, k = h();
-      return u !== n.e && r.classList.toggle("is-active", n.e = u), c !== n.t && r.classList.toggle("is-hovered", n.t = c), k !== n.a && S(r, "aria-pressed", n.a = k), n;
+    }), null), D((e) => {
+      var u = !!f(), v = l() === 0, s = f();
+      return u !== e.e && r.classList.toggle("is-active", e.e = u), v !== e.t && r.classList.toggle("is-hovered", e.t = v), s !== e.a && S(r, "aria-pressed", e.a = s), e;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), i;
-  })(), d(X, {
+    }), o;
+  })(), d(x, {
     get when() {
-      return s()?.moved ?? !1;
+      return c()?.moved ?? !1;
     },
     get children() {
       return d(J, {
-        state: s
+        state: c
       });
     }
   })];
 }
-function J(e) {
+function J(t) {
   const l = () => {
-    const t = e.state();
-    return t ? `translate3d(${t.clientX + 14}px, ${t.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
-  }, a = () => e.state()?.overCanvas ?? !1, s = () => e.state()?.label ?? "", o = () => e.state()?.icon;
-  return d(F, {
+    const n = t.state();
+    return n ? `translate3d(${n.clientX + 14}px, ${n.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
+  }, a = () => t.state()?.overCanvas ?? !1, c = () => t.state()?.label ?? "", i = () => t.state()?.icon;
+  return d(Y, {
     get children() {
-      var t = V(), h = t.firstChild, m = h.nextSibling, f = m.firstChild, _ = f.nextSibling, b = _.firstChild, i = b.nextSibling, r = i.firstChild;
-      return v(f, d(X, {
+      var n = N(), f = n.firstChild, k = f.nextSibling, h = k.firstChild, _ = h.nextSibling, b = _.firstChild, o = b.nextSibling, r = o.firstChild;
+      return g(h, d(x, {
         get when() {
-          return o();
+          return i();
         },
-        children: (n) => {
-          const u = n();
+        children: (e) => {
+          const u = e();
           return d(u, {
             class: "w-4 h-4"
           });
         }
-      })), v(b, s), v(i, d(q, {
+      })), g(b, c), g(o, d(T, {
         class: "w-3 h-3"
-      }), r), v(r, () => a() ? "Drop to create" : "Drag onto canvas"), D((n) => {
-        var u = !!a(), c = l();
-        return u !== n.e && t.classList.toggle("is-over-canvas", n.e = u), c !== n.t && H(t, "transform", n.t = c), n;
+      }), r), g(r, () => a() ? "Drop to create" : "Drag onto canvas"), D((e) => {
+        var u = !!a(), v = l();
+        return u !== e.e && n.classList.toggle("is-over-canvas", e.e = u), v !== e.t && M(n, "transform", e.t = v), e;
       }, {
         e: void 0,
         t: void 0
-      }), t;
+      }), n;
     }
   });
 }
-P(["pointerdown", "click"]);
+A(["pointerdown", "click"]);
 export {
-  re as WorkbenchFilterBar
+  nt as WorkbenchFilterBar
 };

package/dist/components/workbench/WorkbenchHud.d.ts

@@ -1,6 +1,15 @@
+import type { WorkbenchThemeId } from './workbenchThemes';
 export interface WorkbenchHudProps {
     scaleLabel: string;
     onZoomOut: () => void;
     onZoomIn: () => void;
+    /**
+     * Current workbench theme. When provided alongside {@link onSelectTheme},
+     * the HUD renders an inline theme selector next to the zoom controls.
+     * Omit both to hide the selector entirely (e.g. when the consumer provides
+     * its own theming UI elsewhere).
+     */
+    activeTheme?: WorkbenchThemeId;
+    onSelectTheme?: (id: WorkbenchThemeId) => void;
 }
 export declare function WorkbenchHud(props: WorkbenchHudProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchHud.js

@@ -1,17 +1,31 @@
-import { insert as n, createComponent as c, template as i, delegateEvents as r } from "solid-js/web";
-import { Minus as u, Plus as s } from "../icons/index.js";
-var b = /* @__PURE__ */ i('<div class=workbench-hud data-floe-canvas-interactive=true><button type=button class=workbench-hud__button aria-label="Zoom out"></button><div class=workbench-hud__scale></div><button type=button class=workbench-hud__button aria-label="Zoom in">');
-function m(t) {
+import { insert as n, createComponent as o, memo as h, template as i, delegateEvents as u } from "solid-js/web";
+import { Show as m } from "solid-js";
+import { Minus as b, Plus as d } from "../icons/index.js";
+import { WorkbenchThemeSelector as s } from "./WorkbenchThemeSelector.js";
+var _ = /* @__PURE__ */ i("<div class=workbench-hud__divider aria-hidden=true>"), v = /* @__PURE__ */ i('<div class=workbench-hud data-floe-canvas-interactive=true><button type=button class=workbench-hud__button aria-label="Zoom out"></button><div class=workbench-hud__scale></div><button type=button class=workbench-hud__button aria-label="Zoom in">');
+function S(e) {
   return (() => {
-    var o = b(), e = o.firstChild, l = e.nextSibling, a = l.nextSibling;
-    return e.$$click = () => t.onZoomOut(), n(e, c(u, {
+    var l = v(), t = l.firstChild, c = t.nextSibling, r = c.nextSibling;
+    return n(l, o(m, {
+      get when() {
+        return h(() => !!e.activeTheme)() && e.onSelectTheme;
+      },
+      get children() {
+        return [o(s, {
+          get activeTheme() {
+            return e.activeTheme;
+          },
+          onSelect: (a) => e.onSelectTheme?.(a)
+        }), _()];
+      }
+    }), t), t.$$click = () => e.onZoomOut(), n(t, o(b, {
       class: "w-3.5 h-3.5"
-    })), n(l, () => t.scaleLabel), a.$$click = () => t.onZoomIn(), n(a, c(s, {
+    })), n(c, () => e.scaleLabel), r.$$click = () => e.onZoomIn(), n(r, o(d, {
       class: "w-3.5 h-3.5"
-    })), o;
+    })), l;
   })();
 }
-r(["click"]);
+u(["click"]);
 export {
-  m as WorkbenchHud
+  S as WorkbenchHud
 };

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,54 +1,54 @@
-import { insert as c, createComponent as a, Portal as f, addEventListener as w, effect as v, className as h, template as d, delegateEvents as p } from "solid-js/web";
-import { createEffect as s, onCleanup as l, Show as k } from "solid-js";
-import { isTypingElement as W } from "../../utils/dom.js";
-import { clientToCanvasWorld as C } from "../ui/canvasGeometry.js";
-import { WorkbenchCanvas as b } from "./WorkbenchCanvas.js";
-import { WorkbenchContextMenu as A } from "./WorkbenchContextMenu.js";
-import { WorkbenchFilterBar as y } from "./WorkbenchFilterBar.js";
-import { WorkbenchHud as D } from "./WorkbenchHud.js";
-import { WorkbenchLockButton as S } from "./WorkbenchLockButton.js";
-import { installWorkbenchContextMenuDismissListeners as x } from "./workbenchContextMenuDismiss.js";
-import { useWorkbenchModel as M } from "./useWorkbenchModel.js";
-var F = /* @__PURE__ */ d("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), L = /* @__PURE__ */ d("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const R = "F1";
-function U(o) {
-  const e = M({
-    state: () => o.state(),
-    setState: (t) => o.setState(t),
-    widgetDefinitions: () => o.widgetDefinitions,
+import { insert as c, createComponent as a, Portal as v, addEventListener as w, effect as h, className as k, setAttribute as p, template as g, delegateEvents as W } from "solid-js/web";
+import { createEffect as s, onCleanup as u, Show as b } from "solid-js";
+import { isTypingElement as C } from "../../utils/dom.js";
+import { clientToCanvasWorld as A } from "../ui/canvasGeometry.js";
+import { WorkbenchCanvas as D } from "./WorkbenchCanvas.js";
+import { WorkbenchContextMenu as y } from "./WorkbenchContextMenu.js";
+import { WorkbenchFilterBar as S } from "./WorkbenchFilterBar.js";
+import { WorkbenchHud as x } from "./WorkbenchHud.js";
+import { WorkbenchLockButton as M } from "./WorkbenchLockButton.js";
+import { installWorkbenchContextMenuDismissListeners as F } from "./workbenchContextMenuDismiss.js";
+import { useWorkbenchModel as R } from "./useWorkbenchModel.js";
+var T = /* @__PURE__ */ g("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), L = /* @__PURE__ */ g("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const E = "F1";
+function H(i) {
+  const e = R({
+    state: () => i.state(),
+    setState: (t) => i.setState(t),
+    widgetDefinitions: () => i.widgetDefinitions,
     onClose: () => {
     }
   });
   s(() => {
-    o.onApiReady?.({
+    i.onApiReady?.({
       ensureWidget: (t, r) => e.widgetActions.ensureWidget(t, r) ?? null,
       clearSelection: () => e.selection.clear(),
       focusWidget: (t, r) => e.navigation.focusWidget(t, r),
       fitWidget: (t) => e.navigation.fitWidget(t),
       overviewWidget: (t) => e.navigation.overviewWidget(t),
       findWidgetByType: (t) => e.queries.findWidgetByType(t)
-    }), l(() => {
-      o.onApiReady?.(null);
+    }), u(() => {
+      i.onApiReady?.(null);
     });
   });
-  const u = () => o.lockShortcut === void 0 ? R : o.lockShortcut;
+  const l = () => i.lockShortcut === void 0 ? E : i.lockShortcut;
   s(() => {
     if (typeof window > "u" || !e.contextMenu.state()) return;
-    const t = x({
+    const t = F({
       ownerWindow: window,
       onDismiss: e.contextMenu.close
     });
-    l(() => t());
+    u(() => t());
   }), s(() => {
-    if (o.enableKeyboard === !1 || typeof document > "u") return;
-    const t = u(), r = (n) => {
+    if (i.enableKeyboard === !1 || typeof document > "u") return;
+    const t = l(), r = (n) => {
       if (n.defaultPrevented || n.isComposing) return;
       if (t !== null && n.key === t) {
         n.preventDefault(), e.lock.toggle();
         return;
       }
-      const i = n.target;
-      if (!(i instanceof Element && W(i)))
+      const o = n.target;
+      if (!(o instanceof Element && C(o)))
         switch (n.key) {
           case "ArrowUp":
             n.preventDefault(), e.navigation.handleArrowNavigation("up");
@@ -68,23 +68,23 @@ function U(o) {
             break;
         }
     };
-    document.addEventListener("keydown", r, !0), l(() => document.removeEventListener("keydown", r, !0));
+    document.addEventListener("keydown", r, !0), u(() => document.removeEventListener("keydown", r, !0));
   });
-  const g = (t, r) => {
+  const m = (t, r) => {
     const n = document.querySelector('[data-floe-workbench-canvas-frame="true"]');
     if (!n) return null;
-    const i = n.getBoundingClientRect();
-    return C(i, e.viewport(), {
+    const o = n.getBoundingClientRect();
+    return A(o, e.viewport(), {
       clientX: t,
       clientY: r
     });
-  }, m = (t, r, n) => {
-    const i = g(r, n);
-    i && e.widgetActions.addWidgetAtCursor(t, i.worldX, i.worldY);
+  }, f = (t, r, n) => {
+    const o = m(r, n);
+    o && e.widgetActions.addWidgetAtCursor(t, o.worldX, o.worldY);
   };
   return (() => {
     var t = L(), r = t.firstChild;
-    return c(r, a(b, {
+    return c(r, a(D, {
       get widgetDefinitions() {
         return e.widgetDefinitions();
       },
@@ -121,6 +121,9 @@ function U(o) {
       get onCanvasContextMenu() {
         return e.canvas.openCanvasContextMenu;
       },
+      get onCanvasPointerDown() {
+        return e.selection.clear;
+      },
       get onSelectWidget() {
         return e.canvas.selectWidget;
       },
@@ -139,10 +142,16 @@ function U(o) {
       get onCommitResize() {
         return e.canvas.commitResize;
       },
+      get onRequestOverview() {
+        return e.navigation.overviewWidget;
+      },
+      get onRequestFit() {
+        return e.navigation.fitWidget;
+      },
       get onRequestDelete() {
         return e.widgetActions.deleteWidget;
       }
-    })), c(t, a(S, {
+    })), c(t, a(M, {
       get locked() {
         return e.locked();
       },
@@ -150,9 +159,9 @@ function U(o) {
         return e.lock.toggle;
       },
       get shortcutLabel() {
-        return u() ?? void 0;
+        return l() ?? void 0;
       }
-    }), null), c(t, a(y, {
+    }), null), c(t, a(S, {
       get widgetDefinitions() {
         return e.widgetDefinitions();
       },
@@ -168,8 +177,8 @@ function U(o) {
       get onShowAll() {
         return e.filter.showAll;
       },
-      onCreateAt: m
-    }), null), c(t, a(D, {
+      onCreateAt: f
+    }), null), c(t, a(x, {
       get scaleLabel() {
         return e.scaleLabel();
       },
@@ -178,18 +187,22 @@ function U(o) {
       },
       get onZoomIn() {
         return e.hud.zoomIn;
-      }
-    }), null), c(t, a(k, {
+      },
+      get activeTheme() {
+        return e.theme();
+      },
+      onSelectTheme: (n) => e.appearance.setTheme(n)
+    }), null), c(t, a(b, {
       get when() {
         return e.contextMenu.state();
       },
       get children() {
-        return a(f, {
+        return a(v, {
           get children() {
             return [(() => {
-              var n = F();
+              var n = T();
               return w(n, "contextmenu", e.contextMenu.retarget, !0), n;
-            })(), a(A, {
+            })(), a(y, {
               get x() {
                 return e.contextMenu.position()?.left ?? 0;
               },
@@ -203,10 +216,16 @@ function U(o) {
           }
         });
       }
-    }), null), v(() => h(t, `workbench-surface${o.class ? ` ${o.class}` : ""}`)), t;
+    }), null), h((n) => {
+      var o = `workbench-surface${i.class ? ` ${i.class}` : ""}`, d = e.theme();
+      return o !== n.e && k(t, n.e = o), d !== n.t && p(t, "data-workbench-theme", n.t = d), n;
+    }, {
+      e: void 0,
+      t: void 0
+    }), t;
   })();
 }
-p(["contextmenu"]);
+W(["contextmenu"]);
 export {
-  U as WorkbenchSurface
+  H as WorkbenchSurface
 };