@develemit/web-hooks 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## 0.1.0
+
+- `drawer-swipe`: `useDrawerSwipe` and the pure `resolveSwipeIntent`. Swipe right from mid-screen opens a mobile nav drawer, left closes it. The left 60px band is left to the browser's back gesture.
+- `focus-trap`: `useFocusTrap` and the pure `focusableWithin` / `nextFocusTarget`. Reconciles the emit-vision, emit-social, develemit-commerce and centraflow copies: initial focus, Tab wrapping, `returnFocusRef` for Safari, opener captured during render, hidden/disabled/inert items skipped.
+- `escape`: `useEscape`. The callback is read through a ref, so changing its identity doesn't re-bind the listener.
+- `clipboard`: `copyText` and `useCopyFeedback`. Copy works on plain-http PWAs where `navigator.clipboard` is undefined (falls back to `execCommand`) and returns a typed `CopyResult` instead of rejecting. The hook tracks `idle | copied | failed` and clears its timer on unmount and on each new copy.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Emit Dutcher
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,84 @@
-# Temporary Holding Version
+# @develemit/web-hooks
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Shared React behavior hooks for develemit web apps: the interaction plumbing
+that every app ends up hand-copying from the last one.
+
+| Subpath | What it does |
+|---|---|
+| `@develemit/web-hooks/drawer-swipe` | Swipe right from mid-screen to open a mobile nav drawer, left to close it |
+| `@develemit/web-hooks/focus-trap` | Keep Tab focus inside an open dialog or drawer, restore it on close |
+| `@develemit/web-hooks/escape` | Run a callback when Escape is pressed |
+| `@develemit/web-hooks/clipboard` | Copy text, with the fallback that works on plain-http PWAs |
+
+Behavior only. No styling and no components: each app keeps its own look.
+
+## Install
+
+```sh
+pnpm add @develemit/web-hooks
+```
+
+## Usage
+
+```tsx
+import { useDrawerSwipe } from '@develemit/web-hooks/drawer-swipe';
+
+useDrawerSwipe({
+  drawerOpen,
+  onOpen: () => setDrawerOpen(true),
+  onClose: () => setDrawerOpen(false),
+  enabled: true, // optional, default true
+  maxViewportWidth: 768, // optional; no-op at or above this width
+});
+```
+
+The left 60px band is left to the browser's back gesture, and swipes that start
+inside a horizontally scrolling container stay with that container.
+
+### Drawer with focus trap and Escape
+
+```tsx
+import { useRef } from 'react';
+import { useFocusTrap } from '@develemit/web-hooks/focus-trap';
+import { useEscape } from '@develemit/web-hooks/escape';
+
+const drawerRef = useRef<HTMLElement>(null);
+const triggerRef = useRef<HTMLButtonElement>(null);
+
+useFocusTrap(drawerRef, {
+  active: open,
+  initialFocusRef, // optional; default is the first focusable item
+  returnFocusRef: triggerRef, // optional; wins over the element focused at open
+  restoreFocus: true, // optional, default true
+});
+useEscape(() => setOpen(false), open);
+```
+
+Pass `returnFocusRef` when the opener is a button: Safari doesn't focus a
+button on tap, so the element focused at open can be `<body>`. If nothing
+inside is focusable the container itself gets focus (`tabindex="-1"` is added).
+`useEscape` reads the callback through a ref, so it doesn't need `useCallback`.
+When traps stack, only the most recently activated one handles Tab.
+
+### Copy to clipboard
+
+```tsx
+import { useCopyFeedback } from '@develemit/web-hooks/clipboard';
+
+const { copy, status } = useCopyFeedback({ resetMs: 1500 });
+<button onClick={() => copy(token)}>{status === 'copied' ? 'Copied!' : 'Copy'}</button>;
+```
+
+`copyText(text)` is the plain function underneath and resolves to
+`{ ok: true }` or `{ ok: false, reason: 'unavailable' | 'denied' }`; it never
+rejects. On plain-http origins (a PWA over a Tailscale address)
+`navigator.clipboard` doesn't exist, so it falls back to `execCommand('copy')`.
+
+### Migrating from the per-app copies
+
+| App | Old | New |
+|---|---|---|
+| emit-vision | `useFocusTrap(ref, { active, initialFocusRef, restoreFocus })` | Same signature. |
+| emit-social | `useFocusTrap(ref, { active, returnFocusRef })` plus `useEscape(fn, active)` | Same signatures. |
+| develemit-commerce | `const onKeyDown = useFocusTrap(ref, active, onEscape)` | `useFocusTrap(ref, { active })` and `useEscape(onEscape, active)`. Drop the returned `onKeyDown` handler. |
+| centraflow | `const ref = useFocusTrap(active)` | `const ref = useRef<HTMLElement>(null)`, then `useFocusTrap(ref, { active })`. |

