@botiverse/raft-ui 0.51.0 → 0.52.1

package/dist/lib/touch-drag.mjs

@@ -0,0 +1,151 @@
+import { eventWindow, holdEscape, releaseEscape } from "./drag-escape.mjs";
+import { useMemo } from "react";
+import { PointerSensor, TouchSensor, useSensor } from "@dnd-kit/core";
+//#region src/lib/touch-drag.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.
+*/
+const TOUCH_DRAG_HOLD_MS = 500;
+const TOUCH_DRAG_DISTANCE_PX = 10;
+const TOUCH_DRAG_TOLERANCE_PX = 10;
+const holds = /* @__PURE__ */ new WeakMap();
+function touchPoint(event) {
+	const touch = event.touches?.[0] ?? event.changedTouches?.[0];
+	return touch ? {
+		x: touch.clientX,
+		y: touch.clientY
+	} : null;
+}
+function farther(from, to, limit) {
+	return Math.hypot(to.x - from.x, to.y - from.y) > limit;
+}
+/**
+* Once a pointer sensor's drag has started, Escape cancels it and reaches
+* nothing else (`drag-escape.ts`): no app handler on the window, the document
+* or an element hears it.
+*/
+function holdEscapeOnceActive(sensor) {
+	const self = sensor;
+	if (self.activated) holdEscape(eventWindow(self.props.event), sensor, () => self.handleCancel());
+}
+function releaseEscapeOf(sensor) {
+	releaseEscape(eventWindow(sensor.props.event), sensor);
+}
+var HoldThenMoveTouchSensorImpl = class extends TouchSensor {
+	static activators = TouchSensor.activators;
+	static setup() {
+		return TouchSensor.setup();
+	}
+	attach() {
+		super.attach();
+		const self = this;
+		const { holdMs = 500 } = self.props.options;
+		const state = {
+			heldAt: null,
+			last: null,
+			timer: setTimeout(() => {
+				state.heldAt = state.last ?? self.initialCoordinates;
+			}, holdMs)
+		};
+		holds.set(this, state);
+	}
+	handleStart() {
+		super.handleStart();
+		holdEscapeOnceActive(this);
+	}
+	handleMove(event) {
+		const self = this;
+		const state = holds.get(this);
+		if (self.activated || !state) {
+			super.handleMove(event);
+			return;
+		}
+		if ((event.touches?.length ?? 1) > 1) {
+			self.handleCancel();
+			return;
+		}
+		const point = touchPoint(event);
+		const start = self.initialCoordinates;
+		if (!point || !start) return;
+		state.last = point;
+		const { distance = 10, tolerance = 10 } = self.props.options;
+		if (!state.heldAt) {
+			if (farther(start, point, tolerance)) self.handleCancel();
+			return;
+		}
+		if (event.cancelable) event.preventDefault();
+		if (farther(state.heldAt, point, distance)) self.handleStart();
+	}
+	detach() {
+		const state = holds.get(this);
+		if (state) clearTimeout(state.timer);
+		holds.delete(this);
+		releaseEscapeOf(this);
+		super.detach();
+	}
+};
+/** A TouchSensor that starts a drag on the first move after a still hold (see above). */
+const HoldThenMoveTouchSensor = HoldThenMoveTouchSensorImpl;
+var MouseOnlyPointerSensorImpl = class extends PointerSensor {
+	static activators = [{
+		eventName: "onPointerDown",
+		handler: (event, options) => event.nativeEvent.pointerType === "touch" ? false : PointerSensor.activators[0].handler(event, options)
+	}];
+	handleStart() {
+		super.handleStart();
+		holdEscapeOnceActive(this);
+	}
+	detach() {
+		releaseEscapeOf(this);
+		super.detach();
+	}
+};
+/**
+* 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.
+*/
+const MouseOnlyPointerSensor = MouseOnlyPointerSensorImpl;
+/**
+* `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.
+*/
+function useHoldThenMoveTouchSensor({ holdMs = 500, distance = 10, tolerance = 10 } = {}) {
+	const options = useMemo(() => ({
+		holdMs,
+		distance,
+		tolerance,
+		activationConstraint: { distance: Number.POSITIVE_INFINITY }
+	}), [
+		holdMs,
+		distance,
+		tolerance
+	]);
+	return useSensor(HoldThenMoveTouchSensor, options);
+}
+/** The mouse / pen sensor that goes with it: picks up after `distance` px. */
+function useMouseOnlyPointerSensor(distance) {
+	const options = useMemo(() => ({ activationConstraint: { distance } }), [distance]);
+	return useSensor(MouseOnlyPointerSensor, options);
+}
+//#endregion
+export { HoldThenMoveTouchSensor, MouseOnlyPointerSensor, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor };

package/dist/lib/truncation.d.mts

@@ -0,0 +1,26 @@
+//#region src/lib/truncation.d.ts
+/**
+ * Whether a text is cut off, and when to look again: the one way raft-ui
+ * measures truncation (Ellipsis, `useTruncated`, and the `title` that
+ * fields give a cut value).
+ *
+ * The truncation itself is CSS (`text-overflow: ellipsis`, `line-clamp`);
+ * this module only answers "did it cut?".
+ *
+ * - It compares fractional geometry with a 0.5px tolerance. `scrollWidth` and
+ *   `clientWidth` are whole pixels, so at some widths (and page zooms) a text
+ *   that shows an ellipsis reports that it fits.
+ * - Every measured element on a page shares one ResizeObserver, one
+ *   MutationObserver and one font-loading listener. A web font that finishes
+ *   loading widens the text without resizing its box, which no
+ *   ResizeObserver would notice.
+ * - Requests are batched into one animation frame, before paint: every
+ *   target is isolated (an Ellipsis hides its `after` so the text is measured
+ *   alone), then every target is read, then restored, then every result is
+ *   committed in one synchronous React update. Reads never interleave with
+ *   writes, and a result shows in the same frame it was measured in. A
+ *   request made while a frame is handled is queued for the next one.
+ */
+/** `undefined`: not known yet, or the element has no box (hidden, not laid out). */
+export type Truncation = boolean | undefined;
+//#endregion

package/dist/lib/truncation.mjs

