@floegence/floe-webapp-core 0.35.55 → 0.35.56

package/dist/components/notes/NotesOverlay.d.ts

@@ -5,5 +5,7 @@ export interface NotesOverlayProps {
     onClose: () => void;
     controller: NotesController;
     interactionMode?: NotesOverlayInteractionMode;
+    /** Additional shell-owned keybinds that should continue working while floating Notes is focused. */
+    allowGlobalHotkeys?: readonly string[];
 }
 export declare function NotesOverlay(props: NotesOverlayProps): import("solid-js").JSX.Element;

package/dist/components/notes/NotesOverlay.js

@@ -1,28 +1,29 @@
-import { createComponent as o, insert as i, addEventListener as v, effect as y, setAttribute as k, Portal as c, memo as x, template as u, delegateEvents as $ } from "solid-js/web";
-import { createEffect as D, onCleanup as I, Show as s } from "solid-js";
-import { Motion as T } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
-import { easing as E, duration as C } from "../../utils/animations.js";
-import { useOverlayMask as F } from "../../hooks/useOverlayMask.js";
-import { X as L } from "../icons/index.js";
-import { NotesBoard as R } from "./NotesBoard.js";
-import { NotesContextMenu as B } from "./NotesContextMenu.js";
-import { NotesEditorFlyout as P, NotesManualPasteFlyout as Z } from "./NotesEditorFlyout.js";
-import { NotesOverviewPanel as _ } from "./NotesOverviewPanel.js";
-import { NotesTopicRail as z } from "./NotesTopicRail.js";
-import { NotesTrashFlyout as W } from "./NotesTrashFlyout.js";
-import { NotesTrashCanIcon as q } from "./notesAppearance.js";
-import { useNotesOverlayModel as j } from "./useNotesOverlayModel.js";
-var A = /* @__PURE__ */ u('<header class=notes-overlay__header data-floe-canvas-interactive=true><div class=notes-overlay__header-brand><div class=notes-overlay__header-title>Notes</div><div class=notes-overlay__header-separator></div><div class=notes-overlay__header-stat> topics</div><div class=notes-overlay__header-stat> live note</div><div class=notes-overlay__header-stat> trash</div></div><div class=notes-overlay__header-actions><button type=button class=notes-overlay__close aria-label="Close notes overlay"data-floe-overlay-close=true>'), V = /* @__PURE__ */ u("<button type=button class=notes-trash__toggle><div class=notes-trash__toggle-mark>"), H = /* @__PURE__ */ u("<div class=notes-overlay__body><div class=notes-trash data-floe-canvas-interactive=true>"), U = /* @__PURE__ */ u("<div class=notes-overview-backdrop data-floe-notes-boundary=true>"), X = /* @__PURE__ */ u("<div class=notes-overview-flyout data-floe-notes-boundary=true>"), Y = /* @__PURE__ */ u("<div class=notes-menu-backdrop data-floe-notes-boundary=true>");
-const G = '[data-floe-notes-boundary="true"]';
-function J(r) {
-  return typeof Element < "u" && r instanceof Element ? r : typeof Node < "u" && r instanceof Node ? r.parentElement : null;
+import { createComponent as o, insert as l, addEventListener as v, effect as T, setAttribute as $, Portal as u, memo as D, template as c, delegateEvents as I } from "solid-js/web";
+import { createMemo as F, createEffect as E, onCleanup as R, Show as s } from "solid-js";
+import { Motion as C } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { easing as L, duration as _ } from "../../utils/animations.js";
+import { useOverlayMask as B } from "../../hooks/useOverlayMask.js";
+import { X as P } from "../icons/index.js";
+import { useResolvedFloeConfig as Z } from "../../context/FloeConfigContext.js";
+import { NotesBoard as z } from "./NotesBoard.js";
+import { NotesContextMenu as H } from "./NotesContextMenu.js";
+import { NotesEditorFlyout as W, NotesManualPasteFlyout as q } from "./NotesEditorFlyout.js";
+import { NotesOverviewPanel as w } from "./NotesOverviewPanel.js";
+import { NotesTopicRail as A } from "./NotesTopicRail.js";
+import { NotesTrashFlyout as j } from "./NotesTrashFlyout.js";
+import { NotesTrashCanIcon as K } from "./notesAppearance.js";
+import { useNotesOverlayModel as V } from "./useNotesOverlayModel.js";
+var G = /* @__PURE__ */ c('<header class=notes-overlay__header data-floe-canvas-interactive=true><div class=notes-overlay__header-brand><div class=notes-overlay__header-title>Notes</div><div class=notes-overlay__header-separator></div><div class=notes-overlay__header-stat> topics</div><div class=notes-overlay__header-stat> live note</div><div class=notes-overlay__header-stat> trash</div></div><div class=notes-overlay__header-actions><button type=button class=notes-overlay__close aria-label="Close notes overlay"data-floe-overlay-close=true>'), U = /* @__PURE__ */ c("<button type=button class=notes-trash__toggle><div class=notes-trash__toggle-mark>"), X = /* @__PURE__ */ c("<div class=notes-overlay__body><div class=notes-trash data-floe-canvas-interactive=true>"), Y = /* @__PURE__ */ c("<div class=notes-overview-backdrop data-floe-notes-boundary=true>"), J = /* @__PURE__ */ c("<div class=notes-overview-flyout data-floe-notes-boundary=true>"), Q = /* @__PURE__ */ c("<div class=notes-menu-backdrop data-floe-notes-boundary=true>");
+const ee = '[data-floe-notes-boundary="true"]';
+function te(n) {
+  return typeof Element < "u" && n instanceof Element ? n : typeof Node < "u" && n instanceof Node ? n.parentElement : null;
 }
-function w(r) {
-  return !!J(r)?.closest(G);
+function k(n) {
+  return !!te(n)?.closest(ee);
 }
-function K(r) {
-  return r === "floating" ? {
-    mode: r,
+function oe(n) {
+  return n === "floating" ? {
+    mode: n,
     ariaModal: void 0,
     lockBodyScroll: !1,
     trapFocus: !1,
@@ -43,48 +44,62 @@ function K(r) {
     }
   };
 }
-function ge(r) {
-  const e = j(r);
+function he(n) {
+  const b = Z(), e = V(n);
   let g;
-  const l = () => K(r.interactionMode), b = () => r.onClose();
-  return D(() => {
-    if (!r.open || l().mode !== "floating" || typeof document > "u") return;
-    const t = (n) => {
-      w(n.target) || queueMicrotask(b);
+  const i = () => oe(n.interactionMode), f = () => n.onClose(), M = F(() => {
+    if (i().mode !== "floating")
+      return [];
+    const t = /* @__PURE__ */ new Set();
+    if (b.config.commands.palette.enabled) {
+      const r = b.config.commands.palette.keybind.trim();
+      r && t.add(r);
+    }
+    for (const r of n.allowGlobalHotkeys ?? []) {
+      const a = r.trim();
+      a && t.add(a);
+    }
+    return Array.from(t);
+  });
+  return E(() => {
+    if (!n.open || i().mode !== "floating" || typeof document > "u") return;
+    const t = (r) => {
+      k(r.target) || queueMicrotask(f);
     };
-    document.addEventListener("click", t, !0), I(() => document.removeEventListener("click", t, !0));
-  }), F({
-    open: () => r.open,
+    document.addEventListener("click", t, !0), R(() => document.removeEventListener("click", t, !0));
+  }), B({
+    open: () => n.open,
     root: () => g,
     onClose: () => e.handleCloseRequest(),
-    onEscapeOutside: l().mode === "floating" ? b : void 0,
-    containsTarget: w,
-    lockBodyScroll: l().lockBodyScroll,
-    trapFocus: l().trapFocus,
-    closeOnEscape: l().closeOnEscape,
+    onEscapeOutside: i().mode === "floating" ? f : void 0,
+    containsTarget: k,
+    lockBodyScroll: i().lockBodyScroll,
+    trapFocus: i().trapFocus,
+    closeOnEscape: i().closeOnEscape,
     blockHotkeys: !0,
-    blockWheel: l().blockWheel,
-    blockTouchMove: l().blockTouchMove,
-    autoFocus: l().autoFocus,
+    allowHotkeys: M,
+    blockWheel: i().blockWheel,
+    blockTouchMove: i().blockTouchMove,
+    autoFocus: i().autoFocus,
     restoreFocus: !0
   }), o(s, {
     get when() {
-      return r.open;
+      return n.open;
     },
     get children() {
-      return o(T.section, {
+      return o(C.section, {
         ref(t) {
-          var n = g;
-          typeof n == "function" ? n(t) : g = t;
+          var r = g;
+          typeof r == "function" ? r(t) : g = t;
         },
         class: "notes-overlay",
         role: "dialog",
         get "aria-modal"() {
-          return l().ariaModal;
+          return i().ariaModal;
         },
         "aria-label": "Notes overlay",
         get "data-notes-interaction-mode"() {
-          return l().mode;
+          return i().mode;
         },
         tabIndex: -1,
         initial: {
@@ -95,11 +110,11 @@ function ge(r) {
         },
         get transition() {
           return {
-            duration: C.fast
+            duration: _.fast
           };
         },
         get children() {
-          return [o(T.div, {
+          return [o(C.div, {
             class: "notes-overlay__frame",
             "data-floe-notes-boundary": "true",
             initial: {
@@ -114,19 +129,19 @@ function ge(r) {
             },
             get transition() {
               return {
-                duration: C.normal,
-                easing: E.easeOut
+                duration: _.normal,
+                easing: L.easeOut
               };
             },
             get children() {
               return [(() => {
-                var t = A(), n = t.firstChild, a = n.firstChild, m = a.nextSibling, p = m.nextSibling, N = p.firstChild, d = p.nextSibling, M = d.firstChild, f = d.nextSibling, S = f.firstChild, O = n.nextSibling, h = O.firstChild;
-                return i(p, () => e.header.topicCount(), N), i(d, () => e.header.totalLiveNotes(), M), i(d, () => e.header.totalLiveNotes() === 1 ? "" : "s", null), i(f, () => e.header.trashCount(), S), h.$$click = () => e.handleCloseRequest(), i(h, o(L, {
+                var t = G(), r = t.firstChild, a = r.firstChild, m = a.nextSibling, p = m.nextSibling, N = p.firstChild, d = p.nextSibling, S = d.firstChild, h = d.nextSibling, O = h.firstChild, x = r.nextSibling, y = x.firstChild;
+                return l(p, () => e.header.topicCount(), N), l(d, () => e.header.totalLiveNotes(), S), l(d, () => e.header.totalLiveNotes() === 1 ? "" : "s", null), l(h, () => e.header.trashCount(), O), y.$$click = () => e.handleCloseRequest(), l(y, o(P, {
                   class: "w-4 h-4"
                 })), t;
               })(), (() => {
-                var t = H(), n = t.firstChild;
-                return i(t, o(z, {
+                var t = X(), r = t.firstChild;
+                return l(t, o(A, {
                   get topics() {
                     return e.rail.topics();
                   },
@@ -169,7 +184,7 @@ function ge(r) {
                   onDeleteTopic: (a) => {
                     e.rail.deleteTopic(a);
                   }
-                }), n), i(t, o(R, {
+                }), r), l(t, o(z, {
                   get activeTopic() {
                     return e.board.activeTopic();
                   },
@@ -257,12 +272,12 @@ function ge(r) {
                   get onCommitMove() {
                     return e.board.commitMove;
                   }
-                }), n), i(t, o(s, {
+                }), r), l(t, o(s, {
                   get when() {
                     return !e.board.isMobile();
                   },
                   get children() {
-                    return o(_, {
+                    return o(w, {
                       mode: "desktop",
                       get items() {
                         return e.overview.items();
@@ -287,32 +302,32 @@ function ge(r) {
                       }
                     });
                   }
-                }), n), i(n, o(s, {
+                }), r), l(r, o(s, {
                   get when() {
                     return !e.trash.open();
                   },
                   get children() {
-                    var a = V(), m = a.firstChild;
-                    return v(a, "click", e.trash.openDock, !0), i(m, o(q, {
+                    var a = U(), m = a.firstChild;
+                    return v(a, "click", e.trash.openDock, !0), l(m, o(K, {
                       class: "notes-trash__toggle-icon"
-                    })), y(() => k(a, "aria-label", `Open trash dock${e.trash.count() > 0 ? `, ${e.trash.count()} items` : ""}`)), a;
+                    })), T(() => $(a, "aria-label", `Open trash dock${e.trash.count() > 0 ? `, ${e.trash.count()} items` : ""}`)), a;
                   }
-                })), y(() => n.classList.toggle("is-open", !!e.trash.open())), t;
+                })), T(() => r.classList.toggle("is-open", !!e.trash.open())), t;
               })()];
             }
           }), o(s, {
             get when() {
-              return x(() => !!e.board.isMobile())() && e.board.overviewOpen();
+              return D(() => !!e.board.isMobile())() && e.board.overviewOpen();
             },
             get children() {
-              return o(c, {
+              return o(u, {
                 get children() {
                   return [(() => {
-                    var t = U();
+                    var t = Y();
                     return v(t, "click", e.overview.close, !0), t;
                   })(), (() => {
-                    var t = X();
-                    return i(t, o(_, {
+                    var t = J();
+                    return l(t, o(w, {
                       mode: "mobile",
                       get items() {
                         return e.overview.items();
@@ -343,9 +358,9 @@ function ge(r) {
                 }
               });
             }
-          }), o(c, {
+          }), o(u, {
             get children() {
-              return o(W, {
+              return o(j, {
                 get open() {
                   return e.trash.open();
                 },
@@ -380,12 +395,12 @@ function ge(r) {
               return e.contextMenu.state();
             },
             get children() {
-              return o(c, {
+              return o(u, {
                 get children() {
                   return [(() => {
-                    var t = Y();
+                    var t = Q();
                     return v(t, "contextmenu", e.contextMenu.retarget, !0), v(t, "click", e.contextMenu.close, !0), t;
-                  })(), o(B, {
+                  })(), o(H, {
                     get x() {
                       return e.contextMenu.position()?.left ?? 0;
                     },
@@ -404,9 +419,9 @@ function ge(r) {
               return !!e.editor.note();
             },
             get children() {
-              return o(c, {
+              return o(u, {
                 get children() {
-                  return o(P, {
+                  return o(W, {
                     get note() {
                       return e.editor.note();
                     },
@@ -438,9 +453,9 @@ function ge(r) {
                 }
               });
             }
-          }), o(c, {
+          }), o(u, {
             get children() {
-              return o(Z, {
+              return o(q, {
                 get open() {
                   return e.manualPaste.open();
                 },
@@ -464,7 +479,7 @@ function ge(r) {
     }
   });
 }
-$(["click", "contextmenu"]);
+I(["click", "contextmenu"]);
 export {
-  ge as NotesOverlay
+  he as NotesOverlay
 };

package/dist/hooks/useOverlayMask.d.ts

@@ -21,6 +21,12 @@ export interface UseOverlayMaskOptions {
     closeOnEscape?: boolean | OverlayEscapeCloseMode;
     /** Stop bubbling keydown events to window-level hotkeys (default: true). */
     blockHotkeys?: boolean;
+    /**
+     * Allow a small set of global keybinds to continue bubbling to window-level handlers
+     * while the overlay is focused. This is primarily used by floating overlays that must
+     * preserve one or two shell-owned shortcuts such as their own toggle keybind.
+     */
+    allowHotkeys?: readonly string[] | Accessor<readonly string[] | undefined>;
     /** Auto-focus on open (default: true). */
     autoFocus?: boolean | {
         selector?: string;

package/dist/hooks/useOverlayMask.js

@@ -1,94 +1,106 @@
 import { createEffect as T, onCleanup as O } from "solid-js";
 import { lockBodyStyle as M } from "../utils/bodyStyleLock.js";
-import { deferAfterPaint as p } from "../utils/defer.js";
+import { deferAfterPaint as k } from "../utils/defer.js";
 import { getFocusableElements as B, getFirstFocusableElement as D } from "../utils/focus.js";
-function b(t) {
-  return typeof Node < "u" && t instanceof Node;
+import { matchKeybind as F } from "../utils/keybind.js";
+function b(e) {
+  return typeof Node < "u" && e instanceof Node;
 }
-function i(t, c, r) {
-  return r ? r(c) : !t || !b(c) ? !1 : t.contains(c);
+function i(e, c, r) {
+  return r ? r(c) : !e || !b(c) ? !1 : e.contains(c);
 }
-function k(t, c, r, u) {
-  return r === "none" ? !1 : r === "all" ? !0 : !i(t, c, u);
+function p(e, c, r, u) {
+  return r === "none" ? !1 : r === "all" ? !0 : !i(e, c, u);
 }
-function H(t) {
-  const c = () => t.lockBodyScroll !== !1, r = () => t.trapFocus !== !1, u = () => t.closeOnEscape === !1 ? "none" : t.closeOnEscape === "inside" ? "inside" : t.closeOnEscape === "none" ? "none" : "always", g = () => t.blockHotkeys !== !1, w = () => t.restoreFocus !== !1;
+function C(e) {
+  return typeof e == "function" ? e() ?? [] : e ?? [];
+}
+function P(e, c) {
+  for (const r of C(c)) {
+    const u = r.trim();
+    if (u && F(e, u))
+      return !0;
+  }
+  return !1;
+}
+function N(e) {
+  const c = () => e.lockBodyScroll !== !1, r = () => e.trapFocus !== !1, u = () => e.closeOnEscape === !1 ? "none" : e.closeOnEscape === "inside" ? "inside" : e.closeOnEscape === "none" ? "none" : "always", w = () => e.blockHotkeys !== !1, g = () => e.restoreFocus !== !1;
   T(() => {
-    if (!t.open() || typeof document > "u") return;
-    const f = document.activeElement instanceof HTMLElement ? document.activeElement : null, L = c() ? M({ overflow: "hidden" }) : null;
-    p(() => {
-      const e = t.root();
-      if (!e) return;
-      const n = t.autoFocus;
+    if (!e.open() || typeof document > "u") return;
+    const s = document.activeElement instanceof HTMLElement ? document.activeElement : null, L = c() ? M({ overflow: "hidden" }) : null;
+    k(() => {
+      const t = e.root();
+      if (!t) return;
+      const n = e.autoFocus;
       if (n === !1) return;
-      const o = typeof n == "object" ? n.selector : void 0, l = (o ? e.querySelector(o) : null) ?? e.querySelector("[data-floe-autofocus]") ?? D(e) ?? e;
+      const o = typeof n == "object" ? n.selector : void 0, f = (o ? t.querySelector(o) : null) ?? t.querySelector("[data-floe-autofocus]") ?? D(t) ?? t;
       try {
-        l.focus();
+        f.focus();
       } catch {
       }
     });
-    const d = (e) => {
-      if (e.key !== "Tab") return;
-      const n = t.root();
+    const d = (t) => {
+      if (t.key !== "Tab") return;
+      const n = e.root();
       if (!n) return;
       const o = B(n);
       if (!o.length) {
-        e.preventDefault();
+        t.preventDefault();
         try {
           n.focus();
         } catch {
         }
         return;
       }
-      const a = o[0], l = o[o.length - 1], s = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-      if (e.shiftKey) {
-        if (s === a || !s || !n.contains(s)) {
-          e.preventDefault();
+      const a = o[0], f = o[o.length - 1], l = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      if (t.shiftKey) {
+        if (l === a || !l || !n.contains(l)) {
+          t.preventDefault();
           try {
-            l.focus();
+            f.focus();
           } catch {
           }
         }
-      } else if (s === l) {
-        e.preventDefault();
+      } else if (l === f) {
+        t.preventDefault();
         try {
           a.focus();
         } catch {
         }
       }
-    }, m = (e) => {
-      if (e.key !== "Escape") return;
+    }, m = (t) => {
+      if (t.key !== "Escape") return;
       const n = u();
       if (n === "none") return;
-      const o = t.root(), a = i(o, b(e.target) ? e.target : document.activeElement, t.containsTarget);
+      const o = e.root(), a = i(o, b(t.target) ? t.target : document.activeElement, e.containsTarget);
       if (n === "inside") {
         if (a) {
-          e.preventDefault(), e.stopImmediatePropagation(), t.onClose?.();
+          t.preventDefault(), t.stopImmediatePropagation(), e.onClose?.();
           return;
         }
-        t.onEscapeOutside && (e.preventDefault(), e.stopImmediatePropagation(), t.onEscapeOutside());
+        e.onEscapeOutside && (t.preventDefault(), t.stopImmediatePropagation(), e.onEscapeOutside());
         return;
       }
-      e.preventDefault(), e.stopImmediatePropagation(), t.onClose?.();
-    }, v = (e) => {
-      const n = t.root();
-      n && g() && i(n, e.target, t.containsTarget) && e.stopPropagation();
-    }, y = (e) => {
-      const n = t.blockWheel ?? "none", o = t.root();
-      k(o, e.target, n, t.containsTarget) && e.cancelable && e.preventDefault();
-    }, h = (e) => {
-      e.stopPropagation();
-    }, E = (e) => {
-      const n = t.blockTouchMove ?? "none", o = t.root();
-      k(o, e.target, n, t.containsTarget) && e.cancelable && e.preventDefault();
+      t.preventDefault(), t.stopImmediatePropagation(), e.onClose?.();
+    }, v = (t) => {
+      const n = e.root();
+      n && w() && i(n, t.target, e.containsTarget) && (P(t, e.allowHotkeys) || t.stopPropagation());
+    }, y = (t) => {
+      const n = e.blockWheel ?? "none", o = e.root();
+      p(o, t.target, n, e.containsTarget) && t.cancelable && t.preventDefault();
+    }, h = (t) => {
+      t.stopPropagation();
+    }, E = (t) => {
+      const n = e.blockTouchMove ?? "none", o = e.root();
+      p(o, t.target, n, e.containsTarget) && t.cancelable && t.preventDefault();
     };
-    r() && document.addEventListener("keydown", d, !0), u() !== "none" && window.addEventListener("keydown", m, !0), document.addEventListener("keydown", v), (t.blockWheel ?? "none") !== "none" && (document.addEventListener("wheel", y, { capture: !0, passive: !1 }), document.addEventListener("wheel", h)), (t.blockTouchMove ?? "none") !== "none" && document.addEventListener("touchmove", E, { capture: !0, passive: !1 }), O(() => {
-      r() && document.removeEventListener("keydown", d, !0), u() !== "none" && window.removeEventListener("keydown", m, !0), document.removeEventListener("keydown", v), (t.blockWheel ?? "none") !== "none" && (document.removeEventListener("wheel", y, !0), document.removeEventListener("wheel", h)), (t.blockTouchMove ?? "none") !== "none" && document.removeEventListener("touchmove", E, !0), L?.(), w() && f && f.isConnected && p(() => {
+    r() && document.addEventListener("keydown", d, !0), u() !== "none" && window.addEventListener("keydown", m, !0), document.addEventListener("keydown", v), (e.blockWheel ?? "none") !== "none" && (document.addEventListener("wheel", y, { capture: !0, passive: !1 }), document.addEventListener("wheel", h)), (e.blockTouchMove ?? "none") !== "none" && document.addEventListener("touchmove", E, { capture: !0, passive: !1 }), O(() => {
+      r() && document.removeEventListener("keydown", d, !0), u() !== "none" && window.removeEventListener("keydown", m, !0), document.removeEventListener("keydown", v), (e.blockWheel ?? "none") !== "none" && (document.removeEventListener("wheel", y, !0), document.removeEventListener("wheel", h)), (e.blockTouchMove ?? "none") !== "none" && document.removeEventListener("touchmove", E, !0), L?.(), g() && s && s.isConnected && k(() => {
         if (typeof document > "u") return;
-        const e = document.activeElement;
-        if (!(e && e !== document.body && e !== document.documentElement))
+        const t = document.activeElement;
+        if (!(t && t !== document.body && t !== document.documentElement))
           try {
-            f.focus();
+            s.focus();
           } catch {
           }
       });
@@ -96,5 +108,5 @@ function H(t) {
   });
 }
 export {
-  H as useOverlayMask
+  N as useOverlayMask
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.35.55",
+  "version": "0.35.56",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",