@botiverse/raft-ui 0.10.4 → 0.10.6

package/dist/wip.mjs

@@ -1,8 +1,57 @@
-import { S as useTheme, f as DialogTitle, i as DialogContent, m as Button, p as DialogTrigger, r as DialogClose, t as Dialog, w as tv, x as useThemeScopeProps } from "./dialog-CDPAT3DH.mjs";
-import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
-import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { D as DialogTitle, I as useThemeScopeProps, L as useTheme, M as defaultNativeButton, O as DialogTrigger, a as DrawerContent, c as DrawerHeader, d as DrawerTitle, f as DrawerTrigger, g as Dialog, i as DrawerClose, k as Button$1, n as DrawerActions, r as DrawerBody, s as DrawerFooter, t as Drawer, v as DialogClose, y as DialogContent, z as tv } from "./drawer-yZD16Ybl.mjs";
+import { Check, ChevronDown, LoaderCircle, Plus, Search, X } from "lucide-react";
+import { createContext, use, useCallback, 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 { Select } from "@base-ui/react/select";
+//#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);
+}
+function resolveComboboxSelectMode({ phone, optionCount, sheetThreshold = 10, create = false, remote = false }) {
+	if (!phone) return "field";
+	if (create || remote) return "sheet";
+	return optionCount > sheetThreshold ? "sheet" : "list";
+}
+/** Options people can pick, flat or grouped: disabled options don't count. */
+function countSelectableOptions(groups) {
+	let count = 0;
+	for (const group of groups) for (const item of group.items) if (!item.disabled) count += 1;
+	return count;
+}
+/** The tallest the anchored list gets (`.r-combobox-select__list`, 16rem). */
+const LIST_MAX_HEIGHT = 256;
+/**
+* The side the anchored list opens on, chosen once when it opens so it never
+* flips while it is open (a phone's visual viewport keeps changing under it).
+* Below, unless the room below is short of the list and there is more above.
+*/
+function preferredListSide(anchor, viewport, listHeight) {
+	const below = viewport.top + viewport.height - anchor.bottom;
+	const above = anchor.top - viewport.top;
+	return below >= Math.min(listHeight, LIST_MAX_HEIGHT) || below >= above ? "bottom" : "top";
+}
+//#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);
@@ -30,7 +79,10 @@ const defaultMessages = {
 	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}`
+	remove: (label) => `Remove ${label}`,
+	search: "Search",
+	done: "Done",
+	close: "Close"
 };
 const defaultRenderCreateLabel = (query) => `Create “${query}”`;
 function recordLabel(record, renderLabel) {
@@ -69,6 +121,74 @@ function renderSelectedChip({ record, index, tagLimit, strings, renderLabel, ren
 		})]
 	}, optionKey(record.value));
 }
+/** An option of the phone's anchored list: the same content as the field's list. */
+function renderSelectOption({ record, selected, loading, renderLabel, renderOption }) {
+	const content = record.option === void 0 ? record.label : renderOption?.(record.option, { selected }) ?? recordLabel(record, renderLabel);
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		value: record,
+		label: record.label,
+		disabled: record.disabled || loading,
+		className: "r-combobox-select__option",
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			className: "r-combobox-select__text",
+			children: content
+		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			className: "r-combobox-select__indicator",
+			children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true })
+		})]
+	}, optionKey(record.value));
+}
+/** Change details for the phone's own changes: the clear button outside any Base UI root, the sheet's search emptied as it closes. */
+function syntheticDetails(reason, event) {
+	let canceled = false;
+	return {
+		reason,
+		event,
+		trigger: void 0,
+		cancel() {
+			canceled = true;
+		},
+		allowPropagation() {},
+		get isCanceled() {
+			return canceled;
+		},
+		get isPropagationAllowed() {
+			return false;
+		}
+	};
+}
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+/** The text that names a field: its `aria-labelledby` elements, else its `<label>`. */
+function readFieldLabel(element, labelledBy) {
+	if (!element) return "";
+	const doc = element.ownerDocument;
+	const fromIds = (labelledBy ?? "").split(/\s+/).filter(Boolean).map((labelId) => doc.getElementById(labelId)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
+	if (fromIds) return fromIds;
+	return [...element.labels ?? []].map((label) => label.textContent?.trim() ?? "").filter(Boolean).join(" ");
+}
+/** The phone's anchored list keeps the side it opened on: it never flips while open. */
+const PHONE_LIST_COLLISION = {
+	side: "none",
+	align: "shift",
+	fallbackAxisSide: "none"
+};
+/** The side the phone's anchored list opens on, from the room around the field. */
+function measureListSide(anchor, groups) {
+	const view = anchor?.ownerDocument.defaultView;
+	if (!anchor || !view) return "bottom";
+	const visual = view.visualViewport;
+	const rows = groups.reduce((count, group) => count + group.items.length + (group.label == null ? 0 : 1), 0);
+	return preferredListSide(anchor.getBoundingClientRect(), visual ? {
+		top: visual.offsetTop,
+		height: visual.height
+	} : {
+		top: 0,
+		height: view.innerHeight
+	}, rows * 36 + 12);
+}
 /** Options-driven composition. The stable compound Combobox API stays unchanged. */
 function isItemEqualToValue(a, b) {
 	return a.createQuery === b.createQuery && a.value === b.value;
@@ -79,7 +199,7 @@ function itemToStringLabel(record) {
 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, 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, ...rootProps }) {
+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, sheetThreshold = 10, sheetTitle, 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, ...rootProps }) {
 	const generatedId = useId();
 	const id = idProp ?? generatedId;
 	const { resolvedMode } = useTheme();
@@ -348,6 +468,291 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 		]
 	});
 	const valueChange = handleValueChange;
+	const mode = resolveComboboxSelectMode({
+		phone: usePhoneMedia(),
+		optionCount: countSelectableOptions(normalized.groups),
+		sheetThreshold,
+		create: Boolean(create || creatable),
+		remote
+	});
+	const fieldRef = useRef(null);
+	const triggerRef = useRef(null);
+	const searchInputRef = useRef(null);
+	const [uncontrolledPhoneOpen, setUncontrolledPhoneOpen] = useState(Boolean(rootProps.defaultOpen));
+	const phoneOpen = rootProps.open ?? uncontrolledPhoneOpen;
+	const [listSide, setListSide] = useState("bottom");
+	const [fieldLabel, setFieldLabel] = useState("");
+	const sheetNamed = sheetTitle != null || Boolean(inputLabel);
+	useLayoutEffect(() => {
+		if (mode !== "sheet" || !phoneOpen || sheetNamed) return;
+		setFieldLabel(readFieldLabel(triggerRef.current, inputLabelledBy));
+	}, [
+		mode,
+		phoneOpen,
+		sheetNamed,
+		inputLabelledBy
+	]);
+	const setSearchInput = useCallback((element) => {
+		searchInputRef.current = element;
+		assignRef(inputRef, element);
+	}, [inputRef]);
+	const onOpenChangeProp = rootProps.onOpenChange;
+	const openProp = rootProps.open;
+	const groups = normalized.groups;
+	const handlePhoneOpenChange = useCallback((next, details) => {
+		onOpenChangeProp?.(next, details);
+		if (details.isCanceled) return;
+		if (next && mode === "list") setListSide(measureListSide(fieldRef.current, groups));
+		if (!next && mode === "sheet") handleInputValueChange("", syntheticDetails("input-clear", details.event));
+		if (openProp === void 0) setUncontrolledPhoneOpen(next);
+	}, [
+		onOpenChangeProp,
+		openProp,
+		mode,
+		groups,
+		handleInputValueChange
+	]);
+	const handleSheetValueChange = useCallback((next, details) => {
+		handleValueChange(next, details);
+		if (!multiple && !details.isCanceled) handlePhoneOpenChange(false, details);
+	}, [
+		handleValueChange,
+		multiple,
+		handlePhoneOpenChange
+	]);
+	const handlePhoneClear = useCallback((event) => {
+		handleValueChange(multiple ? [] : null, syntheticDetails("clear-press", event.nativeEvent));
+	}, [handleValueChange, multiple]);
+	const focusSearchInput = useCallback(() => searchInputRef.current, []);
+	if (mode !== "field") {
+		const placeholderText = /* @__PURE__ */ jsx("span", {
+			className: "r-combobox-select__placeholder",
+			children: placeholder
+		});
+		const phoneValue = multiple ? selected.length ? /* @__PURE__ */ jsxs("span", {
+			className: "r-combobox-select__chips",
+			children: [selected.slice(0, tagLimit).map((record) => /* @__PURE__ */ jsx("span", {
+				className: "r-combobox-select__chip",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "r-combobox-select__text",
+					children: record.option === void 0 ? record.label : renderTag?.(record.option) ?? recordLabel(record, renderLabel)
+				})
+			}, optionKey(record.value))), overflow]
+		}) : placeholderText : selected[0] ? /* @__PURE__ */ jsx("span", {
+			className: "r-combobox-select__value",
+			children: selected[0].label
+		}) : placeholderText;
+		const phoneClear = clearable && selected.length > 0 && !disabled && !readOnly ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "r-combobox-select__action r-combobox-select__clear",
+			"aria-label": strings.clear,
+			onClick: handlePhoneClear,
+			children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+		}) : null;
+		const phoneActions = /* @__PURE__ */ jsxs("span", {
+			className: "r-combobox-select__actions",
+			children: [
+				loadingIndicator,
+				phoneClear,
+				showArrow ? /* @__PURE__ */ jsx("span", {
+					className: "r-combobox-select__action r-combobox-select__arrow",
+					"aria-hidden": true,
+					children: /* @__PURE__ */ jsx(ChevronDown, {})
+				}) : null
+			]
+		});
+		const phoneControlClassName = [
+			css,
+			"r-combobox-select__control r-combobox-select__control--trigger has-focus-visible:shadow-focus",
+			className
+		].filter(Boolean).join(" ");
+		const triggerProps = {
+			ref: triggerRef,
+			id,
+			"data-slot": "combobox-select-trigger",
+			className: "r-combobox-select__trigger",
+			"aria-label": inputLabel,
+			"aria-labelledby": inputLabelledBy,
+			"aria-describedby": inputDescribedBy,
+			"aria-invalid": inputInvalid
+		};
+		const field = (trigger) => /* @__PURE__ */ jsxs("div", {
+			ref: fieldRef,
+			"data-slot": "combobox-select",
+			"data-status": status,
+			"data-disabled": disabled || void 0,
+			"data-readonly": readOnly || void 0,
+			"data-popup-open": phoneOpen || void 0,
+			className: phoneControlClassName,
+			style,
+			children: [trigger, phoneActions]
+		});
+		if (mode === "list") {
+			const anchoredPopupClassName = `${popupClassName} r-combobox-select__popup--anchored`;
+			const hasOptions = normalized.groups.some((group) => group.items.length > 0);
+			return /* @__PURE__ */ jsxs(Select.Root, {
+				multiple,
+				value: controlValue,
+				onValueChange: valueChange,
+				open: phoneOpen,
+				onOpenChange: handlePhoneOpenChange,
+				onOpenChangeComplete: rootProps.onOpenChangeComplete,
+				modal: false,
+				name: rootProps.name,
+				form: rootProps.form,
+				required: rootProps.required,
+				autoComplete: rootProps.autoComplete,
+				disabled,
+				readOnly,
+				itemToStringLabel,
+				itemToStringValue,
+				isItemEqualToValue,
+				children: [field(/* @__PURE__ */ jsx(Select.Trigger, {
+					...triggerProps,
+					children: phoneValue
+				})), /* @__PURE__ */ jsx(Select.Portal, {
+					...scopedPortalProps,
+					children: /* @__PURE__ */ jsx(Select.Positioner, {
+						anchor: fieldRef,
+						side: listSide,
+						align: "start",
+						sideOffset: 4,
+						alignItemWithTrigger: false,
+						collisionAvoidance: PHONE_LIST_COLLISION,
+						className: positionerClassName,
+						children: /* @__PURE__ */ jsxs(Select.Popup, {
+							"data-slot": "combobox-select-popup",
+							className: anchoredPopupClassName,
+							children: [
+								loading ? /* @__PURE__ */ jsx("div", {
+									role: "status",
+									className: "r-combobox-select__message",
+									children: loadingContent
+								}) : null,
+								/* @__PURE__ */ jsx(Select.List, {
+									className: "r-combobox-select__list",
+									"aria-busy": loading,
+									children: normalized.groups.map((group) => /* @__PURE__ */ jsxs(Select.Group, { children: [group.label == null ? null : /* @__PURE__ */ jsx(Select.GroupLabel, {
+										className: "r-combobox-select__group-label",
+										children: group.label
+									}), group.items.map((record) => renderSelectOption({
+										record,
+										selected: selected.some((item) => item.value === record.value),
+										loading,
+										renderLabel,
+										renderOption
+									}))] }, group.key))
+								}),
+								!hasOptions ? emptyMessage : null
+							]
+						})
+					})
+				})]
+			});
+		}
+		const titleId = `${id}-sheet-title`;
+		const sheetCss = `r-combobox-select r-combobox-select--md${resolvedMode === "dark" ? " r-combobox-select--dark" : ""} r-combobox-select__sheet`;
+		const hiddenInputs = rootProps.name ? selectedKeys.map((key) => /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name: rootProps.name,
+			form: rootProps.form,
+			value: String(key),
+			disabled
+		}, optionKey(key))) : null;
+		return /* @__PURE__ */ jsxs(Drawer, {
+			open: phoneOpen,
+			onOpenChange: handlePhoneOpenChange,
+			onOpenChangeComplete: rootProps.onOpenChangeComplete,
+			children: [
+				field(/* @__PURE__ */ jsx(DrawerTrigger, {
+					...triggerProps,
+					disabled,
+					role: "combobox",
+					"aria-haspopup": "dialog",
+					"aria-expanded": phoneOpen,
+					"aria-readonly": readOnly || void 0,
+					"aria-required": rootProps.required || void 0,
+					children: phoneValue
+				})),
+				hiddenInputs,
+				/* @__PURE__ */ jsx(DrawerContent, {
+					portalProps,
+					"data-slot": "combobox-select-sheet",
+					className: "r-combobox-select__sheet-popup",
+					initialFocus: create || creatable ? focusSearchInput : void 0,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: sheetCss,
+						children: [
+							/* @__PURE__ */ jsxs(DrawerHeader, {
+								className: "r-combobox-select__sheet-header",
+								children: [/* @__PURE__ */ jsx(DrawerTitle, {
+									id: titleId,
+									className: "r-combobox-select__sheet-title",
+									children: sheetTitle ?? inputLabel ?? (fieldLabel || placeholder)
+								}), /* @__PURE__ */ jsx(DrawerClose, { "aria-label": strings.close })]
+							}),
+							/* @__PURE__ */ jsxs(Combobox.Root, {
+								inline: true,
+								multiple,
+								disabled,
+								readOnly,
+								items,
+								value: controlValue,
+								onValueChange: handleSheetValueChange,
+								inputValue,
+								defaultInputValue,
+								onInputValueChange: handleInputValueChange,
+								filter: filterOptions,
+								itemToStringLabel,
+								itemToStringValue,
+								isItemEqualToValue,
+								autoHighlight,
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "r-combobox-select__sheet-search",
+									children: /* @__PURE__ */ jsxs(Combobox.InputGroup, {
+										className: "r-combobox-select__control has-focus-visible:shadow-focus",
+										children: [
+											/* @__PURE__ */ jsx(Search, {
+												className: "r-combobox-select__search-icon",
+												"aria-hidden": true
+											}),
+											/* @__PURE__ */ jsx(Combobox.Input, {
+												...inputProps,
+												ref: setSearchInput,
+												id: `${id}-search`,
+												"data-slot": "combobox-select-input",
+												className: inputClassName,
+												"aria-labelledby": titleId,
+												placeholder: strings.search,
+												readOnly: inputReadOnly,
+												enterKeyHint: "search"
+											}),
+											loadingIndicator
+										]
+									})
+								}), /* @__PURE__ */ jsxs(DrawerBody, {
+									className: "r-combobox-select__sheet-body",
+									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 })
+									]
+								})]
+							}),
+							multiple ? /* @__PURE__ */ jsx(DrawerFooter, { children: /* @__PURE__ */ jsx(DrawerActions, { children: /* @__PURE__ */ jsx(DrawerClose, {
+								render: /* @__PURE__ */ jsx(Button$1, { size: "lg" }),
+								children: strings.done
+							}) }) }) : null
+						]
+					})
+				})
+			]
+		});
+	}
 	return /* @__PURE__ */ jsxs(Combobox.Root, {
 		...rootProps,
 		id,
@@ -498,7 +903,7 @@ function AnnouncementDialogFooter({ className, ...props }) {
 }
 function AnnouncementDialogAction({ className, ...props }) {
 	const { action } = announcement();
-	return /* @__PURE__ */ jsx(Button, {
+	return /* @__PURE__ */ jsx(Button$1, {
 		variant: "accent",
 		"data-announcement-action": true,
 		className: action({ className }),
@@ -507,11 +912,502 @@ function AnnouncementDialogAction({ className, ...props }) {
 }
 function AnnouncementDialogSecondaryAction({ className, ...props }) {
 	const { secondary } = announcement();
-	return /* @__PURE__ */ jsx(Button, {
+	return /* @__PURE__ */ jsx(Button$1, {
 		variant: "ghost",
 		className: secondary({ className }),
 		...props
 	});
 }
 //#endregion
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, ComboboxSelect };
+//#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-pressed active:bg-fill-pressed",
+			"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"
+		],
+		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-brand-soft"
+		],
+		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:press-overlay active:press-overlay",
+			"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.
+*/
+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
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits };