@ahrowe/ui 0.36.0 → 0.37.0

package/README.md

@@ -146,6 +146,7 @@ runs where `@ahrowe/ui` is installed.
 | `emptyFloorPlan`, `addWall`, `derivePlan` | The shared data model behind `RoomDrawer` and `RoomViewer` |
 | `FormValidator`, `Validators`, `useFormValidator` | Track and validate a single form field's value, dirty/touched state, and errors |
 | `useFormValidatorGroup`, `FormValidatorGroup`, `FormValidator`, `Validators` | Manage a whole form — multiple fields, a single submit handler, validate-on-submit, dirty/touched tracking across the form, and mapping server-side errors back onto the right fields |
+| `useHotkeys`, `formatHotkey`, `useMediaQuery`, `useCoarsePointer`, `useVisualViewportSize`, `useScrollEdges`, `useSwipeDismiss`, `useOverlay`, `tabbablesIn` | Standalone React hooks the library uses internally and publishes for the same jobs in your own code: keyboard shortcuts, media queries, the mobile keyboard's viewport, scroll-edge detection, swipe-to-dismiss, and the Escape / focus-trap / scroll-lock behaviour behind a custom overlay |
 | `IconPicker` | Pick one item from a visual icon/image grid — category selectors, emoji-style pickers, avatar selectors, anything where each option is best represented by an icon or image rather than text alone |
 | `IdleManager` | Show something only once the user has stopped interacting — a screen saver, a session-timeout warning, an "are you still there?" prompt, an idle dashboard view |
 | `Input`, `InputType` | Text input with floating label, validation state, and type variants |
@@ -153,8 +154,8 @@ runs where `@ahrowe/ui` is installed.
 | `InteractableDiv` | Accessible `<div>` that behaves like a button — click and keyboard (Enter/Space) events, with proper ARIA semantics |
 | `KanbanBoard`, `KanbanColumn` | Drag-and-drop board with columns — task management, workflow stages, status boards (e.g. Todo / In Progress / Done) |
 | `KlipyPicker` | GIF picker backed by the Klipy API — chat reactions, message composers, content authoring tools |
