@parallelworks/ui 0.80.0 → 0.82.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/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
 /** Who an avatar stands for. An agent's avatar is a rounded square, so its shape, and not only
@@ -51,7 +51,9 @@ export declare function avatarInitials(name: string | undefined, { twoLetters }?
  *  `--avatar-person-text`) and agents `--avatar-agent` (with `--avatar-agent-text`, and the
  *  edge `--avatar-agent-ring`). */
 export declare function Avatar({ src, name, kind, shape, colorKey, colorClassName, size: sizeProp, status, decorative, tooltip, className, }: AvatarProps): import("react").JSX.Element;
-export interface AvatarGroupProps {
+/** Any other span attribute and the ref reach the stack's element, so the group can be a
+ *  Tooltip's or a popover's direct child. */
+export interface AvatarGroupProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
     /** Avatars, each possibly wrapped, such as in a hover card. Each child counts as one. */
     children: ReactNode;
     /** Shows at most this many; the rest become a "+N" chip. */
@@ -77,4 +79,4 @@ export interface AvatarGroupProps {
 /** Overlapping avatars, such as a task's assignees or who is here, with a "+N" chip for the
  *  rest. Each avatar inside takes the group's size and a ring in the color behind it, which
  *  follows its shape, round or square. */
-export declare function AvatarGroup({ children, max, total, showOverflow, size, ring, ringColor, label, className, }: AvatarGroupProps): import("react").JSX.Element;
+export declare function AvatarGroup({ children, max, total, showOverflow, size, ring, ringColor, label, className, style, ...spanProps }: AvatarGroupProps): import("react").JSX.Element;

package/dist/components/Avatar.js

@@ -144,7 +144,7 @@ function formatNumber(n, locale) {
 /** Overlapping avatars, such as a task's assignees or who is here, with a "+N" chip for the
 *  rest. Each avatar inside takes the group's size and a ring in the color behind it, which
 *  follows its shape, round or square. */
-function AvatarGroup({ children, max, total, showOverflow = true, size = "sm", ring = true, ringColor, label, className }) {
+function AvatarGroup({ children, max, total, showOverflow = true, size = "sm", ring = true, ringColor, label, className, style, ...spanProps }) {
 	const { common } = useStrings();
 	const locale = useLocale();
 	const items = Children.toArray(children);
@@ -157,11 +157,15 @@ function AvatarGroup({ children, max, total, showOverflow = true, size = "sm", r
 	return /* @__PURE__ */ jsx(AvatarGroupContext, {
 		value: context,
 		children: /* @__PURE__ */ jsxs("span", {
+			...spanProps,
 			...label ? {
 				role: "group",
 				"aria-label": label
 			} : {},
-			style: { "--avatar-ring": ringColor ?? "var(--theme-panel-bg)" },
+			style: {
+				"--avatar-ring": ringColor ?? "var(--theme-panel-bg)",
+				...style
+			},
 			className: cx("inline-flex shrink-0 items-center", OVERLAP_CLASSES[size], className),
 			children: [shown, showOverflow && rest > 0 && /* @__PURE__ */ jsxs("span", {
 				className: cx("relative inline-flex shrink-0 items-center justify-center rounded-full bg-(--theme-muted-panel-bg) font-medium text-(--theme-muted-text-color) tabular-nums select-none", CHIP_SIZE_CLASSES[size], ring && "ring-2 ring-(--avatar-ring)"),

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: cx("min-w-0 flex-1 truncate", title === void 0 ? "text-xs text-(--theme-muted-text-color)" : "text-[13px] font-medium text-(--theme-app)"),
+				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/CopyButton.d.ts

@@ -40,12 +40,19 @@ export interface CopyCodeBlockProps {
     revealed?: boolean | undefined;
     defaultRevealed?: boolean | undefined;
     onRevealedChange?: ((revealed: boolean) => void) | undefined;
-    /** Breaks a long value across lines instead of scrolling it, such as a token. */
+    /** Breaks a long value across lines instead of scrolling it, such as a token in a block.
+     *  Default false: an inline token, key or ID stays on one line and scrolls inside. */
     wrap?: boolean | undefined;
+    /** A compact value in the line, such as a token shown once in a Callout: as wide as the
+     *  value, up to its container, where a longer one scrolls sideways on its one line. A quiet
+     *  surface reads on a panel and a tinted callout alike, and the buttons stay right after the
+     *  value, always shown. The copy confirms with its check alone, as the change shows there. */
+    inline?: boolean | undefined;
     className?: string | undefined;
 }
 /** A block of code, such as a command to run, with a button that copies it. The
  *  buttons show while the pointer is over the block or focus is in it, and always
- *  where there is no hover to reveal them. With `secret` it holds a value shown once,
- *  such as a new API key: masked until the eye shows it, and copied either way. */
-export declare function CopyCodeBlock({ text, label, children, secret, revealed: revealedProp, defaultRevealed, onRevealedChange, wrap, className, }: CopyCodeBlockProps): import("react").JSX.Element;
+ *  where there is no hover to reveal them. With `inline` it is a compact value in the line
+ *  instead, such as a token shown once, its buttons always beside it. With `secret` it
+ *  masks the value until the eye shows it, and copies it either way. */
+export declare function CopyCodeBlock({ text, label, children, secret, revealed: revealedProp, defaultRevealed, onRevealedChange, inline, wrap, className, }: CopyCodeBlockProps): import("react").JSX.Element;