@parallelworks/ui 0.80.0 → 0.82.0

package/dist/components/CopyButton.js

@@ -4,7 +4,7 @@ import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
 import { useCopy } from "./useCopy.js";
 import { IconButton } from "./IconButton.js";
-import { useState } from "react";
+import { useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/CopyButton.tsx
 /** The one copy control: a button that copies its text, turns into a check for a
@@ -40,12 +40,60 @@ function CopyButton({ text, label, quiet = false, showLabel = false, variant = s
 		onClick
 	});
 }
+var NO_ENDS = {
+	start: false,
+	end: false
+};
+function useHiddenEnds(active) {
+	const ref = useRef(null);
+	const [ends, setEnds] = useState(NO_ENDS);
+	const measureNow = () => {
+		const el = ref.current;
+		if (!el || !active) {
+			setEnds(NO_ENDS);
+			return;
+		}
+		const scrolled = Math.abs(el.scrollLeft);
+		const start = scrolled > 1;
+		const end = scrolled + el.clientWidth < el.scrollWidth - 1;
+		setEnds((was) => was.start === start && was.end === end ? was : {
+			start,
+			end
+		});
+	};
+	const measure = useEffectEvent(measureNow);
+	useLayoutEffect(() => {
+		measure();
+	});
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el || !active || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => measure());
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [active]);
+	return {
+		ref,
+		ends,
+		onScroll: measureNow
+	};
+}
+var FADE = "1.25rem";
+function fadeMask({ start, end }) {
+	if (!start && !end) return;
+	const image = `linear-gradient(to var(--fade-end, right), ${start ? `transparent, #000 ${FADE}` : "#000"}, ${end ? `#000 calc(100% - ${FADE}), transparent` : "#000"})`;
+	return {
+		maskImage: image,
+		WebkitMaskImage: image
+	};
+}
 var MASK = "•".repeat(24);
 /** A block of code, such as a command to run, with a button that copies it. The
 *  buttons show while the pointer is over the block or focus is in it, and always
-*  where there is no hover to reveal them. With `secret` it holds a value shown once,
-*  such as a new API key: masked until the eye shows it, and copied either way. */
-function CopyCodeBlock({ text, label, children, secret = false, revealed: revealedProp, defaultRevealed = false, onRevealedChange, wrap = false, className }) {
+*  where there is no hover to reveal them. With `inline` it is a compact value in the line
+*  instead, such as a token shown once, its buttons always beside it. With `secret` it
+*  masks the value until the eye shows it, and copies it either way. */
+function CopyCodeBlock({ text, label, children, secret = false, revealed: revealedProp, defaultRevealed = false, onRevealedChange, inline = false, wrap = false, className }) {
 	const { common: t } = useStrings();
 	const [ownRevealed, setOwnRevealed] = useState(defaultRevealed);
 	const revealed = revealedProp ?? ownRevealed;
@@ -63,6 +111,39 @@ function CopyCodeBlock({ text, label, children, secret = false, revealed: reveal
 		className: "sr-only",
 		children: t.hiddenValue
 	})] });
