@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/lib/chip-remove.mjs

@@ -0,0 +1,17 @@
+//#region src/lib/chip-remove.ts
+/**
+* The × that removes a chip: a tag in a Combobox field (`ComboboxChipRemove`)
+* and an applied filter (`FilterChipRemove`). A `foreground-hint` glyph on a
+* `rounded-sticker` square that takes the medium fill on hover and press, and
+* an inset ink ring when the keyboard reaches it (the chip around it is too
+* tight for an outer ring). Each chip gives it its own size.
+*/
+const chipRemoveBase = [
+	"inline-flex shrink-0 items-center justify-center outline-none transition-colors",
+	"rounded-sticker text-foreground-hint",
+	"hover:bg-fill-medium active:bg-fill-medium",
+	"focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground",
+	"[&>svg]:size-3.5"
+];
+//#endregion
+export { chipRemoveBase };

package/dist/lib/data-attributes.d.mts

@@ -0,0 +1,5 @@
+import { ElementType } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/lib/data-attributes.d.ts
+export type DataAttributes = Record<`data-${string}`, string | undefined>;
+//#endregion

package/dist/lib/decision-width.mjs

@@ -0,0 +1,9 @@
+//#region src/lib/decision-width.ts
+/**
+* The width of every decision dialog (dialog.md#variants): AlertDialog and a
+* `size="sm"` Dialog are both 400px, so every confirmation in a product is one
+* width whichever of the two it is built on.
+*/
+const decisionWidth = "max-w-100";
+//#endregion
+export { decisionWidth };

package/dist/lib/default-native-button.mjs

@@ -0,0 +1,8 @@
+//#region src/lib/default-native-button.ts
+function defaultNativeButton(render) {
+	if (!render || typeof render !== "object" || !("type" in render)) return;
+	const element = render;
+	if (typeof element.type === "string") return element.type === "button";
+}
+//#endregion
+export { defaultNativeButton };

package/dist/lib/desktop-media.mjs

@@ -0,0 +1,10 @@
+//#region src/lib/desktop-media.ts
+/**
+* Where the desktop layout and its metrics begin: from 768px, with a mouse or
+* a trackpad (design/foundations/spacing.md#hit-targets). The same query as
+* the desktop blocks in styles.css and foundation.css, for code that has to
+* decide in JavaScript what CSS decides with `md:pointer-fine:`.
+*/
+const DESKTOP_MEDIA_QUERY = "(width >= 48rem) and (pointer: fine)";
+//#endregion
+export { DESKTOP_MEDIA_QUERY };

package/dist/lib/drag-escape.mjs

@@ -0,0 +1,37 @@
+//#region src/lib/drag-escape.ts
+/** The drags in progress in each window, each with its own cancel. */
+const holds = /* @__PURE__ */ new WeakMap();
+function onKeydown(event) {
+	if (event.key !== "Escape" && event.code !== "Escape") return;
+	const drags = holds.get(this);
+	if (!drags || drags.size === 0) return;
+	event.preventDefault();
+	event.stopImmediatePropagation();
+	for (const cancel of drags.values()) cancel(event);
+}
+function guard(win) {
+	let drags = holds.get(win);
+	if (!drags) {
+		drags = /* @__PURE__ */ new Map();
+		holds.set(win, drags);
+		win.addEventListener("keydown", onKeydown, { capture: true });
+	}
+	return drags;
+}
+if (typeof window !== "undefined") guard(window);
+/** A sensor's drag has started: Escape now cancels it, and only it. */
+function holdEscape(win, sensor, cancel) {
+	if (!win) return;
+	guard(win).set(sensor, cancel);
+}
+/** The sensor's drag is over: Escape behaves as it does everywhere else again. */
+function releaseEscape(win, sensor) {
+	if (!win) return;
+	holds.get(win)?.delete(sensor);
+}
+/** The window an event happened in. */
+function eventWindow(event) {
+	return (event?.target)?.ownerDocument?.defaultView ?? (typeof window === "undefined" ? null : window);
+}
+//#endregion
+export { eventWindow, holdEscape, releaseEscape };

package/dist/lib/frame-insets.mjs

@@ -0,0 +1,127 @@
+import { useMemo, useState } from "react";
+//#region src/lib/frame-insets.ts
+const NO_FRAME_INSETS = Object.freeze({
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+});
+const PX_LENGTH = /^-?(\d+\.?\d*|\.\d+)px$/;
+/**
+* Turns the variables' values into physical px insets. An unset value is 0, a
+* px value is read as written, and any other CSS length (a calc() is kept as
+* written in the computed value of an unregistered custom property) is
+* measured. In left to right -start is the left side and -end the right; in
+* right to left they swap.
+*/
+function frameInsetsFrom(values, rtl, measure) {
+	const read = (raw, axis) => {
+		const value = raw.trim();
+		if (value === "") return 0;
+		const px = PX_LENGTH.test(value) ? Number.parseFloat(value) : measure(value, axis);
+		return Number.isFinite(px) ? Math.max(0, px) : 0;
+	};
+	const top = read(values.top, "block");
+	const start = read(values.start, "inline");
+	const end = read(values.end, "inline");
+	if (top === 0 && start === 0 && end === 0) return NO_FRAME_INSETS;
+	return {
+		top,
+		right: rtl ? start : end,
+		bottom: 0,
+		left: rtl ? end : start
+	};
+}
+function contextElement(container) {
+	const node = container && "current" in container ? container.current : container;
+	if (node instanceof Element) return node;
+	if (node && "host" in node) return node.host;
+	return document.body ?? document.documentElement;
+}
+function measureWithProbe(root) {
+	let probe = null;
+	const measure = (value, axis) => {
+		if (!probe) {
+			probe = document.createElement("div");
+			probe.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;visibility:hidden;pointer-events:none";
+			root.append(probe);
+		}
+		probe.style.width = "0";
+		probe.style.height = "0";
+		probe.style.setProperty(axis === "block" ? "height" : "width", value);
+		const box = probe.getBoundingClientRect();
+		return axis === "block" ? box.height : box.width;
+	};
+	return Object.assign(measure, { done: () => probe?.remove() });
+}
+/**
+* Reads the frame insets once, as physical px. The direction is the one the
+* popup renders in: the computed `direction` of its portal container (the
+* body by default), so `dir="rtl"` on the document or on the nearest ancestor
+* of the container counts.
+*/
+function readFrameInsets(container) {
+	if (typeof document === "undefined") return NO_FRAME_INSETS;
+	const root = document.documentElement;
+	const style = getComputedStyle(root);
+	const values = {
+		top: style.getPropertyValue("--raft-frame-inset-top"),
+		start: style.getPropertyValue("--raft-frame-inset-start"),
+		end: style.getPropertyValue("--raft-frame-inset-end")
+	};
+	if (values.top.trim() === "" && values.start.trim() === "" && values.end.trim() === "") return NO_FRAME_INSETS;
+	const rtl = getComputedStyle(contextElement(container)).direction === "rtl";
+	const measure = measureWithProbe(root);
+	try {
+		return frameInsetsFrom(values, rtl, measure);
+	} finally {
+		measure.done();
+	}
+}
+/**
+* The collision padding with the insets added: on each side with an inset,
+* at least the inset plus `gap`; elsewhere `padding` as it is. With no inset
+* the padding comes back unchanged, so nothing moves on the web.
+*/
+function frameCollisionPadding(padding, insets, gap) {
+	if (insets.top === 0 && insets.right === 0 && insets.bottom === 0 && insets.left === 0) return padding;
+	const base = typeof padding === "number" ? {
+		top: padding,
+		right: padding,
+		bottom: padding,
+		left: padding
+	} : padding;
+	const side = (key) => {
+		const own = base[key] ?? 0;
+		return insets[key] > 0 ? Math.max(own, insets[key] + gap) : own;
+	};
+	return {
+		top: side("top"),
+		right: side("right"),
+		bottom: side("bottom"),
+		left: side("left")
+	};
+}
+/**
+* The frame insets, read when the calling component mounts. Call it from a
+* part inside the popup's portal, which mounts each time the popup opens.
+*/
+function useFrameInsets(container) {
+	const [insets] = useState(() => readFrameInsets(container));
+	return insets;
+}
+/**
+* A popup's collision padding (a popover, a menu, a select or combobox list,
+* a preview card): `defaultPadding` where there is no inset, and 8px inside
+* each inset. A `collisionPadding` the caller passes wins as it is.
+*/
+function usePopupCollisionPadding(collisionPadding, defaultPadding, container) {
+	const insets = useFrameInsets(container);
+	return useMemo(() => collisionPadding ?? frameCollisionPadding(defaultPadding, insets, 8), [
+		collisionPadding,
+		defaultPadding,
+		insets
+	]);
+}
+//#endregion
+export { NO_FRAME_INSETS, frameCollisionPadding, frameInsetsFrom, readFrameInsets, useFrameInsets, usePopupCollisionPadding };

package/dist/lib/head-edges.mjs

@@ -0,0 +1,44 @@
+//#region src/lib/head-edges.ts
+/**
+* The ends of a header (design/foundations/alignment.md#the-ends-of-a-header).
+*
+* A head pads both sides by its column's content margin, so a shape (a
+* sticker, a filled button) and text land on the margin as they are. A
+* frameless icon button declares how far its icon box sits inside its edge,
+* `--icon-inset` = (button - icon) / 2, and the head pulls its first and last
+* child outward by that much: the icon box lands on the margin and the
+* button's empty hit area hangs past it, toward the edge. The two ends mirror,
+* and the line holds at every button size (32px with an 18px icon on a
+* desktop, 44px with a 22px icon on a phone and a touch screen) without a
+* number per size or per breakpoint. A title, a sticker or a filled button
+* declares no inset and stays on the margin.
+*
+* An element that declares an inset also carries `data-icon-inset`, which
+* anchors the head's `:first-child` / `:last-child` (packages/ui/CLAUDE.md,
+* Selector Cost). A group of actions declares its buttons' inset itself, so
+* the pull holds when its last action is hidden at some width.
+*/
+/** The pull alone, for a head whose padding is already its margin (a dialog's 20px). */
+const headEdgePull = ["[&>[data-icon-inset]:first-child]:-ml-icon-inset", "[&>[data-icon-inset]:last-child]:-mr-icon-inset"];
+/**
+* A panel's head: its column's margin, and the pull. The margin is
+* `--column-margin` (styles.css): 20px on a desktop and 16px on a phone,
+* and 20px at every width in a column of list cells, whose rows put their
+* content 8 + 12 = 20px in (lib/list-cell.ts). The column sets it (an
+* ActivityInboxPanel, a SidebarRoot, a Search frame), so its head, its
+* toolbar and its rows start on one line on a phone as on a desktop.
+*/
+const headEdges = ["px-(--column-margin)", ...headEdgePull];
+/**
+* Sets a column of list cells' margin to 20px at every width: the rows'
+* content edge (lib/list-cell.ts), which the heads and notices in it follow.
+*/
+const listColumnMargin = "[--column-margin:20px]";
+/**
+* The inset of a control-height icon button (a PanelAction, a Button at
+* `icon-lg`): 7px on a desktop, 11px on a phone and on a touch screen. Written
+* as the arithmetic so it follows the control tokens wherever they switch.
+*/
+const controlIconInset = "[--icon-inset:calc((var(--control-height)-var(--control-icon-size))/2)]";
+//#endregion
+export { controlIconInset, headEdgePull, headEdges, listColumnMargin };

package/dist/lib/hud-text-action.mjs

@@ -0,0 +1,10 @@
+//#region src/lib/hud-text-action.ts
+const hudTextAction = [
+	"font-sans text-callout font-bold text-foreground-on-hud",
+	"decoration-[1.5px] underline-offset-[3px] not-disabled:not-aria-disabled:hover:underline",
+	"after:absolute after:-inset-x-2 after:-inset-y-3 after:rounded-control after:content-['']",
+	"active:after:bg-foreground-on-hud/15",
+	"outline-1 outline-offset-2 outline-transparent focus-visible:keyboard:outline-2 focus-visible:keyboard:outline-foreground-on-hud"
+];
+//#endregion
+export { hudTextAction };

