@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/lib/overlay-depth.mjs

@@ -0,0 +1,59 @@
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/overlay-depth.tsx
+const OverlayStackContext = createContext([]);
+/**
+* Tells everything under it that a modal surface is open, so a raft-ui
+* Dialog, AlertDialog or Drawer opened from inside draws the lighter nested
+* scrim (design/foundations/elevation.md#stacked-overlays). raft-ui's own
+* roots add one by themselves; an app's own modal (its own backdrop, Esc and
+* focus) wraps its scrim and its content in one to join the stack, and reads
+* `useParentOverlayKind` inside it to pick its own scrim. Modal overlays only:
+* a non-modal one passes `modal={false}`, adds nothing, and must not call
+* `useParentOverlayKind` (it would read the layer below as its own).
+*/
+function OverlayLayerProvider({ kind, modal, children }) {
+	const stack = useContext(OverlayStackContext);
+	const value = useMemo(() => modal ? [...stack, kind] : stack, [
+		stack,
+		kind,
+		modal
+	]);
+	return /* @__PURE__ */ jsx(OverlayStackContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* The modal surface this overlay's own surface was opened from, or null when
+* it is the first. Call it inside the surface's own `OverlayLayerProvider`
+* (for raft-ui's overlays, inside their root): the last entry is the surface
+* itself and the one before it is its parent. Not null means the surface is
+* stacked over another and draws `layer-backdrop-nested` instead of
+* `layer-backdrop`. Modal overlays only: under `modal={false}` nothing is
+* added, so the last entry is the parent and this returns the wrong layer. It reads React context, so it sees the surfaces whose
+* tree this one is rendered in, portals included; one opened from outside
+* that tree is not stacked on it here.
+*/
+function useParentOverlayKind() {
+	const stack = useContext(OverlayStackContext);
+	return stack.length >= 2 ? stack[stack.length - 2] : null;
+}
+/**
+* Wraps a dialog or drawer root's children in its layer. Base UI lets those
+* children be a render function (`({ payload }) => …`), so keep that shape.
+*/
+function withOverlayLayer(kind, modal, children) {
+	if (typeof children === "function") return (...args) => /* @__PURE__ */ jsx(OverlayLayerProvider, {
+		kind,
+		modal,
+		children: children(...args)
+	});
+	return /* @__PURE__ */ jsx(OverlayLayerProvider, {
+		kind,
+		modal,
+		children
+	});
+}
+//#endregion
+export { OverlayLayerProvider, useParentOverlayKind, withOverlayLayer };

package/dist/lib/phone-media.mjs

@@ -0,0 +1,24 @@
+import { useSyncExternalStore } from "react";
+//#region src/lib/phone-media.ts
+/**
+* A phone: a touch screen narrower than the desktop layout. The complement, on
+* both axes, of the desktop query `(width >= 48rem) and (pointer: fine)`
+* (design/foundations/spacing.md): a narrow window with a mouse keeps the
+* desktop behaviour, and so does a tablet used by touch, which is wide.
+*/
+const PHONE_MEDIA_QUERY = "(width < 48rem) and (pointer: coarse)";
+function subscribe(onStoreChange) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => void 0;
+	const media = window.matchMedia(PHONE_MEDIA_QUERY);
+	media.addEventListener("change", onStoreChange);
+	return () => media.removeEventListener("change", onStoreChange);
+}
+function getSnapshot() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(width < 48rem) and (pointer: coarse)").matches;
+}
+/** Whether `PHONE_MEDIA_QUERY` matches. `false` on the server and before hydration. */
+function usePhoneMedia() {
+	return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
+//#endregion
+export { PHONE_MEDIA_QUERY, usePhoneMedia };

package/dist/lib/presence.d.mts

@@ -0,0 +1,16 @@
+//#region src/lib/presence.d.ts
+/**
+ * The five status lights of the design system. Each colour is a fixed
+ * meaning: online green, busy (an agent at work) yellow, error orange,
+ * offline stone, an external agent cyan. One map, read by Status and by the
+ * avatar's dot through the same `--status-color`.
+ */
+export declare const PRESENCE_COLOR: {
+  readonly online: "[--status-color:var(--presence-online)]";
+  readonly busy: "[--status-color:var(--presence-busy)]";
+  readonly error: "[--status-color:var(--presence-error)]";
+  readonly offline: "[--status-color:var(--presence-offline)]";
+  readonly external: "[--status-color:var(--presence-external)]";
+};
+export type Presence = keyof typeof PRESENCE_COLOR;
+//#endregion

package/dist/lib/presence.mjs

@@ -0,0 +1,16 @@
+//#region src/lib/presence.ts
+/**
+* The five status lights of the design system. Each colour is a fixed
+* meaning: online green, busy (an agent at work) yellow, error orange,
+* offline stone, an external agent cyan. One map, read by Status and by the
+* avatar's dot through the same `--status-color`.
+*/
+const PRESENCE_COLOR = {
+	online: "[--status-color:var(--presence-online)]",
+	busy: "[--status-color:var(--presence-busy)]",
+	error: "[--status-color:var(--presence-error)]",
+	offline: "[--status-color:var(--presence-offline)]",
+	external: "[--status-color:var(--presence-external)]"
+};
+//#endregion
+export { PRESENCE_COLOR };

package/dist/lib/row-tone.d.mts

@@ -0,0 +1,8 @@
+//#region src/lib/row-tone.d.ts
+/**
+ * What a place in a list is to you, shared by every row that lists places
+ * (ListRow, SidebarItem): something waits for you (`unread`), you muted it
+ * (`muted`), or you are not in it: offline or not joined (`away`).
+ */
+export type RowTone = "default" | "unread" | "muted" | "away";
+//#endregion

package/dist/lib/search-hit.mjs

@@ -0,0 +1,18 @@
+//#region src/lib/search-hit.ts
+/**
+* The DS search hit: what you looked for sits on a `you` fill, yellow in every
+* theme, with ink type in the surrounding font and weight. No edge and no bold
+* (stdrc, 2026-10-24): a ring made a hit look like one more badge beside a
+* row's "DM" or "Channel" tag and cut the descenders, and it is the mention of
+* you that keeps the ring. 1px of fill above and below (`py-px`) keeps
+* the descenders inside it. Every place that marks a hit (message text,
+* Markdown, search results) uses this; `[font:inherit]` drops the browser's
+* mark styling.
+*/
+const searchHit = [
+	"[font:inherit]",
+	"rounded-sticker bg-you px-[2px] py-px box-decoration-clone",
+	"text-sticker-ink"
+];
+//#endregion
+export { searchHit };

package/dist/lib/stacked-actions.mjs

@@ -0,0 +1,112 @@
+import { useCallback, useLayoutEffect, useState } from "react";
+//#region src/lib/stacked-actions.ts
+/**
+* The row of buttons while `data-stacked` is set: a full-width column. A
+* button alone in a wrapper (a tooltip's trigger) fills the width too.
+*
+* Until the row has been measured and painted once (`data-measured`), its
+* buttons have no transition. The first measure lands after the buttons were
+* styled as a row, so a stacked ghost Cancel would otherwise fade its frame in
+* as the dialog opens; the first painted frame must already be the stack.
+*/
+const stackedActions = [
+	"data-stacked:flex-col-reverse",
+	"data-stacked:items-stretch",
+	"data-stacked:*:data-[slot=button]:w-full data-stacked:[&>*>[data-slot=button]:only-child]:w-full",
+	"not-data-measured:**:data-[slot=button]:transition-none"
+];
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+function contentWidth(element) {
+	const style = getComputedStyle(element);
+	return element.getBoundingClientRect().width - (Number.parseFloat(style.paddingLeft) || 0) - (Number.parseFloat(style.paddingRight) || 0) - (Number.parseFloat(style.borderLeftWidth) || 0) - (Number.parseFloat(style.borderRightWidth) || 0);
+}
+/**
+* Whether a row of buttons must stack: laid out as a row (`data-stacked` off
+* for the measure and put back at once, inside one frame, so nothing is
+* painted in between and the layouts never flip back and forth), its children
+* run past the content box of `frame`. Children that may shrink (a label that
+* truncates or wraps) shrink first, so only content that can't, the buttons,
+* counts as not fitting. Undefined while the frame is hidden (a sheet hides
+* its footer), so nothing is decided then.
+*/
+function rowOverflows(row, frame) {
+	if (!(frame.getBoundingClientRect().width > 0)) return void 0;
+	const wasStacked = row.hasAttribute("data-stacked");
+	if (wasStacked) row.removeAttribute("data-stacked");
+	const available = contentWidth(frame);
+	let start = Number.POSITIVE_INFINITY;
+	let end = Number.NEGATIVE_INFINITY;
+	for (const child of row.children) {
+		const box = child.getBoundingClientRect();
+		if (box.width === 0 && box.height === 0) continue;
+		const style = getComputedStyle(child);
+		start = Math.min(start, box.left - (Number.parseFloat(style.marginLeft) || 0));
+		end = Math.max(end, box.right + (Number.parseFloat(style.marginRight) || 0));
+	}
+	if (wasStacked) row.setAttribute("data-stacked", "");
+	return end - start > available + .5;
+}
+/**
+* Sets `data-stacked` on a footer's row of buttons when it doesn't fit on one
+* line (rowOverflows). Pass the returned ref to the row. It must fit its own
+* content box, or with `inParent` (the group of buttons beside a note) its
+* parent's. As BannerAction's `data-wrap`, it measures again when the footer
+* resizes, the buttons change or a web font arrives.
+*/
+function useStackedActions(ref, inParent = false) {
+	const [row, setRow] = useState(null);
+	const [stacked, setStacked] = useState(false);
+	const callbackRef = useCallback((node) => {
+		setRow(node);
+		assignRef(ref, node);
+	}, [ref]);
+	useLayoutEffect(() => {
+		const frame = inParent ? row?.parentElement : row;
+		if (!row || !frame || typeof ResizeObserver === "undefined") return;
+		let raf = 0;
+		let settle = 0;
+		const measure = () => {
+			const overflows = rowOverflows(row, frame);
+			if (overflows === void 0) return;
+			setStacked(overflows);
+			if (!settle && !row.hasAttribute("data-measured")) settle = requestAnimationFrame(() => {
+				settle = requestAnimationFrame(() => row.setAttribute("data-measured", ""));
+			});
+		};
+		const schedule = () => {
+			cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(measure);
+		};
+		measure();
+		const resize = new ResizeObserver(schedule);
+		resize.observe(frame);
+		resize.observe(row);
+		for (const child of row.children) resize.observe(child);
+		const mutation = new MutationObserver(schedule);
+		mutation.observe(row, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+		const fonts = typeof document.fonts === "undefined" ? void 0 : document.fonts;
+		let live = true;
+		fonts?.ready.then(() => {
+			if (live) schedule();
+		});
+		fonts?.addEventListener("loadingdone", schedule);
+		return () => {
+			live = false;
+			cancelAnimationFrame(raf);
+			cancelAnimationFrame(settle);
+			resize.disconnect();
+			mutation.disconnect();
+			fonts?.removeEventListener("loadingdone", schedule);
+		};
+	}, [row, inParent]);
+	return [stacked, callbackRef];
+}
+//#endregion
+export { stackedActions, useStackedActions };

package/dist/lib/styled-props.d.mts

@@ -0,0 +1,15 @@
+import { CSSProperties } from "react";
+//#region src/lib/styled-props.d.ts
+/**
+ * Base UI components type `className` as `string | ((state) => string)`, but our
+ * tv() recipes only accept a plain string. `StyledProps` narrows a Base UI
+ * component's props to a string `className` so they can flow into a recipe.
+ *
+ * The state-callback form is intentionally dropped: our components express every
+ * state through `data-*` variants in the recipe, so a caller never needs it.
+ */
+export type StyledProps<P> = Omit<P, "className" | "style"> & {
+  className?: string;
+  style?: CSSProperties;
+};
+//#endregion

package/dist/lib/tap-activation.mjs

@@ -0,0 +1,133 @@
+import { useCallback, useRef } from "react";
+/** How long after a tap a click on the same control is the browser's echo of it. */
+const ECHO_CLICK_MS = 800;
+const DISABLED = ":disabled, [aria-disabled=\"true\"], [data-disabled]";
+function findTouch(list, id) {
+	if (!list) return void 0;
+	for (let i = 0; i < list.length; i++) {
+		const touch = list[i];
+		if (touch && touch.identifier === id) return touch;
+	}
+}
+function isTextEntry(node) {
+	if (!node) return false;
+	if (node.isContentEditable || node.tagName === "TEXTAREA") return true;
+	return node.tagName === "INPUT" && !NON_TEXT_INPUTS.has(node.type);
+}
+const NON_TEXT_INPUTS = /* @__PURE__ */ new Set([
+	"button",
+	"checkbox",
+	"color",
+	"file",
+	"hidden",
+	"image",
+	"radio",
+	"range",
+	"reset",
+	"submit"
+]);
+function isStylus(touch) {
+	return touch.touchType === "stylus";
+}
+/**
+* Make `element` activate on a tap's `touchend`. Returns a function that
+* removes the listeners. Does nothing outside a browser.
+*/
+function attachTapActivation(element) {
+	const view = element.ownerDocument?.defaultView;
+	if (!view) return () => void 0;
+	const now = () => view.performance?.now() ?? Date.now();
+	let gesture = null;
+	let clicking = false;
+	let swallowClickUntil = -Infinity;
+	const onTouchStart = (event) => {
+		swallowClickUntil = -Infinity;
+		const touch = event.touches.length === 1 ? event.changedTouches[0] : void 0;
+		gesture = touch && !isStylus(touch) ? {
+			id: touch.identifier,
+			x: touch.clientX,
+			y: touch.clientY,
+			at: now(),
+			moved: false
+		} : null;
+	};
+	const onTouchMove = (event) => {
+		if (!gesture || gesture.moved) return;
+		const touch = findTouch(event.touches, gesture.id);
+		if (!touch) return;
+		if (Math.hypot(touch.clientX - gesture.x, touch.clientY - gesture.y) > 10) gesture.moved = true;
+	};
+	const onTouchCancel = () => {
+		gesture = null;
+	};
+	const onTouchEnd = (event) => {
+		const started = gesture;
+		gesture = null;
+		if (!started || started.moved || event.touches.length > 0) return;
+		const touch = findTouch(event.changedTouches, started.id);
+		if (!touch) return;
+		if (Math.hypot(touch.clientX - started.x, touch.clientY - started.y) > 10) return;
+		if (now() - started.at >= 500) return;
+		if (!event.cancelable) return;
+		if (element.matches(DISABLED)) return;
+		const box = element.getBoundingClientRect();
+		if (!(touch.clientX >= box.left && touch.clientX <= box.right && touch.clientY >= box.top && touch.clientY <= box.bottom)) return;
+		event.preventDefault();
+		swallowClickUntil = now() + ECHO_CLICK_MS;
+		const focusedBefore = element.ownerDocument.activeElement;
+		clicking = true;
+		try {
+			element.click();
+		} finally {
+			clicking = false;
+		}
+		const focusedAfter = element.ownerDocument.activeElement;
+		if (focusedAfter === focusedBefore && !isTextEntry(focusedAfter)) element.focus({
+			preventScroll: true,
+			focusVisible: false
+		});
+	};
+	const endEchoWindow = () => {
+		swallowClickUntil = -Infinity;
+	};
+	const onPointerDown = (event) => {
+		if (event.pointerType !== "touch") endEchoWindow();
+	};
+	const onClick = (event) => {
+		if (clicking || now() > swallowClickUntil) return;
+		swallowClickUntil = -Infinity;
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	};
+	const passive = { passive: true };
+	element.addEventListener("touchstart", onTouchStart, passive);
+	element.addEventListener("touchmove", onTouchMove, passive);
+	element.addEventListener("touchcancel", onTouchCancel, passive);
+	element.addEventListener("pointerdown", onPointerDown, passive);
+	element.addEventListener("keydown", endEchoWindow, passive);
+	element.addEventListener("touchend", onTouchEnd, { passive: false });
+	element.addEventListener("click", onClick, { capture: true });
+	return () => {
+		element.removeEventListener("touchstart", onTouchStart);
+		element.removeEventListener("touchmove", onTouchMove);
+		element.removeEventListener("touchcancel", onTouchCancel);
+		element.removeEventListener("pointerdown", onPointerDown);
+		element.removeEventListener("keydown", endEchoWindow);
+		element.removeEventListener("touchend", onTouchEnd);
+		element.removeEventListener("click", onClick, { capture: true });
+	};
+}
+/**
+* A ref callback that gives the element it is set to tap activation
+* (`attachTapActivation`), and removes it when the element goes or
+* `enabled` turns false. Merge it with the control's other refs.
+*/
+function useTapActivation(enabled = true) {
+	const detachRef = useRef(null);
+	return useCallback((node) => {
+		detachRef.current?.();
+		detachRef.current = enabled && node ? attachTapActivation(node) : null;
+	}, [enabled]);
+}
+//#endregion
+export { attachTapActivation, useTapActivation };

package/dist/lib/theme/theme-context.d.mts

@@ -0,0 +1,10 @@
+//#region src/lib/theme/theme-context.d.ts
+/** Colour mode. Raft is the only visual family; "system" follows the OS. */
+export type ThemeMode = "light" | "dark" | "system";
+export type ResolvedThemeMode = Exclude<ThemeMode, "system">;
+export type ThemeState = {
+  mode: ThemeMode;
+  resolvedMode: ResolvedThemeMode;
+  setMode: (mode: ThemeMode) => void;
+};
+//#endregion

package/dist/lib/theme/theme-context.mjs

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+//#region src/lib/theme/theme-context.ts
+const ThemeStateContext = createContext({
+	mode: "light",
+	resolvedMode: "light",
+	setMode: () => void 0
+});
+//#endregion
+export { ThemeStateContext };

package/dist/lib/theme/theme-provider.d.mts

@@ -0,0 +1,23 @@
+import { ThemeMode } from "./theme-context.mjs";
+import { ReactNode } from "react";
+//#region src/lib/theme/theme-provider.d.ts
+export interface ThemeProviderProps {
+  /** Controlled colour mode. */
+  mode?: ThemeMode;
+  defaultMode?: ThemeMode;
+  onModeChange?: (mode: ThemeMode) => void;
+  /** Persist an uncontrolled mode under this localStorage key. */
+  storageKey?: string;
+  /**
+   * Put the resolved mode on `document.documentElement` (`.light` / `.dark`
+   * and `color-scheme`), and track the input modality there
+   * (`data-input-modality`, see `installInputModality`), which keeps focus
+   * rings to keyboard navigation. Defaults to true for the app-level provider;
+   * set it to false for nested previews and islands that must not touch the
+   * page root.
+   */
+  syncDom?: boolean;
+  children: ReactNode;
+}
+export declare function ThemeProvider({ mode, defaultMode, onModeChange, storageKey, syncDom, children }: ThemeProviderProps): import("react").JSX.Element;
+//#endregion

package/dist/lib/theme/theme-provider.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { ThemeStateContext } from "./theme-context.mjs";
+import { installInputModality } from "../input-modality.mjs";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/theme/theme-provider.tsx
+function readStoredMode(storageKey, fallback) {
+	if (typeof window === "undefined" || !storageKey) return fallback;
+	const stored = window.localStorage.getItem(storageKey);
+	return stored === "light" || stored === "dark" || stored === "system" ? stored : fallback;
+}
+function subscribeSystemMode(onStoreChange) {
+	if (typeof window === "undefined") return () => void 0;
+	const media = window.matchMedia("(prefers-color-scheme: dark)");
+	media.addEventListener("change", onStoreChange);
+	return () => media.removeEventListener("change", onStoreChange);
+}
+function getSystemMode() {
+	if (typeof window === "undefined") return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function ThemeProvider({ mode, defaultMode = "light", onModeChange, storageKey, syncDom = true, children }) {
+	const [uncontrolledMode, setUncontrolledMode] = useState(() => readStoredMode(storageKey, defaultMode));
+	const activeMode = mode ?? uncontrolledMode;
+	const systemMode = useSyncExternalStore(subscribeSystemMode, getSystemMode, () => "light");
+	const resolvedMode = activeMode === "system" ? systemMode : activeMode;
+	const setMode = useCallback((nextMode) => {
+		if (mode === void 0) {
+			setUncontrolledMode(nextMode);
+			if (typeof window !== "undefined" && storageKey) window.localStorage.setItem(storageKey, nextMode);
+		}
+		onModeChange?.(nextMode);
+	}, [
+		mode,
+		onModeChange,
+		storageKey
+	]);
+	const themeState = useMemo(() => ({
+		mode: activeMode,
+		resolvedMode,
+		setMode
+	}), [
+		activeMode,
+		resolvedMode,
+		setMode
+	]);
+	useEffect(() => syncDom ? installInputModality() : void 0, [syncDom]);
+	useEffect(() => {
+		if (!syncDom) return;
+		const root = document.documentElement;
+		root.classList.toggle("light", resolvedMode === "light");
+		root.classList.toggle("dark", resolvedMode === "dark");
+		root.style.colorScheme = resolvedMode;
+	}, [resolvedMode, syncDom]);
+	return /* @__PURE__ */ jsx(ThemeStateContext.Provider, {
+		value: themeState,
+		children
+	});
+}
+//#endregion
+export { ThemeProvider };

package/dist/lib/theme/theme-scope.mjs

@@ -0,0 +1,19 @@
+import { cn } from "../../cn.mjs";
+import { useTheme } from "./use-theme.mjs";
+//#region src/lib/theme/theme-scope.ts
+/**
+* Carry the provider's resolved mode (`light` / `dark`) onto content that
+* renders outside its subtree (a portal), so a dark island's popup stays dark.
+*/
+function resolveThemeScopeProps({ className, ...props }, { resolvedMode }) {
+	const resolvedClassName = typeof className === "function" ? (state) => cn(className(state), resolvedMode) : typeof className === "string" ? cn(className, resolvedMode) : className ?? resolvedMode;
+	return {
+		...props,
+		className: resolvedClassName
+	};
+}
+function useThemeScopeProps(props) {
+	return resolveThemeScopeProps(props, useTheme());
+}
+//#endregion
+export { resolveThemeScopeProps, useThemeScopeProps };

package/dist/lib/theme/use-theme.d.mts

@@ -0,0 +1,5 @@
+import { ThemeState } from "./theme-context.mjs";
+//#region src/lib/theme/use-theme.d.ts
+/** Read and update the colour mode. */
+export declare function useTheme(): ThemeState;
+//#endregion

package/dist/lib/theme/use-theme.mjs

@@ -0,0 +1,9 @@
+import { ThemeStateContext } from "./theme-context.mjs";
+import { use } from "react";
+//#region src/lib/theme/use-theme.ts
+/** Read and update the colour mode. */
+function useTheme() {
+	return use(ThemeStateContext);
+}
+//#endregion
+export { useTheme };

package/dist/lib/touch-drag.d.mts

@@ -0,0 +1,55 @@
+import { PointerSensor, TouchSensor, TouchSensorOptions } from "@dnd-kit/core";
+//#region src/lib/touch-drag.d.ts
+/**
+ * How a finger picks up something that can be dragged
+ * (design/foundations/states.md#dragging-on-a-touch-screen):
+ *
+ * - hold still for `TOUCH_DRAG_HOLD_MS`: the item is armed, the same moment a
+ *   long press opens a menu (raft-ui's ContextMenuTrigger, iOS: 500ms);
+ * - then move by `TOUCH_DRAG_DISTANCE_PX`: the drag starts, and whoever owns a
+ *   menu that opened closes it in `onDragStart`;
+ * - move by more than `TOUCH_DRAG_TOLERANCE_PX` before the hold is up, or put a
+ *   second finger down: it was a scroll or a pinch, and the item lets go.
+ *
+ * dnd-kit's delay constraint starts the drag the moment the hold is up, at the
+ * same time as the long press opens the menu, so the two fight. Starting on the
+ * first move after the hold lets holding still mean "menu" and holding then
+ * moving mean "drag", as on iOS.
+ *
+ * Pair it with `MouseOnlyPointerSensor`, not dnd-kit's PointerSensor: a phone
+ * sends `pointerdown` (pointerType "touch") before `touchstart`, and the sensor
+ * that takes the press first keeps it, so a PointerSensor would pick up every
+ * touch on its distance and this sensor would never run.
+ */
+export declare const TOUCH_DRAG_HOLD_MS = 500;
+export declare const TOUCH_DRAG_DISTANCE_PX = 10;
+export declare const TOUCH_DRAG_TOLERANCE_PX = 10;
+export type HoldThenMoveOptions = {
+  /** How long the finger stays still before a move can start the drag. */
+  holdMs?: number;
+  /** How far the finger moves after the hold to start the drag. */
+  distance?: number;
+  /** How far the finger may drift during the hold before it counts as a scroll. */
+  tolerance?: number;
+};
+/** A TouchSensor that starts a drag on the first move after a still hold (see above). */
+export declare const HoldThenMoveTouchSensor: typeof TouchSensor;
+/**
+ * dnd-kit's PointerSensor for a mouse and a pen only: a finger's pointerdown is
+ * left to `HoldThenMoveTouchSensor`. While it holds a drag, Escape puts the
+ * item back and reaches nothing else.
+ */
+export declare const MouseOnlyPointerSensor: typeof PointerSensor;
+/**
+ * `useSensor(HoldThenMoveTouchSensor, …)` with the activation the sensor relies
+ * on: no constraint dnd-kit would act on by itself, so only a move after the
+ * hold starts the drag.
+ */
+export declare function useHoldThenMoveTouchSensor({ holdMs, distance, tolerance }?: HoldThenMoveOptions): import("@dnd-kit/core").SensorDescriptor<TouchSensorOptions>;
+/** The mouse / pen sensor that goes with it: picks up after `distance` px. */
+export declare function useMouseOnlyPointerSensor(distance: number): import("@dnd-kit/core").SensorDescriptor<{
+  activationConstraint: {
+    distance: number;
+  };
+}>;
+//#endregion