+	const scroller = useHiddenEnds(inline && !wrap);
+	const overflows = scroller.ends.start || scroller.ends.end;
+	const revealButton = secret && /* @__PURE__ */ jsx(IconButton, {
+		label: t.showValue,
+		icon: revealed ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}),
+		pressed: revealed,
+		onClick: () => setRevealed(!revealed),
+		size: inline ? "xs" : "sm",
+		className: inline ? void 0 : cx("bg-(--theme-muted-panel-bg)", reveal)
+	});
+	if (inline) return /* @__PURE__ */ jsxs("span", {
+		className: cx("inline-flex max-w-full items-start gap-1 rounded-md border border-current/15 bg-(--theme-panel-bg)/70 py-px ps-2 pe-px align-middle", "has-[code:focus-visible]:outline-2 has-[code:focus-visible]:outline-offset-1 has-[code:focus-visible]:outline-(--theme-focus)", className),
+		children: [/* @__PURE__ */ jsx("code", {
+			ref: scroller.ref,
+			onScroll: scroller.onScroll,
+			...overflows ? {
+				tabIndex: 0,
+				role: "region",
+				"aria-label": label ?? t.codeOf("")
+			} : {},
+			style: fadeMask(scroller.ends),
+			className: cx("min-w-0 py-[3px] font-mono text-[0.8125rem] leading-[18px] text-(--theme-app)", "outline-none", "rtl:[--fade-end:left]", wrap ? "break-all whitespace-pre-wrap" : "overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"),
+			children: shown
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex shrink-0 items-center",
+			children: [/* @__PURE__ */ jsx(CopyButton, {
+				text,
+				label,
+				size: "xs",
+				quiet: true
+			}), revealButton]
+		})]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("group/code relative", className),
 		children: [/* @__PURE__ */ jsx("pre", {
@@ -70,13 +151,7 @@ function CopyCodeBlock({ text, label, children, secret = false, revealed: reveal
 			children: shown
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "absolute top-2 right-2 flex items-center gap-1",
-			children: [secret && /* @__PURE__ */ jsx(IconButton, {
-				label: t.showValue,
-				icon: revealed ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}),
-				pressed: revealed,
-				onClick: () => setRevealed(!revealed),
-				className: cx("bg-(--theme-muted-panel-bg)", reveal)
-			}), /* @__PURE__ */ jsx(CopyButton, {
+			children: [revealButton, /* @__PURE__ */ jsx(CopyButton, {
 				text,
 				label,
 				className: cx("bg-(--theme-muted-panel-bg)", reveal)

package/dist/components/CreateModal.d.ts

@@ -40,7 +40,9 @@ interface CreateModalProps {
     dirty?: boolean;
     /** Show a favorite toggle in the footer. */
     showFavorite?: boolean;
-    /** Muted text at the footer's start, such as which keys submit. `error` takes its place. */
+    /** Muted text at the footer's start, such as which keys submit, written with `Kbd` so each
+     *  reader sees their own keyboard's modifier. Hidden on a touch screen, where keys mean
+     *  nothing. `error` takes its place. */
     footerHint?: ReactNode;
     /** Why the last submit failed, at the footer's start, read out as it appears. */
     error?: ReactNode;

package/dist/components/CreateModal.js

@@ -6,12 +6,13 @@ import { useStrings } from "./Provider.js";
 import { ActionMenu } from "./ActionMenu.js";
 import { Button } from "./Button.js";
 import { ErrorText } from "./Field.js";
+import { useAutosize } from "./Input.js";
 import { comboboxLeaves } from "./comboboxItems.js";
 import { Combobox } from "./Combobox.js";
 import { Modal } from "./Modal.js";
 import { Disclosure } from "./Disclosure.js";
 import { Switch } from "./Switch.js";
-import { useId, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/CreateModal.tsx
@@ -30,6 +31,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSea
 	const [nameTouched, setNameTouched] = useState(false);
 	const [interacted, setInteracted] = useState(false);
 	const nameRef = useRef(null);
+	const { element: nameSizer, resize: resizeName } = useAutosize(open && !hideName, name);
 	const nameMessageId = useId();
 	const session = open ? initialName ?? "" : null;
 	const [shownSession, setShownSession] = useState(session);
@@ -48,7 +50,17 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSea
 	const hint = !nameError && name.trim() ? nameHint?.(name.trim()) : null;
 	const canSubmit = (hideName || nameOptional || name.trim().length > 0) && !nameError && !submitting && !submitDisabled;
 	const isDirty = !submitting && (interacted || name !== (initialName ?? "") || description !== "" || favorite || dirty);
-	const nameMissing = !hideName && !nameOptional && (!name.trim() || !!nameError) && (nameTouched || description !== "" || favorite || dirty);
+	const nameMissing = !hideName && !nameOptional && (!name.trim() || !!nameError) && nameTouched;
+	const focusInside = useRef(false);
+	const leaveCheck = useRef(void 0);
+	useEffect(() => () => clearTimeout(leaveCheck.current), []);
+	const checkLeft = () => {
+		focusInside.current = false;
+		clearTimeout(leaveCheck.current);
+		leaveCheck.current = setTimeout(() => {
+			if (!focusInside.current && document.hasFocus() && !nameRef.current?.value.trim()) setNameTouched(true);
+		});
+	};
 	const flashName = () => {
 		setNameTouched(true);
 		nameRef.current?.focus();
@@ -78,15 +90,18 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSea
 		size,
 		dismissible: !isDirty,
 		initialFocus: () => nameRef.current ?? true,
+		onFocus: () => {
+			focusInside.current = true;
+		},
 		onKeyDown: (e) => {
 			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit(true);
 		},
 		onMouseDown: (e) => {
-			if (e.target instanceof Element && !e.target.closest("input, textarea, button, a, select, label, code, pre, .select-all")) e.preventDefault();
+			if (e.target instanceof Element && !e.target.closest("input, textarea, button, a, select, label, code, pre, .select-all, [contenteditable]:not([contenteditable=\"false\"])")) e.preventDefault();
 		},
 		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			(showFavorite || footerHint || error) && /* @__PURE__ */ jsxs("div", {
-				className: "me-auto flex min-w-0 items-center gap-3",
+				className: cx("me-auto flex min-w-0 items-center gap-3", !showFavorite && !error && "pointer-coarse:hidden"),
 				children: [showFavorite && /* @__PURE__ */ jsx(Tooltip, {
 					content: favorite ? t.favoriteHintOn : t.favoriteHintOff,
 					children: /* @__PURE__ */ jsxs(Toggle, {
@@ -100,7 +115,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSea
 						children: [favorite ? /* @__PURE__ */ jsx(FavoriteIcon, { className: "text-(--theme-favorite)" }) : /* @__PURE__ */ jsx(FavoriteOutlineIcon, {}), favorite ? t.favorited : t.favorite]
 					})
 				}), error ? /* @__PURE__ */ jsx(ErrorText, { children: error }) : footerHint && /* @__PURE__ */ jsx("p", {
-					className: "m-0 min-w-0 text-xs text-(--theme-muted-text-color)",
+					className: "m-0 min-w-0 text-xs text-(--theme-muted-text-color) pointer-coarse:hidden",
 					children: footerHint
 				})]
 			}),
@@ -141,19 +156,24 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSea
 						children: [typeIcon, typeLabel]
 					}),
 					hideName ? /* @__PURE__ */ jsx("div", { className: "mt-3" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-						/* @__PURE__ */ jsx("input", {
-							ref: nameRef,
-							type: "text",
+						/* @__PURE__ */ jsx("textarea", {
+							ref: (element) => {
+								nameRef.current = element;
+								nameSizer.current = element;
+							},
+							rows: 1,
 							autoComplete: "off",
 							"data-1p-ignore": true,
 							value: name,
 							onChange: (e) => {
-								const next = sanitizeName ? sanitizeName(e.target.value) : e.target.value;
+								const joined = e.target.value.replace(/\s*\n+\s*/g, " ");
+								const next = sanitizeName ? sanitizeName(joined) : joined;
 								setName(next);
 								onNameChange?.(next);
+								resizeName?.();
 							},
 							onBlur: (e) => {
-								if (!e.target.value.trim()) setNameTouched(true);
+								if (!e.target.value.trim()) checkLeft();
 							},
 							onKeyDown: (e) => {
 								if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.metaKey && !e.ctrlKey) {
@@ -168,7 +188,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSea
 							"aria-invalid": nameMissing || !!nameError,
 							"aria-describedby": nameError || hint ? nameMessageId : void 0,
 							onAnimationEnd: () => setNameFlash(false),
-							className: cx("mt-2 -mb-1 -mx-1.5 w-[calc(100%+0.75rem)] rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg font-medium text-(--theme-app) placeholder:text-(--theme-placeholder) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
+							className: cx("mt-2 -mb-1 -mx-1.5 block w-[calc(100%+0.75rem)] resize-none overflow-hidden rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg leading-snug font-medium text-(--theme-app) [field-sizing:content] placeholder:text-(--theme-placeholder) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
 						}),
 						nameError && /* @__PURE__ */ jsx("p", {
 							id: nameMessageId,

package/dist/components/DescriptionList.js

@@ -1,8 +1,8 @@
 import { cx } from "../cx.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
-import { InfoTip } from "./InfoTip.js";
 import { CopyButton } from "./CopyButton.js";
+import { InfoTip } from "./InfoTip.js";
 import { withPathBreaks } from "./pathBreaks.js";
 import { createContext, useContext, useId, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Drawer.js

@@ -47,7 +47,7 @@ function Drawer$1({ open, onClose, title, description, onBack, backLabel, footer
 			container: contained ? container : portal.container,
 			keepMounted,
 			className: contained ? "contents" : portal.className,
-			children: [modal !== false && /* @__PURE__ */ jsx(Drawer.Backdrop, { className: cx(area, "z-(--layer-drawer) bg-black/40 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 motion-reduce:transition-none") }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+			children: [modal !== false && /* @__PURE__ */ jsx(Drawer.Backdrop, { className: cx(area, "z-(--layer-drawer) bg-(--theme-backdrop) opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 motion-reduce:transition-none") }), /* @__PURE__ */ jsx(Drawer.Viewport, {
 				ref: viewport,
 				className: cx(area, "pointer-events-none z-(--layer-drawer) flex", side === "right" ? "justify-end pl-[max(var(--app-inset-start,0px),2.5rem)]" : "justify-start pl-(--app-inset-start,0px) pr-10"),
 				children: /* @__PURE__ */ jsxs(Drawer.Popup, {

package/dist/components/Input.d.ts

@@ -46,6 +46,11 @@ export declare function framed({ label, hint, help, actions, description, error,
 /** A single-line text field. `type="password"` adds a button that shows what was typed. Placed in
  *  a Field, it takes the Field's label, description and invalid state. */
 export declare function Input({ label, hint, help, description, error, className, mono, size, type, ref, ...props }: InputProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+/** Sets a textarea's height to its text's while the browser can't, from its value. */
+export declare function useAutosize(enabled: boolean, value: unknown): {
+    element: import("react").RefObject<HTMLTextAreaElement | null>;
+    resize: (() => void) | undefined;
+};
 /** A multi-line text field that grows by hand, or with its text with `autosize`. Placed in a
  *  Field, it takes the Field's label, description and invalid state. */
 export declare function Textarea({ label, hint, help, description, error, className, mono, size, ref, autosize, bare, secret, style, ...props }: TextareaProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/components/Input.js

@@ -168,7 +168,7 @@ function TitleInput({ value, onCommit, autoSelect = false, size = "xl", readOnly
 		setShown(value);
 		if (!editing.current) setDraft(value);
 	}
-	const { resize } = useAutosize(true, draft);
+	const { element: sizer, resize } = useAutosize(true, draft);
 	useEffect(() => {
 		if (autoSelect && element.current) {
 			element.current.focus();
@@ -177,9 +177,10 @@ function TitleInput({ value, onCommit, autoSelect = false, size = "xl", readOnly
 	}, []);
 	const setRef = useCallback((el) => {
 		element.current = el;
+		sizer.current = el;
 		if (typeof ref === "function") ref(el);
 		else if (ref) ref.current = el;
-	}, [ref]);
+	}, [ref, sizer]);
 	return /* @__PURE__ */ jsx("textarea", {
 		...props,
 		ref: setRef,
@@ -218,4 +219,4 @@ function TitleInput({ value, onCommit, autoSelect = false, size = "xl", readOnly
 	});
 }
 //#endregion
-export { Input$1 as Input, Textarea, TitleInput, framed };
+export { Input$1 as Input, Textarea, TitleInput, framed, useAutosize };

package/dist/components/Listbox.d.ts

@@ -6,7 +6,9 @@ export interface ListboxNavigationOptions<T> {
     onChoose: (item: T, index: number) => void;
     /** Called on Escape, such as to close the list until the text changes. */
     onDismiss?: (() => void) | undefined;
-    /** False while the list isn't shown: the keys are then the host's own. Default true. */
+    /** False while the list isn't shown: the keys are then the host's own. A list that hides
+     *  itself while empty passes false then too, or Escape dismisses what isn't there. Default
+     *  true. */
     open?: boolean | undefined;
     /** Past the end comes the start, and before the start the end. Default true. */
     loop?: boolean | undefined;
@@ -91,10 +93,17 @@ export interface ListboxOptionProps {
     inline?: boolean | undefined;
     /** Short muted text at the row's end, such as a key. */
     hint?: ReactNode;
+    /** In a list of choices that stay chosen, such as the labels on an issue: true shows the
+     *  check at the row's end and tells assistive technology, false leaves it unchecked. Leave
+     *  it out for a list that only acts. */
+    checked?: boolean | undefined;
+    /** The option opens more choices, such as a submenu or a next step: a chevron ends the row. */
+    submenu?: boolean | undefined;
     className?: string | undefined;
 }
-/** One option of a ListboxPanel: an icon, its label and description, and a hint at its end. */
-export declare function ListboxOption({ option, icon, label, description, inline, hint, className, }: ListboxOptionProps): import("react").JSX.Element;
+/** One option of a ListboxPanel: an icon, its label and description, and at its end a hint, a
+ *  check while it is chosen and a chevron when it opens more. */
+export declare function ListboxOption({ option, icon, label, description, inline, hint, checked, submenu, className, }: ListboxOptionProps): import("react").JSX.Element;
 /** Options under a heading in a ListboxPanel. */
 export declare function ListboxGroup({ label, children }: {
     label: ReactNode;

package/dist/components/Listbox.js

@@ -1,8 +1,9 @@
 import { cx } from "../cx.js";
+import { CheckIcon, ChevronRightIcon } from "../icons.js";
 import { panelClassName, panelItemClassName } from "./floating.js";
 import { Popover } from "./Popover.js";
 import "./comboboxItems.js";
-import { useEffect, useId, useState } from "react";
+import { Children, useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Listbox.tsx
 /** The parts a highlighted list needs while focus stays on the box the reader types in, such
@@ -44,7 +45,14 @@ function useListboxNavigation({ items, onChoose, onDismiss, open = true, loop =
 	/** Handles a key the list owns, and says whether it did; leave the rest to the host. */
 	const handleKey = (event) => {
 		const composing = "nativeEvent" in event ? event.nativeEvent.isComposing : event.isComposing;
-		if (!shownOpen || composing) return false;
+		if (!open || composing) return false;
+		if (event.key === "Escape") {
+			if (!onDismiss) return false;
+			onDismiss();
+			event.preventDefault();
+			return true;
+		}
+		if (!shownOpen) return false;
 		const ctrlOnly = event.ctrlKey && !event.metaKey && !event.altKey;
 		switch (true) {
 			case event.key === "ArrowDown" || ctrlOnly && event.key === "n":
@@ -59,10 +67,6 @@ function useListboxNavigation({ items, onChoose, onDismiss, open = true, loop =
 			case homeEnd && event.key === "End":
 				setActive(step(count, -1));
 				break;
-			case event.key === "Escape":
-				if (!onDismiss) return false;
-				onDismiss();
-				break;
 			case event.key === "Enter" || chooseKeys.includes(event.key):
 				if (event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return false;
 				choose(shown);
@@ -110,7 +114,7 @@ function useListboxNavigation({ items, onChoose, onDismiss, open = true, loop =
 }
 /** The panel of a highlighted list that the reader drives from a box that keeps focus. */
 function ListboxPanel({ listProps, "aria-label": label, footer, empty, at, onDismiss, className, children }) {
-	const hasOptions = Array.isArray(children) ? children.some(Boolean) : Boolean(children);
+	const hasOptions = Children.toArray(children).length > 0;
 	const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		id: listProps.id,
 		role: "listbox",
@@ -143,11 +147,17 @@ function ListboxPanel({ listProps, "aria-label": label, footer, empty, at, onDis
 		children: body
 	});
 }
-/** One option of a ListboxPanel: an icon, its label and description, and a hint at its end. */
-function ListboxOption({ option, icon, label, description, inline = false, hint, className }) {
+/** One option of a ListboxPanel: an icon, its label and description, and at its end a hint, a
+*  check while it is chosen and a chevron when it opens more. */
+function ListboxOption({ option, icon, label, description, inline = false, hint, checked, submenu = false, className }) {
+	const checkable = checked !== void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		...option,
-		className: cx(panelItemClassName, inline && "items-baseline", className),
+		role: "option",
+		tabIndex: -1,
+		"aria-checked": checked,
+		"data-checked": checked || void 0,
+		className: cx(panelItemClassName, inline && "items-baseline", checked && "font-medium", className),
 		children: [
 			icon && /* @__PURE__ */ jsx("span", {
 				className: "flex shrink-0 items-center self-center",
@@ -163,12 +173,25 @@ function ListboxOption({ option, icon, label, description, inline = false, hint,
 					children: description
 				})]
 			}),
-			hint && /* @__PURE__ */ jsx("span", {
+			(hint || checkable || submenu) && /* @__PURE__ */ jsxs("span", {
 				className: "ml-auto flex h-[1lh] shrink-0 items-center gap-2 self-start pl-2",
-				children: /* @__PURE__ */ jsx("span", {
-					className: "text-xs tabular-nums text-(--theme-muted-text-color)",
-					children: hint
-				})
+				children: [
+					hint && /* @__PURE__ */ jsx("span", {
+						className: "text-xs tabular-nums text-(--theme-muted-text-color)",
+						children: hint
+					}),
+					checkable && (checked || hint) && /* @__PURE__ */ jsx("span", {
+						className: cx("flex items-center", hint && "w-3.5"),
+						children: checked && /* @__PURE__ */ jsx(CheckIcon, {
+							"aria-hidden": "true",
+							className: "size-3.5"
+						})
+					}),
+					submenu && /* @__PURE__ */ jsx(ChevronRightIcon, {
+						"aria-hidden": "true",
+						className: "size-3 opacity-60"
+					})
+				]
 			})
 		]
 	});

package/dist/components/MarkdownImpl.js

@@ -1,15 +1,16 @@
 import { cx } from "../cx.js";
+import { CodeBlock } from "./CodeBlock.js";
 import { ExternalLink } from "./ExternalLink.js";
 import { readIsDark } from "./useCssIsDark.js";
 import { CODE_THEMES } from "./codeTheme.js";
 import { rehypeHttpsImagesOnly } from "./httpsImages.js";
 import { rehypeCodeBreaks } from "./markdownCodeBreaks.js";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
 import "katex/dist/katex.min.css";
-import { Streamdown, defaultRehypePlugins } from "streamdown";
+import { Streamdown, defaultComponents, defaultRehypePlugins, useIsCodeFenceIncomplete } from "streamdown";
 //#region src/components/MarkdownImpl.tsx
 var basePlugins = {
 	code,
@@ -35,6 +36,81 @@ function loadMermaid() {
 }
 var rehypePlugins = [...Object.values(defaultRehypePlugins), rehypeCodeBreaks];
 var httpsImagesRehypePlugins = [...Object.entries(defaultRehypePlugins).flatMap(([name, plugin]) => name === "harden" ? [rehypeHttpsImagesOnly, plugin] : [plugin]), rehypeCodeBreaks];
+function codeControls(controls) {
+	if (controls === false) return {
+		copy: false,
+		download: null
+	};
+	const code = controls === void 0 || controls === true ? true : controls.code;
+	if (code === false) return {
+		copy: false,
+		download: null
+	};
+	if (code === void 0 || code === true) return {
+		copy: true,
+		download: "file"
+	};
+	const { download } = code;
+	return {
+		copy: code.copy !== false,
+		download: download === false ? null : typeof download === "object" ? download.filename : "file"
+	};
+}
+var EXTENSIONS = {
+	javascript: "js",
+	typescript: "ts",
+	python: "py",
+	ruby: "rb",
+	rust: "rs",
+	golang: "go",
+	bash: "sh",
+	shell: "sh",
+	shellscript: "sh",
+	zsh: "sh",
+	console: "sh",
+	markdown: "md",
+	text: "txt",
+	plaintext: "txt",
+	csharp: "cs",
+	kotlin: "kt",
+	powershell: "ps1",
+	dockerfile: "Dockerfile"
+};
+function extensionFor(language) {
+	const lang = language.toLowerCase();
+	return EXTENSIONS[lang] ?? (/^[a-z0-9+]{1,10}$/.test(lang) ? lang : "txt");
+}
+var LANGUAGE = /language-([^\s]+)/;
+var START_LINE = /startLine=(\d+)/;
+var NO_LINE_NUMBERS = /\bnoLineNumbers\b/;
+var DefaultCode = defaultComponents.code;
+function textOf(children) {
+	if (typeof children === "string") return children;
+	if (Array.isArray(children)) return children.map(textOf).join("");
+	if (children && typeof children === "object" && "props" in children) return textOf(children.props.children);
+	return "";
+}
+function makeCode(controls, diagrams) {
+	return function MarkdownCode(props) {
+		const incomplete = useIsCodeFenceIncomplete();
+		const language = props.className?.match(LANGUAGE)?.[1] ?? "";
+		if (!("data-block" in props) || diagrams && language === "mermaid") return /* @__PURE__ */ jsx(DefaultCode, { ...props });
+		const meta = props.node?.properties?.["metastring"];
+		const metastring = typeof meta === "string" ? meta : "";
+		const start = Number.parseInt(metastring.match(START_LINE)?.[1] ?? "", 10);
+		return /* @__PURE__ */ jsx(CodeBlock, {
+			className: "my-3.5",
+			code: textOf(props.children),
+			language,
+			copy: controls.copy,
+			filename: controls.download === null ? void 0 : `${controls.download}.${extensionFor(language)}`,
+			lineNumbers: NO_LINE_NUMBERS.test(metastring) ? false : void 0,
+			startLine: start >= 1 ? start : 1,
+			maxHeight: 400,
+			streaming: incomplete
+		});
+	};
+}
 function MarkdownImpl({ children, isStreaming, controls, components, httpsImagesOnly, compact }) {
 	const needsMermaid = !!children && children.includes("```mermaid");
 	const [, setMermaidReady] = useState(() => !!pluginsWithMermaid);
@@ -49,6 +125,16 @@ function MarkdownImpl({ children, isStreaming, controls, components, httpsImages
 		};
 	}, [needsMermaid]);
 	const plugins = needsMermaid && pluginsWithMermaid ? pluginsWithMermaid : basePlugins;
+	const { copy, download } = codeControls(controls);
+	const diagrams = plugins === pluginsWithMermaid;
+	const code = useMemo(() => makeCode({
+		copy,
+		download
+	}, diagrams), [
+		copy,
+		download,
+		diagrams
+	]);
 	return /* @__PURE__ */ jsx("div", {
 		className: cx("markdown whitespace-normal text-start w-full", compact && "markdown-compact"),
 		children: /* @__PURE__ */ jsx(Streamdown, {
@@ -63,6 +149,7 @@ function MarkdownImpl({ children, isStreaming, controls, components, httpsImages
 			rehypePlugins: httpsImagesOnly ? httpsImagesRehypePlugins : rehypePlugins,
 			shikiTheme: CODE_THEMES,
 			components: {
+				code,
 				a: ({ node, ...props }) => /* @__PURE__ */ jsx(ExternalLink, {
 					...props,
 					className: cx("link wrap-break-word", props.className)

package/dist/components/MenuEntries.d.ts

@@ -9,6 +9,9 @@ interface MenuActionBase {
     /** The key that does the same from the page, such as `S` or `⌘K`, in plain text at the
      *  row's end. The menu doesn't bind it; the host does. */
     shortcut?: string | undefined;
+    /** Muted text at the row's end that tells rows apart, such as a team's key `CORE`. It is
+     *  read with the label, and a menu's search matches it. For a key to press, use `shortcut`. */
+    hint?: string | undefined;
     /** A small mark at the row's end, such as a dot for something unseen. It is hidden from
      *  screen readers, so say what it means in `label`. */
     badge?: ReactNode;

package/dist/components/MenuEntries.js

@@ -121,7 +121,7 @@ function SearchedEntries({ entries, search, query }) {
 	const matches = useQueryMatch();
 	if (!search) return /* @__PURE__ */ jsx(EntryRows, { entries });
 	const needle = query.trim();
-	const shown = needle ? searchMatches(entries, (a) => matches(needle, a.label, a.description, a.keywords), (submenu) => matches(needle, submenu.label, submenu.keywords)) : entries;
+	const shown = needle ? searchMatches(entries, (a) => matches(needle, a.label, a.description, a.keywords, a.hint), (submenu) => matches(needle, submenu.label, submenu.keywords)) : entries;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "sticky top-0 z-[1] bg-(--theme-app-bg) px-1 pt-0.5 pb-1",
@@ -183,6 +183,7 @@ function RowEnd({ children, className }) {
 		children
 	});
 }
+var hintClassName = "ps-3 text-xs text-(--theme-muted-text-color) in-data-[size=sm]:text-[11px]";
 var shortcutClassName = "ps-3 text-xs text-(--theme-muted-text-color) tabular-nums in-data-[size=sm]:text-[11px]";
 /** A row's icon, label, second line and end details, laid out alike in every kind of row. */
 function RowContent({ icon, label, description, end }) {
@@ -290,11 +291,19 @@ function ActionRow({ action }) {
 	const runAction = useRunAction();
 	const className = cx(action.description && "items-start", action.destructive && destructiveClassName, action.current && "font-medium");
 	const keyshortcuts = ariaKeyShortcut(action.shortcut);
+	const heard = action.hint && /* @__PURE__ */ jsxs("span", {
+		className: "sr-only",
+		children: [". ", action.hint]
+	});
 	const end = (trailing) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		action.badge !== void 0 && action.badge !== null && action.badge !== false && /* @__PURE__ */ jsx(RowEnd, {
 			className: "ps-2",
 			children: action.badge
 		}),
+		action.hint && /* @__PURE__ */ jsx(RowEnd, {
+			className: hintClassName,
+			children: action.hint
+		}),
 		action.shortcut && /* @__PURE__ */ jsx(RowEnd, {
 			className: shortcutClassName,
 			children: action.shortcut
@@ -314,7 +323,7 @@ function ActionRow({ action }) {
 			className,
 			children: /* @__PURE__ */ jsx(RowContent, {
 				icon: action.icon,
-				label: action.label,
+				label: /* @__PURE__ */ jsxs(Fragment$1, { children: [action.label, heard] }),
 				description: action.description,
 				end: end(action.current ? /* @__PURE__ */ jsx(RowEnd, {
 					className: "ps-2",
@@ -330,10 +339,14 @@ function ActionRow({ action }) {
 	const reason = action.disabled ? action.disabledReason : void 0;
 	const content = (trailing) => /* @__PURE__ */ jsx(RowContent, {
 		icon: action.icon,
-		label: /* @__PURE__ */ jsxs(Fragment$1, { children: [action.label, reason && /* @__PURE__ */ jsxs("span", {
-			className: "sr-only",
-			children: [". ", reason]
-		})] }),
+		label: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			action.label,
+			heard,
+			reason && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [". ", reason]
+			})
+		] }),
 		description: action.description,
 		end: end(trailing)
 	});

package/dist/components/Modal.d.ts

@@ -1,7 +1,7 @@
 import { Dialog } from '@base-ui/react/dialog';
 import { type FormEvent, type ReactNode } from 'react';
 /** The panel a modal draws by default; pass `panel={false}` to paint your own. */
-export declare const modalPanelClassName = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
+export declare const modalPanelClassName = "rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-2xl";
 /** Names the modal for assistive technology; renders an `<h2>`. */
 export declare const ModalTitle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
 /** Describes the modal for assistive technology; renders a `<p>`. */