@parallelworks/ui 0.80.0 → 0.81.0

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;

package/dist/components/PageHeader.js

@@ -52,6 +52,7 @@ function PageHeader(props) {
 	const store = use(StoreContext);
 	if (!store) return props.hidden ? null : /* @__PURE__ */ jsx(HeaderLayout, {
 		breadcrumbs: props.breadcrumbs ?? [],
+		heading: props.heading ?? true,
 		titleActions: props.titleActions,
 		actions: props.actions,
 		toolbar: props.toolbar
@@ -61,7 +62,7 @@ function PageHeader(props) {
 		...props
 	});
 }
-function DeclaredHeader({ store, breadcrumbs, titleActions, actions, toolbar, hidden = false }) {
+function DeclaredHeader({ store, breadcrumbs, heading = true, titleActions, actions, toolbar, hidden = false }) {
 	const [order] = useState(() => ++renderOrder);
 	const [nodes] = useState(createRegionNodes);
 	const client = useSyncExternalStore(subscribeNever, () => true, () => false);
@@ -73,6 +74,7 @@ function DeclaredHeader({ store, breadcrumbs, titleActions, actions, toolbar, hi
 	useLayoutEffect(() => {
 		store.set(order, {
 			breadcrumbs,
+			heading,
 			hidden,
 			nodes,
 			fills
@@ -105,6 +107,7 @@ function PageHeaderBar({ compact = false, persistent = false, className }) {
 	if (header.hidden || empty && !persistent) return null;
 	return /* @__PURE__ */ jsx(HeaderLayout, {
 		breadcrumbs: header.breadcrumbs,
+		heading: header.heading,
 		titleActions: header.titleActions.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.titleActions }),
 		actions: header.actions.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.actions }),
 		toolbar: header.toolbar.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.toolbar }),
@@ -137,7 +140,7 @@ function Mount({ node }) {
 		className: "contents"
 	});
 }
-function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, fit: sharedFit, compact = false, className }) {
+function HeaderLayout({ breadcrumbs, heading, titleActions, actions, toolbar, fit: sharedFit, compact = false, className }) {
 	const { breadcrumbPin, navToggle } = useSlots();
 	const { list: t } = useStrings();
 	const [ownFit] = useState(() => new HeaderActionsFit());
@@ -161,7 +164,7 @@ function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, fit: shared
 					navToggle?.(),
 					hasTrail && /* @__PURE__ */ jsx(Breadcrumbs, {
 						crumbs: breadcrumbs,
-						heading: true
+						heading
 					}),
 					present(titleActions) && /* @__PURE__ */ jsx("div", {
 						className: "flex shrink-0 items-center gap-0.5",

package/dist/components/Provider.d.ts

@@ -102,6 +102,9 @@ export interface UIStrings {
         opensInNewTab: string;
         /** Names a code editor that has no label of its own. */
         codeEditor: string;
+        /** Names a block of code that has no title of its own, by its language,
+         *  such as "yaml code"; `language` is empty when it has none. */
+        codeOf: (language: string) => string;
         /** Shown when someone types in a read-only code editor. */
         readOnlyText: string;
         /** Names the handle that resizes a panel. */

package/dist/components/Provider.js

@@ -148,6 +148,7 @@ var DEFAULTS = {
 			no: "No",
 			opensInNewTab: "(opens in a new tab)",
 			codeEditor: "Code editor",
+			codeOf: (language) => language ? `${language} code` : "Code",
 			readOnlyText: "This text is read-only.",
 			resizePanel: "Resize panel",
 			panelWidth: (px) => `${px} pixels wide`,

package/dist/components/Select.js

@@ -59,7 +59,7 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 				content: tip,
 				children: /* @__PURE__ */ jsxs(Select.Trigger, {
 					...triggerProps,
-					className: cx(fieldBox({ size }), triggerClassName, content && "w-fit max-w-full", explained && explainedDisabledClassName, className),
+					className: cx(fieldBox({ size }), triggerClassName, content && "w-fit max-w-full shrink-0", explained && explainedDisabledClassName, className),
 					children: [/* @__PURE__ */ jsx(Select.Value, {
 						placeholder,
 						className: cx("truncate data-placeholder:text-(--theme-placeholder)", content && !rootProps.multiple && "grid"),

package/dist/components/ToggleGroup.d.ts

@@ -25,6 +25,8 @@ export interface ToggleGroupProps<T extends string> {
     all?: boolean | {
         count?: number | undefined;
     } | undefined;
+    /** The All option's words, for one that names what it covers, such as "All types". */
+    allLabel?: ReactNode;
     size?: 'sm' | 'md' | undefined;
     disabled?: boolean | undefined;
     /** Names an element that says more about the group, such as a live summary
@@ -42,4 +44,4 @@ export interface ToggleGroupProps<T extends string> {
  *  value, such as a time range, what to group by, or which view of the same
  *  data to show. A filter that may be off, or takes several values, is a
  *  `ToggleGroup`. */
-export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, size, disabled, 'aria-describedby': describedBy, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;
+export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, allLabel, size, disabled, 'aria-describedby': describedBy, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;

package/dist/components/ToggleGroup.js

@@ -18,7 +18,7 @@ var ALL = "\0all";
 *  value, such as a time range, what to group by, or which view of the same
 *  data to show. A filter that may be off, or takes several values, is a
 *  `ToggleGroup`. */
-function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, size = "sm", disabled = false, "aria-describedby": describedBy, testId }) {
+function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, allLabel, size = "sm", disabled = false, "aria-describedby": describedBy, testId }) {
 	const strings = useStrings();
 	const allCount = typeof all === "object" ? all.count : void 0;
 	const pressed = all && value.length === 0 ? [ALL] : value;
@@ -40,7 +40,7 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 		children: [
 			all && /* @__PURE__ */ jsx(Chip, {
 				value: ALL,
-				label: strings.common.all,
+				label: allLabel ?? strings.common.all,
 				count: allCount,
 				size
 			}),

package/dist/components/codeHighlight.d.ts

@@ -0,0 +1,9 @@
+export interface CodeToken {
+    content: string;
+    color?: string;
+    fontStyle?: 'italic';
+}
+/** Tokens for each line of `source`, at once when they are cached, otherwise
+ *  null now and `onReady` once the language has loaded. A language the
+ *  highlighter doesn't know reads as plain text. */
+export declare function highlightCode(source: string, language: string, incomplete: boolean, onReady: (lines: CodeToken[][]) => void): CodeToken[][] | null;

package/dist/components/codeHighlight.js

@@ -0,0 +1,29 @@
+import { CODE_THEMES } from "./codeTheme.js";
+import { code } from "@streamdown/code";
+//#region src/components/codeHighlight.ts
+var ITALIC = 1;
+function toLines(tokens) {
+	return tokens.map((line) => line.map((token) => {
+		const color = token.htmlStyle?.["color"] ?? token.color;
+		const italic = token.htmlStyle?.["font-style"] === "italic" || ((token.fontStyle ?? 0) & ITALIC) === ITALIC;
+		return {
+			content: token.content,
+			...color ? { color } : {},
+			...italic ? { fontStyle: "italic" } : {}
+		};
+	}));
+}
+/** Tokens for each line of `source`, at once when they are cached, otherwise
+*  null now and `onReady` once the language has loaded. A language the
+*  highlighter doesn't know reads as plain text. */
+function highlightCode(source, language, incomplete, onReady) {
+	const result = code.highlight({
+		code: source,
+		language: language || "text",
+		themes: CODE_THEMES,
+		isIncomplete: incomplete
+	}, (later) => onReady(toLines(later.tokens)));
+	return result ? toLines(result.tokens) : null;
+}
+//#endregion
+export { highlightCode };

package/dist/components/pageHeaderStore.d.ts

@@ -7,12 +7,16 @@ export type PageHeaderRegion = 'titleActions' | 'actions' | 'toolbar';
 export type RegionNodes = Readonly<Record<PageHeaderRegion, HTMLElement>>;
 export interface Declaration {
     breadcrumbs: readonly Breadcrumb[] | undefined;
+    /** Whether the trail's last crumb is the page's `h1`. */
+    heading: boolean;
     hidden: boolean;
     nodes: RegionNodes | null;
     fills: Readonly<Record<PageHeaderRegion, boolean>>;
 }
 export interface PageHeaderSnapshot {
     breadcrumbs: readonly Breadcrumb[];
+    /** Whether the trail's last crumb is the page's `h1`, as the page whose trail it is says. */
+    heading: boolean;
     hidden: boolean;
     titleActions: readonly HTMLElement[];
     actions: readonly HTMLElement[];

package/dist/components/pageHeaderStore.js

@@ -4,6 +4,7 @@ var NO_NODES = [];
 var NO_CRUMBS = [];
 var EMPTY = {
 	breadcrumbs: NO_CRUMBS,
+	heading: true,
 	hidden: false,
 	titleActions: NO_NODES,
 	actions: NO_NODES,
@@ -15,7 +16,7 @@ function sameCrumbs(a, b) {
 	return a.every((crumb, i) => crumb.label === b[i]?.label && crumb.href === b[i]?.href);
 }
 function sameDeclaration(a, b) {
-	return sameCrumbs(a.breadcrumbs, b.breadcrumbs) && a.hidden === b.hidden && a.nodes === b.nodes && a.fills.titleActions === b.fills.titleActions && a.fills.actions === b.fills.actions && a.fills.toolbar === b.fills.toolbar;
+	return sameCrumbs(a.breadcrumbs, b.breadcrumbs) && a.heading === b.heading && a.hidden === b.hidden && a.nodes === b.nodes && a.fills.titleActions === b.fills.titleActions && a.fills.actions === b.fills.actions && a.fills.toolbar === b.fills.toolbar;
 }
 function sameNodes(a, b) {
 	return a.length === b.length && a.every((node, i) => node === b[i]);
@@ -54,10 +55,12 @@ var PageHeaderStore = class {
 			const next = ordered.flatMap((d) => d.nodes && d.fills[region] ? [d.nodes[region]] : []);
 			return sameNodes(next, prev) ? prev : next;
 		};
-		const trail = ordered.findLast((d) => d.breadcrumbs !== void 0)?.breadcrumbs ?? NO_CRUMBS;
+		const owner = ordered.findLast((d) => d.breadcrumbs !== void 0);
+		const trail = owner?.breadcrumbs ?? NO_CRUMBS;
 		const prev = this.snapshot;
 		this.snapshot = {
 			breadcrumbs: sameCrumbs(trail, prev.breadcrumbs) ? prev.breadcrumbs : trail,
+			heading: owner?.heading ?? true,
 			hidden: ordered.some((d) => d.hidden),
 			titleActions: regionNodes("titleActions", prev.titleActions),
 			actions: regionNodes("actions", prev.actions),

package/dist/file-explorer/FileExplorer.js

@@ -13,9 +13,9 @@ import { useCopy } from "../components/useCopy.js";
 import { Breadcrumbs } from "../components/Breadcrumbs.js";
 import { Button } from "../components/Button.js";
 import { Callout } from "../components/Callout.js";
+import { CopyButton, CopyCodeBlock } from "../components/CopyButton.js";
 import { InfoTip } from "../components/InfoTip.js";
 import { ConfirmModal } from "../components/ConfirmModal.js";
-import { CopyButton, CopyCodeBlock } from "../components/CopyButton.js";
 import { CreateModal } from "../components/CreateModal.js";
 import { useSplitter } from "../components/splitter.js";
 import { formatBytes, formatDateTime } from "../format.js";

package/dist/index.d.ts

@@ -5,8 +5,9 @@ export { type Breadcrumb, Breadcrumbs, type BreadcrumbsProps } from './component
 export { Button, type ButtonProps, MethodButton } from './components/Button.js';
 export { type ButtonSize, type ButtonStyle, type ButtonVariant, buttonClasses, } from './components/buttonClasses.js';
 export { Callout, type CalloutProps, type CalloutTone } from './components/Callout.js';
-export { Card, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardSize, } from './components/Card.js';
+export { Card, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardSize, type CardTone, } from './components/Card.js';
 export { Checkbox, CheckboxGroup, type CheckboxProps } from './components/Checkbox.js';
+export { CodeBlock, type CodeBlockProps } from './components/CodeBlock.js';
 export { ColorInput, type ColorInputProps } from './components/ColorInput.js';
 export { Autocomplete, type AutocompleteProps, Combobox, type ComboboxGroup, type ComboboxItem, type ComboboxItems, type ComboboxProps, } from './components/Combobox.js';
 export { ConfirmModal, type ConfirmModalProps, type ConfirmRequest, useConfirm, } from './components/ConfirmModal.js';

package/dist/index.js

@@ -23,6 +23,8 @@ import { Callout } from "./components/Callout.js";
 import { Card, CardHeader } from "./components/Card.js";
 import { fieldBox } from "./components/fieldBox.js";
 import { Checkbox, CheckboxGroup } from "./components/Checkbox.js";
+import { CopyButton, CopyCodeBlock } from "./components/CopyButton.js";
+import { CodeBlock } from "./components/CodeBlock.js";
 import { JND, composite, deltaE, parseColor, toHex, toP3 } from "./theme/color.js";
 import { apcaContrast, contrastRatio, isDarkColor } from "./theme/contrast.js";
 import { CODE_STYLES, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, resolveMode, schemeFor, serializeTheme } from "./theme/model.js";
@@ -40,7 +42,6 @@ import { Tag, TagList, normalizeTags, tagClasses } from "./components/Tag.js";
 import { Autocomplete, Combobox } from "./components/Combobox.js";
 import { Modal, ModalDescription, ModalTitle, modalPanelClassName } from "./components/Modal.js";
 import { ConfirmModal, useConfirm } from "./components/ConfirmModal.js";
-import { CopyButton, CopyCodeBlock } from "./components/CopyButton.js";
 import { Disclosure, DisclosurePanel, collapsePanelClassName } from "./components/Disclosure.js";
 import { Switch } from "./components/Switch.js";
 import { CreateModal, CreateModalSelect, CreateModalSwitch } from "./components/CreateModal.js";
@@ -83,4 +84,4 @@ import { ToggleGroup } from "./components/ToggleGroup.js";
 import { useClosingValue } from "./components/useClosingValue.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { useApplyTheme, useColorMode } from "./components/useTheme.js";
-export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartTooltipContent, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useCloseMenu, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartTooltipContent, Checkbox, CheckboxGroup, CodeBlock, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useCloseMenu, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/styles/theme.css

@@ -61,6 +61,7 @@
   --theme-shadow-xl:
     0 25px 80px -20px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)),
     0 10px 30px -10px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
+  --theme-backdrop: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.65));
   --theme-code-bg: light-dark(#e7eaee, #1c242c);
   --theme-code-text: light-dark(#1c2330, #e1e9f2);
   --theme-code-comment: light-dark(#555d6c, #c0c8d1);