@floegence/floe-webapp-core 0.52.2 → 0.52.3

package/dist/components/ui/FloatingWindow.js

@@ -1,4 +1,4 @@
-import { createComponent as a, Portal as De, spread as ce, mergeProps as fe, memo as we, insert as g, effect as c, setAttribute as We, addEventListener as m, className as f, template as d, use as ke, delegateEvents as Oe } from "solid-js/web";
+import { createComponent as a, Portal as Te, spread as ce, mergeProps as fe, memo as we, insert as g, effect as c, setAttribute as De, addEventListener as m, className as f, template as u, use as We, delegateEvents as Oe } from "solid-js/web";
 import { createUniqueId as He, createSignal as p, onCleanup as L, onMount as Ye, createEffect as b, Show as S, batch as Ne, untrack as Xe } from "solid-js";
 import { cn as M } from "../../utils/cn.js";
 import { useLayout as Ue } from "../../context/LayoutContext.js";
@@ -10,21 +10,21 @@ import { resolveFloatingWindowViewport as ge, normalizeFloatingWindowRect as me,
 import { createFloatingPresence as Je } from "./floatingPresence.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as ve } from "./localInteractionSurface.js";
 import { SURFACE_PORTAL_LAYER_ATTR as Ke, SURFACE_FLOATING_LAYER_ATTR as Qe } from "./dialogSurfaceScope.js";
-var et = /* @__PURE__ */ d('<h2 class="text-sm font-medium truncate select-none">'), tt = /* @__PURE__ */ d('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), nt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), it = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), ot = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), rt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), lt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), st = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), at = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), dt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), ut = /* @__PURE__ */ d('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=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">');
+var et = /* @__PURE__ */ u('<h2 class="text-xs leading-none font-medium truncate select-none">'), tt = /* @__PURE__ */ u('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-border">'), nt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), it = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), ot = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), rt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), lt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), st = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), at = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), dt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), ut = /* @__PURE__ */ u('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0 px-2"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="flex-1 overflow-auto p-3">');
 function St(i) {
-  const B = () => i.resizable ?? !0, G = () => i.draggable ?? !0, T = () => i.minSize ?? {
+  const B = () => i.resizable ?? !0, G = () => i.draggable ?? !0, k = () => i.minSize ?? {
     width: 200,
     height: 150
-  }, D = () => i.maxSize ?? {
+  }, T = () => i.maxSize ?? {
     width: 1 / 0,
     height: 1 / 0
-  }, x = () => i.viewportInsets ?? {}, pe = () => i.zIndex ?? 100, xe = He(), ze = Ue(), $ = () => ze.isMobile(), W = 16, j = () => `floating-window-${xe}-title`, [k, ye] = p(i.defaultPosition ?? {
+  }, x = () => i.viewportInsets ?? {}, pe = () => i.zIndex ?? 100, xe = He(), ze = Ue(), $ = () => ze.isMobile(), D = 16, j = () => `floating-window-${xe}-title`, [W, ye] = p(i.defaultPosition ?? {
     x: 0,
     y: 0
   }), [O, be] = p(i.defaultSize ?? {
     width: 400,
     height: 300
-  }), [u, V] = p(!1), [R, Z] = p(!1), [E, J] = p(!1), [Se, H] = p(!1), _ = Je({
+  }), [d, V] = p(!1), [R, Z] = p(!1), [E, J] = p(!1), [Se, H] = p(!1), _ = Je({
     open: () => i.open,
     exitDurationMs: 120
   }), [$e, _e] = p(null);
@@ -75,7 +75,7 @@ function St(i) {
   }, ie = (e) => {
     y = 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`);
   }, X = () => {
-    const e = k(), t = O();
+    const e = W(), t = O();
     return {
       x: e.x,
       y: e.y,
@@ -121,15 +121,15 @@ function St(i) {
       resizeStartPos: ee,
       resizeStartRect: te,
       resizeHandle: ne,
-      minSize: T(),
-      maxSize: D(),
+      minSize: k(),
+      maxSize: T(),
       viewport: {
         width: window.innerWidth,
         height: window.innerHeight
       },
       viewportInsets: x(),
       mobile: $(),
-      mobilePadding: W
+      mobilePadding: D
     })));
   }, F = (e) => {
     if (typeof window > "u") return;
@@ -137,18 +137,18 @@ function St(i) {
       width: window.innerWidth,
       height: window.innerHeight
     };
-    if (u()) {
+    if (d()) {
       P(ge(t, x()));
       return;
     }
     P(me({
       rect: X(),
-      minSize: T(),
-      maxSize: D(),
+      minSize: k(),
+      maxSize: T(),
       viewport: t,
       viewportInsets: x(),
       mobile: $(),
-      mobilePadding: W,
+      mobilePadding: D,
       center: e?.center ?? !1
     }));
   }, re = (e) => {
@@ -221,7 +221,7 @@ function St(i) {
     s === null ? ie(e) : y = e;
   });
   const Ae = (e) => {
-    !G() || u() || s !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"]') || (e.preventDefault(), s = e.pointerId, v = "drag", Z(!0), K = {
+    !G() || d() || s !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"]') || (e.preventDefault(), s = e.pointerId, v = "drag", Z(!0), K = {
       x: e.clientX,
       y: e.clientY
     }, Q = {
@@ -231,7 +231,7 @@ function St(i) {
       y: e.clientY
     }, N(!0, "grabbing"), se(e));
   }, w = (e) => (t) => {
-    !B() || u() || s !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), s = t.pointerId, v = "resize", J(!0), ne = e, ee = {
+    !B() || d() || s !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), s = t.pointerId, v = "resize", J(!0), ne = e, ee = {
       x: t.clientX,
       y: t.clientY
     }, te = {
@@ -270,7 +270,7 @@ function St(i) {
       }
     });
   }, ae = () => {
-    if (s !== null && q(!0), u()) {
+    if (s !== null && q(!0), d()) {
       const t = $e();
       t && P(me({
         rect: {
@@ -279,15 +279,15 @@ function St(i) {
           width: t.size.width,
           height: t.size.height
         },
-        minSize: T(),
-        maxSize: D(),
+        minSize: k(),
+        maxSize: T(),
         viewport: {
           width: window.innerWidth,
           height: window.innerHeight
         },
         viewportInsets: x(),
         mobile: $(),
-        mobilePadding: W,
+        mobilePadding: D,
         center: !1
       })), V(!1);
       return;
@@ -306,8 +306,8 @@ function St(i) {
       width: window.innerWidth,
       height: window.innerHeight
     }, x())), V(!0);
-  }, Le = () => {
-    ae();
+  }, Le = (e) => {
+    e.target?.closest("button") || ae();
   }, Me = (e) => {
     Re(e.target) && Pe();
   }, h = (e) => M("absolute z-10", {
@@ -325,10 +325,10 @@ function St(i) {
       return _.mounted();
     },
     get children() {
-      return a(De, {
+      return a(Te, {
         get children() {
-          var e = ut(), t = e.firstChild, o = t.firstChild, r = o.firstChild, de = r.nextSibling, Te = o.nextSibling, ue = l;
-          return typeof ue == "function" ? ke(ue, e) : l = e, ce(e, fe({
+          var e = ut(), t = e.firstChild, o = t.firstChild, r = o.firstChild, de = r.nextSibling, ke = o.nextSibling, ue = l;
+          return typeof ue == "function" ? We(ue, e) : l = e, ce(e, fe({
             get "data-floating-presence"() {
               return _.state();
             },
@@ -345,7 +345,7 @@ function St(i) {
               return {
                 width: `${O().width}px`,
                 height: `${O().height}px`,
-                transform: `translate3d(${k().x}px, ${k().y}px, 0)`,
+                transform: `translate3d(${W().x}px, ${W().y}px, 0)`,
                 "z-index": pe(),
                 "will-change": R() ? "transform" : E() ? "transform, width, height" : void 0
               };
@@ -371,7 +371,12 @@ function St(i) {
             [ve]: "true"
           }, {
             get class() {
-              return M("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "floe-floating-presence floe-floating-window-motion", (R() || E()) && "floe-floating-presence--suspended", u() && "rounded-none", i.class);
+              return M("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "floe-floating-presence floe-floating-window-motion", (R() || E()) && "floe-floating-presence--suspended", d() && "rounded-none", i.class);
+            },
+            get style() {
+              return {
+                "border-radius": d() ? "0" : "10px"
+              };
             },
             get "data-floating-presence"() {
               return _.state();
@@ -382,22 +387,23 @@ function St(i) {
             },
             get children() {
               var n = et();
-              return g(n, () => i.title), c(() => We(n, "id", j())), n;
+              return g(n, () => i.title), c(() => De(n, "id", j())), n;
             }
           })), g(de, a(he, {
             variant: "ghost",
             size: "icon",
-            class: "h-6 w-6",
+            "data-floe-floating-window-control": "maximize",
+            class: "h-full w-9 shrink-0 rounded-none border-0 px-0 active:scale-100",
             onClick: (n) => {
               n.stopPropagation(), ae();
             },
             get "aria-label"() {
-              return u() ? "Restore" : "Maximize";
+              return d() ? "Restore" : "Maximize";
             },
             get children() {
               return a(S, {
                 get when() {
-                  return u();
+                  return d();
                 },
                 get fallback() {
                   return a(Be, {
@@ -414,7 +420,8 @@ function St(i) {
           }), null), g(de, a(he, {
             variant: "ghost-destructive",
             size: "icon",
-            class: "h-6 w-6",
+            "data-floe-floating-window-control": "close",
+            class: "h-full w-10 shrink-0 rounded-none border-0 px-0 active:scale-100",
             onClick: (n) => {
               n.stopPropagation(), i.onOpenChange(!1);
             },
@@ -424,7 +431,7 @@ function St(i) {
                 class: "w-3.5 h-3.5"
               });
             }
-          }), null), g(Te, () => i.children), g(t, a(S, {
+          }), null), g(ke, () => i.children), g(t, a(S, {
             get when() {
               return i.footer;
             },
@@ -434,7 +441,7 @@ function St(i) {
             }
           }), null), g(t, a(S, {
             get when() {
-              return we(() => !!B())() && !u();
+              return we(() => !!B())() && !d();
             },
             get children() {
               return [(() => {
@@ -470,7 +477,7 @@ function St(i) {
                 }
               })];
             }
-          }), null), c(() => f(o, M("flex items-center justify-between h-9 px-3", "border-b", u() ? "rounded-none" : "rounded-t-md", G() && !u() && "cursor-move"))), e;
+          }), null), c(() => f(o, M("flex shrink-0 items-center justify-between h-8", "border-b", d() ? "rounded-none" : "rounded-t-md", G() && !d() && "cursor-move"))), e;
         }
       });
     }

package/dist/floe.css

@@ -357,67 +357,49 @@
     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%);
+  [data-floe-floating-window-surface='true'].floe-floating-window-motion {
+    /* Floating windows use an opaque Mica-like stack in every surface mode.
+     * Keeping this on the component boundary makes the default (standard)
+     * path match the opt-in material without changing other controls. */
+    background-color: var(--card);
+    border-color: color-mix(in srgb, var(--border) 78%, var(--background) 22%);
+    border-radius: 10px;
     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;
+      0 12px 28px -8px color-mix(in srgb, var(--foreground) 18%, transparent),
+      0 3px 8px -2px color-mix(in srgb, var(--foreground) 12%, transparent),
+      inset 0 1px 0 rgb(255 255 255 / 45%);
   }
-
-  @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'] {
+    border-radius: 10px;
   }
 
   [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);
+    border-color: color-mix(in srgb, var(--border) 60%, var(--ring) 40%);
   }
 
   [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);
+    border-color: color-mix(in srgb, var(--border) 88%, var(--background) 12%);
   }
 
   [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;
+    background-color: color-mix(in srgb, var(--muted) 70%, var(--card) 30%);
+    border-bottom-color: color-mix(in srgb, var(--border) 70%, var(--background) 30%);
+    transition: none;
+  }
+
+  :root.dark [data-floe-floating-window-surface='true'] {
+    box-shadow:
+      0 12px 28px -8px color-mix(in srgb, var(--foreground) 24%, transparent),
+      0 3px 8px -2px color-mix(in srgb, var(--foreground) 18%, transparent),
+      inset 0 1px 0 rgb(255 255 255 / 8%);
   }
 
   [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%)
-      );
+    background-color: color-mix(in srgb, var(--accent) 24%, var(--muted) 76%);
   }
 
   [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%)
-      );
+    background-color: color-mix(in srgb, var(--muted) 56%, var(--card) 44%);
   }
 
   [data-floe-hot-interaction~='resize'] [data-floe-geometry-surface='shell-sidebar'],
@@ -433,6 +415,19 @@
   }
 }
 
+/* Edge-aligned window controls keep their keyboard indicator inside the
+ * clipped panel. The outer resize perimeter keeps its existing hit targets. */
+[data-floe-floating-window-control]:focus-visible {
+  box-shadow: none;
+  outline: 2px solid var(--ring);
+  outline-offset: -3px;
+}
+@media (forced-colors: active) {
+  [data-floe-floating-window-control]:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 /* Animation utilities */
 @layer utilities {
   .floe-floating-presence {