react-panel-layout 0.6.0 → 0.7.0

package/dist/dialog/index.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @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 />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export { Modal } from "../modules/dialog/Modal.js";
+export { DialogContainer } from "../modules/dialog/DialogContainer.js";
+export { AlertDialog } from "../modules/dialog/AlertDialog.js";
+export { useDialog } from "../modules/dialog/useDialog.js";
+export { useDialogContainer } from "../modules/dialog/useDialogContainer.js";
+export type { ModalProps, ModalHeader, DialogContainerProps, DialogTransitionMode, AlertOptions, ConfirmOptions, PromptOptions, AlertDialogProps, UseDialogReturn, } from "../modules/dialog/types.js";

package/dist/floating.js

@@ -1,4 +1,4 @@
-import { e, d as l, F as t, a as o, c as F, b as i } from "./FloatingPanelFrame-SgYLc6Ud.js";
+import { e, d as l, F as t, a as o, c as F, b as i } from "./FloatingPanelFrame-3eU9AwPo.js";
 export {
   e as FloatingPanelContent,
   l as FloatingPanelControls,

package/dist/grid.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./GridLayout-B4VRsC0r.cjs"),r=require("./FloatingWindow-TCDNY5gE.cjs");exports.GridLayerList=e.GridLayerList;exports.GridLayerResizeHandles=e.GridLayerResizeHandles;exports.GridLayout=e.GridLayout;exports.GridTrackResizeHandle=e.GridTrackResizeHandle;exports.useGridPlacements=e.useGridPlacements;exports.useGridTracks=e.useGridTracks;exports.GridLayoutProvider=r.GridLayoutProvider;exports.useGridLayoutContext=r.useGridLayoutContext;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./GridLayout-DNOClFzz.cjs"),r=require("./FloatingWindow-Cvyokf0m.cjs");exports.GridLayerList=e.GridLayerList;exports.GridLayerResizeHandles=e.GridLayerResizeHandles;exports.GridLayout=e.GridLayout;exports.GridTrackResizeHandle=e.GridTrackResizeHandle;exports.useGridPlacements=e.useGridPlacements;exports.useGridTracks=e.useGridTracks;exports.GridLayoutProvider=r.GridLayoutProvider;exports.useGridLayoutContext=r.useGridLayoutContext;
 //# sourceMappingURL=grid.cjs.map

package/dist/grid.js

