react-panel-layout 0.6.0 → 0.7.0

package/dist/window.js

@@ -1,149 +1,160 @@
-import { D as $, b as A, F as G, P as K, d as W } from "./FloatingWindow-BpdOpg_L.js";
+import { D as A, b as G, F as K, P as T, S as W, d as q } from "./FloatingWindow-Bw2djgpz.js";
 import { jsx as m } from "react/jsx-runtime";
-import * as i from "react";
-import { u as p } from "./useEffectEvent-Dp7HLCf0.js";
-import { u as D } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
-import { D as E } from "./styles-DPPuJ0sf.js";
-import { u as q } from "./useFloatingState-tEfA_wbc.js";
-const M = () => typeof window > "u" ? { width: 0, height: 0 } : {
+import * as c from "react";
+import { u as p } from "./useDocumentPointerEvents-DXxw3qWj.js";
+import { u as x } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
+import { D as z } from "./styles-NkjuMOVS.js";
+import { u as J } from "./useFloatingState-tEfA_wbc.js";
+const D = () => typeof window > "u" ? { width: 0, height: 0 } : {
   width: window.innerWidth,
   height: window.innerHeight
-}, O = (e, o, t, c, n) => {
-  const r = e + t > n.width ? Math.max(0, n.width - t) : e, s = o + c > n.height ? Math.max(0, n.height - c) : o;
-  return { x: r, y: s };
-}, b = /* @__PURE__ */ new Map(), z = (e) => {
-  const { box: o = "content-box" } = e, t = `resize-box:${o}`, c = b.get(t);
-  if (c)
-    return c;
-  const n = new class {
-    #e = /* @__PURE__ */ new Map();
-    #t = new ResizeObserver((r, s) => {
-      r.forEach((u) => {
-        const a = this.#e.get(u.target);
-        a && a(u, s);
-      });
-    });
-    observe(r, s) {
-      return this.#e.set(r, s), this.#t.observe(r, e), () => {
-        this.#e.delete(r), this.#t.unobserve(r);
+}, O = (e, t, n, o, r) => {
+  const s = e + n > r.width ? Math.max(0, r.width - n) : e, i = t + o > r.height ? Math.max(0, r.height - o) : t;
+  return { x: s, y: i };
+}, b = /* @__PURE__ */ new Map(), R = (e) => {
+  const t = `resize-box:${e}`, n = b.get(t);
+  if (n)
+    return n;
+  const o = /* @__PURE__ */ new Map(), r = new ResizeObserver((i) => {
+    for (const a of i) {
+      const u = o.get(a.target);
+      u && u(a);
+    }
+  }), s = {
+    observe(i, a) {
+      return o.set(i, a), r.observe(i, { box: e }), () => {
+        o.delete(i), r.unobserve(i);
       };
     }
-  }();
-  return b.set(t, n), n;
+  };
+  return b.set(t, s), s;
+}, E = (e) => {
+  const t = e.getBoundingClientRect();
+  return {
+    target: e,
+    contentRect: t,
+    borderBoxSize: [{ inlineSize: t.width, blockSize: t.height }],
+    contentBoxSize: [{ inlineSize: t.width, blockSize: t.height }],
+    devicePixelContentBoxSize: []
+  };
+}, M = (e) => {
+  if (e.borderBoxSize?.length > 0) {
+    const t = e.borderBoxSize[0];
+    return new DOMRect(0, 0, t.inlineSize, t.blockSize);
+  }
+  return e.contentRect;
 };