package/dist/lib/inline-chip.mjs

@@ -0,0 +1,30 @@
+//#region src/lib/inline-chip.ts
+/**
+* The one box every chip in message text shares: a reference chip (any
+* variant, loading or unavailable too), the yellow sticker of a mention of the
+* person reading, and an inline task chip. The rule and its numbers are in
+* message-item.md, Chips in running text.
+*
+* - Type: 0.875em of the sentence, semibold.
+* - Height: the line box of its text, the body line less 2px, with no padding
+*   above or below: 20px on a desktop (body 14/22), 22px on a phone (16/24). A
+*   chip is always 2px shorter than its line, so it never makes the line taller.
+*   `--chip-line-height` overrides it for text that isn't on the body line.
+* - Alignment: the chip's text on the sentence's baseline, a leading mark
+*   centred on the chip (alignment.md, Marks in running text).
+* - Sides: 6px at each end. A chip with a leading mark (a 14px icon, an app's
+*   image or avatar in `MessageReferenceIcon`'s 14px box, the loading spinner,
+*   a task's 10px status pixel, each in its own box) takes
+*   4.5px at each end, so the ink at its two ends sits equally far in
+*   (alignment.md, Chips), and the mark is 4px from the text. A note after the
+*   label keeps the same 4px.
+* - Corners: `rounded-sticker`.
+*/
+const inlineChip = [
+	"items-baseline gap-1 px-1.5 py-0 align-baseline",
+	"has-[>svg,>[data-slot=spinner],>[data-slot=message-reference-icon]]:px-[4.5px]",
+	"[font-size:0.875em] leading-[var(--chip-line-height,calc(var(--text-body--line-height)-2px))] font-semibold",
+	"rounded-sticker"
+];
+//#endregion
+export { inlineChip };

package/dist/lib/input-modality.d.mts

@@ -0,0 +1,36 @@
+//#region src/lib/input-modality.d.ts
+/**
+ * Input modality: whether the person last moved through the page with a
+ * pointer, with the keyboard, or by a virtual cursor (a screen reader). raft-ui shows a focus indicator only after
+ * keyboard navigation (design/foundations/states.md#focus): styles.css clears
+ * `--focus-ring` and the `keyboard:` variant stops matching while the root
+ * carries `data-input-modality="pointer"`. With no attribute (no script, or
+ * the tracker not installed) every focus indicator shows, as it did before.
+ */
+export type InputModality = "pointer" | "keyboard" | "virtual";
+/**
+ * Track the input modality on `doc.documentElement` as
+ * `data-input-modality="pointer" | "keyboard" | "virtual"`. Only `pointer`
+ * hides focus rings, so every uncertain case keeps them visible:
+ *
+ * - **Unknown at first.** No attribute until there is evidence, so a keyboard
+ *   user who hasn't pressed Tab yet still sees focus moved by code. The first
+ *   real mouse movement or press makes it `pointer`.
+ * - **Keyboard**: Tab and F6 anywhere; the arrows, Home, End, Page Up, Page
+ *   Down, Enter, Space and Esc outside a text field. Inside a text field those
+ *   keys edit and leave the modality alone, unless focus leaves the field
+ *   right after (Esc closing a dialog, Enter submitting): then it is
+ *   `keyboard`. Typing and Cmd or Ctrl shortcuts never count; a shortcut that
+ *   moves focus to a control is caught by the next rule.
+ * - **Virtual**: focus that arrives with no key or pointer press just before
+ *   it (a screen reader's browse cursor, a timer), and a screen reader's
+ *   synthesized pointer press. Rings show.
+ * - **Pointer**: a real pointer press, or real pointer movement while the
+ *   modality is still unknown or virtual.
+ *
+ * `ThemeProvider` calls this for you. Installing twice adds no second set of
+ * listeners. Returns a function that undoes this installation; the listeners
+ * and the attribute go once every installation is undone.
+ */
+export declare function installInputModality(doc?: Document): () => void;
+//#endregion

package/dist/lib/input-modality.mjs