package/dist/clipboard.cjs

@@ -0,0 +1,89 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/clipboard/index.ts
+var clipboard_exports = {};
+__export(clipboard_exports, {
+  copyText: () => copyText,
+  useCopyFeedback: () => useCopyFeedback
+});
+module.exports = __toCommonJS(clipboard_exports);
+
+// src/clipboard/copy-text.ts
+async function copyText(text) {
+  const hasClipboardApi = typeof navigator !== "undefined" && !!navigator.clipboard?.writeText && typeof window !== "undefined" && window.isSecureContext;
+  if (hasClipboardApi) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return { ok: true };
+    } catch {
+    }
+  }
+  if (execCommandCopy(text)) return { ok: true };
+  return { ok: false, reason: hasClipboardApi ? "denied" : "unavailable" };
+}
+function execCommandCopy(text) {
+  if (typeof document === "undefined") return false;
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.readOnly = true;
+  textarea.style.position = "fixed";
+  textarea.style.top = "-1000px";
+  textarea.style.left = "-1000px";
+  textarea.style.fontSize = "16px";
+  document.body.appendChild(textarea);
+  try {
+    textarea.select();
+    textarea.setSelectionRange(0, text.length);
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+// src/clipboard/use-copy-feedback.ts
+var import_react = require("react");
+function useCopyFeedback({ resetMs = 1500 } = {}) {
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const timerRef = (0, import_react.useRef)(void 0);
+  const clearTimer = (0, import_react.useCallback)(() => {
+    if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    timerRef.current = void 0;
+  }, []);
+  (0, import_react.useEffect)(() => clearTimer, [clearTimer]);
+  const copy = (0, import_react.useCallback)(
+    async (text) => {
+      const result = await copyText(text);
+      clearTimer();
+      setStatus(result.ok ? "copied" : "failed");
+      timerRef.current = setTimeout(() => setStatus("idle"), resetMs);
+      return result;
+    },
+    [clearTimer, resetMs]
+  );
+  return { copy, status };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  copyText,
+  useCopyFeedback
+});

package/dist/clipboard.d.cts

@@ -0,0 +1,17 @@
+type CopyResult = {
+    ok: true;
+} | {
+    ok: false;
+    reason: 'unavailable' | 'denied';
+};
+declare function copyText(text: string): Promise<CopyResult>;
+
+type CopyStatus = 'idle' | 'copied' | 'failed';
+declare function useCopyFeedback({ resetMs }?: {
+    resetMs?: number;
+}): {
+    copy: (text: string) => Promise<CopyResult>;
+    status: CopyStatus;
+};
+
+export { type CopyResult, type CopyStatus, copyText, useCopyFeedback };

package/dist/clipboard.d.ts

@@ -0,0 +1,17 @@
+type CopyResult = {
+    ok: true;
+} | {
+    ok: false;
+    reason: 'unavailable' | 'denied';
+};
+declare function copyText(text: string): Promise<CopyResult>;
+
+type CopyStatus = 'idle' | 'copied' | 'failed';
+declare function useCopyFeedback({ resetMs }?: {
+    resetMs?: number;
+}): {
+    copy: (text: string) => Promise<CopyResult>;
+    status: CopyStatus;
+};
+
+export { type CopyResult, type CopyStatus, copyText, useCopyFeedback };

package/dist/clipboard.js

@@ -0,0 +1,62 @@
+"use client";
+
+// src/clipboard/copy-text.ts
+async function copyText(text) {
+  const hasClipboardApi = typeof navigator !== "undefined" && !!navigator.clipboard?.writeText && typeof window !== "undefined" && window.isSecureContext;
+  if (hasClipboardApi) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return { ok: true };
+    } catch {
+    }
+  }
+  if (execCommandCopy(text)) return { ok: true };
+  return { ok: false, reason: hasClipboardApi ? "denied" : "unavailable" };
+}
+function execCommandCopy(text) {
+  if (typeof document === "undefined") return false;
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.readOnly = true;
+  textarea.style.position = "fixed";
+  textarea.style.top = "-1000px";
+  textarea.style.left = "-1000px";
+  textarea.style.fontSize = "16px";
+  document.body.appendChild(textarea);
+  try {
+    textarea.select();
+    textarea.setSelectionRange(0, text.length);
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+// src/clipboard/use-copy-feedback.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useCopyFeedback({ resetMs = 1500 } = {}) {
+  const [status, setStatus] = useState("idle");
+  const timerRef = useRef(void 0);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    timerRef.current = void 0;
+  }, []);
+  useEffect(() => clearTimer, [clearTimer]);
+  const copy = useCallback(
+    async (text) => {
+      const result = await copyText(text);
+      clearTimer();
+      setStatus(result.ok ? "copied" : "failed");
+      timerRef.current = setTimeout(() => setStatus("idle"), resetMs);
+      return result;
+    },
+    [clearTimer, resetMs]
+  );
+  return { copy, status };
+}
+export {
+  copyText,
+  useCopyFeedback
+};

