foldkit 0.41.0 → 0.43.0

package/dist/ui/dragAndDrop/index.js

@@ -0,0 +1,511 @@
+import { Array, Effect, Equal, Equivalence, Function, Match as M, Option, Schema as S, Stream, pipe, } from 'effect';
+import * as Command from '../../command';
+import { html } from '../../html';
+import { m } from '../../message';
+import { makeSubscriptions } from '../../runtime/subscription';
+import { ts } from '../../schema';
+import { evo } from '../../struct';
+import * as Task from '../../task';
+// MODEL
+const Orientation = S.Literal('Horizontal', 'Vertical');
+const ScreenPoint = S.Struct({
+    screenX: S.Number,
+    screenY: S.Number,
+});
+const ClientPoint = S.Struct({
+    clientX: S.Number,
+    clientY: S.Number,
+});
+const DropTarget = S.Struct({
+    containerId: S.String,
+    index: S.Number,
+});
+const Idle = ts('Idle');
+const Pending = ts('Pending', {
+    itemId: S.String,
+    containerId: S.String,
+    index: S.Number,
+    origin: ScreenPoint,
+});
+const Dragging = ts('Dragging', {
+    itemId: S.String,
+    sourceContainerId: S.String,
+    sourceIndex: S.Number,
+    origin: ScreenPoint,
+    current: ClientPoint,
+    maybeDropTarget: S.OptionFromSelf(DropTarget),
+});
+const KeyboardDragging = ts('KeyboardDragging', {
+    itemId: S.String,
+    sourceContainerId: S.String,
+    sourceIndex: S.Number,
+    targetContainerId: S.String,
+    targetIndex: S.Number,
+});
+const DragState = S.Union(Idle, Pending, Dragging, KeyboardDragging);
+/** Schema for the drag-and-drop component's state, tracking its unique ID, orientation, and current drag phase. */
+export const Model = S.Struct({
+    id: S.String,
+    orientation: Orientation,
+    activationThreshold: S.Number,
+    dragState: DragState,
+});
+// MESSAGE
+/** The user pressed a pointer on a draggable item. */
+export const PressedDraggable = m('PressedDraggable', {
+    itemId: S.String,
+    containerId: S.String,
+    index: S.Number,
+    screenX: S.Number,
+    screenY: S.Number,
+});
+/** The pointer moved during a drag, with collision detection results. */
+export const MovedPointer = m('MovedPointer', {
+    screenX: S.Number,
+    screenY: S.Number,
+    clientX: S.Number,
+    clientY: S.Number,
+    maybeDropTarget: S.OptionFromSelf(DropTarget),
+});
+/** The pointer was released. */
+export const ReleasedPointer = m('ReleasedPointer');
+/** Escape was pressed during a drag. */
+export const CancelledDrag = m('CancelledDrag');
+/** The user activated keyboard drag with Space or Enter on a focused draggable. */
+export const ActivatedKeyboardDrag = m('ActivatedKeyboardDrag', {
+    itemId: S.String,
+    containerId: S.String,
+    index: S.Number,
+});
+/** The ResolveKeyboardMove Command resolved the next keyboard drag position. */
+export const ResolvedKeyboardMove = m('ResolvedKeyboardMove', {
+    targetContainerId: S.String,
+    targetIndex: S.Number,
+});
+/** The user confirmed a keyboard drop with Space or Enter. */
+export const ConfirmedKeyboardDrop = m('ConfirmedKeyboardDrop');
+/** The user pressed an arrow key during keyboard drag. */
+export const PressedArrowKey = m('PressedArrowKey', {
+    direction: S.Literal('Up', 'Down', 'Left', 'Right', 'NextContainer', 'PreviousContainer'),
+});
+/** An animation frame fired during auto-scroll. */
+export const CompletedAutoScroll = m('CompletedAutoScroll');
+/** The FocusItem Command completed. */
+export const CompletedFocusItem = m('CompletedFocusItem');
+/** Union of all messages the drag-and-drop component can produce. */
+export const Message = S.Union(PressedDraggable, MovedPointer, ReleasedPointer, CancelledDrag, ActivatedKeyboardDrag, ResolvedKeyboardMove, ConfirmedKeyboardDrop, PressedArrowKey, CompletedAutoScroll, CompletedFocusItem);
+// OUT MESSAGE
+/** Emitted when a drag completes with a valid drop target. The parent uses this to commit the reorder. */
+export const Reordered = ts('Reordered', {
+    itemId: S.String,
+    fromContainerId: S.String,
+    fromIndex: S.Number,
+    toContainerId: S.String,
+    toIndex: S.Number,
+});
+/** Emitted when a drag is cancelled via Escape or pointer release without a drop target. */
+export const Cancelled = ts('Cancelled');
+/** Union of all out-messages the drag-and-drop component can emit to its parent. */
+export const OutMessage = S.Union(Reordered, Cancelled);
+// INIT
+/** Configuration for creating a drag-and-drop model with `init`. */
+const DEFAULT_ACTIVATION_THRESHOLD_PIXELS = 5;
+/** Creates an initial drag-and-drop model. Starts in the Idle state with Vertical orientation and 5px activation threshold by default. */
+export const init = (config) => ({
+    id: config.id,
+    orientation: config.orientation ?? 'Vertical',
+    activationThreshold: config.activationThreshold ?? DEFAULT_ACTIVATION_THRESHOLD_PIXELS,
+    dragState: Idle(),
+});
+/** Resolves the next keyboard drag position by querying the DOM for adjacent sortable items and containers. */
+export const ResolveKeyboardMove = Command.define('ResolveKeyboardMove', ResolvedKeyboardMove);
+/** Focuses a draggable item by ID after keyboard drop or cancel. */
+export const FocusItem = Command.define('FocusItem', CompletedFocusItem);
+const focusItem = (itemId) => FocusItem(Task.focus(`[data-draggable-id="${itemId}"]`).pipe(Effect.ignore, Effect.as(CompletedFocusItem())));
+const resolveWithinContainer = (config) => {
+    const container = document.querySelector(`[data-droppable-id="${config.containerId}"]`);
+    if (!container) {
+        return ResolvedKeyboardMove({
+            targetContainerId: config.containerId,
+            targetIndex: config.currentIndex,
+        });
+    }
+    const itemCount = pipe(container.querySelectorAll('[data-sortable-id]'), Array.fromIterable, Array.filter(({ dataset }) => dataset['sortableId'] !== config.itemId), Array.length);
+    const nextIndex = config.isForward
+        ? Math.min(config.currentIndex + 1, itemCount)
+        : Math.max(config.currentIndex - 1, 0);
+    return ResolvedKeyboardMove({
+        targetContainerId: config.containerId,
+        targetIndex: nextIndex,
+    });
+};
+const resolveBetweenContainers = (config) => {
+    const allContainers = Array.fromIterable(document.querySelectorAll('[data-droppable-id]'));
+    const currentContainerIndex = pipe(allContainers, Array.findFirstIndex(({ dataset }) => dataset['droppableId'] === config.currentContainerId), Option.getOrElse(() => 0));
+    const nextContainerIndex = config.isForward
+        ? Math.min(currentContainerIndex + 1, allContainers.length - 1)
+        : Math.max(currentContainerIndex - 1, 0);
+    const nextContainerId = allContainers[nextContainerIndex]?.dataset['droppableId'] ??
+        config.currentContainerId;
+    return ResolvedKeyboardMove({
+        targetContainerId: nextContainerId,
+        targetIndex: 0,
+    });
+};
+const resolveKeyboardMoveTarget = (config) => Effect.sync(() => M.value(config.direction).pipe(M.withReturnType(), M.whenOr('Down', 'Right', () => resolveWithinContainer({
+    itemId: config.itemId,
+    containerId: config.currentContainerId,
+    currentIndex: config.currentIndex,
+    isForward: true,
+})), M.whenOr('Up', 'Left', () => resolveWithinContainer({
+    itemId: config.itemId,
+    containerId: config.currentContainerId,
+    currentIndex: config.currentIndex,
+    isForward: false,
+})), M.when('NextContainer', () => resolveBetweenContainers({
+    currentContainerId: config.currentContainerId,
+    isForward: true,
+})), M.when('PreviousContainer', () => resolveBetweenContainers({
+    currentContainerId: config.currentContainerId,
+    isForward: false,
+})), M.exhaustive));
+const withUpdateReturn = M.withReturnType();
+/** Processes a drag-and-drop message and returns the next model, commands, and an optional out-message for the parent. */
+export const update = (model, message) => M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+    PressedDraggable: ({ itemId, containerId, index, screenX, screenY }) => [
+        evo(model, {
+            dragState: () => Pending({
+                itemId,
+                containerId,
+                index,
+                origin: { screenX, screenY },
+            }),
+        }),
+        [],
+        Option.none(),
+    ],
+    MovedPointer: ({ screenX, screenY, clientX, clientY, maybeDropTarget }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Pending', pending => {
+        const deltaX = screenX - pending.origin.screenX;
+        const deltaY = screenY - pending.origin.screenY;
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        if (distance < model.activationThreshold) {
+            return [model, [], Option.none()];
+        }
+        return [
+            evo(model, {
+                dragState: () => Dragging({
+                    itemId: pending.itemId,
+                    sourceContainerId: pending.containerId,
+                    sourceIndex: pending.index,
+                    origin: pending.origin,
+                    current: { clientX, clientY },
+                    maybeDropTarget,
+                }),
+            }),
+            [],
+            Option.none(),
+        ];
+    }), M.tag('Dragging', dragging => [
+        evo(model, {
+            dragState: () => Dragging({
+                ...dragging,
+                current: { clientX, clientY },
+                maybeDropTarget,
+            }),
+        }),
+        [],
+        Option.none(),
+    ]), M.orElse(() => [model, [], Option.none()])),
+    ReleasedPointer: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('Pending', () => [
+        evo(model, { dragState: () => Idle() }),
+        [],
+        Option.none(),
+    ]), M.tag('Dragging', dragging => Option.match(dragging.maybeDropTarget, {
+        onNone: () => [
+            evo(model, { dragState: () => Idle() }),
+            [],
+            Option.some(Cancelled()),
+        ],
+        onSome: dropTarget => [
+            evo(model, { dragState: () => Idle() }),
+            [],
+            Option.some(Reordered({
+                itemId: dragging.itemId,
+                fromContainerId: dragging.sourceContainerId,
+                fromIndex: dragging.sourceIndex,
+                toContainerId: dropTarget.containerId,
+                toIndex: dropTarget.index,
+            })),
+        ],
+    })), M.orElse(() => [model, [], Option.none()])),
+    CancelledDrag: () => {
+        const maybeFocusCommand = Option.liftPredicate(model.dragState, dragState => dragState._tag === 'KeyboardDragging').pipe(Option.map(({ itemId }) => focusItem(itemId)));
+        const maybeOutMessage = Option.liftPredicate(model.dragState._tag, _tag => _tag === 'Dragging' || _tag === 'KeyboardDragging').pipe(Option.map(() => Cancelled()));
+        return [
+            evo(model, { dragState: () => Idle() }),
+            Option.toArray(maybeFocusCommand),
+            maybeOutMessage,
+        ];
+    },
+    ActivatedKeyboardDrag: ({ itemId, containerId, index }) => [
+        evo(model, {
+            dragState: () => KeyboardDragging({
+                itemId,
+                sourceContainerId: containerId,
+                sourceIndex: index,
+                targetContainerId: containerId,
+                targetIndex: index,
+            }),
+        }),
+        [],
+        Option.none(),
+    ],
+    ResolvedKeyboardMove: ({ targetContainerId, targetIndex }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('KeyboardDragging', keyboardDragging => [
+        evo(model, {
+            dragState: () => KeyboardDragging({
+                ...keyboardDragging,
+                targetContainerId,
+                targetIndex,
+            }),
+        }),
+        [],
+        Option.none(),
+    ]), M.orElse(() => [model, [], Option.none()])),
+    ConfirmedKeyboardDrop: () => M.value(model.dragState).pipe(withUpdateReturn, M.tag('KeyboardDragging', keyboardDragging => [
+        evo(model, { dragState: () => Idle() }),
+        [focusItem(keyboardDragging.itemId)],
+        Option.some(Reordered({
+            itemId: keyboardDragging.itemId,
+            fromContainerId: keyboardDragging.sourceContainerId,
+            fromIndex: keyboardDragging.sourceIndex,
+            toContainerId: keyboardDragging.targetContainerId,
+            toIndex: keyboardDragging.targetIndex,
+        })),
+    ]), M.orElse(() => [model, [], Option.none()])),
+    PressedArrowKey: ({ direction }) => M.value(model.dragState).pipe(withUpdateReturn, M.tag('KeyboardDragging', keyboardDragging => [
+        model,
+        [
+            ResolveKeyboardMove(resolveKeyboardMoveTarget({
+                itemId: keyboardDragging.itemId,
+                currentContainerId: keyboardDragging.targetContainerId,
+                currentIndex: keyboardDragging.targetIndex,
+                direction,
+            })),
+        ],
+        Option.none(),
+    ]), M.orElse(() => [model, [], Option.none()])),
+    CompletedAutoScroll: () => [model, [], Option.none()],
+    CompletedFocusItem: () => [model, [], Option.none()],
+}));
+// SUBSCRIPTION
+const DragActivity = S.Literal('Idle', 'Active');
+const PointerDragActivity = S.Literal('Idle', 'Active');
+const KeyboardDragActivity = S.Literal('Idle', 'Active');
+const resolveDropTarget = (clientX, clientY, orientation) => {
+    const maybeContainer = pipe(document.elementsFromPoint(clientX, clientY), Array.fromIterable, Array.findFirst(element => element.hasAttribute('data-droppable-id')));
+    return Option.flatMap(maybeContainer, container => {
+        const containerId = container.getAttribute('data-droppable-id');
+        if (!containerId) {
+            return Option.none();
+        }
+        const sortableItems = Array.fromIterable(container.querySelectorAll('[data-sortable-id]'));
+        const insertionIndex = pipe(sortableItems, Array.findFirstIndex(item => {
+            const rect = item.getBoundingClientRect();
+            return M.value(orientation).pipe(M.when('Vertical', () => clientY < rect.top + rect.height / 2), M.when('Horizontal', () => clientX < rect.left + rect.width / 2), M.exhaustive);
+        }), Option.getOrElse(() => sortableItems.length));
+        return Option.some({ containerId, index: insertionIndex });
+    });
+};
+const DEFAULT_AUTO_SCROLL_EDGE_PIXELS = 40;
+const DEFAULT_AUTO_SCROLL_MAX_SPEED = 15;
+const autoScroll = (clientY) => {
+    const viewportHeight = window.innerHeight;
+    const distanceFromTop = clientY;
+    const distanceFromBottom = viewportHeight - clientY;
+    if (distanceFromTop < DEFAULT_AUTO_SCROLL_EDGE_PIXELS) {
+        const speed = DEFAULT_AUTO_SCROLL_MAX_SPEED *
+            (1 - distanceFromTop / DEFAULT_AUTO_SCROLL_EDGE_PIXELS);
+        window.scrollBy(0, -speed);
+    }
+    else if (distanceFromBottom < DEFAULT_AUTO_SCROLL_EDGE_PIXELS) {
+        const speed = DEFAULT_AUTO_SCROLL_MAX_SPEED *
+            (1 - distanceFromBottom / DEFAULT_AUTO_SCROLL_EDGE_PIXELS);
+        window.scrollBy(0, speed);
+    }
+};
+const pointerDragActivityFromModel = (model) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('Pending', 'Dragging', () => 'Active'), M.orElse(() => 'Idle'));
+const dragActivityFromModel = (model) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('Idle', () => 'Idle'), M.orElse(() => 'Active'));
+const keyboardDragActivityFromModel = (model) => M.value(model.dragState).pipe(M.withReturnType(), M.tag('KeyboardDragging', () => 'Active'), M.orElse(() => 'Idle'));
+/** Schema describing the subscription dependencies for document-level drag tracking. */
+export const SubscriptionDeps = S.Struct({
+    documentPointer: S.Struct({
+        dragActivity: PointerDragActivity,
+        orientation: Orientation,
+    }),
+    documentEscape: S.Struct({ dragActivity: DragActivity }),
+    documentKeyboard: S.Struct({ dragActivity: KeyboardDragActivity }),
+    autoScroll: S.Struct({
+        isDragging: S.Boolean,
+        clientY: S.Number,
+    }),
+});
+/** Document-level subscriptions for pointer and keyboard events during drag operations. */
+export const subscriptions = makeSubscriptions(SubscriptionDeps)({
+    documentPointer: {
+        modelToDependencies: model => ({
+            dragActivity: pointerDragActivityFromModel(model),
+            orientation: model.orientation,
+        }),
+        dependenciesToStream: ({ dragActivity, orientation }) => {
+            const pointerEvents = Stream.merge(Stream.fromEventListener(document, 'pointermove').pipe(Stream.mapEffect(event => Effect.sync(() => MovedPointer({
+                screenX: event.screenX,
+                screenY: event.screenY,
+                clientX: event.clientX,
+                clientY: event.clientY,
+                maybeDropTarget: resolveDropTarget(event.clientX, event.clientY, orientation),
+            })))), Stream.fromEventListener(document, 'pointerup').pipe(Stream.map(() => ReleasedPointer())));
+            // NOTE: prevents text selection and locks cursor to grabbing during
+            // pointer drag. Uses a <style> element for cursor because inline styles
+            // on <html> don't override descendant elements' cursor values.
+            const documentDragStyles = Stream.async(_emit => {
+                document.documentElement.style.setProperty('user-select', 'none');
+                document.documentElement.style.setProperty('-webkit-user-select', 'none');
+                const cursorStyle = document.createElement('style');
+                cursorStyle.textContent = '* { cursor: grabbing !important; }';
+                document.head.appendChild(cursorStyle);
+                return Effect.sync(() => {
+                    document.documentElement.style.removeProperty('user-select');
+                    document.documentElement.style.removeProperty('-webkit-user-select');
+                    cursorStyle.remove();
+                });
+            });
+            return Stream.when(Stream.merge(pointerEvents, documentDragStyles), () => dragActivity === 'Active');
+        },
+    },
+    documentEscape: {
+        modelToDependencies: model => ({
+            dragActivity: dragActivityFromModel(model),
+        }),
+        dependenciesToStream: ({ dragActivity }) => Stream.when(Stream.fromEventListener(document, 'keydown').pipe(Stream.filter(({ key }) => key === 'Escape'), Stream.map(() => CancelledDrag())), () => dragActivity === 'Active'),
+    },
+    documentKeyboard: {
+        modelToDependencies: model => ({
+            dragActivity: keyboardDragActivityFromModel(model),
+        }),
+        dependenciesToStream: ({ dragActivity }) => Stream.when(Stream.fromEventListener(document, 'keydown').pipe(Stream.mapEffect((event) => Effect.sync(() => {
+            // NOTE: the draggable's OnKeyDownPreventDefault calls preventDefault on
+            // the Space that activates keyboard drag — skip it here so the same
+            // keypress doesn't also confirm the drop in the same tick.
+            if (event.defaultPrevented) {
+                return Option.none();
+            }
+            if (event.key === 'Tab') {
+                event.preventDefault();
+                return Option.some(PressedArrowKey({
+                    direction: event.shiftKey
+                        ? 'PreviousContainer'
+                        : 'NextContainer',
+                }));
+            }
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                return Option.some(ConfirmedKeyboardDrop());
+            }
+            return Option.map(arrowKeyToDirection(event.key), direction => {
+                event.preventDefault();
+                return PressedArrowKey({ direction });
+            });
+        })), Stream.filterMap(Function.identity)), () => dragActivity === 'Active'),
+    },
+    autoScroll: {
+        modelToDependencies: model => ({
+            isDragging: model.dragState._tag === 'Dragging',
+            clientY: model.dragState._tag === 'Dragging'
+                ? model.dragState.current.clientY
+                : 0,
+        }),
+        equivalence: Equivalence.struct({ isDragging: Equivalence.boolean }),
+        dependenciesToStream: ({ isDragging }, readDependencies) => Stream.when(Stream.async(emit => {
+            let animationFrameId = 0;
+            const step = () => {
+                autoScroll(readDependencies().clientY);
+                emit.single(CompletedAutoScroll());
+                animationFrameId = requestAnimationFrame(step);
+            };
+            animationFrameId = requestAnimationFrame(step);
+            return Effect.sync(() => cancelAnimationFrame(animationFrameId));
+        }), () => isDragging),
+    },
+});
+// VIEW
+const LEFT_MOUSE_BUTTON = 0;
+const arrowKeyToDirection = (key) => M.value(key).pipe(M.withReturnType(), M.when('ArrowUp', () => 'Up'), M.when('ArrowDown', () => 'Down'), M.when('ArrowLeft', () => 'Left'), M.when('ArrowRight', () => 'Right'), M.option);
+/** Returns attributes the parent attaches to a draggable element. Handles pointer-down, keyboard activation, and ARIA. */
+export const draggable = (config) => {
+    const { AriaRoleDescription, DataAttribute, OnKeyDownPreventDefault, OnPointerDown, Role, Style, Tabindex, } = html();
+    const isKeyboardDragActivationKey = (key) => key === ' ' || key === 'Enter';
+    const handleKeyDown = (key) => {
+        if (isKeyboardDragActivationKey(key) &&
+            config.model.dragState._tag === 'Idle') {
+            return Option.some(config.toParentMessage(ActivatedKeyboardDrag({
+                itemId: config.itemId,
+                containerId: config.containerId,
+                index: config.index,
+            })));
+        }
+        return Option.none();
+    };
+    return [
+        DataAttribute('draggable-id', config.itemId),
+        DataAttribute('sortable-id', config.itemId),
+        Role('option'),
+        AriaRoleDescription('draggable'),
+        Tabindex(0),
+        OnPointerDown((_pointerType, button, screenX, screenY) => pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.map(() => config.toParentMessage(PressedDraggable({
+            itemId: config.itemId,
+            containerId: config.containerId,
+            index: config.index,
+            screenX,
+            screenY,
+        }))))),
+        OnKeyDownPreventDefault(handleKeyDown),
+        Style({
+            'touch-action': 'none',
+            'user-select': 'none',
+            '-webkit-user-select': 'none',
+        }),
+    ];
+};
+/** Returns attributes the parent attaches to a droppable container element. */
+export const droppable = (containerId, label) => {
+    const { AriaLabel, DataAttribute, Role } = html();
+    return [
+        DataAttribute('droppable-id', containerId),
+        Role('listbox'),
+        ...(label ? [AriaLabel(label)] : []),
+    ];
+};
+/** Returns attributes the parent attaches to a sortable item element. Typically combined with `draggable`. */
+export const sortable = (itemId) => {
+    const { DataAttribute } = html();
+    return [DataAttribute('sortable-id', itemId)];
+};
+const ghostTransform = (clientX, clientY) => `translate3d(${String(clientX)}px, ${String(clientY)}px, 0)`;
+/** Returns positioning styles for the ghost element, or None when not dragging with a pointer. */
+export const ghostStyle = (model) => M.value(model.dragState).pipe(M.tag('Dragging', dragging => ({
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    transform: ghostTransform(dragging.current.clientX, dragging.current.clientY),
+    'pointer-events': 'none',
+    'z-index': '9999',
+})), M.option);
+/** Returns true when the component is actively dragging (pointer or keyboard). */
+export const isDragging = ({ dragState: { _tag } }) => _tag === 'Dragging' || _tag === 'KeyboardDragging';
+/** Returns the ID of the item currently being dragged or pending, if any. */
+export const maybeDraggedItemId = (model) => M.value(model.dragState).pipe(M.tag('Pending', pending => pending.itemId), M.tag('Dragging', dragging => dragging.itemId), M.tag('KeyboardDragging', keyboardDragging => keyboardDragging.itemId), M.option);
+/** Returns the current drop target, if any. Populated during pointer drag (from collision detection) and keyboard drag (from resolved position). */
+export const maybeDropTarget = (model) => M.value(model.dragState).pipe(M.tag('Dragging', dragging => dragging.maybeDropTarget), M.tag('KeyboardDragging', keyboardDragging => Option.some({
+    containerId: keyboardDragging.targetContainerId,
+    index: keyboardDragging.targetIndex,
+})), M.orElse(() => Option.none()));

package/dist/ui/dragAndDrop/public.d.ts

@@ -0,0 +1,3 @@
+export { init, update, draggable, droppable, sortable, ghostStyle, isDragging, maybeDraggedItemId, maybeDropTarget, subscriptions, SubscriptionDeps, Model, Message, OutMessage, PressedDraggable, MovedPointer, ReleasedPointer, CancelledDrag, ActivatedKeyboardDrag, ResolvedKeyboardMove, ConfirmedKeyboardDrop, PressedArrowKey, CompletedAutoScroll, CompletedFocusItem, FocusItem, ResolveKeyboardMove, Reordered, Cancelled, } from './index';
+export type { InitConfig, DraggableConfig, DraggableMessage } from './index';
+//# sourceMappingURL=public.d.ts.map

package/dist/ui/dragAndDrop/public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/dragAndDrop/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,SAAS,EACT,QAAQ,EACR,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,aAAa,EACb,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EAClB,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,SAAS,GACV,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA"}

package/dist/ui/dragAndDrop/public.js

@@ -0,0 +1 @@
+export { init, update, draggable, droppable, sortable, ghostStyle, isDragging, maybeDraggedItemId, maybeDropTarget, subscriptions, SubscriptionDeps, Model, Message, OutMessage, PressedDraggable, MovedPointer, ReleasedPointer, CancelledDrag, ActivatedKeyboardDrag, ResolvedKeyboardMove, ConfirmedKeyboardDrop, PressedArrowKey, CompletedAutoScroll, CompletedFocusItem, FocusItem, ResolveKeyboardMove, Reordered, Cancelled, } from './index';

package/dist/ui/index.d.ts

@@ -2,6 +2,7 @@ export * as Button from './button/public';
 export * as Checkbox from './checkbox/public';
 export * as Combobox from './combobox/public';
 export * as Dialog from './dialog/public';
+export * as DragAndDrop from './dragAndDrop/public';
 export * as Disclosure from './disclosure/public';
 export * as Fieldset from './fieldset/public';
 export * as Input from './input/public';

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAA;AACzC,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAC7C,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAC7C,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAA;AACzC,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAC7C,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAA;AACvC,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAC3C,OAAO,KAAK,IAAI,MAAM,eAAe,CAAA;AACrC,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAC3C,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAA;AACzC,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAA;AACzC,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAC7C,OAAO,KAAK,IAAI,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAA;AACzC,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAC7C,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAC7C,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAA;AACzC,OAAO,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACnD,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAC7C,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAA;AACvC,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAC3C,OAAO,KAAK,IAAI,MAAM,eAAe,CAAA;AACrC,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAC3C,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAA;AACzC,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAA;AACzC,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAC7C,OAAO,KAAK,IAAI,MAAM,eAAe,CAAA"}

package/dist/ui/index.js

@@ -2,6 +2,7 @@ export * as Button from './button/public';
 export * as Checkbox from './checkbox/public';
 export * as Combobox from './combobox/public';
 export * as Dialog from './dialog/public';
+export * as DragAndDrop from './dragAndDrop/public';
 export * as Disclosure from './disclosure/public';
 export * as Fieldset from './fieldset/public';
 export * as Input from './input/public';

package/dist/ui/listbox/multi.d.ts

@@ -153,7 +153,8 @@ export declare const view: <Message, Item>(config: Readonly<{
     } & {
         readonly selectedItems: readonly string[];
     };
-    toMessage: (message: import("./shared").Opened | import("./shared").Closed | import("./shared").ClosedByTab | import("./shared").ActivatedItem | import("./shared").DeactivatedItem | import("./shared").SelectedItem | import("./shared").MovedPointerOverItem | import("./shared").RequestedItemClick | import("./shared").Searched | import("./shared").PressedPointerOnButton | import("./shared").IgnoredMouseClick | import("./shared").SuppressedSpaceScroll) => Message;
+    toParentMessage: (message: import("./shared").Opened | import("./shared").Closed | import("./shared").ClosedByTab | import("./shared").ActivatedItem | import("./shared").DeactivatedItem | import("./shared").SelectedItem | import("./shared").MovedPointerOverItem | import("./shared").RequestedItemClick | import("./shared").Searched | import("./shared").PressedPointerOnButton | import("./shared").IgnoredMouseClick | import("./shared").SuppressedSpaceScroll) => Message;
+    onSelectedItem?: (value: string) => Message;
     items: readonly Item[];
     itemToConfig: (item: Item, context: Readonly<{
         isActive: boolean;
@@ -200,6 +201,6 @@ export declare const view: <Message, Item>(config: Readonly<{
     isInvalid?: boolean;
 }>) => Html;
 /** Creates a memoized multi-select listbox view. Static config is captured in a closure;
- *  only `model` and `toMessage` are compared per render via `createLazy`. */
-export declare const lazy: <Message, Item>(staticConfig: Omit<ViewConfig<Message, Item>, "model" | "toMessage">) => ((model: Model, toMessage: BaseViewConfig<Message, Item, Model>["toMessage"]) => Html);
+ *  only `model` and `toParentMessage` are compared per render via `createLazy`. */
+export declare const lazy: <Message, Item>(staticConfig: Omit<ViewConfig<Message, Item>, "model" | "toParentMessage" | "onSelectedItem">) => ((model: Model, toParentMessage: BaseViewConfig<Message, Item, Model>["toParentMessage"]) => Html);
 //# sourceMappingURL=multi.d.ts.map

package/dist/ui/listbox/multi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi.d.ts","sourceRoot":"","sources":["../../../src/ui/listbox/multi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,IAAI,CAAC,EAAQ,MAAM,QAAQ,CAAA;AAEzD,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,YAAY,CAAA;AAElD,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAIpB,MAAM,UAAU,CAAA;AAIjB,iKAAiK;AACjK,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;GAEjB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,6RAA6R;AAC7R,MAAM,MAAM,UAAU,GAAG,cAAc,GACrC,QAAQ,CAAC;IACP,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACtC,CAAC,CAAA;AAEJ,4HAA4H;AAC5H,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAGxC,CAAA;AAIF,wJAAwJ;AACxJ,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAMjB,CAAA;AAIF,sEAAsE;AACtE,MAAM,MAAM,UAAU,CAAC,OAAO,EAAE,IAAI,IAAI,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAA;AAE5E,0JAA0J;AAC1J,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAYf,CAAA;AAEF;6EAC6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,IAAI,EAChC,cAAc,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,KACnE,CAAC,CACF,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,WAAW,CAAC,KACzD,IAAI,CAgBR,CAAA"}
+{"version":3,"file":"multi.d.ts","sourceRoot":"","sources":["../../../src/ui/listbox/multi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,IAAI,CAAC,EAAQ,MAAM,QAAQ,CAAA;AAEzD,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,YAAY,CAAA;AAElD,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAIpB,MAAM,UAAU,CAAA;AAIjB,iKAAiK;AACjK,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;GAEjB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,6RAA6R;AAC7R,MAAM,MAAM,UAAU,GAAG,cAAc,GACrC,QAAQ,CAAC;IACP,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACtC,CAAC,CAAA;AAEJ,4HAA4H;AAC5H,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAGxC,CAAA;AAIF,wJAAwJ;AACxJ,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAMjB,CAAA;AAIF,sEAAsE;AACtE,MAAM,MAAM,UAAU,CAAC,OAAO,EAAE,IAAI,IAAI,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAA;AAE5E,0JAA0J;AAC1J,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAYf,CAAA;AAEF;mFACmF;AACnF,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,IAAI,EAChC,cAAc,IAAI,CAChB,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EACzB,OAAO,GAAG,iBAAiB,GAAG,gBAAgB,CAC/C,KACA,CAAC,CACF,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,iBAAiB,CAAC,KACrE,IAAI,CAoBR,CAAA"}

package/dist/ui/listbox/multi.js

@@ -25,12 +25,12 @@ export const view = makeView({
     ariaMultiSelectable: true,
 });
 /** Creates a memoized multi-select listbox view. Static config is captured in a closure;
- *  only `model` and `toMessage` are compared per render via `createLazy`. */
+ *  only `model` and `toParentMessage` are compared per render via `createLazy`. */
 export const lazy = (staticConfig) => {
     const lazyView = createLazy();
-    return (model, toMessage) => lazyView((currentModel, currentToMessage) => view({
+    return (model, toParentMessage) => lazyView((currentModel, currentToMessage) => view({
         ...staticConfig,
         model: currentModel,
-        toMessage: currentToMessage,
-    }), [model, toMessage]);
+        toParentMessage: currentToMessage,
+    }), [model, toParentMessage]);
 };

package/dist/ui/listbox/public.d.ts

@@ -1,7 +1,7 @@
-export { init, update, view, lazy, Model } from './single';
-export { Message, Orientation } from './shared';
+export { init, update, selectItem, view, lazy, Model } from './single';
+export { Message, Orientation, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, CompletedFocusButton, CompletedFocusItems, CompletedScrollIntoView, CompletedClickItem, ClearedSearch, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement, RequestFrame, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusButton, FocusItems, ScrollIntoView, ClickItem, DelayClearSearch, WaitForTransitions, DetectMovementOrTransitionEnd, } from './shared';
 export { TransitionState } from '../transition';
-export type { ActivationTrigger, Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, PressedPointerOnButton, DetectedButtonMovement, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, CompletedFocusButton, CompletedFocusItems, CompletedScrollIntoView, CompletedClickItem, IgnoredMouseClick, SuppressedSpaceScroll, AdvancedTransitionFrame, EndedTransition, ItemConfig, GroupHeading, } from './shared';
+export type { ActivationTrigger, Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, MovedPointerOverItem, RequestedItemClick, Searched, PressedPointerOnButton, IgnoredMouseClick, SuppressedSpaceScroll, ItemConfig, GroupHeading, } from './shared';
 export type { InitConfig, ViewConfig } from './single';
 export type { AnchorConfig } from '../anchor';
 export * as Multi from './multiPublic';

package/dist/ui/listbox/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/listbox/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAE1D,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,uBAAuB,EACvB,eAAe,EACf,UAAU,EACV,YAAY,GACb,MAAM,UAAU,CAAA;AAEjB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAEtD,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,eAAe,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/listbox/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEtE,OAAO,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,aAAa,EACb,uBAAuB,EACvB,eAAe,EACf,sBAAsB,EACtB,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,6BAA6B,GAC9B,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,UAAU,EACV,YAAY,GACb,MAAM,UAAU,CAAA;AAEjB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAEtD,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,eAAe,CAAA"}

package/dist/ui/listbox/public.js

@@ -1,4 +1,4 @@
-export { init, update, view, lazy, Model } from './single';
-export { Message, Orientation } from './shared';
+export { init, update, selectItem, view, lazy, Model } from './single';
+export { Message, Orientation, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, CompletedFocusButton, CompletedFocusItems, CompletedScrollIntoView, CompletedClickItem, ClearedSearch, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement, RequestFrame, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusButton, FocusItems, ScrollIntoView, ClickItem, DelayClearSearch, WaitForTransitions, DetectMovementOrTransitionEnd, } from './shared';
 export { TransitionState } from '../transition';
 export * as Multi from './multiPublic';