@parallelworks/ui 0.79.0 → 0.81.0

package/dist/components/ContextMenu.d.ts

@@ -10,7 +10,11 @@ export interface OpenMenuOptions {
     size?: MenuSize | undefined;
     /** As `MenuPopup`'s: classes on the menu and its submenus, such as a terminal's colors. */
     themeClassName?: string | undefined;
+    /** What else closes it, for a menu over something that moves under it, such as a
+     *  terminal's: a wheel outside the menu, the window losing focus, or the window resizing. */
+    closeOn?: readonly MenuCloseTrigger[] | undefined;
 }
+export type MenuCloseTrigger = 'wheel' | 'blur' | 'resize';
 /** Where a menu opens: an element, such as the button that opened it, or a pointer event,
  *  such as a right-click. An event with Shift held is left to the browser, whose own menu
  *  then shows; any other has its default prevented. */
@@ -29,6 +33,7 @@ export type OpenMenu = (at: MenuOpener, items: MenuEntry[], options?: OpenMenuOp
  */
 export declare function useContextMenu(): {
     openMenu: OpenMenu;
+    closeMenu: () => void;
     contextMenu: import("react").JSX.Element | null;
     openedBy: Element | null;
 };
@@ -40,5 +45,8 @@ export declare function ContextMenuProvider({ children }: {
 /** Opens the app's one shared menu: `openMenu(e, items)` from a right-click, or
  *  `openMenu(button, items)` under a button, which a second press closes. */
 export declare function useOpenMenu(): OpenMenu;
+/** Closes the app's shared menu, if it is open, for a host whose surface moves out from under
+ *  it in a way `closeOn` doesn't cover, such as a pane that switches. */
+export declare function useCloseMenu(): () => void;
 /** The element the shared menu is open under, so its button can say it's expanded. */
 export declare function useMenuOpenedBy(): Element | null;

package/dist/components/ContextMenu.js

@@ -3,7 +3,7 @@ import { MenuPopup } from "./Menu.js";
 import { isDev } from "../dev.js";
 import { MenuEntries, MenuFilter } from "./MenuEntries.js";
 import { Menu } from "@base-ui/react/menu";
-import { createContext, use, useCallback, useRef, useState } from "react";
+import { createContext, use, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ContextMenu.tsx
 /**
@@ -44,6 +44,31 @@ function useContextMenu() {
 		setOpen(true);
 		return true;
 	}, [release]);
+	/** Closes the menu, if one is open, as Escape would. */
+	const closeMenu = useCallback(() => {
+		if (current.current) {
+			current.current = null;
+			setOpen(false);
+		}
+	}, []);
+	const closeOn = open ? opened?.closeOn : void 0;
+	useEffect(() => {
+		if (!closeOn?.length) return;
+		const onWheel = (event) => {
+			if (!(event.target instanceof Element && event.target.closest("[role=\"menu\"]"))) closeMenu();
+		};
+		const listeners = [];
+		if (closeOn.includes("wheel")) listeners.push(["wheel", onWheel]);
+		if (closeOn.includes("blur")) listeners.push(["blur", closeMenu]);
+		if (closeOn.includes("resize")) listeners.push(["resize", closeMenu]);
+		for (const [type, listener] of listeners) window.addEventListener(type, listener, {
+			capture: true,
+			passive: true
+		});
+		return () => {
+			for (const [type, listener] of listeners) window.removeEventListener(type, listener, { capture: true });
+		};
+	}, [closeOn, closeMenu]);
 	const onOpenChange = useCallback((next, details) => {
 		if (next) return;
 		const element = current.current?.element;
@@ -61,6 +86,7 @@ function useContextMenu() {
 	}, [release]);
 	return {
 		openMenu,
+		closeMenu,
 		contextMenu: opened && /* @__PURE__ */ jsx(MenuFilter, {
 			search: opened.search,
 			children: (query) => /* @__PURE__ */ jsx(Menu.Root, {
@@ -85,15 +111,19 @@ function useContextMenu() {
 }
 var OpenMenuContext = createContext(null);
 var OpenedByContext = createContext(null);
+var CloseMenuContext = createContext(null);
 /** The one menu every row, button and canvas below it opens through `useOpenMenu`, so none
 *  renders a menu of its own. `UIProvider` mounts it; nothing else needs to. */
 function ContextMenuProvider({ children }) {
-	const { openMenu, contextMenu, openedBy } = useContextMenu();
+	const { openMenu, closeMenu, contextMenu, openedBy } = useContextMenu();
 	return /* @__PURE__ */ jsx(OpenMenuContext, {
 		value: openMenu,
-		children: /* @__PURE__ */ jsxs(OpenedByContext, {
-			value: openedBy,
-			children: [children, contextMenu]
+		children: /* @__PURE__ */ jsx(CloseMenuContext, {
+			value: closeMenu,
+			children: /* @__PURE__ */ jsxs(OpenedByContext, {
+				value: openedBy,
+				children: [children, contextMenu]
+			})
 		})
 	});
 }
@@ -106,9 +136,15 @@ var warnNoProvider = () => {
 function useOpenMenu() {
 	return use(OpenMenuContext) ?? warnNoProvider;
 }
+var noMenu = () => {};
+/** Closes the app's shared menu, if it is open, for a host whose surface moves out from under
+*  it in a way `closeOn` doesn't cover, such as a pane that switches. */
+function useCloseMenu() {
+	return use(CloseMenuContext) ?? noMenu;
+}
 /** The element the shared menu is open under, so its button can say it's expanded. */
 function useMenuOpenedBy() {
 	return use(OpenedByContext);
 }
 //#endregion
-export { ContextMenuProvider, useContextMenu, useMenuOpenedBy, useOpenMenu };
+export { ContextMenuProvider, useCloseMenu, useContextMenu, useMenuOpenedBy, useOpenMenu };

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,6 +6,7 @@ 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";
@@ -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);
@@ -82,11 +84,11 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSea
 			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 +102,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,16 +143,21 @@ 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);
@@ -168,7 +175,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/Disclosure.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEventHandler, ReactNode } from 'react';
+import { type MouseEventHandler, type ReactNode } from 'react';
 /** The height a collapsible panel animates as it opens and closes. It clips
  *  only while it moves, so focus rings and overflowing content show once open. */
 export declare const collapsePanelClassName = "h-(--collapsible-panel-height) transition-[height,opacity] duration-200 ease-out motion-reduce:transition-none data-starting-style:h-0 data-starting-style:overflow-hidden data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:overflow-hidden data-ending-style:opacity-0";
@@ -23,6 +23,10 @@ export interface DisclosureProps {
     /** Controls beside the summary, outside the toggle, so a row can hold buttons without
      *  nesting them in it. */
     actions?: ReactNode;
+    /** Controls that read as part of the summary, right after it on its line, such as a button
+     *  that says why a row failed. They sit outside the toggle, so no button holds another and
+     *  each is its own stop for Tab; a click on the rest of the line still toggles. */
+    summaryControls?: ReactNode;
     /** On the whole disclosure, summary and detail, such as a row's own menu. */
     onContextMenu?: MouseEventHandler<HTMLDivElement> | undefined;
     children: ReactNode;
@@ -30,7 +34,7 @@ export interface DisclosureProps {
 /** A line inside content that reveals more detail beneath it, such as a tool
  *  call's arguments or a model's reasoning. For a titled part of a page or
  *  form, which belongs in the page's outline, use Section. */
-export declare function Disclosure({ summary, open, onOpenChange, defaultOpen, disabled, keepMounted, className, summaryClassName, panelClassName, chevron, actions, onContextMenu, children, }: DisclosureProps): import("react").JSX.Element;
+export declare function Disclosure({ summary, open, onOpenChange, defaultOpen, disabled, keepMounted, className, summaryClassName, panelClassName, chevron, actions, summaryControls, onContextMenu, children, }: DisclosureProps): import("react").JSX.Element;
 /** The revealing panel alone, for a toggle that lives elsewhere, such as a
  *  tree row's chevron that names this panel with `aria-controls`. */
 export declare function DisclosurePanel({ open, id, keepMounted, className, children, }: {

package/dist/components/Disclosure.js

@@ -1,5 +1,6 @@
 import { cx } from "../cx.js";
 import { ChevronRightIcon } from "../icons.js";
+import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/components/Disclosure.tsx
@@ -9,8 +10,11 @@ var collapsePanelClassName = "h-(--collapsible-panel-height) transition-[height,
 /** A line inside content that reveals more detail beneath it, such as a tool
 *  call's arguments or a model's reasoning. For a titled part of a page or
 *  form, which belongs in the page's outline, use Section. */
-function Disclosure({ summary, open, onOpenChange, defaultOpen = false, disabled = false, keepMounted = false, className, summaryClassName, panelClassName, chevron = true, actions, onContextMenu, children }) {
+function Disclosure({ summary, open, onOpenChange, defaultOpen = false, disabled = false, keepMounted = false, className, summaryClassName, panelClassName, chevron = true, actions, summaryControls, onContextMenu, children }) {
+	const trigger = useRef(null);
+	const hasControls = summaryControls !== void 0 && summaryControls !== null && summaryControls !== false;
 	const toggle = /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+		ref: trigger,
 		className: cx("group/disclosure flex min-w-0 items-start gap-2 rounded-sm text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", disabled ? "cursor-default" : "cursor-pointer", summaryClassName),
 		children: [summary, !disabled && chevron && /* @__PURE__ */ jsx(ChevronRightIcon, {
 			"aria-hidden": "true",
@@ -24,7 +28,25 @@ function Disclosure({ summary, open, onOpenChange, defaultOpen = false, disabled
 		disabled,
 		className,
 		onContextMenu,
-		children: [actions ? /* @__PURE__ */ jsxs("div", {
+		children: [hasControls ? /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [
+				toggle,
+				/* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: summaryControls
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: cx("min-w-0 flex-1 self-stretch", !disabled && "cursor-pointer"),
+					onClick: () => trigger.current?.click()
+				}),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: actions
+				})
+			]
+		}) : actions ? /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-2",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex min-w-0 flex-1",

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/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>`. */

package/dist/components/Modal.js

@@ -10,7 +10,8 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/Modal.tsx
 /** The panel a modal draws by default; pass `panel={false}` to paint your own. */
-var modalPanelClassName = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
+var modalPanelClassName = "rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-2xl";
+var phoneFooterClassName = "max-sm:flex-wrap max-sm:[&>:is(button,a)]:h-10 max-sm:[&>:is(button,a)]:flex-1 max-sm:[&>:not(button,a)]:basis-full";
 /** Names the modal for assistive technology; renders an `<h2>`. */
 var ModalTitle = Dialog.Title;
 /** Describes the modal for assistive technology; renders a `<p>`. */
@@ -32,7 +33,7 @@ function firstControlIn(panel) {
 *  and focus returns to where it was on close. Give it a `title`, a `description`
 *  and a `footer` for the standard layout, as a Drawer has, or lay out the whole
 *  panel with the children. */
-function Modal({ open, onClose, title, description, footer, size, alert = false, dismissible = true, align = "top", panel = true, backdropClassName = "bg-black/40", closeButton = false, onSubmit, className, children, initialFocus, ...popupProps }) {
+function Modal({ open, onClose, title, description, footer, size, alert = false, dismissible = true, align = "top", panel = true, backdropClassName = "bg-(--theme-backdrop)", closeButton = false, onSubmit, className, children, initialFocus, ...popupProps }) {
 	const portal = usePopupContainer();
 	const { common } = useStrings();
 	const panelElement = useRef(null);
@@ -67,14 +68,14 @@ function Modal({ open, onClose, title, description, footer, size, alert = false,
 			children
 		}),
 		footer !== void 0 && /* @__PURE__ */ jsx("div", {
-			className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3",
+			className: cx("flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3", phoneFooterClassName),
 			children: footer
 		})
 	] });
 	const content = /* @__PURE__ */ jsxs(Dialog.Portal, {
 		...portal,
 		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cx("fixed inset-0 z-(--layer-modal)", backdropMotion, backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
-			className: cx("fixed inset-0 z-(--layer-modal) flex justify-center px-4 pt-20 pb-8", align === "center" ? "items-center" : "items-start sm:pt-[max(14vh,5rem)]"),
+			className: cx("fixed inset-0 z-(--layer-modal) flex justify-center px-4 pt-20 pb-8 max-sm:px-2 max-sm:pb-[max(8px,env(safe-area-inset-bottom))]", align === "center" ? "items-center" : "items-start sm:pt-[max(14vh,5rem)]"),
 			children: /* @__PURE__ */ jsx(Dialog.Popup, {
 				...popupProps,
 				ref: (element) => {
@@ -84,7 +85,7 @@ function Modal({ open, onClose, title, description, footer, size, alert = false,
 					else if (forward) forward.current = element;
 				},
 				initialFocus: initialFocus ?? (closeButton ? () => firstControlIn(panelElement.current) : void 0),
-				className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", size && [sizeClasses[size], "max-w-full"], laidOut && "flex max-h-full flex-col", "outline-none", popupMotion, className),
+				className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-2xl", size && [sizeClasses[size], "max-w-full"], panel && (size || laidOut) && "max-sm:w-full", laidOut && "flex max-h-full flex-col", "outline-none", popupMotion, className),
 				children: !laidOut ? children : onSubmit ? /* @__PURE__ */ jsx("form", {
 					className: "flex min-h-0 flex-1 flex-col",
 					onSubmit: (event) => {

package/dist/components/PageHeader.d.ts

@@ -13,6 +13,10 @@ export interface PageHeaderProps {
      *  `h1`. A crumb with an empty label, such as a name still loading, shows a
      *  placeholder. */
     breadcrumbs?: readonly Breadcrumb[] | undefined;
+    /** False keeps the last crumb out of the page's outline, for a page whose `h1` is in its
+     *  body, such as a title field or a section's heading: the crumb still says it is the
+     *  current page, and the page has one `h1`. */
+    heading?: boolean | undefined;
     /** Beside the title: actions on the page's subject, such as edit, rename or
      *  favorite, or its `PageHeaderMenu`. */
     titleActions?: ReactNode;