@floegence/floe-webapp-core 0.36.13 → 0.36.16

package/dist/components/workbench/useWorkbenchModel.js

@@ -1,41 +1,41 @@
-import { createSignal as V, createMemo as d, onCleanup as xt } from "solid-js";
-import { ArrowUp as St, Copy as Ct, Trash as pt } from "../icons/index.js";
-import { getTopZIndex as kt, createContextMenuPosition as Ft, createWorkbenchId as bt, createWorkbenchViewportCenteredOnWidget as L, findNearestWidget as It, clampScale as Mt, WORKBENCH_CANVAS_ZOOM_STEP as $, WORKBENCH_MIN_SCALE as Xt, createWorkbenchViewportFitForWidget as yt, WORKBENCH_CONTEXT_MENU_WIDTH_PX as Yt, estimateContextMenuHeight as vt } from "./workbenchHelpers.js";
-import { resolveWorkbenchWidgetDefinitions as Ot, getWidgetEntry as j, createWorkbenchFilterState as zt } from "./widgets/widgetRegistry.js";
-function qt(c) {
-  const [W, x] = V(null), [U, D] = V(null), [H, G] = V({ width: 0, height: 0 });
-  let r = null, S = null;
-  const l = c.state, w = d(() => l().widgets), u = d(() => l().viewport), J = d(() => l().locked), N = d(() => l().filters), F = d(() => l().selectedWidgetId), b = d(() => kt(w())), Q = d(() => `${Math.round(u().scale * 100)}%`), tt = () => typeof c.widgetDefinitions == "function" ? c.widgetDefinitions() : c.widgetDefinitions, m = d(
-    () => Ot(tt())
+import { createSignal as N, createMemo as r, onCleanup as Ct } from "solid-js";
+import { ArrowUp as pt, Copy as kt, Trash as Ft } from "../icons/index.js";
+import { getTopZIndex as bt, createContextMenuPosition as It, createWorkbenchId as Mt, createWorkbenchViewportCenteredOnWidget as L, findNearestWidget as Xt, clampScale as vt, WORKBENCH_CANVAS_ZOOM_STEP as $, WORKBENCH_MIN_SCALE as yt, createWorkbenchViewportFitForWidget as Yt, WORKBENCH_CONTEXT_MENU_WIDTH_PX as Ot, estimateContextMenuHeight as zt } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetDefinitions as _t, getWidgetEntry as j, createWorkbenchFilterState as Vt } from "./widgets/widgetRegistry.js";
+function Kt(c) {
+  const [W, x] = N(null), [U, T] = N(null), [D, G] = N({ width: 0, height: 0 });
+  let d = null, S = null;
+  const l = c.state, m = r(() => l().widgets), u = r(() => l().viewport), J = r(() => l().locked), H = r(() => l().filters), F = r(() => l().selectedWidgetId), Q = r(() => l().theme), b = r(() => bt(m())), tt = r(() => `${Math.round(u().scale * 100)}%`), et = () => typeof c.widgetDefinitions == "function" ? c.widgetDefinitions() : c.widgetDefinitions, w = r(
+    () => _t(et())
   ), I = (t, e) => {
-    const n = Number.isFinite(t) && t > 0 ? t : 0, i = Number.isFinite(e) && e > 0 ? e : 0, o = { width: n, height: i }, s = H();
+    const n = Number.isFinite(t) && t > 0 ? t : 0, i = Number.isFinite(e) && e > 0 ? e : 0, o = { width: n, height: i }, s = D();
     return s.width === n && s.height === i ? s : (G(o), o);
   }, R = () => {
     S?.disconnect(), S = null;
-  }, a = () => r ? I(r.clientWidth, r.clientHeight) : I(0, 0), et = (t) => {
-    if (r === (t ?? null)) {
+  }, a = () => d ? I(d.clientWidth, d.clientHeight) : I(0, 0), nt = (t) => {
+    if (d === (t ?? null)) {
       a();
       return;
     }
-    R(), r = t ?? null, a(), !(!r || typeof ResizeObserver > "u") && (S = new ResizeObserver((e) => {
+    R(), d = t ?? null, a(), !(!d || typeof ResizeObserver > "u") && (S = new ResizeObserver((e) => {
       const n = e[0];
       I(
-        n?.contentRect.width ?? r?.clientWidth ?? 0,
-        n?.contentRect.height ?? r?.clientHeight ?? 0
+        n?.contentRect.width ?? d?.clientWidth ?? 0,
+        n?.contentRect.height ?? d?.clientHeight ?? 0
       );
-    }), S.observe(r));
+    }), S.observe(d));
   };
-  xt(() => {
-    R(), r = null;
+  Ct(() => {
+    R(), d = null;
   });
-  const nt = (t) => {
+  const it = (t) => {
     x({
       clientX: t.clientX,
       clientY: t.clientY,
       worldX: t.worldX,
       worldY: t.worldY
     });
-  }, it = (t, e) => {
+  }, ot = (t, e) => {
     f(e.id), x({
       clientX: t.clientX,
       clientY: t.clientY,
@@ -43,16 +43,16 @@ function qt(c) {
       worldY: e.y,
       widgetId: e.id
     });
-  }, h = () => x(null), ot = (t) => l().widgets.find((e) => e.id === t) ?? null, M = (t) => l().widgets.find((e) => e.type === t) ?? null, T = d(() => {
+  }, h = () => x(null), ct = (t) => l().widgets.find((e) => e.id === t) ?? null, M = (t) => l().widgets.find((e) => e.type === t) ?? null, E = r(() => {
     const t = W();
     if (!t) return [];
     if (t.widgetId) {
-      const e = w().find((i) => i.id === t.widgetId), n = [];
+      const e = m().find((i) => i.id === t.widgetId), n = [];
       return e && (n.push({
         id: "bring-to-front",
         kind: "action",
         label: "Bring to Front",
-        icon: St,
+        icon: pt,
         onSelect: () => {
           f(e.id), h();
         }
@@ -60,46 +60,46 @@ function qt(c) {
         id: "duplicate",
         kind: "action",
         label: "Duplicate",
-        icon: Ct,
+        icon: kt,
         onSelect: () => {
-          E(e.type, e.x + 32, e.y + 32), h();
+          B(e.type, e.x + 32, e.y + 32), h();
         }
       })), n.push({ id: "separator-delete", kind: "separator" }), n.push({
         id: "delete",
         kind: "action",
         label: "Delete",
-        icon: pt,
+        icon: Ft,
         destructive: !0,
         onSelect: () => {
-          t.widgetId && Y(t.widgetId), h();
+          t.widgetId && y(t.widgetId), h();
         }
       }), n;
     }
-    return m().map((e) => ({
+    return w().map((e) => ({
       id: `add-${e.type}`,
       kind: "action",
       label: `Add ${e.label}`,
       icon: e.icon,
       onSelect: () => {
-        y(e.type, t.worldX, t.worldY), h();
+        v(e.type, t.worldX, t.worldY), h();
       }
     }));
-  }), ct = d(() => {
+  }), st = r(() => {
     const t = W();
     if (!t) return;
-    const e = T(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
-    return Ft({
+    const e = E(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
+    return It({
       clientX: t.clientX,
       clientY: t.clientY,
-      menuWidth: Yt,
-      menuHeight: vt(n, i)
+      menuWidth: Ot,
+      menuHeight: zt(n, i)
     });
   }), X = (t, e, n) => {
-    const i = j(t, m()), o = i.singleton ? M(t) : null;
+    const i = j(t, w()), o = i.singleton ? M(t) : null;
     if (o)
       return p(o, { centerViewport: !0 });
     const s = i.defaultSize, g = {
-      id: bt(),
+      id: Mt(),
       type: t,
       title: i.defaultTitle,
       x: e,
@@ -114,136 +114,139 @@ function qt(c) {
       widgets: [...k.widgets, g],
       selectedWidgetId: g.id
     })), g;
-  }, y = (t, e, n) => {
-    const i = j(t, m()).defaultSize;
+  }, v = (t, e, n) => {
+    const i = j(t, w()).defaultSize;
     return X(t, e - i.width / 2, n - i.height / 2);
-  }, E = (t, e, n) => X(t, e, n), Y = (t) => {
+  }, B = (t, e, n) => X(t, e, n), y = (t) => {
     c.setState((e) => ({
       ...e,
       widgets: e.widgets.filter((n) => n.id !== t),
       selectedWidgetId: e.selectedWidgetId === t ? null : e.selectedWidgetId
     }));
-  }, st = (t) => {
-    D(t);
+  }, rt = (t) => {
+    T(t);
   }, f = (t) => {
-    D(t);
-    const e = b(), n = w().find((i) => i.id === t);
+    T(t);
+    const e = b(), n = m().find((i) => i.id === t);
     n && n.z_index < e && c.setState((i) => ({
       ...i,
       widgets: i.widgets.map(
         (o) => o.id === t ? { ...o, z_index: e + 1 } : o
       )
     }));
-  }, rt = (t, e) => {
+  }, dt = (t, e) => {
     c.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
         (i) => i.id === t ? { ...i, x: e.x, y: e.y } : i
       )
     }));
-  }, dt = (t, e) => {
+  }, lt = (t, e) => {
     c.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
         (i) => i.id === t ? { ...i, width: e.width, height: e.height } : i
       )
     }));
-  }, v = (t) => {
+  }, Y = (t) => {
     c.setState((e) => ({ ...e, viewport: t }));
-  }, B = (t) => {
-    const e = u(), n = a(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, s = Mt(
+  }, q = (t) => {
+    const e = u(), n = a(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, s = vt(
       t === "in" ? e.scale * $ : e.scale / $
     ), g = {
       x: n.width / 2 - i * s,
       y: n.height / 2 - o * s,
       scale: s
     };
-    v(g);
-  }, lt = () => {
+    Y(g);
+  }, at = () => {
     c.setState((t) => ({ ...t, locked: !t.locked }));
-  }, at = (t) => {
+  }, gt = (t) => {
     c.setState((e) => ({
       ...e,
       filters: { ...e.filters, [t]: !e.filters[t] }
     }));
-  }, gt = (t) => {
+  }, ut = (t) => {
     c.setState((e) => {
       const n = { ...e.filters };
       for (const i of Object.keys(n))
         n[i] = i === t;
       return { ...e, filters: n };
     });
-  }, ut = () => {
-    const t = zt(m());
+  }, ht = () => {
+    const t = Vt(w());
     c.setState((e) => ({
       ...e,
       filters: t
     }));
   }, C = (t) => {
     c.setState((e) => ({ ...e, selectedWidgetId: t }));
-  }, q = () => {
+  }, P = () => {
     c.setState(
       (t) => t.selectedWidgetId === null ? t : { ...t, selectedWidgetId: null }
     );
-  }, ht = () => {
+  }, ft = () => {
     const t = a(), e = u();
     return {
       worldX: t.width > 0 ? (t.width / 2 - e.x) / e.scale : 240,
       worldY: t.height > 0 ? (t.height / 2 - e.y) / e.scale : 180
     };
   };
-  let P = 0;
-  const O = (t) => {
-    const e = u(), n = e.x, i = e.y, o = e.scale, s = performance.now(), g = 360, k = ++P, mt = (_) => 1 - Math.pow(1 - _, 3), Z = (_) => {
-      if (k !== P) return;
-      const Wt = _ - s, K = Math.min(Math.max(Wt / g, 0), 1), A = mt(K);
-      v({
+  let O = 0;
+  const mt = () => {
+    O += 1;
+  }, z = (t) => {
+    const e = u(), n = e.x, i = e.y, o = e.scale, s = performance.now(), g = 360, k = ++O, xt = (V) => 1 - Math.pow(1 - V, 3), Z = (V) => {
+      if (k !== O) return;
+      const St = V - s, K = Math.min(Math.max(St / g, 0), 1), A = xt(K);
+      Y({
         x: n + (t.x - n) * A,
         y: i + (t.y - i) * A,
         scale: o + (t.scale - o) * A
       }), K < 1 && requestAnimationFrame(Z);
     };
     requestAnimationFrame(Z);
-  }, z = (t) => {
+  }, _ = (t) => {
     const e = a();
-    e.width === 0 || e.height === 0 || O(L({
+    e.width === 0 || e.height === 0 || z(L({
       widget: t,
       scale: u().scale,
       frameWidth: e.width,
       frameHeight: e.height
     }));
-  }, ft = (t) => {
+  }, wt = (t) => {
     const e = a();
-    e.width === 0 || e.height === 0 || O(yt({
+    e.width === 0 || e.height === 0 || z(Yt({
       widget: t,
       frameWidth: e.width,
       frameHeight: e.height
     }));
-  }, wt = (t) => {
+  }, Wt = (t) => {
     const e = a();
-    e.width === 0 || e.height === 0 || O(L({
+    e.width === 0 || e.height === 0 || z(L({
       widget: t,
-      scale: Xt,
+      scale: yt,
       frameWidth: e.width,
       frameHeight: e.height
     }));
-  }, p = (t, e = {}) => (C(t.id), f(t.id), e.centerViewport !== !1 && z(t), t);
+  }, p = (t, e = {}) => (C(t.id), f(t.id), e.centerViewport !== !1 && _(t), t);
   return {
-    widgets: w,
+    widgets: m,
     viewport: u,
-    canvasFrameSize: H,
+    canvasFrameSize: D,
     locked: J,
-    filters: N,
+    filters: H,
     selectedWidgetId: F,
+    theme: Q,
     topZIndex: b,
-    scaleLabel: Q,
+    scaleLabel: tt,
     optimisticFrontWidgetId: U,
-    widgetDefinitions: m,
-    setCanvasFrameRef: et,
+    widgetDefinitions: w,
+    setCanvasFrameRef: nt,
     contextMenu: {
       state: W,
-      items: T,
-      position: ct,
+      items: E,
+      position: st,
       close: h,
       retarget: (t) => {
         t.preventDefault(), t.stopPropagation(), x({
@@ -255,70 +258,76 @@ function qt(c) {
       }
     },
     canvas: {
-      openCanvasContextMenu: nt,
-      openWidgetContextMenu: it,
+      openCanvasContextMenu: it,
+      openWidgetContextMenu: ot,
       selectWidget: C,
-      clearSelection: q,
-      startOptimisticFront: st,
+      clearSelection: P,
+      startOptimisticFront: rt,
       commitFront: f,
-      commitMove: rt,
-      commitResize: dt,
-      commitViewport: v
+      commitMove: dt,
+      commitResize: lt,
+      commitViewport: Y,
+      cancelViewportNavigation: mt
     },
     hud: {
-      zoomIn: () => B("in"),
-      zoomOut: () => B("out")
+      zoomIn: () => q("in"),
+      zoomOut: () => q("out")
     },
     lock: {
-      toggle: lt
+      toggle: at
     },
     filter: {
-      toggle: at,
-      solo: gt,
-      showAll: ut
+      toggle: gt,
+      solo: ut,
+      showAll: ht
     },
     navigation: {
       handleArrowNavigation: (t) => {
-        const e = It(
-          w(),
+        const e = Xt(
+          m(),
           F(),
           t,
-          N()
+          H()
         );
         e && p(e);
       },
-      centerOnWidget: z,
+      centerOnWidget: _,
       focusWidget: p,
-      fitWidget: (t) => (C(t.id), f(t.id), ft(t), t),
-      overviewWidget: (t) => (C(t.id), f(t.id), wt(t), t)
+      fitWidget: (t) => (C(t.id), f(t.id), wt(t), t),
+      overviewWidget: (t) => (C(t.id), f(t.id), Wt(t), t)
     },
     selection: {
-      clear: q
+      clear: P
     },
     widgetActions: {
       deleteSelected: () => {
         const t = F();
-        t && Y(t);
+        t && y(t);
       },
-      deleteWidget: Y,
+      deleteWidget: y,
       addWidget: X,
-      addWidgetAtCursor: y,
-      addWidgetCentered: E,
+      addWidgetAtCursor: v,
+      addWidgetCentered: B,
       ensureWidget: (t, e) => {
         const n = M(t);
         if (n)
           return p(n, { centerViewport: e?.centerViewport ?? !0 });
-        const i = ht(), o = y(
+        const i = ft(), o = v(
           t,
           e?.worldX ?? i.worldX,
           e?.worldY ?? i.worldY
         );
-        return (e?.centerViewport ?? !0) && o && z(o), o;
+        return (e?.centerViewport ?? !0) && o && _(o), o;
       }
     },
     queries: {
       findWidgetByType: M,
-      findWidgetById: ot
+      findWidgetById: ct
+    },
+    appearance: {
+      setTheme: (t) => {
+        l().theme !== t && c.setState((e) => ({ ...e, theme: t }));
+      }
     },
     handleCloseRequest: () => {
       if (W()) {
@@ -330,5 +339,5 @@ function qt(c) {
   };
 }
 export {
-  qt as useWorkbenchModel
+  Kt as useWorkbenchModel
 };

package/dist/components/workbench/workbenchHelpers.js

@@ -1,13 +1,14 @@
 import { DEFAULT_WORKBENCH_VIEWPORT as y } from "./types.js";
-import { resolveWorkbenchWidgetDefinitions as _, getWidgetEntry as W, createWorkbenchFilterState as w, isValidWorkbenchWidgetType as k } from "./widgets/widgetRegistry.js";
-function D() {
+import { resolveWorkbenchWidgetDefinitions as _, getWidgetEntry as W, createWorkbenchFilterState as w, isValidWorkbenchWidgetType as H } from "./widgets/widgetRegistry.js";
+import { DEFAULT_WORKBENCH_THEME as b, isWorkbenchThemeId as N } from "./workbenchThemes.js";
+function T() {
   const e = globalThis.crypto;
   return e && typeof e.randomUUID == "function" ? `wb-${e.randomUUID()}` : `wb-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
 }
-function O(e) {
+function A(e) {
   return e.renderMode ?? "canvas_scaled";
 }
-function N(e) {
+function E(e) {
   const t = Number.isFinite(e.viewport.scale) && e.viewport.scale > 0 ? e.viewport.scale : 1;
   return {
     widgetId: e.widgetId,
@@ -22,28 +23,28 @@ function N(e) {
     viewportScale: t
   };
 }
-function R(e) {
+function P(e) {
   return {
     ready: e.ready,
-    rect: N(e)
+    rect: E(e)
   };
 }
-function H(e) {
+function F(e) {
   return e ? {
     x: Number.isFinite(e.x) ? e.x : 0,
     y: Number.isFinite(e.y) ? e.y : 0,
     scale: Number.isFinite(e.scale) && e.scale > 0 ? e.scale : 1
   } : { ...y };
 }
-function F(e, t) {
+function I(e, t) {
   return w(t, e);
 }
-function T(e, t = {}) {
-  const r = _(t.widgetDefinitions), d = t.createFallbackState ?? (() => I(r)), n = e;
+function X(e, t = {}) {
+  const r = _(t.widgetDefinitions), d = t.createFallbackState ?? (() => z(r)), n = e;
   if (!n || n.version !== 1 || !Array.isArray(n.widgets))
     return d();
   const a = n.widgets.filter(
-    (i) => !!i && typeof i.id == "string" && k(i.type, r) && typeof i.title == "string"
+    (i) => !!i && typeof i.id == "string" && H(i.type, r) && typeof i.title == "string"
   ).map((i) => {
     const h = W(i.type, r);
     return {
@@ -61,13 +62,14 @@ function T(e, t = {}) {
   return {
     version: 1,
     widgets: a,
-    viewport: H(n.viewport),
+    viewport: F(n.viewport),
     locked: typeof n.locked == "boolean" ? n.locked : !1,
-    filters: F(n.filters, r),
-    selectedWidgetId: c
+    filters: I(n.filters, r),
+    selectedWidgetId: c,
+    theme: N(n.theme) ? n.theme : b
   };
 }
-function I(e) {
+function z(e) {
   const t = _(e), r = Date.now(), d = [
     { type: "terminal", title: "dev · terminal", x: 80, y: 80 },
     { type: "file-browser", title: "project · files", x: 600, y: 80 },
@@ -94,20 +96,21 @@ function I(e) {
     viewport: { ...y },
     locked: !1,
     filters: w(t),
-    selectedWidgetId: n[0]?.id ?? null
+    selectedWidgetId: n[0]?.id ?? null,
+    theme: b
   };
 }
-const P = 1.18, A = 200, u = 0.45, g = 2.2, z = 48;
+const B = 1.18, K = 200, m = 0.45, u = 2.2, p = 48;
 function v(e) {
-  const t = b(e.scale, u, g);
+  const t = M(e.scale, m, u);
   return {
     x: e.frameWidth / 2 - (e.widget.x + e.widget.width / 2) * t,
     y: e.frameHeight / 2 - (e.widget.y + e.widget.height / 2) * t,
     scale: t
   };
 }
-function X(e) {
-  const t = e.minScale ?? u, r = e.maxScale ?? g, d = e.paddingPx ?? z, n = Math.max(e.frameWidth - d * 2, 1), a = Math.max(e.frameHeight - d * 2, 1), c = b(
+function U(e) {
+  const t = e.minScale ?? m, r = e.maxScale ?? u, d = e.paddingPx ?? p, n = Math.max(e.frameWidth - d * 2, 1), a = Math.max(e.frameHeight - d * 2, 1), c = M(
     Math.min(
       n / Math.max(e.widget.width, 1),
       a / Math.max(e.widget.height, 1)
@@ -122,11 +125,11 @@ function X(e) {
     frameHeight: e.frameHeight
   });
 }
-function p(e, t) {
+function C(e, t) {
   return e.z_index !== t.z_index ? e.z_index - t.z_index : e.created_at_unix_ms !== t.created_at_unix_ms ? e.created_at_unix_ms - t.created_at_unix_ms : e.id.localeCompare(t.id);
 }
 function V(e) {
-  const t = [...e].sort(p), r = /* @__PURE__ */ new Map();
+  const t = [...e].sort(C), r = /* @__PURE__ */ new Map();
   for (const [d, n] of t.entries())
     r.set(n.id, d + 1);
   return {
@@ -134,22 +137,22 @@ function V(e) {
     topRenderLayer: Math.max(t.length, 1)
   };
 }
-function B(e) {
+function L(e) {
   const t = typeof window < "u" ? window.innerWidth : 1280, r = typeof window < "u" ? window.innerHeight : 800;
   let d = e.clientX, n = e.clientY;
   return d + e.menuWidth > t && (d = Math.max(0, t - e.menuWidth - 8)), n + e.menuHeight > r && (n = Math.max(0, r - e.menuHeight - 8)), { left: d, top: n };
 }
-function K(e) {
+function Y(e) {
   return e.reduce((t, r) => Math.max(t, r.z_index), 1);
 }
-function U(e, t, r, d) {
+function $(e, t, r, d) {
   const n = e.filter((o) => d[o.type]);
   if (n.length === 0) return null;
   if (!t) return n[0] ?? null;
   const a = n.find((o) => o.id === t);
   if (!a) return n[0] ?? null;
   const c = a.x + a.width / 2, i = a.y + a.height / 2;
-  let h = null, m = 1 / 0;
+  let h = null, g = 1 / 0;
   for (const o of n) {
     if (o.id === t) continue;
     const s = o.x + o.width / 2 - c, l = o.y + o.height / 2 - i;
@@ -169,40 +172,40 @@ function U(e, t, r, d) {
         break;
     }
     if (!f) continue;
-    const M = Math.sqrt(s * s + l * l), S = Math.atan2(
+    const S = Math.sqrt(s * s + l * l), k = Math.atan2(
       Math.abs(r === "up" || r === "down" ? s : l),
       Math.abs(r === "up" || r === "down" ? l : s)
-    ), x = M * (1 + S * 1.5);
-    x < m && (m = x, h = o);
+    ), x = S * (1 + k * 1.5);
+    x < g && (g = x, h = o);
   }
   return h;
 }
-function b(e, t = u, r = g) {
+function M(e, t = m, r = u) {
   return Math.max(t, Math.min(r, e));
 }
-function L(e, t = 0) {
+function j(e, t = 0) {
   return 16 + Math.max(1, e) * 32 + Math.max(0, t) * 9;
 }
 export {
-  P as WORKBENCH_CANVAS_ZOOM_STEP,
-  A as WORKBENCH_CONTEXT_MENU_WIDTH_PX,
-  g as WORKBENCH_MAX_SCALE,
-  u as WORKBENCH_MIN_SCALE,
-  z as WORKBENCH_VIEWPORT_FIT_PADDING_PX,
-  b as clampScale,
-  B as createContextMenuPosition,
-  I as createDefaultWorkbenchState,
-  D as createWorkbenchId,
-  N as createWorkbenchProjectedRect,
+  B as WORKBENCH_CANVAS_ZOOM_STEP,
+  K as WORKBENCH_CONTEXT_MENU_WIDTH_PX,
+  u as WORKBENCH_MAX_SCALE,
+  m as WORKBENCH_MIN_SCALE,
+  p as WORKBENCH_VIEWPORT_FIT_PADDING_PX,
+  M as clampScale,
+  L as createContextMenuPosition,
+  z as createDefaultWorkbenchState,
+  T as createWorkbenchId,
+  E as createWorkbenchProjectedRect,
   V as createWorkbenchRenderLayerMap,
   v as createWorkbenchViewportCenteredOnWidget,
-  X as createWorkbenchViewportFitForWidget,
-  R as createWorkbenchWidgetSurfaceMetrics,
-  L as estimateContextMenuHeight,
-  U as findNearestWidget,
-  K as getTopZIndex,
-  O as resolveWorkbenchWidgetRenderMode,
-  F as sanitizeFilters,
-  H as sanitizeViewport,
-  T as sanitizeWorkbenchState
+  U as createWorkbenchViewportFitForWidget,
+  P as createWorkbenchWidgetSurfaceMetrics,
+  j as estimateContextMenuHeight,
+  $ as findNearestWidget,
+  Y as getTopZIndex,
+  A as resolveWorkbenchWidgetRenderMode,
+  I as sanitizeFilters,
+  F as sanitizeViewport,
+  X as sanitizeWorkbenchState
 };

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

@@ -0,0 +1,32 @@
+/**
+ * Workbench theme catalog.
+ *
+ * Themes customise the canvas surface, atmosphere, grid, widget chrome,
+ * body treatment, dock, typography, and focus accent via `data-workbench-theme`
+ * on `.workbench-surface`. Theme-specific CSS overrides live in
+ * `workbench-themes.css`.
+ *
+ * The `default` theme is a no-op: it inherits the app's global theme tokens
+ * (`--background`, `--card`, `--border`, `--primary`, ...), so swapping to
+ * `default` reproduces the look before this theme system existed.
+ */
+export declare const WORKBENCH_THEME_IDS: readonly ["default", "vibrancy", "mica", "midnight", "aurora", "terminal"];
+export type WorkbenchThemeId = (typeof WORKBENCH_THEME_IDS)[number];
+export interface WorkbenchThemePreview {
+    /** CSS value applied to the theme swatch's outer frame (represents canvas). */
+    canvas: string;
+    /** CSS value for the swatch's inner card (represents a widget). */
+    widget: string;
+    /** Solid CSS color for the selected/active indicator in the preview. */
+    accent: string;
+}
+export interface WorkbenchThemeMeta {
+    id: WorkbenchThemeId;
+    label: string;
+    description: string;
+    preview: WorkbenchThemePreview;
+}
+export declare const WORKBENCH_THEMES: readonly WorkbenchThemeMeta[];
+export declare const DEFAULT_WORKBENCH_THEME: WorkbenchThemeId;
+export declare function isWorkbenchThemeId(value: unknown): value is WorkbenchThemeId;
+export declare function workbenchThemeMeta(id: WorkbenchThemeId): WorkbenchThemeMeta;