@primitiv-ui/react 0.1.38 → 0.1.39

package/dist/MillerColumns/hooks/useMillerColumnsResizeHandle.d.ts

@@ -0,0 +1,290 @@
+import { KeyboardEvent, PointerEvent } from "react";
+import type { MillerColumnsResizeHandleProps } from "../types.js";
+export declare function useMillerColumnsResizeHandle({ onPointerDown, onKeyDown, minWidth, maxWidth, step, ...rest }: MillerColumnsResizeHandleProps): {
+    handleProps: {
+        ref: import("react").Ref<HTMLDivElement>;
+        key?: import("react").Key | null | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+        autoFocus?: boolean | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        style?: import("react").CSSProperties | undefined;
+        tabIndex: number;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role: import("react").AriaRole;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "false" | "true") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "false" | "true") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "false" | "true") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "false" | "true") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "false" | "true") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "false" | "true") | undefined;
+        "aria-multiline"?: (boolean | "false" | "true") | undefined;
+        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+        "aria-orientation": "horizontal" | "vertical";
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "false" | "true") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "false" | "true") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "false" | "true") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin": number;
+        "aria-valuenow": number;
+        "aria-valuetext"?: string | undefined;
+        children?: import("react").ReactNode | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
+        onChangeCapture?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
+        onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEnd?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEndCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+        onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onPointerDown: (event: PointerEvent<HTMLDivElement>) => void;
+        onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+        "data-dragging"?: string | undefined;
+        "data-miller-columns-resize-handle": string;
+    };
+};

package/dist/MillerColumns/hooks/useMillerColumnsResizeHandle.js

@@ -0,0 +1,105 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { useMillerColumnsContext } from "./useMillerColumnsContext.js";
+import { useMillerColumnsColumnContext } from "./useMillerColumnsColumnContext.js";
+export function useMillerColumnsResizeHandle({ onPointerDown, onKeyDown, minWidth = 0, maxWidth = Number.POSITIVE_INFINITY, step = 10, ...rest }) {
+    const { columnWidths, setColumnWidth, dir } = useMillerColumnsContext();
+    const { depth } = useMillerColumnsColumnContext();
+    const handleRef = useRef(null);
+    const [drag, setDrag] = useState(null);
+    // The column's rendered width before anything resizes it. Tracked so
+    // `aria-valuenow` is truthful from the first render — a splitter whose
+    // value only appears after the first drag announces nothing until then.
+    const [measured, setMeasured] = useState(0);
+    const clamp = (width) => Math.min(maxWidth, Math.max(minWidth, width));
+    // The resized width wins; otherwise the column is still sized by CSS.
+    const width = columnWidths.get(depth) ?? measured;
+    useLayoutEffect(() => {
+        const column = handleRef.current?.closest("[data-miller-columns-column]");
+        /* c8 ignore next 3 -- the handle only renders inside a Column, which
+           context already enforces, so the ancestor is always present. */
+        if (!column) {
+            return;
+        }
+        const measure = () => setMeasured(column.getBoundingClientRect().width);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(column);
+        return () => observer.disconnect();
+    }, []);
+    // A drag is tracked on `window`, not the handle, so the pointer can
+    // travel anywhere once it is down; the listeners live only for the
+    // lifetime of the drag.
+    useEffect(() => {
+        if (!drag) {
+            return;
+        }
+        const activeDrag = drag;
+        function handleMove(event) {
+            const next = activeDrag.startWidth + event.clientX - activeDrag.startX;
+            setColumnWidth(depth, Math.min(maxWidth, Math.max(minWidth, next)));
+        }
+        function endDrag() {
+            setDrag(null);
+        }
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", endDrag);
+        window.addEventListener("pointercancel", endDrag);
+        return () => {
+            window.removeEventListener("pointermove", handleMove);
+            window.removeEventListener("pointerup", endDrag);
+            window.removeEventListener("pointercancel", endDrag);
+        };
+    }, [drag, depth, setColumnWidth, minWidth, maxWidth]);
+    function handlePointerDown(event) {
+        onPointerDown?.(event);
+        // The handle only renders inside a Column (enforced by context), so
+        // its column ancestor is always present in the DOM. Once a column
+        // has been resized its width is known; before that, measure it.
+        const column = event.currentTarget.closest("[data-miller-columns-column]");
+        const startWidth = columnWidths.get(depth) ?? column.getBoundingClientRect().width;
+        setDrag({ startX: event.clientX, startWidth });
+    }
+    // The column extends towards the inline-end edge, which is leftwards
+    // under rtl — so the key that widens it mirrors with the direction.
+    const growKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const shrinkKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        const next = (() => {
+            switch (event.key) {
+                case growKey:
+                    return width + step;
+                case shrinkKey:
+                    return width - step;
+                case "Home":
+                    return minWidth;
+                case "End":
+                    return maxWidth;
+                default:
+                    return null;
+            }
+        })();
+        if (next === null || !Number.isFinite(next)) {
+            return;
+        }
+        event.preventDefault();
+        setColumnWidth(depth, clamp(next));
+    }
+    return {
+        handleProps: {
+            ref: handleRef,
+            role: "separator",
+            "aria-orientation": "vertical",
+            tabIndex: 0,
+            "aria-valuenow": Math.round(width),
+            "aria-valuemin": minWidth,
+            ...(Number.isFinite(maxWidth) ? { "aria-valuemax": maxWidth } : {}),
+            "data-miller-columns-resize-handle": "",
+            ...(drag ? { "data-dragging": "" } : {}),
+            onPointerDown: handlePointerDown,
+            onKeyDown: handleKeyDown,
+            ...rest,
+        },
+    };
+}

