@floegence/floe-webapp-core 0.50.6 → 0.52.0

package/dist/components/ui/floatingPresence.js

@@ -1,52 +1,62 @@
-import { createMemo as w, untrack as o, createSignal as s, createEffect as x, onCleanup as g } from "solid-js";
-function p() {
+import { createMemo as g, untrack as t, createSignal as p, createEffect as T, onCleanup as M } from "solid-js";
+function h() {
   return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function M(e) {
+function u(e) {
   return typeof window < "u" && typeof window.requestAnimationFrame == "function" ? window.requestAnimationFrame(e) : globalThis.setTimeout(e, 16);
 }
-function T(e) {
+function F(e) {
   if (typeof window < "u" && typeof window.cancelAnimationFrame == "function") {
     window.cancelAnimationFrame(e);
     return;
   }
   globalThis.clearTimeout(e);
 }
-function F(e) {
-  return p() ? Math.max(0, e.reducedMotionExitDurationMs ?? 1) : Math.max(0, e.exitDurationMs ?? 120);
-}
 function y(e) {
-  const i = w(() => e.open()), a = o(i), [c, l] = s(a), [f, r] = s(a ? "entering" : "exiting");
-  let n = null, t = null;
-  const u = () => {
-    n !== null && (T(n), n = null);
-  }, m = () => {
-    t !== null && (globalThis.clearTimeout(t), t = null);
+  return h() ? Math.max(0, e.reducedMotionExitDurationMs ?? 1) : Math.max(0, e.exitDurationMs ?? 120);
+}
+function A(e) {
+  const o = g(() => e.open()), s = t(o), [a, m] = p(s), [l, i] = p(s ? "entering" : "exiting");
+  let n = null, r = null;
+  const c = () => {
+    n !== null && (F(n), n = null);
+  }, d = () => {
+    r !== null && (globalThis.clearTimeout(r), r = null);
   };
-  return x(() => {
-    if (i()) {
-      m(), u(), l(!0), r("entering"), n = M(() => {
-        n = null, o(i) && r("open");
+  return T(() => {
+    if (o()) {
+      if (d(), c(), t(a) && t(l) === "exiting") {
+        i("open");
+        return;
+      }
+      m(!0), i("entering"), n = u(() => {
+        n = null, t(o) && i("open");
       });
       return;
     }
-    if (u(), !o(c)) {
-      r("exiting");
+    if (c(), !t(a)) {
+      i("exiting");
       return;
     }
-    r("exiting");
-    const d = F(e);
-    t = globalThis.setTimeout(() => {
-      t = null, o(i) || l(!1);
-    }, d);
-  }), g(() => {
-    u(), m();
+    i("exiting");
+    const f = y(e), w = () => {
+      n = null, t(o) || m(!1);
+    }, x = () => {
+      n = null, r = globalThis.setTimeout(() => {
+        r = null, f <= 1 ? w() : n = u(w);
+      }, f);
+    };
+    f <= 1 ? x() : n = u(() => {
+      n = u(x);
+    });
+  }), M(() => {
+    c(), d();
   }), {
-    mounted: c,
-    state: f,
-    exiting: () => f() === "exiting"
+    mounted: a,
+    state: l,
+    exiting: () => l() === "exiting"
   };
 }
 export {
-  y as createFloatingPresence
+  A as createFloatingPresence
 };

package/dist/components/workbench/WorkbenchHud.js

@@ -1,31 +1,31 @@
-import { insert as n, createComponent as o, memo as h, template as i, delegateEvents as u } from "solid-js/web";
+import { insert as n, createComponent as o, memo as u, template as r, delegateEvents as h } 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) {
+var _ = /* @__PURE__ */ r("<div class=workbench-hud__divider aria-hidden=true>"), v = /* @__PURE__ */ r('<div class=workbench-hud data-floe-surface=floating 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 g(e) {
   return (() => {
-    var l = v(), t = l.firstChild, c = t.nextSibling, r = c.nextSibling;
+    var l = v(), t = l.firstChild, a = t.nextSibling, c = a.nextSibling;
     return n(l, o(m, {
       get when() {
-        return h(() => !!e.activeTheme)() && e.onSelectTheme;
+        return u(() => !!e.activeTheme)() && e.onSelectTheme;
       },
       get children() {
         return [o(s, {
           get activeTheme() {
             return e.activeTheme;
           },
-          onSelect: (a) => e.onSelectTheme?.(a)
+          onSelect: (i) => e.onSelectTheme?.(i)
         }), _()];
       }
     }), t), t.$$click = () => e.onZoomOut(), n(t, o(b, {
       class: "w-3.5 h-3.5"
-    })), n(c, () => e.scaleLabel), r.$$click = () => e.onZoomIn(), n(r, o(d, {
+    })), n(a, () => e.scaleLabel), c.$$click = () => e.onZoomIn(), n(c, o(d, {
       class: "w-3.5 h-3.5"
     })), l;
   })();
 }
-u(["click"]);
+h(["click"]);
 export {
-  S as WorkbenchHud
+  g as WorkbenchHud
 };

package/dist/components/workbench/WorkbenchLockButton.js

@@ -1,8 +1,8 @@
 import { insert as n, createComponent as c, memo as s, effect as d, setAttribute as u, template as k, delegateEvents as v } from "solid-js/web";
 import { Motion as m } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
-import { easing as h, duration as f } from "../../utils/animations.js";
+import { easing as f, duration as h } from "../../utils/animations.js";
 import { Lock as g, Unlock as _ } from "../icons/index.js";
-var L = /* @__PURE__ */ k("<button type=button class=workbench-lock-button data-floe-canvas-interactive=true><span class=workbench-lock-button__icon>"), w = /* @__PURE__ */ k("<span class=workbench-lock-button__kbd>");
+var L = /* @__PURE__ */ k("<button type=button class=workbench-lock-button data-floe-surface=floating data-floe-canvas-interactive=true><span class=workbench-lock-button__icon>"), w = /* @__PURE__ */ k("<span class=workbench-lock-button__kbd>");
 function y(t) {
   const l = () => t.locked ? "Unlock canvas" : "Lock canvas";
   return (() => {
@@ -16,8 +16,8 @@ function y(t) {
       },
       get transition() {
         return {
-          duration: f.fast,
-          easing: h.easeOut
+          duration: h.fast,
+          easing: f.easeOut
         };
       },
       get children() {

package/dist/components/workbench/WorkbenchWidget.js

@@ -8,16 +8,16 @@ import { createWorkbenchWidgetSurfaceMetrics as Ee, resolveWorkbenchProjectedSur
 import { createWorkbenchEdgeAutoPanController as Le, WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as Re, frameFromElement as ze } from "./workbenchEdgeAutoPan.js";
 import { resolveWorkbenchInteractionAdapter as Xe } from "./workbenchInteractionAdapter.js";
 import { createOwnerSafePropAccessor as a } from "./workbenchOwnerSafeAccessors.js";
-var Ye = /* @__PURE__ */ Rt('<article class=workbench-widget><div class=workbench-widget__surface><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>'), De = /* @__PURE__ */ Rt('<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">');
+var Ye = /* @__PURE__ */ Rt('<article class=workbench-widget data-floe-surface=floating><div class=workbench-widget__surface><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>'), De = /* @__PURE__ */ Rt('<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 Fe = 220, je = 160, Oe = 160;
 function Qe(i) {
-  const q = a(() => i.definition), u = a(() => i.widgetId), at = a(() => i.widgetTitle), ct = a(() => i.widgetType), L = a(() => i.itemSnapshot), lt = a(() => i.renderLayer), zt = a(() => i.visualFront), st = a(() => i.motion ?? null), dt = a(() => i.topRenderLayer), Xt = a(() => i.viewport), B = a(() => i.onSelect), Yt = a(() => i.onActivate), Dt = a(() => i.onContextMenu), N = a(() => i.onClaimVisualFrontOwner), G = a(() => i.onCommitFront), Ft = a(() => i.onCommitMove), jt = a(() => i.onCommitResize), Ot = a(() => i.onViewportCommit), Ht = a(() => i.onViewportInteractionStart), Vt = a(() => i.onRequestOverview), qt = a(() => i.onRequestFit), Bt = a(() => i.onRequestDelete), Nt = a(() => i.onLayoutInteractionStart), Gt = a(() => i.onLayoutInteractionEnd), h = g(() => Xe(i.interactionAdapter)), P = a(() => i.selected), v = a(() => i.locked), Z = a(() => i.filtered), b = a(() => i.layoutMode ?? "canvas_scaled"), Zt = a(() => i.projectedViewport), Kt = a(() => i.surfaceReady ?? !0), ut = a(() => ({
+  const N = a(() => i.definition), u = a(() => i.widgetId), at = a(() => i.widgetTitle), ct = a(() => i.widgetType), L = a(() => i.itemSnapshot), lt = a(() => i.renderLayer), zt = a(() => i.visualFront), st = a(() => i.motion ?? null), dt = a(() => i.topRenderLayer), Xt = a(() => i.viewport), G = a(() => i.onSelect), Yt = a(() => i.onActivate), Dt = a(() => i.onContextMenu), Z = a(() => i.onClaimVisualFrontOwner), K = a(() => i.onCommitFront), Ft = a(() => i.onCommitMove), jt = a(() => i.onCommitResize), Ot = a(() => i.onViewportCommit), Ht = a(() => i.onViewportInteractionStart), Vt = a(() => i.onRequestOverview), qt = a(() => i.onRequestFit), Bt = a(() => i.onRequestDelete), Nt = a(() => i.onLayoutInteractionStart), Gt = a(() => i.onLayoutInteractionEnd), h = g(() => Xe(i.interactionAdapter)), P = a(() => i.selected), v = a(() => i.locked), U = a(() => i.filtered), b = a(() => i.layoutMode ?? "canvas_scaled"), Zt = a(() => i.projectedViewport), Kt = a(() => i.surfaceReady ?? !0), ut = a(() => ({
     x: i.x,
     y: i.y
   })), wt = a(() => ({
     width: i.width,
     height: i.height
-  })), K = a(() => Math.max(i.viewportScale, 1e-3)), [x, R] = $(null), [z, U] = $(null), [Ut, Jt] = $(), [J, W] = $(!1), [gt, ht] = $(!1), [ft, X] = $({
+  })), J = a(() => Math.max(i.viewportScale, 1e-3)), [x, R] = $(null), [z, Q] = $(null), [Ut, Jt] = $(), [tt, W] = $(!1), [gt, ht] = $(!1), [ft, X] = $({
     enabled: !1,
     scale: 1
   });
@@ -77,16 +77,16 @@ function Qe(i) {
       W(!0), ht(!0), e(t);
       return;
     }
-    W(!1), B()(t), G()(t);
+    W(!1), G()(t), K()(t);
   }, oe = () => {
     if (lt() >= dt()) {
-      N()(u());
+      Z()(u());
       return;
     }
-    G()(u());
-  }, Q = () => {
+    K()(u());
+  }, et = () => {
     W(!1);
-  }, A = g(() => P() || J());
+  }, A = g(() => P() || tt());
   rt(() => {
     !gt() || !P() || (ht(!1), W(!1));
   });
@@ -107,10 +107,10 @@ function Qe(i) {
     const t = w;
     if (!t) return;
     const e = (r) => {
-      r.button === 0 && ne(r.pointerId, A(), j(r.target));
+      r.button === 0 && ne(r.pointerId, A(), H(r.target));
     }, n = (r) => {
-      if (r.button === 0 && j(r.target) === "widget_local") {
-        if (J()) {
+      if (r.button === 0 && H(r.target) === "widget_local") {
+        if (tt()) {
           F();
           return;
         }
@@ -118,14 +118,14 @@ function Qe(i) {
       }
     }, o = () => {
       setTimeout(() => {
-        P() || Q();
+        P() || et();
       }, 0);
     };
-    t.addEventListener("pointerdown", e, !0), t.addEventListener("click", n, !0), t.addEventListener("pointerup", o), t.addEventListener("pointercancel", Q), Mt(() => {
-      t.removeEventListener("pointerdown", e, !0), t.removeEventListener("click", n, !0), t.removeEventListener("pointerup", o), t.removeEventListener("pointercancel", Q);
+    t.addEventListener("pointerdown", e, !0), t.addEventListener("click", n, !0), t.addEventListener("pointerup", o), t.addEventListener("pointercancel", et), Mt(() => {
+      t.removeEventListener("pointerdown", e, !0), t.removeEventListener("click", n, !0), t.removeEventListener("pointerup", o), t.removeEventListener("pointercancel", et);
     });
   });
-  const tt = () => x() !== null, et = () => z() !== null, re = g(() => Z() ? "cold" : A() ? "hot" : v() ? "cold" : "warm"), j = (t) => h().resolveWidgetEventOwnership({
+  const j = () => x() !== null, O = () => z() !== null, re = g(() => U() ? "cold" : A() ? "hot" : v() ? "cold" : "warm"), H = (t) => h().resolveWidgetEventOwnership({
     target: t,
     widgetRoot: w ?? null,
     interactiveSelector: h().interactiveSelector,
@@ -169,7 +169,7 @@ function Qe(i) {
     });
   }, se = (t) => {
     if (t.button !== 0 || v()) return;
-    const e = ie(t.pointerId), n = e?.wasSelected ?? P(), o = e?.ownership ?? j(t.target), r = o === "widget_local" ? Ie({
+    const e = ie(t.pointerId), n = e?.wasSelected ?? P(), o = e?.ownership ?? H(t.target), r = o === "widget_local" ? Ie({
       target: t.target,
       widgetRoot: w ?? null,
       interactiveSelector: h().interactiveSelector,
@@ -208,7 +208,7 @@ function Qe(i) {
         F(), _t(t.pointerType || void 0);
       }
     }
-  }, O = g(() => {
+  }, V = g(() => {
     const t = x();
     return t ? {
       x: t.worldX,
@@ -225,14 +225,14 @@ function Qe(i) {
     if (!(b() !== "projected_surface" || !t))
       return Ee({
         widgetId: u(),
-        worldX: O().x,
-        worldY: O().y,
+        worldX: V().x,
+        worldY: V().y,
         worldWidth: p().width,
         worldHeight: p().height,
         viewport: t(),
         ready: Kt()
       });
-  }), nt = g(() => ot()?.rect.viewportScale ?? K()), bt = g(() => b() === "projected_surface" && Ae(q()) === "settle_sharp_zoom"), vt = g(() => b() === "projected_surface" && bt() && ft().enabled && ft().scale > 1.001), de = g(() => {
+  }), nt = g(() => ot()?.rect.viewportScale ?? J()), bt = g(() => b() === "projected_surface" && Ae(N()) === "settle_sharp_zoom"), vt = g(() => b() === "projected_surface" && bt() && ft().enabled && ft().scale > 1.001), de = g(() => {
     if (b() !== "projected_surface")
       return;
     const t = nt();
@@ -256,7 +256,7 @@ function Qe(i) {
     t.preventDefault(), t.stopPropagation(), Bt()(u());
   }, we = g(() => {
     const t = {
-      "z-index": tt() || et() || zt() ? `${dt() + 1}` : `${lt()}`
+      "z-index": j() || O() || zt() ? `${dt() + 1}` : `${lt()}`
     };
     if (b() === "projected_surface") {
       const e = ot()?.rect, n = nt(), o = vt(), r = o ? e?.screenWidth ?? p().width * n : p().width, s = o ? e?.screenHeight ?? p().height * n : p().height;
@@ -272,7 +272,7 @@ function Qe(i) {
       ...t,
       width: `${p().width}px`,
       height: `${p().height}px`,
-      transform: `translate(${O().x}px, ${O().y}px)`
+      transform: `translate(${V().x}px, ${V().y}px)`
     };
   }), yt = g(() => st()?.phase === "enter");
   rt(() => {
@@ -284,7 +284,7 @@ function Qe(i) {
       return;
     }
     const t = nt();
-    if (t <= 1.001 || tt() || et()) {
+    if (t <= 1.001 || j() || O()) {
       D(), X({
         enabled: !1,
         scale: t
@@ -315,7 +315,7 @@ function Qe(i) {
       x: e.startWorldX,
       y: e.startWorldY
     }, r = t && (Math.abs(n.x - o.x) > 1 || Math.abs(n.y - o.y) > 1), s = u();
-    G()(s), r && Ft()(s, n), e.stopInteraction(), mt(), R(null), C = void 0;
+    K()(s), r && Ft()(s, n), e.stopInteraction(), mt(), R(null), C = void 0;
   }, Pt = (t) => {
     if (t.button !== 0 || v()) return;
     t.preventDefault(), t.stopPropagation(), C?.stop({
@@ -323,10 +323,10 @@ function Qe(i) {
       commit: !1
     });
     const e = u();
-    B()(e), w?.focus({
+    G()(e), w?.focus({
       preventScroll: !0
-    }), N()(e);
-    const n = pt("drag", "grabbing"), o = K(), r = ut();
+    }), Z()(e);
+    const n = pt("drag", "grabbing"), o = J(), r = ut();
     R({
       pointerId: t.pointerId,
       startClientX: t.clientX,
@@ -368,15 +368,15 @@ function Qe(i) {
       width: e.width,
       height: e.height
     }, o = Math.abs(e.width - e.startWidth) > 1 || Math.abs(e.height - e.startHeight) > 1;
-    t && o && jt()(u(), n), e.stopInteraction(), U(null), I = void 0;
+    t && o && jt()(u(), n), e.stopInteraction(), Q(null), I = void 0;
   }, fe = (t) => {
     if (t.button !== 0 || v()) return;
     t.preventDefault(), t.stopPropagation(), I?.stop({
       reason: "manual_stop",
       commit: !1
-    }), N()(u());
-    const e = pt("resize", "nwse-resize"), n = K(), o = wt();
-    U({
+    }), Z()(u());
+    const e = pt("resize", "nwse-resize"), n = J(), o = wt();
+    Q({
       pointerId: t.pointerId,
       startClientX: t.clientX,
       startClientY: t.clientY,
@@ -388,7 +388,7 @@ function Qe(i) {
       stopInteraction: e
     });
     const r = (s) => {
-      U((c) => {
+      Q((c) => {
         if (!c || c.pointerId !== s.pointerId) return c;
         const d = Math.max(Fe, c.startWidth + (s.clientX - c.startClientX) / c.scale), _ = Math.max(je, c.startHeight + (s.clientY - c.startClientY) / c.scale);
         return {
@@ -408,14 +408,17 @@ function Qe(i) {
     });
   };
   return (() => {
-    var t = Ye(), e = t.firstChild, n = e.firstChild, o = n.firstChild, r = o.firstChild, s = r.nextSibling, c = s.nextSibling, d = o.nextSibling, _ = d.nextSibling, k = _.nextSibling, pe = k.firstChild, xt = pe.nextSibling, me = k.nextSibling, H = me.firstChild, V = H.nextSibling, it = V.nextSibling, _e = n.nextSibling, Wt = w;
+    var t = Ye(), e = t.firstChild, n = e.firstChild, o = n.firstChild, r = o.firstChild, s = r.nextSibling, c = s.nextSibling, d = o.nextSibling, _ = d.nextSibling, k = _.nextSibling, pe = k.firstChild, xt = pe.nextSibling, me = k.nextSibling, q = me.firstChild, B = q.nextSibling, it = B.nextSibling, _e = n.nextSibling, Wt = w;
     return typeof Wt == "function" ? $e(Wt, t) : w = t, It(t, be({
+      get "data-floe-surface-interacting"() {
+        return j() || O() ? "true" : void 0;
+      },
       get classList() {
         return {
           "is-selected": A(),
-          "is-dragging": tt(),
-          "is-resizing": et(),
-          "is-filtered-out": Z(),
+          "is-dragging": j(),
+          "is-resizing": O(),
+          "is-filtered-out": U(),
           "is-projected-surface": b() === "projected_surface",
           "is-locked": v(),
           "is-entering": yt()
@@ -447,10 +450,10 @@ function Qe(i) {
       tabIndex: 0,
       onPointerDown: se,
       onFocus: () => {
-        J() || gt() || B()(u());
+        tt() || gt() || G()(u());
       },
       onContextMenu: (l) => {
-        j(l.target) === "widget_shell" && (l.preventDefault(), l.stopPropagation(), Dt()(l, L()()));
+        H(l.target) === "widget_shell" && (l.preventDefault(), l.stopPropagation(), Dt()(l, L()()));
       },
       get style() {
         return we();
@@ -469,21 +472,21 @@ function Qe(i) {
     })), f(d, ue), _.$$pointerdown = Pt, f(_, m(xe, {
       class: "w-3.5 h-3.5"
     })), f(k, () => {
-      const l = q().icon;
+      const l = N().icon;
       return m(l, {
         class: "w-3.5 h-3.5"
       });
-    }, xt), f(xt, at), H.$$click = St, H.$$pointerdown = (l) => l.stopPropagation(), f(H, m(Et, {
+    }, xt), f(xt, at), q.$$click = St, q.$$pointerdown = (l) => l.stopPropagation(), f(q, m(Et, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), V.$$click = kt, V.$$pointerdown = (l) => l.stopPropagation(), f(V, m(At, {
+    })), B.$$click = kt, B.$$pointerdown = (l) => l.stopPropagation(), f(B, m(At, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
     })), it.$$click = $t, it.$$pointerdown = (l) => l.stopPropagation(), f(it, m(Tt, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
     })), f(_e, () => {
-      const l = q().body;
+      const l = N().body;
       return m(l, {
         get widgetId() {
           return u();
@@ -508,7 +511,7 @@ function Qe(i) {
           return A();
         },
         get filtered() {
-          return Z();
+          return U();
         },
         requestActivate: ae
       });

package/dist/context/FloeConfigContext.d.ts

@@ -1,5 +1,5 @@
 import { type JSX } from 'solid-js';
-import type { FloeThemePreset, FloeThemeTokenOverrides, ThemeType } from '../styles/themes';
+import type { FloeSurfaceStyle, FloeThemePreset, FloeThemeTokenOverrides, ThemeType } from '../styles/themes';
 export interface FloeStorageAdapter {
     getItem: (key: string) => string | null;
     setItem: (key: string, value: string) => void;
@@ -73,6 +73,10 @@ export interface FloeLayoutConfig {
 export interface FloeThemeConfig {
     storageKey: string;
     defaultTheme: ThemeType;
+    /** Surface material, independent of color palettes. Defaults to standard. */
+    defaultSurfaceStyle?: FloeSurfaceStyle;
+    /** Defaults to `${storageKey}-surface-style`; uses the configured persistence service. */
+    surfaceStyleStorageKey?: string;
     /** Optional storage key for the active named token preset. Defaults to `${storageKey}-preset`. */
     presetStorageKey?: string;
     /** Optional default named token preset. Falls back to the first preset when omitted. */

package/dist/context/FloeConfigContext.js

@@ -1,5 +1,5 @@
 import { createComponent as C } from "solid-js/web";
-import { createContext as L, createMemo as u, createEffect as F, onCleanup as I, useContext as v } from "solid-js";
+import { createContext as L, createMemo as u, createEffect as S, onCleanup as F, useContext as v } from "solid-js";
 const m = {
   storage: {
     namespace: "floe",
@@ -44,7 +44,8 @@ const m = {
   },
   theme: {
     storageKey: "theme",
-    defaultTheme: "system"
+    defaultTheme: "system",
+    defaultSurfaceStyle: "standard"
   },
   accessibility: {
     mainContentId: "floe-main-content",
@@ -79,7 +80,7 @@ const m = {
     }
   }
 };
-function k() {
+function I() {
   if (!(typeof window > "u"))
     return {
       getItem: (e) => localStorage.getItem(e),
@@ -89,7 +90,7 @@ function k() {
     };
 }
 function h(e) {
-  const t = e.adapter ?? k(), c = e.namespace ? `${e.namespace}-` : "", r = (o) => `${c}${o}`, n = () => e.enabled && !!t, i = /* @__PURE__ */ new Map(), d = () => {
+  const t = e.adapter ?? I(), c = e.namespace ? `${e.namespace}-` : "", r = (o) => `${c}${o}`, n = () => e.enabled && !!t, i = /* @__PURE__ */ new Map(), d = () => {
     if (n()) {
       for (const [o, a] of i.entries()) {
         clearTimeout(a.timer);
@@ -166,7 +167,7 @@ function h(e) {
     }
   };
 }
-function S(e) {
+function k(e) {
   if (typeof window > "u") return () => {
   };
   const t = () => {
@@ -209,10 +210,10 @@ function b(e, t) {
 const y = L();
 function N(e) {
   const t = u(() => b(m, e.config)), c = u(() => h(t().storage));
-  F(() => {
-    const n = c(), d = t().storage.enabled ? S(n) : () => {
+  S(() => {
+    const n = c(), d = t().storage.enabled ? k(n) : () => {
     };
-    I(() => {
+    F(() => {
       d(), n.dispose?.();
     });
   });
@@ -245,7 +246,7 @@ function D() {
 export {
   m as DEFAULT_FLOE_CONFIG,
   N as FloeConfigProvider,
-  S as installPersistFlushListeners,
+  k as installPersistFlushListeners,
   O as useFloeConfig,
   D as useResolvedFloeConfig
 };

package/dist/context/ThemeContext.d.ts

@@ -1,6 +1,8 @@
 import { type Accessor } from 'solid-js';
-import { type FloeShellThemeMode, type FloeThemePreset, type ThemeType } from '../styles/themes';
+import { type FloeShellThemeMode, type FloeThemePreset, type ThemeType, type FloeSurfaceStyle } from '../styles/themes';
 export interface ThemeContextValue {
+    surfaceStyle: Accessor<FloeSurfaceStyle>;
+    setSurfaceStyle: (style: FloeSurfaceStyle) => void;
     theme: Accessor<ThemeType>;
     resolvedTheme: Accessor<'light' | 'dark'>;
     setTheme: (theme: ThemeType) => void;