@parallelworks/ui 0.80.0 → 0.81.0

package/README.md

@@ -131,7 +131,8 @@ Each need has one component. Reach for it before styling markup by hand.
 | A live relative time or duration | `RelativeTime` (with a `fallback`, an `exact` style for its tooltip, or `show="absolute"`), `Elapsed` |
 | Fetching again on demand | `RefreshButton`; `variant="inline"` in a line of details; `loading` on an `ActionToolbar` action |
 | Rendered Markdown | `Markdown` |
-| Code or YAML to read or edit | `Editor` from `./editor`; `EditorField` as a form field, `FormCodePanel` for a form's values as JSON |
+| Code or YAML to read, such as a run's resolved workflow | `CodeBlock`: highlighted, numbered, with copy and, given a `filename`, download; `fill` for a view that is the code |
+| Code or YAML to edit | `Editor` from `./editor`; `EditorField` as a form field, `FormCodePanel` for a form's values as JSON |
 | A run's jobs, steps, logs, annotations and warnings | `DependencyGraph` from `./graph`, as a graph or a list |
 | A workflow's jobs drawn from its YAML, or edited by hand | `DependencyGraphPreview` from `./graph`, editable with an `editor`; `InputsFormEditor` for its run form |
 | A value that survives a reload | `usePersistedState` |
@@ -168,6 +169,11 @@ Some pairs look alike and are split on purpose:
   its tone, for anything. A `RunStatusIcon` shows the status of something that
   ran as an icon beside its name, and turns while it runs; `runStatusTone` gives
   a badge for the same status the same tone.
+- **CodeBlock or CopyCodeBlock.** A `CodeBlock` is code to read, such as a
+  file or a workflow: a header names it, its lines are highlighted and
+  numbered, and it can fill a pane. A `CopyCodeBlock` is a command or a value
+  to copy, such as an install line or a new API key, with its copy button over
+  it and `secret` to mask it.
 - **Select or Combobox.** A `Select` picks from a short list it shows in full.
   A `Combobox` filters as you type, for a list long enough to search, and is the
   one that takes several values, new ones, or free text (`Autocomplete`).

package/dist/ai/adapter/types.d.ts

@@ -29,6 +29,7 @@ export interface ToolApprovalAnswer {
     allowed: boolean;
     feedback?: string;
     tool?: string;
+    args?: string;
 }
 export interface StreamHandlers {
     onContent: (content: string) => void;

package/dist/ai/ai.css

@@ -46,8 +46,8 @@
   padding: 0;
 }
 
-/* Inline code — code blocks are styled by Streamdown. A tint of the ink and
- * no border: a hard outline turns every identifier into a keycap. */
+/* Inline code; a fenced block is a CodeBlock, which styles itself. A tint of
+ * the ink and no border: a hard outline turns every identifier into a keycap. */
 .markdown code {
   /* rem, not em: a table cell or list already sized down would size it twice. */
   font-size: 0.875rem;
@@ -226,95 +226,6 @@
   }
 }
 
