@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/drag-drop/dom/styling.js

@@ -0,0 +1,86 @@
+/**
+ * Shallow-extends a stylesheet object with another stylesheet-like object.
+ * Note that the keys in `source` have to be dash-cased.
+ * @docs-private
+ */
+export function extendStyles(dest, source, importantProperties) {
+    for (let key in source) {
+        if (Object.hasOwn(source, key)) {
+            const value = source[key];
+            if (value) {
+                dest.setProperty(key, value, importantProperties?.has(key) ? "important" : "");
+            }
+            else {
+                dest.removeProperty(key);
+            }
+        }
+    }
+    return dest;
+}
+/**
+ * Toggles whether the native drag interactions should be enabled for an element.
+ * @param element Element on which to toggle the drag interactions.
+ * @param enable Whether the drag interactions should be enabled.
+ * @docs-private
+ */
+export function toggleNativeDragInteractions(element, enable) {
+    extendStyles(element.style, nativeDragInteractionStyles(enable));
+}
+/**
+ * Rivet: the styles `toggleNativeDragInteractions` applies (split out so server-rendered handles carry
+ * the same declarations before any code runs).
+ */
+export function nativeDragInteractionStyles(enable) {
+    const userSelect = enable ? "" : "none";
+    return {
+        "touch-action": enable ? "" : "none",
+        "-webkit-user-drag": enable ? "" : "none",
+        "-webkit-tap-highlight-color": enable ? "" : "transparent",
+        "user-select": userSelect,
+        "-ms-user-select": userSelect,
+        "-webkit-user-select": userSelect,
+        "-moz-user-select": userSelect,
+    };
+}
+/**
+ * Toggles whether an element is visible while preserving its dimensions.
+ * @param element Element whose visibility to toggle
+ * @param enable Whether the element should be visible.
+ * @param importantProperties Properties to be set as `!important`.
+ * @docs-private
+ */
+export function toggleVisibility(element, enable, importantProperties) {
+    extendStyles(element.style, {
+        position: enable ? "" : "fixed",
+        top: enable ? "" : "0",
+        opacity: enable ? "" : "0",
+        left: enable ? "" : "-999em",
+    }, importantProperties);
+}
+/**
+ * Combines a transform string with an optional other transform
+ * that exited before the base transform was applied.
+ */
+export function combineTransforms(transform, initialTransform) {
+    return initialTransform && initialTransform != "none" ? transform + " " + initialTransform : transform;
+}
+/**
+ * Matches the target element's size to the source's size.
+ * @param target Element that needs to be resized.
+ * @param sourceRect Dimensions of the source element.
+ */
+export function matchElementSize(target, sourceRect) {
+    target.style.width = `${sourceRect.width}px`;
+    target.style.height = `${sourceRect.height}px`;
+    target.style.transform = getTransform(sourceRect.left, sourceRect.top);
+}
+/**
+ * Gets a 3d `transform` that can be applied to an element.
+ * @param x Desired position of the element along the X axis.
+ * @param y Desired position of the element along the Y axis.
+ */
+export function getTransform(x, y) {
+    // Round the transforms since some browsers will
+    // blur the elements for sub-pixel transforms.
+    return `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
+}

package/drag-drop/dom/transition-duration.d.ts

@@ -0,0 +1,2 @@
+/** Gets the transform transition duration, including the delay, of an element in milliseconds. */
+export declare function getTransformTransitionDurationInMs(element: HTMLElement): number;

package/drag-drop/dom/transition-duration.js

@@ -0,0 +1,29 @@
+// Ported from Angular Components (src/cdk/drag-drop/dom/transition-duration.ts), MIT, © Google LLC.
+/** Parses a CSS time value to milliseconds. */
+function parseCssTimeUnitsToMs(value) {
+    // Some browsers will return it in seconds, whereas others will return milliseconds.
+    const multiplier = value.toLowerCase().indexOf('ms') > -1 ? 1 : 1000;
+    return parseFloat(value) * multiplier;
+}
+/** Gets the transform transition duration, including the delay, of an element in milliseconds. */
+export function getTransformTransitionDurationInMs(element) {
+    const computedStyle = getComputedStyle(element);
+    const transitionedProperties = parseCssPropertyValue(computedStyle, 'transition-property');
+    const property = transitionedProperties.find(prop => prop === 'transform' || prop === 'all');
+    // If there's no transition for `all` or `transform`, we shouldn't do anything.
+    if (!property) {
+        return 0;
+    }
+    // Get the index of the property that we're interested in and match
+    // it up to the same index in `transition-delay` and `transition-duration`.
+    const propertyIndex = transitionedProperties.indexOf(property);
+    const rawDurations = parseCssPropertyValue(computedStyle, 'transition-duration');
+    const rawDelays = parseCssPropertyValue(computedStyle, 'transition-delay');
+    return (parseCssTimeUnitsToMs(rawDurations[propertyIndex]) +
+        parseCssTimeUnitsToMs(rawDelays[propertyIndex]));
+}
+/** Parses out multiple values from a computed style into an array. */
+function parseCssPropertyValue(computedStyle, name) {
+    const value = computedStyle.getPropertyValue(name);
+    return value.split(',').map(part => part.trim());
+}

package/drag-drop/drag-drop-registry.d.ts

@@ -0,0 +1,69 @@
+import { Emitter, type Stream } from "../scrolling/emitter.js";
+import type { DropListRef } from "./drop-list-ref.js";
+import type { DragRef } from "./drag-ref.js";
+/**
+ * Service that keeps track of all the drag item and drop container
+ * instances, and manages global event listeners on the `document`.
+ * @docs-private
+ */
+export declare class DragDropRegistry {
+    private _document;
+    private _cleanupDocumentTouchmove;
+    private _scroll;
+    /** Registered drop container instances. */
+    private _dropInstances;
+    /** Registered drag item instances. */
+    private _dragInstances;
+    /** Drag item instances that are currently being dragged. */
+    private _activeDragInstances;
+    /** Keeps track of the event listeners that we've bound to the `document`. */
+    private _globalListeners;
+    /** Predicate function to check if an item is being dragged. */
+    private _draggingPredicate;
+    /** Map tracking DOM nodes and their corresponding drag directives. */
+    private _domNodesToDirectives;
+    /** Emits the `touchmove` or `mousemove` events that are dispatched while the user is dragging a drag item instance. */
+    readonly pointerMove: Emitter<MouseEvent | TouchEvent>;
+    /** Emits the `touchend` or `mouseup` events that are dispatched while the user is dragging a drag item instance. */
+    readonly pointerUp: Emitter<MouseEvent | TouchEvent>;
+    constructor(doc?: Document);
+    /** Adds a drop container to the registry. */
+    registerDropContainer(drop: DropListRef): void;
+    /** Adds a drag item instance to the registry. */
+    registerDragItem(drag: DragRef): void;
+    /** Removes a drop container from the registry. */
+    removeDropContainer(drop: DropListRef): void;
+    /** Removes a drag item instance from the registry. */
+    removeDragItem(drag: DragRef): void;
+    /**
+     * Starts the dragging sequence for a drag instance.
+     * @param drag Drag instance which is being dragged.
+     * @param event Event that initiated the dragging.
+     */
+    startDragging(drag: DragRef, event: TouchEvent | MouseEvent): void;
+    /** Stops dragging a drag item instance. */
+    stopDragging(drag: DragRef): void;
+    /** Gets whether a drag item instance is currently being dragged. */
+    isDragging(drag: DragRef): boolean;
+    /**
+     * Gets a stream that will emit when any element on the page is scrolled while an item is being dragged.
+     * @param shadowRoot Optional shadow root that the current dragging sequence started from.
+     */
+    scrolled(shadowRoot?: DocumentOrShadowRoot | null): Stream<Event>;
+    /** Tracks the DOM node which has a draggable directive. */
+    registerDirectiveNode(node: Node, dragRef: unknown): void;
+    /** Stops tracking a draggable directive node. */
+    removeDirectiveNode(node: Node): void;
+    /** Gets the drag directive corresponding to a specific DOM node, if any. */
+    getDragDirectiveForNode<T = unknown>(node: Node): T | null;
+    /** Angular `ngOnDestroy`. */
+    destroy(): void;
+    /** Event listener that will prevent the default browser action while the user is dragging. */
+    private _preventDefaultWhileDragging;
+    /** Event listener for `touchmove` that is bound even if no dragging is happening. */
+    private _persistentTouchmoveListener;
+    /** Clears out the global event listeners from the `document`. */
+    private _clearGlobalListeners;
+}
+/** The per-document registry, created on first use (Angular: root-provided service). */
+export declare function dragDropRegistry(doc?: Document): DragDropRegistry;

package/drag-drop/drag-drop-registry.js

@@ -0,0 +1,224 @@
+// Ported from Angular Components (src/cdk/drag-drop/drag-drop-registry.ts), MIT, © Google LLC.
+// Rivet: no DI / NgZone / Renderer2 — `dragDropRegistry(document?)` returns the lazily created per-document
+// instance (nothing at import time); Subjects are `Emitter`s; the reset styles (resets.scss) are injected
+// as one <style> on the first drag (Angular: `_CdkPrivateStyleLoader`); the directive-node map stores
+// any value (the Rivet `CdkDrag` handle).
+// Deviation (2026-10-08, kanban preview lost its padding): the resets `<style>` goes FIRST in `<head>`, so
+// `@layer cdk-resets` is the first declared layer = the lowest-priority one. Appended (upstream), it comes
+// after an app's own layers (Tailwind v4 `@layer theme, base, components, utilities`) and outranks them:
+// the preview clone's `p-*` / `bg-*` / `border` utilities lost to `padding: 0` / `background: none`.
+// The resets are meant as defaults any app style overrides (unlayered CSS beats them either way).
+// Deviation (2026-10-09, kanban preview font sizes): the preview's inherited text properties read the
+// custom properties a global preview carries from the dragged element's parent (dom/inherited-text.ts),
+// falling back to `inherit` (upstream: `color: inherit`, the rest inherited from `<body>`).
+import { INHERITED_TEXT_RESETS } from "./dom/inherited-text.js";
+import { Emitter, stream } from "../scrolling/emitter.js";
+/** Event options that can be used to bind a capturing event. */
+const capturingEventOptions = { capture: true };
+/** Event options that can be used to bind an active, capturing event. */
+const activeCapturingEventOptions = { passive: false, capture: true };
+/** resets.scss */
+const RESETS = `@layer cdk-resets{.cdk-drag-preview{background:none;border:none;padding:0;overflow:visible;inset:auto;${INHERITED_TEXT_RESETS}}}
+.cdk-drag-placeholder *,.cdk-drag-preview *{pointer-events:none!important}`;
+function loadResets(doc) {
+    if (doc.querySelector("style[data-cdk-drag-resets]"))
+        return;
+    const style = doc.createElement("style");
+    style.setAttribute("data-cdk-drag-resets", "");
+    style.textContent = RESETS;
+    const parent = doc.head || doc.documentElement;
+    parent.insertBefore(style, parent.firstChild);
+}
+function listen(target, name, handler, options) {
+    target.addEventListener(name, handler, options);
+    return () => target.removeEventListener(name, handler, options);
+}
+/**
+ * Service that keeps track of all the drag item and drop container
+ * instances, and manages global event listeners on the `document`.
+ * @docs-private
+ */
+export class DragDropRegistry {
+    _document;
+    _cleanupDocumentTouchmove;
+    _scroll = new Emitter();
+    /** Registered drop container instances. */
+    _dropInstances = new Set();
+    /** Registered drag item instances. */
+    _dragInstances = new Set();
+    /** Drag item instances that are currently being dragged. */
+    _activeDragInstances = [];
+    /** Keeps track of the event listeners that we've bound to the `document`. */
+    _globalListeners;
+    /** Predicate function to check if an item is being dragged. */
+    _draggingPredicate = (item) => item.isDragging();
+    /** Map tracking DOM nodes and their corresponding drag directives. */
+    _domNodesToDirectives = null;
+    /** Emits the `touchmove` or `mousemove` events that are dispatched while the user is dragging a drag item instance. */
+    pointerMove = new Emitter();
+    /** Emits the `touchend` or `mouseup` events that are dispatched while the user is dragging a drag item instance. */
+    pointerUp = new Emitter();
+    constructor(doc) {
+        this._document = doc ?? document;
+    }
+    /** Adds a drop container to the registry. */
+    registerDropContainer(drop) {
+        if (!this._dropInstances.has(drop)) {
+            this._dropInstances.add(drop);
+        }
+    }
+    /** Adds a drag item instance to the registry. */
+    registerDragItem(drag) {
+        this._dragInstances.add(drag);
+        // The `touchmove` event gets bound once, ahead of time, because WebKit
+        // won't preventDefault on a dynamically-added `touchmove` listener.
+        // See https://bugs.webkit.org/show_bug.cgi?id=184250.
+        if (this._dragInstances.size === 1) {
+            // The event handler has to be explicitly active, because newer browsers make it passive by default.
+            this._cleanupDocumentTouchmove?.();
+            this._cleanupDocumentTouchmove = listen(this._document, "touchmove", this._persistentTouchmoveListener, activeCapturingEventOptions);
+        }
+    }
+    /** Removes a drop container from the registry. */
+    removeDropContainer(drop) {
+        this._dropInstances.delete(drop);
+    }
+    /** Removes a drag item instance from the registry. */
+    removeDragItem(drag) {
+        this._dragInstances.delete(drag);
+        this.stopDragging(drag);
+        if (this._dragInstances.size === 0) {
+            this._cleanupDocumentTouchmove?.();
+        }
+    }
+    /**
+     * Starts the dragging sequence for a drag instance.
+     * @param drag Drag instance which is being dragged.
+     * @param event Event that initiated the dragging.
+     */
+    startDragging(drag, event) {
+        // Do not process the same drag twice to avoid memory leaks and redundant listeners
+        if (this._activeDragInstances.indexOf(drag) > -1) {
+            return;
+        }
+        loadResets(this._document);
+        this._activeDragInstances = [...this._activeDragInstances, drag];
+        if (this._activeDragInstances.length === 1) {
+            // We explicitly bind __active__ listeners here, because newer browsers will default to
+            // passive ones for `mousemove` and `touchmove`. The events need to be active, because we
+            // use `preventDefault` to prevent the page from scrolling while the user is dragging.
+            const isTouchEvent = event.type.startsWith("touch");
+            const endEventHandler = (e) => this.pointerUp.next(e);
+            const toBind = [
+                // Use capturing so that we pick up scroll changes in any scrollable nodes that aren't
+                // the document. See https://github.com/angular/components/issues/17144.
+                ["scroll", (e) => this._scroll.next(e), capturingEventOptions],
+                // Preventing the default action on `mousemove` isn't enough to disable text selection
+                // on Safari so we need to prevent the selection event as well.
+                ["selectstart", this._preventDefaultWhileDragging, activeCapturingEventOptions],
+            ];
+            if (isTouchEvent) {
+                toBind.push(["touchend", endEventHandler, capturingEventOptions], ["touchcancel", endEventHandler, capturingEventOptions]);
+            }
+            else {
+                toBind.push(["mouseup", endEventHandler, capturingEventOptions]);
+            }
+            // We don't have to bind a move event for touch drag sequences, because
+            // we already have a persistent global one bound from `registerDragItem`.
+            if (!isTouchEvent) {
+                toBind.push(["mousemove", (e) => this.pointerMove.next(e), activeCapturingEventOptions]);
+            }
+            this._globalListeners = toBind.map(([name, handler, options]) => listen(this._document, name, handler, options));
+        }
+    }
+    /** Stops dragging a drag item instance. */
+    stopDragging(drag) {
+        const index = this._activeDragInstances.indexOf(drag);
+        if (index > -1) {
+            this._activeDragInstances.splice(index, 1);
+            this._activeDragInstances = [...this._activeDragInstances];
+        }
+        if (this._activeDragInstances.length === 0) {
+            this._clearGlobalListeners();
+        }
+    }
+    /** Gets whether a drag item instance is currently being dragged. */
+    isDragging(drag) {
+        return this._activeDragInstances.indexOf(drag) > -1;
+    }
+    /**
+     * Gets a stream that will emit when any element on the page is scrolled while an item is being dragged.
+     * @param shadowRoot Optional shadow root that the current dragging sequence started from.
+     */
+    scrolled(shadowRoot) {
+        if (!shadowRoot || shadowRoot === this._document)
+            return this._scroll;
+        return stream((observer) => {
+            const sub = this._scroll.subscribe(observer.next);
+            const cleanup = listen(shadowRoot, "scroll", (event) => {
+                if (this._activeDragInstances.length)
+                    observer.next(event);
+            }, capturingEventOptions);
+            return () => {
+                sub.unsubscribe();
+                cleanup();
+            };
+        });
+    }
+    /** Tracks the DOM node which has a draggable directive. */
+    registerDirectiveNode(node, dragRef) {
+        this._domNodesToDirectives ??= new WeakMap();
+        this._domNodesToDirectives.set(node, dragRef);
+    }
+    /** Stops tracking a draggable directive node. */
+    removeDirectiveNode(node) {
+        this._domNodesToDirectives?.delete(node);
+    }
+    /** Gets the drag directive corresponding to a specific DOM node, if any. */
+    getDragDirectiveForNode(node) {
+        return this._domNodesToDirectives?.get(node) || null;
+    }
+    /** Angular `ngOnDestroy`. */
+    destroy() {
+        this._dragInstances.forEach((instance) => this.removeDragItem(instance));
+        this._dropInstances.forEach((instance) => this.removeDropContainer(instance));
+        this._domNodesToDirectives = null;
+        this._clearGlobalListeners();
+        this.pointerMove.complete();
+        this.pointerUp.complete();
+        if (registries?.get(this._document) === this)
+            registries.delete(this._document);
+    }
+    /** Event listener that will prevent the default browser action while the user is dragging. */
+    _preventDefaultWhileDragging = (event) => {
+        if (this._activeDragInstances.length > 0) {
+            event.preventDefault();
+        }
+    };
+    /** Event listener for `touchmove` that is bound even if no dragging is happening. */
+    _persistentTouchmoveListener = (event) => {
+        if (this._activeDragInstances.length > 0) {
+            // Note that we only want to prevent the default action after dragging has actually started.
+            // Usually this is the same time at which the item is added to the `_activeDragInstances`,
+            // but it could be pushed back if the user has set up a drag delay or threshold.
+            if (this._activeDragInstances.some(this._draggingPredicate)) {
+                event.preventDefault();
+            }
+            this.pointerMove.next(event);
+        }
+    };
+    /** Clears out the global event listeners from the `document`. */
+    _clearGlobalListeners() {
+        this._globalListeners?.forEach((cleanup) => cleanup());
+        this._globalListeners = undefined;
+    }
+}
+let registries;
+/** The per-document registry, created on first use (Angular: root-provided service). */
+export function dragDropRegistry(doc = document) {
+    registries ??= new WeakMap();
+    let registry = registries.get(doc);
+    if (!registry)
+        registries.set(doc, (registry = new DragDropRegistry(doc)));
+    return registry;
+}

package/drag-drop/drag-drop.d.ts

@@ -0,0 +1,19 @@
+import { type DragRef, type DragRefConfig } from "./drag-ref.js";
+import { type DropListRef } from "./drop-list-ref.js";
+import type { ElementLike } from "./dom/coerce.js";
+/** Service that allows for drag-and-drop functionality to be attached to DOM elements (Angular `DragDrop`). */
+export interface DragDropService {
+    /**
+     * Turns an element into a draggable item.
+     * @param element Element to which to attach the dragging functionality.
+     * @param config Object used to configure the dragging behavior.
+     */
+    createDrag<T = any>(element: ElementLike, config?: DragRefConfig): DragRef<T>;
+    /**
+     * Turns an element into a drop list.
+     * @param element Element to which to attach the drop list functionality.
+     */
+    createDropList<T = any>(element: ElementLike): DropListRef<T>;
+}
+/** Angular `inject(DragDrop)`. */
+export declare const dragDrop: DragDropService;

package/drag-drop/drag-drop.js

@@ -0,0 +1,10 @@
+// Ported from Angular Components (src/cdk/drag-drop/drag-drop.ts), MIT, © Google LLC.
+// Rivet: the `DragDrop` service is the `dragDrop` object (no DI; the name `DragDrop` is the drop event
+// type); prefer `createDragRef` / `createDropListRef` (better tree shaking, like upstream).
+import { createDragRef } from "./drag-ref.js";
+import { createDropListRef } from "./drop-list-ref.js";
+/** Angular `inject(DragDrop)`. */
+export const dragDrop = {
+    createDrag: (element, config) => createDragRef(element, config),
+    createDropList: (element) => createDropListRef(element),
+};

package/drag-drop/drag-events.d.ts

@@ -0,0 +1,117 @@
+import type { DragInstance } from "./directives/drag.js";
+import type { DropListInstance } from "./directives/drop-list.js";
+/** Event emitted when the user starts dragging a draggable. */
+export interface DragStart<T = any> {
+    /** Draggable that emitted the event. */
+    source: DragInstance<T>;
+    /** Native event that started the drag sequence. */
+    event: MouseEvent | TouchEvent;
+}
+/** Event emitted when the user releases an item, before any animations have started. */
+export interface DragRelease<T = any> {
+    /** Draggable that emitted the event. */
+    source: DragInstance<T>;
+    /** Native event that caused the release event. */
+    event: MouseEvent | TouchEvent;
+}
+/** Event emitted when the user stops dragging a draggable. */
+export interface DragEnd<T = any> {
+    /** Draggable that emitted the event. */
+    source: DragInstance<T>;
+    /** Distance in pixels that the user has dragged since the drag sequence started. */
+    distance: {
+        x: number;
+        y: number;
+    };
+    /** Position where the pointer was when the item was dropped */
+    dropPoint: {
+        x: number;
+        y: number;
+    };
+    /** Native event that caused the dragging to stop. */
+    event: MouseEvent | TouchEvent;
+}
+/** Event emitted when the user moves an item into a new drop container. */
+export interface DragEnter<T = any, I = T> {
+    /** Container into which the user has moved the item. */
+    container: DropListInstance<T>;
+    /** Item that was moved into the container. */
+    item: DragInstance<I>;
+    /** Index at which the item has entered the container. */
+    currentIndex: number;
+}
+/**
+ * Event emitted when the user removes an item from a
+ * drop container by moving it into another one.
+ */
+export interface DragExit<T = any, I = T> {
+    /** Container from which the user has a removed an item. */
+    container: DropListInstance<T>;
+    /** Item that was removed from the container. */
+    item: DragInstance<I>;
+}
+/** Event emitted when the user drops a draggable item inside a drop container. */
+export interface DragDrop<T, O = T, I = any> {
+    /** Index of the item when it was picked up. */
+    previousIndex: number;
+    /** Current index of the item. */
+    currentIndex: number;
+    /** Item that is being dropped. */
+    item: DragInstance<I>;
+    /** Container in which the item was dropped. */
+    container: DropListInstance<T>;
+    /** Container from which the item was picked up. Can be the same as the `container`. */
+    previousContainer: DropListInstance<O>;
+    /** Whether the user's pointer was over the container when the item was dropped. */
+    isPointerOverContainer: boolean;
+    /** Distance in pixels that the user has dragged since the drag sequence started. */
+    distance: {
+        x: number;
+        y: number;
+    };
+    /** Position where the pointer was when the item was dropped */
+    dropPoint: {
+        x: number;
+        y: number;
+    };
+    /** Native event that caused the drop event. */
+    event: MouseEvent | TouchEvent;
+}
+/** Event emitted as the user is dragging a draggable item. */
+export interface DragMove<T = any> {
+    /** Item that is being dragged. */
+    source: DragInstance<T>;
+    /** Position of the user's pointer on the page. */
+    pointerPosition: {
+        x: number;
+        y: number;
+    };
+    /** Native event that is causing the dragging. */
+    event: MouseEvent | TouchEvent;
+    /** Distance in pixels that the user has dragged since the drag sequence started. */
+    distance: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Indicates the direction in which the user is dragging the element along each axis.
+     * `1` means that the position is increasing (e.g. the user is moving to the right or downwards),
+     * whereas `-1` means that it's decreasing (they're moving to the left or upwards). `0` means
+     * that the position hasn't changed.
+     */
+    delta: {
+        x: -1 | 0 | 1;
+        y: -1 | 0 | 1;
+    };
+}
+/** Event emitted when the user swaps the position of two drag items. */
+export interface DragSortEvent<T = any, I = T> {
+    /** Index from which the item was sorted previously. */
+    previousIndex: number;
+    /** Index that the item is currently in. */
+    currentIndex: number;
+    /** Container that the item belongs to. */
+    container: DropListInstance<T>;
+    /** Item that is being sorted. */
+    item: DragInstance<I>;
+}

package/drag-drop/drag-events.js

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

package/drag-drop/drag-handle.d.ts

@@ -0,0 +1,18 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import type { StyleObject } from "@rivetjs/runtime/style";
+import { type GlobalDOMAttributes } from "@rivetjs/cdk/dom-props";
+import { type MaybeAccessor } from "./directives/registry.js";
+export interface DragHandleProps extends GlobalDOMAttributes<HTMLElement> {
+    /** Whether starting to drag through this handle is disabled (Angular `cdkDragHandleDisabled`). */
+    disabled?: MaybeAccessor<boolean | undefined>;
+    /** Element to render. @default "div" */
+    elementType?: "div" | "span" | "button";
+    id?: string;
+    /** @default "rv-DragHandle" (always with Angular's `cdk-drag-handle`) */
+    class?: string;
+    /** Inline style of the element (the native-interaction styles are added while enabled). */
+    style?: StyleObject;
+    children?: Content;
+}
+/** Handle that can be used to drag a `Drag` instance (Angular `cdkDragHandle`). */
+export declare function DragHandle(props: DragHandleProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/drag-drop/drag-handle.jsx

@@ -0,0 +1,53 @@
+// Ported from Angular Components (src/cdk/drag-drop/directives/drag-handle.ts — host bindings), MIT, © Google LLC.
+// Rivet: `cdkDragHandle` as a component rendering its element (`elementType`, default `div`) with
+// `class="cdk-drag-handle"` (+ `rv-DragHandle` when `class` is omitted), `data-rv-drag-handle` and, while
+// enabled, the native-interaction styles `DragRef.withHandles` applies (`touch-action: none`, …,
+// byte-identical to `toggleNativeDragInteractions(handle, false)`), so a cold touch on a server-rendered
+// handle never scrolls. `disabled` (`cdkDragHandleDisabled`) renders `data-disabled`; the owning
+// `DragInstance` reads handles from the DOM (directives/drag-handle.ts), so a handle ships no code.
+// Merged name (spec): the React Aria drag button (`dragButtonProps`) attaches to this same component
+// when a react-aria draggable is around (later phase): it will merge its attributes / press handlers
+// into `dom` below.
+import { effect, onCleanup } from "@rivetjs/reactivity";
+import { ref } from "@rivetjs/runtime/dom";
+import { globalDOMProps } from "@rivetjs/cdk/dom-props";
+import { read } from "./directives/registry.js";
+import { handleChanged, handleOwner } from "./lazy-refs.js";
+import { nativeDragInteractionStyles } from "./dom/styling.js";
+/** Handle that can be used to drag a `Drag` instance (Angular `cdkDragHandle`). */
+export function DragHandle(props) {
+    // Read every prop up front: an element with a spread resumes as one binding over all its
+    // attributes, and reading `props` there would capture the whole props object (children included).
+    const dom = globalDOMProps(props);
+    const { id, elementType, children } = props;
+    const userStyle = props.style;
+    const disabled = props.disabled;
+    const className = "cdk-drag-handle " + (props.class ?? "rv-DragHandle");
+    const isDisabled = () => !!read(disabled);
+    // `toggleNativeDragInteractions(handle, false)` (dom/styling.ts) as the inline style of an enabled handle.
+    const styles = nativeDragInteractionStyles(false);
+    const style = () => (isDisabled() ? userStyle : { ...userStyle, ...styles });
+    // Client render only: on the server the ref stays empty.
+    const element = ref();
+    const node = elementType === "span" ? (<span {...dom} ref={element} id={id} class={className} data-rv-drag-handle="" data-disabled={isDisabled() ? "true" : undefined} style={style()}>
+        {children}
+      </span>) : elementType === "button" ? (<button {...dom} ref={element} type="button" id={id} class={className} data-rv-drag-handle="" data-disabled={isDisabled() ? "true" : undefined} style={style()}>
+        {children}
+      </button>) : (<div {...dom} ref={element} id={id} class={className} data-rv-drag-handle="" data-disabled={isDisabled() ? "true" : undefined} style={style()}>
+        {children}
+      </div>);
+    // Client-rendered: a handle added / removed / toggled after its drag item was created re-syncs the
+    // item's handles (Angular `_addHandle` / `_removeHandle` / `_stateChanges`).
+    // (`getOwner()` is set on the server too: the element ref is what tells a client render apart.)
+    let owner = null;
+    effect(() => {
+        isDisabled();
+        queueMicrotask(() => {
+            const el = element();
+            if (el)
+                handleChanged((owner = handleOwner(el) ?? owner));
+        });
+    });
+    onCleanup(() => queueMicrotask(() => handleChanged(owner)));
+    return node;
+}

package/drag-drop/drag-placeholder.d.ts

@@ -0,0 +1,8 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+export interface DragPlaceholderProps<T = any> {
+    /** Context data to be added to the placeholder template instance. */
+    data?: T;
+    children?: Content;
+}
+/** Element that will be used as a template for the placeholder of a `Drag` when it is being dragged (Angular `cdkDragPlaceholder`). */
+export declare function DragPlaceholder<T = any>(props: DragPlaceholderProps<T>): import("@rivetjs/runtime/jsx-runtime").CompiledElement;