react-panel-layout 0.6.0 → 0.7.0

package/src/demo/pages/Stack/components/StackBasics.tsx

@@ -1,13 +1,18 @@
 /**
  * @file Stack Navigation demo - iOS-style hierarchical navigation
+ * Uses SwipeStackContent for direct DOM manipulation during swipe gestures.
  */
 import * as React from "react";
 import { useStackNavigation } from "../../../../modules/stack/useStackNavigation.js";
 import { useStackSwipeInput } from "../../../../modules/stack/useStackSwipeInput.js";
-import { StackContent } from "../../../../modules/stack/StackContent.js";
+import { SwipeStackContent } from "../../../../modules/stack/SwipeStackContent.js";
+import { useResizeObserver } from "../../../../hooks/useResizeObserver.js";
+import { toContinuousOperationState } from "../../../../hooks/gesture/types.js";
 import type { StackPanel } from "../../../../modules/stack/types.js";
 import styles from "./Stack.module.css";
 
+const ANIMATION_DURATION = 300;
+
 const panels: StackPanel[] = [
   {
     id: "list",
@@ -61,16 +66,78 @@ export const StackBasics: React.FC = () => {
   const navigation = useStackNavigation({
     panels,
     displayMode: "overlay",
-    transitionMode: "css",
+    transitionMode: "none", // Using direct DOM manipulation
   });
 
-  const { isEdgeSwiping, progress, containerProps } = useStackSwipeInput({
+  const { isEdgeSwiping, progress, inputState, containerProps } = useStackSwipeInput({
     containerRef,
     navigation,
     edge: "left",
     edgeWidth: 30,
   });
 
+  // Track container size for SwipeStackContent
+  const { rect } = useResizeObserver(containerRef, { box: "border-box" });
+  const containerSize = rect?.width ?? 0;
+
+  const { stack, depth } = navigation.state;
+
+  // Track exiting panel when navigating back.
+  // CRITICAL: exitingPanelId must be computed synchronously during render
+  // to prevent the exiting panel from being unmounted for a frame.
+  const prevDepthRef = React.useRef(depth);
+  const prevStackRef = React.useRef<ReadonlyArray<string>>(stack);
+  const exitingPanelClearTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [exitingPanelState, setExitingPanelState] = React.useState<string | null>(null);
+
+  // Compute exiting panel ID synchronously during render
+  const prevDepth = prevDepthRef.current;
+  const prevStack = prevStackRef.current;
+  const isNavigatingBack = depth < prevDepth;
+  const computedExitingId = isNavigatingBack ? (prevStack[prevDepth] ?? null) : null;
+  const exitingPanelId = computedExitingId ?? exitingPanelState;
+
+  // Update refs and state in effect
+  React.useLayoutEffect(() => {
+    prevDepthRef.current = depth;
+    prevStackRef.current = stack;
+
+    if (computedExitingId != null) {
+      setExitingPanelState(computedExitingId);
+
+      if (exitingPanelClearTimeoutRef.current != null) {
+        clearTimeout(exitingPanelClearTimeoutRef.current);
+      }
+
+      exitingPanelClearTimeoutRef.current = setTimeout(() => {
+        setExitingPanelState(null);
+        exitingPanelClearTimeoutRef.current = null;
+      }, ANIMATION_DURATION);
+    }
+
+    return () => {
+      if (exitingPanelClearTimeoutRef.current != null) {
+        clearTimeout(exitingPanelClearTimeoutRef.current);
+      }
+    };
+  }, [depth, stack, computedExitingId]);
+
+  // Get visible panel IDs: active + behind (for swipe reveal) + exiting (for back animation)
+  const visiblePanelIds = React.useMemo(() => {
+    const ids: string[] = [];
+    // Behind panel (if exists)
+    if (depth > 0) {
+      ids.push(stack[depth - 1]);
+    }
+    // Active panel
+    ids.push(stack[depth]);
+    // Include exiting panel if not already in the list
+    if (exitingPanelId != null && !ids.includes(exitingPanelId)) {
+      ids.push(exitingPanelId);
+    }
+    return ids;
+  }, [stack, depth, exitingPanelId]);
+
   const handleItemClick = (item: typeof listItems[0]) => {
     setSelectedItem(item);
     navigation.push("detail");
@@ -98,11 +165,93 @@ export const StackBasics: React.FC = () => {
   const showBackButton = navigation.state.depth > 0;
   const showEditButton = navigation.state.depth === 1;
 
+  const renderBackButton = (): React.ReactNode => {
+    if (!showBackButton) {
+      return null;
+    }
+    return <BackButton onClick={backButtonProps.onClick} disabled={backButtonProps.disabled} />;
+  };
+
+  const renderPanelContent = (panelId: string): React.ReactNode => {
+    if (panelId === "list") {
+      return (
+        <div className={styles.panel}>
+          <ul className={styles.list}>
+            {listItems.map((item) => (
+              <li key={item.id} className={styles.listItem}>
+                <button
+                  className={styles.listItemButton}
+                  onClick={() => handleItemClick(item)}
+                >
+                  <span className={styles.listItemName}>{item.name}</span>
+                  <span className={styles.listItemDesc}>{item.description}</span>
+                  <span className={styles.chevron}>→</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      );
+    }
+
+    if (panelId === "detail") {
+      return (
+        <div className={styles.panel}>
+          <div className={styles.detailContent}>
+            <h2>{selectedItem?.name}</h2>
+            <p>{selectedItem?.description}</p>
+            <div className={styles.detailMeta}>
+              <span>ID: {selectedItem?.id}</span>
+            </div>
+            <p className={styles.hint}>
+              Swipe from the left edge to go back, or tap the Back button.
+            </p>
+          </div>
+        </div>
+      );
+    }
+
+    if (panelId === "edit") {
+      return (
+        <div className={styles.panel}>
+          <div className={styles.editContent}>
+            <h2>Edit {selectedItem?.name}</h2>
+            <div className={styles.form}>
+              <label className={styles.label}>
+                Name
+                <input
+                  type="text"
+                  className={styles.input}
+                  defaultValue={selectedItem?.name}
+                />
+              </label>
+              <label className={styles.label}>
+                Description
+                <textarea
+                  className={styles.textarea}
+                  defaultValue={selectedItem?.description}
+                />
+              </label>
+            </div>
+            <button
+              className={styles.saveButton}
+              onClick={() => navigation.go(-1)}
+            >
+              Save Changes
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
   return (
     <div className={styles.container}>
       {/* Header */}
       <header className={styles.header}>
-        {showBackButton && <BackButton onClick={backButtonProps.onClick} disabled={backButtonProps.disabled} />}
+        {renderBackButton()}
         <h1 className={styles.title}>{getHeaderTitle()}</h1>
         {showEditButton ? <EditButton onClick={handleEdit} /> : null}
       </header>
@@ -113,97 +262,32 @@ export const StackBasics: React.FC = () => {
         className={styles.stackContainer}
         {...containerProps}
       >
-        {/* List Panel */}
-        <StackContent
-          id="list"
-          depth={0}
-          isActive={navigation.currentPanelId === "list"}
-          displayMode="overlay"
-          transitionMode="css"
-          navigationState={navigation.state}
-          swipeProgress={navigation.currentPanelId === "list" ? progress : undefined}
-        >
-          <div className={styles.panel}>
-            <ul className={styles.list}>
-              {listItems.map((item) => (
-                <li key={item.id} className={styles.listItem}>
-                  <button
-                    className={styles.listItemButton}
-                    onClick={() => handleItemClick(item)}
-                  >
-                    <span className={styles.listItemName}>{item.name}</span>
-                    <span className={styles.listItemDesc}>{item.description}</span>
-                    <span className={styles.chevron}>→</span>
-                  </button>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </StackContent>
-
-        {/* Detail Panel */}
-        <StackContent
-          id="detail"
-          depth={1}
-          isActive={navigation.currentPanelId === "detail"}
-          displayMode="overlay"
-          transitionMode="css"
-          navigationState={navigation.state}
-          swipeProgress={navigation.currentPanelId === "detail" ? progress : undefined}
-        >
-          <div className={styles.panel}>
-            <div className={styles.detailContent}>
-              <h2>{selectedItem?.name}</h2>
-              <p>{selectedItem?.description}</p>
-              <div className={styles.detailMeta}>
-                <span>ID: {selectedItem?.id}</span>
-              </div>
-              <p className={styles.hint}>
-                Swipe from the left edge to go back, or tap the Back button.
-              </p>
-            </div>
-          </div>
-        </StackContent>
-
-        {/* Edit Panel */}
-        <StackContent
-          id="edit"
-          depth={2}
-          isActive={navigation.currentPanelId === "edit"}
-          displayMode="overlay"
-          transitionMode="css"
-          navigationState={navigation.state}
-          swipeProgress={navigation.currentPanelId === "edit" ? progress : undefined}
-        >
-          <div className={styles.panel}>
-            <div className={styles.editContent}>
-              <h2>Edit {selectedItem?.name}</h2>
-              <div className={styles.form}>
-                <label className={styles.label}>
-                  Name
-                  <input
-                    type="text"
-                    className={styles.input}
-                    defaultValue={selectedItem?.name}
-                  />
-                </label>
-                <label className={styles.label}>
-                  Description
-                  <textarea
-                    className={styles.textarea}
-                    defaultValue={selectedItem?.description}
-                  />
-                </label>
-              </div>
-              <button
-                className={styles.saveButton}
-                onClick={() => navigation.go(-1)}
-              >
-                Save Changes
-              </button>
-            </div>
-          </div>
-        </StackContent>
+        {visiblePanelIds.map((panelId) => {
+          // Panel is only "exiting" if it matches exitingPanelId AND is not in current stack
+          // This prevents the bug where a re-pushed panel is incorrectly treated as exiting
+          const isInCurrentStack = stack.includes(panelId);
+          const isExiting = panelId === exitingPanelId && !isInCurrentStack;
+          // For exiting panels, use depth + 1 since they were previously at the active position
+          const panelDepth = isExiting ? depth + 1 : stack.indexOf(panelId);
+          const isActive = panelDepth === depth && !isExiting;
+
+          return (
+            <SwipeStackContent
+              key={panelId}
+              id={panelId}
+              depth={panelDepth}
+              navigationDepth={depth}
+              isActive={isActive}
+              operationState={toContinuousOperationState(inputState)}
+              containerSize={containerSize}
+              animateOnMount={true}
+              animationDuration={ANIMATION_DURATION}
+              displayMode="overlay"
+            >
+              {renderPanelContent(panelId)}
+            </SwipeStackContent>
+          );
+        })}
       </div>
 
       {/* Debug info */}

package/src/demo/pages/Stack/components/StackTablet.spec.tsx

@@ -0,0 +1,110 @@
+/**
+ * @file Tests for StackTablet component logic.
+ *
+ * These tests focus on the panel visibility and depth calculation logic,
+ * particularly around the exitingPanelId handling during rapid navigation.
+ */
+
+// Empty export to make this file a module (prevents global scope pollution)
+export {};
+
+/**
+ * Pure function version of the isExiting logic for testing.
+ * This matches the logic in StackTablet.tsx.
+ */
+function computeIsExiting(
+  panelId: string,
+  exitingPanelId: string | null,
+  stack: readonly string[],
+): boolean {
+  // FIX: Check if panel is in current stack - if so, it's not exiting
+  const isInCurrentStack = stack.includes(panelId);
+  return panelId === exitingPanelId && !isInCurrentStack;
+}
+
+/**
+ * Pure function version of panelDepth calculation.
+ */
+function computePanelDepth(
+  panelId: string,
+  isExiting: boolean,
+  stack: readonly string[],
+  depth: number,
+): number {
+  return isExiting ? depth + 1 : stack.indexOf(panelId);
+}
+
+describe("StackTablet panel calculation logic", () => {
+  describe("isExiting calculation", () => {
+    it("returns false when panel is in current stack even if it matches exitingPanelId", () => {
+      // Bug scenario: user pushed panel again before exitingPanelId timeout cleared
+      const result = computeIsExiting("general", "general", ["root", "general"]);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe("panelDepth calculation", () => {
+    it("returns correct depth for re-pushed panel (not exiting)", () => {
+      // Bug scenario: general was exiting but got re-pushed
+      const stack = ["root", "general"];
+      const isExiting = computeIsExiting("general", "general", stack);
+      const depth = computePanelDepth("general", isExiting, stack, 1);
+      expect(depth).toBe(1); // stack.indexOf("general") = 1, NOT depth + 1 = 2
+    });
+  });
+
+  describe("rapid navigation scenarios", () => {
+    it("handles push → back → push sequence correctly", () => {
+      // Helper function to compute stack state for the final step
+      const computeFinalState = () => {
+        // Steps:
+        // 1. Initial: root active (stack: ["root"], depth: 0, exitingPanelId: null)
+        // 2. Push general (stack: ["root", "general"], depth: 1)
+        // 3. Back to root (stack: ["root"], depth: 0, exitingPanelId: "general")
+        // 4. Push general again BEFORE exitingPanelId clears
+        return {
+          stack: ["root", "general"] as readonly string[],
+          depth: 1,
+          exitingPanelId: "general",
+        };
+      };
+
+      const finalState = computeFinalState();
+
+      // Now general should NOT be exiting because it's in the stack
+      const isExiting = computeIsExiting("general", finalState.exitingPanelId, finalState.stack);
+      expect(isExiting).toBe(false);
+
+      // Panel depth should be correct
+      const panelDepth = computePanelDepth("general", isExiting, finalState.stack, finalState.depth);
+      expect(panelDepth).toBe(1); // Not 2!
+    });
+
+    it("handles Settings menu rapid navigation", () => {
+      // Helper function to compute final state after rapid navigation
+      const computeSettingsNavState = () => {
+        // Steps:
+        // 1. Initial: root (stack: ["root"], depth: 0)
+        // 2. Click "General" (stack: ["root", "general"], depth: 1)
+        // 3. Click "About" (stack: ["root", "general", "about"], depth: 2)
+        // 4. Back to General (stack: ["root", "general"], depth: 1, exitingPanelId: "about")
+        // 5. Immediately back to root (stack: ["root"], depth: 0, exitingPanelId: "general")
+        // 6. Immediately push General again
+        return {
+          stack: ["root", "general"] as readonly string[],
+          depth: 1,
+          exitingPanelId: "general",
+        };
+      };
+
+      const finalState = computeSettingsNavState();
+
+      // general should NOT be exiting
+      const isExiting = computeIsExiting("general", finalState.exitingPanelId, finalState.stack);
+      expect(isExiting).toBe(false);
+
+      const panelDepth = computePanelDepth("general", isExiting, finalState.stack, finalState.depth);
+      expect(panelDepth).toBe(1);
+    });
+  });
+});

package/src/demo/pages/Stack/components/StackTablet.tsx

@@ -8,6 +8,7 @@ import { useStackNavigation } from "../../../../modules/stack/useStackNavigation
 import { useStackSwipeInput } from "../../../../modules/stack/useStackSwipeInput.js";
 import { SwipeStackContent } from "../../../../modules/stack/SwipeStackContent.js";
 import { useResizeObserver } from "../../../../hooks/useResizeObserver.js";
+import { toContinuousOperationState } from "../../../../hooks/gesture/types.js";
 import type { StackPanel } from "../../../../modules/stack/types.js";
 import styles from "./StackTablet.module.css";
 import "../../../styles/stack-themes.css";
@@ -271,36 +272,53 @@ export const StackTablet: React.FC<StackTabletProps> = ({ theme = "ios" }) => {
   // Get visible panels: active + behind (for swipe reveal) + exiting (for back animation)
   const { stack, depth } = navigation.state;
 
-  // Track exiting panel when navigating back
-  const [exitingPanelId, setExitingPanelId] = React.useState<string | null>(null);
+  // Track exiting panel when navigating back.
+  // CRITICAL: exitingPanelId must be computed synchronously during render
+  // to prevent the exiting panel from being unmounted for a frame.
+  // If the panel unmounts, it loses its position state and causes a visual jump.
   const prevDepthRef = React.useRef(depth);
   const prevStackRef = React.useRef<ReadonlyArray<string>>(stack);
+  const exitingPanelClearTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [exitingPanelState, setExitingPanelState] = React.useState<string | null>(null);
 
-  // Detect when we navigate back and need to animate out
-  React.useLayoutEffect(() => {
-    const prevDepth = prevDepthRef.current;
-    const prevStack = prevStackRef.current;
+  // Compute exiting panel ID synchronously during render
+  // This ensures the panel stays in the render tree even on the navigation change render
+  const prevDepth = prevDepthRef.current;
+  const prevStack = prevStackRef.current;
+  const isNavigatingBack = depth < prevDepth;
+  const computedExitingId = isNavigatingBack ? (prevStack[prevDepth] ?? null) : null;
+
+  // Use computed value if navigating back, otherwise use state (for timeout-based cleanup)
+  const exitingPanelId = computedExitingId ?? exitingPanelState;
 
+  // Update refs and state in effect
+  React.useLayoutEffect(() => {
     // Update refs
     prevDepthRef.current = depth;
     prevStackRef.current = stack;
 
-    // Check if we went back (depth decreased)
-    if (depth < prevDepth) {
-      // The panel at prevDepth is exiting
-      const exitingId = prevStack[prevDepth];
-      if (exitingId != null) {
-        setExitingPanelId(exitingId);
-
-        // Clear exiting panel after animation completes
-        const timeoutId = setTimeout(() => {
-          setExitingPanelId(null);
-        }, THEME_DURATIONS[selectedTheme]);
+    // If we just started navigating back, update state and schedule cleanup
+    if (computedExitingId != null) {
+      setExitingPanelState(computedExitingId);
 
-        return () => clearTimeout(timeoutId);
+      // Clear any existing timeout
+      if (exitingPanelClearTimeoutRef.current != null) {
+        clearTimeout(exitingPanelClearTimeoutRef.current);
       }
+
+      // Clear exiting panel after animation completes
+      exitingPanelClearTimeoutRef.current = setTimeout(() => {
+        setExitingPanelState(null);
+        exitingPanelClearTimeoutRef.current = null;
+      }, THEME_DURATIONS[selectedTheme]);
     }
-  }, [depth, stack, selectedTheme]);
+
+    return () => {
+      if (exitingPanelClearTimeoutRef.current != null) {
+        clearTimeout(exitingPanelClearTimeoutRef.current);
+      }
+    };
+  }, [depth, stack, selectedTheme, computedExitingId]);
 
   const visiblePanelIds = React.useMemo(() => {
     const ids = [stack[depth]]; // Active panel
@@ -327,7 +345,10 @@ export const StackTablet: React.FC<StackTabletProps> = ({ theme = "ios" }) => {
               return null;
             }
 
-            const isExiting = panelId === exitingPanelId;
+            // Panel is only "exiting" if it matches exitingPanelId AND is not in current stack
+            // This prevents the bug where a re-pushed panel is incorrectly treated as exiting
+            const isInCurrentStack = stack.includes(panelId);
+            const isExiting = panelId === exitingPanelId && !isInCurrentStack;
             // For exiting panels, use depth + 1 since they were previously at the active position
             const panelDepth = isExiting ? depth + 1 : stack.indexOf(panelId);
             const isActive = panelDepth === depth && !isExiting;
@@ -339,7 +360,7 @@ export const StackTablet: React.FC<StackTabletProps> = ({ theme = "ios" }) => {
                 depth={panelDepth}
                 navigationDepth={depth}
                 isActive={isActive}
-                inputState={inputState}
+                operationState={toContinuousOperationState(inputState)}
                 containerSize={containerSize}
                 animateOnMount={true}
                 animationDuration={THEME_DURATIONS[selectedTheme]}

package/src/demo/routes.tsx

@@ -27,6 +27,14 @@ import PL_Overlays from "./pages/PanelLayout/draggable-overlays";
 import DR_Basics from "./pages/Drawer/basics";
 import DR_Menu from "./pages/Drawer/menu";
 import DR_Animations from "./pages/Drawer/animations";
+import DR_Swipe from "./pages/Drawer/swipe";
+import DR_Reveal from "./pages/Drawer/reveal";
+
+import DL_Modal from "./pages/Dialog/modal";
+import DL_Alerts from "./pages/Dialog/alerts";
+import DL_CustomAlert from "./pages/Dialog/custom-alert";
+import DL_Swipe from "./pages/Dialog/swipe";
+import DL_Card from "./pages/Dialog/card";
 
 import PS_Preview from "./pages/PanelSystem/preview";
 import PS_Tabbar from "./pages/PanelSystem/tabbar";
@@ -46,7 +54,7 @@ import ST_Tablet from "./pages/Stack/tablet";
 
 import SH_Basics from "./pages/StickyHeader/basics";
 
-import { FiGrid, FiLayers, FiColumns, FiMaximize2, FiBox, FiCpu, FiSmartphone, FiSidebar, FiNavigation, FiImage } from "react-icons/fi";
+import { FiGrid, FiLayers, FiColumns, FiMaximize2, FiBox, FiCpu, FiSmartphone, FiSidebar, FiNavigation, FiImage, FiMessageSquare } from "react-icons/fi";
 
 export type DemoPage = {
   id: string;
@@ -85,6 +93,21 @@ export const demoCategories: DemoCategory[] = [
       { id: "basics", label: "Basics", path: "basics", element: <DR_Basics /> },
       { id: "menu", label: "Menu", path: "menu", element: <DR_Menu /> },
       { id: "animations", label: "Animations", path: "animations", element: <DR_Animations /> },
+      { id: "swipe", label: "Swipe Gestures", path: "swipe", element: <DR_Swipe /> },
+      { id: "reveal", label: "Reveal Mode", path: "reveal", element: <DR_Reveal /> },
+    ],
+  },
+  {
+    id: "dialog",
+    label: "Dialog",
+    icon: <FiMessageSquare />,
+    base: "/components/dialog",
+    pages: [
+      { id: "modal", label: "Modal", path: "modal", element: <DL_Modal /> },
+      { id: "alerts", label: "Alert / Confirm / Prompt", path: "alerts", element: <DL_Alerts /> },
+      { id: "custom-alert", label: "Custom Alert Component", path: "custom-alert", element: <DL_CustomAlert /> },
+      { id: "swipe", label: "Swipe Dismiss", path: "swipe", element: <DL_Swipe /> },
+      { id: "card", label: "Card Expansion", path: "card", element: <DL_Card /> },
     ],
   },
   {

package/src/dialog/index.ts

@@ -0,0 +1,85 @@
+/**
+ * @file Dialog entry point - Modal and alert/confirm/prompt dialogs
+ * @packageDocumentation
+ *
+ * This is a subpath export entry point for `react-panel-layout/dialog`.
+ *
+ * ## Overview
+ * Dialog provides modal dialogs and imperative alert/confirm/prompt APIs
+ * using native HTML dialog element for proper accessibility and top-layer rendering.
+ *
+ * ## Installation
+ * ```ts
+ * import { Modal, useDialog, DialogContainer } from "react-panel-layout/dialog";
+ * ```
+ *
+ * ## Modal Usage
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Modal
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   header={{ title: "Settings" }}
+ * >
+ *   <form>
+ *     <input type="text" placeholder="Name" />
+ *     <button type="submit">Save</button>
+ *   </form>
+ * </Modal>
+ * ```
+ *
+ * ## useDialog Hook Usage
+ * ```tsx
+ * function MyComponent() {
+ *   const { alert, confirm, prompt, Outlet } = useDialog();
+ *
+ *   const handleClick = async () => {
+ *     await alert("Hello!");
+ *
+ *     const confirmed = await confirm({
+ *       message: "Are you sure?",
+ *       confirmLabel: "Yes",
+ *       cancelLabel: "No",
+ *     });
+ *
+ *     if (confirmed) {
+ *       const name = await prompt({
+ *         message: "Enter your name:",
+ *         defaultValue: "Anonymous",
+ *       });
+ *       console.log("Name:", name);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <button onClick={handleClick}>Show dialogs</button>
+ *       <Outlet />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+
+// Components
+export { Modal } from "../modules/dialog/Modal.js";
+export { DialogContainer } from "../modules/dialog/DialogContainer.js";
+export { AlertDialog } from "../modules/dialog/AlertDialog.js";
+
+// Hooks
+export { useDialog } from "../modules/dialog/useDialog.js";
+export { useDialogContainer } from "../modules/dialog/useDialogContainer.js";
+
+// Types
+export type {
+  ModalProps,
+  ModalHeader,
+  DialogContainerProps,
+  DialogTransitionMode,
+  AlertOptions,
+  ConfirmOptions,
+  PromptOptions,
+  AlertDialogProps,
+  UseDialogReturn,
+} from "../modules/dialog/types.js";