@botiverse/raft-ui 0.10.4 → 0.10.5

package/dist/wip.mjs

@@ -1,8 +1,54 @@
-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, O as DialogTrigger, a as DrawerContent, c as DrawerHeader, d as DrawerTitle, f as DrawerTrigger, g as Dialog, i as DrawerClose, k as Button, 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 { useCallback, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 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 +76,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 +118,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 +196,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 +465,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, { size: "lg" }),
+								children: strings.done
+							}) }) }) : null
+						]
+					})
+				})
+			]
+		});
+	}
 	return /* @__PURE__ */ jsxs(Combobox.Root, {
 		...rootProps,
 		id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",

package/skills/raft-ui-critique/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: raft-ui-critique
-description: "Critique raft-ui components and product surfaces from screenshots, live renders, or code evidence in Light and Dark modes. Use when reviewing, auditing, polishing, comparing, or validating visual hierarchy, Raft fidelity, interaction feedback, accessibility, consistency, and user experience in packages/ui, docs compositions, or Playground."
+description: "Critique raft-ui components and product surfaces from screenshots, live renders, or code evidence in Light and Dark modes. Use when reviewing, auditing, polishing, comparing, or validating visual hierarchy, Raft fidelity, interaction feedback, accessibility, consistency, and user experience in packages/ui or docs compositions."
 ---
 
 # Raft UI Critique
@@ -63,7 +63,7 @@ Compare like for like:
 - Use the same component, content, state, viewport dimensions, zoom, and motion frame.
 - Keep surrounding context equivalent. A fragment without its normal shell cannot prove page hierarchy.
 - Record which interaction states are shown: default, hover, pressed, focus-visible, disabled, selected, open, checked, invalid, loading, or empty, as applicable.
-- Separate the live primitive, docs composition, and Playground wrapper. Never treat one as proof for another.
+- Separate the live primitive and the docs composition. Never treat one as proof for the other.
 
 Record an evidence manifest with the route or artifact, preset, exact viewport, browser/platform when known, zoom, font-loading status, UI state, and reduced-motion setting when motion is relevant. For a full product-surface review, include a representative wide and narrow viewport when the layout is responsive; a single isolated primitive may need only its relevant size.
 
@@ -118,7 +118,7 @@ When code is available, connect each visual issue to the most likely owner witho
 
 - Reusable appearance or interaction styling: `packages/ui` component recipe or semantic tokens.
 - Canonical example structure: docs module composition.
-- Product state or workflow coordination: Playground or application consumer.
+- Product state or workflow coordination: the docs composition or the application consumer.
 - Global token and font material: `foundation.css` / `fonts.css` (see Package evidence lookup).
 
 State whether the cause is observed, code-verified, or inferred. Do not prescribe a new token for a one-off correction, and do not patch a consumer to compensate for a broken reusable component contract.