react-modal-registry 0.1.0 → 0.1.1

package/README.md

@@ -1,12 +1,22 @@
 # react-modal-registry
 
-> Type-safe, promise-based modal management and registration for React.
+> Type-safe, promise-based modal and dialog management for React.
 
 [![npm version](https://img.shields.io/npm/v/react-modal-registry?style=flat-square&color=black)](https://www.npmjs.com/package/react-modal-registry)
 [![license](https://img.shields.io/badge/license-MIT-black?style=flat-square)](./LICENSE)
 [![bundle size](https://img.shields.io/bundlephobia/minzip/react-modal-registry?style=flat-square&color=black)](https://bundlephobia.com/package/react-modal-registry)
 [![typescript](https://img.shields.io/badge/TypeScript-strict-black?style=flat-square)](https://www.typescriptlang.org/)
 
+Managing dialogs in React often leads to **modal sprawl**—scattering `useState(false)` flags, prop drilling, and duplicate dialog components across pages.
+
+`react-modal-registry` provides a single, type-safe registry to open and manage modals cleanly:
+
+- **Promise-Based Dialogs**: Open modals imperatively (`await modal.open()`) and await user responses inline without local boolean states.
+- **End-to-End Type Safety**: Autocomplete modal IDs, input payloads, and return values via TypeScript declaration merging.
+- **URL Deep-Linking**: Synchronize modal visibility with the URL hash (`#modal=<id>`) or query params with native browser Back button dismissal.
+- **Zero Re-Render Penalty**: Split-context architecture ensures caller components never re-render when modals open or close.
+- **Headless & UI Agnostic**: Works out of the box with shadcn/ui, Radix UI, Tailwind CSS, or native HTML `<dialog>`.
+
 ---
 
 ## Installation
@@ -27,36 +37,34 @@ bun add react-modal-registry
 
 ### 1. Mount `ModalProvider`
 
-Wrap your application root or layout shell:
+Wrap your application root:
 
 ```tsx
 import { ModalProvider } from 'react-modal-registry'
 
-export function RootLayout({ children }: { children: React.ReactNode }) {
+export function App({ children }: { children: React.ReactNode }) {
   return <ModalProvider>{children}</ModalProvider>
 }
 ```
 
 ### 2. Declare Modal Types
 
-In an ambient declaration file (e.g., `env.d.ts` or `modals.d.ts`), augment `ModalDataMap` and `ModalResultMap`:
+Declare modal IDs, payloads, and return types via TypeScript module augmentation (e.g., `env.d.ts` or `modals.d.ts`):
 
 ```ts
 declare module 'react-modal-registry' {
-  interface ModalDataMap {
-    confirmDelete: { userId: string; name: string }
-    barcodeScanner: { onScan: (code: string) => void }
-  }
-
-  interface ModalResultMap {
-    confirmDelete: boolean
+  interface ModalRegistry {
+    confirmDelete: {
+      data: { name: string }
+      result: boolean
+    }
   }
 }
 ```
 
 ### 3. Create a Modal Component
 
-Write your modal as a standard React component using `ModalProps<TData, TResult>`:
+Use `ModalProps<TData, TResult>` for your component props:
 
 ```tsx
 import type { ModalProps } from 'react-modal-registry'
@@ -65,160 +73,176 @@ export function ConfirmDeleteModal({
   isOpen,
   data,
   close
-}: ModalProps<{ userId: string; name: string }, boolean>) {
+}: ModalProps<{ name: string }, boolean>) {
   if (!isOpen) return null
 
   return (
     <dialog open={isOpen}>
-      <h3>Delete {data.name}?</h3>
-      <button onClick={() => close(true)}>Confirm</button>
+      <p>Are you sure you want to delete {data.name}?</p>
+      <button onClick={() => close(true)}>Delete</button>
       <button onClick={() => close(false)}>Cancel</button>
     </dialog>
   )
 }
 ```
 
-### 4. Register Modals
+### 4. Register and Open
 
-Mount registrations at layout or router boundaries:
+Register modals at app root or feature level, and trigger them anywhere with `useModal`:
 
 ```tsx
-import { ModalRegistry } from 'react-modal-registry'
+import { ModalRegistry, useModal } from 'react-modal-registry'
 import { ConfirmDeleteModal } from './ConfirmDeleteModal'
 
-const appModals = [{ id: 'confirmDelete', component: ConfirmDeleteModal }] as const
+const modals = [{ id: 'confirmDelete', component: ConfirmDeleteModal }] as const
 
-export function AppShell({ children }: { children: React.ReactNode }) {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <ModalRegistry modals={appModals} />
+      <ModalRegistry modals={modals} />
       {children}
     </>
   )
 }
-```
-
-### 5. Trigger Anywhere with `useModal`
-
-```tsx
-import { useModal } from 'react-modal-registry'
 
-export function DeleteButton({ user }: { user: { id: string; name: string } }) {
+export function DeleteButton({ itemName }: { itemName: string }) {
   const confirmModal = useModal('confirmDelete')
 
   const handleDelete = async () => {
-    // Typed payload and strictly typed return value (Promise<boolean>)
-    const confirmed = await confirmModal.open({
-      userId: user.id,
-      name: user.name
-    })
-
+    const confirmed = await confirmModal.open({ name: itemName })
     if (confirmed) {
-      deleteUser(user.id)
+      // item deleted
     }
   }
 
-  return <button onClick={handleDelete}>Delete User</button>
+  return <button onClick={handleDelete}>Delete</button>
 }
 ```
 
 ---
 
-## Features
+## Usage & Features
 
-- **End-to-End Type Safety**: IDE autocompletion for modal IDs, payloads, and return types via TypeScript declaration merging.
-- **Promise-Based & Event-Driven**: `await modal.open(data)` for async results or pass callbacks (`onScan`, `onSuccess`) directly in payloads.
-- **Zero Re-Render Overhead**: Split-context architecture guarantees callers of `useModal()` never re-render when modals open, close, or animate.
-- **Code-Splitting Ready**: Register modals with `React.lazy()` at app shells without importing modal components into caller files.
-- **Lightweight & Headless**: Zero external runtime dependencies (~1.3 kB min+gzip). Works with any styling solution (Tailwind, Radix, Shadcn, MUI).
+### Promise-Based Responses
 
----
+`modal.open(data)` returns a `Promise<TResult | undefined>`. Calling `close(result)` resolves the promise:
 
-## Why react-modal-registry?
+```tsx
+const confirmed = await modal.open({ name: 'Project Alpha' })
+if (confirmed) {
+  await api.deleteProject()
+}
+```
 
-| Feature                      |                    `react-modal-registry`                     |   `@ebay/nice-modal-react`    |     `react-modal-promise`     |     `react-modal-hook`     |
-| :--------------------------- | :-----------------------------------------------------------: | :---------------------------: | :---------------------------: | :------------------------: |
-| **Type Safety**              | **Declaration merging** (autocompletes ID, payload, & return) |    String ID / loose types    |    Direct component import    |  Direct component import   |
-| **Caller Re-renders**        |              **None** (isolated split contexts)               | Re-renders on context updates | Re-renders with wrapper state | Re-renders on state toggle |
-| **Promise Returns**          |            **Strictly typed** (`Promise<TResult>`)            | Untyped (`Promise<unknown>`)  |        Manual generic         |       Not supported        |
-| **Code Splitting**           |       **Native** (`React.lazy()` at registration shell)       |    Requires HOC per modal     |       Bundled at caller       |     Bundled at caller      |
-| **Component Wrapper**        |               **None** (standard `ModalProps`)                | Requires `NiceModal.create()` |  Requires `create()` wrapper  |   Requires hook binding    |
-| **UI Agnostic**              |              Yes (Tailwind, Radix, Shadcn, MUI)               |              Yes              |              Yes              |   Tied to `react-modal`    |
-| **Bundle Size (min + gzip)** |                          **~1.3 kB**                          |            ~2.4 kB            |            ~1.6 kB            |          ~1.3 kB           |
+If the modal is dismissed without a value (e.g. backdrop click or ESC), the promise resolves to `undefined`.
 
----
+### Rich Payloads & Callbacks
 
-## Patterns
+Pay-load data is passed in-memory, so you can pass callbacks, functions, or complex objects directly:
 
-### Local Component Registrations
+```ts
+declare module 'react-modal-registry' {
+  interface ModalRegistry {
+    scanner: {
+      data: { onScan: (code: string) => void }
+    }
+  }
+}
+```
+
+```tsx
+const scannerModal = useModal('scanner')
 
-Register modals scoped to the lifetime of a specific feature or page with `useRegisterModal`. Registrations unmount automatically when the caller unmounts:
+scannerModal.open({
+  onScan: code => {
+    console.log('Scanned:', code)
+  }
+})
+```
+
+### Component-Scoped Registrations
+
+Register modals that exist only while a specific component is mounted:
 
 ```tsx
-import { useRegisterModal } from 'react-modal-registry'
-import { ReportModal } from './ReportModal'
+import { useRegisterModal, useModal } from 'react-modal-registry'
+import { FeatureModal } from './FeatureModal'
 
-export function AnalyticsPage() {
-  useRegisterModal('customReport', ReportModal)
+export function FeaturePage() {
+  useRegisterModal('featureDetails', FeatureModal)
+  const modal = useModal('featureDetails')
 
-  return <main>Analytics Dashboard</main>
+  return <button onClick={() => modal.open()}>Open Details</button>
 }
 ```
 
-### Callback-Driven Workflows
+### Code Splitting with `React.lazy`
 
-Pass event listeners or streams directly in modal payload data:
+Split modal components into separate chunks:
 
 ```tsx
-function ScannerTrigger() {
-  const scanner = useModal('barcodeScanner')
+import { lazy } from 'react'
+import { ModalRegistry } from 'react-modal-registry'
 
-  const handleScan = () => {
-    scanner.open({
-      onScan: code => console.log('Scanned:', code)
-    })
-  }
+const AnalyticsModal = lazy(() => import('./AnalyticsModal'))
+
+const modals = [{ id: 'analytics', component: AnalyticsModal }] as const
 
-  return <button onClick={handleScan}>Scan Code</button>
+export function App() {
+  return <ModalRegistry modals={modals} />
 }
 ```
 
-### Reactive State Subscriptions
+### URL Deep Linking
 
-`useModal(id).isOpen()` reads state imperatively without re-rendering the caller. Use `useIsModalOpen(id)` when you need reactive UI updates:
+Optionally sync active modals with the browser URL (hash or query) and browser Back button:
 
 ```tsx
-import { useIsModalOpen } from 'react-modal-registry'
-
-function StatusIndicator() {
-  const isOpen = useIsModalOpen('confirmDelete')
-  return <span>{isOpen ? 'Active' : 'Idle'}</span>
-}
+<ModalProvider
+  routing={{
+    strategy: 'hash', // 'hash' (#modal=changelog) or 'query' (?modal=changelog)
+    param: 'modal', // default: 'modal'
+    historyMode: 'push', // 'push' or 'replace'
+    defaultData: {
+      changelog: { version: '1.0.0' }
+    }
+  }}
+>
+  {children}
+</ModalProvider>
 ```
 
+When routing is enabled:
+- Opening a modal syncs `#modal=<id>` to the URL.
+- Closing the modal cleans up the URL parameter.
+- Pressing the browser **Back** button dismisses the modal.
+
 ---
 
 ## API Reference
 
-| Export                            | Type      | Description                                                             |
-| :-------------------------------- | :-------- | :---------------------------------------------------------------------- |
-| `<ModalProvider>`                 | Component | Root provider managing modal lifecycle and rendering active slots.      |
-| `<ModalRegistry>`                 | Component | Declarative component registering a batch of modals at root boundaries. |
-| `useModal(id)`                    | Hook      | Returns typed imperative controls (`open`, `close`, `isOpen`).          |
-| `useIsModalOpen(id)`              | Hook      | Reactively subscribes to the open status of a specific modal ID.        |
-| `useRegisterModal(id, component)` | Hook      | Dynamically registers modals for the lifetime of the calling component. |
-| `useCloseAll()`                   | Hook      | Dismisses all currently open modals.                                    |
-| `ModalProps<TData, TResult>`      | Type      | Standard props received by registered modal components.                 |
-| `ModalDataMap`                    | Interface | Augmentation interface for payload types.                               |
-| `ModalResultMap`                  | Interface | Augmentation interface for return types.                                |
-| `ModalRegistry`                   | Interface | Unified augmentation interface for paired data and result types.        |
+| Export | Type | Description |
+| :--- | :--- | :--- |
+| `<ModalProvider>` | Component | Root provider managing modal state and slot rendering. Accepts `unmountDelay`, `fallback`, and `routing`. |
+| `<ModalRegistry>` | Component | Mounts a batch of static modal registrations: `<ModalRegistry modals={[...]} />`. |
+| `useModal(id)` | Hook | Returns imperative controls: `{ open(data?), close(result?), isOpen() }`. |
+| `useIsModalOpen(id)` | Hook | Reactively subscribes to whether a modal is currently open (`boolean`). |
+| `useRegisterModal(id, component)` | Hook | Dynamically registers a modal for the calling component's lifecycle. |
+| `useCloseAll()` | Hook | Dismisses all currently open modals. |
+| `ModalProps<TData, TResult>` | Interface | Props received by modal components: `{ isOpen, data, close }`. |
+| `ModalRegistry` | Interface | Target interface for module augmentation. |
 
 ---
 
-## Architecture
+## Interactive Demo
+
+A runnable demo showcasing forms, wizards, drawers, and deep linking is available in the [`demo`](./demo) directory:
 
-- **Isolated Contexts**: Action dispatchers (`open`, `close`, `register`) are kept separate from slot rendering states. Invoking modal methods does not trigger re-renders in calling views.
-- **Concurrent Requests**: Multiple concurrent invocations of `open()` with identical payloads reuse the active pending promise. Invoking `open()` with new parameters supersedes prior pending promises.
+```bash
+cd demo
+pnpm install
+pnpm dev
+```
 
 ---
 

package/dist/index.cjs

@@ -1,321 +1,2 @@
-"use strict";
-"use client";
-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/index.tsx
-var index_exports = {};
-__export(index_exports, {
-  ModalProvider: () => ModalProvider,
-  ModalRegistry: () => ModalRegistry,
-  useCloseAll: () => useCloseAll,
-  useIsModalOpen: () => useIsModalOpen,
-  useModal: () => useModal,
-  useRegisterModal: () => useRegisterModal
-});
-module.exports = __toCommonJS(index_exports);
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ModalActionsContext = (0, import_react.createContext)(null);
-var ModalSlotsContext = (0, import_react.createContext)(null);
-var UNMOUNT_DELAY_MS = 200;
-function ModalProvider({ children }) {
-  const slotsRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-  const pendingRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-  const timersRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-  const [slots, setSlots] = (0, import_react.useState)(/* @__PURE__ */ new Map());
-  (0, import_react.useEffect)(() => {
-    const timers = timersRef.current;
-    const pendings = pendingRef.current;
-    return () => {
-      for (const timer of timers.values()) {
-        clearTimeout(timer);
-      }
-      timers.clear();
-      for (const pending of pendings.values()) {
-        pending.resolve(void 0);
-      }
-      pendings.clear();
-    };
-  }, []);
-  const sync = (0, import_react.useCallback)(() => {
-    setSlots(new Map(slotsRef.current));
-  }, []);
-  const register = (0, import_react.useCallback)(
-    (idOrModals, component) => {
-      const items = Array.isArray(idOrModals) ? idOrModals : component ? [
-        {
-          id: idOrModals,
-          component
-        }
-      ] : [];
-      let changed = false;
-      for (const { id, component: comp } of items) {
-        const existing = slotsRef.current.get(id);
-        const typedComp = comp;
-        if (existing) {
-          if (existing.component !== typedComp) {
-            slotsRef.current.set(id, {
-              ...existing,
-              component: typedComp
-            });
-            changed = true;
-          }
-        } else {
-          slotsRef.current.set(id, {
-            id,
-            component: typedComp,
-            isOpen: false,
-            isMounted: false,
-            data: void 0
-          });
-          changed = true;
-        }
-      }
-      if (changed) {
-        sync();
-      }
-    },
-    [sync]
-  );
-  const unregister = (0, import_react.useCallback)(
-    (idOrIds) => {
-      const ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds];
-      let changed = false;
-      for (const id of ids) {
-        const timer = timersRef.current.get(id);
-        if (timer) {
-          clearTimeout(timer);
-          timersRef.current.delete(id);
-        }
-        const pending = pendingRef.current.get(id);
-        if (pending) {
-          pendingRef.current.delete(id);
-          pending.resolve(void 0);
-        }
-        if (slotsRef.current.has(id)) {
-          slotsRef.current.delete(id);
-          changed = true;
-        }
-      }
-      if (changed) {
-        sync();
-      }
-    },
-    [sync]
-  );
-  const open = (0, import_react.useCallback)(
-    (id, ...args) => {
-      const data = args[0];
-      const slot = slotsRef.current.get(id);
-      if (!slot) {
-        return Promise.reject(
-          new Error(`[react-modal-registry] Modal "${String(id)}" is not registered.`)
-        );
-      }
-      const existing = pendingRef.current.get(id);
-      if (slot.isOpen && slot.data === data && existing) {
-        return existing.promise;
-      }
-      if (existing) {
-        pendingRef.current.delete(id);
-        existing.resolve(void 0);
-      }
-      const timer = timersRef.current.get(id);
-      if (timer) {
-        clearTimeout(timer);
-        timersRef.current.delete(id);
-      }
-      let resolver;
-      const promise = new Promise((resolve) => {
-        resolver = resolve;
-      });
-      pendingRef.current.set(id, {
-        promise,
-        resolve: resolver
-      });
-      slotsRef.current.set(id, { ...slot, isOpen: true, isMounted: true, data });
-      sync();
-      return promise;
-    },
-    [sync]
-  );
-  const scheduleUnmount = (0, import_react.useCallback)(
-    (id) => {
-      const timer = timersRef.current.get(id);
-      if (timer) clearTimeout(timer);
-      timersRef.current.set(
-        id,
-        setTimeout(() => {
-          timersRef.current.delete(id);
-          const current = slotsRef.current.get(id);
-          if (current && !current.isOpen) {
-            slotsRef.current.set(id, { ...current, isMounted: false });
-            sync();
-          }
-        }, UNMOUNT_DELAY_MS)
-      );
-    },
-    [sync]
-  );
-  const close = (0, import_react.useCallback)(
-    (id, result) => {
-      const slot = slotsRef.current.get(id);
-      if (!slot || !slot.isOpen) return;
-      const pending = pendingRef.current.get(id);
-      if (pending) {
-        pendingRef.current.delete(id);
-        pending.resolve(result);
-      }
-      slotsRef.current.set(id, { ...slot, isOpen: false, isMounted: true });
-      sync();
-      scheduleUnmount(id);
-    },
-    [sync, scheduleUnmount]
-  );
-  const closeAll = (0, import_react.useCallback)(() => {
-    for (const [, pending] of pendingRef.current) {
-      pending.resolve(void 0);
-    }
-    pendingRef.current.clear();
-    let changed = false;
-    for (const [id, slot] of slotsRef.current) {
-      if (slot.isOpen) {
-        slotsRef.current.set(id, { ...slot, isOpen: false, isMounted: true });
-        scheduleUnmount(id);
-        changed = true;
-      }
-    }
-    if (changed) {
-      sync();
-    }
-  }, [sync, scheduleUnmount]);
-  const isOpen = (0, import_react.useCallback)((id) => slotsRef.current.get(id)?.isOpen ?? false, []);
-  const actions = (0, import_react.useMemo)(
-    () => ({
-      register,
-      unregister,
-      open,
-      close,
-      closeAll,
-      isOpen
-    }),
-    [register, unregister, open, close, closeAll, isOpen]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalActionsContext.Provider, { value: actions, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ModalSlotsContext.Provider, { value: slots, children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalRenderer, {})
-  ] }) });
-}
-function useRegisterModal(idOrModals, component) {
-  const { register, unregister } = useModalContext();
-  (0, import_react.useEffect)(() => {
-    if (Array.isArray(idOrModals)) {
-      register(idOrModals);
-      return () => {
-        unregister(idOrModals.map((m) => m.id));
-      };
-    }
-    if (component) {
-      register(idOrModals, component);
-      return () => {
-        unregister(idOrModals);
-      };
-    }
-    return void 0;
-  }, [idOrModals, component, register, unregister]);
-}
-function ModalRegistry({
-  modals
-}) {
-  useRegisterModal(modals);
-  return null;
-}
-function useModal(id) {
-  const { open, close, isOpen } = useModalContext();
-  return (0, import_react.useMemo)(
-    () => ({
-      open: (...args) => open(id, ...args),
-      close: (result) => close(id, result),
-      isOpen: () => isOpen(id)
-    }),
-    [open, close, isOpen, id]
-  );
-}
-function useIsModalOpen(id) {
-  const slots = (0, import_react.useContext)(ModalSlotsContext);
-  if (!slots) {
-    throw new Error("useIsModalOpen must be used within <ModalProvider>");
-  }
-  return slots.get(id)?.isOpen ?? false;
-}
-function useCloseAll() {
-  return useModalContext().closeAll;
-}
-var ModalSlotItem = (0, import_react.memo)(function ModalSlotItem2({
-  id,
-  component: Component,
-  isOpen,
-  data,
-  close
-}) {
-  const handleClose = (0, import_react.useCallback)(
-    (result) => {
-      close(id, result);
-    },
-    [close, id]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { isOpen, data, close: handleClose }) });
-});
-function ModalRenderer() {
-  const slots = (0, import_react.useContext)(ModalSlotsContext);
-  const { close } = useModalContext();
-  if (!slots) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: Array.from(slots.values()).map(
-    (slot) => slot.isMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      ModalSlotItem,
-      {
-        id: slot.id,
-        component: slot.component,
-        isOpen: slot.isOpen,
-        data: slot.data,
-        close
-      },
-      slot.id
-    ) : null
-  ) });
-}
-function useModalContext() {
-  const context = (0, import_react.useContext)(ModalActionsContext);
-  if (!context) {
-    throw new Error("useModalContext must be used within <ModalProvider>");
-  }
-  return context;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ModalProvider,
-  ModalRegistry,
-  useCloseAll,
-  useIsModalOpen,
-  useModal,
-  useRegisterModal
-});
+"use strict";"use client";var E=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var X=Object.prototype.hasOwnProperty;var Z=(t,e)=>{for(var s in e)E(t,s,{get:e[s],enumerable:!0})},ee=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of W(e))!X.call(t,l)&&l!==s&&E(t,l,{get:()=>e[l],enumerable:!(a=Q(e,l))||a.enumerable});return t};var te=t=>ee(E({},"__esModule",{value:!0}),t);var Me={};Z(Me,{ModalProvider:()=>de,ModalRegistry:()=>ie,isBrowser:()=>O,useCloseAll:()=>pe,useIsModalOpen:()=>ce,useModal:()=>ue,useRegisterModal:()=>G});module.exports=te(Me);var r=require("react"),m=require("react/jsx-runtime"),k={strategy:"hash",param:"modal",historyMode:"push"},O=()=>typeof window<"u",ne=200,_=(0,r.createContext)(null),B=(0,r.createContext)(new Map);function oe(t,e){if(Object.is(t,e))return!0;if(typeof t!="object"||t===null||typeof e!="object"||e===null)return!1;if(t instanceof Date&&e instanceof Date)return t.getTime()===e.getTime();if(t instanceof RegExp&&e instanceof RegExp)return t.source===e.source&&t.flags===e.flags;if(t instanceof Map||t instanceof Set||e instanceof Map||e instanceof Set)return!1;let s=Object.keys(t),a=Object.keys(e);return s.length!==a.length?!1:s.every(l=>Object.prototype.hasOwnProperty.call(e,l)&&t[l]===e[l])}function re(t){let e=(0,r.useRef)(t);return Array.isArray(t)&&Array.isArray(e.current)&&e.current.length===t.length&&e.current.every((s,a)=>s.id===t[a].id&&s.component===t[a].component)?e.current:(e.current=t,t)}function z(t){let e=t.replace(/^#/,""),[s,a]=e.includes("?")?e.split("?",2):e.includes("=")?["",e]:[e,""];return{anchor:s,params:new URLSearchParams(a)}}function ae(t,e){let s=e.toString();return s?`#${t?`${t}?`:""}${s}`:t?`#${t}`:""}function D(t){if(!O()||!t||t.enabled===!1)return null;let e=t.param??k.param;return(t.strategy??k.strategy)==="query"?new URLSearchParams(window.location.search).get(e):z(window.location.hash).params.get(e)}function U(t,e,s){if(!O()||!e||e.enabled===!1||D(e)===t)return;let a=s??e.historyMode??k.historyMode,l=e.param??k.param,M=new URL(window.location.href),x=g=>t?g.set(l,t):g.delete(l);if((e.strategy??k.strategy)==="query")x(M.searchParams);else{let{anchor:g,params:f}=z(window.location.hash);x(f),M.hash=ae(g,f)}window.history[a==="push"?"pushState":"replaceState"](window.history.state,"",M.pathname+M.search+M.hash)}function F(t,e){if(t)return typeof t=="function"?t(e):Object.prototype.hasOwnProperty.call(t,e)?t[e]:void 0}function de({children:t,unmountDelay:e=ne,fallback:s=null,routing:a}){let l=(0,r.useRef)(new Map),[M,x]=(0,r.useState)(new Map),g=(0,r.useRef)(M),f=(0,r.useCallback)(n=>{let o=n(g.current);return g.current=o,x(o),o},[]),R=(0,r.useRef)(new Map),y=(0,r.useRef)(new Map),Y=(0,r.useRef)(0),C=(0,r.useMemo)(()=>a?{...k,...a,enabled:a.enabled!==!1}:null,[a?.enabled,a?.strategy,a?.param,a?.historyMode,a?.defaultData]),p=(0,r.useRef)(C);p.current=C,(0,r.useEffect)(()=>()=>{y.current.forEach(clearTimeout),y.current.clear(),R.current.forEach(n=>n.resolve(void 0)),R.current.clear()},[]);let b=(0,r.useCallback)(n=>{let o=l.current.get(n);return o?.[o.length-1]},[]),P=(0,r.useCallback)((n,o)=>{let c=y.current.get(n);c&&clearTimeout(c);let d;d=setTimeout(()=>{y.current.get(n)===d&&y.current.delete(n),f(i=>{let u=i.get(n);if(!u||u.isOpen||u.invocationId!==o)return i;let T=new Map(i);return T.delete(n),T})},e),y.current.set(n,d)},[e,f]),A=(0,r.useCallback)((n,o,c,d=!0)=>{let i=g.current.get(n);if(!i||!i.isOpen||o!==void 0&&i.invocationId!==o)return;let u=R.current.get(n);u&&(o===void 0||u.invocationId===o)&&(R.current.delete(n),u.resolve(c)),d&&p.current?.enabled&&D(p.current)===String(n)&&U(null,p.current,"replace");let T=!1;f(I=>{let v=I.get(n);if(!v||!v.isOpen||o!==void 0&&v.invocationId!==o)return I;T=!0;let h=new Map(I);return e<=0?h.delete(n):h.set(n,{...v,isOpen:!1}),h}),T&&e>0&&P(n,i.invocationId)},[P,e,f]),w=(0,r.useCallback)((n,o,c=!0)=>{let d=b(n);if(!d)return Promise.reject(new Error(`[react-modal-registry] Modal "${String(n)}" is not registered.`));let i=g.current.get(n),u=R.current.get(n);if(i?.isOpen&&i.component===d&&oe(i.data,o)&&u)return u.promise;c&&p.current?.enabled&&U(String(n),p.current),u&&(R.current.delete(n),u.resolve(void 0));let T=y.current.get(n);T&&(clearTimeout(T),y.current.delete(n));let I=++Y.current,v,h=new Promise(S=>{v=S});return R.current.set(n,{promise:h,resolve:v,invocationId:I}),f(S=>{let K=new Map(S);return K.set(n,{id:n,component:d,isOpen:!0,data:o,invocationId:I}),K}),h},[b,f]),N=(0,r.useCallback)((n,...o)=>w(n,o[0],!0),[w]),j=(0,r.useCallback)((n,o)=>{A(n,void 0,o,!0)},[A]),$=(0,r.useCallback)(()=>{let n=Array.from(R.current.values());if(R.current.clear(),p.current?.enabled&&U(null,p.current,"replace"),e<=0){for(let o of y.current.values())clearTimeout(o);y.current.clear(),f(()=>new Map)}else{for(let[o,c]of g.current)c.isOpen&&P(o,c.invocationId);f(o=>{let c=!1,d=new Map(o);for(let[i,u]of o)u.isOpen&&(d.set(i,{...u,isOpen:!1}),c=!0);return c?d:o})}n.forEach(o=>o.resolve(void 0))},[P,e,f]),q=(0,r.useCallback)(n=>g.current.get(n)?.isOpen??!1,[]),V=(0,r.useCallback)(((n,o)=>{let c=Array.isArray(n)?n:o?[{id:n,component:o}]:[],d=p.current?.enabled?D(p.current):null;for(let i of c){let u=l.current.get(i.id);if(u||(u=[],l.current.set(i.id,u)),u.push(i.component),d&&d===String(i.id)&&!g.current.get(i.id)?.isOpen){let T=F(p.current?.defaultData,i.id);w(i.id,T,!1)}}}),[w]),H=(0,r.useCallback)((n,o)=>{let c=Array.isArray(n)?n:[n];for(let d of c){let i=l.current.get(d);if(!i)continue;if(o){let I=i.lastIndexOf(o);if(I!==-1&&i.splice(I,1),i.length>0)continue}l.current.delete(d);let u=y.current.get(d);u&&(clearTimeout(u),y.current.delete(d));let T=R.current.get(d);T&&(R.current.delete(d),T.resolve(void 0)),p.current?.enabled&&D(p.current)===String(d)&&U(null,p.current,"replace"),f(I=>{if(!I.has(d))return I;let v=new Map(I);return v.delete(d),v})}},[f]);(0,r.useEffect)(()=>{if(!C||!C.enabled||!O())return;let n=()=>{let o=D(p.current),c=g.current;for(let[d,i]of c)String(d)!==o&&i.isOpen&&A(d,void 0,void 0,!1);if(o){let d=o;!c.get(d)?.isOpen&&b(d)&&w(d,F(p.current?.defaultData,d),!1)}};return n(),window.addEventListener("popstate",n),window.addEventListener("hashchange",n),()=>{window.removeEventListener("popstate",n),window.removeEventListener("hashchange",n)}},[C,b,w,A]);let J=(0,r.useMemo)(()=>({register:V,unregister:H,open:N,close:j,closeAll:$,isOpen:q}),[V,H,N,j,$,q]);return(0,m.jsx)(_.Provider,{value:J,children:(0,m.jsxs)(B.Provider,{value:M,children:[t,(0,m.jsx)(se,{activeModals:M,close:A,fallback:s})]})})}function se({activeModals:t,close:e,fallback:s}){return t.size===0?null:(0,m.jsx)(m.Fragment,{children:Array.from(t.values(),a=>(0,m.jsx)(le,{active:a,onClose:e,fallback:s},`${String(a.id)}:${a.invocationId}`))})}var le=(0,r.memo)(function({active:e,onClose:s,fallback:a}){let l=(0,r.useCallback)(x=>s(e.id,e.invocationId,x,!0),[s,e.id,e.invocationId]),M=e.component;return(0,m.jsx)(r.Suspense,{fallback:a??null,children:(0,m.jsx)(M,{isOpen:e.isOpen,data:e.data,close:l})})});function G(t,e){let{register:s,unregister:a}=L(),l=re(t);(0,r.useEffect)(()=>{if(Array.isArray(l))return s(l),()=>{for(let M of l)a(M.id,M.component)};if(e)return s(l,e),()=>{a(l,e)}},[l,e,s,a])}function ie({modals:t}){return G(t),null}function ue(t){let{open:e,close:s,isOpen:a}=L();return(0,r.useMemo)(()=>({open:(...l)=>e(t,...l),close:l=>s(t,l),isOpen:()=>a(t)}),[e,s,a,t])}function ce(t){return(0,r.useContext)(B).get(t)?.isOpen??!1}function pe(){return L().closeAll}function L(){let t=(0,r.useContext)(_);if(!t)throw new Error("useModalContext must be used within <ModalProvider>");return t}0&&(module.exports={ModalProvider,ModalRegistry,isBrowser,useCloseAll,useIsModalOpen,useModal,useRegisterModal});
 //# sourceMappingURL=index.cjs.map