@@ -0,0 +1,186 @@
+//#region src/lib/input-modality.ts
+const INPUT_MODALITY_ATTRIBUTE = "data-input-modality";
+/** Keys that move focus wherever focus is. */
+const NAVIGATION_KEYS = /* @__PURE__ */ new Set(["Tab", "F6"]);
+/** Keys that navigate a widget, but move the caret in a text field. */
+const CARET_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End",
+	"PageUp",
+	"PageDown"
+]);
+/**
+* Keys that activate or dismiss a control, but belong to editing in a text
+* field. Esc in the composer closes a suggestion list or cancels an edit; it
+* must not turn the composer's ring on for someone using a mouse.
+*/
+const ACTIVATION_KEYS = /* @__PURE__ */ new Set([
+	"Enter",
+	" ",
+	"Spacebar",
+	"Escape"
+]);
+/** Input types that take typed text (and whose arrow keys move a caret or step a value). */
+const TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"text",
+	"search",
+	"url",
+	"tel",
+	"email",
+	"password",
+	"number",
+	"date",
+	"datetime-local",
+	"month",
+	"time",
+	"week"
+]);
+/** `isContentEditable`, for DOMs that don't implement it. */
+const EDITABLE = "[contenteditable=\"\"], [contenteditable=\"true\"], [contenteditable=\"plaintext-only\"]";
+function isTextEntry(target) {
+	if (!target || typeof target !== "object" || !("nodeType" in target)) return false;
+	const element = target;
+	if (element.tagName === "TEXTAREA") return true;
+	if (element.tagName === "INPUT") return TEXT_INPUT_TYPES.has(element.type);
+	return element.isContentEditable === true || element.closest?.(EDITABLE) != null;
+}
+function keyboardNavigates(event) {
+	if (event.metaKey || event.ctrlKey) return false;
+	if (NAVIGATION_KEYS.has(event.key)) return true;
+	if (!CARET_KEYS.has(event.key) && !ACTIVATION_KEYS.has(event.key)) return false;
+	return !isTextEntry(eventTarget(event));
+}
+/** A key that edits in a text field, but may also send focus out of it (Esc closing a dialog, Enter submitting). */
+function editingKeyInField(event) {
+	if (event.metaKey || event.ctrlKey) return null;
+	if (!CARET_KEYS.has(event.key) && !ACTIVATION_KEYS.has(event.key)) return null;
+	const target = eventTarget(event);
+	return isTextEntry(target) ? target : null;
+}
+/** The focused element may sit in a shadow root; the path's first entry is it. */
+function eventTarget(event) {
+	return event.composedPath?.()[0] ?? event.target;
+}
+/**
+* A pointer event a screen reader synthesizes (VoiceOver, TalkBack, NVDA
+* activating an element): it has no real contact area. Same test as React
+* Aria's `isVirtualPointerEvent`.
+*/
+function isVirtualPointerEvent(event) {
+	return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === "mouse";
+}
+/** How long after a key or a pointer press a focus move still counts as caused by it. */
+const CAUSE_WINDOW_MS = 1e3;
+const installations = /* @__PURE__ */ new WeakMap();
+/**
+* Track the input modality on `doc.documentElement` as
+* `data-input-modality="pointer" | "keyboard" | "virtual"`. Only `pointer`
+* hides focus rings, so every uncertain case keeps them visible:
+*
+* - **Unknown at first.** No attribute until there is evidence, so a keyboard
+*   user who hasn't pressed Tab yet still sees focus moved by code. The first
+*   real mouse movement or press makes it `pointer`.
+* - **Keyboard**: Tab and F6 anywhere; the arrows, Home, End, Page Up, Page
+*   Down, Enter, Space and Esc outside a text field. Inside a text field those
+*   keys edit and leave the modality alone, unless focus leaves the field
+*   right after (Esc closing a dialog, Enter submitting): then it is
+*   `keyboard`. Typing and Cmd or Ctrl shortcuts never count; a shortcut that
+*   moves focus to a control is caught by the next rule.
+* - **Virtual**: focus that arrives with no key or pointer press just before
+*   it (a screen reader's browse cursor, a timer), and a screen reader's
+*   synthesized pointer press. Rings show.
+* - **Pointer**: a real pointer press, or real pointer movement while the
+*   modality is still unknown or virtual.
+*
+* `ThemeProvider` calls this for you. Installing twice adds no second set of
+* listeners. Returns a function that undoes this installation; the listeners
+* and the attribute go once every installation is undone.
+*/
+function installInputModality(doc) {
+	const target = doc ?? (typeof document === "undefined" ? void 0 : document);
+	if (!target) return () => void 0;
+	let installation = installations.get(target);
+	if (!installation) {
+		const root = target.documentElement;
+		const current = () => root.getAttribute(INPUT_MODALITY_ATTRIBUTE);
+		const set = (modality) => {
+			if (current() !== modality) root.setAttribute(INPUT_MODALITY_ATTRIBUTE, modality);
+		};
+		const now = () => target.defaultView?.performance?.now() ?? Date.now();
+		let lastInputAt = -Infinity;
+		let editingIn = null;
+		let editingAt = -Infinity;
+		const onPointerDown = (event) => {
+			lastInputAt = now();
+			editingIn = null;
+			set(isVirtualPointerEvent(event) ? "virtual" : "pointer");
+		};
+		const onPointerMove = (event) => {
+			if (current() === "keyboard" || current() === "pointer") return;
+			if (event.pointerType === "mouse" && !isVirtualPointerEvent(event)) set("pointer");
+		};
+		const onKeyDown = (event) => {
+			if (event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta") return;
+			lastInputAt = now();
+			if (keyboardNavigates(event)) {
+				editingIn = null;
+				set("keyboard");
+				return;
+			}
+			const field = editingKeyInField(event);
+			if (field) {
+				editingIn = field;
+				editingAt = now();
+			}
+		};
+		const onFocusIn = (event) => {
+			const focused = eventTarget(event);
+			if (editingIn && now() - editingAt < CAUSE_WINDOW_MS) {
+				if (!focused || focused !== editingIn && !editingIn.contains(focused)) {
+					editingIn = null;
+					set("keyboard");
+					return;
+				}
+				return;
+			}
+			if (now() - lastInputAt > CAUSE_WINDOW_MS) set("virtual");
+		};
+		const options = {
+			capture: true,
+			passive: true
+		};
+		target.addEventListener("pointerdown", onPointerDown, options);
+		target.addEventListener("pointermove", onPointerMove, options);
+		target.addEventListener("keydown", onKeyDown, options);
+		target.addEventListener("focusin", onFocusIn, options);
+		installation = {
+			count: 0,
+			remove: () => {
+				target.removeEventListener("pointerdown", onPointerDown, options);
+				target.removeEventListener("pointermove", onPointerMove, options);
+				target.removeEventListener("keydown", onKeyDown, options);
+				target.removeEventListener("focusin", onFocusIn, options);
+				root.removeAttribute(INPUT_MODALITY_ATTRIBUTE);
+			}
+		};
+		installations.set(target, installation);
+	}
+	installation.count += 1;
+	let undone = false;
+	const current = installation;
+	return () => {
+		if (undone) return;
+		undone = true;
+		current.count -= 1;
+		if (current.count === 0) {
+			current.remove();
+			installations.delete(target);
+		}
+	};
+}
+//#endregion
+export { installInputModality };

package/dist/lib/list-cell.mjs

@@ -0,0 +1,21 @@
+//#region src/lib/list-cell.ts
+const listCell = [
+	"list-cell relative isolate bg-transparent shadow-none outline-none",
+	"[--cell-inset-x:8px] [--cell-pad-x:12px] [--cell-radius:var(--radius-control)]",
+	"[--cell-inset-end:max(0px,calc(var(--cell-inset-x)-var(--scrollbar-size,0px)))]",
+	"pr-[calc(var(--cell-inset-end)+var(--cell-pad-x))] pl-[calc(var(--cell-inset-x)+var(--cell-pad-x))]",
+	"before:pointer-events-none before:absolute before:-z-1 before:block before:content-['']",
+	"before:inset-y-0 before:right-(--cell-inset-end) before:left-(--cell-inset-x)",
+	"before:rounded-(--cell-radius) before:border-0",
+	"before:transition-colors before:duration-150 before:ease-out"
+];
+const listCellStates = [
+	"not-data-active:not-data-selected:not-data-disabled:not-disabled:not-aria-disabled:hover:before:bg-fill-cell-hover",
+	"not-data-active:not-data-selected:not-data-disabled:not-disabled:not-aria-disabled:active:before:bg-fill-cell-press",
+	"active:before:transition-none",
+	"not-data-active:not-data-selected:data-popup-open:before:bg-fill-cell-hover",
+	"not-data-active:not-data-selected:has-data-popup-open:before:bg-fill-cell-hover"
+];
+const listCellFocus = ["focus-visible:keyboard:before:inset-ring-2 focus-visible:keyboard:before:inset-ring-foreground"];
+//#endregion
+export { listCell, listCellFocus, listCellStates };

package/dist/lib/located.d.mts

@@ -0,0 +1,25 @@
+//#region src/lib/located.d.ts
+/**
+ * How long the located highlight lasts: `info-soft` at once, held 1.2s, faded
+ * out by 2s (design/foundations/states.md#located). styles.css runs the
+ * animation; useLocated drops `data-located` after this long.
+ */
+export declare const LOCATED_MS = 2000;
+/**
+ * Whether an item shows the located highlight: pass it to MessageItem's
+ * `located`, or set `data-located` while it is true.
+ *
+ * `request` names one jump to this item: a counter or token that changes on
+ * every jump, `null` or `undefined` for none. Not the item's own id: a second
+ * jump to the same item would pass the same value and show nothing. A string
+ * or number, never an object: a new object each render would restart the
+ * highlight on every render, and it would never show. Pass it once the item is on
+ * screen, after the scroll that brings it there. Each new request turns the
+ * highlight off, back on two frames later (the animation restarts only after
+ * the attribute was gone for a frame, so a second jump to the same item shows
+ * again), and off after LOCATED_MS, so the attribute never stays behind and
+ * hover comes back. Re-renders with the same request change nothing.
+ */
+export type LocatedRequest = string | number | null | undefined;
+export declare function useLocated(request: LocatedRequest): boolean;
+//#endregion

package/dist/lib/located.mjs

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+//#region src/lib/located.ts
+/**
+* How long the located highlight lasts: `info-soft` at once, held 1.2s, faded
+* out by 2s (design/foundations/states.md#located). styles.css runs the
+* animation; useLocated drops `data-located` after this long.
+*/
+const LOCATED_MS = 2e3;
+function useLocated(request) {
+	const [on, setOn] = useState(null);
+	useEffect(() => {
+		if (request == null) return;
+		let timer;
+		let frame = requestAnimationFrame(() => {
+			frame = requestAnimationFrame(() => {
+				setOn(() => request);
+				timer = setTimeout(() => setOn(null), LOCATED_MS);
+			});
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+			if (timer !== void 0) clearTimeout(timer);
+		};
+	}, [request]);
+	return request != null && on === request;
+}
+//#endregion
+export { LOCATED_MS, useLocated };

package/dist/lib/overlay-depth.d.mts

@@ -0,0 +1,42 @@
+import { ReactNode } from "react";
+//#region src/lib/overlay-depth.d.ts
+/**
+ * A modal surface: a centred dialog (Dialog, AlertDialog, or an app's own
+ * modal) or a sheet (Drawer).
+ */
+export type OverlayLayerKind = "dialog" | "drawer";
+export type OverlayLayerProviderProps = {
+  /**
+   * What the surface is. Use `"dialog"` for an app's own modal, whatever it
+   * looks like: `"drawer"` is for a Base UI Drawer, which nests under another
+   * drawer by itself and only draws its own scrim over a `"dialog"`.
+   */
+  kind: OverlayLayerKind;
+  /** Whether it dims what is under it. A non-modal surface adds nothing. */
+  modal: boolean;
+  children?: ReactNode;
+};
+/**
+ * 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).
+ */
+export declare function OverlayLayerProvider({ kind, modal, children }: OverlayLayerProviderProps): import("react").JSX.Element;
+/**
+ * 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.
+ */
+export declare function useParentOverlayKind(): OverlayLayerKind | null;
+//#endregion