@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/wip.mjs

@@ -1,3079 +1,43 @@
-import { cn } from "./cn.mjs";
-import { $ as MessageListJumpPillGroup, $n as PreviewCardActions, A as useDragSensors, Aa as OverlayLayerProvider, Ai as Checkbox, B as keepGrabInside, Bi as ListRowMeta, Bn as RadioGroup, Br as MouseOnlyPointerSensor, C as DragRefusalHint, Cr as MobileNavServerPopoverRowLabel, D as MOUSE_DRAG_DISTANCE_PX, E as DragRemeasure, Ea as Button$1, F as DRAG_SIBLING_TRANSITION, Fi as ListRowBottom, G as DEFAULT_DRAG_MESSAGES, Gn as InputGroupAddon, Gr as useMouseOnlyPointerSensor, Hi as ListRowTop, Hn as RadioGroupItem, Hr as TOUCH_DRAG_HOLD_MS, I as DROP_GLIDE, Ia as tv, J as dragInstructions, Ji as TooltipContent, Jn as measureContent, K as SILENT_DRAG_ANNOUNCEMENTS, Kn as InputGroupInput, L as DragLift, Li as ListRowDescription, Ln as AvatarGroupButton, Lt as MessageReferenceReadMark, M as DRAG_KEYBOARD_OFFSET_PX, N as DRAG_LIFT_Z_INDEX, Na as useThemeScopeProps, Ni as ListRow, Nt as MessageReferenceIcon, O as listKeyboardCoordinates, Oa as Spinner, Or as PopoverBody, P as DRAG_SETTLE, Pa as useTheme, Pi as ListRowBody, Q as MessageListJumpPillDismiss, Qi as usePopupCollisionPadding, R as ORIGIN_OPACITY, S as Skeleton, Sa as TextLink, Sr as MobileNavServerPopoverRowDescription, T as DRAG_KEYBOARD_CODES, Tr as PopoverActions, U as LIFT_CLASS, Un as chipRemoveBase, Ur as TOUCH_DRAG_TOLERANCE_PX, V as useDragSiblingTransition, Vi as ListRowTitle, Vr as TOUCH_DRAG_DISTANCE_PX, Wn as InputGroup, Wr as useHoldThenMoveTouchSensor, X as MessageListJumpControls, Xn as observeTruncation, Y as dragMessages, Yn as measureElement, Z as MessageListJumpPill, Zi as TooltipTrigger, Zn as readNow, _ as InboxItemTrailing, _a as DialogTrigger, _r as MobileNavServerPopoverDestinations, a as InboxItemContext, aa as DialogClose, ar as PreviewCardFooter, b as useLatestRef, br as MobileNavServerPopoverRow, c as InboxItemLeading, dn as MessageItemDelegatedByButton, ea as DialogCommit, fn as MessageItemDelegatedByName, g as InboxItemTitle, ga as DialogTitle, gr as MobileNavServerPopoverDestination, h as InboxItemTimestamp, hr as MobileNavServerPopoverContent, i as InboxItemContent, ii as DropdownMenuLinkItem, ir as PreviewCardEyebrow, j as DRAG_AUTO_SCROLL_ZONE_PX, ja as useParentOverlayKind, k as useDragAcrossLists, ka as defaultNativeButton, la as DialogFooterNote, ln as MessageItemDelegatedAvatar, lt as MessageQuotedPreviewAuthorDelegatedBy, ma as DialogSheetBack, mr as MobileNavServerPopover, o as InboxItemHeading, oa as DialogContent, pr as MobileNavServerItem, q as createDragAnnouncements, qi as Tooltip, qn as useOverflowTitle, r as InboxItemBody, ra as Dialog, sr as PreviewCardMeta, t as InboxItem, ta as DialogSheetContent, tr as PreviewCardBody, un as MessageItemDelegatedBy, vr as MobileNavServerPopoverGroup, w as DropPlaceholder, x as hudTextAction, xr as MobileNavServerPopoverRowBody, y as inboxItem, yr as MobileNavServerPopoverList, z as cancelDrag, zr as HoldThenMoveTouchSensor } from "./inbox-item-DHJOrxB8.mjs";
-import { Check, ChevronDown, LoaderCircle, Plus, Search, X } from "lucide-react";
-import { createContext, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "@base-ui/react/button";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { Combobox } from "@base-ui/react/combobox";
-import { arrayMove, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { Meter as Meter$1 } from "@base-ui/react/meter";
-import { CheckboxGroup } from "@base-ui/react/checkbox-group";
-//#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
-//#region src/components/combobox-select/combobox-select.list-side.ts
-/** One option row (36px) and the list's 6px padding above and below. */
-const ROW = 36;
-const LIST_PADDING = 12;
-/** The gap between the field and the list (the positioner's sideOffset). */
-const SIDE_OFFSET = 4;
-/**
-* Whether fewer than three rows of a phone's list fit between the field and the
-* bottom of the visual viewport. The list always opens below the field on a
-* phone and never flips; when this is true the field is scrolled up instead.
-*/
-function roomBelowIsShort(field, viewport, rows = 3) {
-	return viewport.top + viewport.height - field.bottom - SIDE_OFFSET < rows * ROW + LIST_PADDING;
-}
-//#endregion
-//#region src/components/combobox-select/combobox-select.options.ts
-function isOptionGroup(option) {
-	return typeof option === "object" && option !== null && "type" in option && option.type === "group" && "children" in option && Array.isArray(option.children);
-}
-function normalizeOption(option, labelField, valueField, disabledField) {
-	const fields = option;
-	const value = fields[valueField];
-	const label = fields[labelField];
-	if (typeof value !== "string" && typeof value !== "number") throw new Error("ComboboxSelect options must have a string or number value.");
-	return {
-		value,
-		label: typeof label === "string" || typeof label === "number" ? String(label) : String(value),
-		disabled: Boolean(fields[disabledField]),
-		option
-	};
-}
-function optionKey(value) {
-	return `${typeof value}:${value}`;
-}
-//#endregion
-//#region src/components/combobox-select/combobox-select.tsx
-const defaultMessages = {
-	clear: "Clear selection",
-	toggle: "Toggle options",
-	selected: "Selected options",
-	chipDescription: "Press Backspace or Delete to remove",
-	inputDescription: "From the start of the input, press Left Arrow to focus selected options",
-	remove: (label) => `Remove ${label}`
-};
-const defaultRenderCreateLabel = (query) => `Create “${query}”`;
-/** An option's or a chip's text, with its whole value as the title when it is cut off. */
-function OverflowText({ children }) {
-	return /* @__PURE__ */ jsx("span", {
-		ref: useOverflowTitle(),
-		className: "r-combobox-select__text",
-		children
-	});
-}
-function recordLabel(record, renderLabel) {
-	return record.option === void 0 ? record.label : renderLabel?.(record.option) ?? record.label;
-}
-function renderOptionContent({ record, selected, renderLabel, renderOption, renderCreateLabel }) {
-	if (record.createQuery !== void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Plus, { "aria-hidden": true }), /* @__PURE__ */ jsx(OverflowText, { children: renderCreateLabel(record.label) })] });
-	const content = record.option === void 0 ? record.label : renderOption?.(record.option, { selected }) ?? recordLabel(record, renderLabel);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OverflowText, { children: content }), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-		className: "r-combobox-select__indicator",
-		children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true })
-	})] });
-}
-function renderSelectedChip({ record, index, tagLimit, strings, renderLabel, renderTag }) {
-	const label = recordLabel(record, renderLabel);
-	const content = record.option === void 0 ? record.label : renderTag?.(record.option) ?? label;
-	const overflow = index >= tagLimit;
-	return /* @__PURE__ */ jsxs(Combobox.Chip, {
-		className: "r-combobox-select__chip",
-		"data-overflow": overflow || void 0,
-		"aria-label": record.label,
-		"aria-description": strings.chipDescription,
-		children: [/* @__PURE__ */ jsx(OverflowText, { children: content }), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
-			className: "r-combobox-select__remove",
-			"aria-label": strings.remove(record.label),
-			children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
-		})]
-	}, optionKey(record.value));
-}
-/**
-* On a phone the list always opens below the field, between the field and the
-* keyboard, as a native autocomplete does, and never flips: which side has more
-* room depends on whether the keyboard happens to be up, so choosing a side made
-* the same field open up one time and down the next.
-*/
-const PHONE_LIST_COLLISION = {
-	side: "none",
-	align: "shift",
-	fallbackAxisSide: "none"
-};
-function ComboboxSelectFramePositioner({ collisionPadding, container, ...props }) {
-	const padding = usePopupCollisionPadding(collisionPadding, 8, container);
-	return /* @__PURE__ */ jsx(Combobox.Positioner, {
-		collisionPadding: padding,
-		...props
-	});
-}
-/**
-* Keeps room for the list below the field on a phone: when fewer than three
-* rows fit between the field and the bottom of the visual viewport (the
-* keyboard's top edge while it is up), scrolls the field up to the top of
-* what is visible instead of flipping the list above it.
-*/
-function keepRoomBelow(field) {
-	const view = field?.ownerDocument.defaultView;
-	if (!field || !view) return;
-	const visual = view.visualViewport;
-	const viewport = visual ? {
-		top: visual.offsetTop,
-		height: visual.height
-	} : {
-		top: 0,
-		height: view.innerHeight
-	};
-	if (roomBelowIsShort(field.getBoundingClientRect(), viewport)) {
-		if (!field.style.scrollMarginTop) field.style.scrollMarginTop = "2.5rem";
-		field.scrollIntoView({
-			block: "start",
-			inline: "nearest",
-			behavior: "instant"
-		});
-	}
-}
-/** Options-driven composition. The stable compound Combobox API stays unchanged. */
-function isItemEqualToValue(a, b) {
-	return a.createQuery === b.createQuery && a.value === b.value;
-}
-function itemToStringLabel(record) {
-	return record.label;
-}
-function itemToStringValue(record) {
-	return String(record.value);
-}
-function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange, labelField = "label", valueField = "value", disabledField = "disabled", fallbackOption, filterable = true, filter, remote = false, onSearch, loading = false, create = false, creatable, onCreate, clearable = false, showArrow = true, clearFilterAfterSelect = true, onClear, maxTagCount, size = "md", status, placeholder = "Select an option", renderLabel, renderOption, renderTag, renderCreateLabel = defaultRenderCreateLabel, emptyContent = "No options found", loadingContent = "Loading…", messages, listMaxHeight, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight = true, onOpenChange, ...rootProps }) {
-	const generatedId = useId();
-	const id = idProp ?? generatedId;
-	const { resolvedMode } = useTheme();
-	const scopedPortalProps = useThemeScopeProps(portalProps ?? {});
-	const strings = {
-		...defaultMessages,
-		...messages
-	};
-	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? (multiple ? [] : null));
-	const selectedValue = value === void 0 ? uncontrolledValue : value;
-	const selectedKeys = useMemo(() => Array.isArray(selectedValue) ? selectedValue : selectedValue == null ? [] : [selectedValue], [selectedValue]);
-	const [query, setQuery] = useState(String(defaultInputValue ?? ""));
-	const [createdOptions, setCreatedOptions] = useState([]);
-	const collator = useMemo(() => new Intl.Collator(void 0, {
-		sensitivity: "base",
-		usage: "search"
-	}), []);
-	const normalized = useMemo(() => {
-		const normalize = (option) => normalizeOption(option, labelField, valueField, disabledField);
-		const groups = [];
-		options.forEach((option, index) => {
-			if (isOptionGroup(option)) groups.push({
-				key: `group:${optionKey(option.key)}`,
-				label: option.label,
-				items: option.children.map(normalize)
-			});
-			else groups.push({
-				key: `option:${index}`,
-				items: [normalize(option)]
-			});
-		});
-		const records = new Map(groups.flatMap((group) => group.items.map((record) => [record.value, record])));
-		const created = createdOptions.map(normalize).filter((record) => !records.has(record.value));
-		created.forEach((record) => records.set(record.value, record));
-		if (created.length) groups.push({
-			key: "created",
-			items: created
-		});
-		return {
-			groups,
-			records
-		};
-	}, [
-		options,
-		createdOptions,
-		labelField,
-		valueField,
-		disabledField
-	]);
-	const [retained, setRetained] = useState(() => /* @__PURE__ */ new Map());
-	const selected = useMemo(() => {
-		return selectedKeys.map((key) => normalized.records.get(key) ?? retained.get(key) ?? (fallbackOption ? normalizeOption(fallbackOption(key), labelField, valueField, disabledField) : {
-			value: key,
-			label: String(key),
-			disabled: false
-		}));
-	}, [
-		selectedKeys,
-		normalized,
-		retained,
-		fallbackOption,
-		labelField,
-		valueField,
-		disabledField
-	]);
-	if (retained.size !== selected.length || !selected.every((record) => retained.get(record.value) === record)) setRetained(new Map(selected.map((record) => [record.value, record])));
-	const search = String(inputValue ?? query).trim();
-	const canCreate = (create || creatable) && filterable && !loading && search !== "" && ![...normalized.records.values(), ...selected].some((record) => record.label.trim().toLocaleLowerCase() === search.toLocaleLowerCase());
-	const items = useMemo(() => {
-		if (!canCreate) return normalized.groups;
-		const candidate = {
-			value: search,
-			label: search,
-			disabled: false,
-			createQuery: search
-		};
-		return [...normalized.groups, {
-			key: "create",
-			items: [candidate]
-		}];
-	}, [
-		canCreate,
-		normalized.groups,
-		search
-	]);
-	const css = `r-combobox-select r-combobox-select--${size}${resolvedMode === "dark" ? " r-combobox-select--dark" : ""}`;
-	const tagLimit = maxTagCount === void 0 ? Infinity : Math.max(0, Math.floor(maxTagCount));
-	const inputClassName = ["r-combobox-select__input", typeof inputProps?.className === "string" ? inputProps.className : null].filter(Boolean).join(" ");
-	const phone = usePhoneMedia();
-	const controlClassName = [
-		css,
-		"r-combobox-select__control has-focus-visible:shadow-focus",
-		phone ? "r-combobox-select__control--phone" : null,
-		className
-	].filter(Boolean).join(" ");
-	const positionerClassName = ["r-combobox-select__positioner", typeof positionerProps?.className === "string" ? positionerProps.className : null].filter(Boolean).join(" ");
-	const popupClassName = [
-		css,
-		"r-combobox-select__popup",
-		phone ? "r-combobox-select__popup--anchored" : null,
-		typeof popupProps?.className === "string" ? popupProps.className : null
-	].filter(Boolean).join(" ");
-	const inputRef = ref ?? inputProps?.ref;
-	const inputLabel = ariaLabel ?? inputProps?.["aria-label"];
-	const inputLabelledBy = ariaLabelledBy ?? inputProps?.["aria-labelledby"];
-	const inputDescribedBy = ariaDescribedBy ?? inputProps?.["aria-describedby"];
-	const inputInvalid = ariaInvalid ?? (status === "error" ? true : inputProps?.["aria-invalid"]);
-	const inputDescription = multiple && selected.length ? strings.inputDescription : inputProps?.["aria-description"];
-	const inputPlaceholder = multiple && selected.length ? "" : placeholder;
-	const inputReadOnly = readOnly || !filterable;
-	const controlValue = multiple ? selected : selected[0] ?? null;
-	const handleValueChange = useCallback((next, details) => {
-		const nextRecords = next === null ? [] : Array.isArray(next) ? next : [next];
-		const createRecord = nextRecords.find((record) => record.createQuery !== void 0);
-		let newOption;
-		let resolved = nextRecords;
-		if (createRecord) {
-			const created = onCreate ? onCreate(createRecord.label) : {
-				[labelField]: createRecord.label,
-				[valueField]: createRecord.label
-			};
-			if (created === null) {
-				details.cancel();
-				return;
-			}
-			const record = normalizeOption(created, labelField, valueField, disabledField);
-			if (record.disabled) {
-				details.cancel();
-				return;
-			}
-			newOption = created;
-			const existing = normalized.records.get(record.value) ?? retained.get(record.value);
-			resolved = nextRecords.map((item) => item === createRecord ? existing ?? record : item);
-			resolved = [...new Map(resolved.map((item) => [item.value, item])).values()];
-		}
-		const nextValue = multiple ? resolved.map((record) => record.value) : resolved[0]?.value ?? null;
-		const nextOptions = multiple ? resolved.map((record) => record.option) : resolved[0]?.option ?? null;
-		onValueChange?.(nextValue, nextOptions, details);
-		if (details.isCanceled) return;
-		if (newOption !== void 0) setCreatedOptions((previous) => [...previous, newOption]);
-		setRetained(new Map(resolved.map((record) => [record.value, record])));
-		if (value === void 0) setUncontrolledValue(nextValue);
-		if (details.reason === "clear-press") onClear?.();
-	}, [
-		multiple,
-		onCreate,
-		labelField,
-		valueField,
-		disabledField,
-		normalized.records,
-		retained,
-		onValueChange,
-		value,
-		onClear
-	]);
-	const handleInputValueChange = useCallback((next, details) => {
-		onInputValueChange?.(next, details);
-		if (details.isCanceled) return;
-		const shouldKeepQuery = details.reason === "input-change" || details.reason === "item-press" && !clearFilterAfterSelect;
-		setQuery(shouldKeepQuery ? next : "");
-		if (details.reason === "input-change" || details.reason === "clear-press") onSearch?.(next);
-	}, [
-		onInputValueChange,
-		clearFilterAfterSelect,
-		onSearch
-	]);
-	const filterOptions = useCallback((record, pattern) => {
-		if (record.createQuery !== void 0) return true;
-		if (remote || !filterable || filter === false) return true;
-		return record.option !== void 0 && typeof filter === "function" ? filter(pattern, record.option) : collator.compare(record.label.slice(0, pattern.length), pattern) === 0 || record.label.toLocaleLowerCase().includes(pattern.toLocaleLowerCase());
-	}, [
-		remote,
-		filterable,
-		filter,
-		collator
-	]);
-	const selectedChips = selected.map((record, index) => renderSelectedChip({
-		record,
-		index,
-		tagLimit,
-		strings,
-		renderLabel,
-		renderTag
-	}));
-	const overflowCount = selected.length > tagLimit ? selected.length - tagLimit : 0;
-	const overflowTitle = selected.slice(tagLimit).map((record) => record.label).join(", ");
-	const overflow = overflowCount ? /* @__PURE__ */ jsxs("span", {
-		className: "r-combobox-select__overflow",
-		title: overflowTitle,
-		children: ["+", overflowCount]
-	}) : null;
-	function renderRecord(record) {
-		const itemKey = record.createQuery !== void 0 ? "create" : optionKey(record.value);
-		const content = renderOptionContent({
-			record,
-			selected: selected.some((item) => item.value === record.value),
-			renderLabel,
-			renderOption,
-			renderCreateLabel
-		});
-		return /* @__PURE__ */ jsx(Combobox.Item, {
-			value: record,
-			disabled: record.disabled || loading,
-			className: "r-combobox-select__option",
-			children: content
-		}, itemKey);
-	}
-	function renderGroup(group) {
-		const groupLabel = group.label == null ? null : /* @__PURE__ */ jsx(Combobox.GroupLabel, {
-			className: "r-combobox-select__group-label",
-			children: group.label
-		});
-		return /* @__PURE__ */ jsxs(Combobox.Group, {
-			items: group.items,
-			children: [groupLabel, /* @__PURE__ */ jsx(Combobox.Collection, { children: renderRecord })]
-		}, group.key);
-	}
-	const input = /* @__PURE__ */ jsx(Combobox.Input, {
-		...inputProps,
-		ref: inputRef,
-		id,
-		"data-slot": "combobox-select-input",
-		className: inputClassName,
-		"aria-label": inputLabel,
-		"aria-labelledby": inputLabelledBy,
-		"aria-describedby": inputDescribedBy,
-		"aria-invalid": inputInvalid,
-		"aria-description": inputDescription,
-		placeholder: inputPlaceholder,
-		readOnly: inputReadOnly
-	});
-	const controlContent = multiple ? /* @__PURE__ */ jsxs(Combobox.Chips, {
-		className: "r-combobox-select__chips",
-		"aria-label": strings.selected,
-		children: [
-			selectedChips,
-			overflow,
-			input
-		]
-	}) : input;
-	const loadingMessage = loading ? /* @__PURE__ */ jsx("div", {
-		className: "r-combobox-select__message",
-		children: loadingContent
-	}) : null;
-	const emptyMessage = !loading ? /* @__PURE__ */ jsx("div", {
-		className: "r-combobox-select__message",
-		children: emptyContent
-	}) : null;
-	const loadingIndicator = loading ? /* @__PURE__ */ jsx(LoaderCircle, {
-		className: "r-combobox-select__spinner",
-		"aria-hidden": true
-	}) : null;
-	const clearAction = clearable ? /* @__PURE__ */ jsx(Combobox.Clear, {
-		className: "r-combobox-select__action",
-		"aria-label": strings.clear,
-		children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
-	}) : null;
-	const triggerAction = showArrow ? /* @__PURE__ */ jsx(Combobox.Trigger, {
-		className: "r-combobox-select__action",
-		"aria-label": strings.toggle,
-		children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true })
-	}) : null;
-	const actions = /* @__PURE__ */ jsxs("span", {
-		className: "r-combobox-select__actions",
-		children: [
-			loadingIndicator,
-			clearAction,
-			triggerAction
-		]
-	});
-	const valueChange = handleValueChange;
-	const listHeight = typeof listMaxHeight === "number" ? `${listMaxHeight}px` : listMaxHeight;
-	const fieldRef = useRef(null);
-	const [phoneOpen, setPhoneOpen] = useState(false);
-	const handleOpenChange = useCallback((next, details) => {
-		onOpenChange?.(next, details);
-		if (phone && !details.isCanceled) setPhoneOpen(next);
-	}, [onOpenChange, phone]);
-	useEffect(() => {
-		if (!phone || !phoneOpen) return;
-		const field = fieldRef.current;
-		const visual = field?.ownerDocument.defaultView?.visualViewport;
-		let frame = 0;
-		const check = () => {
-			cancelAnimationFrame(frame);
-			frame = requestAnimationFrame(() => keepRoomBelow(field));
-		};
-		check();
-		visual?.addEventListener("resize", check);
-		return () => {
-			cancelAnimationFrame(frame);
-			visual?.removeEventListener("resize", check);
-		};
-	}, [phone, phoneOpen]);
-	const popupPropsStyle = popupProps?.style;
-	const popupStyle = useMemo(() => {
-		if (listHeight === void 0) return popupPropsStyle;
-		return (state) => ({
-			...typeof popupPropsStyle === "function" ? popupPropsStyle(state) : popupPropsStyle,
-			"--combobox-select-list-max-height": listHeight
-		});
-	}, [listHeight, popupPropsStyle]);
-	return /* @__PURE__ */ jsxs(Combobox.Root, {
-		...rootProps,
-		onOpenChange: handleOpenChange,
-		id,
-		multiple,
-		disabled,
-		readOnly,
-		items,
-		value: controlValue,
-		onValueChange: valueChange,
-		inputValue,
-		defaultInputValue,
-		onInputValueChange: handleInputValueChange,
-		filter: filterOptions,
-		itemToStringLabel,
-		itemToStringValue,
-		isItemEqualToValue,
-		autoHighlight,
-		children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
-			ref: fieldRef,
-			"data-slot": "combobox-select",
-			"data-status": status,
-			className: controlClassName,
-			style,
-			children: [controlContent, actions]
-		}), /* @__PURE__ */ jsx(Combobox.Portal, {
-			...scopedPortalProps,
-			children: /* @__PURE__ */ jsx(ComboboxSelectFramePositioner, {
-				sideOffset: 4,
-				align: "start",
-				...phone ? {
-					side: "bottom",
-					collisionAvoidance: PHONE_LIST_COLLISION
-				} : null,
-				...positionerProps,
-				container: portalProps?.container,
-				className: positionerClassName,
-				children: /* @__PURE__ */ jsxs(Combobox.Popup, {
-					initialFocus: false,
-					finalFocus: false,
-					...popupProps,
-					style: popupStyle,
-					"data-slot": "combobox-select-popup",
-					className: popupClassName,
-					children: [
-						/* @__PURE__ */ jsx(Combobox.Status, { children: loadingMessage }),
-						/* @__PURE__ */ jsx(Combobox.List, {
-							className: "r-combobox-select__list",
-							"aria-busy": loading,
-							children: renderGroup
-						}),
-						/* @__PURE__ */ jsx(Combobox.Empty, { children: emptyMessage })
-					]
-				})
-			})
-		})]
-	});
-}
-//#endregion
-//#region src/components/announcement-dialog/announcement-dialog.tsx
-const announcement = tv({ slots: {
-	content: ["@container/announcement max-w-xl gap-0 overflow-clip p-0"],
-	body: [
-		"min-h-0 max-h-[70dvh] overflow-y-auto pb-5",
-		"[&_[data-slot=announcement-picture]+[data-slot=announcement-text]]:mt-5",
-		"px-5 pt-5"
-	],
-	header: ["flex min-w-0 items-center justify-between gap-3"],
-	label: ["flex min-w-0 items-center gap-2 wrap-break-word", "text-caption text-foreground-muted"],
-	dot: ["shrink-0", "size-2.5 rounded-[2px] border-[1.5px] border-sticker-ink bg-attention-400"],
-	title: ["mt-3 wrap-break-word normal-case", "text-headline font-bold tracking-normal"],
-	picture: ["mt-5 h-44 w-full overflow-hidden border border-line-hairline [&_img]:size-full  [&_img]:object-contain", "rounded-container bg-fill-muted"],
-	text: [
-		"mt-3 min-w-0 wrap-break-word [&_p+p]:mt-3",
-		"[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5 [&_h1]:text-xl [&_h2]:text-lg [&_h3]:text-base [&_h1]:font-bold [&_h2]:font-bold [&_h3]:font-bold [&_pre]:max-w-full [&_pre]:overflow-x-auto",
-		"text-subhead text-foreground-muted"
-	],
-	footer: ["flex shrink-0 flex-wrap items-center justify-between gap-3 border-line-hairline py-4 @max-[28rem]/announcement:flex-col", "border-t-0 px-5 pt-0 pb-5"],
-	action: ["ml-auto h-auto min-h-8 min-w-0 max-w-full py-1 whitespace-normal text-center font-bold @max-[28rem]/announcement:ml-0 @max-[28rem]/announcement:w-full"],
-	secondary: ["min-w-0 max-w-full whitespace-normal @max-[28rem]/announcement:w-full"]
-} });
-function AnnouncementDialogContent({ className, initialFocus, ref, ...props }) {
-	const localRef = useRef(null);
-	const setRef = useCallback((node) => {
-		localRef.current = node;
-		if (typeof ref === "function") return ref(node);
-		if (ref) ref.current = node;
-	}, [ref]);
-	const focusAction = useCallback(() => localRef.current?.querySelector("[data-announcement-action]:not(:disabled)") ?? true, []);
-	const { content } = announcement();
-	return /* @__PURE__ */ jsx(DialogContent, {
-		ref: setRef,
-		initialFocus: initialFocus ?? focusAction,
-		className: content({ className }),
-		...props
-	});
-}
-function AnnouncementDialogBody({ className, ...props }) {
-	const { body } = announcement();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "announcement-body",
-		className: body({ className }),
-		...props
-	});
-}
-function AnnouncementDialogHeader({ className, ...props }) {
-	const { header } = announcement();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "announcement-header",
-		className: header({ className }),
-		...props
-	});
-}
-function AnnouncementDialogLabel({ className, children, ...props }) {
-	const { label, dot } = announcement();
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "announcement-label",
-		className: label({ className }),
-		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: dot()
-		}), children]
-	});
-}
-function AnnouncementDialogTitle({ className, ...props }) {
-	const { title } = announcement();
-	return /* @__PURE__ */ jsx(DialogTitle, {
-		className: title({ className }),
-		...props
-	});
-}
-function AnnouncementDialogPicture({ className, ...props }) {
-	const { picture } = announcement();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "announcement-picture",
-		className: picture({ className }),
-		...props
-	});
-}
-function AnnouncementDialogText({ className, ...props }) {
-	const { text } = announcement();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "announcement-text",
-		className: text({ className }),
-		...props
-	});
-}
-function AnnouncementDialogFooter({ className, ...props }) {
-	const { footer } = announcement();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "announcement-footer",
-		className: footer({ className }),
-		...props
-	});
-}
-function AnnouncementDialogAction({ className, ...props }) {
-	const { action } = announcement();
-	return /* @__PURE__ */ jsx(Button$1, {
-		variant: "accent",
-		"data-announcement-action": true,
-		className: action({ className }),
-		...props
-	});
-}
-function AnnouncementDialogSecondaryAction({ className, ...props }) {
-	const { secondary } = announcement();
-	return /* @__PURE__ */ jsx(Button$1, {
-		variant: "ghost",
-		className: secondary({ className }),
-		...props
-	});
-}
-//#endregion
-//#region src/components/comment/comment.recipe.ts
-const comment = tv({
-	slots: {
-		margin: ["relative min-w-0"],
-		marginItem: [
-			"absolute inset-x-0 top-0",
-			"data-animate:transition-transform data-animate:duration-150 data-animate:ease-out",
-			"motion-reduce:transition-none",
-			"data-active:z-10"
-		],
-		card: [
-			"relative flex min-w-0 flex-col gap-2",
-			"rounded-container border border-line-hairline p-3",
-			"bg-layer-card text-foreground shadow-none outline-none",
-			"data-active:border-[1.5px] data-active:border-line-strong data-active:p-[11.5px] data-active:shadow-float"
-		],
-		cardTrigger: [
-			"absolute -inset-px z-10 cursor-pointer",
-			"rounded-container border-0 bg-transparent p-0",
-			"hover:bg-fill-subtle active:bg-fill-medium",
-			"outline-none focus-visible:shadow-focus"
-		],
-		cardQuote: ["sr-only"],
-		cardMeta: [
-			"flex min-w-0 items-center gap-1",
-			"font-sans text-caption text-foreground-hint",
-			"[&_svg]:size-3.5 [&_svg]:shrink-0",
-			"[button&]:enabled:cursor-pointer [button&]:border-0 [button&]:bg-transparent [button&]:p-0 [button&]:text-start",
-			"[button&]:decoration-[1.5px] [button&]:underline-offset-[3px] [button&]:enabled:hover:underline",
-			"[button&]:rounded-chip [button&]:outline-none [button&]:focus-visible:shadow-focus"
-		],
-		entry: ["flex min-w-0 flex-col gap-1", "[[data-slot=comment-entry]+&]:mt-1"],
-		entryHeader: ["flex min-w-0 items-center gap-1.5", "*:data-[slot=avatar]:me-0.5"],
-		entryAuthor: ["min-w-0 truncate", "text-subhead font-bold text-foreground"],
-		entryTime: ["shrink-0 whitespace-nowrap", "font-mono text-mono-meta tabular-nums text-foreground-hint"],
-		entryBody: [
-			"wrap-break-word select-text",
-			"text-callout text-foreground",
-			"selection:bg-selection"
-		],
-		marker: [
-			"relative inline-flex h-6 shrink-0 items-center gap-1 align-top whitespace-nowrap",
-			"rounded-chip border border-line-hairline py-0 ps-[3px] pe-1.5",
-			"font-mono text-mono-meta font-bold tabular-nums text-foreground",
-			"bg-layer-card [--avatar-group-surface:var(--layer-card)]",
-			"cursor-pointer hover:overlay-medium active:overlay-medium",
-			"data-active:border-[1.5px] data-active:border-line-strong data-active:bg-brand-soft data-active:ps-[2.5px] data-active:pe-[5.5px]",
-			"data-popup-open:border-[1.5px] data-popup-open:border-line-strong data-popup-open:bg-brand-soft data-popup-open:ps-[2.5px] data-popup-open:pe-[5.5px]",
-			"data-active:[--avatar-group-surface:var(--brand-soft)] data-popup-open:[--avatar-group-surface:var(--brand-soft)]",
-			"outline-none focus-visible:shadow-focus",
-			"after:absolute after:-inset-x-1 after:-inset-y-2.5"
-		]
-	},
-	variants: { clamp: { true: { entryBody: ["line-clamp-2"] } } }
-});
-//#endregion
-//#region src/components/comment/comment-card.tsx
-/**
-* The card of one discussion: its comments, a line such as "2 replies", and
-* the reply box when it is open. A `div`; which parts it holds (collapsed or
-* open) is the caller's choice. To open it with a click, add
-* `CommentCardTrigger`.
-*/
-function CommentCard({ className, render, active = false, ...props }) {
-	const { card } = comment();
-	const defaultProps = {
-		"data-slot": "comment-card",
-		"data-active": active ? "" : void 0,
-		"aria-current": active ? "true" : void 0,
-		className: card({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/**
-* A button laid over the whole card, for a collapsed card that opens when it
-* is clicked or chosen with the keyboard. It has no text of its own: give it
-* an `aria-label` ("Comment from Martin").
-*/
-function CommentCardTrigger({ className, render, ...props }) {
-	const { cardTrigger } = comment();
-	const defaultProps = {
-		"data-slot": "comment-card-trigger",
-		type: "button",
-		className: cardTrigger({ className })
-	};
-	return useRender({
-		defaultTagName: "button",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/**
-* A short line about the discussion, in the caller's words: how many replies
-* it has, that it is about the whole document, or that the passage it was on
-* can no longer be found. When choosing it does something (makes this the
-* discussion being read), render it as a button,
-* `render={<button type="button" />}`: it then underlines on hover, as
-* clickable text, and takes the focus ring.
-*/
-function CommentCardMeta({ className, render, ...props }) {
-	const { cardMeta } = comment();
-	const defaultProps = {
-		"data-slot": "comment-card-meta",
-		className: cardMeta({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/**
-* The passage the discussion is about, in the caller's words (usually the
-* quoted text). Hidden on screen, where the card's place beside the
-* highlighted passage says it; give it an `id` and point the
-* `aria-describedby` of `CommentCardTrigger` or `CommentMarker` at it, so a
-* screen reader says which passage a card is about.
-*/
-function CommentCardQuote({ className, render, ...props }) {
-	const { cardQuote } = comment();
-	const defaultProps = {
-		"data-slot": "comment-card-quote",
-		className: cardQuote({ className })
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-//#endregion
-//#region src/components/comment/comment-entry.tsx
-/** One comment in a discussion: its header, then its text. */
-function CommentEntry({ className, render, ...props }) {
-	const { entry } = comment();
-	const defaultProps = {
-		"data-slot": "comment-entry",
-		className: entry({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/** One line: the author's `Avatar` (`size="xs"`), `CommentEntryAuthor`, then `CommentEntryTime`. */
-function CommentEntryHeader({ className, render, ...props }) {
-	const { entryHeader } = comment();
-	const defaultProps = {
-		"data-slot": "comment-entry-header",
-		className: entryHeader({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/** Who wrote the comment, in bold. It truncates; the time after it doesn't. */
-function CommentEntryAuthor({ className, render, ...props }) {
-	const { entryAuthor } = comment();
-	const defaultProps = {
-		"data-slot": "comment-entry-author",
-		className: entryAuthor({ className })
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/**
-* When the comment was written, right after the author. A `<time>`: pass the
-* moment in `dateTime` (ISO 8601).
-*/
-function CommentEntryTime({ className, render, ...props }) {
-	const { entryTime } = comment();
-	const defaultProps = {
-		"data-slot": "comment-entry-time",
-		className: entryTime({ className })
-	};
-	return useRender({
-		defaultTagName: "time",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/** What the comment says. */
-function CommentEntryBody({ className, render, clamp = false, ...props }) {
-	const { entryBody } = comment({ clamp });
-	const defaultProps = {
-		"data-slot": "comment-entry-body",
-		"data-clamp": clamp ? "" : void 0,
-		className: entryBody({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-//#endregion
-//#region src/components/comment/comment-highlight.ts
-/** The highlight of every passage that has comments (`::highlight(raft-comment)` in styles.css). */
-const COMMENT_HIGHLIGHT = "raft-comment";
-/** The highlight of the passage of the open discussion (`::highlight(raft-comment-active)`). */
-const COMMENT_HIGHLIGHT_ACTIVE = "raft-comment-active";
-/**
-* Highlights the passages comments are on with the CSS Custom Highlight API,
-* so the document's DOM is never changed: no `<mark>` is wrapped around its
-* text. Register the ranges of every anchored comment under
-* `COMMENT_HIGHLIGHT`, and the open discussion's under
-* `COMMENT_HIGHLIGHT_ACTIVE`, which paints over it. Passing no ranges clears
-* the name. Returns a function that clears it.
-*
-* Where the browser has no `CSS.highlights`, it does nothing: the passages are
-* not highlighted, and the cards still say where they belong.
-*/
-function setCommentHighlights(name, ranges) {
-	const registry = typeof CSS === "undefined" ? void 0 : CSS.highlights;
-	if (!registry || typeof Highlight === "undefined") return () => {};
-	const list = [...ranges];
-	if (list.length === 0) {
-		registry.delete(name);
-		return () => {};
-	}
-	const highlight = new Highlight(...list);
-	if (name === "raft-comment-active") highlight.priority = 1;
-	registry.set(name, highlight);
-	return () => {
-		if (registry.get(name) === highlight) registry.delete(name);
-	};
-}
-//#endregion
-//#region src/components/comment/comment-margin-layout.ts
-/**
-* Places the cards of a comment margin the way Google Docs does. Cards keep
-* document order (by their anchor's top; equal tops keep the order given) and
-* never overlap: each sits at its anchor, or `gap` below the card before it.
-* The active card is pinned to its anchor instead, the cards above it are
-* pushed up to make room and the cards below it pushed down. Nothing goes
-* above 0: when the cards above the active one don't fit between 0 and its
-* anchor, they stack from 0 and the active card follows them.
-*/
-function resolveCommentMarginLayout(items, { gap = 8, activeId = null } = {}) {
-	const order = items.map((item, index) => ({
-		item,
-		index
-	})).sort((a, b) => a.item.top - b.item.top || a.index - b.index).map(({ item }) => item);
-	const tops = order.map((item) => item.top);
-	const stackDown = (from, floor) => {
-		let next = floor;
-		for (let i = from; i < order.length; i += 1) {
-			tops[i] = Math.max(order[i].top, next);
-			next = tops[i] + order[i].height + gap;
-		}
-	};
-	const pinned = activeId == null ? -1 : order.findIndex((item) => item.id === activeId);
-	if (pinned < 0) stackDown(0, 0);
-	else {
-		tops[pinned] = Math.max(order[pinned].top, 0);
-		for (let i = pinned - 1; i >= 0; i -= 1) tops[i] = Math.min(order[i].top, tops[i + 1] - gap - order[i].height);
-		if (pinned > 0 && tops[0] < 0) stackDown(0, 0);
-		else stackDown(pinned + 1, tops[pinned] + order[pinned].height + gap);
-	}
-	const result = {};
-	let height = 0;
-	order.forEach((item, i) => {
-		result[item.id] = tops[i];
-		height = Math.max(height, tops[i] + item.height);
-	});
-	return {
-		tops: result,
-		height
-	};
-}
-//#endregion
-//#region src/components/comment/comment-margin.tsx
-const CommentMarginContext = createContext(null);
-function useCommentMargin() {
-	const context = use(CommentMarginContext);
-	if (!context) throw new Error("CommentMarginItem must be used within CommentMargin.");
-	return context;
-}
-const heightOf = (element) => element.getBoundingClientRect().height;
-/**
-* The column beside a document that holds its comment cards, each level with
-* the passage it is about. It measures its `CommentMarginItem`s with one
-* `ResizeObserver`, resolves their collisions with
-* `resolveCommentMarginLayout`, and takes the height the lowest card needs.
-* Place it beside the document so that its top is the top the items' `top`
-* is measured from.
-*/
-function CommentMargin({ className, render, style, gap = 8, ...props }) {
-	const { margin } = comment();
-	const [entries, setEntries] = useState(() => /* @__PURE__ */ new Map());
-	const [animate, setAnimate] = useState(false);
-	const observer = useRef(null);
-	const observed = useRef(/* @__PURE__ */ new Map());
-	const patch = useCallback((id, next) => {
-		setEntries((current) => {
-			const previous = current.get(id);
-			if (next === null) {
-				if (!previous) return current;
-				const without = new Map(current);
-				without.delete(id);
-				return without;
-			}
-			if (!previous && next.top === void 0) return current;
-			const merged = {
-				top: 0,
-				height: 0,
-				active: false,
-				...previous,
-				...next
-			};
-			if (previous && previous.top === merged.top && previous.height === merged.height && previous.active === merged.active) return current;
-			const updated = new Map(current);
-			updated.set(id, merged);
-			return updated;
-		});
-	}, []);
-	const place = useCallback((id, placement) => patch(id, placement), [patch]);
-	const observe = useCallback((id, element) => {
-		observer.current ??= new ResizeObserver((records) => {
-			for (const record of records) {
-				const target = observed.current.get(record.target);
-				if (target) patch(target, { height: heightOf(record.target) });
-			}
-		});
-		observed.current.set(element, id);
-		patch(id, { height: heightOf(element) });
-		observer.current.observe(element);
-		return () => {
-			observer.current?.unobserve(element);
-			observed.current.delete(element);
-		};
-	}, [patch]);
-	useEffect(() => () => observer.current?.disconnect(), []);
-	const layout = useMemo(() => {
-		const items = [...entries].map(([id, { top, height }]) => ({
-			id,
-			top,
-			height
-		}));
-		const activeId = [...entries].find(([, entry]) => entry.active)?.[0];
-		return resolveCommentMarginLayout(items, {
-			gap,
-			activeId
-		});
-	}, [entries, gap]);
-	const measured = entries.size > 0;
-	useEffect(() => {
-		if (!measured) return;
-		const frame = requestAnimationFrame(() => setAnimate(true));
-		return () => cancelAnimationFrame(frame);
-	}, [measured]);
-	const context = useMemo(() => ({
-		tops: layout.tops,
-		animate,
-		place,
-		observe
-	}), [
-		layout.tops,
-		animate,
-		place,
-		observe
-	]);
-	const defaultProps = {
-		"data-slot": "comment-margin",
-		className: margin({ className }),
-		style: {
-			minHeight: layout.height,
-			...style
-		}
-	};
-	const element = useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-	return /* @__PURE__ */ jsx(CommentMarginContext, {
-		value: context,
-		children: element
-	});
-}
-/**
-* One card's place in a `CommentMargin`. It sits at `top`, or lower when the
-* card above it is in the way; the active one stays at `top` and the others
-* make room. Items with the same `top` keep the order they were first
-* rendered in. The resolved top is `data-top`, applied as a `translateY`.
-*/
-function CommentMarginItem({ className, render, style, top, active = false, ...props }) {
-	const { marginItem } = comment();
-	const { tops, animate, place, observe } = useCommentMargin();
-	const id = useId();
-	const [element, setElement] = useState(null);
-	useLayoutEffect(() => {
-		place(id, {
-			top,
-			active
-		});
-	}, [
-		place,
-		id,
-		top,
-		active
-	]);
-	useLayoutEffect(() => element ? observe(id, element) : void 0, [
-		observe,
-		id,
-		element
-	]);
-	useLayoutEffect(() => () => place(id, null), [place, id]);
-	const resolved = tops[id] ?? Math.max(top, 0);
-	const defaultProps = {
-		"data-slot": "comment-margin-item",
-		"data-top": String(resolved),
-		"data-active": active ? "" : void 0,
-		"data-animate": animate ? "" : void 0,
-		className: marginItem({ className }),
-		style: {
-			...style,
-			transform: `translateY(${resolved}px)`
-		}
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		ref: setElement,
-		props: mergeProps(defaultProps, props)
-	});
-}
-//#endregion
-//#region src/components/comment/comment-marker.tsx
-/**
-* Where there is no room for a margin: a small button beside a passage that
-* has comments, with the authors' avatars (an `AvatarGroup` of up to 3
-* `size="2xs"` avatars) and the count. It opens the discussion, in a bottom
-* sheet. Give it an `aria-label` that starts with the count ("2 comments").
-*/
-function CommentMarker({ className, render, nativeButton, active = false, ...props }) {
-	const { marker } = comment();
-	return /* @__PURE__ */ jsx(Button, {
-		...props,
-		render,
-		nativeButton: nativeButton ?? defaultNativeButton(render),
-		"data-slot": "comment-marker",
-		"data-active": active ? "" : void 0,
-		className: marker({ className })
-	});
-}
-//#endregion
-//#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
-//#region src/components/comment/use-comment-margin-fits.ts
-function subscribeDesktop(onChange) {
-	if (typeof window === "undefined") return () => void 0;
-	const media = window.matchMedia(DESKTOP_MEDIA_QUERY);
-	media.addEventListener("change", onChange);
-	return () => media.removeEventListener("change", onChange);
-}
-const getDesktop = () => typeof window !== "undefined" && window.matchMedia("(width >= 48rem) and (pointer: fine)").matches;
-/**
-* Whether a viewer has room for a comment margin beside its document: true
-* only on a desktop (from 768px with a mouse or a trackpad, the query the
-* desktop metrics use) and while `element`, the viewer that holds the
-* document and the margin, is at least `minWidth` wide. Otherwise show
-* `CommentMarker`s and open discussions in a bottom sheet. Cards and markers
-* are different trees, so this is measured in JavaScript (a
-* `ResizeObserver` on the element), not decided by a container query.
-*/
-function useCommentMarginFits(element, { minWidth = 784 } = {}) {
-	const desktop = useSyncExternalStore(subscribeDesktop, getDesktop, () => false);
-	const [width, setWidth] = useState(0);
-	useLayoutEffect(() => {
-		if (!element) return;
-		const measure = () => setWidth(element.getBoundingClientRect().width);
-		measure();
-		const observer = new ResizeObserver(measure);
-		observer.observe(element);
-		return () => observer.disconnect();
-	}, [element]);
-	return desktop && element !== null && width >= minWidth;
-}
-//#endregion
-//#region src/components/mode-bar/mode-bar.tsx
-/**
-* A dark strip across a panel, under its head, while the panel is in a mode
-* people entered and leave on purpose (commenting on an Artifact). It is the
-* HUD surface, not an intent tint: nothing is wrong, so it is not a notice;
-* the dark fill says "the panel works differently now" until the mode ends.
-* Its edges and height for one line are PanelNotice's, so the two strips are
-* one size under a head.
-*/
-const modeBar = tv({ slots: {
-	root: [
-		"flex shrink-0 items-start",
-		"min-h-10 gap-4 px-5 py-2.5 max-md:px-4",
-		"bg-layer-hud font-sans text-callout text-foreground-on-hud"
-	],
-	content: ["min-w-0 flex-1 wrap-break-word"],
-	title: ["font-bold"],
-	description: ["text-foreground-on-hud-muted"],
-	action: [
-		"relative inline-flex shrink-0 items-center whitespace-nowrap select-none",
-		"border-0 bg-transparent p-0",
-		...hudTextAction,
-		"disabled:pointer-events-none disabled:opacity-40"
-	]
-} });
-/**
-* The strip. Put `ModeBarContent` in it, then the `ModeBarAction` that ends
-* the mode.
-*/
-function ModeBar({ className, render, ...props }) {
-	const { root } = modeBar();
-	const defaultProps = {
-		"data-slot": "mode-bar",
-		className: root({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/**
-* The words: `ModeBarTitle`, then `ModeBarDescription`, on one line that
-* wraps. A polite live region, so a change to the title (a draft count) is
-* read out; the action stays outside it.
-*/
-function ModeBarContent({ className, render, ...props }) {
-	const { content } = modeBar();
-	const defaultProps = {
-		"data-slot": "mode-bar-content",
-		role: "status",
-		className: content({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/** The mode and its state, bold in the HUD ink: "Commenting · 1 draft." */
-function ModeBarTitle({ className, render, ...props }) {
-	const { title } = modeBar();
-	const defaultProps = {
-		"data-slot": "mode-bar-title",
-		className: title({ className })
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/**
-* What to do in the mode, in the muted HUD ink, after the title on the same
-* line. It brings the space before it, so the two read and copy as one
-* sentence.
-*/
-function ModeBarDescription({ className, render, children, ...props }) {
-	const { description } = modeBar();
-	const defaultProps = {
-		"data-slot": "mode-bar-description",
-		className: description({ className }),
-		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", children] })
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/**
-* The text action that ends the mode (Done), at the end of the first line. A
-* real `button`; on the HUD it is a text action, like a toast's, never a
-* Button.
-*/
-function ModeBarAction({ className, render, ...props }) {
-	const { action } = modeBar();
-	const defaultProps = {
-		"data-slot": "mode-bar-action",
-		type: "button",
-		className: action({ className })
-	};
-	return useRender({
-		defaultTagName: "button",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-//#endregion
-//#region src/components/drag/drag-lists.tsx
-/** dnd-kit's vertical strategy, except that nothing moves while the hand is outside the list. */
-const dragListStrategy = (args) => args.overIndex < 0 ? null : verticalListSortingStrategy(args);
-/**
-* Items in one or more lists that can be reordered and moved between lists
-* (a sidebar's sections, a board's columns): the lists half of the drag
-* model (design/patterns/drag-and-drop.md#where-it-will-land). While dragging,
-* the item stands at its landing spot (its own slot is the place; siblings
-* slide apart), a list can refuse it, and every step is announced by name.
-* The keyboard is measured from the item's real place, so the arrows never
-* skip one after a move into another list.
-*
-* Spread `handlers`, `collisionDetection` and `accessibility` on the
-* `DndContext`, pass `coordinateGetter` to `useDragSensors`, and render
-* `DragRemeasure version={items}` inside it.
-*/
-function useDragLists({ lists, items, onItemsChange, listName, itemName, refuse, collisionDetection, announce, messages }) {
-	const say = useMemo(() => dragMessages(messages), [messages]);
-	const across = useDragAcrossLists(collisionDetection);
-	const itemsRef = useRef(items);
-	useLayoutEffect(() => {
-		itemsRef.current = items;
-	}, [items]);
-	const [activeId, setActiveId] = useState(null);
-	const [originList, setOriginList] = useState(null);
-	const [refusal, setRefusalState] = useState(null);
-	const refusalRef = useRef(refusal);
-	const setRefusal = (next) => {
-		refusalRef.current = next;
-		setRefusalState(next);
-	};
-	const origin = useRef(null);
-	const inserted = useRef(null);
-	const listOf = useCallback((state, id) => lists.includes(id) ? id : lists.find((list) => state[list].includes(String(id))) ?? null, [lists]);
-	const isList = (id) => lists.includes(id);
-	const where = (state, id) => {
-		const list = listOf(state, id);
-		return {
-			place: listName(list),
-			position: state[list].indexOf(id) + 1,
-			count: state[list].length
-		};
-	};
-	const update = (next) => {
-		itemsRef.current = next;
-		onItemsChange(next);
-	};
-	/** Still home: in its own list, at its own index (pass the sortable's projected index). */
-	const isHome = useCallback((id, index) => {
-		const start = origin.current;
-		return start != null && listOf(itemsRef.current, id) === start.list && index === start.index;
-	}, [listOf]);
-	const onDragStart = ({ active, activatorEvent }) => {
-		const id = String(active.id);
-		const list = listOf(items, id);
-		if (!list) return;
-		origin.current = {
-			list,
-			index: items[list].indexOf(id),
-			snapshot: items,
-			keyboard: typeof KeyboardEvent !== "undefined" && activatorEvent instanceof KeyboardEvent
-		};
-		inserted.current = null;
-		setActiveId(id);
-		setOriginList(list);
-		announce(say.pickedUp({
-			name: itemName(id),
-			...where(items, id)
-		}));
-	};
-	const onDragOver = ({ active, over }) => {
-		const start = origin.current;
-		if (!start) return;
-		const id = String(active.id);
-		if (!over) {
-			if (refusalRef.current) setRefusal(null);
-			announce(say.notOver({ name: itemName(id) }));
-			return;
-		}
-		const current = itemsRef.current;
-		const from = listOf(current, id);
-		const to = listOf(current, over.id);
-		if (!from || !to) return;
-		const reason = refuse?.(start.list, to, id) ?? null;
-		if (reason) {
-			setRefusal({
-				list: to,
-				reason
-			});
-			update(start.snapshot);
-			inserted.current = null;
-			announce(say.refused({
-				name: itemName(id),
-				place: listName(to),
-				reason
-			}));
-			return;
-		}
-		if (refusalRef.current) setRefusal(null);
-		if (from !== to) {
-			const fromList = current[from].filter((item) => item !== id);
-			const toList = [...current[to]];
-			let at = toList.indexOf(String(over.id));
-			if (at < 0) at = toList.length;
-			else if (start.keyboard) {
-				if (lists.indexOf(from) > lists.indexOf(to)) at += 1;
-			} else {
-				const rect = active.rect.current.translated;
-				if (rect && rect.top + rect.height / 2 > over.rect.top + over.rect.height / 2) at += 1;
-			}
-			toList.splice(at, 0, id);
-			const next = {
-				...current,
-				[from]: fromList,
-				[to]: toList
-			};
-			across.moved(start.keyboard);
-			update(next);
-			inserted.current = isList(over.id) ? null : over.id;
-			announce(say.over({
-				name: itemName(id),
-				...where(next, id)
-			}));
-			return;
-		}
-		if (over.id === id) {
-			inserted.current = null;
-			return;
-		}
-		const list = current[to];
-		if (inserted.current === over.id) {
-			announce(say.over({
-				name: itemName(id),
-				...where(current, id)
-			}));
-			return;
-		}
-		inserted.current = null;
-		const overIndex = isList(over.id) ? list.length - 1 : list.indexOf(String(over.id));
-		announce(say.over({
-			name: itemName(id),
-			place: listName(to),
-			position: overIndex + 1,
-			count: list.length
-		}));
-	};
-	const finish = (dropped, overId) => {
-		const start = origin.current;
-		const id = activeId;
-		const refused = refusalRef.current;
-		origin.current = null;
-		across.reset();
-		setActiveId(null);
-		setOriginList(null);
-		setRefusal(null);
-		if (!start || !id) return;
-		if (!dropped || overId == null || refused) {
-			update(start.snapshot);
-			const home = {
-				name: itemName(id),
-				...where(start.snapshot, id)
-			};
-			announce(refused && dropped ? say.refusedDrop({
-				...home,
-				reason: refused.reason
-			}) : say.cancelled(home));
-			return;
-		}
-		const current = itemsRef.current;
-		const list = listOf(current, id);
-		const ids = current[list];
-		const fromIndex = ids.indexOf(id);
-		const toIndex = inserted.current === overId ? fromIndex : isList(overId) ? ids.length - 1 : ids.indexOf(String(overId));
-		const next = toIndex >= 0 && toIndex !== fromIndex ? {
-			...current,
-			[list]: arrayMove([...ids], fromIndex, toIndex)
-		} : current;
-		update(next);
-		announce(say.dropped({
-			name: itemName(id),
-			...where(next, id)
-		}));
-	};
-	const accessibility = useMemo(() => ({
-		announcements: SILENT_DRAG_ANNOUNCEMENTS,
-		screenReaderInstructions: dragInstructions(messages)
-	}), [messages]);
-	return {
-		/** The dragged item's id, or null. */
-		activeId,
-		/** The list that refuses the item under the hand, and why. */
-		refusal,
-		/** The list the drag started in, while dragging. */
-		originList,
-		isHome,
-		listOf,
-		collisionDetection: across.collisionDetection,
-		coordinateGetter: across.coordinateGetter,
-		accessibility,
-		handlers: {
-			onDragStart,
-			onDragOver,
-			onDragEnd: ({ over }) => finish(true, over?.id ?? null),
-			onDragCancel: () => finish(false, null)
-		}
-	};
-}
-/**
-* Wraps each item's content in a list. The dragged item's own node is at 40%
-* while it is still home, and the dashed place (its size, its radius) once it
-* stands anywhere else. Every other item renders as it is: the wrapper stays
-* the same, so the item keeps focus when its drag starts.
-*/
-function DraggedSlot({ dragging = false, home, radius, className, children }) {
-	const place = dragging && !home;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "drag-slot",
-		className: "relative",
-		children: [/* @__PURE__ */ jsx("div", {
-			"data-drag-origin": dragging && home ? "" : void 0,
-			className: place ? "invisible" : void 0,
-			children
-		}), place ? /* @__PURE__ */ jsx(DropPlaceholder, { className: cn("absolute inset-0", radius, className) }) : null]
-	});
-}
-/** The last announcement, for a polite live region (`DragLiveRegion`). Repeats are dropped. */
-function useDragAnnouncer() {
-	const [message, setMessage] = useState("");
-	const last = useRef("");
-	return {
-		message,
-		announce: useCallback((text) => {
-			if (text === last.current) return;
-			last.current = text;
-			setMessage(text);
-		}, [])
-	};
-}
-/** A polite, visually hidden live region for drag announcements. */
-function DragLiveRegion({ message }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: "sr-only",
-		role: "status",
-		"aria-live": "polite",
-		"aria-atomic": "true",
-		children: message
-	});
-}
-//#endregion
-//#region src/components/ellipsis/ellipsis.tsx
-const ellipsis = tv({
-	slots: {
-		root: ["group/ellipsis min-w-0 max-w-full"],
-		text: ["min-w-0"],
-		content: [],
-		spacer: ["float-end h-[calc(100%-1lh)] w-0", "data-hidden:hidden group-data-measuring/ellipsis:hidden"],
-		after: ["data-hidden:hidden group-data-measuring/ellipsis:hidden"]
-	},
-	variants: {
-		multiline: {
-			true: {
-				root: ["flex"],
-				text: ["flex-1", "wrap-break-word"],
-				after: ["float-end clear-end ps-1"]
-			},
-			false: {
-				root: ["inline-flex items-baseline gap-x-1 align-bottom"],
-				after: ["shrink-0"]
-			}
-		},
-		expanded: {
-			true: {},
-			false: {}
-		},
-		clickable: {
-			true: { text: ["cursor-pointer"] },
-			false: {}
-		}
-	},
-	compoundVariants: [
-		{
-			multiline: false,
-			expanded: false,
-			class: { text: ["truncate", "print:overflow-visible print:whitespace-normal"] }
-		},
-		{
-			multiline: false,
-			expanded: true,
-			class: { text: ["wrap-anywhere whitespace-normal"] }
-		},
-		{
-			multiline: true,
-			expanded: false,
-			class: { text: ["line-clamp-(--ellipsis-lines)", "print:line-clamp-none"] }
-		},
-		{
-			multiline: true,
-			expanded: true,
-			class: { text: ["line-clamp-none"] }
-		}
-	]
-});
-const EllipsisContext = createContext(null);
-const INTERACTIVE = "a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable='false']), [role='button'], [role='link']";
-const TOUCH_MEDIA_QUERY = "(hover: none), (pointer: coarse)";
-function isTouchScreen() {
-	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(TOUCH_MEDIA_QUERY).matches;
-}
-function contains(ref, target) {
-	return target instanceof Node && ref.current?.contains(target) === true;
-}
-function hasSelection(within) {
-	const selection = within.ownerDocument.defaultView?.getSelection();
-	return !!selection && !selection.isCollapsed && selection.anchorNode != null && within.contains(selection.anchorNode);
-}
-function useExpanded(expandedProp, defaultExpanded, onExpandedChange) {
-	const [expandedState, setExpandedState] = useState(defaultExpanded);
-	const expanded = expandedProp ?? expandedState;
-	return [expanded, useCallback(() => {
-		const next = !expanded;
-		if (expandedProp === void 0) setExpandedState(next);
-		onExpandedChange?.(next);
-	}, [
-		expanded,
-		expandedProp,
-		onExpandedChange
-	])];
-}
-/**
-* Registers the text with the shared measurer (lib/truncation.ts) and keeps
-* its answer: whether the text, alone, is cut, and whether it has a control
-* inside. While it is expanded the last collapsed answer is kept, so the
-* text and its control stay what they were until it collapses and is
-* measured again. `layout` names what remounts or reclamps the text.
-*/
-function useTruncation(expanded, layout, onNotTruncated) {
-	const rootRef = useRef(null);
-	const textRef = useRef(null);
-	const contentRef = useRef(null);
-	const afterRef = useRef(null);
-	const setTextRef = useCallback((node) => {
-		textRef.current = node;
-	}, []);
-	const [truncation, setTruncation] = useState(void 0);
-	const [interactive, setInteractive] = useState(false);
-	const expandedRef = useRef(expanded);
-	const targetRef = useRef(null);
-	const commit = useCallback((next) => {
-		setInteractive(contentRef.current?.querySelector(INTERACTIVE) != null);
-		if (expandedRef.current) return;
-		setTruncation(next);
-		if (next !== true) onNotTruncated();
-	}, [onNotTruncated]);
-	useLayoutEffect(() => {
-		expandedRef.current = expanded;
-		const root = rootRef.current;
-		const text = textRef.current;
-		const content = contentRef.current;
-		if (!root || !text || !content) return void 0;
-		const target = {
-			observe: () => [text, afterRef.current],
-			watch: () => content,
-			isolate: () => {
-				root.setAttribute("data-measuring", "");
-				return () => root.removeAttribute("data-measuring");
-			},
-			read: () => measureContent(text, content),
-			commit
-		};
-		targetRef.current = target;
-		return observeTruncation(target);
-	}, [
-		commit,
-		expanded,
-		layout
-	]);
-	return {
-		rootRef,
-		textRef,
-		setTextRef,
-		contentRef,
-		afterRef,
-		truncation,
-		interactive,
-		measureNow: useCallback(() => {
-			const target = targetRef.current;
-			if (!target) return void 0;
-			const next = readNow(target);
-			commit(next);
-			return next;
-		}, [commit])
-	};
-}
-/** The tooltip's `onOpenChange`: it opens only on a text measured as cut, now. */
-function useOpenWhenTruncated(setOpen, expanded, afterRef, measureNow) {
-	return useCallback((next, details) => {
-		if (!next) {
-			setOpen(false);
-			return;
-		}
-		if (isTouchScreen() || expanded) return;
-		if (contains(afterRef, details.event?.target)) return;
-		if (measureNow() === true) setOpen(true);
-	}, [
-		afterRef,
-		expanded,
-		measureNow,
-		setOpen
-	]);
-}
-/**
-* Makes the text the button that expands and collapses it, while
-* `clickable`. It stays one while expanded, `aria-expanded="true"`, so focus
-* stays on it and it collapses again the same way.
-*/
-function useExpandOnClick(clickable, expanded, toggle, textRef) {
-	const onClick = useCallback(() => {
-		if (!clickable) return;
-		if (textRef.current && hasSelection(textRef.current)) return;
-		toggle();
-	}, [
-		clickable,
-		textRef,
-		toggle
-	]);
-	const onKeyDown = useCallback((event) => {
-		if (!clickable || event.target !== event.currentTarget) return;
-		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault();
-			toggle();
-		}
-	}, [clickable, toggle]);
-	if (!clickable) return {};
-	return {
-		role: "button",
-		tabIndex: 0,
-		"aria-expanded": expanded,
-		onClick,
-		onKeyDown
-	};
-}
-function useRootStyle(style, lines) {
-	return useMemo(() => lines > 1 ? {
-		...style,
-		["--ellipsis-lines"]: String(lines)
-	} : style, [style, lines]);
-}
-function Ellipsis({ children, lines = 1, tooltip = true, after, expanded: expandedProp, defaultExpanded = false, onExpandedChange, expandOnClick = false, className, style, ...props }) {
-	const textId = useId();
-	const [open, setOpen] = useState(false);
-	const closeTooltip = useCallback(() => setOpen(false), []);
-	const [expanded, toggle] = useExpanded(expandedProp, defaultExpanded, onExpandedChange);
-	const multiline = lines > 1;
-	const hasTooltip = tooltip !== false && tooltip != null;
-	const hasAfter = after != null;
-	const measured = useTruncation(expanded, `${lines} ${hasAfter} ${hasTooltip}`, closeTooltip);
-	const { rootRef, textRef, setTextRef, contentRef, afterRef, truncation } = measured;
-	const handleOpenChange = useOpenWhenTruncated(setOpen, expanded, afterRef, measured.measureNow);
-	const truncated = truncation === true && !expanded;
-	const clickable = expandOnClick && !hasAfter && !measured.interactive && (truncation === true || expanded);
-	const afterNode = typeof after === "function" ? after({
-		truncated,
-		expanded,
-		toggle
-	}) : after;
-	const afterHidden = !truncated && !expanded;
-	const slots = ellipsis({
-		multiline,
-		expanded,
-		clickable
-	});
-	const context = useMemo(() => ({
-		expanded,
-		toggle,
-		textId
-	}), [
-		expanded,
-		toggle,
-		textId
-	]);
-	const rootStyle = useRootStyle(style, lines);
-	const clickProps = useExpandOnClick(clickable, expanded, toggle, textRef);
-	const afterElement = hasAfter ? /* @__PURE__ */ jsx("span", {
-		ref: afterRef,
-		"data-slot": "ellipsis-after",
-		"data-hidden": afterHidden ? "" : void 0,
-		inert: afterHidden,
-		className: slots.after(),
-		onPointerEnter: closeTooltip,
-		children: afterNode
-	}) : null;
-	const floatingAfter = multiline && hasAfter;
-	const textChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		floatingAfter && /* @__PURE__ */ jsx("span", {
-			"aria-hidden": true,
-			"data-slot": "ellipsis-spacer",
-			"data-hidden": afterHidden ? "" : void 0,
-			className: slots.spacer()
-		}),
-		floatingAfter && afterElement,
-		/* @__PURE__ */ jsx("span", {
-			ref: contentRef,
-			"data-slot": "ellipsis-content",
-			className: slots.content(),
-			children
-		})
-	] });
-	const textProps = {
-		id: textId,
-		"data-slot": "ellipsis-text",
-		"data-truncated": truncated ? "" : void 0,
-		className: slots.text(),
-		...clickProps
-	};
-	const text = hasTooltip ? /* @__PURE__ */ jsxs(Tooltip, {
-		open: open && truncated,
-		onOpenChange: handleOpenChange,
-		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-			ref: setTextRef,
-			render: /* @__PURE__ */ jsx("span", {}),
-			...textProps,
-			className: slots.text({ class: "select-auto" }),
-			children: textChildren
-		}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip === true ? children : tooltip })]
-	}) : /* @__PURE__ */ jsx("span", {
-		ref: setTextRef,
-		...textProps,
-		children: textChildren
-	});
-	return /* @__PURE__ */ jsx(EllipsisContext.Provider, {
-		value: context,
-		children: /* @__PURE__ */ jsxs("span", {
-			ref: rootRef,
-			"data-slot": "ellipsis",
-			className: slots.root({ className }),
-			style: rootStyle,
-			...props,
-			children: [text, !multiline ? afterElement : null]
-		})
-	});
-}
-/**
-* The control that expands an Ellipsis and collapses it again, for its
-* `after`. A real button, with `aria-expanded` and `aria-controls` pointing
-* at the text. The label is the caller's: "Show More" / "Show Less".
-*/
-function EllipsisToggle({ onClick, ...props }) {
-	const context = useContext(EllipsisContext);
-	if (!context) throw new Error("EllipsisToggle must be inside an Ellipsis `after`.");
-	const { expanded, toggle, textId } = context;
-	const handleClick = useCallback((event) => {
-		onClick?.(event);
-		if (!event.defaultPrevented) toggle();
-	}, [onClick, toggle]);
-	return /* @__PURE__ */ jsx(TextLink, {
-		"aria-expanded": expanded,
-		"aria-controls": textId,
-		onClick: handleClick,
-		...props
-	});
-}
-//#endregion
-//#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
-//#region src/components/inbox-item/inbox-item-leading-badge.tsx
-/**
-* A small badge in the bottom-right corner of `InboxItemLeading`, the corner a
-* presence light takes: on a thread row, the thread mark, on the channel's
-* `IconTile` or on the direct message's `Avatar` alike. Put it inside
-* `InboxItemLeading`, after the tile or avatar, with one icon as its child;
-* leave the avatar's `AvatarBadge` out, since the corner holds one mark. It
-* is hidden from assistive technology unless given a `role`.
-*/
-function InboxItemLeadingBadge({ className, render, ...props }) {
-	const { itemLeadingBadge } = inboxItem();
-	const defaultProps = {
-		"data-slot": "inbox-item-leading-badge",
-		"aria-hidden": props.role ? void 0 : true,
-		className: itemLeadingBadge({ className })
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-//#endregion
-//#region src/components/inbox-item/inbox-item-skeleton.recipe.ts
-const inboxItemSkeleton = tv({ slots: {
-	list: ["flex min-w-0 flex-col gap-0.5"],
-	row: [
-		"[--inbox-item-skeleton-context:5rem] [--inbox-item-skeleton-title:60%] [--inbox-item-skeleton-body:80%]",
-		"nth-[3n+2]:[--inbox-item-skeleton-context:4rem] nth-[3n+2]:[--inbox-item-skeleton-title:45%] nth-[3n+2]:[--inbox-item-skeleton-body:70%]",
-		"nth-[3n]:[--inbox-item-skeleton-context:6rem] nth-[3n]:[--inbox-item-skeleton-title:55%] nth-[3n]:[--inbox-item-skeleton-body:75%]"
-	],
-	leading: ["size-[35px]"],
-	line: ["min-w-0 flex-1"],
-	title: ["pl-0"],
-	bar: ["inline-block h-[0.75em] max-w-full align-middle"],
-	contextBar: ["w-(--inbox-item-skeleton-context)"],
-	titleBar: ["w-(--inbox-item-skeleton-title)"],
-	bodyBar: ["w-(--inbox-item-skeleton-body)"],
-	timestampBar: ["w-9"]
-} });
-//#endregion
-//#region src/components/inbox-item/inbox-item-skeleton.tsx
-/**
-* A placeholder for one `InboxItem` while the list loads. It is an
-* `InboxItem` itself, with the same parts as the loaded row (an optional
-* leading block, the context line, the title, the excerpt, the timestamp),
-* each holding a bar instead of text. The padding, the divider and every
-* line's height are the loaded row's, so nothing moves when the content
-* arrives. Match `density`, `leading` and `context` to the rows it stands for.
-* Hidden from assistive technology: mark the region that stays while the
-* list loads `aria-busy`.
-*/
-function InboxItemSkeleton({ density, leading = false, context = false, ...props }) {
-	const slots = inboxItemSkeleton();
-	const bar = (width) => /* @__PURE__ */ jsx(Skeleton, {
-		variant: "line",
-		className: slots.bar({ className: width })
-	});
-	return /* @__PURE__ */ jsxs(InboxItem, {
-		"aria-hidden": true,
-		"data-skeleton": "",
-		density,
-		disabled: true,
-		...props,
-		className: slots.row({ className: props.className }),
-		children: [
-			leading ? /* @__PURE__ */ jsx(InboxItemLeading, { children: /* @__PURE__ */ jsx(Skeleton, { className: slots.leading() }) }) : null,
-			/* @__PURE__ */ jsxs(InboxItemContent, { children: [
-				context ? /* @__PURE__ */ jsx(InboxItemContext, { children: /* @__PURE__ */ jsx("span", {
-					className: slots.line(),
-					children: bar(slots.contextBar())
-				}) }) : null,
-				/* @__PURE__ */ jsx(InboxItemHeading, { children: /* @__PURE__ */ jsx(InboxItemTitle, {
-					className: slots.title(),
-					children: bar(slots.titleBar())
-				}) }),
-				/* @__PURE__ */ jsx(InboxItemBody, { children: bar(slots.bodyBar()) })
-			] }),
-			/* @__PURE__ */ jsx(InboxItemTrailing, { children: /* @__PURE__ */ jsx(InboxItemTimestamp, { children: bar(slots.timestampBar()) }) })
-		]
-	});
-}
-/**
-* The list of `InboxItemSkeleton` rows that stands in for a list of
-* `InboxItem` rows while it loads, with nothing between or around the rows
-* that the loaded list doesn't have (no border, no card): only the list's
-* 2px gap, which the loaded list has too (design/patterns/lists.md). Renders
-* `count` rows of the given shape, or its children, once `delay` (1 second by
-* default) has passed. It isn't `aria-busy` itself: it goes away when the
-* content arrives, so mark the region that stays, such as the list's panel or
-* viewport, `aria-busy` while it loads.
-*/
-function InboxItemSkeletonList({ count = 6, delay = 1e3, density, leading, context, children, className, render, ...props }) {
-	const { list } = inboxItemSkeleton();
-	const shown = useDelayPassed(delay);
-	const defaultProps = {
-		"data-slot": "inbox-item-skeleton-list",
-		"data-waiting": shown ? void 0 : "",
-		className: list({ className }),
-		children: shown ? children ?? Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(InboxItemSkeleton, {
-			density,
-			leading,
-			context
-		}, index)) : null
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/** Whether `delay` milliseconds have passed since mount; at once for `0`. */
-function useDelayPassed(delay) {
-	const [passed, setPassed] = useState(false);
-	useEffect(() => {
-		if (delay <= 0) return;
-		const timer = setTimeout(() => setPassed(true), delay);
-		return () => clearTimeout(timer);
-	}, [delay]);
-	return passed || delay <= 0;
-}
-//#endregion
-//#region src/components/list-row/list-row-skeleton.tsx
-const listRowSkeleton = tv({ slots: {
-	row: [
-		"[--list-row-skeleton-title:45%] [--list-row-skeleton-description:75%]",
-		"nth-[3n+2]:[--list-row-skeleton-title:35%] nth-[3n+2]:[--list-row-skeleton-description:60%]",
-		"nth-[3n]:[--list-row-skeleton-title:55%] nth-[3n]:[--list-row-skeleton-description:70%]"
-	],
-	avatar: ["size-[35px] shrink-0"],
-	icon: ["size-5 shrink-0"],
-	bar: ["inline-block h-[0.75em] max-w-full align-middle"],
-	titleBar: ["w-(--list-row-skeleton-title)"],
-	descriptionBar: ["w-(--list-row-skeleton-description)"],
-	metaBar: ["w-9"]
-} });
-/**
-* A placeholder for one `ListRow` while the list loads. It is a display-only
-* `ListRow` of the same `variant`, with a bar in its title, its time and its
-* description, so it is the loaded row's size and its divider sits in the
-* same place. Hidden from assistive technology: mark the region that stays
-* while the list loads, such as its `ListRowGroup`, `aria-busy`.
-*/
-function ListRowSkeleton({ variant = "default", leading = variant === "default", description = variant === "default", className, ...props }) {
-	const slots = listRowSkeleton();
-	const bar = (width) => /* @__PURE__ */ jsx(Skeleton, {
-		variant: "line",
-		className: slots.bar({ className: width })
-	});
-	return /* @__PURE__ */ jsxs(ListRow, {
-		"aria-hidden": true,
-		"data-skeleton": "",
-		interactive: false,
-		variant,
-		...props,
-		className: slots.row({ className }),
-		children: [leading ? /* @__PURE__ */ jsx(Skeleton, { className: variant === "default" ? slots.avatar() : slots.icon() }) : null, /* @__PURE__ */ jsxs(ListRowBody, { children: [/* @__PURE__ */ jsxs(ListRowTop, { children: [/* @__PURE__ */ jsx(ListRowTitle, { children: bar(slots.titleBar()) }), variant === "default" ? /* @__PURE__ */ jsx(ListRowMeta, { children: bar(slots.metaBar()) }) : null] }), description ? /* @__PURE__ */ jsx(ListRowBottom, { children: /* @__PURE__ */ jsx(ListRowDescription, { children: bar(slots.descriptionBar()) }) }) : null] })]
-	});
-}
-//#endregion
-//#region src/components/meter/meter.tsx
-const meter = tv({
-	slots: {
-		root: [
-			"group/meter grid w-full min-w-0 gap-1.5",
-			"[--meter-indicator:var(--info)]",
-			"[--meter-value:var(--foreground-muted)]",
-			"font-sans"
-		],
-		header: ["flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5"],
-		label: ["min-w-0 truncate", "text-footnote font-semibold text-foreground"],
-		value: ["shrink-0 text-right tabular-nums", "text-footnote text-(--meter-value)"],
-		track: [
-			"relative w-full overflow-hidden bg-(--fill-muted)",
-			"h-2 group-data-[size=sm]/meter:h-1.5",
-			"rounded-sticker"
-		],
-		indicator: [
-			"block h-full bg-(--meter-indicator)",
-			"transition-[width,background-color] duration-200 ease-out",
-			"rounded-[inherit] inset-ring-[1.5px] inset-ring-sticker-ink"
-		]
-	},
-	variants: {
-		warning: { true: { root: ["[--meter-indicator:var(--warning)]", "[--meter-value:var(--warning-strong)]"] } },
-		size: {
-			sm: {},
-			md: {}
-		}
-	},
-	defaultVariants: {
-		warning: false,
-		size: "md"
-	}
-});
-const MeterTextContext = createContext("");
-function clamp(value, min, max) {
-	return Math.min(max, Math.max(min, Number.isNaN(value) ? min : value));
-}
-/**
-* How much of an allowance is used, such as a usage limit that resets. The bar
-* fills as it is used: the info fill, like Progress, until `warnAt` of `max`
-* is used (80% unless set), then the warning color, and a full warning bar
-* when used up; never danger, and no success color.
-*/
-function Meter({ size = "md", used, max = 100, warnAt, low, valueText, className, ...props }) {
-	const value = clamp(used, 0, max);
-	const share = max > 0 ? value / max : 1;
-	const warnFrom = warnAt !== void 0 ? clamp(warnAt, 0, 1) : low !== void 0 && max > 0 ? 1 - clamp(low, 0, max) / max : .8;
-	const level = share >= 1 ? "full" : share >= warnFrom ? "high" : "normal";
-	const { root } = meter({
-		size,
-		warning: level !== "normal"
-	});
-	return /* @__PURE__ */ jsx(MeterTextContext.Provider, {
-		value: valueText,
-		children: /* @__PURE__ */ jsx(Meter$1.Root, {
-			"data-slot": "meter",
-			"data-size": size,
-			"data-level": level,
-			min: 0,
-			max,
-			value,
-			"aria-valuetext": valueText,
-			className: root({ className }),
-			...props
-		})
-	});
-}
-function MeterHeader({ className, ...props }) {
-	const { header } = meter();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "meter-header",
-		className: header({ className }),
-		...props
-	});
-}
-function MeterLabel({ className, ...props }) {
-	const { label } = meter();
-	return /* @__PURE__ */ jsx(Meter$1.Label, {
-		"data-slot": "meter-label",
-		className: label({ className }),
-		...props
-	});
-}
-/** Shows the meter's `valueText`, at the end of `MeterHeader`. */
-function MeterValue({ className, ...props }) {
-	const { value } = meter();
-	const valueText = useContext(MeterTextContext);
-	return /* @__PURE__ */ jsx(Meter$1.Value, {
-		"data-slot": "meter-value",
-		className: value({ className }),
-		...props,
-		children: () => valueText
-	});
-}
-function MeterTrack({ className, ...props }) {
-	const { track } = meter();
-	return /* @__PURE__ */ jsx(Meter$1.Track, {
-		"data-slot": "meter-track",
-		className: track({ className }),
-		...props
-	});
-}
-function MeterIndicator({ className, ...props }) {
-	const { indicator } = meter();
-	return /* @__PURE__ */ jsx(Meter$1.Indicator, {
-		"data-slot": "meter-indicator",
-		className: indicator({ className }),
-		...props
-	});
-}
-//#endregion
-//#region src/components/filter-chip/filter-chip.tsx
-const filterChip = tv({ slots: {
-	root: [
-		"inline-flex h-8 min-w-0 shrink items-center",
-		"gap-1.5 rounded-control bg-info-soft pr-1 pl-2.5",
-		"font-sans text-control font-semibold text-foreground",
-		"[&>svg]:pointer-events-none [&>svg]:shrink-0",
-		"[&>svg:not([class*='size-'])]:size-3.5 [&>svg:not([class*='stroke-'])]:stroke-2"
-	],
-	label: ["min-w-0 truncate"],
-	remove: [
-		...chipRemoveBase,
-		"relative size-6",
-		"after:absolute after:content-[''] pointer-coarse:after:-inset-2.5"
-	]
-} });
-/**
-* The filter in effect, beside the filter button that chose it: an `info-soft`
-* chip as high as the button, with an optional 14px icon, a `FilterChipLabel`
-* and a `FilterChipRemove` × that resets the filter.
-*/
-function FilterChip({ className, ...props }) {
-	const { root } = filterChip();
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "filter-chip",
-		className: root({ className }),
-		...props
-	});
-}
-/** The name of the active filter. It truncates when the row has no room. */
-function FilterChipLabel({ className, ...props }) {
-	const { label } = filterChip();
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "filter-chip-label",
-		className: label({ className }),
-		...props
-	});
-}
-/** The × that resets the filter to its default. Shows an X unless given children. */
-function FilterChipRemove({ className, children, render, nativeButton, ...props }) {
-	const { remove } = filterChip();
-	return /* @__PURE__ */ jsx(Button, {
-		...props,
-		render,
-		nativeButton: nativeButton ?? defaultNativeButton(render),
-		type: "button",
-		"data-slot": "filter-chip-remove",
-		className: remove({ className }),
-		children: children ?? /* @__PURE__ */ jsx(X, { "aria-hidden": true })
-	});
-}
-//#endregion
-//#region src/components/pull-to-refresh/pull-to-refresh-gesture.ts
-/**
-* The pull-to-refresh gesture as a pure state machine (pull-to-refresh.md,
-* "Behavior"). `usePullToRefresh` feeds it the scroller's touch events; this
-* file owns every decision, so the rules can be tested without a DOM.
-*/
-/** How far the indicator has to be pulled, after damping, for a release to refresh. */
-const PULL_TO_REFRESH_THRESHOLD = 100;
-/**
-* The furthest the indicator follows the finger. 40px past the threshold is
-* enough to show the pull is armed and still going; any further and a long
-* drag would push the list off a small phone's screen.
-*/
-const PULL_TO_REFRESH_MAX_DISTANCE = 140;
-/** The indicator's height while the refresh runs. */
-const PULL_TO_REFRESH_HOLD_DISTANCE = 60;
-/**
-* The rubber band: the indicator moves this fraction of the finger's travel,
-* so it lags and the pull reads as resistance. 0.55 is iOS's own
-* scroll-view constant.
-*/
-const PULL_TO_REFRESH_DAMPING = .55;
-/**
-* How long the indicator takes to go back, to the hold height or to 0, once
-* the finger lifts or the refresh ends: ease-out (`ease-slide`), with no
-* overshoot. Instant with reduced motion.
-*/
-const PULL_TO_REFRESH_SNAP_BACK_MS = 300;
-/** A finger held this long before it pulls is a long press (a menu, a drag), not a pull. */
-const PULL_TO_REFRESH_LONG_PRESS_MS = 500;
-/** How far the finger may drift while it could still be a long press. */
-const PULL_TO_REFRESH_TOLERANCE = 10;
-/** Where a touch must not start a pull: text entry, and anything the consumer marks. */
-const PULL_TO_REFRESH_IGNORE_SELECTOR = [
-	"input",
-	"textarea",
-	"select",
-	"[contenteditable=\"\"]",
-	"[contenteditable=\"true\"]",
-	"[contenteditable=\"plaintext-only\"]",
-	"[data-pull-to-refresh-ignore]"
-].join(", ");
-const DEFAULT_PULL_GESTURE_CONFIG = {
-	threshold: 100,
-	maxDistance: 140,
-	holdDistance: 60,
-	latch: true
-};
-const IDLE_PULL_GESTURE = {
-	phase: "idle",
-	startX: 0,
-	startY: 0,
-	distance: 0,
-	armed: false
-};
-/** How far the indicator is for a finger that has travelled `delta` px down. */
-function pullDistance(delta, maxDistance = 140) {
-	if (delta <= 0) return 0;
-	return Math.min(maxDistance, delta * PULL_TO_REFRESH_DAMPING);
-}
-/** How far towards the threshold the pull is, from 0 to 1. */
-function pullProgress(distance, threshold = 100) {
-	if (threshold <= 0) return 1;
-	return Math.min(1, Math.max(0, distance / threshold));
-}
-/**
-* Which of the spinner's 4 pixels is lit while pulling, clockwise from the
-* top left: one step per quarter of the threshold, the last from the
-* threshold on (the same walk as the native apps' indicator).
-*/
-function pullStep(progress) {
-	return Math.min(3, Math.floor(Math.max(0, progress) * 4));
-}
-/** The state the indicator shows for a gesture. */
-function pullState(gesture) {
-	if (gesture.phase === "refreshing") return "refreshing";
-	if (gesture.phase !== "pulling") return "idle";
-	return gesture.distance > 0 || gesture.armed ? "pulling" : "idle";
-}
-function step(gesture, preventDefault = false, refresh = false, armed = false) {
-	return {
-		gesture,
-		preventDefault,
-		refresh,
-		armed
-	};
-}
-/** The next gesture for an event. */
-function stepPullGesture(gesture, event, config = DEFAULT_PULL_GESTURE_CONFIG) {
-	if (gesture.phase === "refreshing") return step(event.type === "settle" ? IDLE_PULL_GESTURE : gesture);
-	switch (event.type) {
-		case "start":
-			if (event.fingers !== 1 || !event.atTop || event.ignored) return step(IDLE_PULL_GESTURE);
-			return step({
-				...IDLE_PULL_GESTURE,
-				phase: "tracking",
-				startX: event.x,
-				startY: event.y
-			});
-		case "move": {
-			if (gesture.phase === "idle") return step(gesture);
-			if (event.fingers !== 1) return step(IDLE_PULL_GESTURE);
-			if (!event.atTop && !gesture.armed) return step(IDLE_PULL_GESTURE);
-			const dx = event.x - gesture.startX;
-			const dy = event.y - gesture.startY;
-			if (gesture.phase === "tracking") {
-				if (Math.abs(dx) > PULL_TO_REFRESH_TOLERANCE && Math.abs(dx) > dy) return step(IDLE_PULL_GESTURE);
-				if (dy < -6) return step(IDLE_PULL_GESTURE);
-				if (dy <= 6) return step(gesture);
-			}
-			const distance = pullDistance(dy, config.maxDistance);
-			const armed = config.latch && gesture.armed || distance >= config.threshold;
-			return step({
-				...gesture,
-				phase: "pulling",
-				distance,
-				armed
-			}, armed || dy > 6, false, armed && !gesture.armed);
-		}
-		case "hold": return step(gesture.phase === "tracking" ? IDLE_PULL_GESTURE : gesture);
-		case "end":
-			if (gesture.phase === "pulling" && gesture.armed) return step({
-				...gesture,
-				phase: "refreshing",
-				distance: config.holdDistance
-			}, false, true);
-			return step(IDLE_PULL_GESTURE);
-		case "cancel":
-		case "settle": return step(IDLE_PULL_GESTURE);
-	}
-}
-//#endregion
-//#region src/components/pull-to-refresh/use-pull-to-refresh.ts
-/** A primary pointer that is a finger: the only input pull to refresh answers. */
-const PULL_TO_REFRESH_POINTER_QUERY = "(pointer: coarse)";
-/** The one platform check: Android, by its user agent (Client Hints first). */
-function detectPullToRefreshPlatform() {
-	if (typeof navigator === "undefined") return "default";
-	const hints = navigator.userAgentData;
-	if (hints?.platform) return hints.platform === "Android" ? "android" : "default";
-	return /\bAndroid\b/i.test(navigator.userAgent) ? "android" : "default";
-}
-function hapticTick() {
-	if (typeof navigator !== "undefined" && typeof navigator.vibrate === "function") navigator.vibrate(10);
-}
-const subscribeNever = () => () => void 0;
-const defaultSnapshot = () => "default";
-function subscribeCoarse(onChange) {
-	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => void 0;
-	const media = window.matchMedia(PULL_TO_REFRESH_POINTER_QUERY);
-	media.addEventListener("change", onChange);
-	return () => media.removeEventListener("change", onChange);
-}
-function coarseSnapshot() {
-	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse)").matches;
-}
-function ignoredTarget(target) {
-	return target instanceof Element && target.closest(PULL_TO_REFRESH_IGNORE_SELECTOR) !== null;
-}
-/**
-* Pull to refresh for a scroll container on a touch screen
-* (pull-to-refresh.md). Pulling down from the top of `scrollRef` past the
-* threshold calls `onRefresh`; render a `PullToRefreshIndicator` with the
-* result as the scroller's first child.
-*
-* On Android it takes Material 3's look (`PullToRefreshPlatform`). It does
-* nothing on a fine pointer. While it is on, the scroller gets
-* `overscroll-behavior-y: contain`, so a browser tab's own pull to reload
-* doesn't run as well. `scrollRef` is read when the hook turns on; a
-* scroller that is replaced later needs the hook remounted (a `key`).
-*/
-function usePullToRefresh(scrollRef, { onRefresh, disabled = false, threshold = DEFAULT_PULL_GESTURE_CONFIG.threshold, maxDistance = DEFAULT_PULL_GESTURE_CONFIG.maxDistance, holdDistance = DEFAULT_PULL_GESTURE_CONFIG.holdDistance, platform: platformOverride }) {
-	const coarse = useSyncExternalStore(subscribeCoarse, coarseSnapshot, () => false);
-	const detected = useSyncExternalStore(subscribeNever, detectPullToRefreshPlatform, defaultSnapshot);
-	const platform = platformOverride ?? detected;
-	const enabled = coarse && !disabled;
-	const [gesture, setGesture] = useState(IDLE_PULL_GESTURE);
-	const gestureRef = useRef(IDLE_PULL_GESTURE);
-	const onRefreshRef = useLatestRef(onRefresh);
-	useEffect(() => {
-		const element = scrollRef.current;
-		if (!enabled || !element) return;
-		const config = {
-			threshold,
-			maxDistance,
-			holdDistance,
-			latch: platform !== "android"
-		};
-		let holdTimer;
-		let live = true;
-		const dispatch = (event, native) => {
-			const next = stepPullGesture(gestureRef.current, event, config);
-			if (next.preventDefault && native?.cancelable) native.preventDefault();
-			if (next.gesture !== gestureRef.current) {
-				gestureRef.current = next.gesture;
-				setGesture(next.gesture);
-			}
-			if (next.gesture.phase !== "tracking") clearTimeout(holdTimer);
-			if (next.armed && platform === "android") hapticTick();
-			if (next.refresh) {
-				const settle = () => {
-					if (live) dispatch({ type: "settle" });
-				};
-				let result;
-				try {
-					result = Promise.resolve(onRefreshRef.current());
-				} catch (error) {
-					result = Promise.reject(error);
-				}
-				result.then(settle, settle);
-			}
-		};
-		const atTop = () => element.scrollTop <= 0;
-		const onTouchStart = (event) => {
-			const touch = event.touches[0];
-			dispatch({
-				type: "start",
-				x: touch?.clientX ?? 0,
-				y: touch?.clientY ?? 0,
-				fingers: event.touches.length,
-				atTop: atTop(),
-				ignored: ignoredTarget(event.target)
-			});
-			if (gestureRef.current.phase === "tracking") {
-				clearTimeout(holdTimer);
-				holdTimer = setTimeout(() => dispatch({ type: "hold" }), PULL_TO_REFRESH_LONG_PRESS_MS);
-			}
-		};
-		const onTouchMove = (event) => {
-			if (event.defaultPrevented && gestureRef.current.phase === "tracking") {
-				dispatch({ type: "cancel" });
-				return;
-			}
-			const touch = event.touches[0];
-			dispatch({
-				type: "move",
-				x: touch?.clientX ?? 0,
-				y: touch?.clientY ?? 0,
-				fingers: event.touches.length,
-				atTop: atTop()
-			}, event);
-		};
-		const onTouchEnd = () => dispatch({ type: "end" });
-		const onCancel = () => dispatch({ type: "cancel" });
-		const previousOverscroll = element.style.overscrollBehaviorY;
-		element.style.overscrollBehaviorY = "contain";
-		element.addEventListener("touchstart", onTouchStart, { passive: true });
-		element.addEventListener("touchmove", onTouchMove, { passive: false });
-		element.addEventListener("touchend", onTouchEnd, { passive: true });
-		element.addEventListener("touchcancel", onCancel, { passive: true });
-		element.addEventListener("contextmenu", onCancel);
-		element.addEventListener("dragstart", onCancel);
-		return () => {
-			live = false;
-			clearTimeout(holdTimer);
-			element.style.overscrollBehaviorY = previousOverscroll;
-			element.removeEventListener("touchstart", onTouchStart);
-			element.removeEventListener("touchmove", onTouchMove);
-			element.removeEventListener("touchend", onTouchEnd);
-			element.removeEventListener("touchcancel", onCancel);
-			element.removeEventListener("contextmenu", onCancel);
-			element.removeEventListener("dragstart", onCancel);
-			gestureRef.current = IDLE_PULL_GESTURE;
-			setGesture(IDLE_PULL_GESTURE);
-		};
-	}, [
-		enabled,
-		scrollRef,
-		onRefreshRef,
-		threshold,
-		maxDistance,
-		holdDistance,
-		platform
-	]);
-	const state = pullState(gesture);
-	const distance = state === "idle" ? 0 : gesture.distance;
-	return {
-		state,
-		distance,
-		progress: state === "refreshing" || gesture.armed ? 1 : pullProgress(distance, threshold),
-		platform
-	};
-}
-//#endregion
-//#region src/components/pull-to-refresh/pull-to-refresh-material-progress.tsx
-/**
-* Android's own pull-to-refresh progress, drawn as Material 3 draws it
-* (Compose's `PullToRefreshDefaults.Indicator`, the one Chrome on Android
-* shows too): a 2.5px arc of radius 7.5px in a 40px disc. While pulling the
-* arc grows to 0.8 of the circle and turns a little with the pull, with an
-* arrowhead at its end, at 0.3 opacity until the pull is armed and fully
-* opaque from then on. While refreshing it is Material's indeterminate arc,
-* which grows and shrinks as it turns. Internal: `PullToRefreshIndicator`
-* renders it on Android.
-*/
-/** The disc's centre, in its 40px box. */
-const CENTER = 20;
-const MATERIAL_ARC_RADIUS = 7.5;
-const MATERIAL_STROKE_WIDTH = 2.5;
-const ARROW_WIDTH = 10;
-const ARROW_HEIGHT = 5;
-/** The longest the arc gets while pulling, as a share of the circle. */
-const MATERIAL_MAX_ARC = .8;
-const CIRCUMFERENCE = 2 * Math.PI * MATERIAL_ARC_RADIUS;
-/**
-* The arc for a pull's progress (0 to 1), as Material computes it: nothing
-* for the first 40%, then the arc grows to `MATERIAL_MAX_ARC` of the circle
-* and its start turns from -45° to +27° (12 o'clock is -90°), and the
-* arrowhead grows with it.
-*/
-function materialArc(progress) {
-	const adjusted = Math.max(Math.min(1, progress) - .4, 0) * 5 / 3;
-	const rotation = (-.25 + .4 * adjusted) * .5;
-	return {
-		startAngle: rotation * 360,
-		endAngle: (rotation + adjusted * MATERIAL_MAX_ARC) * 360,
-		arrowScale: Math.min(1, adjusted)
-	};
-}
-const point = (degrees) => {
-	const radians = degrees * Math.PI / 180;
-	return `${CENTER + MATERIAL_ARC_RADIUS * Math.cos(radians)} ${CENTER + MATERIAL_ARC_RADIUS * Math.sin(radians)}`;
-};
-/** An SVG path for the arc, clockwise from `startAngle` to `endAngle`. */
-function arcPath({ startAngle, endAngle }) {
-	const sweep = endAngle - startAngle;
-	if (sweep <= .01) return "";
-	const large = sweep > 180 ? 1 : 0;
-	return `M ${point(startAngle)} A ${MATERIAL_ARC_RADIUS} ${MATERIAL_ARC_RADIUS} 0 ${large} 1 ${point(endAngle)}`;
-}
-/**
-* The arrowhead: a triangle whose base straddles the arc at 3 o'clock and
-* whose tip points clockwise, turned to the arc's end.
-*/
-function arrowPoints(scale) {
-	const half = ARROW_WIDTH * scale / 2;
-	const base = 17.5;
-	const x = 27.5;
-	return `${x - half},${base} ${x + half},${base} ${x},${base + ARROW_HEIGHT * scale}`;
-}
-const MATERIAL_STYLE = `
-@keyframes raft-ptr-material-rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes raft-ptr-material-dash {
-  0% {
-    stroke-dasharray: 0.4 ${CIRCUMFERENCE};
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: ${CIRCUMFERENCE * .7} ${CIRCUMFERENCE};
-    stroke-dashoffset: ${-CIRCUMFERENCE * .1};
-  }
-  100% {
-    stroke-dasharray: ${CIRCUMFERENCE * .7} ${CIRCUMFERENCE};
-    stroke-dashoffset: ${-CIRCUMFERENCE * .99};
-  }
-}
-
-[data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] {
-  animation: raft-ptr-material-rotate 1.4s linear infinite;
-}
-
-[data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] [data-material-indeterminate] {
-  animation: raft-ptr-material-dash 1.4s ease-in-out infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-slot="pull-to-refresh-material-progress"][data-state="refreshing"],
-  [data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] [data-material-indeterminate] {
-    animation: none;
-  }
-
-  [data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] [data-material-indeterminate] {
-    stroke-dasharray: ${CIRCUMFERENCE * .75} ${CIRCUMFERENCE};
-  }
-}
-`;
-const materialStyle = /* @__PURE__ */ jsx("style", {
-	href: "raft-ui-pull-to-refresh-material",
-	precedence: "default",
-	children: MATERIAL_STYLE
-});
-const materialProgress = tv({ slots: {
-	root: ["size-10 shrink-0 overflow-visible", "text-info-strong"],
-	determinate: ["transition-opacity duration-150 ease-out motion-reduce:transition-none", "opacity-30 data-armed:opacity-100"],
-	arc: ["fill-none stroke-current [stroke-linecap:butt]"],
-	arrow: ["fill-current"],
-	indeterminate: ["fill-none stroke-current [stroke-linecap:round]"]
-} });
-function PullToRefreshMaterialProgress({ state, progress }) {
-	const { root, determinate, arc, arrow, indeterminate } = materialProgress();
-	const refreshing = state === "refreshing";
-	const armed = progress >= 1;
-	const values = materialArc(refreshing ? 1 : progress);
-	return /* @__PURE__ */ jsxs("svg", {
-		"data-slot": "pull-to-refresh-material-progress",
-		"data-state": state,
-		"data-armed": !refreshing && armed ? "" : void 0,
-		viewBox: "0 0 40 40",
-		"aria-hidden": "true",
-		className: root(),
-		children: [materialStyle, refreshing ? /* @__PURE__ */ jsx("circle", {
-			"data-material-indeterminate": "",
-			cx: CENTER,
-			cy: CENTER,
-			r: MATERIAL_ARC_RADIUS,
-			strokeWidth: MATERIAL_STROKE_WIDTH,
-			transform: `rotate(-90 ${CENTER} ${CENTER})`,
-			className: indeterminate()
-		}) : /* @__PURE__ */ jsxs("g", {
-			"data-armed": armed ? "" : void 0,
-			className: determinate(),
-			children: [/* @__PURE__ */ jsx("path", {
-				"data-material-arc": "",
-				d: arcPath(values),
-				strokeWidth: MATERIAL_STROKE_WIDTH,
-				className: arc()
-			}), values.arrowScale > 0 && /* @__PURE__ */ jsx("polygon", {
-				"data-material-arrow": "",
-				points: arrowPoints(values.arrowScale),
-				transform: `rotate(${values.endAngle - 2.5} ${CENTER} ${CENTER})`,
-				className: arrow()
-			})]
-		})]
-	});
-}
-//#endregion
-//#region src/components/pull-to-refresh/pull-to-refresh-indicator.tsx
-const pullStepStyle = /* @__PURE__ */ jsx("style", {
-	href: "raft-ui-pull-to-refresh",
-	precedence: "default",
-	children: `
-[data-slot="pull-to-refresh-indicator"][data-pull-step] [data-spinner-pixel],
-[data-slot="pull-to-refresh-indicator"][data-state="idle"] [data-spinner-pixel] {
-  animation: none;
-  opacity: 0.2;
-}
-
-[data-slot="pull-to-refresh-indicator"][data-pull-step="0"] [data-spinner-pixel]:nth-child(1),
-[data-slot="pull-to-refresh-indicator"][data-pull-step="1"] [data-spinner-pixel]:nth-child(2),
-[data-slot="pull-to-refresh-indicator"][data-pull-step="2"] [data-spinner-pixel]:nth-child(4),
-[data-slot="pull-to-refresh-indicator"][data-pull-step="3"] [data-spinner-pixel]:nth-child(3) {
-  opacity: 1;
-}
-`
-});
-const SNAP_BACK = ["duration-300 ease-slide motion-reduce:transition-none", "data-[state=pulling]:transition-none"];
-const pullToRefreshIndicator = tv({
-	slots: {
-		root: ["flex w-full shrink-0 justify-center", "text-foreground-icon"],
-		surface: ["flex items-center justify-center"],
-		spinner: [
-			"transition-opacity duration-300 ease-slide motion-reduce:transition-none",
-			"in-data-[state=pulling]:transition-none",
-			"in-data-[state=pulling]:opacity-(--pull-progress) in-data-[state=idle]:opacity-0"
-		],
-		status: ["sr-only"]
-	},
-	variants: { platform: {
-		default: {
-			root: [
-				"relative items-center overflow-hidden",
-				"transition-[height]",
-				...SNAP_BACK
-			],
-			surface: ["size-full"]
-		},
-		android: {
-			root: ["sticky top-0 z-10 h-0 overflow-visible"],
-			surface: [
-				"absolute inset-x-0 top-0 mx-auto size-10 rounded-full bg-layer-popover shadow-float",
-				"translate-y-[calc(var(--pull-distance)-100%)]",
-				"transition-[translate,opacity,scale]",
-				...SNAP_BACK,
-				"data-[state=idle]:opacity-0",
-				"data-[exit=finish]:scale-0 data-[exit=finish]:duration-150 data-[exit=finish]:ease-out"
-			]
-		}
-	} },
-	defaultVariants: { platform: "default" }
-});
-/**
-* How the Android disc leaves once idle: `finish` when a refresh has just
-* ended (it scales down where it held), `cancel` otherwise (it slides back
-* up). The finish keeps the distance it held, so it doesn't also slide.
-* `gone` once the scale-down has ended: the disc stays scaled away and its
-* arc stops turning.
-*/
-function useAndroidExit(state, distance) {
-	const [previous, setPrevious] = useState(state);
-	const [exit, setExit] = useState({
-		kind: "cancel",
-		distance: 0
-	});
-	const [held, setHeld] = useState(distance);
-	if (state !== previous) {
-		setPrevious(state);
-		if (state === "idle") setExit(previous === "refreshing" ? {
-			kind: "finish",
-			distance: held
-		} : {
-			kind: "cancel",
-			distance: 0
-		});
-	}
-	if (state === "refreshing" && distance !== held) setHeld(distance);
-	const settle = () => {
-		if (exit.kind === "finish") setExit({
-			...exit,
-			kind: "gone"
-		});
-	};
-	return {
-		...exit,
-		settle
-	};
-}
-/**
-* The pull's indicator. Render it as the scroller's first child: by default
-* it is the space the pull opens, with the DS Spinner in it, so the content
-* moves down with the pull; on Android it is Material 3's own indicator, a
-* disc with a progress arc that travels down over the content. It holds a
-* polite live region that announces `label` while refreshing.
-*/
-function PullToRefreshIndicator({ pull, label, className, style, ...props }) {
-	const { state, distance, progress, platform } = pull;
-	const { root, surface, spinner, status } = pullToRefreshIndicator({ platform });
-	const android = platform === "android";
-	const exit = useAndroidExit(state, distance);
-	const finishing = android && state === "idle" && exit.kind !== "cancel";
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "pull-to-refresh-indicator",
-		"data-state": state,
-		"data-platform": platform,
-		"data-pull-step": !android && state === "pulling" ? pullStep(progress) : void 0,
-		className: root({ className }),
-		style: {
-			...style,
-			height: android ? void 0 : distance,
-			["--pull-progress"]: progress,
-			["--pull-distance"]: `${finishing ? exit.distance : distance}px`
-		},
-		...props,
-		children: [
-			!android && pullStepStyle,
-			/* @__PURE__ */ jsx("div", {
-				"data-slot": "pull-to-refresh-surface",
-				"data-state": state,
-				"data-exit": finishing ? "finish" : void 0,
-				className: surface(),
-				onTransitionEnd: (event) => {
-					if (event.target === event.currentTarget && event.propertyName === "scale") exit.settle();
-				},
-				children: android ? /* @__PURE__ */ jsx(PullToRefreshMaterialProgress, {
-					state: finishing && exit.kind === "finish" ? "refreshing" : state,
-					progress
-				}) : /* @__PURE__ */ jsx(Spinner, {
-					"aria-hidden": "true",
-					role: "presentation",
-					"aria-label": void 0,
-					className: spinner()
-				})
-			}),
-			/* @__PURE__ */ jsx("span", {
-				role: "status",
-				"aria-live": "polite",
-				className: status(),
-				children: state === "refreshing" ? label : ""
-			})
-		]
-	});
-}
-//#endregion
-//#region src/components/choice-list/choice-list.recipe.ts
-const choiceList = tv({
-	slots: {
-		root: ["grid min-w-0 gap-2"],
-		searchInput: ["[&::-webkit-search-cancel-button]:appearance-none"],
-		frame: ["flex min-w-0 flex-col overflow-hidden", "rounded-container border border-line-hairline bg-layer-card"],
-		scroller: ["min-h-0 min-w-0 p-1"],
-		rows: ["grid grid-cols-[minmax(0,1fr)_auto] gap-x-0 gap-y-0.5"],
-		group: ["col-span-2 col-start-1 grid grid-cols-subgrid grid-rows-subgrid gap-x-0 gap-y-0.5"],
-		section: ["col-span-2 col-start-1 grid grid-cols-subgrid grid-rows-subgrid"],
-		heading: ["col-span-2 px-2.5 pt-2 pb-1", "font-sans text-caption font-bold text-foreground-hint"],
-		item: [
-			"col-span-2 flex min-w-0 items-start gap-2.5 rounded-chip px-2.5",
-			"min-h-option py-option-inset",
-			"pointer-coarse:min-h-11 pointer-coarse:py-[calc((--spacing(11)-1lh)/2)]",
-			"text-left font-sans text-subhead",
-			"not-data-disabled:hover:bg-brand-soft not-data-disabled:active:overlay-medium",
-			"data-disabled:cursor-not-allowed"
-		],
-		media: ["flex h-lh shrink-0 items-center"],
-		body: ["grid min-w-0 flex-1 gap-0.5"],
-		label: ["truncate font-semibold text-foreground", "in-data-disabled:text-foreground-disabled"],
-		description: ["block truncate font-sans text-footnote font-normal text-foreground-muted", "in-data-disabled:text-foreground-disabled"],
-		action: [
-			"relative z-10 col-start-2 flex h-lh items-center self-start pr-1",
-			"mt-option-inset pointer-coarse:mt-[calc((--spacing(11)-1lh)/2)]",
-			"font-sans text-subhead"
-		],
-		note: ["px-2.5 py-2 font-sans text-callout text-foreground-hint"],
-		footer: ["shrink-0 border-t border-line-seam p-1"]
-	},
-	variants: {
-		scroll: { true: { scroller: ["max-h-72 overflow-y-auto overscroll-contain"] } },
-		fill: { true: {
-			root: ["flex min-h-0 flex-1 flex-col"],
-			frame: ["min-h-0 flex-1"],
-			scroller: ["flex-1 overflow-y-auto overscroll-contain"]
-		} },
-		hasAction: { true: { item: ["pr-11"] } }
-	}
-});
-//#endregion
-//#region src/components/choice-list/choice-list.tsx
-const SEARCH_ABOVE = 5;
-const MAX_DESCRIPTION_LINES = 2;
-function isDrawn(line) {
-	return line !== null && line !== void 0 && line !== false && line !== "";
-}
-function descriptionLines(description) {
-	return (Array.isArray(description) ? description : [description]).filter(isDrawn);
-}
-function CutLine({ id, slot, className, children }) {
-	const ref = useOverflowTitle();
-	return /* @__PURE__ */ jsx("span", {
-		ref,
-		id,
-		"data-slot": slot,
-		className,
-		children
-	});
-}
-const NOT_TEXT_INPUTS = /* @__PURE__ */ new Set([
-	"button",
-	"checkbox",
-	"radio",
-	"submit",
-	"reset",
-	"image",
-	"file",
-	"range",
-	"color"
-]);
-function isTextEntry(element) {
-	if (!(element instanceof HTMLElement)) return false;
-	if (element.isContentEditable || element instanceof HTMLTextAreaElement) return true;
-	if (element instanceof HTMLSelectElement) return true;
-	return element instanceof HTMLInputElement && !NOT_TEXT_INPUTS.has(element.type);
-}
-function searchTextOf(item) {
-	if (item.searchText !== void 0) return item.searchText;
-	return typeof item.label === "string" ? item.label : "";
-}
-function visibleItems(items, needle, pinned, chosen, matchedValues) {
-	if (!needle) return {
-		rows: items,
-		noMatch: false
-	};
-	const matched = matchedValues ? new Set(matchedValues) : null;
-	const matches = (item) => matched ? matched.has(item.value) : searchTextOf(item).toLowerCase().includes(needle);
-	const pinnedSet = new Set(pinned);
-	const isPinned = (item) => pinnedSet.has(item.value);
-	const top = items.filter((item) => isPinned(item) || chosen.includes(item.value) && !matches(item));
-	const byValue = matchedValues ? new Map(items.map((item) => [item.value, item])) : null;
-	const rest = (byValue && matched ? [...matched].flatMap((value) => byValue.get(value) ?? []) : items).filter((item) => !top.includes(item) && matches(item));
-	return {
-		rows: [...top, ...rest],
-		noMatch: !items.some(matches)
-	};
-}
-function layoutSections(rows, groups) {
-	const known = new Set(groups?.map((group) => group.value));
-	const sections = groups ? groups.map((group) => ({
-		group,
-		rows: rows.filter((item) => item.group === group.value)
-	})) : [];
-	sections.push({
-		group: null,
-		rows: rows.filter((item) => !groups || item.group === void 0 || !known.has(item.group))
-	});
-	const drawn = sections.filter((section) => section.rows.length > 0);
-	const gridRowOf = /* @__PURE__ */ new Map();
-	let gridRows = 0;
-	for (const section of drawn) {
-		if (section.group) gridRows += 1;
-		for (const item of section.rows) {
-			gridRows += 1;
-			gridRowOf.set(item.value, gridRows);
-		}
-	}
-	return {
-		sections: drawn,
-		gridRowOf,
-		gridRows
-	};
-}
-function ChoiceList(props) {
-	const { items, search = "auto", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled = false, searchLabel, searchPlaceholder, defaultSearchValue = "", searchValue, onSearchValueChange, matchedValues, clearSearchLabel, noMatchLabel, empty, groups, footer, fill = false, className } = props;
-	const value = props.value;
-	const chosen = useMemo(() => value === null ? [] : typeof value === "string" ? [value] : value, [value]);
-	const [ownQuery, setOwnQuery] = useState(defaultSearchValue);
-	const query = searchValue ?? ownQuery;
-	const setQuery = useCallback((next) => {
-		if (searchValue === void 0) setOwnQuery(next);
-		onSearchValueChange?.(next);
-	}, [searchValue, onSearchValueChange]);
-	const [pinned, setPinned] = useState(chosen);
-	const inputRef = useRef(null);
-	const baseId = useId();
-	const searchable = items.length > 0 && (search === "always" || items.length > SEARCH_ABOVE);
-	const [wasSearchable, setWasSearchable] = useState(searchable);
-	if (wasSearchable !== searchable) {
-		setWasSearchable(searchable);
-		if (!searchable) setOwnQuery("");
-	}
-	useEffect(() => {
-		if (!searchable && searchValue) onSearchValueChange?.("");
-	}, [
-		searchable,
-		searchValue,
-		onSearchValueChange
-	]);
-	const [pinnedFor, setPinnedFor] = useState(query);
-	if (pinnedFor !== query) {
-		setPinnedFor(query);
-		setPinned(chosen);
-	}
-	const { rows, noMatch } = visibleItems(items, searchable ? query.trim().toLowerCase() : "", pinned, chosen, matchedValues);
-	const hasAction = rows.some((item) => item.action !== void 0 && item.action !== null);
-	const slots = choiceList({
-		scroll: searchable && !fill,
-		fill
-	});
-	useEffect(() => {
-		if (process.env.NODE_ENV === "production") return;
-		if (!ariaLabel && !ariaLabelledBy) console.warn("raft-ui: a ChoiceList has neither aria-label nor aria-labelledby.");
-		if (items.some((item) => descriptionLines(item.description).length > MAX_DESCRIPTION_LINES)) console.warn(`raft-ui: a ChoiceList item has more than ${MAX_DESCRIPTION_LINES} description lines; only the first ${MAX_DESCRIPTION_LINES} are drawn.`);
-	}, [
-		ariaLabel,
-		ariaLabelledBy,
-		items
-	]);
-	const focusSearch = search === "always" && searchable;
-	const focusedSearch = useRef(false);
-	useEffect(() => {
-		if (!focusSearch || focusedSearch.current) return;
-		focusedSearch.current = true;
-		const input = inputRef.current;
-		if (!input || typeof window.matchMedia !== "function") return;
-		if (!window.matchMedia("(pointer: fine)").matches) return;
-		if (isTextEntry(document.activeElement)) return;
-		input.focus({ preventScroll: true });
-	}, [focusSearch]);
-	const changeQuery = useCallback((event) => {
-		setQuery(event.currentTarget.value);
-	}, [setQuery]);
-	const clearQuery = useCallback(() => {
-		setQuery("");
-		inputRef.current?.focus();
-	}, [setQuery]);
-	const { sections, gridRowOf, gridRows } = layoutSections(rows, groups);
-	const groupProps = {
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		disabled,
-		className: slots.group(),
-		style: { gridRow: `1 / span ${gridRows}` }
-	};
-	const rowElement = (item) => {
-		const id = `${baseId}-${items.indexOf(item)}`;
-		const lines = descriptionLines(item.description).slice(0, MAX_DESCRIPTION_LINES);
-		const rowDisabled = disabled || item.disabled === true;
-		const markProps = {
-			value: item.value,
-			disabled: item.disabled,
-			"aria-labelledby": `${id}-label`,
-			"aria-describedby": lines.length > 0 ? `${id}-description` : void 0
-		};
-		return /* @__PURE__ */ jsxs("label", {
-			"data-slot": "choice-list-item",
-			"data-disabled": rowDisabled ? "" : void 0,
-			className: slots.item({ hasAction }),
-			children: [
-				props.multiple ? /* @__PURE__ */ jsx(Checkbox, { ...markProps }) : /* @__PURE__ */ jsx(RadioGroupItem, { ...markProps }),
-				item.media !== void 0 && item.media !== null ? /* @__PURE__ */ jsx("span", {
-					"data-slot": "choice-list-media",
-					className: slots.media(),
-					children: item.media
-				}) : null,
-				/* @__PURE__ */ jsxs("span", {
-					"data-slot": "choice-list-body",
-					className: slots.body(),
-					children: [/* @__PURE__ */ jsx(CutLine, {
-						id: `${id}-label`,
-						slot: "choice-list-label",
-						className: slots.label(),
-						children: item.label
-					}), lines.length > 0 ? /* @__PURE__ */ jsx("span", {
-						id: `${id}-description`,
-						className: "contents",
-						children: lines.map((line, index) => /* @__PURE__ */ jsx(CutLine, {
-							slot: "choice-list-description",
-							className: slots.description(),
-							children: line
-						}, index))
-					}) : null]
-				})
-			]
-		}, item.value);
-	};
-	const rowElements = sections.map((section, index) => {
-		if (!section.group) return section.rows.map(rowElement);
-		const headingId = `${baseId}-group-${index}`;
-		const start = (gridRowOf.get(section.rows[0].value) ?? 1) - 1;
-		return /* @__PURE__ */ jsxs("div", {
-			role: "group",
-			"aria-labelledby": headingId,
-			"data-slot": "choice-list-section",
-			className: slots.section(),
-			style: { gridRow: `${start} / span ${section.rows.length + 1}` },
-			children: [/* @__PURE__ */ jsx("div", {
-				id: headingId,
-				"data-slot": "choice-list-heading",
-				className: slots.heading(),
-				children: section.group.label
-			}), section.rows.map(rowElement)]
-		}, section.group.value);
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "choice-list",
-		className: slots.root({ className }),
-		children: [searchable ? /* @__PURE__ */ jsxs(InputGroup, {
-			"data-slot": "choice-list-search",
-			children: [
-				/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, { "aria-hidden": true }) }),
-				/* @__PURE__ */ jsx(InputGroupInput, {
-					ref: inputRef,
-					type: "search",
-					value: query,
-					onChange: changeQuery,
-					"aria-label": searchLabel,
-					placeholder: searchPlaceholder,
-					disabled,
-					autoComplete: "off",
-					className: slots.searchInput()
-				}),
-				query ? /* @__PURE__ */ jsx(InputGroupAddon, {
-					align: "inline-end",
-					children: /* @__PURE__ */ jsx(Button$1, {
-						variant: "ghost",
-						size: "icon-md",
-						"aria-label": clearSearchLabel,
-						onClick: clearQuery,
-						children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
-					})
-				}) : null
-			]
-		}) : null, /* @__PURE__ */ jsxs("div", {
-			"data-slot": "choice-list-frame",
-			className: slots.frame(),
-			children: [/* @__PURE__ */ jsx("div", {
-				"data-slot": "choice-list-scroller",
-				className: slots.scroller(),
-				children: items.length === 0 ? /* @__PURE__ */ jsx("p", {
-					"data-slot": "choice-list-note",
-					className: slots.note(),
-					children: empty
-				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [rows.length > 0 ? /* @__PURE__ */ jsxs("div", {
-					"data-slot": "choice-list-rows",
-					className: slots.rows(),
-					children: [props.multiple ? /* @__PURE__ */ jsx(CheckboxGroup, {
-						"data-slot": "choice-list-group",
-						value: props.value,
-						onValueChange: props.onValueChange,
-						...groupProps,
-						children: rowElements
-					}) : /* @__PURE__ */ jsx(RadioGroup, {
-						"data-slot": "choice-list-group",
-						value: props.value,
-						onValueChange: props.onValueChange,
-						...groupProps,
-						children: rowElements
-					}), sections.flatMap((section) => section.rows.map((item) => item.action !== void 0 && item.action !== null ? /* @__PURE__ */ jsx("div", {
-						"data-slot": "choice-list-action",
-						className: slots.action(),
-						style: { gridRow: gridRowOf.get(item.value) },
-						children: item.action
-					}, item.value) : null))]
-				}) : null, searchable ? /* @__PURE__ */ jsx("p", {
-					role: "status",
-					"data-slot": "choice-list-status",
-					className: noMatch ? slots.note() : "sr-only",
-					children: noMatch ? noMatchLabel : null
-				}) : null] })
-			}), footer !== void 0 && footer !== null ? /* @__PURE__ */ jsx("div", {
-				"data-slot": "choice-list-footer",
-				className: slots.footer(),
-				children: footer
-			}) : null]
-		})]
-	});
-}
-//#endregion
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemSkeleton, InboxItemSkeletonList, LIFT_CLASS, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+import "./lib/drag-escape.mjs";
+import { OverlayLayerProvider, useParentOverlayKind } from "./lib/overlay-depth.mjs";
+import { Dialog, DialogClose, DialogFooterNote, DialogSheetBack, DialogTrigger } from "./components/dialog/dialog.mjs";
+import { DialogCommit, DialogSheetContent } from "./components/dialog/dialog-sheet.mjs";
+import { DropdownMenuLinkItem } from "./components/dropdown-menu/dropdown-menu.mjs";
+import { HoldThenMoveTouchSensor, MouseOnlyPointerSensor, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor } from "./lib/touch-drag.mjs";
+import { PopoverActions, PopoverBody } from "./components/popover/popover.mjs";
+import { MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel } from "./components/mobile-nav/mobile-nav-server.mjs";
+import { PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta } from "./components/preview-card/preview-card.mjs";
+import { AvatarGroupButton } from "./components/avatar/avatar.mjs";
+import { MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName } from "./components/message-item/message-item-delegated.mjs";
+import { MessageReferenceIcon, MessageReferenceReadMark } from "./components/message-item/message-reference.mjs";
+import { MessageQuotedPreviewAuthorDelegatedBy } from "./components/message-quoted-preview/message-quoted-preview.mjs";
+import { MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup } from "./components/message-list/message-list-jump.mjs";
+import { DEFAULT_DRAG_MESSAGES, createDragAnnouncements, dragInstructions, dragMessages } from "./components/drag/drag-announcements.mjs";
+import { LIFT_CLASS } from "./components/drag/drag.recipe.mjs";
+import { DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DragLift, ORIGIN_OPACITY, cancelDrag, keepGrabInside, useDragSiblingTransition } from "./components/drag/drag-lift.mjs";
+import { DRAG_KEYBOARD_CODES, DragRemeasure, MOUSE_DRAG_DISTANCE_PX, listKeyboardCoordinates, useDragAcrossLists, useDragSensors } from "./components/drag/drag-sensors.mjs";
+import { DragRefusalHint, DropPlaceholder } from "./components/drag/drop-placeholder.mjs";
+import { PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle } from "./components/panel/panel-split-action.mjs";
+import { ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle } from "./components/mode-bar/mode-bar.mjs";
+import { ComboboxSelect } from "./components/combobox-select/combobox-select.mjs";
+import { AnnouncementDialogAction, AnnouncementDialogBody, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle } from "./components/announcement-dialog/announcement-dialog.mjs";
+import { CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger } from "./components/comment/comment-card.mjs";
+import { CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime } from "./components/comment/comment-entry.mjs";
+import { COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, setCommentHighlights } from "./components/comment/comment-highlight.mjs";
+import { resolveCommentMarginLayout } from "./components/comment/comment-margin-layout.mjs";
+import { CommentMargin, CommentMarginItem } from "./components/comment/comment-margin.mjs";
+import { CommentMarker } from "./components/comment/comment-marker.mjs";
+import { useCommentMarginFits } from "./components/comment/use-comment-margin-fits.mjs";
+import { DragLiveRegion, DraggedSlot, dragListStrategy, useDragAnnouncer, useDragLists } from "./components/drag/drag-lists.mjs";
+import { Ellipsis, EllipsisToggle } from "./components/ellipsis/ellipsis.mjs";
+import { useTruncated } from "./lib/use-truncated.mjs";
+import { InboxItemLeadingBadge } from "./components/inbox-item/inbox-item-leading-badge.mjs";
+import { InboxItemSkeleton, InboxItemSkeletonList } from "./components/inbox-item/inbox-item-skeleton.mjs";
+import { ListRowSkeleton } from "./components/list-row/list-row-skeleton.mjs";
+import { Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "./components/meter/meter.mjs";
+import { FilterChip, FilterChipLabel, FilterChipRemove } from "./components/filter-chip/filter-chip.mjs";
+import { PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD } from "./components/pull-to-refresh/pull-to-refresh-gesture.mjs";
+import { PULL_TO_REFRESH_POINTER_QUERY, usePullToRefresh } from "./components/pull-to-refresh/use-pull-to-refresh.mjs";
+import { PullToRefreshIndicator } from "./components/pull-to-refresh/pull-to-refresh-indicator.mjs";
+import { ChoiceList } from "./components/choice-list/choice-list.mjs";
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemSkeleton, InboxItemSkeletonList, LIFT_CLASS, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };