@floegence/floe-webapp-core 0.36.15 → 0.36.17

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

@@ -0,0 +1,6 @@
+import { type WorkbenchThemeId } from './workbenchThemes';
+export interface WorkbenchThemeSelectorProps {
+    activeTheme: WorkbenchThemeId;
+    onSelect: (id: WorkbenchThemeId) => void;
+}
+export declare function WorkbenchThemeSelector(props: WorkbenchThemeSelectorProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchThemeSelector.js

@@ -0,0 +1,77 @@
+import { createComponent as l, insert as c, template as o, effect as $, setAttribute as k, setStyleProperty as h, delegateEvents as S } from "solid-js/web";
+import { createMemo as u, For as T } from "solid-js";
+import { Sparkles as C } from "../icons/index.js";
+import { Dropdown as x } from "../ui/Dropdown.js";
+import { workbenchThemeMeta as W, WORKBENCH_THEMES as E } from "./workbenchThemes.js";
+var y = /* @__PURE__ */ o("<div class=workbench-theme-selector data-floe-canvas-interactive=true>"), L = /* @__PURE__ */ o("<span class=workbench-theme-selector__trigger-inner>"), M = /* @__PURE__ */ o('<div class=workbench-theme-grid role=radiogroup aria-label="Workbench theme"><div class=workbench-theme-grid__header>Workbench theme</div><div class=workbench-theme-grid__items>'), p = /* @__PURE__ */ o("<button type=button class=workbench-theme-tile role=radio><span class=workbench-theme-tile__canvas aria-hidden=true><span class=workbench-theme-tile__widget></span><span class=workbench-theme-tile__dot></span></span><span class=workbench-theme-tile__meta><span class=workbench-theme-tile__label></span><span class=workbench-theme-tile__description>");
+function K(e) {
+  const r = u(() => W(e.activeTheme).label), a = u(() => [{
+    id: "theme-grid",
+    label: "Theme",
+    keepOpen: !0,
+    content: () => l(A, {
+      get activeTheme() {
+        return e.activeTheme;
+      },
+      onSelect: (i) => e.onSelect(i)
+    })
+  }]);
+  return (() => {
+    var i = y();
+    return c(i, l(x, {
+      get trigger() {
+        return (() => {
+          var n = L();
+          return c(n, l(C, {
+            class: "w-3.5 h-3.5"
+          })), n;
+        })();
+      },
+      get triggerAriaLabel() {
+        return `Workbench theme · ${r()}`;
+      },
+      triggerClass: "workbench-theme-selector__trigger",
+      get items() {
+        return a();
+      },
+      onSelect: () => {
+      },
+      align: "end"
+    })), i;
+  })();
+}
+function A(e) {
+  return (() => {
+    var r = M(), a = r.firstChild, i = a.nextSibling;
+    return c(i, l(T, {
+      each: E,
+      children: (n) => l(H, {
+        theme: n,
+        get active() {
+          return n.id === e.activeTheme;
+        },
+        onClick: () => e.onSelect(n.id)
+      })
+    })), r;
+  })();
+}
+function H(e) {
+  return (() => {
+    var r = p(), a = r.firstChild, i = a.firstChild, n = i.nextSibling, w = a.nextSibling, s = w.firstChild, f = s.nextSibling;
+    return r.$$click = () => e.onClick(), c(s, () => e.theme.label), c(f, () => e.theme.description), $((t) => {
+      var m = !!e.active, d = e.active, v = e.active, b = e.theme.preview.canvas, g = e.theme.preview.widget, _ = e.theme.preview.accent;
+      return m !== t.e && r.classList.toggle("is-active", t.e = m), d !== t.t && k(r, "aria-pressed", t.t = d), v !== t.a && k(r, "aria-checked", t.a = v), b !== t.o && h(a, "background", t.o = b), g !== t.i && h(i, "background", t.i = g), _ !== t.n && h(n, "background", t.n = _), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    }), r;
+  })();
+}
+S(["click"]);
+export {
+  K as WorkbenchThemeSelector
+};

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

@@ -32,6 +32,8 @@ export interface WorkbenchWidgetProps {
         width: number;
         height: number;
     }) => void;
+    onRequestOverview: (item: WorkbenchWidgetItem) => void;
+    onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;
 }
 export declare function WorkbenchWidget(props: WorkbenchWidgetProps): JSX.Element;

package/dist/components/workbench/WorkbenchWidget.js

@@ -1,204 +1,260 @@
-import { spread as G, insert as u, createComponent as _, memo as V, effect as K, setAttribute as T, style as q, template as O, use as U, delegateEvents as J } from "solid-js/web";
-import { createSignal as H, onCleanup as Q, untrack as x, createMemo as y } from "solid-js";
-import { startHotInteraction as A } from "../../utils/hotInteraction.js";
-import { GripVertical as Z, X as p } from "../icons/index.js";
-import { WORKBENCH_WIDGET_SHELL_ATTR as tt, resolveWorkbenchWidgetEventOwnership as et } from "../ui/localInteractionSurface.js";
-import { createWorkbenchWidgetSurfaceMetrics as it } from "./workbenchHelpers.js";
-var nt = /* @__PURE__ */ O('<article class=workbench-widget data-floe-dialog-surface-host=true tabindex=0><header class=workbench-widget__header><button type=button class=workbench-widget__drag aria-label="Drag widget"data-floe-canvas-interactive=true></button><div class=workbench-widget__title-area><span class=workbench-widget__title></span></div><button type=button class=workbench-widget__close aria-label="Remove widget"data-floe-canvas-interactive=true></button></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), ot = /* @__PURE__ */ O('<div class=workbench-widget__resize aria-label="Resize widget"data-floe-canvas-interactive=true><svg class=workbench-widget__resize-glyph viewBox="0 0 12 12"aria-hidden=true><path d="M12 0 L0 12"></path><path d="M12 4 L4 12"></path><path d="M12 8 L8 12">');
-const at = 220, rt = 160, dt = '[data-floe-canvas-interactive="true"]', lt = '[data-floe-canvas-pan-surface="true"]';
-function ft(t) {
-  const [f, C] = H(null), [v, M] = H(null);
-  let h, w, b;
-  Q(() => {
-    h?.abort(), h = void 0, w?.abort(), w = void 0, x(f)?.stopInteraction(), x(v)?.stopInteraction();
+import { spread as H, mergeProps as et, insert as l, createComponent as c, memo as it, template as B, use as nt, delegateEvents as ot } from "solid-js/web";
+import { createSignal as L, onCleanup as at, untrack as S, createMemo as _ } from "solid-js";
+import { startHotInteraction as O } from "../../utils/hotInteraction.js";
+import { X as F, Minus as N, Maximize as A, GripVertical as rt } from "../icons/index.js";
+import { CANVAS_WHEEL_INTERACTIVE_ATTR as dt, WORKBENCH_WIDGET_SHELL_ATTR as lt, resolveWorkbenchWidgetEventOwnership as ct } from "../ui/localInteractionSurface.js";
+import { startPointerSession as j } from "../ui/pointerSession.js";
+import { createWorkbenchWidgetSurfaceMetrics as st } from "./workbenchHelpers.js";
+var wt = /* @__PURE__ */ B('<article class=workbench-widget data-floe-dialog-surface-host=true><header class=workbench-widget__header><span class=workbench-widget__traffic role=group aria-label="Window controls"><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--close"aria-label="Close widget"title="Close widget"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button></span><span class=workbench-widget__badge aria-hidden=true></span><button type=button class=workbench-widget__drag aria-label="Drag widget"data-floe-canvas-interactive=true></button><div class=workbench-widget__title-area><span class=workbench-widget__title-dot aria-hidden=true></span><span class=workbench-widget__title></span></div><span class=workbench-widget__window-controls role=group aria-label="Window controls"><button type=button class="workbench-widget__window-control workbench-widget__window-control--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--close"aria-label="Remove widget"title="Remove widget"data-floe-canvas-interactive=true></button></span></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), gt = /* @__PURE__ */ B('<div class=workbench-widget__resize aria-label="Resize widget"data-floe-canvas-interactive=true><svg class=workbench-widget__resize-glyph viewBox="0 0 12 12"aria-hidden=true><path d="M12 0 L0 12"></path><path d="M12 4 L4 12"></path><path d="M12 8 L8 12">');
+const ht = 220, ut = 160, _t = '[data-floe-canvas-interactive="true"]', ft = '[data-floe-canvas-pan-surface="true"]';
+function xt(t) {
+  const [f, I] = L(null), [b, x] = L(null);
+  let g, h, u;
+  at(() => {
+    g?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), g = void 0, h?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), h = void 0, S(f)?.stopInteraction(), S(b)?.stopInteraction();
   });
-  const S = () => f() !== null, W = () => v() !== null, $ = (i) => et({
-    target: i,
-    widgetRoot: b ?? null,
-    interactiveSelector: dt,
-    panSurfaceSelector: lt
-  }), P = (i) => {
-    i.button === 0 && (t.onSelect(t.widgetId), t.onCommitFront(t.widgetId), $(i.target) === "widget_shell" && b?.focus({
+  const C = () => f() !== null, W = () => b() !== null, E = (e) => ct({
+    target: e,
+    widgetRoot: u ?? null,
+    interactiveSelector: _t,
+    panSurfaceSelector: ft
+  }), V = (e) => {
+    e.button === 0 && (t.onSelect(t.widgetId), t.onCommitFront(t.widgetId), E(e.target) === "widget_shell" && u?.focus({
       preventScroll: !0
     }));
-  }, m = y(() => {
-    const i = f();
-    return i ? {
-      x: i.worldX,
-      y: i.worldY
+  }, m = _(() => {
+    const e = f();
+    return e ? {
+      x: e.worldX,
+      y: e.worldY
     } : {
       x: t.x,
       y: t.y
     };
-  }), I = y(() => {
-    const i = v();
-    return i ? {
-      width: i.width,
-      height: i.height
+  }), v = _(() => {
+    const e = b();
+    return e ? {
+      width: e.width,
+      height: e.height
     } : {
       width: t.width,
       height: t.height
     };
-  }), k = y(() => {
+  }), R = _(() => {
     if (!(t.layoutMode !== "projected_surface" || !t.projectedViewport))
-      return it({
+      return st({
         widgetId: t.widgetId,
         worldX: m().x,
         worldY: m().y,
-        worldWidth: I().width,
-        worldHeight: I().height,
+        worldWidth: v().width,
+        worldHeight: v().height,
         viewport: t.projectedViewport,
         ready: t.surfaceReady ?? !0
       });
-  }), j = y(() => {
-    const i = {
-      width: `${I().width}px`,
-      height: `${I().height}px`,
-      "z-index": S() || W() || t.optimisticFront ? `${t.topRenderLayer + 1}` : `${t.renderLayer}`
+  }), G = _(() => {
+    const e = t.itemSnapshot().z_index, i = Number.isFinite(e) ? Math.max(1, Math.min(99, Math.round(e))) : 1;
+    return String(i).padStart(2, "0");
+  }), z = (e) => {
+    e.preventDefault(), e.stopPropagation(), t.onRequestOverview(t.itemSnapshot());
+  }, T = (e) => {
+    e.preventDefault(), e.stopPropagation(), t.onRequestFit(t.itemSnapshot());
+  }, D = (e) => {
+    e.preventDefault(), e.stopPropagation(), t.onRequestDelete(t.widgetId);
+  }, Z = _(() => {
+    const e = {
+      width: `${v().width}px`,
+      height: `${v().height}px`,
+      "z-index": C() || W() || t.optimisticFront ? `${t.topRenderLayer + 1}` : `${t.renderLayer}`
     };
     if (t.layoutMode === "projected_surface") {
-      const n = k()?.rect;
+      const i = R()?.rect;
       return {
-        ...i,
-        left: `${n?.screenX ?? 0}px`,
-        top: `${n?.screenY ?? 0}px`,
-        "--floe-workbench-projected-scale": `${n?.viewportScale ?? Math.max(t.viewportScale, 1e-3)}`
+        ...e,
+        left: `${i?.screenX ?? 0}px`,
+        top: `${i?.screenY ?? 0}px`,
+        "--floe-workbench-projected-scale": `${i?.viewportScale ?? Math.max(t.viewportScale, 1e-3)}`
       };
     }
     return {
-      ...i,
+      ...e,
       transform: `translate(${m().x}px, ${m().y}px)`
     };
-  }), E = (i) => {
-    const n = x(f);
-    if (!n) return;
-    const a = {
-      x: n.worldX,
-      y: n.worldY
+  }), q = (e) => {
+    const i = S(f);
+    if (!i) return;
+    const d = {
+      x: i.worldX,
+      y: i.worldY
     }, r = {
-      x: n.startWorldX,
-      y: n.startWorldY
-    }, s = i && (Math.abs(a.x - r.x) > 1 || Math.abs(a.y - r.y) > 1);
-    t.onCommitFront(t.widgetId), s && t.onCommitMove(t.widgetId, a), n.stopInteraction(), C(null), h?.abort(), h = void 0;
-  }, N = (i) => {
-    if (i.button !== 0 || t.locked) return;
-    i.preventDefault(), i.stopPropagation(), h?.abort(), t.onStartOptimisticFront(t.widgetId);
-    const n = A({
+      x: i.startWorldX,
+      y: i.startWorldY
+    }, a = e && (Math.abs(d.x - r.x) > 1 || Math.abs(d.y - r.y) > 1);
+    t.onCommitFront(t.widgetId), a && t.onCommitMove(t.widgetId, d), i.stopInteraction(), I(null), g = void 0;
+  }, X = (e) => {
+    if (e.button !== 0 || t.locked) return;
+    e.preventDefault(), e.stopPropagation(), g?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), t.onSelect(t.widgetId), u?.focus({
+      preventScroll: !0
+    }), t.onStartOptimisticFront(t.widgetId);
+    const i = O({
       kind: "drag",
       cursor: "grabbing"
-    }), a = Math.max(t.viewportScale, 1e-3);
-    C({
-      pointerId: i.pointerId,
-      startClientX: i.clientX,
-      startClientY: i.clientY,
+    }), d = Math.max(t.viewportScale, 1e-3);
+    I({
+      pointerId: e.pointerId,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
       startWorldX: t.x,
       startWorldY: t.y,
       worldX: t.x,
       worldY: t.y,
       moved: !1,
-      scale: a,
-      stopInteraction: n
+      scale: d,
+      stopInteraction: i
     });
-    const r = (o) => {
-      C((e) => {
-        if (!e || e.pointerId !== o.pointerId) return e;
-        const l = e.startWorldX + (o.clientX - e.startClientX) / e.scale, g = e.startWorldY + (o.clientY - e.startClientY) / e.scale;
+    const r = (a) => {
+      I((n) => {
+        if (!n || n.pointerId !== a.pointerId) return n;
+        const w = n.startWorldX + (a.clientX - n.startClientX) / n.scale, s = n.startWorldY + (a.clientY - n.startClientY) / n.scale;
         return {
-          ...e,
-          worldX: l,
-          worldY: g,
-          moved: e.moved || Math.abs(l - e.startWorldX) > 2 || Math.abs(g - e.startWorldY) > 2
+          ...n,
+          worldX: w,
+          worldY: s,
+          moved: n.moved || Math.abs(w - n.startWorldX) > 2 || Math.abs(s - n.startWorldY) > 2
         };
       });
-    }, s = (o) => {
-      o.pointerId === i.pointerId && E(!0);
-    }, c = (o) => {
-      o.pointerId === i.pointerId && E(!1);
-    }, d = new AbortController();
-    h = d, window.addEventListener("pointermove", r, {
-      signal: d.signal
-    }), window.addEventListener("pointerup", s, {
-      once: !0,
-      signal: d.signal
-    }), window.addEventListener("pointercancel", c, {
-      once: !0,
-      signal: d.signal
+    };
+    g = j({
+      pointerEvent: e,
+      captureEl: e.currentTarget,
+      onMove: r,
+      onEnd: ({
+        commit: a
+      }) => q(a)
     });
-  }, L = (i) => {
-    const n = x(v);
-    if (!n) return;
-    const a = {
-      width: n.width,
-      height: n.height
-    }, r = Math.abs(n.width - n.startWidth) > 1 || Math.abs(n.height - n.startHeight) > 1;
-    i && r && t.onCommitResize(t.widgetId, a), n.stopInteraction(), M(null), w?.abort(), w = void 0;
-  }, F = (i) => {
-    if (i.button !== 0 || t.locked) return;
-    i.preventDefault(), i.stopPropagation(), w?.abort(), t.onStartOptimisticFront(t.widgetId);
-    const n = A({
+  }, K = (e) => {
+    const i = S(b);
+    if (!i) return;
+    const d = {
+      width: i.width,
+      height: i.height
+    }, r = Math.abs(i.width - i.startWidth) > 1 || Math.abs(i.height - i.startHeight) > 1;
+    e && r && t.onCommitResize(t.widgetId, d), i.stopInteraction(), x(null), h = void 0;
+  }, U = (e) => {
+    if (e.button !== 0 || t.locked) return;
+    e.preventDefault(), e.stopPropagation(), h?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), t.onStartOptimisticFront(t.widgetId);
+    const i = O({
       kind: "drag",
       cursor: "nwse-resize"
-    }), a = Math.max(t.viewportScale, 1e-3);
-    M({
-      pointerId: i.pointerId,
-      startClientX: i.clientX,
-      startClientY: i.clientY,
+    }), d = Math.max(t.viewportScale, 1e-3);
+    x({
+      pointerId: e.pointerId,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
       startWidth: t.width,
       startHeight: t.height,
       width: t.width,
       height: t.height,
-      scale: a,
-      stopInteraction: n
+      scale: d,
+      stopInteraction: i
     });
-    const r = (o) => {
-      M((e) => {
-        if (!e || e.pointerId !== o.pointerId) return e;
-        const l = Math.max(at, e.startWidth + (o.clientX - e.startClientX) / e.scale), g = Math.max(rt, e.startHeight + (o.clientY - e.startClientY) / e.scale);
+    const r = (a) => {
+      x((n) => {
+        if (!n || n.pointerId !== a.pointerId) return n;
+        const w = Math.max(ht, n.startWidth + (a.clientX - n.startClientX) / n.scale), s = Math.max(ut, n.startHeight + (a.clientY - n.startClientY) / n.scale);
         return {
-          ...e,
-          width: l,
-          height: g
+          ...n,
+          width: w,
+          height: s
         };
       });
-    }, s = (o) => {
-      o.pointerId === i.pointerId && L(!0);
-    }, c = (o) => {
-      o.pointerId === i.pointerId && L(!1);
-    }, d = new AbortController();
-    w = d, window.addEventListener("pointermove", r, {
-      signal: d.signal
-    }), window.addEventListener("pointerup", s, {
-      once: !0,
-      signal: d.signal
-    }), window.addEventListener("pointercancel", c, {
-      once: !0,
-      signal: d.signal
+    };
+    h = j({
+      pointerEvent: e,
+      captureEl: e.currentTarget,
+      onMove: r,
+      onEnd: ({
+        commit: a
+      }) => K(a)
     });
   };
   return (() => {
-    var i = nt(), n = i.firstChild, a = n.firstChild, r = a.nextSibling, s = r.firstChild, c = r.nextSibling, d = n.nextSibling;
-    i.$$contextmenu = (e) => {
-      $(e.target) === "widget_shell" && (e.preventDefault(), e.stopPropagation(), t.onContextMenu(e, t.itemSnapshot()));
-    }, i.addEventListener("focus", () => {
-      t.onSelect(t.widgetId);
-    }), i.$$pointerdown = P;
-    var o = b;
-    return typeof o == "function" ? U(o, i) : b = i, G(n, {
-      [tt]: "true"
-    }, !1, !0), a.$$pointerdown = N, u(a, _(Z, {
+    var e = wt(), i = e.firstChild, d = i.firstChild, r = d.firstChild, a = r.nextSibling, n = a.nextSibling, w = d.nextSibling, s = w.nextSibling, M = s.nextSibling, J = M.firstChild, p = J.nextSibling, Q = M.nextSibling, $ = Q.firstChild, k = $.nextSibling, y = k.nextSibling, tt = i.nextSibling, P = u;
+    return typeof P == "function" ? nt(P, e) : u = e, H(e, et({
+      get classList() {
+        return {
+          "is-selected": t.selected,
+          "is-dragging": C(),
+          "is-resizing": W(),
+          "is-filtered-out": t.filtered,
+          "is-projected-surface": t.layoutMode === "projected_surface",
+          "is-locked": t.locked
+        };
+      },
+      get "data-floe-workbench-widget-id"() {
+        return t.widgetId;
+      },
+      get "data-workbench-widget-type"() {
+        return t.widgetType;
+      },
+      get "data-floe-workbench-render-mode"() {
+        return t.layoutMode ?? "canvas_scaled";
+      }
+    }, () => ({
+      [dt]: t.selected ? "true" : void 0
+    }), {
+      tabIndex: 0,
+      onPointerDown: V,
+      onFocus: () => {
+        t.onSelect(t.widgetId);
+      },
+      onContextMenu: (o) => {
+        E(o.target) === "widget_shell" && (o.preventDefault(), o.stopPropagation(), t.onContextMenu(o, t.itemSnapshot()));
+      },
+      get style() {
+        return Z();
+      }
+    }), !1, !0), i.$$pointerdown = X, H(i, {
+      [lt]: "true"
+    }, !1, !0), r.$$click = D, r.$$pointerdown = (o) => o.stopPropagation(), l(r, c(F, {
+      class: "workbench-widget__traffic-icon",
+      "aria-hidden": "true"
+    })), a.$$click = z, a.$$pointerdown = (o) => o.stopPropagation(), l(a, c(N, {
+      class: "workbench-widget__traffic-icon",
+      "aria-hidden": "true"
+    })), n.$$click = T, n.$$pointerdown = (o) => o.stopPropagation(), l(n, c(A, {
+      class: "workbench-widget__traffic-icon",
+      "aria-hidden": "true"
+    })), l(w, G), s.$$pointerdown = X, l(s, c(rt, {
       class: "w-3.5 h-3.5"
-    })), u(r, () => {
-      const e = t.definition.icon;
-      return _(e, {
+    })), l(M, () => {
+      const o = t.definition.icon;
+      return c(o, {
         class: "w-3.5 h-3.5"
       });
-    }, s), u(s, () => t.widgetTitle), c.$$click = (e) => {
-      e.stopPropagation(), e.preventDefault(), t.onRequestDelete(t.widgetId);
-    }, c.$$pointerdown = (e) => e.stopPropagation(), u(c, _(p, {
-      class: "w-3 h-3"
-    })), u(d, () => {
-      const e = t.definition.body;
-      return _(e, {
+    }, p), l(p, () => t.widgetTitle), $.$$click = z, $.$$pointerdown = (o) => o.stopPropagation(), l($, c(N, {
+      class: "workbench-widget__window-control-icon",
+      "aria-hidden": "true"
+    })), k.$$click = T, k.$$pointerdown = (o) => o.stopPropagation(), l(k, c(A, {
+      class: "workbench-widget__window-control-icon",
+      "aria-hidden": "true"
+    })), y.$$click = D, y.$$pointerdown = (o) => o.stopPropagation(), l(y, c(F, {
+      class: "workbench-widget__window-control-icon",
+      "aria-hidden": "true"
+    })), l(tt, () => {
+      const o = t.definition.body;
+      return c(o, {
         get widgetId() {
           return t.widgetId;
         },
@@ -209,31 +265,19 @@ function ft(t) {
           return t.widgetType;
         },
         get surfaceMetrics() {
-          return k();
+          return R();
         }
       });
-    }), u(i, (() => {
-      var e = V(() => !!t.locked);
-      return () => e() ? null : (() => {
-        var l = ot();
-        return l.$$pointerdown = F, l;
+    }), l(e, (() => {
+      var o = it(() => !!t.locked);
+      return () => o() ? null : (() => {
+        var Y = gt();
+        return Y.$$pointerdown = U, Y;
       })();
-    })(), null), K((e) => {
-      var l = !!t.selected, g = !!S(), R = !!W(), X = !!t.filtered, Y = t.layoutMode === "projected_surface", z = t.widgetId, D = t.layoutMode ?? "canvas_scaled", B = j();
-      return l !== e.e && i.classList.toggle("is-selected", e.e = l), g !== e.t && i.classList.toggle("is-dragging", e.t = g), R !== e.a && i.classList.toggle("is-resizing", e.a = R), X !== e.o && i.classList.toggle("is-filtered-out", e.o = X), Y !== e.i && i.classList.toggle("is-projected-surface", e.i = Y), z !== e.n && T(i, "data-floe-workbench-widget-id", e.n = z), D !== e.s && T(i, "data-floe-workbench-render-mode", e.s = D), e.h = q(i, B, e.h), e;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0,
-      s: void 0,
-      h: void 0
-    }), i;
+    })(), null), e;
   })();
 }
-J(["pointerdown", "contextmenu", "click"]);
+ot(["pointerdown", "click"]);
 export {
-  ft as WorkbenchWidget
+  xt as WorkbenchWidget
 };

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

@@ -5,3 +5,5 @@ export { useWorkbenchModel, type UseWorkbenchModelOptions } from './useWorkbench
 export { WIDGET_REGISTRY, createWorkbenchFilterState, getWidgetEntry, isValidWorkbenchWidgetType, resolveWorkbenchWidgetDefinitions, type WidgetRegistryEntry, } from './widgets/widgetRegistry';
 export * from './types';
 export { sanitizeWorkbenchState, createDefaultWorkbenchState, createWorkbenchId, createWorkbenchProjectedRect, createWorkbenchRenderLayerMap, createWorkbenchViewportCenteredOnWidget, createWorkbenchViewportFitForWidget, createWorkbenchWidgetSurfaceMetrics, resolveWorkbenchWidgetRenderMode, type WorkbenchRenderLayerMap, } from './workbenchHelpers';
+export { DEFAULT_WORKBENCH_THEME, WORKBENCH_THEME_IDS, WORKBENCH_THEMES, isWorkbenchThemeId, workbenchThemeMeta, type WorkbenchThemeId, type WorkbenchThemeMeta, type WorkbenchThemePreview, } from './workbenchThemes';
+export { WorkbenchThemeSelector, type WorkbenchThemeSelectorProps, } from './WorkbenchThemeSelector';

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

@@ -1,4 +1,5 @@
 import type { Component } from 'solid-js';
+import type { WorkbenchThemeId } from './workbenchThemes';
 export type BuiltinWorkbenchWidgetType = 'terminal' | 'file-browser' | 'system-monitor' | 'log-viewer' | 'code-editor';
 export type WorkbenchWidgetType = BuiltinWorkbenchWidgetType | (string & {});
 export declare const WORKBENCH_WIDGET_TYPES: readonly WorkbenchWidgetType[];
@@ -64,6 +65,7 @@ export interface WorkbenchState<TWidgetType extends string = WorkbenchWidgetType
     locked: boolean;
     filters: Record<TWidgetType, boolean>;
     selectedWidgetId: string | null;
+    theme: WorkbenchThemeId;
 }
 export interface WorkbenchContextMenuState {
     clientX: number;

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

@@ -1,5 +1,6 @@
 import type { InfiniteCanvasContextMenuEvent } from '../../ui';
 import { type WorkbenchWidgetDefinition, type WorkbenchContextMenuState, type WorkbenchState, type WorkbenchViewport, type WorkbenchWidgetItem, type WorkbenchWidgetType } from './types';
+import type { WorkbenchThemeId } from './workbenchThemes';
 import type { WorkbenchContextMenuItem } from './WorkbenchContextMenu';
 export interface UseWorkbenchModelOptions {
     state: () => WorkbenchState;
@@ -17,6 +18,7 @@ export declare function useWorkbenchModel(options: UseWorkbenchModelOptions): {
     locked: import("solid-js").Accessor<boolean>;
     filters: import("solid-js").Accessor<Record<WorkbenchWidgetType, boolean>>;
     selectedWidgetId: import("solid-js").Accessor<string | null>;
+    theme: import("solid-js").Accessor<"terminal" | "default" | "aurora" | "vibrancy" | "mica" | "midnight">;
     topZIndex: import("solid-js").Accessor<number>;
     scaleLabel: import("solid-js").Accessor<string>;
     optimisticFrontWidgetId: import("solid-js").Accessor<string | null>;
@@ -90,5 +92,8 @@ export declare function useWorkbenchModel(options: UseWorkbenchModelOptions): {
         findWidgetByType: (type: WorkbenchWidgetType) => WorkbenchWidgetItem<WorkbenchWidgetType> | null;
         findWidgetById: (widgetId: string) => WorkbenchWidgetItem<WorkbenchWidgetType> | null;
     };
+    appearance: {
+        setTheme: (next: WorkbenchThemeId) => void;
+    };
     handleCloseRequest: () => void;
 };