@floegence/floe-webapp-core 0.35.30 → 0.35.31

package/dist/components/ui/FloatingWindow.js

@@ -1,52 +1,52 @@
-import { createComponent as o, Portal as ke, insert as f, effect as d, setAttribute as ge, addEventListener as w, className as s, memo as Fe, setStyleProperty as P, template as C, use as Le, delegateEvents as Ae } from "solid-js/web";
-import { createUniqueId as De, createSignal as z, onMount as He, onCleanup as me, createEffect as I, Show as y, batch as We } from "solid-js";
-import { cn as R } from "../../utils/cn.js";
-import { useLayout as Oe } from "../../context/LayoutContext.js";
-import { Button as ve } from "./Button.js";
-import { Restore as Xe, Maximize as Ye, X as qe } from "../icons/index.js";
-import { startHotInteraction as Be } from "../../utils/hotInteraction.js";
-import { normalizeFloatingWindowRect as xe, resolveFloatingWindowRect as Te } from "./floatingWindowGeometry.js";
-var Ue = /* @__PURE__ */ C('<h2 class="text-sm font-medium truncate select-none">'), je = /* @__PURE__ */ C('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), g = /* @__PURE__ */ C("<div style=touch-action:none>"), Ge = /* @__PURE__ */ C('<div data-floe-geometry-surface=floating-window role=dialog aria-modal=true><div><div style=touch-action:none><div class="flex-1 min-w-0"></div><div class="flex items-center gap-0.5 -mr-1"></div></div><div class="flex-1 overflow-auto p-3">');
-function nt(i) {
-  const W = () => i.resizable ?? !0, O = () => i.draggable ?? !0, M = () => i.minSize ?? {
+import { createComponent as s, Portal as De, insert as w, effect as c, setAttribute as X, addEventListener as g, className as a, memo as We, setStyleProperty as I, template as E, use as He, delegateEvents as Oe } from "solid-js/web";
+import { createUniqueId as Xe, createSignal as x, onMount as Ye, onCleanup as Y, createEffect as $, Show as b, batch as qe } from "solid-js";
+import { cn as C } from "../../utils/cn.js";
+import { useLayout as Te } from "../../context/LayoutContext.js";
+import { Button as ze } from "./Button.js";
+import { Restore as Be, Maximize as Ue, X as Ne } from "../icons/index.js";
+import { startHotInteraction as je } from "../../utils/hotInteraction.js";
+import { normalizeFloatingWindowRect as ye, resolveFloatingWindowRect as Ge } from "./floatingWindowGeometry.js";
+var Ve = /* @__PURE__ */ E('<h2 class="text-sm font-medium truncate select-none">'), Ze = /* @__PURE__ */ E('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), m = /* @__PURE__ */ E("<div style=touch-action:none>"), Je = /* @__PURE__ */ E('<div data-floe-geometry-surface=floating-window role=dialog tabindex=-1><div data-floe-floating-window-surface=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0"></div><div class="flex items-center gap-0.5 -mr-1"></div></div><div class="flex-1 overflow-auto p-3">');
+function lt(i) {
+  const q = () => i.resizable ?? !0, T = () => i.draggable ?? !0, M = () => i.minSize ?? {
     width: 200,
     height: 150
-  }, _ = () => i.maxSize ?? {
+  }, L = () => i.maxSize ?? {
     width: 1 / 0,
     height: 1 / 0
-  }, ze = () => i.zIndex ?? 100, ye = De(), be = Oe(), b = () => be.isMobile(), E = 16, X = () => `floating-window-${ye}-title`, [k, pe] = z(i.defaultPosition ?? {
+  }, be = () => i.zIndex ?? 100, pe = Xe(), Se = Te(), p = () => Se.isMobile(), _ = 16, B = () => `floating-window-${pe}-title`, [A, Pe] = x(i.defaultPosition ?? {
     x: 0,
     y: 0
-  }), [F, Se] = z(i.defaultSize ?? {
+  }), [F, Ie] = x(i.defaultSize ?? {
     width: 400,
     height: 300
-  }), [a, Y] = z(!1), [q, B] = z(!1), [T, U] = z(!1), [Pe, $e] = z(null);
-  let j = {
+  }), [d, U] = x(!1), [N, j] = x(!1), [G, V] = x(!1), [$e, k] = x(!1), [Re, Ce] = x(null);
+  let Z = {
     x: 0,
     y: 0
-  }, G = {
+  }, J = {
     x: 0,
     y: 0,
     width: 0,
     height: 0
-  }, N = {
+  }, K = {
     x: 0,
     y: 0
-  }, V = {
+  }, Q = {
     x: 0,
     y: 0,
     width: 0,
     height: 0
-  }, Z = "se", l, r = null, m = null, p = {
+  }, ee = "se", r, o = null, v = null, S = {
     x: 0,
     y: 0
-  }, v = null, $ = null, J = !1, x = {
+  }, z = null, R = null, te = !1, y = {
     x: i.defaultPosition?.x ?? 0,
     y: i.defaultPosition?.y ?? 0,
     width: i.defaultSize?.width ?? 400,
     height: i.defaultSize?.height ?? 300
   };
-  const Ie = {
+  const Ee = {
     n: "ns-resize",
     s: "ns-resize",
     e: "ew-resize",
@@ -55,69 +55,69 @@ function nt(i) {
     nw: "nwse-resize",
     se: "nwse-resize",
     sw: "nesw-resize"
-  }, L = (e, n) => {
+  }, D = (e, n) => {
     if (!e) {
-      $?.(), $ = null;
+      R?.(), R = null;
       return;
     }
-    $?.(), $ = Be({
-      kind: m === "resize" ? "resize" : "drag",
+    R?.(), R = je({
+      kind: v === "resize" ? "resize" : "drag",
       cursor: n,
       lockUserSelect: !0
     });
-  }, K = (e) => {
-    x = e, l && (l.style.transform = `translate3d(${e.x}px, ${e.y}px, 0)`, l.style.width = `${e.width}px`, l.style.height = `${e.height}px`);
-  }, A = () => {
-    const e = k(), n = F();
+  }, ne = (e) => {
+    y = e, r && (r.style.transform = `translate3d(${e.x}px, ${e.y}px, 0)`, r.style.width = `${e.width}px`, r.style.height = `${e.height}px`);
+  }, W = () => {
+    const e = A(), n = F();
     return {
       x: e.x,
       y: e.y,
       width: n.width,
       height: n.height
     };
-  }, S = (e) => {
-    x = e, pe({
+  }, P = (e) => {
+    y = e, Pe({
       x: e.x,
       y: e.y
-    }), Se({
+    }), Ie({
       width: e.width,
       height: e.height
     });
-  }, Re = () => {
-    if (!l) return null;
-    const e = l.getBoundingClientRect();
+  }, Me = (e) => !!r && e instanceof Node && r.contains(e), Le = () => {
+    if (!r) return null;
+    const e = r.getBoundingClientRect();
     return {
       x: e.left,
       y: e.top,
       width: e.width,
       height: e.height
     };
-  }, Q = () => {
-    i.open && (r === null || m === null || typeof window > "u" || K(Te({
-      mode: m,
-      pointer: p,
-      dragStartPos: j,
-      dragStartRect: G,
-      resizeStartPos: N,
-      resizeStartRect: V,
-      resizeHandle: Z,
+  }, ie = () => {
+    i.open && (o === null || v === null || typeof window > "u" || ne(Ge({
+      mode: v,
+      pointer: S,
+      dragStartPos: Z,
+      dragStartRect: J,
+      resizeStartPos: K,
+      resizeStartRect: Q,
+      resizeHandle: ee,
       minSize: M(),
-      maxSize: _(),
+      maxSize: L(),
       viewport: {
         width: window.innerWidth,
         height: window.innerHeight
       },
-      mobile: b(),
-      mobilePadding: E
+      mobile: p(),
+      mobilePadding: _
     })));
-  }, D = (e) => {
+  }, H = (e) => {
     if (typeof window > "u") return;
     const n = {
       width: window.innerWidth,
       height: window.innerHeight
     };
-    if (a()) {
-      S({
+    if (d()) {
+      P({
         x: 0,
         y: 0,
         width: n.width,
@@ -125,105 +125,121 @@ function nt(i) {
       });
       return;
     }
-    S(xe({
-      rect: A(),
+    P(ye({
+      rect: W(),
       minSize: M(),
-      maxSize: _(),
+      maxSize: L(),
       viewport: n,
-      mobile: b(),
-      mobilePadding: E,
+      mobile: p(),
+      mobilePadding: _,
       center: e?.center ?? !1
     }));
-  }, H = (e, n = !0) => {
-    v !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(v), v = null), n && Q();
-    const u = n ? Re() ?? x : null;
+  }, O = (e, n = !0) => {
+    z !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(z), z = null), n && ie();
+    const l = n ? Le() ?? y : null;
     if (e !== void 0)
       try {
-        l?.releasePointerCapture(e);
+        r?.releasePointerCapture(e);
       } catch {
       }
-    We(() => {
-      u && S(u), r = null, m = null, B(!1), U(!1);
-    }), L(!1, "");
+    qe(() => {
+      l && P(l), o = null, v = null, j(!1), V(!1);
+    }), D(!1, "");
   };
-  He(() => {
-    i.open || D({
+  Ye(() => {
+    i.open || H({
       center: !i.defaultPosition
     });
     const e = () => {
-      r === null && D({
+      o === null && H({
         center: !1
       });
     };
-    window.addEventListener("resize", e), me(() => window.removeEventListener("resize", e));
-  }), I(() => {
+    window.addEventListener("resize", e), Y(() => window.removeEventListener("resize", e));
+  }), $(() => {
     if (!i.open) return;
-    b();
-    const e = !J && !i.defaultPosition, n = () => {
-      D({
+    p();
+    const e = !te && !i.defaultPosition, n = () => {
+      H({
         center: e
-      }), J = !0;
+      }), te = !0;
     };
     if (typeof requestAnimationFrame > "u") {
       n();
       return;
     }
     requestAnimationFrame(n);
-  }), I(() => {
+  }), $(() => {
     if (!i.open) return;
     const e = (n) => {
       n.key === "Escape" && i.onOpenChange(!1);
     };
-    document.addEventListener("keydown", e), me(() => document.removeEventListener("keydown", e));
-  }), I(() => {
-    i.open || H(r ?? void 0, !1);
-  }), I(() => {
+    document.addEventListener("keydown", e), Y(() => document.removeEventListener("keydown", e));
+  }), $(() => {
+    if (!i.open) {
+      k(!1), O(o ?? void 0, !1);
+      return;
+    }
+    k(!0);
+  }), $(() => {
+    if (!i.open) return;
+    const e = (f) => {
+      k(Me(f));
+    }, n = (f) => {
+      e(f.target);
+    }, l = (f) => {
+      e(f.target);
+    };
+    document.addEventListener("pointerdown", n), document.addEventListener("focusin", l), Y(() => {
+      document.removeEventListener("pointerdown", n), document.removeEventListener("focusin", l);
+    });
+  }), $(() => {
     if (!i.open) return;
-    const e = A();
-    r === null ? K(e) : x = e;
+    const e = W();
+    o === null ? ne(e) : y = e;
   });
-  const Ce = (e) => {
-    !O() || a() || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"]') || (e.preventDefault(), r = e.pointerId, m = "drag", B(!0), j = {
+  const _e = (e) => {
+    !T() || d() || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"]') || (e.preventDefault(), o = e.pointerId, v = "drag", j(!0), Z = {
       x: e.clientX,
       y: e.clientY
-    }, G = {
-      ...x
-    }, p = {
+    }, J = {
+      ...y
+    }, S = {
       x: e.clientX,
       y: e.clientY
-    }, L(!0, "grabbing"), l?.setPointerCapture(e.pointerId));
-  }, c = (e) => (n) => {
-    !W() || a() || n.pointerType === "mouse" && n.button !== 0 || (n.preventDefault(), n.stopPropagation(), r = n.pointerId, m = "resize", U(!0), Z = e, N = {
+    }, D(!0, "grabbing"), r?.setPointerCapture(e.pointerId));
+  }, u = (e) => (n) => {
+    !q() || d() || n.pointerType === "mouse" && n.button !== 0 || (n.preventDefault(), n.stopPropagation(), o = n.pointerId, v = "resize", V(!0), ee = e, K = {
       x: n.clientX,
       y: n.clientY
-    }, V = {
-      ...x
-    }, p = {
+    }, Q = {
+      ...y
+    }, S = {
       x: n.clientX,
       y: n.clientY
-    }, L(!0, Ie[e]), l?.setPointerCapture(n.pointerId));
-  }, ee = () => {
-    v = null, Q();
-  }, Me = (e) => {
-    if (!(r === null || e.pointerId !== r) && m !== null && (p = {
+    }, D(!0, Ee[e]), r?.setPointerCapture(n.pointerId));
+  }, re = () => {
+    z = null, ie();
+  }, Ae = (e) => {
+    if (!(o === null || e.pointerId !== o) && v !== null && (S = {
       x: e.clientX,
       y: e.clientY
-    }, v === null)) {
+    }, z === null)) {
       if (typeof requestAnimationFrame > "u") {
-        ee();
+        re();
         return;
       }
-      v = requestAnimationFrame(ee);
+      z = requestAnimationFrame(re);
     }
-  }, te = (e) => {
-    r === null || e.pointerId !== r || (p = {
+  }, oe = (e) => {
+    o === null || e.pointerId !== o || (S = {
       x: e.clientX,
       y: e.clientY
-    }, H(e.pointerId));
-  }, ne = () => {
-    if (r !== null && H(r, !0), a()) {
-      const n = Pe();
-      n && S(xe({
+    }, O(e.pointerId));
+  }, le = () => {
+    if (o !== null && O(o, !0), d()) {
+      const n = Re();
+      n && P(ye({
         rect: {
           x: n.position.x,
           y: n.position.y,
@@ -231,19 +247,19 @@ function nt(i) {
           height: n.size.height
         },
         minSize: M(),
-        maxSize: _(),
+        maxSize: L(),
         viewport: {
           width: window.innerWidth,
           height: window.innerHeight
         },
-        mobile: b(),
-        mobilePadding: E,
+        mobile: p(),
+        mobilePadding: _,
         center: !1
-      })), Y(!1);
+      })), U(!1);
       return;
     }
-    const e = A();
-    $e({
+    const e = W();
+    Ce({
       position: {
         x: e.x,
         y: e.y
@@ -252,15 +268,15 @@ function nt(i) {
         width: e.width,
         height: e.height
       }
-    }), S({
+    }), P({
       x: 0,
       y: 0,
       width: window.innerWidth,
       height: window.innerHeight
-    }), Y(!0);
-  }, _e = () => {
-    ne();
-  }, h = (e) => R("absolute z-10", {
+    }), U(!0);
+  }, Fe = () => {
+    le();
+  }, h = (e) => C("absolute z-10", {
     n: "cursor-ns-resize top-0 left-2 right-2 h-1",
     s: "cursor-ns-resize bottom-0 left-2 right-2 h-1",
     e: "cursor-ew-resize right-0 top-2 bottom-2 w-1",
@@ -270,52 +286,52 @@ function nt(i) {
     se: "cursor-nwse-resize bottom-0 right-0 w-2 h-2",
     sw: "cursor-nesw-resize bottom-0 left-0 w-2 h-2"
   }[e]);
-  return o(y, {
+  return s(b, {
     get when() {
       return i.open;
     },
     get children() {
-      return o(ke, {
+      return s(De, {
         get children() {
-          var e = Ge(), n = e.firstChild, u = n.firstChild, ie = u.firstChild, re = ie.nextSibling, Ee = u.nextSibling;
-          e.addEventListener("pointercancel", te), e.$$pointerup = te, e.$$pointermove = Me;
-          var oe = l;
-          return typeof oe == "function" ? Le(oe, e) : l = e, u.$$dblclick = _e, u.$$pointerdown = Ce, f(ie, o(y, {
+          var e = Je(), n = e.firstChild, l = n.firstChild, f = l.firstChild, se = f.nextSibling, ke = l.nextSibling;
+          e.addEventListener("pointercancel", oe), e.$$pointerup = oe, e.$$pointermove = Ae;
+          var ae = r;
+          return typeof ae == "function" ? He(ae, e) : r = e, l.$$dblclick = Fe, l.$$pointerdown = _e, w(f, s(b, {
             get when() {
               return i.title;
             },
             get children() {
-              var t = Ue();
-              return f(t, () => i.title), d(() => ge(t, "id", X())), t;
+              var t = Ve();
+              return w(t, () => i.title), c(() => X(t, "id", B())), t;
             }
-          })), f(re, o(ve, {
+          })), w(se, s(ze, {
             variant: "ghost",
             size: "icon",
             class: "h-6 w-6",
             onClick: (t) => {
-              t.stopPropagation(), ne();
+              t.stopPropagation(), le();
             },
             get "aria-label"() {
-              return a() ? "Restore" : "Maximize";
+              return d() ? "Restore" : "Maximize";
             },
             get children() {
-              return o(y, {
+              return s(b, {
                 get when() {
-                  return a();
+                  return d();
                 },
                 get fallback() {
-                  return o(Ye, {
+                  return s(Ue, {
                     class: "w-3 h-3"
                   });
                 },
                 get children() {
-                  return o(Xe, {
+                  return s(Be, {
                     class: "w-3 h-3"
                   });
                 }
               });
             }
-          }), null), f(re, o(ve, {
+          }), null), w(se, s(ze, {
             variant: "ghost-destructive",
             size: "icon",
             class: "h-6 w-6",
@@ -324,59 +340,59 @@ function nt(i) {
             },
             "aria-label": "Close",
             get children() {
-              return o(qe, {
+              return s(Ne, {
                 class: "w-3.5 h-3.5"
               });
             }
-          }), null), f(Ee, () => i.children), f(n, o(y, {
+          }), null), w(ke, () => i.children), w(n, s(b, {
             get when() {
               return i.footer;
             },
             get children() {
-              var t = je();
-              return f(t, () => i.footer), t;
+              var t = Ze();
+              return w(t, () => i.footer), t;
             }
-          }), null), f(n, o(y, {
+          }), null), w(n, s(b, {
             get when() {
-              return Fe(() => !!W())() && !a();
+              return We(() => !!q())() && !d();
             },
             get children() {
               return [(() => {
-                var t = g();
-                return w(t, "pointerdown", c("n"), !0), d(() => s(t, h("n"))), t;
+                var t = m();
+                return g(t, "pointerdown", u("n"), !0), c(() => a(t, h("n"))), t;
               })(), (() => {
-                var t = g();
-                return w(t, "pointerdown", c("s"), !0), d(() => s(t, h("s"))), t;
-              })(), o(y, {
+                var t = m();
+                return g(t, "pointerdown", u("s"), !0), c(() => a(t, h("s"))), t;
+              })(), s(b, {
                 get when() {
-                  return !b();
+                  return !p();
                 },
                 get children() {
                   return [(() => {
-                    var t = g();
-                    return w(t, "pointerdown", c("e"), !0), d(() => s(t, h("e"))), t;
+                    var t = m();
+                    return g(t, "pointerdown", u("e"), !0), c(() => a(t, h("e"))), t;
                   })(), (() => {
-                    var t = g();
-                    return w(t, "pointerdown", c("w"), !0), d(() => s(t, h("w"))), t;
+                    var t = m();
+                    return g(t, "pointerdown", u("w"), !0), c(() => a(t, h("w"))), t;
                   })(), (() => {
-                    var t = g();
-                    return w(t, "pointerdown", c("ne"), !0), d(() => s(t, h("ne"))), t;
+                    var t = m();
+                    return g(t, "pointerdown", u("ne"), !0), c(() => a(t, h("ne"))), t;
                   })(), (() => {
-                    var t = g();
-                    return w(t, "pointerdown", c("nw"), !0), d(() => s(t, h("nw"))), t;
+                    var t = m();
+                    return g(t, "pointerdown", u("nw"), !0), c(() => a(t, h("nw"))), t;
                   })(), (() => {
-                    var t = g();
-                    return w(t, "pointerdown", c("se"), !0), d(() => s(t, h("se"))), t;
+                    var t = m();
+                    return g(t, "pointerdown", u("se"), !0), c(() => a(t, h("se"))), t;
                   })(), (() => {
-                    var t = g();
-                    return w(t, "pointerdown", c("sw"), !0), d(() => s(t, h("sw"))), t;
+                    var t = m();
+                    return g(t, "pointerdown", u("sw"), !0), c(() => a(t, h("sw"))), t;
                   })()];
                 }
               })];
             }
-          }), null), d((t) => {
-            var le = R("fixed left-0 top-0 z-[100] flex flex-col", (q() || T()) && "select-none"), se = `${F().width}px`, ae = `${F().height}px`, de = `translate3d(${k().x}px, ${k().y}px, 0)`, ue = ze(), ce = q() ? "transform" : T() ? "transform, width, height" : void 0, he = i.title ? X() : void 0, fe = R("relative flex h-full w-full flex-col overflow-hidden", "bg-card text-card-foreground rounded-md shadow-xl", "border border-border", "animate-in fade-in duration-150", a() && "rounded-none", i.class), we = R("flex items-center justify-between h-9 px-3", "border-b border-border", "bg-muted/50", a() ? "rounded-none" : "rounded-t-md", O() && !a() && "cursor-move");
-            return le !== t.e && s(e, t.e = le), se !== t.t && P(e, "width", t.t = se), ae !== t.a && P(e, "height", t.a = ae), de !== t.o && P(e, "transform", t.o = de), ue !== t.i && P(e, "z-index", t.i = ue), ce !== t.n && P(e, "will-change", t.n = ce), he !== t.s && ge(e, "aria-labelledby", t.s = he), fe !== t.h && s(n, t.h = fe), we !== t.r && s(u, t.r = we), t;
+          }), null), c((t) => {
+            var de = C("fixed left-0 top-0 z-[100] flex flex-col", (N() || G()) && "select-none"), ce = `${F().width}px`, ue = `${F().height}px`, he = `translate3d(${A().x}px, ${A().y}px, 0)`, fe = be(), we = N() ? "transform" : G() ? "transform, width, height" : void 0, ge = i.title ? B() : void 0, me = $e() ? "active" : "inactive", ve = C("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "animate-in fade-in duration-150", d() && "rounded-none", i.class), xe = C("flex items-center justify-between h-9 px-3", "border-b", d() ? "rounded-none" : "rounded-t-md", T() && !d() && "cursor-move");
+            return de !== t.e && a(e, t.e = de), ce !== t.t && I(e, "width", t.t = ce), ue !== t.a && I(e, "height", t.a = ue), he !== t.o && I(e, "transform", t.o = he), fe !== t.i && I(e, "z-index", t.i = fe), we !== t.n && I(e, "will-change", t.n = we), ge !== t.s && X(e, "aria-labelledby", t.s = ge), me !== t.h && X(n, "data-floe-floating-window-state", t.h = me), ve !== t.r && a(n, t.r = ve), xe !== t.d && a(l, t.d = xe), t;
           }, {
             e: void 0,
             t: void 0,
@@ -386,14 +402,15 @@ function nt(i) {
             n: void 0,
             s: void 0,
             h: void 0,
-            r: void 0
+            r: void 0,
+            d: void 0
           }), e;
         }
       });
     }
   });
 }
-Ae(["pointermove", "pointerup", "pointerdown", "dblclick"]);
+Oe(["pointermove", "pointerup", "pointerdown", "dblclick"]);
 export {
-  nt as FloatingWindow
+  lt as FloatingWindow
 };

package/dist/floe.css

@@ -340,6 +340,69 @@
     contain: layout paint style;
   }
 
+  [data-floe-floating-window-surface='true'] {
+    background-color: color-mix(in srgb, var(--card) 96%, transparent);
+    border-color: color-mix(in srgb, var(--border) 88%, var(--foreground) 12%);
+    box-shadow:
+      0 16px 36px color-mix(in srgb, var(--foreground) 12%, transparent),
+      0 3px 10px color-mix(in srgb, var(--foreground) 10%, transparent);
+    transition:
+      border-color 140ms ease,
+      box-shadow 140ms ease,
+      background-color 140ms ease;
+  }
+
+  @supports (backdrop-filter: blur(12px)) {
+    [data-floe-floating-window-surface='true'] {
+      backdrop-filter: blur(12px);
+      background-color: color-mix(in srgb, var(--card) 90%, transparent);
+    }
+  }
+
+  [data-floe-floating-window-surface='true'][data-floe-floating-window-state='active'] {
+    border-color: color-mix(in srgb, var(--border) 62%, var(--ring) 38%);
+    box-shadow:
+      0 22px 48px color-mix(in srgb, var(--foreground) 16%, transparent),
+      0 5px 14px color-mix(in srgb, var(--foreground) 12%, transparent),
+      0 0 0 1px color-mix(in srgb, var(--ring) 22%, transparent);
+  }
+
+  [data-floe-floating-window-surface='true'][data-floe-floating-window-state='inactive'] {
+    border-color: color-mix(in srgb, var(--border) 94%, var(--foreground) 6%);
+    box-shadow:
+      0 12px 28px color-mix(in srgb, var(--foreground) 10%, transparent),
+      0 2px 6px color-mix(in srgb, var(--foreground) 8%, transparent);
+  }
+
+  [data-floe-floating-window-titlebar='true'] {
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--muted) 78%, var(--card) 22%),
+        color-mix(in srgb, var(--muted) 60%, var(--card) 40%)
+      );
+    border-bottom-color: color-mix(in srgb, var(--border) 84%, var(--foreground) 16%);
+    transition: background 140ms ease, border-color 140ms ease;
+  }
+
+  [data-floe-floating-window-surface='true'][data-floe-floating-window-state='active'] [data-floe-floating-window-titlebar='true'] {
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--accent) 62%, var(--muted) 38%),
+        color-mix(in srgb, var(--muted) 52%, var(--card) 48%)
+      );
+  }
+
+  [data-floe-floating-window-surface='true'][data-floe-floating-window-state='inactive'] [data-floe-floating-window-titlebar='true'] {
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--muted) 80%, var(--card) 20%),
+        color-mix(in srgb, var(--muted) 64%, var(--card) 36%)
+      );
+  }
+
   [data-floe-hot-interaction~='resize'] [data-floe-geometry-surface='shell-sidebar'],
   [data-floe-hot-interaction~='resize'] [data-floe-geometry-surface='sidebar-pane'],
   [data-floe-hot-interaction~='resize'] [data-floe-geometry-surface='floating-window'],