package/dist/MillerColumns/hooks/useMillerColumnsRoot.d.ts

@@ -0,0 +1,9 @@
+import type { Direction } from "../../DirectionProvider/types.js";
+import type { MillerColumnsContextValue } from "../types.js";
+export declare function useMillerColumnsRoot(controlledValue: string[] | undefined, defaultValue: string[] | undefined, onValueChange: ((path: string[]) => void) | undefined, dir: Direction | undefined): {
+    contextValue: MillerColumnsContextValue;
+    columnCount: number;
+    registerSlotRef: (depth: number) => (element: HTMLElement | null) => void;
+    stripRef: import("react").RefObject<HTMLDivElement | null>;
+    resolvedDir: Direction;
+};

package/dist/MillerColumns/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./MillerColumns.js";
+export { MILLER_COLUMNS_PART, type MillerColumnsPartName, } from "./utils.js";
+export { useMillerColumnsSelection } from "./useMillerColumnsSelection.js";
+export * from "./types.js";

package/dist/MillerColumns/index.js

@@ -0,0 +1,4 @@
+export * from "./MillerColumns.js";
+export { MILLER_COLUMNS_PART, } from "./utils.js";
+export { useMillerColumnsSelection } from "./useMillerColumnsSelection.js";
+export * from "./types.js";

package/dist/MillerColumns/types.d.ts