-/* Streamdown code blocks: one surface, not a frame around an inset panel.
- * The theme's code surface, which the syntax colors are solved against, with a
- * hairline edge holds the language on its top edge,
- * the copy and download controls quiet beside it, and the code on the same
- * ground, so the block reads as part of the answer. */
-.markdown [data-streamdown="code-block"] {
-  gap: 0;
-  margin: 0.875rem 0;
-  padding: 0;
-  border: 0;
-  border-radius: 0.75rem;
-  overflow: hidden;
-  background: var(--theme-code-bg, #f3f4f6);
-  box-shadow: 0 0 0 1px color-mix(in oklab, var(--theme-app, #000) 8%, transparent);
-}
-.markdown [data-streamdown="code-block-header"] {
-  height: 2.25rem;
-  padding: 0 0.75rem 0 0.75rem;
-  font-size: 0.75rem;
-  color: var(--theme-muted-text-color, #6a7282);
-}
-.markdown [data-streamdown="code-block-actions"] {
-  gap: 0.125rem;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  backdrop-filter: none;
-}
-.markdown [data-streamdown="code-block-actions"] button {
-  padding: 0.3125rem;
-  border-radius: 0.375rem;
-  color: var(--theme-muted-text-color, #6a7282);
-  transition:
-    background-color 150ms ease-out,
-    color 150ms ease-out;
-}
-.markdown [data-streamdown="code-block-actions"] button:hover {
-  color: var(--theme-app, #000);
-  background: color-mix(in oklab, var(--theme-app, #000) 7%, transparent);
-}
-.markdown [data-streamdown="code-block-body"] {
-  border: 0;
-  border-radius: 0;
-  padding: 0;
-  background: transparent;
-}
-.markdown [data-streamdown="code-block-body"] pre {
-  margin: 0;
-  padding: 0.125rem 1rem 0.875rem;
-  overflow-x: auto;
-  /* Code reads looser than prose; Streamdown's text-sm line is too tight. */
-  line-height: 1.6;
-}
-
-/* Shiki dual-theme color overrides (standard Shiki approach).
-   Streamdown uses Tailwind dark: arbitrary-value classes for theme switching,
-   but Tailwind v4's source scanner can misparse them from minified JS —
-   generating broken selectors that apply dark bg unconditionally while
-   missing the text color classes entirely. Override both light and dark
-   explicitly to ensure correct colors in all modes.
-   See: https://shiki.style/guide/dual-themes#class-based-dark-mode */
-
-/* Light mode: the primary Shiki theme's colors (--sdm-c) on the block's own
-   surface, which stands in for the theme's background. */
-.markdown [data-streamdown="code-block-body"] pre {
-  /* biome-ignore lint/complexity/noImportantStyles: the highlighter sets the background as an inline style */
-  background-color: transparent !important;
-  color: var(--sdm-fg, inherit);
-}
-.markdown [data-streamdown="code-block-body"] pre code > span > span {
-  color: var(--sdm-c, inherit);
-}
-
-/* Dark mode: the --shiki-dark colors, again on the block's surface. */
-.dark .markdown [data-streamdown="code-block-body"] pre {
-  /* biome-ignore lint/complexity/noImportantStyles: the highlighter sets the background as an inline style */
-  background-color: transparent !important;
-  color: var(--shiki-dark, var(--sdm-fg, inherit));
-}
-.dark .markdown [data-streamdown="code-block-body"] pre code > span > span {
-  color: var(--shiki-dark, inherit);
-  font-style: var(--shiki-dark-font-style, inherit);
-  font-weight: var(--shiki-dark-font-weight, inherit);
-  text-decoration: var(--shiki-dark-text-decoration, inherit);
-}
-.dark .markdown [data-streamdown="code-block-body"] pre code > span > span[style*="--sdm-tbg"] {
-  background-color: var(--shiki-dark-bg, var(--sdm-tbg));
-}
-
 /* Remove prose backtick pseudo-elements on inline code */
 .markdown code::before,
 .markdown code::after {
@@ -531,7 +442,7 @@
 /* A paste in the reader's bubble is a code block like the assistant's, set on
  * the panel so it stands off the bubble's tint, with the bubble's spacing
  * rather than the answer's. */
-.chat-paste-code .markdown [data-streamdown="code-block"] {
+.chat-paste-code .markdown [data-code-block] {
   margin: 0;
   background: var(--theme-panel-bg, #fff);
   white-space: normal;

package/dist/ai/components/agent/AgentMessageParts.js

@@ -302,6 +302,7 @@ function decisionLabel(d, t) {
 	switch (d.status) {
 		case "approved":
 			if (d.by === "auto-reviewer") return t.allowedByReviewer;
+			if (d.edited) return d.name ? t.allowedWithChangesBy(d.name) : t.allowedWithChanges;
 			return d.name ? t.allowedBy(d.name) : t.allowed;
 		case "denied":
 			if (d.by === "auto-reviewer") return t.deniedByReviewer;

package/dist/ai/core/ChatProvider.js

@@ -627,6 +627,9 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 			id: approvalId,
 			answer: answer.allowed ? t.approvalAllowed : t.approvalDenied
 		});
+		const instead = answer.allowed ? answer.instead : void 0;
+		const asked = pausedParts.find((p) => p.kind === "tool_call" && p.id === approvalId);
+		const args = answer.allowed && answer.args !== asked?.args ? answer.args : void 0;
 		applyToPaused({
 			type: "tool_decision",
 			id: approvalId,
@@ -634,14 +637,15 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 				status: answer.allowed ? "approved" : "denied",
 				by: "user",
 				name: currentUser.name || currentUser.username,
-				at: DateTime.now().toUTC().toISO()
+				at: DateTime.now().toUTC().toISO(),
+				...args !== void 0 ? { edited: true } : {}
 			}
 		});
-		const instead = answer.allowed ? answer.instead : void 0;
-		if (instead) {
+		if (instead || args !== void 0) {
 			pausedParts = pausedParts.map((p) => p.kind === "tool_call" && p.id === approvalId ? {
 				...p,
-				name: instead
+				...instead ? { name: instead } : {},
+				...args !== void 0 ? { args } : {}
 			} : p);
 			updatePaused({ parts: pausedParts });
 		}
@@ -661,7 +665,8 @@ function ChatProvider({ adapter, currentUser, navigation, activeConversationId =
 					toolCallId: approvalId,
 					allowed: answer.allowed,
 					...answer.denyMessage ? { feedback: answer.denyMessage } : {},
-					...instead ? { tool: instead } : {}
+					...instead ? { tool: instead } : {},
+					...args !== void 0 ? { args } : {}
 				}
 			}, paused.id, (message) => updatePaused({ error: message }), (delta) => {
 				if (delta.type !== "tool_end" || delta.id !== approvalId) return false;

package/dist/ai/strings.d.ts

@@ -245,8 +245,11 @@ export interface ChatStrings {
         answered: string;
         /** Under a call someone answered: who allowed or denied it. */
         allowedBy: (name: string) => string;
+        /** Allowed after the reader changed the call's arguments. */
+        allowedWithChangesBy: (name: string) => string;
         deniedBy: (name: string) => string;
         allowed: string;
+        allowedWithChanges: string;
         denied: string;
         allowedByReviewer: string;
         deniedByReviewer: string;

package/dist/ai/strings.js

@@ -258,8 +258,10 @@ var defaultChatStrings = {
 		feedbackPlaceholder: "Tell the agent what to do instead…",
 		answered: "Answered",
 		allowedBy: (name) => `Allowed by ${name}`,
+		allowedWithChangesBy: (name) => `Allowed with changes by ${name}`,
 		deniedBy: (name) => `Denied by ${name}`,
 		allowed: "Allowed",
+		allowedWithChanges: "Allowed with changes",
 		denied: "Denied",
 		allowedByReviewer: "Allowed by the auto-reviewer",
 		deniedByReviewer: "Denied by the auto-reviewer",

package/dist/ai/types.d.ts

@@ -67,6 +67,8 @@ export interface ToolDecision {
     note?: string;
     /** Why it was settled this way, such as the auto-reviewer's rationale. */
     reason?: string;
+    /** The reader changed the call's arguments before allowing it. */
+    edited?: boolean;
 }
 export interface ToolCallPart {
     kind: 'tool_call';
@@ -103,6 +105,9 @@ export type ApprovalAnswerValue = {
     /** A sibling tool to run in place of the one asked for, with the same
      *  arguments, such as destroying a cluster the model asked to stop. */
     instead?: string;
+    /** The call's arguments as the reader changed them, as JSON text, to
+     *  run in place of the model's suggestion. */
+    args?: string;
 } | {
     kind: 'ask';
     text: string;

package/dist/components/Card.d.ts

@@ -12,6 +12,15 @@ declare const paddingClasses: {
     md: string;
     lg: string;
 };
+declare const toneColors: {
+    readonly accent: 'var(--theme-accent)';
+    readonly success: 'var(--theme-success)';
+    readonly warning: 'var(--theme-warning)';
+    readonly error: 'var(--theme-error)';
+    readonly info: 'var(--theme-info)';
+};
+/** A status's tone, or any CSS color a host picks, such as `var(--agent-color)`. */
+export type CardTone = keyof typeof toneColors | (string & {});
 export type CardSize = keyof typeof widthClasses;
 export type CardPadding = keyof typeof paddingClasses;
 export interface CardProps extends LinkTarget {
@@ -32,6 +41,12 @@ export interface CardProps extends LinkTarget {
     /** Tints the border while a field inside has focus, for a card that frames an
      *  input, such as a composer. */
     focusWithin?: boolean | undefined;
+    /** Tints the border in a color, setting the card apart by what it is, such as the work of
+     *  one kind of author: a status's tone, or any CSS color, such as `var(--agent-color)`.
+     *  It is `--card-tone` inside the card, for its own content to use. `highlight` deepens it. */
+    tone?: CardTone | undefined;
+    /** With `tone`, a faint fill of it too, for a card that should stand out at a glance. */
+    tinted?: boolean | undefined;
     /** Renders the card as this element, such as a button, a list or a section. */
     render?: ReactElement | undefined;
     /** The whole card presses: it lifts on hover and shows focus. On by default for
@@ -43,7 +58,7 @@ export interface CardProps extends LinkTarget {
 /** A surface holding one task, such as a sign-in form or a choice among a few
  *  options, raised over the page; or, with `size="fill"`, a flat panel among the
  *  page's content. */
-export declare function Card({ children, size, padding, divided, elevated, highlight, focusWithin, render: renderProp, interactive, href, reloadDocument, target, className, }: CardProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function Card({ children, size, padding, divided, elevated, highlight, focusWithin, tone, tinted, render: renderProp, interactive, href, reloadDocument, target, className, }: CardProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export interface CardHeaderProps {
     badge?: ReactNode;
     title: string;

package/dist/components/Card.js

@@ -21,10 +21,17 @@ var sizePadding = {
 	lg: "p-6 sm:p-8",
 	fill: paddingClasses.md
 };
+var toneColors = {
+	accent: "var(--theme-accent)",
+	success: "var(--theme-success)",
+	warning: "var(--theme-warning)",
+	error: "var(--theme-error)",
+	info: "var(--theme-info)"
+};
 /** A surface holding one task, such as a sign-in form or a choice among a few
 *  options, raised over the page; or, with `size="fill"`, a flat panel among the
 *  page's content. */
-function Card({ children, size = "md", padding, divided = false, elevated = false, highlight = false, focusWithin = false, render: renderProp, interactive, href, reloadDocument, target, className }) {
+function Card({ children, size = "md", padding, divided = false, elevated = false, highlight = false, focusWithin = false, tone, tinted = false, render: renderProp, interactive, href, reloadDocument, target, className }) {
 	const render = href === void 0 ? renderProp : /* @__PURE__ */ jsx(AppLink, {
 		href,
 		reloadDocument,
@@ -32,10 +39,14 @@ function Card({ children, size = "md", padding, divided = false, elevated = fals
 	});
 	const fill = size === "fill";
 	const pressable = interactive ?? render !== void 0;
+	const toned = tone !== void 0;
+	const toneColor = toned ? toneColors[tone] ?? tone : void 0;
+	const fillTint = toned && tinted;
 	return useRender({
 		render: render ?? /* @__PURE__ */ jsx("div", {}),
 		props: {
-			className: cx("block w-full rounded-xl border bg-(--theme-panel-bg)", highlight ? "border-(--theme-accent)/30" : "border-(--theme-border)", focusWithin && "focus-within:border-(--theme-focus)/60", !fill && "backdrop-blur-xl", !fill && (elevated ? "shadow-(--theme-shadow-xl)" : "shadow-(--theme-shadow)"), widthClasses[size], padding === void 0 ? sizePadding[size] : paddingClasses[padding], divided && "divide-y divide-(--theme-border)", pressable && "cursor-pointer text-left text-inherit no-underline transition-[background-color,box-shadow,border-color] duration-150 hover:bg-(--theme-panel-hover) hover:shadow-(--theme-shadow-lg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-link) motion-reduce:transition-none", !pressable && focusWithin && "transition-[border-color] duration-150 motion-reduce:transition-none", className),
+			style: toneColor ? { "--card-tone": toneColor } : void 0,
+			className: cx("block w-full rounded-xl border", fillTint ? "bg-[color-mix(in_oklab,var(--card-tone)_7%,var(--theme-panel-bg))]" : "bg-(--theme-panel-bg)", toned ? highlight ? "border-(--card-tone)/80" : "border-(--card-tone)/45" : highlight ? "border-(--theme-accent)/30" : "border-(--theme-border)", focusWithin && "focus-within:border-(--theme-focus)/60", !fill && "backdrop-blur-xl", !fill && (elevated ? "shadow-(--theme-shadow-xl)" : "shadow-(--theme-shadow)"), widthClasses[size], padding === void 0 ? sizePadding[size] : paddingClasses[padding], divided && "divide-y divide-(--theme-border)", pressable && "cursor-pointer text-left text-inherit no-underline transition-[background-color,box-shadow,border-color] duration-150 hover:shadow-(--theme-shadow-lg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-link) motion-reduce:transition-none", pressable && (fillTint ? "hover:bg-[color-mix(in_oklab,var(--card-tone)_11%,var(--theme-panel-hover))]" : "hover:bg-(--theme-panel-hover)"), pressable && toned && "hover:border-(--card-tone)/70", !pressable && focusWithin && "transition-[border-color] duration-150 motion-reduce:transition-none", className),
 			children
 		}
 	});

package/dist/components/CodeBlock.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from 'react';
+export interface CodeBlockProps {
+    /** The code, as it is copied and downloaded. */
+    code: string;
+    /** The language to highlight it as, such as `yaml`; the header names it
+     *  unless `title` says otherwise. Without it the code reads as plain text. */
+    language?: string | undefined;
+    /** The header's text in place of the language, such as a file's name. */
+    title?: ReactNode;
+    /** Names the code for assistive technology where `title` is not plain text;
+     *  by default the title, or the language ("yaml code"). */
+    label?: string | undefined;
+    /** Adds a download button that saves the code under this name. */
+    filename?: string | undefined;
+    /** Controls of the host's own, before download and copy. */
+    headerActions?: ReactNode;
+    /** The copy button; on by default. */
+    copy?: boolean | undefined;
+    /** Numbers the lines; on by default when there is more than one. */
+    lineNumbers?: boolean | undefined;
+    /** The first line's number, for an excerpt. */
+    startLine?: number | undefined;
+    /** Breaks long lines instead of scrolling them sideways. */
+    wrap?: boolean | undefined;
+    /** Grows to the height of its container and scrolls inside it, for a view
+     *  that is the code, such as a tab. Without it the block is as tall as its
+     *  code, up to `maxHeight`. */
+    fill?: boolean | undefined;
+    /** The tallest it grows before it scrolls, as a CSS length or in pixels. */
+    maxHeight?: number | string | undefined;
+    /** The code is still arriving: highlighting is not cached, and the block
+     *  keeps its end in view while it is scrolled there. */
+    streaming?: boolean | undefined;
+    className?: string | undefined;
+}
+/** Code to read on a page, such as a workflow's YAML: highlighted in the
+ *  theme's code colors, with numbered lines, a copy button and, given a
+ *  `filename`, a download button. Markdown's fenced code renders as one, so
+ *  both read the same. */
+export declare function CodeBlock({ code, language, title, label, filename, headerActions, copy, lineNumbers, startLine, wrap, fill, maxHeight, streaming, className, }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/CodeBlock.js

@@ -0,0 +1,159 @@
+import { cx } from "../cx.js";
+import { DownloadIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
+import { IconButton } from "./IconButton.js";
+import { CopyButton } from "./CopyButton.js";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CodeBlock.tsx
+function useHighlighted(source, language, streaming) {
+	const [state, setState] = useState(null);
+	const latest = useRef({
+		source,
+		language
+	});
+	latest.current = {
+		source,
+		language
+	};
+	useEffect(() => {
+		let mounted = true;
+		const accept = (lines) => {
+			const now = latest.current;
+			if (mounted && now.language === language && now.source.startsWith(source)) setState({
+				source,
+				language,
+				lines
+			});
+		};
+		import("./codeHighlight.js").then(({ highlightCode }) => {
+			const ready = highlightCode(source, language, streaming, accept);
+			if (ready) accept(ready);
+		}).catch(() => {});
+		return () => {
+			mounted = false;
+		};
+	}, [
+		source,
+		language,
+		streaming
+	]);
+	return state;
+}
+function tokensFor(state, source, language, count) {
+	const out = new Array(count).fill(null);
+	if (!state || state.language !== language || !source.startsWith(state.source)) return out;
+	if (state.source === source) {
+		if (state.lines.length === count) return state.lines;
+		return out;
+	}
+	const settled = Math.min(state.source.split("\n").length - 1, state.lines.length, count);
+	for (let i = 0; i < settled; i++) out[i] = state.lines[i] ?? null;
+	return out;
+}
+function isScrollable(el) {
+	return el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;
+}
+function downloadText(text, name) {
+	const url = URL.createObjectURL(new Blob([text], { type: "text/plain" }));
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = name;
+	a.click();
+	setTimeout(() => URL.revokeObjectURL(url));
+}
+/** Code to read on a page, such as a workflow's YAML: highlighted in the
+*  theme's code colors, with numbered lines, a copy button and, given a
+*  `filename`, a download button. Markdown's fenced code renders as one, so
+*  both read the same. */
+function CodeBlock({ code, language = "", title, label, filename, headerActions, copy = true, lineNumbers, startLine = 1, wrap = false, fill = false, maxHeight, streaming = false, className }) {
+	const { common: t } = useStrings();
+	const source = code.endsWith("\n") ? code.slice(0, -1) : code;
+	const lines = useMemo(() => source.split("\n"), [source]);
+	const tokens = tokensFor(useHighlighted(source, language, streaming), source, language, lines.length);
+	const numbered = lineNumbers ?? lines.length > 1;
+	const lastLine = startLine + lines.length - 1;
+	const body = useRef(null);
+	const [scrollable, setScrollable] = useState(false);
+	useLayoutEffect(() => {
+		const el = body.current;
+		if (!el) return;
+		setScrollable(isScrollable(el));
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => setScrollable(isScrollable(el)));
+		observer.observe(el);
+		if (el.firstElementChild) observer.observe(el.firstElementChild);
+		return () => observer.disconnect();
+	}, []);
+	const atEnd = useRef(true);
+	useLayoutEffect(() => {
+		const el = body.current;
+		if (streaming && el && atEnd.current && source) el.scrollTop = el.scrollHeight;
+	}, [source, streaming]);
+	const name = label ?? (typeof title === "string" ? title : t.codeOf(language));
+	const heading = title ?? language;
+	const bodyStyle = {};
+	if (!fill && maxHeight !== void 0) bodyStyle.maxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+	const codeStyle = {
+		counterReset: `line ${startLine - 1}`,
+		"--code-gutter": `max(1.5rem, ${String(lastLine).length}ch)`
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-code-block": "",
+		className: cx("not-prose flex flex-col overflow-hidden rounded-xl bg-(--theme-code-bg) text-(--theme-code-text) shadow-[0_0_0_1px_color-mix(in_oklab,var(--theme-app)_8%,transparent)]", fill && "h-full min-h-0", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-9 shrink-0 items-center gap-2 pr-1.5 pl-4",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1 truncate text-xs text-(--theme-muted-text-color)",
+				children: heading
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-0.5",
+				children: [
+					headerActions,
+					filename && /* @__PURE__ */ jsx(IconButton, {
+						label: t.download,
+						icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
+						onClick: () => downloadText(code, filename)
+					}),
+					copy && /* @__PURE__ */ jsx(CopyButton, { text: code })
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: body,
+			dir: "ltr",
+			className: cx("overflow-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-focus)", fill && "min-h-0 flex-1"),
+			style: bodyStyle,
+			onScroll: (e) => {
+				const el = e.currentTarget;
+				atEnd.current = el.scrollTop + el.clientHeight >= el.scrollHeight - 4;
+			},
+			...scrollable ? {
+				tabIndex: 0,
+				role: "region",
+				"aria-label": name
+			} : {},
+			children: /* @__PURE__ */ jsx("pre", {
+				className: cx("m-0 px-4 pt-0.5 pb-3.5 font-mono text-sm leading-[1.6]", wrap ? "w-full" : "w-max min-w-full"),
+				children: /* @__PURE__ */ jsx("code", {
+					className: "block",
+					style: codeStyle,
+					children: lines.map((line, i) => /* @__PURE__ */ jsx("span", {
+						className: cx("flex min-h-[1lh] items-baseline", numbered && "before:mr-4 before:w-(--code-gutter) before:shrink-0 before:text-right before:font-mono before:text-[0.8125rem] before:text-(--theme-muted-text-color)/60 before:content-[counter(line)] before:[counter-increment:line]"),
+						children: /* @__PURE__ */ jsx("span", {
+							className: cx("min-w-0", wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre"),
+							children: tokens[i] ? tokens[i].map((token, j) => /* @__PURE__ */ jsx("span", {
+								style: token.color || token.fontStyle ? {
+									color: token.color,
+									fontStyle: token.fontStyle
+								} : void 0,
+								children: token.content
+							}, j)) : line
+						})
+					}, i))
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { CodeBlock };

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/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;