@floegence/floe-webapp-core 0.78.9 → 0.79.0

package/dist/components/ui/FloatingWindow.js

@@ -1,20 +1,21 @@
-import { createComponent as l, Portal as Qe, spread as Se, mergeProps as Pe, memo as D, insert as c, effect as f, setAttribute as Ze, addEventListener as b, className as w, template as s, use as Ie, delegateEvents as Je } from "solid-js/web";
-import { createSignal as g, createUniqueId as Ke, onCleanup as F, onMount as et, createEffect as p, untrack as W, Show as z, batch as te } from "solid-js";
-import { useMediaQuery as tt } from "../../hooks/useMediaQuery.js";
+import { createComponent as l, Portal as Je, spread as Se, mergeProps as Pe, memo as D, insert as c, effect as f, setAttribute as Ke, addEventListener as b, className as w, template as s, use as Ie, delegateEvents as et } from "solid-js/web";
+import { createSignal as g, createUniqueId as tt, onCleanup as F, onMount as nt, createEffect as p, untrack as W, Show as z, batch as te } from "solid-js";
 import { cn as q } from "../../utils/cn.js";
-import { useOptionalLayout as nt } from "../../context/LayoutContext.js";
+import { useOptionalLayout as it } from "../../context/LayoutContext.js";
+import { useResolvedFloeConfig as ot } from "../../context/FloeConfigContext.js";
+import { useMediaQuery as rt } from "../../hooks/useMediaQuery.js";
 import { Button as Re } from "./Button.js";
