@floegence/floe-webapp-core 0.86.36 → 0.86.38

package/dist/hooks/index.d.ts

@@ -8,3 +8,4 @@ export { usePersisted } from './usePersisted';
 export { useDeckDrag } from './useDeckDrag';
 export { useFileBrowserItemDrag, useFileBrowserDropTarget, type UseFileBrowserItemDragOptions, type FileBrowserItemDragHandlers, type UseFileBrowserDropTargetOptions, type FileBrowserDropTargetResult, } from './useFileBrowserDrag';
 export { createRetainedContent } from './createRetainedContent';
+export { useOverlayMask, type UseOverlayMaskOptions } from './useOverlayMask';

package/dist/hooks/useOverlayMask.d.ts

@@ -8,6 +8,8 @@ export interface UseOverlayMaskOptions {
     /** Ordered focus regions that belong to one overlay, including persistent navigation. */
     focusRoots?: Accessor<readonly HTMLElement[]>;
     onClose?: () => void;
+    /** Outside pointer/focus interactions routed only to the owning overlay layer. */
+    onInteractOutside?: (event: PointerEvent | FocusEvent) => void;
     /** Treat additional nodes as part of the overlay surface (e.g. portaled layers). */
     containsTarget?: (target: EventTarget | null) => boolean;
     /** Optional alternate close path for Escape pressed outside the overlay surface. */

package/dist/hooks/useOverlayMask.js

@@ -1,65 +1,65 @@
-import { createEffect as Q, onCleanup as U } from "solid-js";
-import { lockBodyStyle as X } from "../utils/bodyStyleLock.js";
-import { deferAfterPaint as K } from "../utils/defer.js";
-import { getFocusableElements as x, getFirstFocusableElement as Y } from "../utils/focus.js";
-import { matchKeybind as Z } from "../utils/keybind.js";
+import { createEffect as U, onCleanup as X } from "solid-js";
+import { lockBodyStyle as Y } from "../utils/bodyStyleLock.js";
+import { deferAfterPaint as x } from "../utils/defer.js";
+import { getFocusableElements as I, getFirstFocusableElement as Z } from "../utils/focus.js";
+import { matchKeybind as _ } from "../utils/keybind.js";
 const H = /* @__PURE__ */ new WeakMap();
 function A(t) {
   return typeof Node < "u" && t instanceof Node;
 }
-function p(t, o, c) {
+function g(t, o, c) {
   return c ? c(o) : !t || !A(o) ? !1 : t.contains(o);
 }
-function W(t, o, c, i) {
-  return c === "none" ? !1 : c === "all" ? !0 : !p(t, o, i);
+function W(t, o, c, f) {
+  return c === "none" ? !1 : c === "all" ? !0 : !g(t, o, f);
 }
-function _(t) {
+function $(t) {
   return typeof t == "function" ? t() ?? [] : t ?? [];
 }
 function s(t, o) {
   return typeof t == "function" ? t() ?? o : t ?? o;
 }
-function $(t, o) {
-  for (const c of _(o)) {
-    const i = c.trim();
-    if (i && Z(t, i))
+function ee(t, o) {
+  for (const c of $(o)) {
+    const f = c.trim();
+    if (f && _(t, f))
       return !0;
   }
   return !1;
 }
-function ue(t) {
-  const o = () => s(t.lockBodyScroll, !0), c = () => s(t.trapFocus, !0), i = () => {
-    const f = s(
+function se(t) {
+  const o = () => s(t.lockBodyScroll, !0), c = () => s(t.trapFocus, !0), f = () => {
+    const l = s(
       t.closeOnEscape,
       !0
     );
-    return f === !1 ? "none" : f === "inside" ? "inside" : f === "none" ? "none" : "always";
-  }, I = () => s(t.blockHotkeys, !0), R = () => s(t.restoreFocus, !0), N = () => s(t.blockWheel, "none"), q = () => s(t.blockTouchMove, "none"), j = () => s(t.autoFocus, !0);
-  Q(() => {
+    return l === !1 ? "none" : l === "inside" ? "inside" : l === "none" ? "none" : "always";
+  }, R = () => s(t.blockHotkeys, !0), N = () => s(t.restoreFocus, !0), q = () => s(t.blockWheel, "none"), j = () => s(t.blockTouchMove, "none"), z = () => s(t.autoFocus, !0);
+  U(() => {
     if (!t.open() || typeof document > "u") return;
-    const f = o(), w = c(), v = i(), h = s(t.escapeKeyPhase, "capture"), z = I(), V = R(), g = N(), k = q(), E = j(), d = H.get(document) ?? [];
+    const l = o(), L = c(), v = f(), y = s(t.escapeKeyPhase, "capture"), V = R(), G = N(), E = q(), k = j(), b = z(), d = H.get(document) ?? [];
     H.set(document, d);
-    const y = {
-      global: f || v === "always",
-      contains: (e) => p(t.root(), e, t.containsTarget)
+    const h = {
+      global: l || v === "always",
+      contains: (e) => g(t.root(), e, t.containsTarget)
     };
-    d.push(y);
-    let T = !0;
-    const l = (e) => T && !d.slice(d.indexOf(y) + 1).some((n) => n.global || n.contains(e)), b = document.activeElement instanceof HTMLElement ? document.activeElement : null, G = f ? X({ overflow: "hidden" }) : null;
-    K(() => {
+    d.push(h);
+    let O = !0;
+    const a = (e) => O && !d.slice(d.indexOf(h) + 1).some((n) => n.global || n.contains(e)), w = document.activeElement instanceof HTMLElement ? document.activeElement : null, J = l ? Y({ overflow: "hidden" }) : null;
+    x(() => {
       const e = t.root();
-      if (!e?.isConnected || !l(e) || E === !1 || y.contains(document.activeElement)) return;
-      const n = typeof E == "object" ? E.selector : void 0, r = (n ? e.querySelector(n) : null) ?? e.querySelector("[data-floe-autofocus]") ?? Y(e) ?? e;
+      if (!e?.isConnected || !a(e) || b === !1 || h.contains(document.activeElement)) return;
+      const n = typeof b == "object" ? b.selector : void 0, r = (n ? e.querySelector(n) : null) ?? e.querySelector("[data-floe-autofocus]") ?? Z(e) ?? e;
       try {
         r.focus({ preventScroll: !0 });
       } catch {
       }
     });
-    const L = (e) => {
-      if (e.key !== "Tab" || !l(e.target)) return;
+    const T = (e) => {
+      if (e.key !== "Tab" || !a(e.target)) return;
       const n = t.root();
       if (!n) return;
-      const m = t.focusRoots?.() ?? [n], r = t.focusRoots ? [...new Set(m.flatMap(x))].filter((u) => u.tabIndex >= 0 && !u.closest('[hidden], [inert], [aria-hidden="true"]')) : x(n);
+      const m = t.focusRoots?.() ?? [n], r = t.focusRoots ? [...new Set(m.flatMap(I))].filter((u) => u.tabIndex >= 0 && !u.closest('[hidden], [inert], [aria-hidden="true"]')) : I(n);
       if (!r.length) {
         e.preventDefault();
         try {
@@ -68,30 +68,30 @@ function ue(t) {
         }
         return;
       }
-      const D = r[0], P = r[r.length - 1], a = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      const P = r[0], K = r[r.length - 1], i = document.activeElement instanceof HTMLElement ? document.activeElement : null;
       if (t.focusRoots) {
-        const u = a ? r.indexOf(a) : -1, J = u < 0 ? e.shiftKey ? r.length - 1 : 0 : (u + (e.shiftKey ? -1 : 1) + r.length) % r.length;
-        e.preventDefault(), r[J]?.focus({ preventScroll: !0 });
+        const u = i ? r.indexOf(i) : -1, Q = u < 0 ? e.shiftKey ? r.length - 1 : 0 : (u + (e.shiftKey ? -1 : 1) + r.length) % r.length;
+        e.preventDefault(), r[Q]?.focus({ preventScroll: !0 });
         return;
       }
       if (e.shiftKey) {
-        if (a === D || !a || !m.some((u) => u.contains(a))) {
+        if (i === P || !i || !m.some((u) => u.contains(i))) {
           e.preventDefault();
           try {
-            P.focus();
+            K.focus();
           } catch {
           }
         }
-      } else if (a === P || !a || !m.some((u) => u.contains(a))) {
+      } else if (i === K || !i || !m.some((u) => u.contains(i))) {
         e.preventDefault();
         try {
-          D.focus();
+          P.focus();
         } catch {
         }
       }
     }, M = (e) => {
-      if (e.key !== "Escape" || !l(e.target) || h === "bubble" && (e.defaultPrevented || e.isComposing) || v === "none") return;
-      const n = t.root(), m = p(
+      if (e.key !== "Escape" || !a(e.target) || y === "bubble" && (e.defaultPrevented || e.isComposing) || v === "none") return;
+      const n = t.root(), m = g(
         n,
         A(e.target) ? e.target : document.activeElement,
         t.containsTarget
@@ -105,41 +105,43 @@ function ue(t) {
         return;
       }
       e.preventDefault(), e.stopImmediatePropagation(), t.onClose?.();
-    }, O = (e) => {
-      if (!l(e.target)) return;
-      const n = t.root();
-      n && z && p(n, e.target, t.containsTarget) && ($(e, t.allowHotkeys) || e.stopPropagation());
     }, B = (e) => {
-      if (!l(e.target)) return;
+      if (!a(e.target)) return;
       const n = t.root();
-      W(n, e.target, g, t.containsTarget) && e.cancelable && e.preventDefault();
+      n && V && g(n, e.target, t.containsTarget) && (ee(e, t.allowHotkeys) || e.stopPropagation());
     }, F = (e) => {
-      l(e.target) && e.stopPropagation();
+      if (!a(e.target)) return;
+      const n = t.root();
+      W(n, e.target, E, t.containsTarget) && e.cancelable && e.preventDefault();
     }, S = (e) => {
-      if (!l(e.target)) return;
+      a(e.target) && e.stopPropagation();
+    }, C = (e) => {
+      if (!a(e.target)) return;
       const n = t.root();
       W(n, e.target, k, t.containsTarget) && e.cancelable && e.preventDefault();
+    }, p = (e) => {
+      a(e.target) && !h.contains(e.target) && t.onInteractOutside?.(e);
     };
-    w && document.addEventListener("keydown", L, !0);
-    const C = h === "capture" ? window : document;
-    v !== "none" && C.addEventListener(
+    t.onInteractOutside && (document.addEventListener("pointerdown", p, !0), document.addEventListener("focusin", p)), L && document.addEventListener("keydown", T, !0);
+    const D = y === "capture" ? window : document;
+    v !== "none" && D.addEventListener(
       "keydown",
       M,
-      h === "capture"
-    ), document.addEventListener("keydown", O), g !== "none" && (document.addEventListener("wheel", B, { capture: !0, passive: !1 }), document.addEventListener("wheel", F)), k !== "none" && document.addEventListener("touchmove", S, {
+      y === "capture"
+    ), document.addEventListener("keydown", B), E !== "none" && (document.addEventListener("wheel", F, { capture: !0, passive: !1 }), document.addEventListener("wheel", S)), k !== "none" && document.addEventListener("touchmove", C, {
       capture: !0,
       passive: !1
-    }), U(() => {
-      T = !1, d.splice(d.indexOf(y), 1), w && document.removeEventListener("keydown", L, !0), v !== "none" && C.removeEventListener(
+    }), X(() => {
+      O = !1, document.removeEventListener("pointerdown", p, !0), document.removeEventListener("focusin", p), d.splice(d.indexOf(h), 1), L && document.removeEventListener("keydown", T, !0), v !== "none" && D.removeEventListener(
         "keydown",
         M,
-        h === "capture"
-      ), document.removeEventListener("keydown", O), g !== "none" && (document.removeEventListener("wheel", B, !0), document.removeEventListener("wheel", F)), k !== "none" && document.removeEventListener("touchmove", S, !0), G?.(), V && b && b.isConnected && K(() => {
+        y === "capture"
+      ), document.removeEventListener("keydown", B), E !== "none" && (document.removeEventListener("wheel", F, !0), document.removeEventListener("wheel", S)), k !== "none" && document.removeEventListener("touchmove", C, !0), J?.(), G && w && w.isConnected && x(() => {
         if (typeof document > "u") return;
         const e = document.activeElement;
         if (!(e && e !== document.body && e !== document.documentElement))
           try {
-            b.focus({ preventScroll: !0 });
+            w.focus({ preventScroll: !0 });
           } catch {
           }
       });
@@ -147,5 +149,5 @@ function ue(t) {
   });
 }
 export {
-  ue as useOverlayMask
+  se as useOverlayMask
 };

package/dist/index.js

@@ -1,19 +1,19 @@
 import { FloeProvider as r } from "./app/FloeProvider.js";
-import { applyShellThemeAttribute as i, applySurfaceStyleAttribute as s, applyTheme as n, builtInThemes as a, getSystemTheme as m, isFloeSurfaceStyle as l, isThemeType as p, mergeThemeTokenMaps as f, resolveThemeTokenOverrides as d, resolveThemeTokens as T, syncThemeTokenOverrides as c } from "./styles/themes/index.js";
-import { floeColorTokenCategories as x, floeDesignTokens as g, floeFontFamilyTokens as y, floeMotionTokens as C, floeRadiusTokens as S, floeSharedCssVariables as h, floeSpacingTokens as F, floeSurfaceTokens as v, floeThemeColorVariables as P, floeTypographyTokens as R, getFloeColorTokenValue as k } from "./styles/tokens.js";
-import { BUILT_IN_SHELL_THEME_DEFAULTS as D, REQUIRED_SHELL_THEME_TOKENS as E, assertUniqueThemePresetNames as b, builtInShellThemePresets as L, createShellThemePreset as _, getShellThemePresetsForMode as A, normalizeShellThemeSelection as N, presetSupportsMode as O, resolveShellThemePresetName as M } from "./styles/themes/presets.js";
+import { applyShellThemeAttribute as i, applySurfaceStyleAttribute as s, applyTheme as n, builtInThemes as a, getSystemTheme as m, isFloeSurfaceStyle as l, isThemeType as p, mergeThemeTokenMaps as f, resolveThemeTokenOverrides as d, resolveThemeTokens as T, syncThemeTokenOverrides as u } from "./styles/themes/index.js";
+import { floeColorTokenCategories as x, floeDesignTokens as g, floeFontFamilyTokens as y, floeMotionTokens as C, floeRadiusTokens as S, floeSharedCssVariables as h, floeSpacingTokens as F, floeSurfaceTokens as v, floeThemeColorVariables as P, floeTypographyTokens as k, getFloeColorTokenValue as R } from "./styles/tokens.js";
+import { BUILT_IN_SHELL_THEME_DEFAULTS as D, REQUIRED_SHELL_THEME_TOKENS as E, assertUniqueThemePresetNames as b, builtInShellThemePresets as L, createShellThemePreset as _, getShellThemePresetsForMode as A, normalizeShellThemeSelection as O, presetSupportsMode as M, resolveShellThemePresetName as N } from "./styles/themes/presets.js";
 import { CommandProvider as U, createCommandService as w, useCommand as G } from "./context/CommandContext.js";
 import { ComponentRegistryProvider as W, createComponentRegistry as K, hasComponentRegistryContext as V, useComponentContextFactory as z, useComponentRegistry as Q, useOptionalComponentRegistry as q } from "./context/ComponentRegistry.js";
 import { DEFAULT_FLOE_CONFIG as j, FloeConfigProvider as J, useFloeConfig as X, useResolvedFloeConfig as Z } from "./context/FloeConfigContext.js";
 import { DeckProvider as ee, createDeckService as oe, useDeck as re } from "./context/DeckContext.js";
 import { FLOE_GEOMETRY_SURFACE_ATTR as ie, FLOE_HOT_INTERACTION_ATTR as se, startHotInteraction as ne } from "./utils/hotInteraction.js";
 import { FileBrowserDragProvider as me, hasFileBrowserDragContext as le, useFileBrowserDrag as pe } from "./context/FileBrowserDragContext.js";
-import { LayoutProvider as de, createLayoutService as Te, useLayout as ce, useMobileLayout as ue } from "./context/LayoutContext.js";
+import { LayoutProvider as de, createLayoutService as Te, useLayout as ue, useMobileLayout as ce } from "./context/LayoutContext.js";
 import { NotificationContainer as ge, NotificationProvider as ye, createNotificationService as Ce, useNotification as Se } from "./context/NotificationContext.js";
 import { ThemeProvider as Fe, createThemeService as ve, useTheme as Pe } from "./context/ThemeContext.js";
-import { ViewActivationProvider as ke, useViewActivation as Ie } from "./context/ViewActivationContext.js";
+import { ViewActivationProvider as Re, useViewActivation as Ie } from "./context/ViewActivationContext.js";
 import { WidgetRegistryProvider as Ee, createWidgetRegistry as be, useWidgetRegistry as Le } from "./context/WidgetRegistry.js";
-import { WidgetStateProvider as Ae, useCurrentWidgetId as Ne, useWidgetState as Oe, useWidgetStateContext as Me } from "./context/WidgetStateContext.js";
+import { WidgetStateProvider as Ae, useCurrentWidgetId as Oe, useWidgetState as Me, useWidgetStateContext as Ne } from "./context/WidgetStateContext.js";
 import { applyDragDelta as Ue, applyResizeDelta as we, getGridCellSize as Ge, pixelDeltaToGridDelta as He, positionToGridArea as We, snapToGrid as Ke } from "./utils/gridLayout.js";
 import { calculateFitScale as ze } from "./utils/fitScale.js";
 import { checkCollision as qe, constrainPosition as Ye, findFreePosition as je, hasCollision as Je, sameGridPosition as Xe } from "./utils/gridCollision.js";
@@ -23,9 +23,9 @@ import { createRetainedContent as to } from "./hooks/createRetainedContent.js";
 import { createSimpleContext as so } from "./context/createSimpleContext.js";
 import { createUIFirstSelection as ao } from "./utils/uiFirstSelection.js";
 import { deferAfterPaint as lo, deferNonBlocking as po } from "./utils/defer.js";
-import { duration as To, easing as co, fadeIn as uo, listContainer as xo, listItem as go, panelResize as yo, popIn as Co, scaleIn as So, sidebarVariants as ho, slideInFromBottom as Fo, slideInFromLeft as vo, slideInFromRight as Po, slideInFromTop as Ro, springConfig as ko } from "./utils/animations.js";
+import { duration as To, easing as uo, fadeIn as co, listContainer as xo, listItem as go, panelResize as yo, popIn as Co, scaleIn as So, sidebarVariants as ho, slideInFromBottom as Fo, slideInFromLeft as vo, slideInFromRight as Po, slideInFromTop as ko, springConfig as Ro } from "./utils/animations.js";
 import { formatKeybind as Do, isMacLikePlatform as Eo, isPrimaryModKeyPressed as bo, matchKeybind as Lo, parseKeybind as _o } from "./utils/keybind.js";
-import { isTypingElement as No, shouldIgnoreHotkeys as Oo } from "./utils/dom.js";
+import { isTypingElement as Oo, shouldIgnoreHotkeys as Mo } from "./utils/dom.js";
 import { lockBodyStyle as Bo } from "./utils/bodyStyleLock.js";
 import { registerCommandContributions as wo, useCommandContributions as Go } from "./hooks/useCommandContributions.js";
 import { secureRandomUUID as Wo } from "./utils/secureRandom.js";
@@ -34,8 +34,9 @@ import { useDeckDrag as Qo } from "./hooks/useDeckDrag.js";
 import { useFileBrowserDropTarget as Yo, useFileBrowserItemDrag as jo } from "./hooks/useFileBrowserDrag.js";
 import { useKeybind as Xo } from "./hooks/useKeybind.js";
 import { useMediaQuery as $o } from "./hooks/useMediaQuery.js";
-import { usePersisted as or } from "./hooks/usePersisted.js";
-import { useResizeObserver as tr } from "./hooks/useResizeObserver.js";
+import { useOverlayMask as or } from "./hooks/useOverlayMask.js";
+import { usePersisted as tr } from "./hooks/usePersisted.js";
+import { useResizeObserver as sr } from "./hooks/useResizeObserver.js";
 export {
   D as BUILT_IN_SHELL_THEME_DEFAULTS,
   U as CommandProvider,
@@ -52,7 +53,7 @@ export {
   ye as NotificationProvider,
   E as REQUIRED_SHELL_THEME_TOKENS,
   Fe as ThemeProvider,
-  ke as ViewActivationProvider,
+  Re as ViewActivationProvider,
   Ee as WidgetRegistryProvider,
   Ae as WidgetStateProvider,
   Ue as applyDragDelta,
@@ -82,8 +83,8 @@ export {
   lo as deferAfterPaint,
   po as deferNonBlocking,
   To as duration,
-  co as easing,
-  uo as fadeIn,
+  uo as easing,
+  co as fadeIn,
   je as findFreePosition,
   x as floeColorTokenCategories,
   g as floeDesignTokens,
@@ -94,9 +95,9 @@ export {
   F as floeSpacingTokens,
   v as floeSurfaceTokens,
   P as floeThemeColorVariables,
-  R as floeTypographyTokens,
+  k as floeTypographyTokens,
   Do as formatKeybind,
-  k as getFloeColorTokenValue,
+  R as getFloeColorTokenValue,
   Ge as getGridCellSize,
   A as getShellThemePresetsForMode,
   m as getSystemTheme,
@@ -107,41 +108,41 @@ export {
   Eo as isMacLikePlatform,
   bo as isPrimaryModKeyPressed,
   p as isThemeType,
-  No as isTypingElement,
+  Oo as isTypingElement,
   xo as listContainer,
   go as listItem,
   Bo as lockBodyStyle,
   Lo as matchKeybind,
   f as mergeThemeTokenMaps,
-  N as normalizeShellThemeSelection,
+  O as normalizeShellThemeSelection,
   yo as panelResize,
   _o as parseKeybind,
   He as pixelDeltaToGridDelta,
   Co as popIn,
   We as positionToGridArea,
-  O as presetSupportsMode,
+  M as presetSupportsMode,
   wo as registerCommandContributions,
-  M as resolveShellThemePresetName,
+  N as resolveShellThemePresetName,
   d as resolveThemeTokenOverrides,
   T as resolveThemeTokens,
   Xe as sameGridPosition,
   So as scaleIn,
   Wo as secureRandomUUID,
-  Oo as shouldIgnoreHotkeys,
+  Mo as shouldIgnoreHotkeys,
   ho as sidebarVariants,
   Fo as slideInFromBottom,
   vo as slideInFromLeft,
   Po as slideInFromRight,
-  Ro as slideInFromTop,
+  ko as slideInFromTop,
   Ke as snapToGrid,
-  ko as springConfig,
+  Ro as springConfig,
   ne as startHotInteraction,
-  c as syncThemeTokenOverrides,
+  u as syncThemeTokenOverrides,
   G as useCommand,
   Go as useCommandContributions,
   z as useComponentContextFactory,
   Q as useComponentRegistry,
-  Ne as useCurrentWidgetId,
+  Oe as useCurrentWidgetId,
   Vo as useDebounce,
   re as useDeck,
   Qo as useDeckDrag,
@@ -150,17 +151,18 @@ export {
   jo as useFileBrowserItemDrag,
   X as useFloeConfig,
   Xo as useKeybind,
-  ce as useLayout,
+  ue as useLayout,
   $o as useMediaQuery,
-  ue as useMobileLayout,
+  ce as useMobileLayout,
   Se as useNotification,
   q as useOptionalComponentRegistry,
-  or as usePersisted,
-  tr as useResizeObserver,
+  or as useOverlayMask,
+  tr as usePersisted,
+  sr as useResizeObserver,
   Z as useResolvedFloeConfig,
   Pe as useTheme,
   Ie as useViewActivation,
   Le as useWidgetRegistry,
-  Oe as useWidgetState,
-  Me as useWidgetStateContext
+  Me as useWidgetState,
+  Ne as useWidgetStateContext
 };