@@ -0,0 +1,224 @@
+import { ComponentProps, KeyboardEvent, ReactNode, Ref } from "react";
+import type { Direction } from "../DirectionProvider/types.js";
+/**
+ * Shared base for both {@link MillerColumnsRootProps} variants — the native
+ * `<div>` attributes (minus `ref`, which the strip owns internally, and
+ * `dir`, narrowed below to the {@link Direction} union).
+ */
+export type MillerColumnsRootBaseProps = Omit<ComponentProps<"div">, "ref" | "defaultValue" | "dir"> & {
+    /**
+     * Reading direction. Under `"rtl"` the horizontal arrow pair is
+     * mirrored — ArrowLeft steps *into* a branch's child column and
+     * ArrowRight walks back out — so navigation follows the visual order.
+     * Inherited from a `DirectionProvider` ancestor when omitted.
+     * @default "ltr"
+     */
+    dir?: Direction;
+    /**
+     * The strip's tree, authored recursively: root
+     * {@link MillerColumnsColumnProps | Column(s)} whose branch
+     * {@link MillerColumnsItemProps | Items} nest further Columns, plus an
+     * optional trailing {@link MillerColumnsPreviewPanelProps | PreviewPanel}.
+     * There is no `items` data prop — the JSX *is* the data.
+     */
+    children: ReactNode;
+};
+/**
+ * Uncontrolled variant of {@link MillerColumnsRootProps}: the component owns
+ * the selection path. Pass `defaultValue` (or omit it to start empty).
+ */
+export type MillerColumnsRootUncontrolledProps = MillerColumnsRootBaseProps & {
+    /** Initial selection path on first render, root column first (e.g.
+     * `["docs", "guides"]`). The component owns the path thereafter. */
+    defaultValue?: string[];
+    /** Forbidden in uncontrolled mode — use `defaultValue` instead. */
+    value?: never;
+    /** Forbidden in uncontrolled mode — pass `value` + `onValueChange` to
+     * control the component. */
+    onValueChange?: never;
+};
+/**
+ * Controlled variant of {@link MillerColumnsRootProps}: the parent owns the
+ * selection path. Pass `value` and `onValueChange` together.
+ */
+export type MillerColumnsRootControlledProps = MillerColumnsRootBaseProps & {
+    /** Forbidden in controlled mode — use `value` instead. */
+    defaultValue?: never;
+    /** The controlled selection path, root column first. Must be kept in sync
+     * by the parent via `onValueChange`. */
+    value: string[];
+    /** Called with the new selection path whenever the selection changes.
+     * Required in controlled mode. */
+    onValueChange: (path: string[]) => void;
+};
+/**
+ * Props for {@link MillerColumnsRoot | `MillerColumns.Root`}.
+ *
+ * Resolves to either {@link MillerColumnsRootUncontrolledProps} or
+ * {@link MillerColumnsRootControlledProps} — only one shape is accepted by
+ * TypeScript at a time.
+ */
+export type MillerColumnsRootProps = MillerColumnsRootUncontrolledProps | MillerColumnsRootControlledProps;
+/**
+ * Props for {@link MillerColumnsColumn | `MillerColumns.Column`}, a single
+ * vertical list. Rendered element is portal-projected into the Root strip.
+ */
+export type MillerColumnsColumnProps = ComponentProps<"div"> & {
+    /** The column's {@link MillerColumnsItemProps | Items} and, optionally, a
+     * {@link MillerColumnsResizeHandleProps | ResizeHandle}. Optional: a
+     * childless branch legitimately opens an empty column, which carries
+     * `data-empty` for the styling layer. */
+    children?: ReactNode;
+};
+/**
+ * Props for {@link MillerColumnsItem | `MillerColumns.Item`}, a single
+ * selectable node within a column.
+ *
+ * Generic over the rendered element type so `asChild` consumers can type
+ * the forwarded `ref` (e.g. `MillerColumns.Item<HTMLAnchorElement>`).
+ */
+export type MillerColumnsItemProps<T extends HTMLElement = HTMLDivElement> = Omit<ComponentProps<"div">, "ref"> & {
+    /** Stable identifier used to match this item against the selection path.
+     * The item is selected when the path entry at its depth equals `value`. */
+    value: string;
+    /**
+     * When `true`, the item renders `aria-disabled` / `data-disabled` and is
+     * skipped by roving navigation — it cannot be selected, focused, or
+     * activated.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Render the cell as a single consumer-supplied child element (e.g. an
+     * `<a>`) instead of the default `<div>`, merging the treeitem ARIA,
+     * handlers, and ref onto it via the {@link Slot} pattern. Any nested
+     * `<MillerColumns.Column>` remains a sibling of the cell element.
+     * @default false
+     */
+    asChild?: boolean;
+    /** The cell content and, for a branch item, a single nested
+     * `<MillerColumns.Column>` (split out by `partitionItemChildren`). */
+    children: ReactNode;
+    /** Forwarded to the rendered element. Defaults to `HTMLDivElement`; when
+     * using `asChild`, specify the child's element type. Composed with the
+     * library's internal ref. */
+    ref?: Ref<T>;
+};
+/**
+ * Props for {@link MillerColumnsItemIndicator | `MillerColumns.ItemIndicator`},
+ * the branch chevron affordance (renders nothing for leaf items).
+ */
+export type MillerColumnsItemIndicatorProps = ComponentProps<"span"> & {
+    /** The glyph to render (e.g. `▸`). Optional. */
+    children?: ReactNode;
+};
+/**
+ * Props for {@link MillerColumnsResizeHandle | `MillerColumns.ResizeHandle`},
+ * the drag-to-resize separator for its containing column.
+ */
+export type MillerColumnsResizeHandleProps = ComponentProps<"div"> & {
+    /**
+     * Smallest width the column can be dragged or stepped to, in pixels.
+     * Also published as `aria-valuemin`.
+     * @default 0
+     */
+    minWidth?: number;
+    /**
+     * Largest width the column can be dragged or stepped to, in pixels.
+     * Published as `aria-valuemax` when finite; left unbounded by default,
+     * in which case the attribute is omitted.
+     * @default Infinity
+     */
+    maxWidth?: number;
+    /**
+     * Pixels moved per arrow-key press.
+     * @default 10
+     */
+    step?: number;
+};
+/**
+ * Props for {@link MillerColumnsPreviewPanel | `MillerColumns.PreviewPanel`},
+ * the trailing preview pane.
+ */
+export type MillerColumnsPreviewPanelProps = ComponentProps<"div"> & {
+    /** The preview content for the current selection (typically driven by
+     * {@link useMillerColumnsSelection}). */
+    children?: ReactNode;
+    /**
+     * Keep the panel mounted regardless of the selection, instead of following
+     * Finder's rule (a preview only where a selected *leaf* would open a child
+     * column). Use it for a persistent inspector, or to animate the panel in
+     * and out.
+     * @default false
+     */
+    forceMount?: boolean;
+};
+/** The current selection, as returned by `useMillerColumnsSelection`. */
+export type MillerColumnsSelection = {
+    /** The full active path — selected item ids, root column first. */
+    path: string[];
+    /** The deepest selected item id, or `undefined` when nothing is selected. */
+    selectedValue: string | undefined;
+};
+/** Metadata recorded for each registered item, used for column navigation. */
+export type MillerColumnsItemMeta = {
+    /** The item's stable identifier. */
+    value: string;
+    /** Whether the item is disabled. */
+    disabled: boolean;
+};
+/** A depth + value pair locating an item within the strip. */
+export type MillerColumnsItemAddress = {
+    /** The zero-based column depth. */
+    depth: number;
+    /** The item's stable identifier. */
+    value: string;
+};
+/** Value shared through the root MillerColumns context. */
+export type MillerColumnsContextValue = {
+    /** The resolved reading direction — the `dir` prop, else the inherited one. */
+    dir: Direction;
+    /** Portal slots keyed by column depth. */
+    slots: Map<number, HTMLElement>;
+    /** Per-depth column widths set via the resize handle. */
+    columnWidths: Map<number, number>;
+    /** Record a column's width at the given depth. */
+    setColumnWidth: (depth: number, width: number) => void;
+    /** The active selection path. */
+    activePath: string[];
+    /** Select the item at the given depth and value. */
+    select: (depth: number, value: string) => void;
+    /** Register (or unregister, with a `null` element) an item. */
+    registerItem: (depth: number, value: string, element: HTMLElement | null, disabled: boolean, hasChildren: boolean) => void;
+    /** Whether the deepest selected item is a leaf — Finder's rule for whether a
+     * preview occupies the slot after it. `false` when nothing is selected. */
+    terminalIsLeaf: boolean;
+    /** Get the registered items for a column. */
+    getColumnItems: (depth: number) => MillerColumnsItemMeta[];
+    /** Read a registered item's rendered cell text, for typeahead matching. */
+    getItemLabel: (depth: number, value: string) => string;
+    /** Move focus to the given item. */
+    focusItem: (depth: number, value: string) => void;
+    /** Focus the first item in a column; returns whether one was focused. */
+    focusFirstInColumn: (depth: number) => boolean;
+    /** Request that focus move into the given column. */
+    requestColumnFocus: (depth: number) => void;
+    /** The currently active (focused) item, if any. */
+    activeItem: MillerColumnsItemAddress | null;
+    /** Set the active (focused) item. */
+    setActiveItem: (item: MillerColumnsItemAddress) => void;
+    /** Printable-character typeahead, scoped to the focused item's column. */
+    handleTypeahead: (event: KeyboardEvent<HTMLElement>) => void;
+};
+/** Value shared through a column's context. */
+export type MillerColumnsColumnContextValue = {
+    /** The column's zero-based depth. */
+    depth: number;
+};
+/** Value shared through an item's context. */
+export type MillerColumnsItemContextValue = {
+    /** Whether this item is on the active path. */
+    selected: boolean;
+    /** Whether this item has a nested child column. */
+    hasChildren: boolean;
+};

package/dist/MillerColumns/types.js

@@ -0,0 +1 @@
+export {};