-| `IconLoading`, `SpinnerLoading` | Loading indicators for async operations — page loads, data fetching, button actions (when not using Button's built-in `isLoading`) |
-| `Menu` | A list of actions hanging off a trigger — a row's "more" button, a toolbar overflow, a context menu on a card |
+| `SpinnerLoading` | A loading indicator for async operations: page loads, data fetching, or covering a region while it refreshes |
+| `Menu`, `menuHotkeys` | A list of actions hanging off a trigger — a row's "more" button, a toolbar overflow, a context menu on a card |
 | `Modal` | Full overlay dialog — forms, detail views, confirmations, wizards that need to block the rest of the UI |
 | `MultiSelect` | Pick several options from a list |
 | `NumberInput` | Numeric input with formatting — prices, quantities, percentages, phone numbers with separators |

package/dist/cjs-types/common/hooks/index.d.ts

@@ -0,0 +1,13 @@
+export { useHotkeys, formatHotkey } from './useHotkeys.js';
+export type { HotkeyHandler, HotkeyMap, UseHotkeysOptions } from './useHotkeys.js';
+export { useMediaQuery } from './useMediaQuery.js';
+export { useCoarsePointer } from './useCoarsePointer.js';
+export { useVisualViewportSize } from './useVisualViewportSize.js';
+export type { VisualViewportSize } from './useVisualViewportSize.js';
+export { useScrollEdges } from './useScrollEdges.js';
+export type { ScrollEdges, ScrollEdgesOptions } from './useScrollEdges.js';
+export { useSwipeDismiss } from './useSwipeDismiss.js';
+export type { UseSwipeDismissOptions, UseSwipeDismissResult } from './useSwipeDismiss.js';
+export { useOverlay } from './useOverlay.js';
+export type { UseOverlayArgs } from './useOverlay.js';
+export { tabbablesIn } from './useFocusBoundary.js';

package/dist/cjs-types/common/hooks/useHotkeys.d.ts

@@ -0,0 +1,45 @@
+import { RefObject } from 'react';
+export type HotkeyHandler = (event: KeyboardEvent) => void;
+/** Combo → handler, e.g. `{ 'mod+k': open, Escape: close }`. */
+export type HotkeyMap = Record<string, HotkeyHandler>;
+export interface UseHotkeysOptions {
+    /** Attach the listener at all. Default `true`; pass `false` to suspend every combo at once. */
+    enabled?: boolean;
+    /** Scope the shortcuts to one element instead of the whole window. */
+    target?: RefObject<HTMLElement | null>;
+    /**
+     * Let plain-key combos fire while a text field or `contenteditable` has focus. Default `false`,
+     * so `'n'` does not fire for every `n` typed into an input. Combos carrying Ctrl, Cmd or Alt
+     * are never suppressed — they cannot be confused with typing.
+     */
+    enableInFields?: boolean;
+    /**
+     * Call `preventDefault()` on a match, so `mod+s` does not also open the browser's save dialog.
+     * Default `true`.
+     */
+    preventDefault?: boolean;
+}
+/**
+ * A combo written for the reader: `'mod+shift+k'` reads `⇧⌘K` on an Apple platform and
+ * `Ctrl+Shift+K` everywhere else.
+ *
+ * So a shortcut is written once, in one spelling, and the hint beside it cannot contradict what
+ * the binding actually listens for. Hand-written `'⌘K'` hints are wrong on every other platform,
+ * silently, because nothing compares the label to the binding.
+ *
+ * Resolved from the platform at call time, so a server-rendered page renders the non-Apple form.
+ */
+export declare function formatHotkey(combo: string): string;
+/**
+ * Keyboard shortcuts, for a whole app or for one element.
+ *
+ * ```tsx
+ * useHotkeys({ 'mod+k': () => setPaletteOpen(true), '?': () => setHelpOpen(true) });
+ * ```
+ *
+ * The map is read through a ref at event time, so an inline object literal is fine and no handler
+ * needs memoising. Shortcuts keep firing while a Modal or Drawer is open — pass `enabled` for the
+ * ones that should not.
+ */
+export declare function useHotkeys(hotkeys: HotkeyMap, options?: UseHotkeysOptions): void;
+export default useHotkeys;

package/dist/cjs-types/common/hooks/useSwipeDismiss.d.ts

@@ -19,8 +19,12 @@ export interface UseSwipeDismissOptions {
 }
 export interface UseSwipeDismissResult<T extends HTMLElement> {
     /** Attach to the element that should become draggable. The hook wires up its own pointer
-     * listeners on this node directly (no handlers to spread), so this is the only thing to attach. */
-    ref: React.RefObject<T | null>;
+     * listeners on this node directly (no handlers to spread), so this is the only thing to attach.
+     *
+     * A callback ref rather than an object one, because the hook has to know when the node changes:
+     * an element that is unmounted and rendered again is a *different* node, and a ref object cannot
+     * say so. To keep a ref of your own on the element, call both from one callback. */
+    ref: React.RefCallback<T>;
     /** True for the duration of an active drag — e.g. use it to pause an auto-dismiss timer. */
     isDragging: boolean;
 }

package/dist/cjs-types/common/loading/index.d.ts

@@ -1,2 +1 @@
-export { default as IconLoading } from './iconLoading/index.js';
 export { default as SpinnerLoading } from './spinnerLoading/index.js';

package/dist/cjs-types/common/menu/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './menu.js';
+export { menuHotkeys } from './menuHotkeys.js';
 export * from './menu.types.js';

package/dist/cjs-types/common/menu/menu.types.d.ts

@@ -10,10 +10,16 @@ export interface MenuAction {
     label: ReactNode;
     icon?: IconContent;
     /**
-     * Keyboard hint on the trailing edge, e.g. `⌘K`. Display only: binding the
-     * shortcut is yours, since only you know what else is listening.
+     * A keyboard shortcut for this action, in `useHotkeys` spelling: `'mod+k'`,
+     * `'shift+f2'`, `'delete'`. Shown on the trailing edge written for the
+     * platform: `⌘K` on an Apple one, `Ctrl+K` elsewhere.
+     *
+     * The menu draws it and nothing more. Binding is yours, because only the app
+     * knows what else is listening and whether the shortcut should work at all
+     * times or only while the menu is open. `menuHotkeys` turns these entries
+     * into a `useHotkeys` map, so the one spelling covers both ends.
      */
-    shortcut?: ReactNode;
+    shortcut?: string;
     disabled?: boolean;
     /** Renders in the destructive colour. For deleting, discarding, revoking. */
     danger?: boolean;

package/dist/cjs-types/common/menu/menuHotkeys.d.ts

@@ -0,0 +1,20 @@
+import { HotkeyMap } from '../hooks/useHotkeys.js';
+import { MenuEntry } from './menu.types.js';
+/**
+ * The bindings for a menu's `shortcut` entries, to hand to `useHotkeys` yourself.
+ *
+ * The menu draws a shortcut but never listens for one, because only the app knows what else is
+ * listening: binding it here as well as in an app's own keymap would run the action twice, and
+ * whether a shortcut should work at all times or only while the menu is open is the app's
+ * question, not the menu's. Calling this keeps the answer in one spelling, so the hint the menu
+ * draws cannot drift from what actually fires.
+ *
+ * ```tsx
+ * useHotkeys(menuHotkeys(items, run));                      // whenever the page is up
+ * useHotkeys(menuHotkeys(items, run), { enabled: isOpen }); // only while the menu is open
+ * ```
+ *
+ * Runs each entry the way clicking it does: its own `onClick`, then `onAction`. A `disabled`
+ * entry, and an entry with no `shortcut`, is left out.
+ */
+export declare function menuHotkeys(items: MenuEntry[], onAction?: (id: string) => void): HotkeyMap;

package/dist/cjs-types/common/popover/usePopoverPosition.d.ts

@@ -1,5 +1,6 @@
 import { RefObject } from 'react';
 import { PopoverPlacement, PopoverAlign } from './popover.types.js';
+export declare function supportsAnchoring(): boolean;
 export interface UsePopoverPositionArgs {
     isOpen: boolean;
     placement: PopoverPlacement;

package/dist/cjs-types/common/sticky/sticky.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { StickyProps } from './sticky.types.js';
-export default function Sticky({ children, offsetTop, offsetElement, stickToScrollParent, zIndex, disabled, onStuckChange, className, style, classNames, styles: slotStyles, ...rest }: StickyProps): React.JSX.Element;
+export default function Sticky({ children, offsetTop, offsetElement, stickToScrollParent, boundary, boundaryInset, zIndex, disabled, onStuckChange, className, style, classNames, styles: slotStyles, ...rest }: StickyProps): React.JSX.Element;

package/dist/cjs-types/common/sticky/sticky.types.d.ts

@@ -9,6 +9,21 @@ export interface StickyProps extends HtmlProps {
     offsetElement?: React.RefObject<HTMLElement | null>;
     /** Stick to the top of the nearest scrollable ancestor instead of the browser viewport. Falls back to the viewport if no scrollable ancestor is found. */
     stickToScrollParent?: boolean;
+    /**
+     * Element the content is confined to, normally the one it labels. Once that
+     * element's bottom edge reaches the pinned content, the content is pushed up
+     * with it and scrolls away, instead of staying pinned over whatever follows.
+     * Without it the content pins for as long as the page scrolls.
+     */
+    boundary?: React.RefObject<HTMLElement | null>;
+    /**
+     * How much of the boundary's lower end stays uncovered as the content leaves,
+     * in px. At 0 the content rests on the very bottom edge, which means the last
+     * stretch of the boundary, as tall as the pinned content, spends the whole
+     * exit hidden underneath it. Set it to how much you want to stay in sight:
+     * for a table header, a few rows. Default 0. Ignored without `boundary`.
+     */
+    boundaryInset?: number;
     /** z-index applied to the content while stuck. Default 20. */
     zIndex?: number;
     /** Disable sticking entirely — content stays in normal flow. */

package/dist/cjs-types/common/sticky/stickyStack.d.ts

@@ -15,6 +15,11 @@ export interface StickyStackMetrics {
      *  in unrelated scroll panels should never push each other down just because they happen to
      *  share horizontal DOM coordinates. */
     container: HTMLElement | null;
+    /** The element the entry is confined to, or null when nothing confines it.
+     *  Entries sharing one leave together. */
+    boundary: HTMLElement | null;
+    /** Bottom edge of that element (less its inset), in the same coordinate space as `top`. */
+    boundaryBottom: number | null;
 }
 export interface StickyStackEntry {
     node: HTMLElement;

package/dist/cjs-types/common/utils/scrollAncestors.d.ts

@@ -1,2 +1,12 @@
 export declare function getScrollableAncestors(el: HTMLElement): HTMLElement[];
 export declare function isHiddenByAnyAncestor(rect: DOMRect, ancestors: HTMLElement[]): boolean;
+/**
+ * The ancestor whose scrollbar carries `el`, or null when that is the page.
+ * `Sticky` pins against it and `VirtualList` virtualizes against it, and the two
+ * have to agree or a sticky header and the rows under it come apart.
+ *
+ * Narrower than `getScrollableAncestors` above, which is about who *clips* and so
+ * counts `hidden` too: a `hidden` box never scrolls, so pinning to it would pin
+ * to something that never moves.
+ */
+export declare function getScrollParent(el: HTMLElement | null): HTMLElement | null;

package/dist/cjs-types/common/virtualList/scroller.d.ts

@@ -0,0 +1,33 @@
+import { VirtualListScrollParent } from './virtualList.types.js';
+/**
+ * Whatever carries the list's scroll, and how the list is measured against it.
+ *
+ * Everything here works in *list space*: offset 0 is the top of the first row,
+ * which is the root's `scrollTop` when the list scrolls itself and its distance
+ * above the scrollport's top edge when it doesn't. One coordinate system, so the
+ * windowing, anchoring and jump math never branch.
+ */
+export type Scroller = HTMLElement | Window;
+export declare function isWindowScroller(scroller: Scroller): scroller is Window;
+/** `'nearest'` is resolved by the caller, which caches the ancestor walk. */
+export declare function resolveScroller(scrollParent: Exclude<VirtualListScrollParent, 'nearest'> | undefined): Scroller | null;
+/** In viewport coordinates, which is what the rects below are compared against. */
+export declare function scrollportBounds(scroller: Scroller): {
+    top: number;
+    height: number;
+};
+export interface Viewport {
+    /** List-space scroll position, unclamped: negative while the list starts below
+     *  the scrollport, which is what makes a target reachable from either side. */
+    rel: number;
+    /** The slice of the scrollport the list occupies now. */
+    visibleHeight: number;
+    /** The whole scrollport, which is what a scroll target is aimed within. */
+    viewportHeight: number;
+    /** From the list's last row to the end of the scrollport. The browser clamps
+     *  `scrollTop`, so a list that scrolls itself never reports this negative;
+     *  riding a scrollport, it does, for the whole rest of the page. */
+    distanceToEnd: number;
+    width: number;
+}
+export declare function measureViewport(root: HTMLElement, scroller: Scroller | null): Viewport;

package/dist/cjs-types/common/virtualList/useRowDrag.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { TreeDropPosition, TreeDropTarget } from './virtualList.types.js';
+import { ListViewportRect } from './useVirtualWindow.js';
 interface UseRowDragArgs {
     reorderable: boolean;
     treeReorder: boolean;
@@ -15,6 +16,10 @@ interface UseRowDragArgs {
     rootRef: React.RefObject<HTMLDivElement | null>;
     /** Latest keys for async (touch / rAF) consumers — owned by useVirtualWindow. */
     keysRef: React.RefObject<(string | number)[]>;
+    /** Where the list is on screen, which is not its own box once it rides a
+     *  scrollport — owned by useVirtualWindow, as is `scrollBy`. */
+    getVisibleRect: () => ListViewportRect | null;
+    scrollBy: (dy: number) => void;
 }
 /** The drag-related props the parent spreads onto a given row. */
 export interface RowDragProps {
@@ -54,5 +59,5 @@ interface UseRowDragResult {
  * Touch uses a long-press → lifted-clone → pointer-move path with edge
  * auto-scroll. `dragHandle` restricts initiation to `[data-drag-handle]`.
  */
-export declare function useRowDrag({ reorderable, treeReorder, onReorder, onTreeDrop, longPressDelay, dragHandle, treeIndentPx, keys, depths, isGroupAt, rootRef, keysRef, }: UseRowDragArgs): UseRowDragResult;
+export declare function useRowDrag({ reorderable, treeReorder, onReorder, onTreeDrop, longPressDelay, dragHandle, treeIndentPx, keys, depths, isGroupAt, rootRef, keysRef, getVisibleRect, scrollBy, }: UseRowDragArgs): UseRowDragResult;
 export {};

package/dist/cjs-types/common/virtualList/useRowNavigation.d.ts

@@ -1,12 +1,18 @@
 import { default as React } from 'react';
 import { VirtualListScrollOptions } from './virtualList.types.js';
+import { VisibleSlice } from './useVirtualWindow.js';
 interface UseRowNavigationArgs {
     enabled: boolean;
+    tabAcrossRows: boolean;
     rowCount: number;
     /** Row tops, from the windowing engine, used for paging and visibility. */
     offsets: number[];
     rootRef: React.RefObject<HTMLDivElement | null>;
     headerRef: React.RefObject<HTMLDivElement | null>;
+    /** Read live: a held arrow key moves the slice faster than the state commits. */
+    getVisibleSlice: () => VisibleSlice;
+    /** The whole scrollport, which is what one PageDown covers. */
+    viewportHeight: number;
     scrollToIndex: (index: number, options?: VirtualListScrollOptions) => void;
     /** Row index the active row starts on, normally the selected one. */
     initialIndex: number;
@@ -45,6 +51,10 @@ interface UseRowNavigationResult {
  * hold an input, a dropdown or a button, and every one of them wants the arrows,
  * Enter and Space for itself. `F2` steps into such a row and `Escape` steps back
  * out, which is the one pair of keys that does work from inside a cell.
+ *
+ * `tabAcrossRows` adds the second pair, Tab and Shift+Tab, which the browser
+ * cannot carry across a row boundary itself: the next row may not be in the DOM
+ * when it looks for the next stop.
  */
-export declare function useRowNavigation({ enabled, rowCount, offsets, rootRef, headerRef, scrollToIndex, initialIndex, multiSelect, onActivate, onToggleSelect, }: UseRowNavigationArgs): UseRowNavigationResult;
+export declare function useRowNavigation({ enabled, tabAcrossRows, rowCount, offsets, rootRef, headerRef, getVisibleSlice, viewportHeight, scrollToIndex, initialIndex, multiSelect, onActivate, onToggleSelect, }: UseRowNavigationArgs): UseRowNavigationResult;
 export {};

package/dist/cjs-types/common/virtualList/useVirtualWindow.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { VirtualListHandle } from './virtualList.types.js';
+import { VirtualListHandle, VirtualListScrollParent } from './virtualList.types.js';
 interface UseVirtualWindowArgs<T> {
     items: T[];
     /** Stable key per row (already derived by the caller). */
@@ -12,6 +12,19 @@ interface UseVirtualWindowArgs<T> {
     loadMoreThreshold: number;
     /** Initial/filter load in progress — the body is replaced by a spinner. */
     isLoading: boolean;
+    scrollParent?: VirtualListScrollParent;
+}
+/** Where the list is on screen, which is not its own box once it rides a scrollport. */
+export interface ListViewportRect {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+/** The list-space slice currently on screen, read live for keyboard navigation. */
+export interface VisibleSlice {
+    top: number;
+    height: number;
 }
 interface UseVirtualWindowResult {
     rootRef: React.RefObject<HTMLDivElement | null>;
@@ -22,15 +35,21 @@ interface UseVirtualWindowResult {
     keysRef: React.RefObject<(string | number)[]>;
     offsets: number[];
     totalHeight: number;
+    /** The list's visible slice, which is what decides which rows are rendered. */
     containerHeight: number;
+    /** The whole scrollport, which is what a scroll target is aimed within. */
+    viewportHeight: number;
     containerWidth: number;
     startIndex: number;
     endIndex: number;
-    handleScroll: (e: React.UIEvent<HTMLDivElement>) => void;
     showLoadMoreSpinner: boolean;
+    isWindowed: boolean;
+    getVisibleSlice: () => VisibleSlice;
+    getVisibleRect: () => ListViewportRect | null;
+    scrollBy: (dy: number) => void;
     /** The scroll-related imperative methods, for the component to compose into
      *  the forwarded handle alongside column controls. */
     scrollApi: Omit<VirtualListHandle, 'recalculateColumns' | 'resetColumnWidths'>;
 }
-export declare function useVirtualWindow<T>({ items, keys, getItemKey, estimatedRowHeight, rowGap, overscan, onLoadMore, loadMoreThreshold, isLoading, }: UseVirtualWindowArgs<T>): UseVirtualWindowResult;
+export declare function useVirtualWindow<T>({ items, keys, getItemKey, estimatedRowHeight, rowGap, overscan, onLoadMore, loadMoreThreshold, isLoading, scrollParent, }: UseVirtualWindowArgs<T>): UseVirtualWindowResult;
 export {};

package/dist/cjs-types/common/virtualList/virtualList.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 import { VirtualListProps } from './virtualList.types.js';
 export { buildOffsets, findStartIndex, getVisibleRange, resolveReorderTarget, resolveTreeDropTarget, lastDescendantIndex, buildColumnTemplate, compareSortValues, isColumnSortable, isEmptySortValue, nextSort, sortItems, } from './virtualList.utils.js';
-declare function VirtualList<T>({ ref, items, renderRow, ariaRoles, columns, height, estimatedRowHeight, overscan, rowGap, rowPadding, selectedKey, getItemKey, onRowClick, keyboardNavigation, visibleColumnKeys, onVisibleColumnsChange, persistColumnsKey, resizableColumns, columnWidths, onColumnWidthsChange, labels, sort, defaultSort, onSortChange, showColumnToggle, onLoadMore, loadMoreThreshold, isLoading, multiSelect, selectedKeys, onSelectionChange, reorderable, onReorder, longPressDelay, treeReorder, getItemDepth, isGroup, onTreeDrop, treeIndentPx, dragHandle, showDivider, rowHover, className, style, classNames, styles: slotStyles, ...rest }: VirtualListProps<T>): React.JSX.Element;
+declare function VirtualList<T>(props: VirtualListProps<T>): React.JSX.Element;
 export default VirtualList;

package/dist/cjs-types/common/virtualList/virtualList.types.d.ts

@@ -74,6 +74,13 @@ export interface VirtualListColumn<T> {
      */
     sortable?: boolean;
 }
+/**
+ * What scrolls, when the list is not to scroll itself. `'nearest'` is the first
+ * ancestor set to scroll, the same one `Sticky` pins to; `'window'` is the page;
+ * an element (or a getter for one, for a ref that fills after the first render)
+ * names it outright.
+ */
+export type VirtualListScrollParent = 'nearest' | 'window' | HTMLElement | (() => HTMLElement | null);
 export interface VirtualListScrollOptions {
     /** Where the target row lands in the viewport. Default: 'start'. */
     align?: 'start' | 'center' | 'end';
@@ -88,8 +95,18 @@ export interface VirtualListHandle {
     scrollToKey: (key: string | number, options?: VirtualListScrollOptions) => void;
     /** Scroll back to the top. */
     scrollToTop: (options?: Pick<VirtualListScrollOptions, 'behavior'>) => void;
-    /** The underlying scroll container element, for advanced use. */
-    getScrollElement: () => HTMLDivElement | null;
+    /**
+     * The element that scrolls: the list itself, or the `scrollParent` it was
+     * given. `null` for `scrollParent='window'`, where the page scrolls.
+     */
+    getScrollElement: () => HTMLElement | null;
+    /**
+     * Re-read where the list sits in its `scrollParent`. Only needed in that mode,
+     * and only when something *above* the list changed height without the list
+     * re-rendering: an element moving fires no event of its own, and the list
+     * would keep rendering the window it had before.
+     */
+    remeasure: () => void;
     /**
      * Re-measure `fit` columns on the next layout. Call this after an out-of-band
      * content change that doesn't flow through a new `items` array or `columns`
@@ -143,8 +160,22 @@ export interface VirtualListProps<T> extends HtmlProps {
         container: string;
         row: string;
     };
-    /** Height of the scroll viewport. Defaults to '100%' to fill the parent container. */
+    /** Height of the scroll viewport. Defaults to '100%' to fill the parent container. Ignored with `scrollParent`. */
     height?: number | string;
+    /**
+     * Drops the list's own scrollbar: it renders at its full height in the page
+     * flow and virtualizes against whatever is given here, so a long list at the
+     * end of a scrolling page doesn't put a second scrollbar inside the first.
+     * `height` no longer applies. `'nearest'` covers most cases: it walks up to
+     * the first ancestor whose `overflow-y` is set to scroll, whether or not it
+     * currently does, and falls back to the page.
+     *
+     * The header still sticks, now to the top of that scrollport; give the list
+     * `--vl-header-top` to clear a fixed app bar. Rows of uneven height move the
+     * page's own scrollbar as they are measured, so set `estimatedRowHeight` to
+     * the real height where the rows have one.
+     */
+    scrollParent?: VirtualListScrollParent;
     /** Estimated row height before measurement. Default: 40. */
     estimatedRowHeight?: number;
     /** Extra rows to render above/below the visible window. Default: 3. */
@@ -187,6 +218,15 @@ export interface VirtualListProps<T> extends HtmlProps {
      * `Tree` does.
      */
     keyboardNavigation?: boolean;
+    /**
+     * Lets Tab carry on into the next row instead of leaving the list at the end
+     * of the current one, for a grid of inputs a user fills in field by field.
+     * Shift+Tab walks back the same way, and Tab out of the last row (or back out
+     * of the first) leaves the list as it always did. Default: false, because for
+     * a list that is read rather than filled in, one tab stop and the arrow keys
+     * are the expected behaviour, and 5000 rows of tab stops are a trap.
+     */
+    tabAcrossRows?: boolean;
     /** Controlled visible column keys. When provided, internal state is ignored. */
     visibleColumnKeys?: string[];
     /** Called when the user toggles a column in the popover. */

package/dist/cjs-types/index.d.ts

@@ -148,6 +148,7 @@ export { default as VirtualList } from './common/virtualList/index.js';
 export * from './common/virtualList/index.js';
 export { default as Wizard } from './common/wizard/index.js';
 export * from './common/wizard/index.js';
+export * from './common/hooks/index.js';
 export { FormValidator, FormValidatorGroup, Validators, ValidatableComponent, useFormValidator, useFormValidatorGroup, } from './services/formValidation/index.js';
 export type { ValidationError, ValidatorFunction, ErrorParser, FormValidatorGroupOptions, InferGroupValues, MergedValues, } from './services/formValidation/index.js';
 export { mapLocale, setLocale, getLocale } from './services/localization.js';

package/dist/esm/common/dropdown/dropdown.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":[".required-mark {\n  padding: 0 0 0 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.dropdown {\n  position: relative;\n\n  /* Nothing inside gives the root a width, so as a flex or grid item it collapsed to the chevron\n     and drew its border through the label. `input` and `multiSelect` say the same. */\n  width: 100%;\n\n  --dropdown-notch-height: 1.75em;\n\n  /* See input.module.pcss for why this exists: the visible border lives on `-input`/`-fieldset`\n     below, not this root, so a wrapping ButtonGroup's --group-radius-* custom properties (which\n     inherit through any nesting depth, unlike border-radius itself) are what let this component\n     flatten correctly when it sits inside a ButtonGroup. */\n  --dropdown-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n\n  &-label {\n    display: flex;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      white-space: nowrap;\n      margin-right: 5px;\n      margin-bottom: 5px;\n      display: flex;\n      align-items: center;\n      color: var(--text-color);\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n    }\n  }\n\n  &-input {\n    position: relative;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background-color: var(--input-background);\n    border-radius: var(--dropdown-radius);\n\n    &-plain {\n      background: transparent;\n    }\n\n    &-readOnly {\n      cursor: default;\n    }\n\n    &:focus-within {\n      outline: none;\n    }\n\n    &-button {\n      padding: 7px 20% 7px 7.5px !important;\n      background-color: transparent;\n      border: none;\n      font-family: inherit;\n      font-size: inherit;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      text-align: left;\n      width: 100%;\n      line-height: 1.25;\n      color: var(--text-color);\n\n      &-disabled {\n        background-color: var(--disabled-input-color);\n        color: var(--disabled-font-color);\n        border-radius: var(--dropdown-radius);\n      }\n\n      &-readOnly {\n        cursor: default;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &-icon {\n        float: right;\n        background-color: transparent;\n        border: none;\n        position: absolute;\n        outline: none;\n        right: var(--spacing-s);\n        top: 50%;\n        transform: translateY(-50%);\n        color: var(--text-color);\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n\n        &-arrow {\n          transition: transform 0.25s;\n          pointer-events: none;\n\n          &-open {\n            transform: rotate(180deg);\n          }\n        }\n      }\n    }\n\n    /* Chrome, placement and the portal come from the Popover this renders inside.\n       What is left is the clipping that keeps the first and last row inside the\n       panel's rounded corners. */\n    &-list-anim {\n      overflow: hidden;\n      border-radius: inherit;\n\n      &-wider {\n        width: max-content !important;\n      }\n    }\n\n    &-list {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      max-height: 10em;\n      list-style-type: none;\n\n      &-item {\n        border: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        background-color: var(--background-modal);\n        padding: 0.5em;\n        text-align: left;\n        border-radius: 0;\n        transition: background-color 0.3s;\n\n        &-active {\n          background-color: var(--background-accent);\n        }\n\n        &-selected {\n          font-weight: 500;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          background-color: var(--background-accent);\n        }\n\n        &-disabled {\n          background-color: var(--disabled-input-color);\n          color: var(--disabled-font-color);\n          cursor: not-allowed;\n\n          &:hover {\n            background-color: var(--disabled-input-color);\n          }\n        }\n      }\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    box-sizing: border-box;\n    border-radius: var(--dropdown-radius);\n    font-size: 0.8em;\n    inset: calc(var(--dropdown-notch-height) / -2) 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--dropdown-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      /* With an empty label the span would still reserve its padding, leaving a gap in\n         the fieldset's top border. Collapse it so the notch closes when there's no label. */\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    left: 7px;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1em;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      inset: 0 0 auto 14px;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n      transform: translateY(-50%);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 0.5;\n    }\n  }\n\n  &-border {\n    &-focused {\n      outline-color: var(--focus-border-color, var(--primary-color));\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-plain:not(&-focused) {\n      border-color: transparent;\n      outline-color: transparent;\n    }\n\n    &-invalid {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-invalid:hover {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-error {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n  }\n}\n\n/* The list brings its own padding and its rows reach the panel edge. */\n.dropdownPanel {\n  padding: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dropdown-matLabel,\n  .dropdown-placeholder,\n  .dropdown-input-button-icon-arrow {\n    transition: none;\n  }\n}\n\n/* The sentinel the infinite-scroll hook watches, and the spinner shown while a page loads.\n   These came with `InfiniteBlock` when the list rendered through it; the list is its own scroll\n   container now, so they live here. */\n.dropdown-sentinel {\n  height: 1px;\n}\n\n.dropdown-load-more {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 0;\n\n  &-spinner {\n    width: 32px;\n    height: 32px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":[".required-mark {\n  padding: 0 0 0 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.dropdown {\n  position: relative;\n\n  /* Nothing inside gives the root a width, so as a flex or grid item it collapsed to the chevron\n     and drew its border through the label. `input` and `multiSelect` say the same. */\n  width: 100%;\n\n  --dropdown-notch-height: 1.75em;\n\n  /* See input.module.pcss for why this exists: the visible border lives on `-input`/`-fieldset`\n     below, not this root, so a wrapping ButtonGroup's --group-radius-* custom properties (which\n     inherit through any nesting depth, unlike border-radius itself) are what let this component\n     flatten correctly when it sits inside a ButtonGroup. */\n  --dropdown-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n\n  &-label {\n    display: flex;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      white-space: nowrap;\n      margin-right: 5px;\n      margin-bottom: 5px;\n      display: flex;\n      align-items: center;\n      color: var(--text-color);\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n    }\n  }\n\n  &-input {\n    position: relative;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background-color: var(--input-background);\n    border-radius: var(--dropdown-radius);\n\n    &-plain {\n      background: transparent;\n    }\n\n    &-readOnly {\n      cursor: default;\n    }\n\n    &:focus-within {\n      outline: none;\n    }\n\n    &-button {\n      padding: 7px 20% 7px 7.5px !important;\n      background-color: transparent;\n      border: none;\n      font-family: inherit;\n      font-size: inherit;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      text-align: left;\n      width: 100%;\n      line-height: 1.25;\n      color: var(--text-color);\n\n      &-disabled {\n        background-color: var(--disabled-input-color);\n        color: var(--disabled-font-color);\n        border-radius: var(--dropdown-radius);\n      }\n\n      &-readOnly {\n        cursor: default;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &-icon {\n        float: right;\n        background-color: transparent;\n        border: none;\n        position: absolute;\n        outline: none;\n        right: var(--spacing-s);\n        top: 50%;\n        transform: translateY(-50%);\n        color: var(--text-color);\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n\n        &-arrow {\n          transition: transform 0.25s;\n          pointer-events: none;\n\n          &-open {\n            transform: rotate(180deg);\n          }\n        }\n      }\n    }\n\n    /* Chrome, placement and the portal come from the Popover this renders inside.\n       What is left is the clipping that keeps the first and last row inside the\n       panel's rounded corners. */\n    &-list-anim {\n      overflow: hidden;\n      border-radius: inherit;\n\n      &-wider {\n        width: max-content !important;\n      }\n    }\n\n    &-list {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      max-height: 10em;\n      list-style-type: none;\n\n      &-item {\n        border: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        background-color: var(--background-modal);\n        padding: 0.5em;\n        text-align: left;\n        border-radius: 0;\n        transition: background-color 0.3s;\n\n        &-active {\n          background-color: var(--background-accent);\n        }\n\n        &-selected {\n          font-weight: 500;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          background-color: var(--background-accent);\n        }\n\n        &-disabled {\n          background-color: var(--disabled-input-color);\n          color: var(--disabled-font-color);\n          cursor: not-allowed;\n\n          &:hover {\n            background-color: var(--disabled-input-color);\n          }\n        }\n      }\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    box-sizing: border-box;\n    border-radius: var(--dropdown-radius);\n    font-size: 0.8em;\n    inset: calc(var(--dropdown-notch-height) / -2) 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-legend {\n      display: block;\n\n      /* Not taken from the text: an empty span gets no line box, which raised a label-less\n         field's border half a notch. */\n      height: var(--dropdown-notch-height);\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--dropdown-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      /* With an empty label the span would still reserve its padding, leaving a gap in\n         the fieldset's top border. Collapse it so the notch closes when there's no label. */\n      span:empty {\n        padding: 0;\n      }\n    }\n  }\n\n  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    left: 7px;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1em;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      inset: 0 0 auto 14px;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n      transform: translateY(-50%);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 0.5;\n    }\n  }\n\n  &-border {\n    &-focused {\n      outline-color: var(--focus-border-color, var(--primary-color));\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-plain:not(&-focused) {\n      border-color: transparent;\n      outline-color: transparent;\n    }\n\n    &-invalid {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-invalid:hover {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-error {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n  }\n}\n\n/* The list brings its own padding and its rows reach the panel edge. */\n.dropdownPanel {\n  padding: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dropdown-matLabel,\n  .dropdown-placeholder,\n  .dropdown-input-button-icon-arrow {\n    transition: none;\n  }\n}\n\n/* The sentinel the infinite-scroll hook watches, and the spinner shown while a page loads.\n   These came with `InfiniteBlock` when the list rendered through it; the list is its own scroll\n   container now, so they live here. */\n.dropdown-sentinel {\n  height: 1px;\n}\n\n.dropdown-load-more {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 0;\n\n  &-spinner {\n    width: 32px;\n    height: 32px;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/hooks/useHotkeys.mjs

@@ -0,0 +1,2 @@
+"use client";import{useEffect as e,useRef as t}from"react";var n=`input, textarea, select, [contenteditable=""], [contenteditable="true"]`,r={esc:`escape`,space:` `,spacebar:` `,plus:`+`,up:`arrowup`,down:`arrowdown`,left:`arrowleft`,right:`arrowright`};function i(){return typeof navigator<`u`&&/Mac|iPhone|iPad|iPod/i.test(navigator.userAgent)}function a(e){let t=e.split(`+`).map(e=>e.trim().toLowerCase()).filter(Boolean);if(t.length===0)return null;let n={key:``,ctrl:!1,meta:!1,alt:!1,shift:!1,shiftNamed:!1},a=i();for(let e of t)switch(e){case`mod`:a?n.meta=!0:n.ctrl=!0;break;case`ctrl`:case`control`:n.ctrl=!0;break;case`meta`:case`cmd`:case`command`:n.meta=!0;break;case`alt`:case`option`:n.alt=!0;break;case`shift`:n.shift=!0,n.shiftNamed=!0;break;default:n.key=r[e]??e}return n.key?n:null}function o(e){let t=[e.key.toLowerCase()],n=/^(?:Key|Digit)(.)$/.exec(e.code);return n&&t.push(n[1].toLowerCase()),t}function s(e,t){return e.ctrl!==t.ctrlKey||e.meta!==t.metaKey||e.alt!==t.altKey||e.shiftNamed&&e.shift!==t.shiftKey?!1:o(t).includes(e.key)}function c(e){return e instanceof Element&&!!e.closest(n)}var l=new Set([`arrowup`,`arrowdown`,`arrowleft`,`arrowright`,`home`,`end`,`pageup`,`pagedown`,`backspace`,`delete`,`enter`,`tab`]);function u(e){return e.ctrl||e.meta||e.alt?!1:e.key.length===1||l.has(e.key)}var d={" ":`Space`,arrowup:`↑`,arrowdown:`↓`,arrowleft:`←`,arrowright:`→`,escape:`Esc`,enter:`↵`,backspace:`⌫`,delete:`Del`,pageup:`PgUp`,pagedown:`PgDn`};function f(e){let t=a(e);if(!t)return e;let n=d[t.key]??(t.key.length===1?t.key.toUpperCase():p(t.key));return i()?[t.ctrl&&`⌃`,t.alt&&`⌥`,t.shift&&`⇧`,t.meta&&`⌘`].filter(Boolean).join(``)+n:[...[t.ctrl&&`Ctrl`,t.meta&&`Win`,t.alt&&`Alt`,t.shift&&`Shift`].filter(Boolean),n].join(`+`)}function p(e){return e[0].toUpperCase()+e.slice(1)}function m(n,r={}){let{enabled:i=!0,target:o,enableInFields:l=!1,preventDefault:d=!0}=r,f=t(n);e(()=>{f.current=n}),e(()=>{if(!i)return;let e=o?o.current:window;if(!e)return;function t(e){let t=e;if(!t.isComposing)for(let[e,n]of Object.entries(f.current)){let r=a(e);if(r&&s(r,t)&&!(u(r)&&!l&&c(t.target))){d&&t.preventDefault(),n(t);return}}}return e.addEventListener(`keydown`,t),()=>e.removeEventListener(`keydown`,t)},[i,o,l,d])}export{m as default,m as useHotkeys,f as formatHotkey};
+//# sourceMappingURL=useHotkeys.mjs.map

package/dist/esm/common/hooks/useHotkeys.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeys.mjs","names":[],"sources":["../../../../package/common/hooks/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef, type RefObject } from 'react';\n\nexport type HotkeyHandler = (event: KeyboardEvent) => void;\n\n/** Combo → handler, e.g. `{ 'mod+k': open, Escape: close }`. */\nexport type HotkeyMap = Record<string, HotkeyHandler>;\n\nexport interface UseHotkeysOptions {\n  /** Attach the listener at all. Default `true`; pass `false` to suspend every combo at once. */\n  enabled?: boolean;\n  /** Scope the shortcuts to one element instead of the whole window. */\n  target?: RefObject<HTMLElement | null>;\n  /**\n   * Let plain-key combos fire while a text field or `contenteditable` has focus. Default `false`,\n   * so `'n'` does not fire for every `n` typed into an input. Combos carrying Ctrl, Cmd or Alt\n   * are never suppressed — they cannot be confused with typing.\n   */\n  enableInFields?: boolean;\n  /**\n   * Call `preventDefault()` on a match, so `mod+s` does not also open the browser's save dialog.\n   * Default `true`.\n   */\n  preventDefault?: boolean;\n}\n\ninterface Combo {\n  key: string;\n  ctrl: boolean;\n  meta: boolean;\n  alt: boolean;\n  shift: boolean;\n  /** Set when the combo named Shift itself — see `matches`. */\n  shiftNamed: boolean;\n}\n\nconst FIELD_SELECTOR = 'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]';\n\n/** Spellings accepted for keys whose `event.key` is awkward to write inside a `+`-separated combo. */\nconst KEY_ALIASES: Record<string, string> = {\n  esc: 'escape',\n  space: ' ',\n  spacebar: ' ',\n  plus: '+',\n  up: 'arrowup',\n  down: 'arrowdown',\n  left: 'arrowleft',\n  right: 'arrowright',\n};\n\n/** `mod` is Cmd where Cmd is the command modifier, and Ctrl everywhere else. */\nfunction isApplePlatform(): boolean {\n  return typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent);\n}\n\nfunction parseCombo(combo: string): Combo | null {\n  const parts = combo\n    .split('+')\n    .map((part) => part.trim().toLowerCase())\n    .filter(Boolean);\n  // A trailing separator (`'mod+'`) loses its key to the filter above, so the whole combo is\n  // dropped rather than matching on the modifier alone. `'mod+plus'` is how to mean `+` itself.\n  if (parts.length === 0) return null;\n\n  const parsed: Combo = { key: '', ctrl: false, meta: false, alt: false, shift: false, shiftNamed: false };\n  const apple = isApplePlatform();\n\n  for (const part of parts) {\n    switch (part) {\n      case 'mod':\n        if (apple) parsed.meta = true;\n        else parsed.ctrl = true;\n        break;\n      case 'ctrl':\n      case 'control':\n        parsed.ctrl = true;\n        break;\n      case 'meta':\n      case 'cmd':\n      case 'command':\n        parsed.meta = true;\n        break;\n      case 'alt':\n      case 'option':\n        parsed.alt = true;\n        break;\n      case 'shift':\n        parsed.shift = true;\n        parsed.shiftNamed = true;\n        break;\n      default:\n        parsed.key = KEY_ALIASES[part] ?? part;\n    }\n  }\n\n  return parsed.key ? parsed : null;\n}\n\n/**\n * The key the event carries, plus the one its physical position would produce unshifted.\n *\n * Both are needed: Alt+K on a Mac arrives as `key: '˚'` and Shift+1 as `key: '!'`, so a combo\n * written against the letter or digit on the keycap only matches through `code`.\n */\nfunction pressedKeys(event: KeyboardEvent): string[] {\n  const keys = [event.key.toLowerCase()];\n  const physical = /^(?:Key|Digit)(.)$/.exec(event.code);\n  if (physical) keys.push(physical[1].toLowerCase());\n  return keys;\n}\n\nfunction matches(combo: Combo, event: KeyboardEvent): boolean {\n  if (combo.ctrl !== event.ctrlKey || combo.meta !== event.metaKey || combo.alt !== event.altKey) return false;\n  // Shift is only compared when the combo named it. A symbol is typed *with* Shift on most\n  // layouts, so requiring `shiftKey === false` would make `'?'` and `'mod+/'` unreachable.\n  if (combo.shiftNamed && combo.shift !== event.shiftKey) return false;\n  return pressedKeys(event).includes(combo.key);\n}\n\nfunction isInField(target: EventTarget | null): boolean {\n  return target instanceof Element && !!target.closest(FIELD_SELECTOR);\n}\n\n/** Keys a text field uses for itself, beyond the characters it inserts. */\nconst FIELD_KEYS = new Set([\n  'arrowup',\n  'arrowdown',\n  'arrowleft',\n  'arrowright',\n  'home',\n  'end',\n  'pageup',\n  'pagedown',\n  'backspace',\n  'delete',\n  'enter',\n  'tab',\n]);\n\n/**\n * Whether a combo would be taken out of a focused field's mouth.\n *\n * Ctrl, Cmd and Alt take a key out of the field's hands whatever it is. Without one, a single\n * character is typing and the listed keys are editing, but `F2` and `Escape` are neither, and\n * suppressing those made a menu's `F2` do nothing the moment the page had a focused input.\n */\nfunction isFieldKey(combo: Combo): boolean {\n  if (combo.ctrl || combo.meta || combo.alt) return false;\n  return combo.key.length === 1 || FIELD_KEYS.has(combo.key);\n}\n\n/** Keys whose name is not what a keycap says. Anything else is capitalised, so `f2` reads `F2`. */\nconst KEY_LABELS: Record<string, string> = {\n  ' ': 'Space',\n  arrowup: '↑',\n  arrowdown: '↓',\n  arrowleft: '←',\n  arrowright: '→',\n  escape: 'Esc',\n  enter: '↵',\n  backspace: '⌫',\n  delete: 'Del',\n  pageup: 'PgUp',\n  pagedown: 'PgDn',\n};\n\n/**\n * A combo written for the reader: `'mod+shift+k'` reads `⇧⌘K` on an Apple platform and\n * `Ctrl+Shift+K` everywhere else.\n *\n * So a shortcut is written once, in one spelling, and the hint beside it cannot contradict what\n * the binding actually listens for. Hand-written `'⌘K'` hints are wrong on every other platform,\n * silently, because nothing compares the label to the binding.\n *\n * Resolved from the platform at call time, so a server-rendered page renders the non-Apple form.\n */\nexport function formatHotkey(combo: string): string {\n  const parsed = parseCombo(combo);\n  if (!parsed) return combo;\n\n  const key = KEY_LABELS[parsed.key] ?? (parsed.key.length === 1 ? parsed.key.toUpperCase() : capitalise(parsed.key));\n\n  // Apple orders modifier symbols ⌃⌥⇧⌘ and runs them into the key; everywhere else they are\n  // words joined by `+`.\n  if (isApplePlatform()) {\n    const symbols = [parsed.ctrl && '⌃', parsed.alt && '⌥', parsed.shift && '⇧', parsed.meta && '⌘'];\n    return symbols.filter(Boolean).join('') + key;\n  }\n  const words = [parsed.ctrl && 'Ctrl', parsed.meta && 'Win', parsed.alt && 'Alt', parsed.shift && 'Shift'];\n  return [...words.filter(Boolean), key].join('+');\n}\n\nfunction capitalise(value: string): string {\n  return value[0].toUpperCase() + value.slice(1);\n}\n\n/**\n * Keyboard shortcuts, for a whole app or for one element.\n *\n * ```tsx\n * useHotkeys({ 'mod+k': () => setPaletteOpen(true), '?': () => setHelpOpen(true) });\n * ```\n *\n * The map is read through a ref at event time, so an inline object literal is fine and no handler\n * needs memoising. Shortcuts keep firing while a Modal or Drawer is open — pass `enabled` for the\n * ones that should not.\n */\nexport function useHotkeys(hotkeys: HotkeyMap, options: UseHotkeysOptions = {}): void {\n  const { enabled = true, target, enableInFields = false, preventDefault = true } = options;\n\n  const hotkeysRef = useRef(hotkeys);\n  useEffect(() => {\n    hotkeysRef.current = hotkeys;\n  });\n\n  useEffect(() => {\n    if (!enabled) return;\n    const node: HTMLElement | Window | null = target ? target.current : window;\n    if (!node) return;\n\n    function onKeyDown(event: Event) {\n      const keyboardEvent = event as KeyboardEvent;\n      // A key pressed to compose a character in an IME is not a shortcut.\n      if (keyboardEvent.isComposing) return;\n\n      for (const [spelling, handler] of Object.entries(hotkeysRef.current)) {\n        const combo = parseCombo(spelling);\n        if (!combo || !matches(combo, keyboardEvent)) continue;\n        if (isFieldKey(combo) && !enableInFields && isInField(keyboardEvent.target)) continue;\n        if (preventDefault) keyboardEvent.preventDefault();\n        handler(keyboardEvent);\n        return;\n      }\n    }\n\n    node.addEventListener('keydown', onKeyDown);\n    return () => node.removeEventListener('keydown', onKeyDown);\n  }, [enabled, target, enableInFields, preventDefault]);\n}\n\nexport default useHotkeys;\n"],"mappings":"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"}

package/dist/esm/common/hooks/useSwipeDismiss.mjs

@@ -1,2 +1,2 @@
-"use client";import e from"./useCoarsePointer.mjs";import{useEffect as t,useRef as n,useState as r}from"react";var i=180,a=10;function o({onDismiss:o,axis:s=`x`,distanceThreshold:c=80,velocityThreshold:l=.5,disabled:u=!1,mobileOnly:d=!0}){let f=n(null),[p,m]=r(!1),h=e(),g=u||d&&!h,_=n(null),v=n(o);return t(()=>{v.current=o}),t(()=>{let e=f.current;if(!e||g)return;function t(t,n){if(!e)return;n!==`none`&&e.offsetHeight;let r=s===`x`?`translateX(${t}px)`:`translateY(${t}px)`;e.style.transition=n,e.style.transform=r;let i=Math.max(0,1-Math.abs(t)/(c*2.5));e.style.opacity=String(i)}function n(e){let n=_.current;if(!n||e.pointerId!==n.pointerId)return;let r=e.clientX-n.startX,i=e.clientY-n.startY;if(!n.axisLocked){let e=s===`x`?r:i,t=s===`x`?i:r;if(Math.abs(e)<a&&Math.abs(t)<a)return;if(Math.abs(t)>Math.abs(e)){n.active=!1;return}n.axisLocked=!0,m(!0)}n.active&&(e.preventDefault(),n.offset=s===`x`?r:i,t(n.offset,`none`))}function r(){let a=_.current;if(_.current=null,window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r),!a||!a.active||!a.axisLocked){m(!1);return}let o=Math.max(1,Date.now()-a.startTime),s=a.offset/o;if(Math.abs(a.offset)>=c||Math.abs(s)>=l){let n=e?.getBoundingClientRect().width??0;t(Math.sign(a.offset||1)*(n+40),`transform ${i}ms ease-out, opacity ${i}ms ease-out`),setTimeout(()=>v.current(),i)}else t(0,`transform ${i}ms ease-out, opacity ${i}ms ease-out`);m(!1)}function o(t){!_.current&&e&&(e.style.animation=`none`,_.current={pointerId:t.pointerId,startX:t.clientX,startY:t.clientY,startTime:Date.now(),offset:0,axisLocked:!1,active:!0},window.addEventListener(`pointermove`,n,{passive:!1}),window.addEventListener(`pointerup`,r),window.addEventListener(`pointercancel`,r))}return e.addEventListener(`pointerdown`,o),()=>{e.removeEventListener(`pointerdown`,o),window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r)}},[s,c,l,g]),{ref:f,isDragging:p}}export{o as useSwipeDismiss};
+"use client";import e from"./useCoarsePointer.mjs";import{useCallback as t,useEffect as n,useRef as r,useState as i}from"react";var a=180,o=10;function s({onDismiss:s,axis:c=`x`,distanceThreshold:l=80,velocityThreshold:u=.5,disabled:d=!1,mobileOnly:f=!0}){let[p,m]=i(null),h=t(e=>m(e),[]),[g,_]=i(!1),v=e(),y=d||f&&!v,b=r(null),x=r(s);return n(()=>{x.current=s}),n(()=>{let e=p;if(!e||y)return;function t(t,n){if(!e)return;n!==`none`&&e.offsetHeight;let r=c===`x`?`translateX(${t}px)`:`translateY(${t}px)`;e.style.transition=n,e.style.transform=r;let i=Math.max(0,1-Math.abs(t)/(l*2.5));e.style.opacity=String(i)}function n(e){let n=b.current;if(!n||e.pointerId!==n.pointerId)return;let r=e.clientX-n.startX,i=e.clientY-n.startY;if(!n.axisLocked){let e=c===`x`?r:i,t=c===`x`?i:r;if(Math.abs(e)<o&&Math.abs(t)<o)return;if(Math.abs(t)>Math.abs(e)){n.active=!1;return}n.axisLocked=!0,_(!0)}n.active&&(e.preventDefault(),n.offset=c===`x`?r:i,t(n.offset,`none`))}function r(){let i=b.current;if(b.current=null,window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r),!i||!i.active||!i.axisLocked){_(!1);return}let o=Math.max(1,Date.now()-i.startTime),s=i.offset/o;if(Math.abs(i.offset)>=l||Math.abs(s)>=u){let n=e?.getBoundingClientRect().width??0;t(Math.sign(i.offset||1)*(n+40),`transform ${a}ms ease-out, opacity ${a}ms ease-out`),setTimeout(()=>x.current(),a)}else t(0,`transform ${a}ms ease-out, opacity ${a}ms ease-out`);_(!1)}function i(t){!b.current&&e&&(e.style.animation=`none`,b.current={pointerId:t.pointerId,startX:t.clientX,startY:t.clientY,startTime:Date.now(),offset:0,axisLocked:!1,active:!0},window.addEventListener(`pointermove`,n,{passive:!1}),window.addEventListener(`pointerup`,r),window.addEventListener(`pointercancel`,r))}return e.addEventListener(`pointerdown`,i),()=>{e.removeEventListener(`pointerdown`,i),window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r)}},[p,c,l,u,y]),{ref:h,isDragging:g}}export{s as useSwipeDismiss};
 //# sourceMappingURL=useSwipeDismiss.mjs.map

package/dist/esm/common/hooks/useSwipeDismiss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSwipeDismiss.mjs","names":[],"sources":["../../../../package/common/hooks/useSwipeDismiss.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useCoarsePointer } from './useCoarsePointer';\n\nexport interface UseSwipeDismissOptions {\n  /** Called once the swipe commits (past the threshold) — after the exit transition finishes,\n   * not the instant the pointer is released. */\n  onDismiss: () => void;\n  /** Which axis the drag tracks (default `'x'`, the natural direction for a toast/notification). */\n  axis?: 'x' | 'y';\n  /** Distance in px past which releasing counts as a commit, regardless of speed (default `80`). */\n  distanceThreshold?: number;\n  /** Speed in px/ms past which releasing counts as a commit, regardless of distance (default `0.5`) —\n   * lets a fast flick dismiss even if the pointer didn't travel very far. */\n  velocityThreshold?: number;\n  /** Disables the gesture entirely — no listeners are attached. */\n  disabled?: boolean;\n  /** Restricts the gesture to coarse (touch) pointers, auto-detected via `matchMedia`. On a\n   * mouse/trackpad device a drag is more likely to be a text selection than an intentional\n   * dismiss, and other affordances (a close button, auto-dismiss) typically already cover that\n   * case. Default `true`; set `false` to allow the gesture on any pointer type. */\n  mobileOnly?: boolean;\n}\n\nexport interface UseSwipeDismissResult<T extends HTMLElement> {\n  /** Attach to the element that should become draggable. The hook wires up its own pointer\n   * listeners on this node directly (no handlers to spread), so this is the only thing to attach. */\n  ref: React.RefObject<T | null>;\n  /** True for the duration of an active drag — e.g. use it to pause an auto-dismiss timer. */\n  isDragging: boolean;\n}\n\nconst EXIT_TRANSITION_MS = 180;\n// Below this many px of movement, direction intent isn't decided yet — lets a vertical scroll\n// gesture that merely starts on the element pass through instead of being hijacked as a swipe.\nconst AXIS_LOCK_THRESHOLD = 10;\n\n/**\n * Drag-to-dismiss on any pointer type (touch, mouse, pen) via the Pointer Events API. Applies the\n * drag offset and a fading opacity directly to the DOM node (bypassing React state) so the visual\n * tracks the pointer at native speed, then either springs back or animates fully off-screen and\n * calls `onDismiss` once that exit transition completes.\n */\nexport function useSwipeDismiss<T extends HTMLElement>({\n  onDismiss,\n  axis = 'x',\n  distanceThreshold = 80,\n  velocityThreshold = 0.5,\n  disabled = false,\n  mobileOnly = true,\n}: UseSwipeDismissOptions): UseSwipeDismissResult<T> {\n  const ref = useRef<T>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const isCoarsePointer = useCoarsePointer();\n\n  const effectiveDisabled = disabled || (mobileOnly && !isCoarsePointer);\n\n  // Mutable across the life of one drag; doesn't need to trigger re-renders.\n  const dragRef = useRef<{\n    pointerId: number;\n    startX: number;\n    startY: number;\n    startTime: number;\n    offset: number;\n    axisLocked: boolean;\n    active: boolean;\n  } | null>(null);\n\n  const onDismissRef = useRef(onDismiss);\n  useEffect(() => {\n    onDismissRef.current = onDismiss;\n  });\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || effectiveDisabled) return;\n\n    function applyTransform(offset: number, transition: string) {\n      if (!el) return;\n      if (transition !== 'none') {\n        // Switching straight from the live drag's `transition: none` to an animated one, in the\n        // same tick as the transform change, can get coalesced into a single frame with no\n        // animation in between — the element just jumps to its end state instead of sliding\n        // there. Forcing a layout read first commits the current (pre-transition) position as\n        // its own frame, so the transition below actually has something to animate from.\n        void el.offsetHeight;\n      }\n      const translate = axis === 'x' ? `translateX(${offset}px)` : `translateY(${offset}px)`;\n      el.style.transition = transition;\n      el.style.transform = translate;\n      const fade = Math.max(0, 1 - Math.abs(offset) / (distanceThreshold * 2.5));\n      el.style.opacity = String(fade);\n    }\n\n    function onPointerMove(event: PointerEvent) {\n      const drag = dragRef.current;\n      if (!drag || event.pointerId !== drag.pointerId) return;\n\n      const deltaX = event.clientX - drag.startX;\n      const deltaY = event.clientY - drag.startY;\n\n      if (!drag.axisLocked) {\n        const primary = axis === 'x' ? deltaX : deltaY;\n        const cross = axis === 'x' ? deltaY : deltaX;\n        if (Math.abs(primary) < AXIS_LOCK_THRESHOLD && Math.abs(cross) < AXIS_LOCK_THRESHOLD) return;\n        if (Math.abs(cross) > Math.abs(primary)) {\n          // The gesture is mostly along the other axis (e.g. a page scroll) — hand it back.\n          drag.active = false;\n          return;\n        }\n        drag.axisLocked = true;\n        setIsDragging(true);\n      }\n\n      if (!drag.active) return;\n      event.preventDefault();\n      drag.offset = axis === 'x' ? deltaX : deltaY;\n      applyTransform(drag.offset, 'none');\n    }\n\n    function finishDrag() {\n      const drag = dragRef.current;\n      dragRef.current = null;\n      window.removeEventListener('pointermove', onPointerMove);\n      window.removeEventListener('pointerup', finishDrag);\n      window.removeEventListener('pointercancel', finishDrag);\n      if (!drag || !drag.active || !drag.axisLocked) {\n        setIsDragging(false);\n        return;\n      }\n\n      const elapsed = Math.max(1, Date.now() - drag.startTime);\n      const velocity = drag.offset / elapsed;\n      const committed = Math.abs(drag.offset) >= distanceThreshold || Math.abs(velocity) >= velocityThreshold;\n\n      if (committed) {\n        const width = el?.getBoundingClientRect().width ?? 0;\n        const exitOffset = Math.sign(drag.offset || 1) * (width + 40);\n        applyTransform(\n          exitOffset,\n          `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`,\n        );\n        setTimeout(() => onDismissRef.current(), EXIT_TRANSITION_MS);\n      } else {\n        applyTransform(0, `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`);\n      }\n      setIsDragging(false);\n    }\n\n    function onPointerDown(event: PointerEvent) {\n      if (dragRef.current || !el) return;\n      // A still-\"forwards\"-filling CSS animation (e.g. the toast's entrance slide) wins the\n      // cascade over an inline style.transform, so the drag offset below would silently never\n      // show up on screen unless the animation is cleared first.\n      el.style.animation = 'none';\n      dragRef.current = {\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        startY: event.clientY,\n        startTime: Date.now(),\n        offset: 0,\n        axisLocked: false,\n        active: true,\n      };\n      window.addEventListener('pointermove', onPointerMove, { passive: false });\n      window.addEventListener('pointerup', finishDrag);\n      window.addEventListener('pointercancel', finishDrag);\n    }\n\n    el.addEventListener('pointerdown', onPointerDown);\n    return () => {\n      el.removeEventListener('pointerdown', onPointerDown);\n      window.removeEventListener('pointermove', onPointerMove);\n      window.removeEventListener('pointerup', finishDrag);\n      window.removeEventListener('pointercancel', finishDrag);\n    };\n  }, [axis, distanceThreshold, velocityThreshold, effectiveDisabled]);\n\n  return { ref, isDragging };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useSwipeDismiss.mjs","names":[],"sources":["../../../../package/common/hooks/useSwipeDismiss.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useCoarsePointer } from './useCoarsePointer';\n\nexport interface UseSwipeDismissOptions {\n  /** Called once the swipe commits (past the threshold) — after the exit transition finishes,\n   * not the instant the pointer is released. */\n  onDismiss: () => void;\n  /** Which axis the drag tracks (default `'x'`, the natural direction for a toast/notification). */\n  axis?: 'x' | 'y';\n  /** Distance in px past which releasing counts as a commit, regardless of speed (default `80`). */\n  distanceThreshold?: number;\n  /** Speed in px/ms past which releasing counts as a commit, regardless of distance (default `0.5`) —\n   * lets a fast flick dismiss even if the pointer didn't travel very far. */\n  velocityThreshold?: number;\n  /** Disables the gesture entirely — no listeners are attached. */\n  disabled?: boolean;\n  /** Restricts the gesture to coarse (touch) pointers, auto-detected via `matchMedia`. On a\n   * mouse/trackpad device a drag is more likely to be a text selection than an intentional\n   * dismiss, and other affordances (a close button, auto-dismiss) typically already cover that\n   * case. Default `true`; set `false` to allow the gesture on any pointer type. */\n  mobileOnly?: boolean;\n}\n\nexport interface UseSwipeDismissResult<T extends HTMLElement> {\n  /** Attach to the element that should become draggable. The hook wires up its own pointer\n   * listeners on this node directly (no handlers to spread), so this is the only thing to attach.\n   *\n   * A callback ref rather than an object one, because the hook has to know when the node changes:\n   * an element that is unmounted and rendered again is a *different* node, and a ref object cannot\n   * say so. To keep a ref of your own on the element, call both from one callback. */\n  ref: React.RefCallback<T>;\n  /** True for the duration of an active drag — e.g. use it to pause an auto-dismiss timer. */\n  isDragging: boolean;\n}\n\nconst EXIT_TRANSITION_MS = 180;\n// Below this many px of movement, direction intent isn't decided yet — lets a vertical scroll\n// gesture that merely starts on the element pass through instead of being hijacked as a swipe.\nconst AXIS_LOCK_THRESHOLD = 10;\n\n/**\n * Drag-to-dismiss on any pointer type (touch, mouse, pen) via the Pointer Events API. Applies the\n * drag offset and a fading opacity directly to the DOM node (bypassing React state) so the visual\n * tracks the pointer at native speed, then either springs back or animates fully off-screen and\n * calls `onDismiss` once that exit transition completes.\n */\nexport function useSwipeDismiss<T extends HTMLElement>({\n  onDismiss,\n  axis = 'x',\n  distanceThreshold = 80,\n  velocityThreshold = 0.5,\n  disabled = false,\n  mobileOnly = true,\n}: UseSwipeDismissOptions): UseSwipeDismissResult<T> {\n  // The node lives in state, not in a ref: the listeners have to be re-attached when the element\n  // is replaced, and a ref object's `current` changing never re-runs the effect below. Rendering\n  // the element again after it was unmounted otherwise left the gesture wired to the old node.\n  const [node, setNode] = useState<T | null>(null);\n  const ref = useCallback((element: T | null) => setNode(element), []);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const isCoarsePointer = useCoarsePointer();\n\n  const effectiveDisabled = disabled || (mobileOnly && !isCoarsePointer);\n\n  // Mutable across the life of one drag; doesn't need to trigger re-renders.\n  const dragRef = useRef<{\n    pointerId: number;\n    startX: number;\n    startY: number;\n    startTime: number;\n    offset: number;\n    axisLocked: boolean;\n    active: boolean;\n  } | null>(null);\n\n  const onDismissRef = useRef(onDismiss);\n  useEffect(() => {\n    onDismissRef.current = onDismiss;\n  });\n\n  useEffect(() => {\n    const el = node;\n    if (!el || effectiveDisabled) return;\n\n    function applyTransform(offset: number, transition: string) {\n      if (!el) return;\n      if (transition !== 'none') {\n        // Switching straight from the live drag's `transition: none` to an animated one, in the\n        // same tick as the transform change, can get coalesced into a single frame with no\n        // animation in between — the element just jumps to its end state instead of sliding\n        // there. Forcing a layout read first commits the current (pre-transition) position as\n        // its own frame, so the transition below actually has something to animate from.\n        void el.offsetHeight;\n      }\n      const translate = axis === 'x' ? `translateX(${offset}px)` : `translateY(${offset}px)`;\n      el.style.transition = transition;\n      el.style.transform = translate;\n      const fade = Math.max(0, 1 - Math.abs(offset) / (distanceThreshold * 2.5));\n      el.style.opacity = String(fade);\n    }\n\n    function onPointerMove(event: PointerEvent) {\n      const drag = dragRef.current;\n      if (!drag || event.pointerId !== drag.pointerId) return;\n\n      const deltaX = event.clientX - drag.startX;\n      const deltaY = event.clientY - drag.startY;\n\n      if (!drag.axisLocked) {\n        const primary = axis === 'x' ? deltaX : deltaY;\n        const cross = axis === 'x' ? deltaY : deltaX;\n        if (Math.abs(primary) < AXIS_LOCK_THRESHOLD && Math.abs(cross) < AXIS_LOCK_THRESHOLD) return;\n        if (Math.abs(cross) > Math.abs(primary)) {\n          // The gesture is mostly along the other axis (e.g. a page scroll) — hand it back.\n          drag.active = false;\n          return;\n        }\n        drag.axisLocked = true;\n        setIsDragging(true);\n      }\n\n      if (!drag.active) return;\n      event.preventDefault();\n      drag.offset = axis === 'x' ? deltaX : deltaY;\n      applyTransform(drag.offset, 'none');\n    }\n\n    function finishDrag() {\n      const drag = dragRef.current;\n      dragRef.current = null;\n      window.removeEventListener('pointermove', onPointerMove);\n      window.removeEventListener('pointerup', finishDrag);\n      window.removeEventListener('pointercancel', finishDrag);\n      if (!drag || !drag.active || !drag.axisLocked) {\n        setIsDragging(false);\n        return;\n      }\n\n      const elapsed = Math.max(1, Date.now() - drag.startTime);\n      const velocity = drag.offset / elapsed;\n      const committed = Math.abs(drag.offset) >= distanceThreshold || Math.abs(velocity) >= velocityThreshold;\n\n      if (committed) {\n        const width = el?.getBoundingClientRect().width ?? 0;\n        const exitOffset = Math.sign(drag.offset || 1) * (width + 40);\n        applyTransform(\n          exitOffset,\n          `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`,\n        );\n        setTimeout(() => onDismissRef.current(), EXIT_TRANSITION_MS);\n      } else {\n        applyTransform(0, `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`);\n      }\n      setIsDragging(false);\n    }\n\n    function onPointerDown(event: PointerEvent) {\n      if (dragRef.current || !el) return;\n      // A still-\"forwards\"-filling CSS animation (e.g. the toast's entrance slide) wins the\n      // cascade over an inline style.transform, so the drag offset below would silently never\n      // show up on screen unless the animation is cleared first.\n      el.style.animation = 'none';\n      dragRef.current = {\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        startY: event.clientY,\n        startTime: Date.now(),\n        offset: 0,\n        axisLocked: false,\n        active: true,\n      };\n      window.addEventListener('pointermove', onPointerMove, { passive: false });\n      window.addEventListener('pointerup', finishDrag);\n      window.addEventListener('pointercancel', finishDrag);\n    }\n\n    el.addEventListener('pointerdown', onPointerDown);\n    return () => {\n      el.removeEventListener('pointerdown', onPointerDown);\n      window.removeEventListener('pointermove', onPointerMove);\n      window.removeEventListener('pointerup', finishDrag);\n      window.removeEventListener('pointercancel', finishDrag);\n    };\n  }, [node, axis, distanceThreshold, velocityThreshold, effectiveDisabled]);\n\n  return { ref, isDragging };\n}\n"],"mappings":"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"}