-function R(e, { box: o }) {
-  const [t, c] = i.useState(null), n = e.current;
-  i.useEffect(() => n ? z({ box: o }).observe(n, (u) => {
-    c(u);
-  }) : void 0, [o, n]);
-  const r = i.useMemo(() => {
-    if (!t)
-      return null;
-    if (t.borderBoxSize?.length > 0) {
-      const s = t.borderBoxSize[0];
-      return new DOMRect(0, 0, s.inlineSize, s.blockSize);
+function C(e, { box: t = "content-box" }) {
+  const [n, o] = c.useState(null);
+  x(() => {
+    const s = e.current;
+    if (!s) {
+      o(null);
+      return;
     }
-    return t.contentRect;
-  }, [t]);
-  return { entry: t, rect: r };
+    return o(E(s)), R(t).observe(s, o);
+  }, [e, t]);
+  const r = c.useMemo(() => n ? M(n) : null, [n]);
+  return { entry: n, rect: r };
 }
-const S = {
+const P = {
   border: "none",
   padding: 0,
   background: "transparent"
-}, P = {
+}, k = {
   position: "fixed",
-  zIndex: E
-}, C = typeof window < "u" && typeof document < "u", L = ({
+  zIndex: z
+}, B = typeof window < "u" && typeof document < "u", L = ({
   anchor: e,
-  onClose: o,
-  children: t,
-  contentClassName: c,
-  contentStyle: n,
-  dataAttributes: r,
-  onKeyDown: s,
-  onPositionChange: u
+  onClose: t,
+  children: n,
+  contentClassName: o,
+  contentStyle: r,
+  dataAttributes: s,
+  onKeyDown: i,
+  onPositionChange: a
 }) => {
-  const a = i.useRef(null), { rect: d } = R(a, { box: "border-box" }), l = i.useMemo(() => {
-    const f = M(), w = d?.width ?? 0, g = d?.height ?? 0;
-    return O(e.x, e.y, w, g, f);
-  }, [e.x, e.y, d?.width, d?.height]), h = p(u);
-  i.useEffect(() => {
+  const u = c.useRef(null), { rect: d } = C(u, { box: "border-box" }), l = c.useMemo(() => {
+    const f = D(), g = d?.width ?? 0, w = d?.height ?? 0;
+    return O(e.x, e.y, g, w, f);
+  }, [e.x, e.y, d?.width, d?.height]), h = p(a);
+  c.useEffect(() => {
     h?.(l);
   }, [l]);
-  const y = p(o);
-  i.useEffect(() => {
-    const f = (w) => {
-      w.target instanceof Node && a.current && !a.current.contains(w.target) && y();
+  const y = p(t);
+  c.useEffect(() => {
+    const f = (g) => {
+      g.target instanceof Node && u.current && !u.current.contains(g.target) && y();
     };
     return document.addEventListener("pointerdown", f), () => document.removeEventListener("pointerdown", f);
   }, []);
-  const x = i.useMemo(
+  const v = c.useMemo(
     () => ({
-      ...P,
-      ...n,
+      ...k,
+      ...r,
       left: l.x,
       top: l.y
     }),
-    [n, l.x, l.y]
-  ), v = i.useMemo(() => r ? Object.entries(r).reduce((f, [w, g]) => (g == null || (f[`data-${w}`] = g), f), {}) : {}, [r]);
+    [r, l.x, l.y]
+  ), S = c.useMemo(() => s ? Object.entries(s).reduce((f, [g, w]) => (w == null || (f[`data-${g}`] = w), f), {}) : {}, [s]);
   return /* @__PURE__ */ m(
     "div",
     {
-      ref: a,
-      className: c,
-      style: x,
-      onKeyDown: s,
-      ...v,
-      children: t
+      ref: u,
+      className: o,
+      style: v,
+      onKeyDown: i,
+      ...S,
+      children: n
     }
   );
 }, I = ({
   visible: e,
-  onClose: o,
-  anchor: t,
-  children: c,
-  contentClassName: n,
-  contentStyle: r,
-  dataAttributes: s,
-  onKeyDown: u,
-  onPositionChange: a
+  onClose: t,
+  anchor: n,
+  children: o,
+  contentClassName: r,
+  contentStyle: s,
+  dataAttributes: i,
+  onKeyDown: a,
+  onPositionChange: u
 }) => {
-  const d = i.useRef(null);
-  D(() => {
+  const d = c.useRef(null);
+  x(() => {
     if (!d.current)
       return;
     const h = d.current;
     e ? h.showModal() : h.open && h.close();
   }, [e]);
-  const l = i.useCallback(
+  const l = c.useCallback(
     (h) => {
-      h.preventDefault(), o();
+      h.preventDefault(), t();
     },
-    [o]
+    [t]
   );
-  return /* @__PURE__ */ m("dialog", { ref: d, style: S, onCancel: l, children: /* @__PURE__ */ m(i.Activity, { mode: e ? "visible" : "hidden", children: /* @__PURE__ */ m(
+  return /* @__PURE__ */ m("dialog", { ref: d, style: P, onCancel: l, children: /* @__PURE__ */ m(c.Activity, { mode: e ? "visible" : "hidden", children: /* @__PURE__ */ m(
     L,
     {
-      anchor: t,
-      onClose: o,
-      contentClassName: n,
-      contentStyle: r,
-      dataAttributes: s,
-      onKeyDown: u,
-      onPositionChange: a,
-      children: c
+      anchor: n,
+      onClose: t,
+      contentClassName: r,
+      contentStyle: s,
+      dataAttributes: i,
+      onKeyDown: a,
+      onPositionChange: u,
+      children: o
     }
   ) }) });
-}, k = (e) => C ? /* @__PURE__ */ m(I, { ...e }) : null;
-k.displayName = "DialogOverlay";
+}, N = (e) => B ? /* @__PURE__ */ m(I, { ...e }) : null;
+N.displayName = "DialogOverlay";
 export {
-  k as DialogOverlay,
-  $ as Drawer,
-  A as DrawerLayers,
-  G as FloatingWindow,
-  K as PopupLayerPortal,
-  W as useDrawerState,
-  q as useFloatingState
+  N as DialogOverlay,
+  A as Drawer,
+  G as DrawerLayers,
+  K as FloatingWindow,
+  T as PopupLayerPortal,
+  W as SwipeSafeZone,
+  q as useDrawerState,
+  J as useFloatingState
 };
 //# sourceMappingURL=window.js.map

package/dist/window.js.map

@@ -1 +1 @@
-{"version":3,"file":"window.js","sources":["../src/utils/dialogUtils.ts","../src/hooks/useResizeObserver.tsx","../src/components/window/DialogOverlay.tsx"],"sourcesContent":["/**\n * @file Dialog positioning utilities\n */\n\nexport type ViewportInfo = {\n  width: number;\n  height: number;\n};\n\n/**\n * Get viewport dimensions\n */\nexport const getViewportInfo = (): ViewportInfo => {\n  if (typeof window === \"undefined\") {\n    return { width: 0, height: 0 };\n  }\n\n  return {\n    width: window.innerWidth,\n    height: window.innerHeight,\n  };\n};\n\n/**\n * Calculate context menu position to keep it within viewport\n */\nexport const calculateContextMenuPosition = (\n  anchorX: number,\n  anchorY: number,\n  menuWidth: number,\n  menuHeight: number,\n  viewport: ViewportInfo,\n): { x: number; y: number } => {\n  // Adjust horizontal position if menu would overflow\n  const x =\n    anchorX + menuWidth > viewport.width ? Math.max(0, viewport.width - menuWidth) : anchorX;\n\n  // Adjust vertical position if menu would overflow\n  const y =\n    anchorY + menuHeight > viewport.height ? Math.max(0, viewport.height - menuHeight) : anchorY;\n\n  return { x, y };\n};\n","/**\n * @file Shared useResizeObserver hook with cached observer instances.\n */\nimport * as React from \"react\";\n\ntype Unobserve = () => void;\ntype Callback = (entry: ResizeObserverEntry, observer: ResizeObserver) => void;\ntype SharedObserver = {\n  observe: (target: Element, callback: Callback) => Unobserve;\n};\nconst observerCache = new Map<string, SharedObserver>();\nconst getSharedObserver = (options: ResizeObserverOptions) => {\n  const { box = \"content-box\" } = options;\n  const observerKey = `resize-box:${box}`;\n  const cached = observerCache.get(observerKey);\n  if (cached) {\n    return cached;\n  }\n  const observer = new (class {\n    #callbackMap = new Map<Element, Callback>();\n    #resizeObserver = new ResizeObserver((entries, observer) => {\n      entries.forEach((entry) => {\n        const callback = this.#callbackMap.get(entry.target);\n        if (callback) {\n          callback(entry, observer);\n        }\n      });\n    });\n    observe(target: Element, callback: Callback) {\n      this.#callbackMap.set(target, callback);\n      this.#resizeObserver.observe(target, options);\n      return () => {\n        this.#callbackMap.delete(target);\n        this.#resizeObserver.unobserve(target);\n      };\n    }\n  })();\n  observerCache.set(observerKey, observer);\n\n  return observer;\n};\n/**\n * Observe size changes for a given element reference using shared resize observers.\n *\n * @param ref - Ref holding the element whose size to monitor.\n * @param options - Resize observer configuration.\n * @returns Latest resize entry and a derived DOMRect snapshot.\n */\nexport function useResizeObserver<T extends HTMLElement>(\n  ref: React.RefObject<T | null>,\n  { box }: ResizeObserverOptions,\n) {\n  const [entry, setEntry] = React.useState<ResizeObserverEntry | null>(null);\n  const target = ref.current;\n\n  React.useEffect(() => {\n    if (!target) {\n      return;\n    }\n\n    const observer = getSharedObserver({ box });\n    return observer.observe(target, (nextEntry) => {\n      setEntry(nextEntry);\n    });\n  }, [box, target]);\n\n  const rect = React.useMemo(() => {\n    if (!entry) {\n      return null;\n    }\n\n    if (entry.borderBoxSize?.length > 0) {\n      const size = entry.borderBoxSize[0];\n      return new DOMRect(0, 0, size.inlineSize, size.blockSize);\n    }\n\n    return entry.contentRect;\n  }, [entry]);\n\n  return { entry, rect };\n}\n","/**\n * @file Dialog-based overlay component with automatic positioning\n */\nimport * as React from \"react\";\nimport type { Position } from \"../../types\";\nimport { calculateContextMenuPosition, getViewportInfo } from \"../../utils/dialogUtils\";\nimport { ensureDialogPolyfill } from \"../../utils/polyfills/createDialogPolyfill\";\nimport { useEffectEvent } from \"../../hooks/useEffectEvent\";\nimport { useIsomorphicLayoutEffect } from \"../../hooks/useIsomorphicLayoutEffect\";\nimport { useResizeObserver } from \"../../hooks/useResizeObserver\";\nimport { DIALOG_OVERLAY_Z_INDEX } from \"../../constants/styles\";\n\nconst contextDialogStyle: React.CSSProperties = {\n  border: \"none\",\n  padding: 0,\n  background: \"transparent\",\n};\n\nconst contextContentStyle: React.CSSProperties = {\n  position: \"fixed\",\n  zIndex: DIALOG_OVERLAY_Z_INDEX,\n};\n\ntype DataAttributes = Record<string, string | number | boolean>;\n\nexport type DialogOverlayProps = {\n  anchor: Position;\n  visible: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n  contentClassName?: string;\n  contentStyle?: React.CSSProperties;\n  dataAttributes?: Record<string, string | number | boolean | null | undefined>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  onPositionChange?: (position: Position) => void;\n};\n\nconst isBrowser = typeof window !== \"undefined\" && typeof document !== \"undefined\";\n\nensureDialogPolyfill();\n\nconst DialogOverlayContent: React.FC<Omit<DialogOverlayProps, \"visible\">> = ({\n  anchor,\n  onClose,\n  children,\n  contentClassName,\n  contentStyle,\n  dataAttributes,\n  onKeyDown,\n  onPositionChange,\n}) => {\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const { rect } = useResizeObserver(contentRef, { box: \"border-box\" });\n\n  const computedPosition = React.useMemo(() => {\n    const viewport = getViewportInfo();\n    const width = rect?.width ?? 0;\n    const height = rect?.height ?? 0;\n    return calculateContextMenuPosition(anchor.x, anchor.y, width, height, viewport);\n  }, [anchor.x, anchor.y, rect?.width, rect?.height]);\n\n  const handlePositionChange = useEffectEvent(onPositionChange);\n\n  React.useEffect(() => {\n    handlePositionChange?.(computedPosition);\n  }, [computedPosition]);\n\n  const handleClose = useEffectEvent(onClose);\n\n  React.useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      if (!(event.target instanceof Node)) {\n        return;\n      }\n      if (contentRef.current && !contentRef.current.contains(event.target)) {\n        handleClose();\n      }\n    };\n\n    document.addEventListener(\"pointerdown\", handlePointerDown);\n    return () => document.removeEventListener(\"pointerdown\", handlePointerDown);\n  }, []);\n\n  const mergedStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      ...contextContentStyle,\n      ...contentStyle,\n      left: computedPosition.x,\n      top: computedPosition.y,\n    }),\n    [contentStyle, computedPosition.x, computedPosition.y],\n  );\n\n  const dataProps = React.useMemo<DataAttributes>(() => {\n    if (!dataAttributes) {\n      return {};\n    }\n    return Object.entries(dataAttributes).reduce<DataAttributes>((acc, [key, value]) => {\n      if (value === null || value === undefined) {\n        return acc;\n      }\n      acc[`data-${key}`] = value;\n      return acc;\n    }, {});\n  }, [dataAttributes]);\n\n  return (\n    <div\n      ref={contentRef}\n      className={contentClassName}\n      style={mergedStyle}\n      onKeyDown={onKeyDown}\n      {...dataProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst DialogOverlayImpl: React.FC<DialogOverlayProps> = ({\n  visible,\n  onClose,\n  anchor,\n  children,\n  contentClassName,\n  contentStyle,\n  dataAttributes,\n  onKeyDown,\n  onPositionChange,\n}) => {\n  const dialogRef = React.useRef<HTMLDialogElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!dialogRef.current) {\n      return;\n    }\n\n    const dialog = dialogRef.current;\n    if (visible) {\n      dialog.showModal();\n    } else if (dialog.open) {\n      dialog.close();\n    }\n  }, [visible]);\n\n  const handleCancel = React.useCallback(\n    (event: React.SyntheticEvent) => {\n      event.preventDefault();\n      onClose();\n    },\n    [onClose],\n  );\n\n  return (\n    <dialog ref={dialogRef} style={contextDialogStyle} onCancel={handleCancel}>\n      <React.Activity mode={visible ? \"visible\" : \"hidden\"}>\n        <DialogOverlayContent\n          anchor={anchor}\n          onClose={onClose}\n          contentClassName={contentClassName}\n          contentStyle={contentStyle}\n          dataAttributes={dataAttributes}\n          onKeyDown={onKeyDown}\n          onPositionChange={onPositionChange}\n        >\n          {children}\n        </DialogOverlayContent>\n      </React.Activity>\n    </dialog>\n  );\n};\n\nexport const DialogOverlay: React.FC<DialogOverlayProps> = (props) => {\n  if (!isBrowser) {\n    return null;\n  }\n  return <DialogOverlayImpl {...props} />;\n};\n\nDialogOverlay.displayName = \"DialogOverlay\";\n"],"names":["getViewportInfo","calculateContextMenuPosition","anchorX","anchorY","menuWidth","menuHeight","viewport","x","y","observerCache","getSharedObserver","options","box","observerKey","cached","observer","#callbackMap","#resizeObserver","entries","entry","callback","target","useResizeObserver","ref","setEntry","React","nextEntry","rect","size","contextDialogStyle","contextContentStyle","DIALOG_OVERLAY_Z_INDEX","isBrowser","DialogOverlayContent","anchor","onClose","children","contentClassName","contentStyle","dataAttributes","onKeyDown","onPositionChange","contentRef","computedPosition","width","height","handlePositionChange","useEffectEvent","handleClose","handlePointerDown","event","mergedStyle","dataProps","acc","key","value","jsx","DialogOverlayImpl","visible","dialogRef","useIsomorphicLayoutEffect","dialog","handleCancel","DialogOverlay","props"],"mappings":"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"}
+{"version":3,"file":"window.js","sources":["../src/utils/dialogUtils.ts","../src/hooks/useResizeObserver.tsx","../src/components/window/DialogOverlay.tsx"],"sourcesContent":["/**\n * @file Dialog positioning utilities\n */\n\nexport type ViewportInfo = {\n  width: number;\n  height: number;\n};\n\n/**\n * Get viewport dimensions\n */\nexport const getViewportInfo = (): ViewportInfo => {\n  if (typeof window === \"undefined\") {\n    return { width: 0, height: 0 };\n  }\n\n  return {\n    width: window.innerWidth,\n    height: window.innerHeight,\n  };\n};\n\n/**\n * Calculate context menu position to keep it within viewport\n */\nexport const calculateContextMenuPosition = (\n  anchorX: number,\n  anchorY: number,\n  menuWidth: number,\n  menuHeight: number,\n  viewport: ViewportInfo,\n): { x: number; y: number } => {\n  // Adjust horizontal position if menu would overflow\n  const x =\n    anchorX + menuWidth > viewport.width ? Math.max(0, viewport.width - menuWidth) : anchorX;\n\n  // Adjust vertical position if menu would overflow\n  const y =\n    anchorY + menuHeight > viewport.height ? Math.max(0, viewport.height - menuHeight) : anchorY;\n\n  return { x, y };\n};\n","/**\n * @file Shared useResizeObserver hook with cached observer instances.\n *\n * Provides element size observation with shared observers for memory efficiency.\n * Size becomes available after the first useLayoutEffect cycle completes.\n *\n * Note: Due to React's effect execution order (children before parents),\n * child components may see containerSize=0 on their first effect run.\n * This is a React constraint, not a bug. Consumers should check for\n * valid size before using it for calculations like animation positions.\n */\nimport * as React from \"react\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\n\n/**\n * Shared ResizeObserver that can observe multiple elements.\n */\ntype SharedObserver = {\n  observe: (target: Element, callback: (entry: ResizeObserverEntry) => void) => () => void;\n};\n\n/** Cache of shared observers per box option */\nconst observerCache = new Map<string, SharedObserver>();\n\n/**\n * Get or create a shared ResizeObserver for the given box option.\n */\nconst getSharedObserver = (box: ResizeObserverBoxOptions): SharedObserver => {\n  const observerKey = `resize-box:${box}`;\n  const cached = observerCache.get(observerKey);\n  if (cached) {\n    return cached;\n  }\n\n  const callbacks = new Map<Element, (entry: ResizeObserverEntry) => void>();\n\n  const resizeObserver = new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      const callback = callbacks.get(entry.target);\n      if (callback) {\n        callback(entry);\n      }\n    }\n  });\n\n  const sharedObserver: SharedObserver = {\n    observe(target, callback) {\n      callbacks.set(target, callback);\n      resizeObserver.observe(target, { box });\n\n      return () => {\n        callbacks.delete(target);\n        resizeObserver.unobserve(target);\n      };\n    },\n  };\n\n  observerCache.set(observerKey, sharedObserver);\n  return sharedObserver;\n};\n\n/**\n * Create a ResizeObserverEntry from getBoundingClientRect.\n */\nconst measureElement = (target: Element): ResizeObserverEntry => {\n  const rect = target.getBoundingClientRect();\n  return {\n    target,\n    contentRect: rect,\n    borderBoxSize: [{ inlineSize: rect.width, blockSize: rect.height }],\n    contentBoxSize: [{ inlineSize: rect.width, blockSize: rect.height }],\n    devicePixelContentBoxSize: [],\n  };\n};\n\n/**\n * Extract DOMRect from ResizeObserverEntry.\n */\nconst entryToRect = (entry: ResizeObserverEntry): DOMRect => {\n  if (entry.borderBoxSize?.length > 0) {\n    const size = entry.borderBoxSize[0];\n    return new DOMRect(0, 0, size.inlineSize, size.blockSize);\n  }\n  return entry.contentRect;\n};\n\n/**\n * Clear observer cache. Exported for testing purposes.\n */\nexport function clearObserverCache(): void {\n  observerCache.clear();\n}\n\n/**\n * Observe size changes for a given element reference using shared resize observers.\n *\n * @param ref - Ref holding the element whose size to monitor.\n * @param options - Resize observer configuration.\n * @returns Latest resize entry and a derived DOMRect snapshot.\n *\n * @remarks\n * The `rect` will be `null` on the first render. After the initial\n * useLayoutEffect runs and triggers a re-render, `rect` will contain\n * the measured size.\n *\n * Due to React's effect execution order, child components' effects run\n * before parent effects. If you pass `rect.width` to a child as a prop,\n * the child's first effect will see `0` (or whatever default you use).\n * This is expected React behavior.\n *\n * @example\n * ```tsx\n * const containerRef = useRef<HTMLDivElement>(null);\n * const { rect } = useResizeObserver(containerRef, { box: \"border-box\" });\n * const width = rect?.width ?? 0;\n *\n * // Check if size is ready before using for calculations\n * const isReady = rect !== null;\n * ```\n */\nexport function useResizeObserver<T extends HTMLElement>(\n  ref: React.RefObject<T | null>,\n  { box = \"content-box\" }: ResizeObserverOptions,\n) {\n  const [entry, setEntry] = React.useState<ResizeObserverEntry | null>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    const target = ref.current;\n    if (!target) {\n      setEntry(null);\n      return;\n    }\n\n    // Measure immediately\n    setEntry(measureElement(target));\n\n    // Set up ResizeObserver for subsequent updates\n    const observer = getSharedObserver(box);\n    return observer.observe(target, setEntry);\n  }, [ref, box]);\n\n  const rect = React.useMemo(() => {\n    if (!entry) {\n      return null;\n    }\n    return entryToRect(entry);\n  }, [entry]);\n\n  return { entry, rect };\n}\n","/**\n * @file Dialog-based overlay component with automatic positioning\n */\nimport * as React from \"react\";\nimport type { Position } from \"../../types\";\nimport { calculateContextMenuPosition, getViewportInfo } from \"../../utils/dialogUtils\";\nimport { ensureDialogPolyfill } from \"../../utils/polyfills/createDialogPolyfill\";\nimport { useEffectEvent } from \"../../hooks/useEffectEvent\";\nimport { useIsomorphicLayoutEffect } from \"../../hooks/useIsomorphicLayoutEffect\";\nimport { useResizeObserver } from \"../../hooks/useResizeObserver\";\nimport { DIALOG_OVERLAY_Z_INDEX } from \"../../constants/styles\";\n\nconst contextDialogStyle: React.CSSProperties = {\n  border: \"none\",\n  padding: 0,\n  background: \"transparent\",\n};\n\nconst contextContentStyle: React.CSSProperties = {\n  position: \"fixed\",\n  zIndex: DIALOG_OVERLAY_Z_INDEX,\n};\n\ntype DataAttributes = Record<string, string | number | boolean>;\n\nexport type DialogOverlayProps = {\n  anchor: Position;\n  visible: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n  contentClassName?: string;\n  contentStyle?: React.CSSProperties;\n  dataAttributes?: Record<string, string | number | boolean | null | undefined>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  onPositionChange?: (position: Position) => void;\n};\n\nconst isBrowser = typeof window !== \"undefined\" && typeof document !== \"undefined\";\n\nensureDialogPolyfill();\n\nconst DialogOverlayContent: React.FC<Omit<DialogOverlayProps, \"visible\">> = ({\n  anchor,\n  onClose,\n  children,\n  contentClassName,\n  contentStyle,\n  dataAttributes,\n  onKeyDown,\n  onPositionChange,\n}) => {\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const { rect } = useResizeObserver(contentRef, { box: \"border-box\" });\n\n  const computedPosition = React.useMemo(() => {\n    const viewport = getViewportInfo();\n    const width = rect?.width ?? 0;\n    const height = rect?.height ?? 0;\n    return calculateContextMenuPosition(anchor.x, anchor.y, width, height, viewport);\n  }, [anchor.x, anchor.y, rect?.width, rect?.height]);\n\n  const handlePositionChange = useEffectEvent(onPositionChange);\n\n  React.useEffect(() => {\n    handlePositionChange?.(computedPosition);\n  }, [computedPosition]);\n\n  const handleClose = useEffectEvent(onClose);\n\n  React.useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      if (!(event.target instanceof Node)) {\n        return;\n      }\n      if (contentRef.current && !contentRef.current.contains(event.target)) {\n        handleClose();\n      }\n    };\n\n    document.addEventListener(\"pointerdown\", handlePointerDown);\n    return () => document.removeEventListener(\"pointerdown\", handlePointerDown);\n  }, []);\n\n  const mergedStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      ...contextContentStyle,\n      ...contentStyle,\n      left: computedPosition.x,\n      top: computedPosition.y,\n    }),\n    [contentStyle, computedPosition.x, computedPosition.y],\n  );\n\n  const dataProps = React.useMemo<DataAttributes>(() => {\n    if (!dataAttributes) {\n      return {};\n    }\n    return Object.entries(dataAttributes).reduce<DataAttributes>((acc, [key, value]) => {\n      if (value === null || value === undefined) {\n        return acc;\n      }\n      acc[`data-${key}`] = value;\n      return acc;\n    }, {});\n  }, [dataAttributes]);\n\n  return (\n    <div\n      ref={contentRef}\n      className={contentClassName}\n      style={mergedStyle}\n      onKeyDown={onKeyDown}\n      {...dataProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst DialogOverlayImpl: React.FC<DialogOverlayProps> = ({\n  visible,\n  onClose,\n  anchor,\n  children,\n  contentClassName,\n  contentStyle,\n  dataAttributes,\n  onKeyDown,\n  onPositionChange,\n}) => {\n  const dialogRef = React.useRef<HTMLDialogElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!dialogRef.current) {\n      return;\n    }\n\n    const dialog = dialogRef.current;\n    if (visible) {\n      dialog.showModal();\n    } else if (dialog.open) {\n      dialog.close();\n    }\n  }, [visible]);\n\n  const handleCancel = React.useCallback(\n    (event: React.SyntheticEvent) => {\n      event.preventDefault();\n      onClose();\n    },\n    [onClose],\n  );\n\n  return (\n    <dialog ref={dialogRef} style={contextDialogStyle} onCancel={handleCancel}>\n      <React.Activity mode={visible ? \"visible\" : \"hidden\"}>\n        <DialogOverlayContent\n          anchor={anchor}\n          onClose={onClose}\n          contentClassName={contentClassName}\n          contentStyle={contentStyle}\n          dataAttributes={dataAttributes}\n          onKeyDown={onKeyDown}\n          onPositionChange={onPositionChange}\n        >\n          {children}\n        </DialogOverlayContent>\n      </React.Activity>\n    </dialog>\n  );\n};\n\nexport const DialogOverlay: React.FC<DialogOverlayProps> = (props) => {\n  if (!isBrowser) {\n    return null;\n  }\n  return <DialogOverlayImpl {...props} />;\n};\n\nDialogOverlay.displayName = \"DialogOverlay\";\n"],"names":["getViewportInfo","calculateContextMenuPosition","anchorX","anchorY","menuWidth","menuHeight","viewport","x","y","observerCache","getSharedObserver","box","observerKey","cached","callbacks","resizeObserver","entries","entry","callback","sharedObserver","target","measureElement","rect","entryToRect","size","useResizeObserver","ref","setEntry","React","useIsomorphicLayoutEffect","contextDialogStyle","contextContentStyle","DIALOG_OVERLAY_Z_INDEX","isBrowser","DialogOverlayContent","anchor","onClose","children","contentClassName","contentStyle","dataAttributes","onKeyDown","onPositionChange","contentRef","computedPosition","width","height","handlePositionChange","useEffectEvent","handleClose","handlePointerDown","event","mergedStyle","dataProps","acc","key","value","jsx","DialogOverlayImpl","visible","dialogRef","dialog","handleCancel","DialogOverlay","props"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-panel-layout",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "Unlicense",
   "type": "module",
   "main": "dist/index.cjs",
@@ -62,6 +62,11 @@
       "import": "./dist/panels.js",
       "require": "./dist/panels.cjs"
     },
+    "./dialog": {
+      "types": "./dist/dialog/index.d.ts",
+      "import": "./dist/dialog.js",
+      "require": "./dist/dialog.cjs"
+    },
     "./package.json": "./package.json"
   },
   "files": [

package/src/components/gesture/SwipeSafeZone.tsx

@@ -0,0 +1,70 @@
+/**
+ * @file SwipeSafeZone component
+ *
+ * A wrapper component that marks an area as exempt from swipe gesture detection.
+ * Content inside this zone will not trigger swipe-to-close or other swipe gestures.
+ *
+ * Use this for:
+ * - Scrollable content areas
+ * - Input fields and text areas
+ * - Interactive elements that need drag/swipe for their own purposes
+ */
+import * as React from "react";
+
+/**
+ * Data attribute used to identify swipe-safe zones.
+ * Swipe gesture handlers should check for this attribute on target elements.
+ */
+export const SWIPE_SAFE_ZONE_ATTR = "data-swipe-safe-zone";
+
+export type SwipeSafeZoneProps = {
+  /** Content to render inside the safe zone */
+  children: React.ReactNode;
+  /** Additional CSS class name */
+  className?: string;
+  /** Additional inline styles */
+  style?: React.CSSProperties;
+};
+
+/**
+ * SwipeSafeZone marks an area where swipe gestures should not be triggered.
+ *
+ * @example
+ * ```tsx
+ * <SwipeSafeZone>
+ *   <ScrollableList items={items} />
+ * </SwipeSafeZone>
+ * ```
+ */
+export const SwipeSafeZone: React.FC<SwipeSafeZoneProps> = ({
+  children,
+  className,
+  style,
+}) => {
+  return (
+    <div
+      className={className}
+      style={style}
+      data-swipe-safe-zone="true"
+    >
+      {children}
+    </div>
+  );
+};
+
+/**
+ * Check if an element is inside a SwipeSafeZone.
+ */
+export function isInSwipeSafeZone(element: HTMLElement, container: HTMLElement): boolean {
+  // eslint-disable-next-line no-restricted-syntax -- loop variable requires let
+  let current: HTMLElement | null = element;
+
+  while (current && current !== container) {
+    if (current.hasAttribute(SWIPE_SAFE_ZONE_ATTR)) {
+      return true;
+    }
+    current = current.parentElement;
+  }
+
+  return false;
+}

package/src/components/grid/GridLayout.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import { useIntersectionObserver } from "../../hooks/useIntersectionObserver";
 import type { LayerDefinition, PanelLayoutConfig } from "../../types";
 import { DrawerLayers } from "../window/DrawerLayers";
+import { DrawerRevealProvider, useDrawerReveal, isRevealMode } from "../window/DrawerRevealContext";
 import { GridLayerList } from "./GridLayerList";
 import { GridTrackResizeHandle } from "./GridTrackResizeHandle";
 import { PanelSystemProvider, usePanelSystem } from "../../PanelSystemContext";
@@ -18,6 +19,7 @@ const gridLayoutBaseStyle: React.CSSProperties = {
   width: "100%",
   height: "100%",
   overflow: "hidden",
+  position: "relative",
 };
 
 const gridLayoutDraggingStyle: React.CSSProperties = {
@@ -55,7 +57,9 @@ export const GridLayout: React.FC<GridLayoutProps> = ({ config, layers, style: s
 
   return (
     <PanelSystemProvider config={config} layers={layers} style={styleProp}>
-      <GridLayoutInner gridRef={gridRef} isIntersecting={isIntersecting} isRoot={root} />
+      <DrawerRevealProvider>
+        <GridLayoutInner gridRef={gridRef} isIntersecting={isIntersecting} isRoot={root} />
+      </DrawerRevealProvider>
     </PanelSystemProvider>
   );
 };
@@ -74,6 +78,15 @@ const GridLayoutInner: React.FC<{
     isRootLevel: isRoot,
   });
 
+  // Register gridRef in reveal context for inline mode drawers
+  const { setGridRef } = useDrawerReveal();
+  React.useLayoutEffect(() => {
+    setGridRef(gridRef);
+    return () => {
+      setGridRef(null);
+    };
+  }, [gridRef, setGridRef]);
+
   const isDraggingOrResizing = draggingLayerId ? true : Boolean(resizingLayerId);
   const combinedStyle = React.useMemo(() => {
     const baseStyle = resolveGridBaseStyle(isRoot);
@@ -84,45 +97,104 @@ const GridLayoutInner: React.FC<{
     };
   }, [gridStyle, isDraggingOrResizing, isRoot]);
 
+  // Split drawer layers for proper rendering context:
+  // - Overlay inline drawers: inside grid container (for proper absolute positioning)
+  // - Reveal inline drawers: grid sibling in wrapper (drawer stays fixed while grid transforms)
+  // - Non-inline drawers: outside wrapper (viewport-relative fixed positioning)
+  const overlayInlineDrawerLayers = React.useMemo(
+    () => visibleLayers.filter((layer) => {
+      if (!layer.drawer?.inline) {
+        return false;
+      }
+      return !isRevealMode(layer.drawer.animationMode);
+    }),
+    [visibleLayers],
+  );
+  const revealInlineDrawerLayers = React.useMemo(
+    () => visibleLayers.filter((layer) => {
+      if (!layer.drawer?.inline) {
+        return false;
+      }
+      return isRevealMode(layer.drawer.animationMode);
+    }),
+    [visibleLayers],
+  );
+  const nonInlineDrawerLayers = React.useMemo(
+    () => visibleLayers.filter((layer) => {
+      if (!layer.drawer) {
+        return false;
+      }
+      return !layer.drawer.inline;
+    }),
+    [visibleLayers],
+  );
+
+  const hasRevealInlineDrawers = revealInlineDrawerLayers.length > 0;
+
+  // Grid container element
+  const gridElement = (
+    <div
+      ref={gridRef}
+      style={combinedStyle}
+      data-dragging={Boolean(draggingLayerId)}
+      data-resizing={Boolean(resizingLayerId)}
+      data-visible={isIntersecting}
+    >
+      <GridLayoutProvider value={providerValue}>
+        <GridLayerList layers={regularLayers} />
+      </GridLayoutProvider>
+
+      {columnHandles.map(({ trackIndex, align, span }) => (
+        <GridTrackResizeHandle
+          key={`col-${trackIndex}:${align}`}
+          direction="col"
+          trackIndex={trackIndex}
+          align={align}
+          gap={gapSizes.columnGap}
+          span={span}
+          onResize={handleResize}
+        />
+      ))}
+
+      {rowHandles.map(({ trackIndex, align, span }) => (
+        <GridTrackResizeHandle
+          key={`row-${trackIndex}:${align}`}
+          direction="row"
+          trackIndex={trackIndex}
+          align={align}
+          gap={gapSizes.rowGap}
+          span={span}
+          onResize={handleResize}
+        />
+      ))}
+
+      {/* Inline overlay drawers rendered inside grid container for proper absolute positioning */}
+      <DrawerLayers layers={overlayInlineDrawerLayers} />
+    </div>
+  );
+
+  // For reveal inline drawers, wrap grid and drawer in a container
+  // so drawer can be positioned relative to the container (not viewport)
+  // while grid transforms without affecting drawer position
+  if (hasRevealInlineDrawers) {
+    return (
+      <>
+        <div style={{ position: "relative", width: "100%", height: "100%" }}>
+          {gridElement}
+          {/* Reveal inline drawers as grid siblings - stay fixed while grid transforms */}
+          <DrawerLayers layers={revealInlineDrawerLayers} />
+        </div>
+        {/* Non-inline drawers outside wrapper for viewport-relative positioning */}
+        <DrawerLayers layers={nonInlineDrawerLayers} />
+      </>
+    );
+  }
+
   return (
     <>
-      <div
-        ref={gridRef}
-        style={combinedStyle}
-        data-dragging={Boolean(draggingLayerId)}
-        data-resizing={Boolean(resizingLayerId)}
-        data-visible={isIntersecting}
-      >
-        <GridLayoutProvider value={providerValue}>
-          <GridLayerList layers={regularLayers} />
-        </GridLayoutProvider>
-
-        {columnHandles.map(({ trackIndex, align, span }) => (
-          <GridTrackResizeHandle
-            key={`col-${trackIndex}:${align}`}
-            direction="col"
-            trackIndex={trackIndex}
-            align={align}
-            gap={gapSizes.columnGap}
-            span={span}
-            onResize={handleResize}
-          />
-        ))}
-
-        {rowHandles.map(({ trackIndex, align, span }) => (
-          <GridTrackResizeHandle
-            key={`row-${trackIndex}:${align}`}
-            direction="row"
-            trackIndex={trackIndex}
-            align={align}
-            gap={gapSizes.rowGap}
-            span={span}
-            onResize={handleResize}
-          />
-        ))}
-      </div>
-
-      <DrawerLayers layers={visibleLayers} />
+      {gridElement}
+      {/* Non-inline drawers for viewport-relative positioning */}
+      <DrawerLayers layers={nonInlineDrawerLayers} />
     </>
   );
 };