@@ -1,5 +1,5 @@
-import { a as e, b as s, G as d, c as i, u as G, d as o } from "./GridLayout-BltqeCPK.js";
-import { G as u, u as L } from "./FloatingWindow-BpdOpg_L.js";
+import { a as e, b as s, G as d, c as i, u as G, d as o } from "./GridLayout-B4aCqSyd.js";
+import { G as u, u as L } from "./FloatingWindow-Bw2djgpz.js";
 export {
   e as GridLayerList,
   s as GridLayerResizeHandles,

package/dist/hooks/gesture/testing/createGestureSimulator.d.ts

@@ -1,3 +1,10 @@
+/**
+ * @file Test utility for simulating gesture events.
+ *
+ * Provides a fluent API for simulating pointer events in tests,
+ * making it easier to test swipe and drag gestures.
+ */
+import type * as React from "react";
 /**
  * 2D point for gesture coordinates.
  */

package/dist/hooks/gesture/types.d.ts

@@ -6,17 +6,15 @@
  * - Input: how to command (swipe, click, keyboard)
  * - Presentation: how to show (animation, transition)
  *
- * This file defines types for the Input layer.
+ * This file defines types for the Input layer, including the abstract
+ * ContinuousOperationState that represents any continuous state transition
+ * (whether controlled by human gesture or system animation).
  */
 import type * as React from "react";
 /**
  * Axis for gesture detection.
  */
 export type GestureAxis = "horizontal" | "vertical";
-/**
- * Phase of swipe input lifecycle.
- */
-export type SwipeInputPhase = "idle" | "tracking" | "swiping" | "ended";
 /**
  * 2D vector for displacement and velocity.
  */
@@ -24,6 +22,51 @@ export type Vector2 = {
     x: number;
     y: number;
 };
+/**
+ * Phase of a continuous operation lifecycle.
+ * - "idle": No operation in progress
+ * - "operating": Operation is in progress (human or system controlled)
+ * - "ended": Operation has completed
+ */
+export type ContinuousOperationPhase = "idle" | "operating" | "ended";
+/**
+ * State of a continuous operation.
+ *
+ * This is the abstract representation of any operation that occurs over time,
+ * whether controlled by human gesture or system animation. Components that
+ * accept this state can respond to both input types uniformly.
+ */
+export type ContinuousOperationState = {
+    /** Current phase of the operation */
+    phase: ContinuousOperationPhase;
+    /** Displacement from start position in pixels */
+    displacement: Vector2;
+    /** Current velocity in pixels per millisecond */
+    velocity: Vector2;
+};
+/**
+ * Initial idle state for ContinuousOperationState.
+ */
+export declare const IDLE_CONTINUOUS_OPERATION_STATE: ContinuousOperationState;
+/**
+ * Convert SwipeInputPhase to ContinuousOperationPhase.
+ * - "idle" → "idle"
+ * - "tracking" | "swiping" → "operating"
+ * - "ended" → "ended"
+ */
+export declare function toContinuousPhase(phase: SwipeInputPhase): ContinuousOperationPhase;
+/**
+ * Convert SwipeInputState to ContinuousOperationState.
+ */
+export declare function toContinuousOperationState(state: SwipeInputState): ContinuousOperationState;
+/**
+ * Phase of swipe input lifecycle.
+ * - "idle": No swipe in progress
+ * - "tracking": Pointer down, tracking movement (direction not yet locked)
+ * - "swiping": Direction locked, actively swiping
+ * - "ended": Swipe gesture completed
+ */
+export type SwipeInputPhase = "idle" | "tracking" | "swiping" | "ended";
 /**
  * Point with timestamp for velocity calculation.
  */

package/dist/hooks/gesture/utils.d.ts

@@ -38,3 +38,22 @@ export type GestureContainerProps = React.HTMLAttributes<HTMLElement> & {
  * @returns Merged container props with combined styles and handlers
  */
 export declare const mergeGestureContainerProps: (...propsArray: GestureContainerProps[]) => GestureContainerProps;
+/**
+ * Check if an element is scrollable in any direction.
+ */
+export declare function isScrollableElement(element: HTMLElement): boolean;
+/**
+ * Check if we should start drag based on scroll state.
+ * Returns false if the target is inside a scrollable element.
+ */
+export declare function shouldStartDrag(event: React.PointerEvent, container: HTMLElement): boolean;
+/**
+ * Check if an element or its ancestors are scrollable in the specified direction.
+ * Returns true if scrolling is possible and would block the swipe gesture.
+ *
+ * @param element - The target element to check
+ * @param container - The container boundary
+ * @param axis - The axis to check ("x" or "y")
+ * @param direction - The swipe direction (1 = right/down, -1 = left/up)
+ */
+export declare function isScrollableInDirection(element: HTMLElement, container: HTMLElement, axis: "x" | "y", direction: 1 | -1): boolean;

package/dist/hooks/useAnimationFrame.d.ts

@@ -17,6 +17,8 @@ export declare const easings: {
     readonly easeOutQuart: (t: number) => number;
     /** Ease in out cubic */
     readonly easeInOutCubic: (t: number) => number;
+    /** Ease in expo (accelerating, for "suck in" effect) */
+    readonly easeInExpo: (t: number) => number;
 };
 /**
  * Animation state passed to callbacks.

package/dist/hooks/useOperationContinuity.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Result from useOperationContinuity hook.
+ */
+export type UseOperationContinuityResult<T> = {
+    /** The effective value (retained during operation, current after) */
+    value: T;
+    /**
+     * True if the value changed during the operation.
+     *
+     * This is useful for determining how to handle the transition when the
+     * operation ends. For example, if the role changed during a swipe,
+     * the target position change at operation end should snap rather than animate.
+     *
+     * This flag is true on the render where shouldRetainPrevious becomes false
+     * (operation end), allowing consumers to handle the transition appropriately.
+     * It resets to false on subsequent renders.
+     */
+    changedDuringOperation: boolean;
+    /**
+     * True on the render where the operation just ended.
+     *
+     * This is true when shouldRetainPrevious transitions from true to false,
+     * regardless of whether the value changed. Use this to detect the moment
+     * when an operation completes and delay any immediate animations.
+     *
+     * In the over-swipe case, this helps prevent unwanted snap-back animation
+     * in the intermediate render before navigation changes.
+     */
+    operationJustEnded: boolean;
+};
+/**
+ * Hook for maintaining value continuity during continuous operations.
+ *
+ * When an operation is in progress, this hook retains the previous value
+ * to prevent sudden visual changes from state updates. Once the operation
+ * ends (shouldRetainPrevious becomes false), the new value is accepted.
+ *
+ * Additionally, this hook tracks whether the value changed during the operation,
+ * which is useful for determining animation behavior at operation end.
+ *
+ * IMPORTANT: This hook is designed to be idempotent during render to work
+ * correctly with React StrictMode, which calls the render function twice.
+ * All ref mutations happen in useLayoutEffect, not during render.
+ *
+ * @param value - The current value from external state
+ * @param shouldRetainPrevious - Whether to retain the previous value (true during operation)
+ * @returns Object with effective value and whether it changed during operation
+ *
+ * @example
+ * ```tsx
+ * // Maintain role continuity during swipe
+ * const { value: effectiveRole, changedDuringOperation } = useOperationContinuity(
+ *   role,
+ *   displacement > 0,
+ * );
+ *
+ * // Use changedDuringOperation to skip animation on operation end
+ * useSwipeContentTransform({
+ *   // ...
+ *   skipTargetChangeAnimation: changedDuringOperation,
+ * });
+ * ```
+ */
+export declare function useOperationContinuity<T>(value: T, shouldRetainPrevious: boolean): UseOperationContinuityResult<T>;

package/dist/hooks/useResizeObserver.d.ts

@@ -1,15 +1,47 @@
 /**
  * @file Shared useResizeObserver hook with cached observer instances.
+ *
+ * Provides element size observation with shared observers for memory efficiency.
+ * Size becomes available after the first useLayoutEffect cycle completes.
+ *
+ * Note: Due to React's effect execution order (children before parents),
+ * child components may see containerSize=0 on their first effect run.
+ * This is a React constraint, not a bug. Consumers should check for
+ * valid size before using it for calculations like animation positions.
  */
 import * as React from "react";
+/**
+ * Clear observer cache. Exported for testing purposes.
+ */
+export declare function clearObserverCache(): void;
 /**
  * Observe size changes for a given element reference using shared resize observers.
  *
  * @param ref - Ref holding the element whose size to monitor.
  * @param options - Resize observer configuration.
  * @returns Latest resize entry and a derived DOMRect snapshot.
+ *
+ * @remarks
+ * The `rect` will be `null` on the first render. After the initial
+ * useLayoutEffect runs and triggers a re-render, `rect` will contain
+ * the measured size.
+ *
+ * Due to React's effect execution order, child components' effects run
+ * before parent effects. If you pass `rect.width` to a child as a prop,
+ * the child's first effect will see `0` (or whatever default you use).
+ * This is expected React behavior.
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const { rect } = useResizeObserver(containerRef, { box: "border-box" });
+ * const width = rect?.width ?? 0;
+ *
+ * // Check if size is ready before using for calculations
+ * const isReady = rect !== null;
+ * ```
  */
 export declare function useResizeObserver<T extends HTMLElement>(ref: React.RefObject<T | null>, { box }: ResizeObserverOptions): {
     entry: ResizeObserverEntry | null;
-    rect: DOMRectReadOnly | null;
+    rect: DOMRect | null;
 };

package/dist/hooks/useSharedElementTransition.d.ts

@@ -0,0 +1,112 @@
+/**
+ * @file Hook for View Transitions API shared element animations.
+ *
+ * Enables smooth morph animations between a source element (e.g., card)
+ * and a target element (e.g., expanded view) using CSS view-transition-name.
+ * Supports swipe-to-dismiss with the expanded view animating back to source.
+ */
+import * as React from "react";
+/**
+ * Check if View Transitions API is supported.
+ */
+export declare function supportsViewTransitions(): boolean;
+type ViewTransitionHandle = {
+    finished: Promise<void>;
+    ready: Promise<void>;
+    updateCallbackDone: Promise<void>;
+    skipTransition: () => void;
+};
+/**
+ * Start a view transition with the given callback.
+ */
+export declare function startViewTransition(callback: () => void): ViewTransitionHandle | null;
+/**
+ * Options for useSharedElementTransition hook.
+ */
+export type UseSharedElementTransitionOptions<T> = {
+    /**
+     * Function to generate a unique transition name for an item.
+     * Multiple names can be returned for nested shared elements.
+     */
+    getTransitionName: (item: T) => string | string[];
+    /**
+     * Function to get a unique key for comparison.
+     * Defaults to using getTransitionName result.
+     */
+    getKey?: (item: T) => string;
+    /** Enable swipe to dismiss. @default true */
+    swipeDismissible?: boolean;
+    /** Threshold ratio (0-1) to trigger dismiss. @default 0.3 */
+    dismissThreshold?: number;
+};
+/** 2D vector */
+type Vector2 = {
+    x: number;
+    y: number;
+};
+/**
+ * Result from useSharedElementTransition hook.
+ */
+export type UseSharedElementTransitionResult<T> = {
+    /** Currently expanded item, or null if none */
+    expandedItem: T | null;
+    /** Expand an item with view transition */
+    expand: (item: T) => void;
+    /** Collapse the expanded item with view transition */
+    collapse: () => void;
+    /**
+     * Get style props for a source element (e.g., card).
+     */
+    getSourceProps: (item: T, nameIndex?: number) => {
+        style: React.CSSProperties;
+    };
+    /**
+     * Get style props for the target element (e.g., expanded view).
+     * Includes transform for swipe tracking.
+     */
+    getTargetProps: (nameIndex?: number) => {
+        style: React.CSSProperties;
+    };
+    /**
+     * Get swipe container props (onPointerDown, style).
+     * Apply to the swipeable container element.
+     */
+    getSwipeContainerProps: () => React.HTMLAttributes<HTMLElement> & {
+        style: React.CSSProperties;
+    };
+    /** Whether currently being swiped */
+    isSwiping: boolean;
+    /** Current displacement during swipe */
+    displacement: Vector2;
+    /** Whether View Transitions API is supported */
+    isSupported: boolean;
+};
+/**
+ * Hook for managing shared element transitions using View Transitions API.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   expandedItem, expand, collapse,
+ *   getSourceProps, getTargetProps, getSwipeContainerProps
+ * } = useSharedElementTransition({
+ *   getTransitionName: (album) => [`album-${album.id}`, `album-art-${album.id}`],
+ * });
+ *
+ * // Source (card)
+ * <div {...getSourceProps(album, 0)}>
+ *   <img {...getSourceProps(album, 1)} />
+ * </div>
+ *
+ * // Target (expanded view) - apply swipe props to container
+ * {expandedItem && (
+ *   <div {...getSwipeContainerProps()}>
+ *     <div {...getTargetProps(0)}>
+ *       <img {...getTargetProps(1)} />
+ *     </div>
+ *   </div>
+ * )}
+ * ```
+ */
+export declare function useSharedElementTransition<T>(options: UseSharedElementTransitionOptions<T>): UseSharedElementTransitionResult<T>;
+export {};

package/dist/hooks/useSwipeContentTransform.d.ts

@@ -19,7 +19,7 @@ export type UseSwipeContentTransformOptions = {
     /** Current swipe displacement in pixels */
     displacement: number;
     /** Whether swipe gesture is active */
-    isSwiping: boolean;
+    isOperating: boolean;
     /** Axis of transformation */
     axis?: GestureAxis;
     /** Duration of snap animation in ms */
@@ -38,6 +38,13 @@ export type UseSwipeContentTransformOptions = {
      * Use this for push animations where new panel comes from off-screen.
      */
     initialPx?: number;
+    /**
+     * Skip animation when targetPx changes.
+     * Use this when the target changed during an operation (from useOperationContinuity).
+     * When true, target changes will snap instead of animate.
+     * @default false
+     */
+    skipTargetChangeAnimation?: boolean;
 };
 /**
  * Animation direction information.
@@ -72,7 +79,7 @@ export type UseSwipeContentTransformResult = {
  *   elementRef: containerRef,
  *   targetPx: 0,
  *   displacement: inputState.displacement.x,
- *   isSwiping: inputState.phase === "swiping",
+ *   isOperating: inputState.phase === "swiping",
  * });
  * ```
  */

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./GridLayout-B4VRsC0r.cjs"),t=require("./FloatingWindow-TCDNY5gE.cjs"),s=require("./HorizontalDivider-B5Z-KZLk.cjs"),u=require("./ResizeHandle-CScipO5l.cjs"),l=require("react"),c=require("./useFloatingState-C4kRaW_R.cjs"),d=require("./styles-qf6ptVLD.cjs"),i=require("./PanelSystem-Bs8bQwQF.cjs");function y(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const S=y(l),g=()=>{const{layerId:e}=t.useLayerInstance(),{getLayerHandleProps:r}=t.useGridLayoutContext();return S.useMemo(()=>r(e),[r,e])};exports.GridLayout=o.GridLayout;exports.Drawer=t.Drawer;exports.DrawerLayers=t.DrawerLayers;exports.FloatingWindow=t.FloatingWindow;exports.runTransition=t.runTransition;exports.useTransitionState=t.useTransitionState;exports.HorizontalDivider=s.HorizontalDivider;exports.ResizeHandle=u.ResizeHandle;exports.useFloatingState=c.useFloatingState;exports.CSS_VAR_PREFIX=d.CSS_VAR_PREFIX;exports.PanelSystem=i.PanelSystem;exports.buildInitialState=i.buildInitialState;exports.useLayerDragHandle=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./GridLayout-DNOClFzz.cjs"),t=require("./FloatingWindow-Cvyokf0m.cjs"),s=require("./HorizontalDivider-_pgV4Mcv.cjs"),u=require("./ResizeHandle-CBcAS918.cjs"),l=require("react"),c=require("./useFloatingState-C4kRaW_R.cjs"),d=require("./styles-qf6ptVLD.cjs"),i=require("./PanelSystem-B8Igvnb2.cjs");function y(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const S=y(l),g=()=>{const{layerId:e}=t.useLayerInstance(),{getLayerHandleProps:r}=t.useGridLayoutContext();return S.useMemo(()=>r(e),[r,e])};exports.GridLayout=o.GridLayout;exports.Drawer=t.Drawer;exports.DrawerLayers=t.DrawerLayers;exports.FloatingWindow=t.FloatingWindow;exports.runTransition=t.runTransition;exports.useTransitionState=t.useTransitionState;exports.HorizontalDivider=s.HorizontalDivider;exports.ResizeHandle=u.ResizeHandle;exports.useFloatingState=c.useFloatingState;exports.CSS_VAR_PREFIX=d.CSS_VAR_PREFIX;exports.PanelSystem=i.PanelSystem;exports.buildInitialState=i.buildInitialState;exports.useLayerDragHandle=g;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,12 +1,12 @@
-import { G as m } from "./GridLayout-BltqeCPK.js";
-import { a as e, u as t } from "./FloatingWindow-BpdOpg_L.js";
-import { D as l, b as d, F as f, r as x, c as y } from "./FloatingWindow-BpdOpg_L.js";
-import { H as L } from "./HorizontalDivider-WF1k_qND.js";
-import { R as D } from "./ResizeHandle-CdA_JYfN.js";
+import { G as m } from "./GridLayout-B4aCqSyd.js";
+import { a as e, u as t } from "./FloatingWindow-Bw2djgpz.js";
+import { D as l, b as d, F as f, r as x, c as y } from "./FloatingWindow-Bw2djgpz.js";
+import { H as L } from "./HorizontalDivider-DdxzfV0l.js";
+import { R as D } from "./ResizeHandle-CXjc1meV.js";
 import * as o from "react";
 import { u as R } from "./useFloatingState-tEfA_wbc.js";
-import { C as F } from "./styles-DPPuJ0sf.js";
-import { P, v as w } from "./PanelSystem-Dr1TBhxM.js";
+import { C as F } from "./styles-NkjuMOVS.js";
+import { P, v as w } from "./PanelSystem-DDUSFjXD.js";
 const n = () => {
   const { layerId: r } = e(), { getLayerHandleProps: a } = t();
   return o.useMemo(() => a(r), [a, r]);

package/dist/modules/dialog/AlertDialog.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @file AlertDialog component for alert, confirm, and prompt dialogs
+ */
+import * as React from "react";
+import type { AlertDialogProps } from "./types";
+/**
+ * Internal component for alert, confirm, and prompt dialogs
+ */
+export declare const AlertDialog: React.FC<AlertDialogProps>;

package/dist/modules/dialog/DialogContainer.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @file Base dialog container component using native <dialog> element
+ */
+import * as React from "react";
+import type { DialogContainerProps } from "./types.js";
+/**
+ * Base container for dialog-based overlays using native <dialog> element.
+ * Opens in the browser's top layer, ensuring it appears above all other content.
+ *
+ * Supports three transition modes:
+ * - "none": No animation
+ * - "css": CSS-based fade/scale animation (default)
+ * - "swipe": Swipeable with multi-phase animation
+ *
+ * @example
+ * ```tsx
+ * <DialogContainer
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <div>Dialog content</div>
+ * </DialogContainer>
+ * ```
+ *
+ * @example Swipeable dialog
+ * ```tsx
+ * <DialogContainer
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   transitionMode="swipe"
+ *   openDirection="bottom"
+ * >
+ *   <div>Swipe down to close</div>
+ * </DialogContainer>
+ * ```
+ */
+export declare const DialogContainer: React.FC<DialogContainerProps>;

package/dist/modules/dialog/Modal.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @file Modal component - Centered modal dialog with optional chrome
+ */
+import * as React from "react";
+import type { ModalProps } from "./types";
+/**
+ * Modal component for displaying centered dialogs.
+ * Uses native <dialog> element for proper accessibility and top-layer rendering.
+ *
+ * @example
+ * ```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>
+ * ```
+ */
+export declare const Modal: React.FC<ModalProps>;

package/dist/modules/dialog/SwipeDialogContainer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file Swipeable dialog container component.
+ *
+ * This component extends the base dialog functionality with swipe-to-dismiss
+ * and multi-phase animations. It uses native <dialog> element for top layer
+ * positioning and custom transform animations.
+ */
+import * as React from "react";
+import type { DialogContainerProps } from "./types.js";
+/**
+ * Swipeable dialog container with multi-phase animation.
+ *
+ * Uses native <dialog> for top layer positioning and custom JS animations
+ * for swipe-to-dismiss functionality.
+ */
+export declare const SwipeDialogContainer: React.FC<DialogContainerProps>;