@@ -0,0 +1,153 @@
+import { flushSync } from "react-dom";
+//#region src/lib/truncation.ts
+/** Overflow smaller than this is rounding, not a cut. */
+const TOLERANCE = .5;
+function contentBox(element) {
+	const rect = element.getBoundingClientRect();
+	if (rect.width === 0 && rect.height === 0) return void 0;
+	const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+	const px = (value) => Number.parseFloat(value ?? "") || 0;
+	return {
+		left: rect.left + px(style?.borderLeftWidth) + px(style?.paddingLeft),
+		right: rect.right - px(style?.borderRightWidth) - px(style?.paddingRight),
+		top: rect.top + px(style?.borderTopWidth) + px(style?.paddingTop),
+		bottom: rect.bottom - px(style?.borderBottomWidth) - px(style?.paddingBottom)
+	};
+}
+/**
+* Whether laid-out text `rects` overflow `box`: past either inline edge, or
+* on a line whose middle is below the bottom edge (a clamped line is still
+* laid out, below the box; the middle, not the top, so a glyph box taller
+* than a tight line-height does not count as a cut).
+*/
+function overflows(rects, box) {
+	for (const rect of Array.from(rects)) {
+		if (rect.width === 0 && rect.height === 0) continue;
+		if (rect.right > box.right + .5 || rect.left < box.left - .5) return true;
+		if (rect.top + rect.height / 2 > box.bottom + .5) return true;
+	}
+	return false;
+}
+/** Whether the text inside `element` overflows its content box. */
+function measureElement(element) {
+	if (!element.isConnected) return void 0;
+	const box = contentBox(element);
+	if (!box) return void 0;
+	const range = element.ownerDocument.createRange();
+	range.selectNodeContents(element);
+	return overflows(range.getClientRects(), box);
+}
+/**
+* Whether the inline `content` overflows `text`, the box that clips it.
+* Used where `text` holds more than the content (an Ellipsis's floats).
+*/
+function measureContent(text, content) {
+	if (!text.isConnected) return void 0;
+	const box = contentBox(text);
+	if (!box) return void 0;
+	return overflows(content.getClientRects(), box);
+}
+/** Isolates, reads and restores one target now, outside the batch. */
+function readNow(target) {
+	const restore = target.isolate?.();
+	try {
+		return target.read();
+	} finally {
+		restore?.();
+	}
+}
+const targets = /* @__PURE__ */ new Set();
+const byElement = /* @__PURE__ */ new WeakMap();
+const pending = /* @__PURE__ */ new Set();
+let frame = 0;
+let resizeObserver;
+let mutationObserver;
+let fontsListening = false;
+function flush() {
+	frame = 0;
+	const batch = Array.from(pending).filter((target) => targets.has(target));
+	pending.clear();
+	const restores = batch.map((target) => target.isolate?.());
+	const results = batch.map((target) => target.read());
+	for (const restore of restores) restore?.();
+	flushSync(() => {
+		batch.forEach((target, index) => {
+			if (targets.has(target)) target.commit(results[index]);
+		});
+	});
+}
+/** Asks for `target` to be measured in the next frame, before it paints. */
+function scheduleMeasure(target) {
+	if (!targets.has(target)) return;
+	pending.add(target);
+	if (frame === 0 && typeof requestAnimationFrame === "function") frame = requestAnimationFrame(flush);
+}
+function scheduleAll() {
+	for (const target of targets) scheduleMeasure(target);
+}
+function ownerOf(node) {
+	for (let current = node; current; current = current.parentNode) {
+		const target = byElement.get(current);
+		if (target) return target;
+	}
+}
+function observers(view) {
+	if (!resizeObserver && "ResizeObserver" in view) resizeObserver = new view.ResizeObserver((entries) => {
+		for (const entry of entries) {
+			const target = byElement.get(entry.target);
+			if (target) scheduleMeasure(target);
+		}
+	});
+	if (!mutationObserver && "MutationObserver" in view) mutationObserver = new view.MutationObserver((records) => {
+		for (const record of records) {
+			const target = ownerOf(record.target);
+			if (target) scheduleMeasure(target);
+		}
+	});
+	const fonts = view.document.fonts;
+	if (!fontsListening && fonts && typeof fonts.addEventListener === "function") {
+		fonts.addEventListener("loadingdone", scheduleAll);
+		fontsListening = true;
+	}
+}
+/**
+* Starts watching `target`: the elements it names, the text under `watch`
+* and the page's fonts. Measures it in the next frame. Returns the cleanup.
+*/
+function observeTruncation(target) {
+	const observed = target.observe().filter((element) => element != null);
+	const first = observed[0];
+	const view = first?.ownerDocument.defaultView;
+	if (!first || !view) return () => void 0;
+	observers(view);
+	targets.add(target);
+	for (const element of observed) {
+		byElement.set(element, target);
+		resizeObserver?.observe(element);
+	}
+	const watched = target.watch();
+	if (watched) {
+		byElement.set(watched, target);
+		mutationObserver?.observe(watched, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+	}
+	scheduleMeasure(target);
+	return () => {
+		targets.delete(target);
+		pending.delete(target);
+		for (const element of observed) {
+			if (byElement.get(element) === target) byElement.delete(element);
+			resizeObserver?.unobserve(element);
+		}
+		if (watched && byElement.get(watched) === target) byElement.delete(watched);
+		if (targets.size === 0) {
+			mutationObserver?.disconnect();
+			mutationObserver = void 0;
+		}
+	};
+}
+//#endregion
+export { TOLERANCE, measureContent, measureElement, observeTruncation, readNow, scheduleMeasure };

package/dist/lib/tv.d.mts

@@ -0,0 +1,2 @@
+import { VariantProps } from "tailwind-variants/lite";
+export type { VariantProps };

package/dist/lib/tv.mjs

@@ -0,0 +1,14 @@
+import { cn } from "../cn.mjs";
+import { tv } from "tailwind-variants/lite";
+//#region src/lib/tv.ts
+const tv$1 = ((options) => {
+	const recipe = tv(options);
+	const wrappedRecipe = ((props) => {
+		const result = recipe(props);
+		if (result == null || typeof result === "string") return cn(result);
+		return Object.fromEntries(Object.entries(result).map(([slotName, slot]) => [slotName, (slotProps) => cn(slot(slotProps))]));
+	});
+	return Object.assign(wrappedRecipe, recipe);
+});
+//#endregion
+export { tv$1 as tv };

package/dist/lib/use-copy-to-clipboard.mjs

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/lib/use-copy-to-clipboard.ts
+function legacyCopy(value) {
+	try {
+		const area = document.createElement("textarea");
+		area.value = value;
+		area.setAttribute("readonly", "");
+		area.style.position = "fixed";
+		area.style.top = "0";
+		area.style.opacity = "0";
+		document.body.appendChild(area);
+		area.select();
+		const ok = document.execCommand("copy");
+		document.body.removeChild(area);
+		return ok;
+	} catch {
+		return false;
+	}
+}
+async function writeClipboard(value) {
+	try {
+		if (navigator.clipboard?.writeText) {
+			await navigator.clipboard.writeText(value);
+			return true;
+		}
+	} catch {}
+	return legacyCopy(value);
+}
+function useCopyToClipboard({ timeout = 1400 } = {}) {
+	const [copied, setCopied] = useState(false);
+	const timerRef = useRef(null);
+	const clear = useCallback(() => {
+		if (timerRef.current !== null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+	}, []);
+	const reset = useCallback(() => {
+		clear();
+		setCopied(false);
+	}, [clear]);
+	useEffect(() => clear, [clear]);
+	return {
+		copied,
+		copyText: useCallback(async (value) => {
+			if (!await writeClipboard(value)) throw new Error("copy_failed");
+			setCopied(true);
+			clear();
+			timerRef.current = setTimeout(() => {
+				timerRef.current = null;
+				setCopied(false);
+			}, timeout);
+		}, [clear, timeout]),
+		reset
+	};
+}
+//#endregion
+export { useCopyToClipboard };

package/dist/lib/use-merged-ref.mjs

@@ -0,0 +1,60 @@
+import { useCallback, useMemo, useRef } from "react";
+//#region src/lib/use-merged-ref.ts
+/**
+* Merges refs into one setter. Returns `[setRef, getRef]`: `setRef(el)` stores `el` and passes it to
+* every ref; `getRef()` reads the stored element. When a ref changes between renders (checked while
+* rendering), the old one is cleared and the new one gets the stored element at once. The setter
+* calls ref callbacks itself, so what they return is ignored.
+*/
+function useMergedRef(...refs) {
+	const entries = useMemo(() => [], []);
+	const elementRef = useRef(null);
+	const getRef = useCallback(() => elementRef.current, []);
+	const clearEntry = useCallback((entry) => {
+		if (entry != null) {
+			if (entry.type === "RefCallback") entry.ref(null);
+			else entry.ref.current = null;
+		}
+	}, []);
+	const applyStoredElement = useCallback((ref) => {
+		if (typeof ref == "function") ref(getRef());
+		else ref.current = getRef();
+	}, [getRef]);
+	const setRef = useCallback((el) => {
+		elementRef.current = el;
+		for (const entry of entries) if (entry == null) continue;
+		else if (entry.type === "RefObject") entry.ref.current = el;
+		else entry.ref(el);
+	}, [entries]);
+	for (let i = 0; i < refs.length; i++) {
+		const ref = refs[i];
+		const entry = entries[i];
+		if (ref == null) {
+			clearEntry(entry);
+			entries[i] = null;
+		} else {
+			if (entry && entry.ref === ref) continue;
+			if (typeof ref == "function") {
+				if (entry != null) clearEntry(entry);
+				entries[i] = {
+					type: "RefCallback",
+					ref
+				};
+			} else {
+				if (entry != null) clearEntry(entry);
+				entries[i] = {
+					type: "RefObject",
+					ref
+				};
+			}
+			applyStoredElement(ref);
+		}
+	}
+	for (let i = refs.length; i < entries.length; i++) {
+		clearEntry(entries[i]);
+		entries[i] = null;
+	}
+	return [setRef, getRef];
+}
+//#endregion
+export { useMergedRef };

package/dist/lib/use-mobile-viewport.mjs

@@ -0,0 +1,17 @@
+import { useSyncExternalStore } from "react";
+//#region src/lib/use-mobile-viewport.ts
+const MOBILE_QUERY = "(max-width: 767px)";
+function subscribeMobileViewport(onStoreChange) {
+	if (typeof window === "undefined") return () => void 0;
+	const media = window.matchMedia(MOBILE_QUERY);
+	media.addEventListener("change", onStoreChange);
+	return () => media.removeEventListener("change", onStoreChange);
+}
+function getMobileViewportSnapshot() {
+	return typeof window !== "undefined" && window.matchMedia(MOBILE_QUERY).matches;
+}
+function useMobileViewport() {
+	return useSyncExternalStore(subscribeMobileViewport, getMobileViewportSnapshot, () => false);
+}
+//#endregion
+export { useMobileViewport };

package/dist/lib/use-overflow-title.mjs

@@ -0,0 +1,49 @@
+import { measureElement, observeTruncation } from "./truncation.mjs";
+import { useCallback, useRef } from "react";
+//#region src/lib/use-overflow-title.ts
+function cut(element) {
+	return measureElement(element) === true;
+}
+function assign(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+/**
+* Gives a value that is cut off (an ellipsis, a clamp) its whole text as its
+* `title`, and takes it away again when the value fits: a value that shows in
+* full needs no tooltip repeating it (design/patterns/forms.md#long-values-in-fields).
+* It watches the element and its children, so a part whose text sits in a
+* child that truncates (a chip's label) is covered too. A `title` the caller
+* passes wins, and is never touched.
+*
+* Pass a stable `ref`: a ref object, or a callback ref made with `useCallback`
+* (or defined outside the component). The returned callback ref changes
+* whenever `ref` does, and React then detaches and re-attaches it, so an inline
+* `ref={(node) => ...}` disconnects and rebuilds both observers on every render.
+* The title stays right, but each render pays for new observers and a fresh
+* measurement.
+*/
+function useOverflowTitle(ref, title) {
+	const cleanup = useRef(void 0);
+	const own = title !== void 0;
+	return useCallback((node) => {
+		cleanup.current?.();
+		cleanup.current = void 0;
+		assign(ref, node);
+		const view = node?.ownerDocument.defaultView;
+		if (!node || own || !view) return;
+		const children = Array.from(node.children);
+		cleanup.current = observeTruncation({
+			observe: () => [node, ...children],
+			watch: () => node,
+			read: () => cut(node) || children.some(cut),
+			commit: (truncated) => {
+				const text = node.textContent?.trim() ?? "";
+				if (text && truncated) node.title = text;
+				else node.removeAttribute("title");
+			}
+		});
+	}, [own, ref]);
+}
+//#endregion
+export { useOverflowTitle };

package/dist/lib/use-scrollbar-size.d.mts

@@ -0,0 +1,16 @@
+//#region src/lib/use-scrollbar-size.d.ts
+/**
+ * Publishes a scroller's classic scrollbar width as `--scrollbar-size` on the
+ * scroller, for the list cells inside it (lib/list-cell.ts): a cell gives
+ * that much of its 8px end inset back, so its fill sits 8px from both outer
+ * edges of the list whether the scrollbar takes room (a classic scrollbar,
+ * `scrollbar-list`) or not (an overlay scrollbar: 0). CSS alone can't tell
+ * the two apart. The width is kept current while the scroller or one of its
+ * direct children resizes, which is when a scrollbar comes and goes: content
+ * deeper down that grows also grows the child that holds it. A child whose
+ * box keeps its size while its content overflows it would not be seen.
+ *
+ * Returns a ref callback for the scroller.
+ */
+export declare function useScrollbarSize<E extends HTMLElement>(): (el: E | null) => void;
+//#endregion

package/dist/lib/use-scrollbar-size.mjs

@@ -0,0 +1,46 @@
+import { useCallback, useRef } from "react";
+//#region src/lib/use-scrollbar-size.ts
+/**
+* Publishes a scroller's classic scrollbar width as `--scrollbar-size` on the
+* scroller, for the list cells inside it (lib/list-cell.ts): a cell gives
+* that much of its 8px end inset back, so its fill sits 8px from both outer
+* edges of the list whether the scrollbar takes room (a classic scrollbar,
+* `scrollbar-list`) or not (an overlay scrollbar: 0). CSS alone can't tell
+* the two apart. The width is kept current while the scroller or one of its
+* direct children resizes, which is when a scrollbar comes and goes: content
+* deeper down that grows also grows the child that holds it. A child whose
+* box keeps its size while its content overflows it would not be seen.
+*
+* Returns a ref callback for the scroller.
+*/
+function useScrollbarSize() {
+	const cleanup = useRef(null);
+	return useCallback((el) => {
+		cleanup.current?.();
+		cleanup.current = null;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const update = () => {
+			const style = getComputedStyle(el);
+			const size = el.offsetWidth - el.clientWidth - parseFloat(style.borderLeftWidth || "0") - parseFloat(style.borderRightWidth || "0");
+			el.style.setProperty("--scrollbar-size", `${Math.max(0, Math.round(size))}px`);
+		};
+		const resize = new ResizeObserver(update);
+		const observeChildren = () => {
+			for (const child of el.children) resize.observe(child);
+		};
+		resize.observe(el);
+		observeChildren();
+		const mutation = new MutationObserver(() => {
+			observeChildren();
+			update();
+		});
+		mutation.observe(el, { childList: true });
+		update();
+		cleanup.current = () => {
+			resize.disconnect();
+			mutation.disconnect();
+		};
+	}, []);
+}
+//#endregion
+export { useScrollbarSize };

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

@@ -0,0 +1,20 @@
+import { Truncation } from "./truncation.mjs";
+import { RefObject } from "react";
+//#region src/lib/use-truncated.d.ts
+/**
+ * Whether the text in the element `ref` points at is cut off by its CSS
+ * (`truncate`, `line-clamp`, a fixed size with `overflow: hidden`): `true`,
+ * `false`, or `undefined` until it is measured or while it has no box.
+ *
+ * It measures fractional sizes with a 0.5px tolerance, past either inline
+ * edge and below the bottom edge, so it needs no line count. It measures again
+ * when the element changes size, when its text changes and when a web font
+ * finishes loading, in one batched frame for every measured element on the
+ * page (lib/truncation.ts), before that frame paints.
+ *
+ * The element is read when the component mounts: keep `ref` on one element
+ * for the component's life, or give the component a `key` that changes with
+ * the element.
+ */
+export declare function useTruncated(ref: RefObject<Element | null>): Truncation;
+//#endregion

package/dist/lib/use-truncated.mjs

@@ -0,0 +1,34 @@
+import { measureElement, observeTruncation } from "./truncation.mjs";
+import { useLayoutEffect, useState } from "react";
+//#region src/lib/use-truncated.ts
+/**
+* Whether the text in the element `ref` points at is cut off by its CSS
+* (`truncate`, `line-clamp`, a fixed size with `overflow: hidden`): `true`,
+* `false`, or `undefined` until it is measured or while it has no box.
+*
+* It measures fractional sizes with a 0.5px tolerance, past either inline
+* edge and below the bottom edge, so it needs no line count. It measures again
+* when the element changes size, when its text changes and when a web font
+* finishes loading, in one batched frame for every measured element on the
+* page (lib/truncation.ts), before that frame paints.
+*
+* The element is read when the component mounts: keep `ref` on one element
+* for the component's life, or give the component a `key` that changes with
+* the element.
+*/
+function useTruncated(ref) {
+	const [truncated, setTruncated] = useState(void 0);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return void 0;
+		return observeTruncation({
+			observe: () => [element],
+			watch: () => element,
+			read: () => measureElement(element),
+			commit: setTruncated
+		});
+	}, [ref]);
+	return truncated;
+}
+//#endregion
+export { useTruncated };

package/dist/lib/without-children.d.mts

@@ -0,0 +1,8 @@
+//#region src/lib/without-children.d.ts
+/**
+ * Element props without `children` — for leaf components (dots, markers) that
+ * render no caller content. React ships `ComponentPropsWithoutRef` but no
+ * equivalent that subtracts children, so this names the one-off `Omit`.
+ */
+export type WithoutChildren<P> = Omit<P, "children">;
+//#endregion