package/dist/drawer-swipe.cjs

@@ -0,0 +1,149 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/drawer-swipe/index.ts
+var drawer_swipe_exports = {};
+__export(drawer_swipe_exports, {
+  BACK_ZONE_PX: () => BACK_ZONE_PX,
+  CLOSE_DISTANCE_PX: () => CLOSE_DISTANCE_PX,
+  FORWARD_ZONE_PX: () => FORWARD_ZONE_PX,
+  MAX_SWIPE_DURATION_MS: () => MAX_SWIPE_DURATION_MS,
+  OPEN_DISTANCE_PX: () => OPEN_DISTANCE_PX,
+  VERTICAL_CANCEL_PX: () => VERTICAL_CANCEL_PX,
+  isInOpenZone: () => isInOpenZone,
+  isInsideHorizontalScroller: () => isInsideHorizontalScroller,
+  resolveSwipeIntent: () => resolveSwipeIntent,
+  useDrawerSwipe: () => useDrawerSwipe
+});
+module.exports = __toCommonJS(drawer_swipe_exports);
+
+// src/drawer-swipe/swipe-intent.ts
+var BACK_ZONE_PX = 60;
+var FORWARD_ZONE_PX = 30;
+var OPEN_DISTANCE_PX = 80;
+var CLOSE_DISTANCE_PX = 60;
+var VERTICAL_CANCEL_PX = 40;
+var MAX_SWIPE_DURATION_MS = 450;
+var HORIZONTAL_DOMINANCE = 1.5;
+function isInOpenZone(x, viewportWidth) {
+  return x > BACK_ZONE_PX && x < viewportWidth - FORWARD_ZONE_PX;
+}
+function resolveSwipeIntent(start, end, drawerOpen, viewportWidth) {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  if (end.time - start.time > MAX_SWIPE_DURATION_MS) return null;
+  if (Math.abs(dx) < Math.abs(dy) * HORIZONTAL_DOMINANCE) return null;
+  if (drawerOpen) {
+    return dx <= -CLOSE_DISTANCE_PX ? "close" : null;
+  }
+  if (dx < OPEN_DISTANCE_PX) return null;
+  return isInOpenZone(start.x, viewportWidth) ? "open" : null;
+}
+function isInsideHorizontalScroller(target) {
+  let node = target instanceof Element ? target : null;
+  while (node && node !== document.body) {
+    const { overflowX } = window.getComputedStyle(node);
+    if ((overflowX === "auto" || overflowX === "scroll") && node.scrollWidth > node.clientWidth) {
+      return true;
+    }
+    node = node.parentElement;
+  }
+  return false;
+}
+
+// src/drawer-swipe/use-drawer-swipe.ts
+var import_react = require("react");
+function isWideViewport(maxViewportWidth) {
+  return window.matchMedia(`(min-width: ${maxViewportWidth}px)`).matches;
+}
+function useDrawerSwipe({
+  drawerOpen,
+  onOpen,
+  onClose,
+  enabled = true,
+  maxViewportWidth = 768
+}) {
+  const start = (0, import_react.useRef)(null);
+  const handlers = (0, import_react.useRef)({ drawerOpen, onOpen, onClose, maxViewportWidth });
+  handlers.current = { drawerOpen, onOpen, onClose, maxViewportWidth };
+  (0, import_react.useEffect)(() => {
+    if (!enabled) return;
+    function handleStart(event) {
+      start.current = null;
+      if (event.touches.length !== 1) return;
+      if (isWideViewport(handlers.current.maxViewportWidth)) return;
+      if (!handlers.current.drawerOpen && isInsideHorizontalScroller(event.target)) {
+        return;
+      }
+      const touch = event.touches[0];
+      if (!touch) return;
+      start.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
+    }
+    function handleMove(event) {
+      const origin = start.current;
+      const touch = event.touches[0];
+      if (!origin || !touch) return;
+      if (Math.abs(touch.clientY - origin.y) > VERTICAL_CANCEL_PX) {
+        start.current = null;
+      }
+    }
+    function handleEnd(event) {
+      const origin = start.current;
+      start.current = null;
+      const touch = event.changedTouches[0];
+      if (!origin || !touch) return;
+      const { drawerOpen: drawerOpen2, onOpen: onOpen2, onClose: onClose2 } = handlers.current;
+      const intent = resolveSwipeIntent(
+        origin,
+        { x: touch.clientX, y: touch.clientY, time: Date.now() },
+        drawerOpen2,
+        window.innerWidth
+      );
+      if (intent === "open") onOpen2();
+      if (intent === "close") onClose2();
+    }
+    function handleCancel() {
+      start.current = null;
+    }
+    document.addEventListener("touchstart", handleStart, { passive: true });
+    document.addEventListener("touchmove", handleMove, { passive: true });
+    document.addEventListener("touchend", handleEnd, { passive: true });
+    document.addEventListener("touchcancel", handleCancel, { passive: true });
+    return () => {
+      document.removeEventListener("touchstart", handleStart);
+      document.removeEventListener("touchmove", handleMove);
+      document.removeEventListener("touchend", handleEnd);
+      document.removeEventListener("touchcancel", handleCancel);
+    };
+  }, [enabled]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BACK_ZONE_PX,
+  CLOSE_DISTANCE_PX,
+  FORWARD_ZONE_PX,
+  MAX_SWIPE_DURATION_MS,
+  OPEN_DISTANCE_PX,
+  VERTICAL_CANCEL_PX,
+  isInOpenZone,
+  isInsideHorizontalScroller,
+  resolveSwipeIntent,
+  useDrawerSwipe
+});

package/dist/drawer-swipe.d.cts

@@ -0,0 +1,26 @@
+type SwipePoint = {
+    x: number;
+    y: number;
+    time: number;
+};
+declare const BACK_ZONE_PX = 60;
+declare const FORWARD_ZONE_PX = 30;
+declare const OPEN_DISTANCE_PX = 80;
+declare const CLOSE_DISTANCE_PX = 60;
+declare const VERTICAL_CANCEL_PX = 40;
+declare const MAX_SWIPE_DURATION_MS = 450;
+type SwipeIntent = 'open' | 'close' | null;
+declare function isInOpenZone(x: number, viewportWidth: number): boolean;
+declare function resolveSwipeIntent(start: SwipePoint, end: SwipePoint, drawerOpen: boolean, viewportWidth: number): SwipeIntent;
+declare function isInsideHorizontalScroller(target: EventTarget | null): boolean;
+
+type UseDrawerSwipeOptions = {
+    drawerOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    enabled?: boolean;
+    maxViewportWidth?: number;
+};
+declare function useDrawerSwipe({ drawerOpen, onOpen, onClose, enabled, maxViewportWidth, }: UseDrawerSwipeOptions): void;
+
+export { BACK_ZONE_PX, CLOSE_DISTANCE_PX, FORWARD_ZONE_PX, MAX_SWIPE_DURATION_MS, OPEN_DISTANCE_PX, type SwipeIntent, type SwipePoint, type UseDrawerSwipeOptions, VERTICAL_CANCEL_PX, isInOpenZone, isInsideHorizontalScroller, resolveSwipeIntent, useDrawerSwipe };

package/dist/drawer-swipe.d.ts

@@ -0,0 +1,26 @@
+type SwipePoint = {
+    x: number;
+    y: number;
+    time: number;
+};
+declare const BACK_ZONE_PX = 60;
+declare const FORWARD_ZONE_PX = 30;
+declare const OPEN_DISTANCE_PX = 80;
+declare const CLOSE_DISTANCE_PX = 60;
+declare const VERTICAL_CANCEL_PX = 40;
+declare const MAX_SWIPE_DURATION_MS = 450;
+type SwipeIntent = 'open' | 'close' | null;
+declare function isInOpenZone(x: number, viewportWidth: number): boolean;
+declare function resolveSwipeIntent(start: SwipePoint, end: SwipePoint, drawerOpen: boolean, viewportWidth: number): SwipeIntent;
+declare function isInsideHorizontalScroller(target: EventTarget | null): boolean;
+
+type UseDrawerSwipeOptions = {
+    drawerOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    enabled?: boolean;
+    maxViewportWidth?: number;
+};
+declare function useDrawerSwipe({ drawerOpen, onOpen, onClose, enabled, maxViewportWidth, }: UseDrawerSwipeOptions): void;
+
+export { BACK_ZONE_PX, CLOSE_DISTANCE_PX, FORWARD_ZONE_PX, MAX_SWIPE_DURATION_MS, OPEN_DISTANCE_PX, type SwipeIntent, type SwipePoint, type UseDrawerSwipeOptions, VERTICAL_CANCEL_PX, isInOpenZone, isInsideHorizontalScroller, resolveSwipeIntent, useDrawerSwipe };

package/dist/drawer-swipe.js

@@ -0,0 +1,114 @@
+"use client";
+
+// src/drawer-swipe/swipe-intent.ts
+var BACK_ZONE_PX = 60;
+var FORWARD_ZONE_PX = 30;
+var OPEN_DISTANCE_PX = 80;
+var CLOSE_DISTANCE_PX = 60;
+var VERTICAL_CANCEL_PX = 40;
+var MAX_SWIPE_DURATION_MS = 450;
+var HORIZONTAL_DOMINANCE = 1.5;
+function isInOpenZone(x, viewportWidth) {
+  return x > BACK_ZONE_PX && x < viewportWidth - FORWARD_ZONE_PX;
+}
+function resolveSwipeIntent(start, end, drawerOpen, viewportWidth) {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  if (end.time - start.time > MAX_SWIPE_DURATION_MS) return null;
+  if (Math.abs(dx) < Math.abs(dy) * HORIZONTAL_DOMINANCE) return null;
+  if (drawerOpen) {
+    return dx <= -CLOSE_DISTANCE_PX ? "close" : null;
+  }
+  if (dx < OPEN_DISTANCE_PX) return null;
+  return isInOpenZone(start.x, viewportWidth) ? "open" : null;
+}
+function isInsideHorizontalScroller(target) {
+  let node = target instanceof Element ? target : null;
+  while (node && node !== document.body) {
+    const { overflowX } = window.getComputedStyle(node);
+    if ((overflowX === "auto" || overflowX === "scroll") && node.scrollWidth > node.clientWidth) {
+      return true;
+    }
+    node = node.parentElement;
+  }
+  return false;
+}
+
+// src/drawer-swipe/use-drawer-swipe.ts
+import { useEffect, useRef } from "react";
+function isWideViewport(maxViewportWidth) {
+  return window.matchMedia(`(min-width: ${maxViewportWidth}px)`).matches;
+}
+function useDrawerSwipe({
+  drawerOpen,
+  onOpen,
+  onClose,
+  enabled = true,
+  maxViewportWidth = 768
+}) {
+  const start = useRef(null);
+  const handlers = useRef({ drawerOpen, onOpen, onClose, maxViewportWidth });
+  handlers.current = { drawerOpen, onOpen, onClose, maxViewportWidth };
+  useEffect(() => {
+    if (!enabled) return;
+    function handleStart(event) {
+      start.current = null;
+      if (event.touches.length !== 1) return;
+      if (isWideViewport(handlers.current.maxViewportWidth)) return;
+      if (!handlers.current.drawerOpen && isInsideHorizontalScroller(event.target)) {
+        return;
+      }
+      const touch = event.touches[0];
+      if (!touch) return;
+      start.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
+    }
+    function handleMove(event) {
+      const origin = start.current;
+      const touch = event.touches[0];
+      if (!origin || !touch) return;
+      if (Math.abs(touch.clientY - origin.y) > VERTICAL_CANCEL_PX) {
+        start.current = null;
+      }
+    }
+    function handleEnd(event) {
+      const origin = start.current;
+      start.current = null;
+      const touch = event.changedTouches[0];
+      if (!origin || !touch) return;
+      const { drawerOpen: drawerOpen2, onOpen: onOpen2, onClose: onClose2 } = handlers.current;
+      const intent = resolveSwipeIntent(
+        origin,
+        { x: touch.clientX, y: touch.clientY, time: Date.now() },
+        drawerOpen2,
+        window.innerWidth
+      );
+      if (intent === "open") onOpen2();
+      if (intent === "close") onClose2();
+    }
+    function handleCancel() {
+      start.current = null;
+    }
+    document.addEventListener("touchstart", handleStart, { passive: true });
+    document.addEventListener("touchmove", handleMove, { passive: true });
+    document.addEventListener("touchend", handleEnd, { passive: true });
+    document.addEventListener("touchcancel", handleCancel, { passive: true });
+    return () => {
+      document.removeEventListener("touchstart", handleStart);
+      document.removeEventListener("touchmove", handleMove);
+      document.removeEventListener("touchend", handleEnd);
+      document.removeEventListener("touchcancel", handleCancel);
+    };
+  }, [enabled]);
+}
+export {
+  BACK_ZONE_PX,
+  CLOSE_DISTANCE_PX,
+  FORWARD_ZONE_PX,
+  MAX_SWIPE_DURATION_MS,
+  OPEN_DISTANCE_PX,
+  VERTICAL_CANCEL_PX,
+  isInOpenZone,
+  isInsideHorizontalScroller,
+  resolveSwipeIntent,
+  useDrawerSwipe
+};

package/dist/escape.cjs

@@ -0,0 +1,47 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/escape/index.ts
+var escape_exports = {};
+__export(escape_exports, {
+  useEscape: () => useEscape
+});
+module.exports = __toCommonJS(escape_exports);
+
+// src/escape/use-escape.ts
+var import_react = require("react");
+function useEscape(onEscape, active = true) {
+  const handlerRef = (0, import_react.useRef)(onEscape);
+  (0, import_react.useEffect)(() => {
+    handlerRef.current = onEscape;
+  });
+  (0, import_react.useEffect)(() => {
+    if (!active) return;
+    function onKeyDown(event) {
+      if (event.key === "Escape") handlerRef.current();
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [active]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useEscape
+});

package/dist/escape.d.cts

@@ -0,0 +1,3 @@
+declare function useEscape(onEscape: () => void, active?: boolean): void;
+
+export { useEscape };

package/dist/escape.d.ts

@@ -0,0 +1,3 @@
+declare function useEscape(onEscape: () => void, active?: boolean): void;
+
+export { useEscape };