@floegence/floe-webapp-core 0.36.1 → 0.36.2

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,13 +1,11 @@
-import { use as d, insert as a, createComponent as i, effect as l, template as c } from "solid-js/web";
-import { For as g } from "solid-js";
-import { WorkbenchWidget as u } from "./WorkbenchWidget.js";
-import { getWidgetEntry as m } from "./widgets/widgetRegistry.js";
-import { InfiniteCanvas as v } from "../ui/InfiniteCanvas.js";
-var s = /* @__PURE__ */ c("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>"), f = /* @__PURE__ */ c("<div class=workbench-canvas>");
-function b(e) {
+import { use as r, insert as o, createComponent as i, effect as a, template as g } from "solid-js/web";
+import { WorkbenchCanvasField as c } from "./WorkbenchCanvasField.js";
+import { InfiniteCanvas as u } from "../ui/InfiniteCanvas.js";
+var m = /* @__PURE__ */ g("<div class=workbench-canvas>");
+function C(e) {
   return (() => {
-    var t = f(), o = e.setCanvasFrameRef;
-    return typeof o == "function" ? d(o, t) : e.setCanvasFrameRef = t, a(t, i(v, {
+    var t = m(), n = e.setCanvasFrameRef;
+    return typeof n == "function" ? r(n, t) : e.setCanvasFrameRef = t, o(t, i(u, {
       ariaLabel: "Workbench canvas",
       class: "workbench-canvas__infinite",
       get viewport() {
@@ -23,61 +21,57 @@ function b(e) {
         return e.locked;
       },
       get children() {
-        var r = s();
-        return r.firstChild, a(r, i(g, {
-          get each() {
+        return i(c, {
+          get widgetDefinitions() {
+            return e.widgetDefinitions;
+          },
+          get widgets() {
             return e.widgets;
           },
-          children: (n) => i(u, {
-            get definition() {
-              return m(n.type, e.widgetDefinitions);
-            },
-            item: n,
-            get selected() {
-              return e.selectedWidgetId === n.id;
-            },
-            get optimisticFront() {
-              return e.optimisticFrontWidgetId === n.id;
-            },
-            get topZIndex() {
-              return e.topZIndex;
-            },
-            get viewportScale() {
-              return e.viewport.scale;
-            },
-            get locked() {
-              return e.locked;
-            },
-            get filtered() {
-              return !e.filters[n.type];
-            },
-            get onSelect() {
-              return e.onSelectWidget;
-            },
-            get onContextMenu() {
-              return e.onWidgetContextMenu;
-            },
-            get onStartOptimisticFront() {
-              return e.onStartOptimisticFront;
-            },
-            get onCommitFront() {
-              return e.onCommitFront;
-            },
-            get onCommitMove() {
-              return e.onCommitMove;
-            },
-            get onCommitResize() {
-              return e.onCommitResize;
-            },
-            get onRequestDelete() {
-              return e.onRequestDelete;
-            }
-          })
-        }), null), r;
+          get selectedWidgetId() {
+            return e.selectedWidgetId;
+          },
+          get optimisticFrontWidgetId() {
+            return e.optimisticFrontWidgetId;
+          },
+          get topZIndex() {
+            return e.topZIndex;
+          },
+          get viewportScale() {
+            return e.viewport.scale;
+          },
+          get locked() {
+            return e.locked;
+          },
+          get filters() {
+            return e.filters;
+          },
+          get onSelectWidget() {
+            return e.onSelectWidget;
+          },
+          get onWidgetContextMenu() {
+            return e.onWidgetContextMenu;
+          },
+          get onStartOptimisticFront() {
+            return e.onStartOptimisticFront;
+          },
+          get onCommitFront() {
+            return e.onCommitFront;
+          },
+          get onCommitMove() {
+            return e.onCommitMove;
+          },
+          get onCommitResize() {
+            return e.onCommitResize;
+          },
+          get onRequestDelete() {
+            return e.onRequestDelete;
+          }
+        });
       }
-    })), l(() => t.classList.toggle("is-locked", !!e.locked)), t;
+    })), a(() => t.classList.toggle("is-locked", !!e.locked)), t;
   })();
 }
 export {
-  b as WorkbenchCanvas
+  C as WorkbenchCanvas
 };

package/dist/components/workbench/WorkbenchCanvasField.d.ts

@@ -0,0 +1,25 @@
+import type { WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+export interface WorkbenchCanvasFieldProps {
+    widgetDefinitions: readonly WorkbenchWidgetDefinition[];
+    widgets: readonly WorkbenchWidgetItem[];
+    selectedWidgetId: string | null;
+    optimisticFrontWidgetId: string | null;
+    topZIndex: number;
+    viewportScale: number;
+    locked: boolean;
+    filters: Record<WorkbenchWidgetType, boolean>;
+    onSelectWidget: (widgetId: string) => void;
+    onWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
+    onStartOptimisticFront: (widgetId: string) => void;
+    onCommitFront: (widgetId: string) => void;
+    onCommitMove: (widgetId: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onCommitResize: (widgetId: string, size: {
+        width: number;
+        height: number;
+    }) => void;
+    onRequestDelete: (widgetId: string) => void;
+}
+export declare function WorkbenchCanvasField(props: WorkbenchCanvasFieldProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchCanvasField.js

@@ -0,0 +1,145 @@
+import { insert as o, createComponent as g, template as u } from "solid-js/web";
+import { createMemo as r, For as m } from "solid-js";
+import { getWidgetEntry as c } from "./widgets/widgetRegistry.js";
+import { WorkbenchWidget as l } from "./WorkbenchWidget.js";
+var a = /* @__PURE__ */ u("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>");
+function w(t) {
+  const e = r((n) => {
+    const i = t.widgetById().get(t.widgetId);
+    if (i) return i;
+    if (n) return n;
+    throw new Error(`Workbench widget ${t.widgetId} is missing from the render map.`);
+  }), d = r(() => c(e().type, t.widgetDefinitions));
+  return g(l, {
+    get definition() {
+      return d();
+    },
+    get widgetId() {
+      return t.widgetId;
+    },
+    get widgetTitle() {
+      return e().title;
+    },
+    get widgetType() {
+      return e().type;
+    },
+    get x() {
+      return e().x;
+    },
+    get y() {
+      return e().y;
+    },
+    get width() {
+      return e().width;
+    },
+    get height() {
+      return e().height;
+    },
+    get zIndex() {
+      return e().z_index;
+    },
+    itemSnapshot: e,
+    get selected() {
+      return t.selectedWidgetId === t.widgetId;
+    },
+    get optimisticFront() {
+      return t.optimisticFrontWidgetId === t.widgetId;
+    },
+    get topZIndex() {
+      return t.topZIndex;
+    },
+    get viewportScale() {
+      return t.viewportScale;
+    },
+    get locked() {
+      return t.locked;
+    },
+    get filtered() {
+      return !t.filters[e().type];
+    },
+    get onSelect() {
+      return t.onSelectWidget;
+    },
+    get onContextMenu() {
+      return t.onWidgetContextMenu;
+    },
+    get onStartOptimisticFront() {
+      return t.onStartOptimisticFront;
+    },
+    get onCommitFront() {
+      return t.onCommitFront;
+    },
+    get onCommitMove() {
+      return t.onCommitMove;
+    },
+    get onCommitResize() {
+      return t.onCommitResize;
+    },
+    get onRequestDelete() {
+      return t.onRequestDelete;
+    }
+  });
+}
+function W(t) {
+  const e = r(() => t.widgets.map((n) => n.id)), d = r(() => new Map(t.widgets.map((n) => [n.id, n])));
+  return (() => {
+    var n = a();
+    return n.firstChild, o(n, g(m, {
+      get each() {
+        return e();
+      },
+      children: (i) => g(w, {
+        widgetId: i,
+        get widgetDefinitions() {
+          return t.widgetDefinitions;
+        },
+        get widgets() {
+          return t.widgets;
+        },
+        widgetById: d,
+        get selectedWidgetId() {
+          return t.selectedWidgetId;
+        },
+        get optimisticFrontWidgetId() {
+          return t.optimisticFrontWidgetId;
+        },
+        get topZIndex() {
+          return t.topZIndex;
+        },
+        get viewportScale() {
+          return t.viewportScale;
+        },
+        get locked() {
+          return t.locked;
+        },
+        get filters() {
+          return t.filters;
+        },
+        get onSelectWidget() {
+          return t.onSelectWidget;
+        },
+        get onWidgetContextMenu() {
+          return t.onWidgetContextMenu;
+        },
+        get onStartOptimisticFront() {
+          return t.onStartOptimisticFront;
+        },
+        get onCommitFront() {
+          return t.onCommitFront;
+        },
+        get onCommitMove() {
+          return t.onCommitMove;
+        },
+        get onCommitResize() {
+          return t.onCommitResize;
+        },
+        get onRequestDelete() {
+          return t.onRequestDelete;
+        }
+      })
+    }), null), n;
+  })();
+}
+export {
+  W as WorkbenchCanvasField
+};

package/dist/components/workbench/WorkbenchWidget.d.ts

@@ -1,8 +1,16 @@
 import { type JSX } from 'solid-js';
-import type { WorkbenchWidgetDefinition, WorkbenchWidgetItem } from './types';
+import type { WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
 export interface WorkbenchWidgetProps {
     definition: WorkbenchWidgetDefinition;
-    item: WorkbenchWidgetItem;
+    widgetId: string;
+    widgetTitle: string;
+    widgetType: WorkbenchWidgetType;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    zIndex: number;
+    itemSnapshot: () => WorkbenchWidgetItem;
     selected: boolean;
     optimisticFront: boolean;
     topZIndex: number;

package/dist/components/workbench/WorkbenchWidget.js

@@ -1,35 +1,35 @@
-import { insert as m, createComponent as f, memo as B, effect as G, setAttribute as N, setStyleProperty as v, template as A, delegateEvents as O } from "solid-js/web";
-import { createSignal as R, onCleanup as T, untrack as I, createMemo as H } from "solid-js";
+import { insert as u, createComponent as v, memo as E, effect as B, setAttribute as G, setStyleProperty as m, template as A, delegateEvents as N } from "solid-js/web";
+import { createSignal as R, onCleanup as O, untrack as I, createMemo as H } from "solid-js";
 import { startHotInteraction as P } from "../../utils/hotInteraction.js";
 import { GripVertical as q, X as V } from "../icons/index.js";
-var Z = /* @__PURE__ */ A('<article class=workbench-widget><header class=workbench-widget__header><button type=button class=workbench-widget__drag aria-label="Drag widget"data-floe-canvas-interactive=true></button><div class=workbench-widget__title-area><span class=workbench-widget__title></span></div><button type=button class=workbench-widget__close aria-label="Remove widget"data-floe-canvas-interactive=true></button></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), j = /* @__PURE__ */ A('<div class=workbench-widget__resize aria-label="Resize widget"data-floe-canvas-interactive=true><svg class=workbench-widget__resize-glyph viewBox="0 0 12 12"aria-hidden=true><path d="M12 0 L0 12"></path><path d="M12 4 L4 12"></path><path d="M12 8 L8 12">');
+var Z = /* @__PURE__ */ A('<article class=workbench-widget data-floe-dialog-surface-host=true><header class=workbench-widget__header><button type=button class=workbench-widget__drag aria-label="Drag widget"data-floe-canvas-interactive=true></button><div class=workbench-widget__title-area><span class=workbench-widget__title></span></div><button type=button class=workbench-widget__close aria-label="Remove widget"data-floe-canvas-interactive=true></button></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), j = /* @__PURE__ */ A('<div class=workbench-widget__resize aria-label="Resize widget"data-floe-canvas-interactive=true><svg class=workbench-widget__resize-glyph viewBox="0 0 12 12"aria-hidden=true><path d="M12 0 L0 12"></path><path d="M12 4 L4 12"></path><path d="M12 8 L8 12">');
 const J = 220, K = 160;
 function et(e) {
-  const [u, x] = R(null), [b, C] = R(null);
-  let g, w;
-  T(() => {
-    g?.abort(), g = void 0, w?.abort(), w = void 0, I(u)?.stopInteraction(), I(b)?.stopInteraction();
+  const [b, x] = R(null), [f, C] = R(null);
+  let h, w;
+  O(() => {
+    h?.abort(), h = void 0, w?.abort(), w = void 0, I(b)?.stopInteraction(), I(f)?.stopInteraction();
   });
-  const M = () => u() !== null, _ = () => b() !== null, k = H(() => {
-    const i = u();
+  const M = () => b() !== null, k = () => f() !== null, y = H(() => {
+    const i = b();
     return i ? {
       x: i.worldX,
       y: i.worldY
     } : {
-      x: e.item.x,
-      y: e.item.y
+      x: e.x,
+      y: e.y
     };
-  }), y = H(() => {
-    const i = b();
+  }), _ = H(() => {
+    const i = f();
     return i ? {
       width: i.width,
       height: i.height
     } : {
-      width: e.item.width,
-      height: e.item.height
+      width: e.width,
+      height: e.height
     };
   }), $ = (i) => {
-    const o = I(u);
+    const o = I(b);
     if (!o) return;
     const a = {
       x: o.worldX,
@@ -37,11 +37,11 @@ function et(e) {
     }, r = {
       x: o.startWorldX,
       y: o.startWorldY
-    }, d = i && (Math.abs(a.x - r.x) > 1 || Math.abs(a.y - r.y) > 1);
-    e.onCommitFront(e.item.id), d && e.onCommitMove(e.item.id, a), o.stopInteraction(), x(null), g?.abort(), g = void 0;
+    }, l = i && (Math.abs(a.x - r.x) > 1 || Math.abs(a.y - r.y) > 1);
+    e.onCommitFront(e.widgetId), l && e.onCommitMove(e.widgetId, a), o.stopInteraction(), x(null), h?.abort(), h = void 0;
   }, F = (i) => {
     if (i.button !== 0 || e.locked) return;
-    i.preventDefault(), i.stopPropagation(), g?.abort(), e.onStartOptimisticFront(e.item.id);
+    i.preventDefault(), i.stopPropagation(), h?.abort(), e.onStartOptimisticFront(e.widgetId);
     const o = P({
       kind: "drag",
       cursor: "grabbing"
@@ -50,10 +50,10 @@ function et(e) {
       pointerId: i.pointerId,
       startClientX: i.clientX,
       startClientY: i.clientY,
-      startWorldX: e.item.x,
-      startWorldY: e.item.y,
-      worldX: e.item.x,
-      worldY: e.item.y,
+      startWorldX: e.x,
+      startWorldY: e.y,
+      worldX: e.x,
+      worldY: e.y,
       moved: !1,
       scale: a,
       stopInteraction: o
@@ -61,39 +61,39 @@ function et(e) {
     const r = (t) => {
       x((n) => {
         if (!n || n.pointerId !== t.pointerId) return n;
-        const c = n.startWorldX + (t.clientX - n.startClientX) / n.scale, h = n.startWorldY + (t.clientY - n.startClientY) / n.scale;
+        const c = n.startWorldX + (t.clientX - n.startClientX) / n.scale, g = n.startWorldY + (t.clientY - n.startClientY) / n.scale;
         return {
           ...n,
           worldX: c,
-          worldY: h,
-          moved: n.moved || Math.abs(c - n.startWorldX) > 2 || Math.abs(h - n.startWorldY) > 2
+          worldY: g,
+          moved: n.moved || Math.abs(c - n.startWorldX) > 2 || Math.abs(g - n.startWorldY) > 2
         };
       });
-    }, d = (t) => {
+    }, l = (t) => {
       t.pointerId === i.pointerId && $(!0);
     }, s = (t) => {
       t.pointerId === i.pointerId && $(!1);
-    }, l = new AbortController();
-    g = l, window.addEventListener("pointermove", r, {
-      signal: l.signal
-    }), window.addEventListener("pointerup", d, {
+    }, d = new AbortController();
+    h = d, window.addEventListener("pointermove", r, {
+      signal: d.signal
+    }), window.addEventListener("pointerup", l, {
       once: !0,
-      signal: l.signal
+      signal: d.signal
     }), window.addEventListener("pointercancel", s, {
       once: !0,
-      signal: l.signal
+      signal: d.signal
     });
-  }, X = (i) => {
-    const o = I(b);
+  }, S = (i) => {
+    const o = I(f);
     if (!o) return;
     const a = {
       width: o.width,
       height: o.height
     }, r = Math.abs(o.width - o.startWidth) > 1 || Math.abs(o.height - o.startHeight) > 1;
-    i && r && e.onCommitResize(e.item.id, a), o.stopInteraction(), C(null), w?.abort(), w = void 0;
-  }, E = (i) => {
+    i && r && e.onCommitResize(e.widgetId, a), o.stopInteraction(), C(null), w?.abort(), w = void 0;
+  }, T = (i) => {
     if (i.button !== 0 || e.locked) return;
-    i.preventDefault(), i.stopPropagation(), w?.abort(), e.onStartOptimisticFront(e.item.id);
+    i.preventDefault(), i.stopPropagation(), w?.abort(), e.onStartOptimisticFront(e.widgetId);
     const o = P({
       kind: "drag",
       cursor: "nwse-resize"
@@ -102,77 +102,77 @@ function et(e) {
       pointerId: i.pointerId,
       startClientX: i.clientX,
       startClientY: i.clientY,
-      startWidth: e.item.width,
-      startHeight: e.item.height,
-      width: e.item.width,
-      height: e.item.height,
+      startWidth: e.width,
+      startHeight: e.height,
+      width: e.width,
+      height: e.height,
       scale: a,
       stopInteraction: o
     });
     const r = (t) => {
       C((n) => {
         if (!n || n.pointerId !== t.pointerId) return n;
-        const c = Math.max(J, n.startWidth + (t.clientX - n.startClientX) / n.scale), h = Math.max(K, n.startHeight + (t.clientY - n.startClientY) / n.scale);
+        const c = Math.max(J, n.startWidth + (t.clientX - n.startClientX) / n.scale), g = Math.max(K, n.startHeight + (t.clientY - n.startClientY) / n.scale);
         return {
           ...n,
           width: c,
-          height: h
+          height: g
         };
       });
-    }, d = (t) => {
-      t.pointerId === i.pointerId && X(!0);
+    }, l = (t) => {
+      t.pointerId === i.pointerId && S(!0);
     }, s = (t) => {
-      t.pointerId === i.pointerId && X(!1);
-    }, l = new AbortController();
-    w = l, window.addEventListener("pointermove", r, {
-      signal: l.signal
-    }), window.addEventListener("pointerup", d, {
+      t.pointerId === i.pointerId && S(!1);
+    }, d = new AbortController();
+    w = d, window.addEventListener("pointermove", r, {
+      signal: d.signal
+    }), window.addEventListener("pointerup", l, {
       once: !0,
-      signal: l.signal
+      signal: d.signal
     }), window.addEventListener("pointercancel", s, {
       once: !0,
-      signal: l.signal
+      signal: d.signal
     });
   };
   return (() => {
-    var i = Z(), o = i.firstChild, a = o.firstChild, r = a.nextSibling, d = r.firstChild, s = r.nextSibling, l = o.nextSibling;
+    var i = Z(), o = i.firstChild, a = o.firstChild, r = a.nextSibling, l = r.firstChild, s = r.nextSibling, d = o.nextSibling;
     return i.$$click = () => {
-      e.onSelect(e.item.id), e.onCommitFront(e.item.id);
+      e.onSelect(e.widgetId), e.onCommitFront(e.widgetId);
     }, i.$$contextmenu = (t) => {
-      t.preventDefault(), t.stopPropagation(), e.onContextMenu(t, e.item);
-    }, a.$$pointerdown = F, m(a, f(q, {
+      t.preventDefault(), t.stopPropagation(), e.onContextMenu(t, e.itemSnapshot());
+    }, a.$$pointerdown = F, u(a, v(q, {
       class: "w-3.5 h-3.5"
-    })), m(r, () => {
+    })), u(r, () => {
       const t = e.definition.icon;
-      return f(t, {
+      return v(t, {
         class: "w-3.5 h-3.5"
       });
-    }, d), m(d, () => e.item.title), s.$$click = (t) => {
-      t.stopPropagation(), t.preventDefault(), e.onRequestDelete(e.item.id);
-    }, s.$$pointerdown = (t) => t.stopPropagation(), m(s, f(V, {
+    }, l), u(l, () => e.widgetTitle), s.$$click = (t) => {
+      t.stopPropagation(), t.preventDefault(), e.onRequestDelete(e.widgetId);
+    }, s.$$pointerdown = (t) => t.stopPropagation(), u(s, v(V, {
       class: "w-3 h-3"
-    })), m(l, () => {
+    })), u(d, () => {
       const t = e.definition.body;
-      return f(t, {
+      return v(t, {
         get widgetId() {
-          return e.item.id;
+          return e.widgetId;
         },
         get title() {
-          return e.item.title;
+          return e.widgetTitle;
         },
         get type() {
-          return e.item.type;
+          return e.widgetType;
         }
       });
-    }), m(i, (() => {
-      var t = B(() => !!e.locked);
+    }), u(i, (() => {
+      var t = E(() => !!e.locked);
       return () => t() ? null : (() => {
         var n = j();
-        return n.$$pointerdown = E, n;
+        return n.$$pointerdown = T, n;
       })();
-    })(), null), G((t) => {
-      var n = !!e.selected, c = !!M(), h = !!_(), z = !!e.filtered, S = e.item.id, Y = `translate(${k().x}px, ${k().y}px)`, W = `${y().width}px`, L = `${y().height}px`, D = M() || _() || e.optimisticFront ? `${e.topZIndex + 1}` : `${e.item.z_index}`;
-      return n !== t.e && i.classList.toggle("is-selected", t.e = n), c !== t.t && i.classList.toggle("is-dragging", t.t = c), h !== t.a && i.classList.toggle("is-resizing", t.a = h), z !== t.o && i.classList.toggle("is-filtered-out", t.o = z), S !== t.i && N(i, "data-floe-workbench-widget-id", t.i = S), Y !== t.n && v(i, "transform", t.n = Y), W !== t.s && v(i, "width", t.s = W), L !== t.h && v(i, "height", t.h = L), D !== t.r && v(i, "z-index", t.r = D), t;
+    })(), null), B((t) => {
+      var n = !!e.selected, c = !!M(), g = !!k(), X = !!e.filtered, z = e.widgetId, Y = `translate(${y().x}px, ${y().y}px)`, W = `${_().width}px`, L = `${_().height}px`, D = M() || k() || e.optimisticFront ? `${e.topZIndex + 1}` : `${e.zIndex}`;
+      return n !== t.e && i.classList.toggle("is-selected", t.e = n), c !== t.t && i.classList.toggle("is-dragging", t.t = c), g !== t.a && i.classList.toggle("is-resizing", t.a = g), X !== t.o && i.classList.toggle("is-filtered-out", t.o = X), z !== t.i && G(i, "data-floe-workbench-widget-id", t.i = z), Y !== t.n && m(i, "transform", t.n = Y), W !== t.s && m(i, "width", t.s = W), L !== t.h && m(i, "height", t.h = L), D !== t.r && m(i, "z-index", t.r = D), t;
     }, {
       e: void 0,
       t: void 0,
@@ -186,7 +186,7 @@ function et(e) {
     }), i;
   })();
 }
-O(["contextmenu", "click", "pointerdown"]);
+N(["contextmenu", "click", "pointerdown"]);
 export {
   et as WorkbenchWidget
 };

package/dist/hooks/useOverlayMask.d.ts

@@ -1,6 +1,7 @@
 import { type Accessor } from 'solid-js';
 export type OverlayScrollBlockMode = 'none' | 'outside' | 'all';
 export type OverlayEscapeCloseMode = 'none' | 'inside' | 'always';
+type MaybeAccessor<T> = T | Accessor<T>;
 export interface UseOverlayMaskOptions {
     open: Accessor<boolean>;
     root: Accessor<HTMLElement | undefined>;
@@ -10,17 +11,17 @@ export interface UseOverlayMaskOptions {
     /** Optional alternate close path for Escape pressed outside the overlay surface. */
     onEscapeOutside?: () => void;
     /** Lock `document.body` scroll while the overlay is open (default: true). */
-    lockBodyScroll?: boolean;
+    lockBodyScroll?: MaybeAccessor<boolean | undefined>;
     /** Prevent scroll via wheel events (default: none). */
-    blockWheel?: OverlayScrollBlockMode;
+    blockWheel?: MaybeAccessor<OverlayScrollBlockMode | undefined>;
     /** Prevent scroll via touch-move events (default: none). */
-    blockTouchMove?: OverlayScrollBlockMode;
+    blockTouchMove?: MaybeAccessor<OverlayScrollBlockMode | undefined>;
     /** Keep tab focus within the overlay root (default: true). */
-    trapFocus?: boolean;
+    trapFocus?: MaybeAccessor<boolean | undefined>;
     /** Close on Escape and never leak to underlying window handlers (default: always). */
-    closeOnEscape?: boolean | OverlayEscapeCloseMode;
+    closeOnEscape?: MaybeAccessor<boolean | OverlayEscapeCloseMode | undefined>;
     /** Stop bubbling keydown events to window-level hotkeys (default: true). */
-    blockHotkeys?: boolean;
+    blockHotkeys?: MaybeAccessor<boolean | undefined>;
     /**
      * 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
@@ -28,10 +29,11 @@ export interface UseOverlayMaskOptions {
      */
     allowHotkeys?: readonly string[] | Accessor<readonly string[] | undefined>;
     /** Auto-focus on open (default: true). */
-    autoFocus?: boolean | {
+    autoFocus?: MaybeAccessor<boolean | {
         selector?: string;
-    };
+    } | undefined>;
     /** Restore focus to the previously active element on close (default: true). */
-    restoreFocus?: boolean;
+    restoreFocus?: MaybeAccessor<boolean | undefined>;
 }
 export declare function useOverlayMask(options: UseOverlayMaskOptions): void;
+export {};