-import { Restore as it, Maximize as ot, X as rt } from "../icons/index.js";
-import { startHotInteraction as lt } from "../../utils/hotInteraction.js";
-import { startPointerSession as at } from "./pointerSession.js";
-import { resolveFloatingWindowViewport as ne, normalizeFloatingWindowRect as st, resolveFloatingWindowRect as dt } from "./floatingWindowGeometry.js";
-import { observeViewport as ut } from "../../viewport.js";
-import { createFloatingPresence as ct } from "./floatingPresence.js";
+import { Restore as lt, Maximize as at, X as st } from "../icons/index.js";
+import { startHotInteraction as dt } from "../../utils/hotInteraction.js";
+import { startPointerSession as ut } from "./pointerSession.js";
+import { resolveFloatingWindowViewport as ne, normalizeFloatingWindowRect as ct, resolveFloatingWindowRect as ft } from "./floatingWindowGeometry.js";
+import { observeViewport as ht } from "../../viewport.js";
+import { createFloatingPresence as wt } from "./floatingPresence.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as Ae } from "./localInteractionSurface.js";
-import { resolveFloatingBoundary as ft } from "./surfaceFloatingBoundary.js";
-import { SURFACE_PORTAL_LAYER_ATTR as ht, resolveSurfacePortalHost as wt, SURFACE_FLOATING_LAYER_ATTR as gt } from "./dialogSurfaceScope.js";
-var mt = /* @__PURE__ */ s("<span hidden>"), vt = /* @__PURE__ */ s('<h2 class="text-xs leading-none font-medium truncate select-none">'), xt = /* @__PURE__ */ s('<div data-floe-floating-window-header-actions=true class="flex shrink-0 cursor-default items-center gap-1"><span aria-hidden=true class="mx-2 h-4 w-px shrink-0 bg-border">'), yt = /* @__PURE__ */ s('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-border">'), bt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), pt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), zt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), $t = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), _t = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), St = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), Pt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), It = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), Rt = /* @__PURE__ */ s('<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="min-h-0 flex-1 overflow-auto overscroll-contain p-3">');
-function Ht(n) {
+import { resolveFloatingBoundary as gt } from "./surfaceFloatingBoundary.js";
+import { SURFACE_PORTAL_LAYER_ATTR as mt, resolveSurfacePortalHost as vt, SURFACE_FLOATING_LAYER_ATTR as xt } from "./dialogSurfaceScope.js";
+var yt = /* @__PURE__ */ s("<span hidden>"), bt = /* @__PURE__ */ s('<h2 class="text-xs leading-none font-medium truncate select-none">'), pt = /* @__PURE__ */ s('<div data-floe-floating-window-header-actions=true class="flex shrink-0 cursor-default items-center gap-1"><span aria-hidden=true class="mx-2 h-4 w-px shrink-0 bg-border">'), zt = /* @__PURE__ */ s('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-border">'), $t = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), _t = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), St = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), Pt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), It = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), Rt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), At = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), Ct = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), Et = /* @__PURE__ */ s('<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="min-h-0 flex-1 overflow-auto overscroll-contain p-3">');
+function jt(n) {
   const ie = () => n.resizable ?? !0, Y = () => n.maximizable ?? !0, oe = () => n.draggable ?? !0, re = () => n.minSize ?? {
     width: 200,
     height: 150
@@ -23,7 +24,7 @@ function Ht(n) {
     height: 1 / 0
   };
   let N;
-  const [k, Ee] = g(), [A, Ce] = g({
+  const [k, Ce] = g(), [A, Ee] = g({
     x: 0,
     y: 0,
     width: 0,
@@ -33,13 +34,13 @@ function Ht(n) {
   }), [X, Fe] = g(!0), h = () => !!(n.compactBelow && A().width < n.compactBelow), S = () => n.viewportInsets, P = () => k()?.fixedScale ?? 1, H = (e) => ({
     x: (e.x + (k()?.fixedOffset.left ?? 0)) / P(),
     y: (e.y + (k()?.fixedOffset.top ?? 0)) / P()
-  }), ke = () => n.zIndex ?? 100, Le = Ke(), L = nt()?.isMobile ?? tt("(max-width: 767px)"), ae = 16, se = () => `floating-window-${Le}-title`, [U, Me] = g(n.defaultPosition ?? {
+  }), ke = () => n.zIndex ?? 100, Le = tt(), Me = it(), Te = ot(), L = Me?.isMobile ?? rt(() => Te.config.layout.mobileQuery), ae = 16, se = () => `floating-window-${Le}-title`, [U, Oe] = g(n.defaultPosition ?? {
     x: 0,
     y: 0
-  }), [V, Te] = g(n.defaultSize ?? {
+  }), [V, Be] = g(n.defaultSize ?? {
     width: 400,
     height: 300
-  }), [d, de] = g(!1), [M, ue] = g(!1), [T, ce] = g(!1), [Oe, j] = g(!1), I = ct({
+  }), [d, de] = g(!1), [M, ue] = g(!1), [T, ce] = g(!1), [De, j] = g(!1), I = wt({
     open: () => n.open
   });
   let fe = {
@@ -58,7 +59,7 @@ function Ht(n) {
     y: 0,
     width: 0,
     height: 0
-  }, me = "se", a, u = null, O, m = null, E = {
+  }, me = "se", a, u = null, O, m = null, C = {
     x: 0,
     y: 0
   }, R = null, B = null, G = !1, $ = {
@@ -78,7 +79,7 @@ function Ht(n) {
       x: t.width > e.width ? (e.x - t.x) / (t.width - e.width) : _?.x ?? 0.5,
       y: t.height > e.height ? (e.y - t.y) / (t.height - e.height) : _?.y ?? 0.5
     };
-  }, Be = {
+  }, We = {
     n: "ns-resize",
     s: "ns-resize",
     e: "ew-resize",
@@ -92,7 +93,7 @@ function Ht(n) {
       B?.(), B = null;
       return;
     }
-    B?.(), B = lt({
+    B?.(), B = dt({
       kind: m === "resize" ? "resize" : "drag",
       cursor: t,
       lockUserSelect: !0
@@ -101,7 +102,7 @@ function Ht(n) {
     if ($ = e, !a) return;
     const t = H(e);
     a.style.transform = `translate3d(${t.x}px, ${t.y}px, 0)`, a.style.width = `${e.width / P()}px`, a.style.height = `${e.height / P()}px`;
-  }, De = () => {
+  }, qe = () => {
     const e = U(), t = V();
     return {
       x: e.x,
@@ -110,27 +111,27 @@ function Ht(n) {
       height: t.height
     };
   }, Z = (e) => {
-    $ = e, Me((t) => t.x === e.x && t.y === e.y ? t : {
+    $ = e, Oe((t) => t.x === e.x && t.y === e.y ? t : {
       x: e.x,
       y: e.y
-    }), Te((t) => t.width === e.width && t.height === e.height ? t : {
+    }), Be((t) => t.width === e.width && t.height === e.height ? t : {
       width: e.width,
       height: e.height
     });
-  }, We = () => {
+  }, Ye = () => {
     try {
       a?.focus({
         preventScroll: !0
       });
     } catch {
     }
-  }, qe = (e) => {
+  }, Ne = (e) => {
     const t = e instanceof Element ? e : null;
     return t ? t.closest('button, input, select, textarea, a, [role="button"], [tabindex]:not([tabindex="-1"])') === null : !0;
-  }, J = (e) => !!a && e instanceof Node && a.contains(e), Ye = (e) => {
-    const o = (e instanceof Element ? e : null)?.closest('[role="menu"]')?.closest(`[${gt}="true"]`);
+  }, J = (e) => !!a && e instanceof Node && a.contains(e), Xe = (e) => {
+    const o = (e instanceof Element ? e : null)?.closest('[role="menu"]')?.closest(`[${xt}="true"]`);
     return !!(o && a?.contains(o));
-  }, Ne = () => {
+  }, He = () => {
     if (!a) return null;
     const e = a.getBoundingClientRect();
     return {
@@ -140,9 +141,9 @@ function Ht(n) {
       height: e.height
     };
   }, ye = () => {
-    n.open && (u === null || m === null || typeof window > "u" || xe(dt({
+    n.open && (u === null || m === null || typeof window > "u" || xe(ft({
       mode: m,
-      pointer: E,
+      pointer: C,
       dragStartPos: fe,
       dragStartRect: he,
       resizeStartPos: we,
@@ -155,14 +156,14 @@ function Ht(n) {
       mobile: L(),
       mobilePadding: ae
     })));
-  }, C = (e) => {
+  }, E = (e) => {
     if (typeof window > "u") return;
     const t = A();
     if (d() || h()) {
       Z(ne(t, S()));
       return;
     }
-    let r = st({
+    let r = ct({
       rect: v,
       minSize: re(),
       maxSize: le(),
@@ -189,7 +190,7 @@ function Ht(n) {
     }
   }, be = (e) => {
     R !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(R), R = null), e && ye();
-    const t = e ? Ne() ?? $ : null;
+    const t = e ? He() ?? $ : null;
     te(() => {
       if (t) {
         Z(t);
@@ -206,16 +207,16 @@ function Ht(n) {
       commit: e
     }) : be(e);
   };
-  F(() => K(!1)), et(() => {
+  F(() => K(!1)), nt(() => {
     const e = () => {
       const t = k(), r = n.boundary === void 0 ? {
         boundaryHost: null,
         mode: "global"
-      } : wt({
+      } : vt({
         owner: N
-      }), o = ft(r, n.boundary, t?.safeArea);
+      }), o = gt(r, n.boundary, t?.safeArea);
       te(() => {
-        Fe(!!(o && o.width > 16 && o.height > 16)), Ce(o ? {
+        Fe(!!(o && o.width > 16 && o.height > 16)), Ee(o ? {
           x: o.left,
           y: o.top,
           width: o.width,
@@ -228,9 +229,9 @@ function Ht(n) {
         });
       });
     };
-    F(ut(window, (t) => {
+    F(ht(window, (t) => {
       te(() => {
-        Ee(t), W(e);
+        Ce(t), W(e);
       });
     })), p(() => {
       if (!n.open || n.boundary === void 0) return;
@@ -239,14 +240,14 @@ function Ht(n) {
         W(e), t = requestAnimationFrame(r);
       };
       r(), F(() => cancelAnimationFrame(t));
-    }), n.open || C({
+    }), n.open || E({
       center: !n.defaultPosition
     });
   }), p(() => {
     if (!n.open) return;
     L();
     const e = !G && !n.defaultPosition, t = () => {
-      C({
+      E({
         center: e
       }), G = !0;
     };
@@ -256,12 +257,12 @@ function Ht(n) {
     }
     requestAnimationFrame(t);
   }), p(() => {
-    S(), A(), h(), !(!n.open || !G || u !== null) && W(() => C({
+    S(), A(), h(), !(!n.open || !G || u !== null) && W(() => E({
       center: !1
     }));
   }), p(() => {
     Y() || !d() || W(() => {
-      de(!1), C({
+      de(!1), E({
         center: !1
       });
     });
@@ -270,7 +271,7 @@ function Ht(n) {
     const e = (t) => {
       if (t.key !== "Escape") return;
       const r = typeof document < "u" ? document.activeElement : null;
-      !J(t.target) && !J(r) || Ye(t.target) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), n.onOpenChange(!1));
+      !J(t.target) && !J(r) || Xe(t.target) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), n.onOpenChange(!1));
     };
     document.addEventListener("keydown", e, !0), F(() => document.removeEventListener("keydown", e, !0));
   }), p(() => {
@@ -293,16 +294,16 @@ function Ht(n) {
     });
   }), p(() => {
     if (!n.open) return;
-    const e = De();
+    const e = qe();
     u === null ? xe(e) : $ = e;
   });
-  const Xe = (e) => {
+  const Ue = (e) => {
     !oe() || d() || h() || u !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [data-floe-floating-window-header-actions]') || (e.preventDefault(), u = e.pointerId, m = "drag", ue(!0), fe = {
       x: e.clientX,
       y: e.clientY
     }, he = {
       ...$
-    }, E = {
+    }, C = {
       x: e.clientX,
       y: e.clientY
     }, Q(!0, "grabbing"), ze(e));
@@ -312,14 +313,14 @@ function Ht(n) {
       y: t.clientY
     }, ge = {
       ...$
-    }, E = {
+    }, C = {
       x: t.clientX,
       y: t.clientY
-    }, Q(!0, Be[e]), ze(t));
+    }, Q(!0, We[e]), ze(t));
   }, pe = () => {
     R = null, ye();
-  }, He = (e) => {
-    if (!(u === null || e.pointerId !== u) && m !== null && (E = {
+  }, Ve = (e) => {
+    if (!(u === null || e.pointerId !== u) && m !== null && (C = {
       x: e.clientX,
       y: e.clientY
     }, R === null)) {
@@ -330,27 +331,27 @@ function Ht(n) {
       R = requestAnimationFrame(pe);
     }
   }, ze = (e) => {
-    O = at({
+    O = ut({
       pointerEvent: e,
       captureEl: a,
-      onMove: He,
+      onMove: Ve,
       onEnd: ({
         commit: t,
         reason: r,
         snapshot: o
       }) => {
-        E = {
+        C = {
           x: o.latestClientX,
           y: o.latestClientY
         }, be(t || r === "pointer_cancel");
       }
     });
   }, $e = () => {
-    !Y() || h() || (u !== null && K(!0), de(!d()), C());
-  }, Ue = (e) => {
+    !Y() || h() || (u !== null && K(!0), de(!d()), E());
+  }, je = (e) => {
     e.target?.closest("button, [data-floe-floating-window-header-actions]") || $e();
-  }, Ve = (e) => {
-    qe(e.target) && We();
+  }, Ge = (e) => {
+    Ne(e.target) && Ye();
   }, y = (e) => q("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",
@@ -362,16 +363,16 @@ function Ht(n) {
     sw: "cursor-nesw-resize bottom-0 left-0 w-2 h-2"
   }[e]);
   return [(() => {
-    var e = mt(), t = N;
+    var e = yt(), t = N;
     return typeof t == "function" ? Ie(t, e) : N = e, e;
   })(), l(z, {
     get when() {
       return I.mounted();
     },
     get children() {
-      return l(Qe, {
+      return l(Je, {
         get children() {
-          var e = Rt(), t = e.firstChild, r = t.firstChild, o = r.firstChild, ee = o.nextSibling, je = r.nextSibling, _e = a;
+          var e = Et(), t = e.firstChild, r = t.firstChild, o = r.firstChild, ee = o.nextSibling, Qe = r.nextSibling, _e = a;
           return typeof _e == "function" ? Ie(_e, e) : a = e, Se(e, Pe({
             get "data-floating-presence"() {
               return I.state();
@@ -406,9 +407,9 @@ function Ht(n) {
               return D(() => !!n.title)() ? se() : void 0;
             },
             tabIndex: -1,
-            onPointerDown: Ve
+            onPointerDown: Ge
           }), !1, !0), Se(t, Pe({
-            [ht]: "true"
+            [mt]: "true"
           }, {
             "data-floe-floating-window-surface": "true",
             "data-floe-surface": "floating",
@@ -416,7 +417,7 @@ function Ht(n) {
               return M() || T() ? "true" : void 0;
             },
             get "data-floe-floating-window-state"() {
-              return Oe() ? "active" : "inactive";
+              return De() ? "active" : "inactive";
             }
           }, {
             [Ae]: "true"
@@ -432,21 +433,21 @@ function Ht(n) {
             get "data-floating-presence"() {
               return I.state();
             }
-          }), !1, !0), r.$$dblclick = Ue, r.$$pointerdown = Xe, c(o, l(z, {
+          }), !1, !0), r.$$dblclick = je, r.$$pointerdown = Ue, c(o, l(z, {
             get when() {
               return n.title;
             },
             get children() {
-              var i = vt();
-              return c(i, () => n.title), f(() => Ze(i, "id", se())), i;
+              var i = bt();
+              return c(i, () => n.title), f(() => Ke(i, "id", se())), i;
             }
           })), c(r, l(z, {
             get when() {
               return n.headerActions;
             },
             get children() {
-              var i = xt(), Ge = i.firstChild;
-              return c(i, () => n.headerActions, Ge), i;
+              var i = pt(), Ze = i.firstChild;
+              return c(i, () => n.headerActions, Ze), i;
             }
           }), ee), c(ee, l(z, {
             get when() {
@@ -470,12 +471,12 @@ function Ht(n) {
                       return d();
                     },
                     get fallback() {
-                      return l(ot, {
+                      return l(at, {
                         class: "w-3 h-3"
                       });
                     },
                     get children() {
-                      return l(it, {
+                      return l(lt, {
                         class: "w-3 h-3"
                       });
                     }
@@ -495,16 +496,16 @@ function Ht(n) {
               return n.labels?.close ?? "Close";
             },
             get children() {
-              return l(rt, {
+              return l(st, {
                 class: "w-3.5 h-3.5"
               });
             }
-          }), null), c(je, () => n.children), c(t, l(z, {
+          }), null), c(Qe, () => n.children), c(t, l(z, {
             get when() {
               return n.footer;
             },
             get children() {
-              var i = yt();
+              var i = zt();
               return c(i, () => n.footer), i;
             }
           }), null), c(t, l(z, {
@@ -513,10 +514,10 @@ function Ht(n) {
             },
             get children() {
               return [(() => {
-                var i = bt();
+                var i = $t();
                 return b(i, "pointerdown", x("n"), !0), f(() => w(i, y("n"))), i;
               })(), (() => {
-                var i = pt();
+                var i = _t();
                 return b(i, "pointerdown", x("s"), !0), f(() => w(i, y("s"))), i;
               })(), l(z, {
                 get when() {
@@ -524,22 +525,22 @@ function Ht(n) {
                 },
                 get children() {
                   return [(() => {
-                    var i = zt();
+                    var i = St();
                     return b(i, "pointerdown", x("e"), !0), f(() => w(i, y("e"))), i;
                   })(), (() => {
-                    var i = $t();
+                    var i = Pt();
                     return b(i, "pointerdown", x("w"), !0), f(() => w(i, y("w"))), i;
                   })(), (() => {
-                    var i = _t();
+                    var i = It();
                     return b(i, "pointerdown", x("ne"), !0), f(() => w(i, y("ne"))), i;
                   })(), (() => {
-                    var i = St();
+                    var i = Rt();
                     return b(i, "pointerdown", x("nw"), !0), f(() => w(i, y("nw"))), i;
                   })(), (() => {
-                    var i = Pt();
+                    var i = At();
                     return b(i, "pointerdown", x("se"), !0), f(() => w(i, y("se"))), i;
                   })(), (() => {
-                    var i = It();
+                    var i = Ct();
                     return b(i, "pointerdown", x("sw"), !0), f(() => w(i, y("sw"))), i;
                   })()];
                 }
@@ -551,7 +552,7 @@ function Ht(n) {
     }
   })];
 }
-Je(["pointerdown", "dblclick"]);
+et(["pointerdown", "dblclick"]);
 export {
-  Ht as FloatingWindow
+  jt as FloatingWindow
 };

package/dist/context/LayoutContext.d.ts

@@ -26,3 +26,5 @@ export declare const LayoutProvider: (props: {
     children: import("solid-js").JSX.Element;
 }) => import("solid-js").JSX.Element, useLayout: () => LayoutContextValue, useOptionalLayout: () => LayoutContextValue | undefined;
 export declare function createLayoutService(): LayoutContextValue;
+/** Standalone surfaces honor the same configuration without requiring a Shell. */
+export declare function useMobileLayout(): Accessor<boolean>;

package/dist/context/LayoutContext.js

@@ -1,32 +1,40 @@
-import { createEffect as f } from "solid-js";
-import { createStore as c, produce as r } from "solid-js/store";
-import { createSimpleContext as u } from "./createSimpleContext.js";
-import { useResolvedFloeConfig as v } from "./FloeConfigContext.js";
+import { createEffect as p, onCleanup as y } from "solid-js";
+import { createStore as u, produce as r } from "solid-js/store";
+import { createSimpleContext as g } from "./createSimpleContext.js";
+import { useResolvedFloeConfig as h } from "./FloeConfigContext.js";
+import { useMediaQuery as M } from "../hooks/useMediaQuery.js";
 const {
-  Provider: x,
-  use: C,
-  useOptional: A
-} = u({
+  Provider: V,
+  use: O,
+  useOptional: T
+} = g({
   name: "Layout",
-  init: g
+  init: w
 });
-function g() {
-  const n = v(), i = () => n.config.layout, p = () => typeof window > "u" ? !1 : window.matchMedia(i().mobileQuery).matches, s = n.persist.load(i().storageKey, {}), h = {
+function w() {
+  const n = h(), i = () => n.config.layout, f = () => typeof window > "u" ? !1 : window.matchMedia(i().mobileQuery).matches, d = n.persist.load(i().storageKey, {}), v = {
     sidebar: {
-      width: s.sidebar?.width ?? i().sidebar.defaultWidth,
-      activeTab: (i().sidebar.persistActiveTab !== !1 ? s.sidebar?.activeTab : void 0) ?? i().sidebar.defaultActiveTab,
-      collapsed: s.sidebar?.collapsed ?? i().sidebar.defaultCollapsed
+      width: d.sidebar?.width ?? i().sidebar.defaultWidth,
+      activeTab: (i().sidebar.persistActiveTab !== !1 ? d.sidebar?.activeTab : void 0) ?? i().sidebar.defaultActiveTab,
+      collapsed: d.sidebar?.collapsed ?? i().sidebar.defaultCollapsed
     },
     terminal: {
-      opened: s.terminal?.opened ?? i().terminal.defaultOpened,
-      height: s.terminal?.height ?? i().terminal.defaultHeight
+      opened: d.terminal?.opened ?? i().terminal.defaultOpened,
+      height: d.terminal?.height ?? i().terminal.defaultHeight
     },
-    isMobile: p()
-  }, [a, o] = c(h), [l, b] = c({
+    isMobile: f()
+  }, [a, o] = u(v), [l, b] = u({
     motion: "animated",
     revision: 0
-  }), m = (e) => Math.max(i().sidebar.clamp.min, Math.min(i().sidebar.clamp.max, e));
-  return f(() => {
+  }), c = (e) => Math.max(i().sidebar.clamp.min, Math.min(i().sidebar.clamp.max, e));
+  return p(() => {
+    const e = i().mobileQuery;
+    if (typeof window > "u") return;
+    const t = window.matchMedia(e);
+    o("isMobile", t.matches);
+    const s = (m) => o("isMobile", m.matches);
+    t.addEventListener("change", s), y(() => t.removeEventListener("change", s));
+  }), p(() => {
     const e = {
       sidebar: {
         width: a.sidebar.width,
@@ -48,16 +56,16 @@ function g() {
     sidebarCollapsed: () => a.sidebar.collapsed,
     sidebarVisibilityMotion: () => l.motion,
     sidebarVisibilityMotionRevision: () => l.revision,
-    clampSidebarWidth: m,
+    clampSidebarWidth: c,
     // Sidebar actions
     setSidebarWidth: (e) => o(r((t) => {
-      t.sidebar.width = m(e);
+      t.sidebar.width = c(e);
     })),
     setSidebarActiveTab: (e, t) => {
-      o(r((d) => {
-        d.sidebar.activeTab = e, t?.openSidebar !== !1 && (d.sidebar.collapsed = !1);
-      })), t?.visibilityMotion === "instant" && b(r((d) => {
-        d.motion = "instant", d.revision += 1;
+      o(r((s) => {
+        s.sidebar.activeTab = e, t?.openSidebar !== !1 && (s.sidebar.collapsed = !1);
+      })), t?.visibilityMotion === "instant" && b(r((s) => {
+        s.motion = "instant", s.revision += 1;
       }));
     },
     setSidebarCollapsed: (e) => o(r((t) => {
@@ -84,9 +92,14 @@ function g() {
     setIsMobile: (e) => o("isMobile", e)
   };
 }
+function Q() {
+  const n = T(), i = h();
+  return n?.isMobile ?? M(() => i.config.layout.mobileQuery);
+}
 export {
-  x as LayoutProvider,
-  g as createLayoutService,
-  C as useLayout,
-  A as useOptionalLayout
+  V as LayoutProvider,
+  w as createLayoutService,
+  O as useLayout,
+  Q as useMobileLayout,
+  T as useOptionalLayout
 };

package/dist/context/index.d.ts

@@ -1,7 +1,7 @@
 export { createSimpleContext } from './createSimpleContext';
 export { FloeConfigProvider, useFloeConfig, useResolvedFloeConfig, DEFAULT_FLOE_CONFIG, type FloeConfig, type FloeConfigValue, type DeepPartial, type FloeStorageAdapter, type PersistApi, } from './FloeConfigContext';
 export { ThemeProvider, useTheme, createThemeService, type ThemeContextValue } from './ThemeContext';
-export { LayoutProvider, useLayout, createLayoutService, type LayoutContextValue } from './LayoutContext';
+export { LayoutProvider, useLayout, useMobileLayout, createLayoutService, type LayoutContextValue } from './LayoutContext';
 export { CommandProvider, useCommand, createCommandService, type Command, type CommandContextValue } from './CommandContext';
 export { NotificationProvider, useNotification, createNotificationService, NotificationContainer, type Notification, type NotificationType, type NotificationContextValue, } from './NotificationContext';
 export { ComponentRegistryProvider, useComponentRegistry, useOptionalComponentRegistry, hasComponentRegistryContext, useComponentContextFactory, createComponentRegistry, type FloeComponent, type ComponentContext, type CommandContribution, type StatusBarContribution, type ComponentRegistryValue, } from './ComponentRegistry';

package/dist/floe.css

@@ -476,6 +476,16 @@
     --floe-floating-origin: right center;
   }
 
+  .floe-side-drawer-panel[data-floe-drawer-side='left'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
+    --floe-floating-enter-x: max(-8rem, -18vw);
+    --floe-floating-exit-x: max(-6rem, -14vw);
+    --floe-floating-origin: left center;
+  }
+
   .floe-bottom-drawer-overlay {
     --floe-dialog-gap-y: 1.25rem;
     --floe-dialog-gap-x: 1.5rem;