@tangle-network/ui 11.30.1 → 11.31.0

package/dist/markdown/code-meta.js

@@ -0,0 +1,98 @@
+//#region src/markdown/code-meta.ts
+/**
+* Carries a fence's info string past the language (```ts title="src/x.ts"```)
+* to the rendered `<code>` as `data-meta`, so the code block can name its file.
+*/
+function remarkCodeMeta() {
+	return (tree) => {
+		const walk = (node) => {
+			if (node.type === "code" && node.meta) node.data = {
+				...node.data,
+				hProperties: {
+					...node.data?.hProperties,
+					dataMeta: node.meta
+				}
+			};
+			node.children?.forEach(walk);
+		};
+		walk(tree);
+	};
+}
+const LANGUAGE_BY_EXTENSION = {
+	ts: "typescript",
+	mts: "typescript",
+	cts: "typescript",
+	tsx: "tsx",
+	js: "javascript",
+	mjs: "javascript",
+	cjs: "javascript",
+	jsx: "jsx",
+	json: "json",
+	jsonc: "jsonc",
+	md: "markdown",
+	mdx: "mdx",
+	py: "python",
+	sh: "bash",
+	bash: "bash",
+	zsh: "bash",
+	yml: "yaml",
+	yaml: "yaml",
+	toml: "toml",
+	css: "css",
+	scss: "scss",
+	html: "html",
+	sql: "sql",
+	go: "go",
+	rs: "rust",
+	sol: "solidity",
+	rb: "ruby",
+	java: "java",
+	kt: "kotlin",
+	swift: "swift",
+	php: "php",
+	c: "c",
+	h: "c",
+	cpp: "cpp",
+	cs: "csharp",
+	graphql: "graphql",
+	gql: "graphql",
+	xml: "xml",
+	svg: "xml",
+	diff: "diff",
+	patch: "diff"
+};
+const FILE_PATH = /^(?:\.{0,2}\/)?(?:[\w@.-]+\/)*[\w@.-]*\.[A-Za-z0-9]+$|^(?:[\w@.-]+\/)+[\w@.-]+$/;
+/** The language a file's extension implies, if the code block can highlight it. */
+function languageForFile(filename) {
+	const base = filename.split("/").pop() ?? filename;
+	if (/^dockerfile$/i.test(base)) return "dockerfile";
+	const extension = base.includes(".") ? base.split(".").pop()?.toLowerCase() : void 0;
+	return extension ? LANGUAGE_BY_EXTENSION[extension] : void 0;
+}
+/**
+* The language and file name of a fenced block, from its class and info
+* string: ```ts title="src/x.ts"```, ```ts filename=src/x.ts```,
+* ```ts src/x.ts```, ```ts:src/x.ts``` and ```src/x.ts``` all name the file.
+*/
+function fenceInfo(className, meta) {
+	const token = /(?:^|\s)language-(\S+)/.exec(className ?? "")?.[1];
+	let language = token;
+	let filename;
+	if (token?.includes(":")) [language, filename] = [token.slice(0, token.indexOf(":")), token.slice(token.indexOf(":") + 1)];
+	else if (token && FILE_PATH.test(token) && (token.includes("/") || languageForFile(token))) {
+		filename = token;
+		language = void 0;
+	}
+	if (!filename && typeof meta === "string") {
+		const named = /(?:^|\s)(?:title|filename|file|name)=(?:"([^"]+)"|'([^']+)'|(\S+))/.exec(meta);
+		const bare = meta.trim().split(/\s+/).find((part) => FILE_PATH.test(part));
+		filename = named?.[1] ?? named?.[2] ?? named?.[3] ?? bare;
+	}
+	if (!language && filename) language = languageForFile(filename);
+	return {
+		...language ? { language } : {},
+		...filename ? { filename } : {}
+	};
+}
+//#endregion
+export { fenceInfo, languageForFile, remarkCodeMeta };

package/dist/markdown/markdown-table.d.ts

@@ -0,0 +1,8 @@
+import "react";
+import "react-markdown";
+//#region src/markdown/markdown-table.d.ts
+/** A column is numeric when every non-empty body cell is a figure. */
+export declare function numericColumns(body: string[][]): boolean[];
+/** RFC 4180 CSV of a rendered Markdown table, header first. */
+export declare function tableCsv(rows: string[][]): string;
+//#endregion

package/dist/markdown/markdown-table.js

@@ -0,0 +1,168 @@
+import { focusRing, focusRingInset } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+//#region src/markdown/markdown-table.tsx
+/** A figure: optional sign or currency, digits with separators, an optional unit. */
+const NUMERIC_CELL = /^[(]?[-+−]?\s?[$€£¥₹]?\s?\d[\d,_ ]*(?:\.\d+)?\s?(?:%|[kKmMbB]|x|ms|s|h|pp)?[)]?$/;
+/** The text of a hast subtree, as a reader sees it. */
+function textOf(node) {
+	if (node.type === "text") return node.value;
+	if (node.type !== "element") return "";
+	return node.children.map(textOf).join("");
+}
+function rowsOf(table) {
+	const header = [];
+	const body = [];
+	const visit = (element, inHead) => {
+		for (const child of element.children) {
+			if (child.type !== "element") continue;
+			if (child.tagName === "tr") {
+				const cells = child.children.filter((cell) => cell.type === "element" && (cell.tagName === "th" || cell.tagName === "td")).map((cell) => textOf(cell).replace(/\s+/g, " ").trim());
+				(inHead ? header : body).push(cells);
+			} else visit(child, inHead || child.tagName === "thead");
+		}
+	};
+	visit(table, false);
+	return {
+		header,
+		body
+	};
+}
+/** A column is numeric when every non-empty body cell is a figure. */
+function numericColumns(body) {
+	const width = Math.max(0, ...body.map((row) => row.length));
+	return Array.from({ length: width }, (_, column) => {
+		const cells = body.map((row) => row[column] ?? "").filter(Boolean);
+		return cells.length > 0 && cells.every((cell) => NUMERIC_CELL.test(cell));
+	});
+}
+function csvCell(value) {
+	const safe = /^[=+\-@\t\r]/.test(value) && !NUMERIC_CELL.test(value) ? `'${value}` : value;
+	return /[",\n\r]/.test(safe) || safe !== safe.trim() ? `"${safe.replace(/"/g, "\"\"")}"` : safe;
+}
+/** RFC 4180 CSV of a rendered Markdown table, header first. */
+function tableCsv(rows) {
+	return rows.map((row) => row.map(csvCell).join(",")).join("\n");
+}
+const TableColumns = createContext([]);
+const CellColumn = createContext(-1);
+function CopyCsvButton({ csv }) {
+	const [state, setState] = useState("idle");
+	const timer = useRef(null);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	const copy = useCallback(async () => {
+		if (timer.current) clearTimeout(timer.current);
+		try {
+			await navigator.clipboard.writeText(csv);
+			setState("copied");
+		} catch {
+			setState("failed");
+		}
+		timer.current = setTimeout(() => setState("idle"), 2e3);
+	}, [csv]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: copy,
+		className: cn("inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", focusRing),
+		children: [state === "copied" ? /* @__PURE__ */ jsx(Check, {
+			"aria-hidden": true,
+			className: "size-4 text-[var(--surface-success-text)]"
+		}) : /* @__PURE__ */ jsx(Copy, {
+			"aria-hidden": true,
+			className: "size-4"
+		}), state === "copied" ? "Copied" : "Copy CSV"]
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		role: "status",
+		"aria-live": "polite",
+		children: state === "copied" ? "Table copied as CSV" : state === "failed" ? "Copy failed" : ""
+	})] });
+}
+/**
+* A Markdown table as a card: a header row, subtle row lines, figures
+* right-aligned in tabular numerals, a copy-as-CSV control, and horizontal
+* scrolling inside the card when the columns outgrow a phone.
+*/
+function MarkdownTable({ node, className, children, ...props }) {
+	const { csv, numeric, rowCount } = useMemo(() => {
+		const { header, body } = node ? rowsOf(node) : {
+			header: [],
+			body: []
+		};
+		return {
+			csv: tableCsv([...header, ...body]),
+			numeric: numericColumns(body),
+			rowCount: body.length
+		};
+	}, [node]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "not-prose my-4 overflow-hidden rounded-lg border border-border bg-card",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2 border-b border-border px-3 py-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: rowCount === 1 ? "1 row" : `${rowCount} rows`
+			}), /* @__PURE__ */ jsx(CopyCsvButton, { csv })]
+		}), /* @__PURE__ */ jsx("div", {
+			tabIndex: 0,
+			role: "region",
+			"aria-label": "Table",
+			className: cn("overflow-x-auto", focusRingInset),
+			children: /* @__PURE__ */ jsx(TableColumns.Provider, {
+				value: numeric,
+				children: /* @__PURE__ */ jsx("table", {
+					...props,
+					className: cn("w-full border-collapse text-sm text-foreground", className),
+					children
+				})
+			})
+		})]
+	});
+}
+function MarkdownTableHead({ node: _node, className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		...props,
+		className: cn("bg-muted/50", className)
+	});
+}
+function MarkdownTableBody({ node: _node, className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		...props,
+		className: cn("[&>tr:last-child>td]:border-b-0", className)
+	});
+}
+function MarkdownTableRow({ node: _node, children, ...props }) {
+	let column = 0;
+	return /* @__PURE__ */ jsx("tr", {
+		...props,
+		children: Children.map(children, (child) => isValidElement(child) ? /* @__PURE__ */ jsx(CellColumn.Provider, {
+			value: column++,
+			children: child
+		}) : child)
+	});
+}
+function useNumericCell() {
+	const numeric = useContext(TableColumns);
+	const column = useContext(CellColumn);
+	return column >= 0 && numeric[column] === true;
+}
+function MarkdownTableHeaderCell({ node: _node, className, ...props }) {
+	const numeric = useNumericCell();
+	return /* @__PURE__ */ jsx("th", {
+		...props,
+		className: cn("whitespace-nowrap border-b border-border px-3 py-2 text-left font-semibold text-foreground", numeric && "text-right", className)
+	});
+}
+function MarkdownTableCell({ node: _node, className, ...props }) {
+	const numeric = useNumericCell();
+	return /* @__PURE__ */ jsx("td", {
+		...props,
+		className: cn("border-b border-border/60 px-3 py-2 align-top", numeric ? "whitespace-nowrap text-right tabular-nums" : "min-w-[8rem]", className)
+	});
+}
+//#endregion
+export { MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableHeaderCell, MarkdownTableRow, numericColumns, tableCsv };

package/dist/markdown/markdown.d.ts

@@ -2,16 +2,29 @@ import { UrlTransform } from "react-markdown";
 //#region src/markdown/markdown.d.ts
 /** Converts a raw Markdown fragment to the ID rehype-sanitize emits for its heading. */
 export declare function getSanitizedMarkdownHeadingIdFromRawFragment(rawFragment: string): string;
+/** How a link to a known object renders: a chip with that object's icon. */
+export interface MarkdownLinkChip {
+  kind: "file" | "image" | "asset" | "folder";
+  /** Chip text; the link's own text when omitted. */
+  label?: string;
+  /** Tooltip, such as the full path. */
+  title?: string;
+}
+/** Classifies a link by its transformed href; null keeps an ordinary link. */
+export type MarkdownLinkChipResolver = (href: string) => MarkdownLinkChip | null | undefined;
 export interface MarkdownProps {
   children: string;
   className?: string;
   /** Transform parsed link and image URLs while retaining protocol safety checks. */
   urlTransform?: UrlTransform;
+  /** Render links to known objects (a file, an asset) as chips that keep their href. */
+  linkChip?: MarkdownLinkChipResolver;
 }
 /**
- * Renders Markdown content with GFM support, XSS sanitisation, custom code
- * block rendering via our CodeBlock component, and images that open full size
- * or show a labelled placeholder when unavailable.
+ * Renders Markdown content with GFM support and XSS sanitisation: Shiki code
+ * blocks that name their file, tables as cards with right-aligned figures and
+ * a CSV copy, images that open full size or show a labelled placeholder, and
+ * optional chips for links to known objects.
  */
-export declare const Markdown: import("react").MemoExoticComponent<({ children, className, urlTransform }: MarkdownProps) => import("react").JSX.Element>;
+export declare const Markdown: import("react").MemoExoticComponent<({ children, className, urlTransform, linkChip }: MarkdownProps) => import("react").JSX.Element>;
 //#endregion

package/dist/markdown/markdown.js

@@ -1,11 +1,14 @@
+import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import { CodeBlock, CopyButton } from "./code-block.js";
+import { fenceInfo, remarkCodeMeta } from "./code-meta.js";
+import { MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableHeaderCell, MarkdownTableRow } from "./markdown-table.js";
 import { createContext, memo, useContext, useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ImageOff } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileImage, FileText, Folder, ImageOff, Package } from "lucide-react";
 import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
-import rehypeSanitize from "rehype-sanitize";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import rehypeSlug from "rehype-slug";
 import GithubSlugger from "github-slugger";
 //#region src/markdown/markdown.tsx
@@ -28,13 +31,77 @@ function transformMarkdownUrl(url, key, node, urlTransform) {
 	if (key === "href" && transformed === url && url.startsWith("#")) return safeUrl("#" + getSanitizedMarkdownHeadingIdFromRawFragment(url.slice(1)));
 	return safeUrl(transformed);
 }
+const LINK_CHIP_ICONS = {
+	file: FileText,
+	image: FileImage,
+	asset: Package,
+	folder: Folder
+};
+const LinkChipContext = createContext(void 0);
 const MarkdownLinkContext = createContext(false);
-function MarkdownLink({ node: _node, ...props }) {
+function MarkdownLink({ node: _node, children, className, ...props }) {
+	const resolveChip = useContext(LinkChipContext);
+	const chip = typeof props.href === "string" && props.href ? resolveChip?.(props.href) : null;
+	if (!chip) return /* @__PURE__ */ jsx(MarkdownLinkContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("a", {
+			...props,
+			className,
+			children
+		})
+	});
+	const Icon = LINK_CHIP_ICONS[chip.kind];
 	return /* @__PURE__ */ jsx(MarkdownLinkContext.Provider, {
 		value: true,
-		children: /* @__PURE__ */ jsx("a", { ...props })
+		children: /* @__PURE__ */ jsxs("a", {
+			...props,
+			title: chip.title ?? props.title,
+			"data-link-chip": chip.kind,
+			className: cn("not-prose inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-muted/60 px-2 py-0.5 align-middle text-[0.9375em] font-medium leading-6 text-foreground no-underline transition-colors hover:border-[var(--border-strong)] hover:bg-muted", focusRing, className),
+			children: [/* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": true,
+				className: "size-4 shrink-0 text-muted-foreground"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: chip.label ?? children
+			})]
+		})
+	});
+}
+const PreContext = createContext(false);
+function MarkdownPre({ children }) {
+	return /* @__PURE__ */ jsx(PreContext.Provider, {
+		value: true,
+		children
 	});
 }
+function MarkdownCode({ node, className: codeClass, children: codeChildren, ...rest }) {
+	const fenced = useContext(PreContext);
+	const code = String(codeChildren).replace(/\n$/, "");
+	if (!fenced) {
+		const { "data-meta": _meta, ...attributes } = rest;
+		return /* @__PURE__ */ jsx("code", {
+			className: cn("px-1.5 py-0.5 rounded border border-border bg-muted text-foreground text-[0.85em] font-mono", codeClass),
+			...attributes,
+			children: codeChildren
+		});
+	}
+	const { language, filename } = fenceInfo(codeClass, node?.properties?.dataMeta);
+	return /* @__PURE__ */ jsx(CodeBlock, {
+		code,
+		language,
+		filename,
+		className: "my-4",
+		children: /* @__PURE__ */ jsx(CopyButton, { text: code })
+	});
+}
+const sanitizeSchema = {
+	...defaultSchema,
+	attributes: {
+		...defaultSchema.attributes,
+		code: [...defaultSchema.attributes?.code ?? [], "dataMeta"]
+	}
+};
 /**
 * Renders a Markdown image that opens full size in a new tab, or a labelled
 * placeholder when its URL is unsafe or fails to load, instead of the
@@ -92,39 +159,34 @@ function MarkdownImage({ node: _node, src, alt, className, ...props }) {
 	});
 }
 /**
-* Renders Markdown content with GFM support, XSS sanitisation, custom code
-* block rendering via our CodeBlock component, and images that open full size
-* or show a labelled placeholder when unavailable.
+* Renders Markdown content with GFM support and XSS sanitisation: Shiki code
+* blocks that name their file, tables as cards with right-aligned figures and
+* a CSV copy, images that open full size or show a labelled placeholder, and
+* optional chips for links to known objects.
 */
-const Markdown = memo(({ children, className, urlTransform }) => {
+const Markdown = memo(({ children, className, urlTransform, linkChip }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("tangle-prose max-w-none text-sm", className),
-		children: /* @__PURE__ */ jsx(ReactMarkdown, {
-			remarkPlugins: [remarkGfm],
-			rehypePlugins: [rehypeSlug, rehypeSanitize],
-			urlTransform: (url, key, node) => transformMarkdownUrl(url, key, node, urlTransform),
-			components: {
-				a: MarkdownLink,
-				img: MarkdownImage,
-				pre({ children: preChildren }) {
-					return /* @__PURE__ */ jsx(Fragment$1, { children: preChildren });
+		children: /* @__PURE__ */ jsx(LinkChipContext.Provider, {
+			value: linkChip,
+			children: /* @__PURE__ */ jsx(ReactMarkdown, {
+				remarkPlugins: [remarkGfm, remarkCodeMeta],
+				rehypePlugins: [rehypeSlug, [rehypeSanitize, sanitizeSchema]],
+				urlTransform: (url, key, node) => transformMarkdownUrl(url, key, node, urlTransform),
+				components: {
+					a: MarkdownLink,
+					img: MarkdownImage,
+					pre: MarkdownPre,
+					code: MarkdownCode,
+					table: MarkdownTable,
+					thead: MarkdownTableHead,
+					tbody: MarkdownTableBody,
+					tr: MarkdownTableRow,
+					th: MarkdownTableHeaderCell,
+					td: MarkdownTableCell
 				},
-				code({ className: codeClass, children: codeChildren, ...rest }) {
-					const language = /language-(\w+)/.exec(codeClass || "")?.[1];
-					const code = String(codeChildren).replace(/\n$/, "");
-					if (!language && !code.includes("\n")) return /* @__PURE__ */ jsx("code", {
-						className: cn("px-1.5 py-0.5 rounded border border-border bg-muted text-foreground text-[0.85em] font-mono", codeClass),
-						...rest,
-						children: codeChildren
-					});
-					return /* @__PURE__ */ jsx(CodeBlock, {
-						code,
-						language,
-						children: /* @__PURE__ */ jsx(CopyButton, { text: code })
-					});
-				}
-			},
-			children
+				children
+			})
 		})
 	});
 });

package/dist/markdown.d.ts

@@ -1,3 +1,5 @@
-import { Markdown, MarkdownProps, getSanitizedMarkdownHeadingIdFromRawFragment } from "./markdown/markdown.js";
-import { CodeBlock, CodeBlockProps, CopyButton } from "./markdown/code-block.js";
-export { CodeBlock, type CodeBlockProps, CopyButton, Markdown, type MarkdownProps, getSanitizedMarkdownHeadingIdFromRawFragment };
+import { Markdown, MarkdownLinkChip, MarkdownLinkChipResolver, MarkdownProps, getSanitizedMarkdownHeadingIdFromRawFragment } from "./markdown/markdown.js";
+import { CodeBlock, CodeBlockProps, CopyButton, codeBlockGrammar } from "./markdown/code-block.js";
+import { fenceInfo } from "./markdown/code-meta.js";
+import { numericColumns, tableCsv } from "./markdown/markdown-table.js";
+export { CodeBlock, type CodeBlockProps, CopyButton, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, codeBlockGrammar, fenceInfo, getSanitizedMarkdownHeadingIdFromRawFragment, numericColumns, tableCsv };

package/dist/markdown.js

@@ -1,3 +1,5 @@
-import { CodeBlock, CopyButton } from "./markdown/code-block.js";
+import { CodeBlock, CopyButton, codeBlockGrammar } from "./markdown/code-block.js";
+import { fenceInfo } from "./markdown/code-meta.js";
+import { numericColumns, tableCsv } from "./markdown/markdown-table.js";
 import { Markdown, getSanitizedMarkdownHeadingIdFromRawFragment } from "./markdown/markdown.js";
-export { CodeBlock, CopyButton, Markdown, getSanitizedMarkdownHeadingIdFromRawFragment };
+export { CodeBlock, CopyButton, Markdown, codeBlockGrammar, fenceInfo, getSanitizedMarkdownHeadingIdFromRawFragment, numericColumns, tableCsv };

package/dist/primitives/toolbar.d.ts

@@ -10,22 +10,22 @@ import * as React from "react";
  * own visual language, so one row carried a native `<select>`, a custom input
  * and a segmented control side by side.
  *
- * So search and filters SHARE the free space and `actions` stays at its content
- * width, and the row is the one place those controls are composed, which is what
- * keeps them looking like one set.
+ * So on one `lg` line the filters keep their content width while it fits,
+ * search takes what is left between a 16rem floor and `max-w-sm`, and `actions`
+ * stays at its content width. The row is the one place those controls are
+ * composed, which is what keeps them looking like one set.
  *
- * Sharing is deliberate, and the alternative is worse. Giving the filter row its
- * content width starves search: measured with a 537px filter row in an 832px
- * toolbar, the search field collapses to 89px. Letting both flex bounds the
- * filter row instead, so it scrolls within its half — 313px each in that same
- * case — and search stays usable however many filters a page adds. `max-w-sm`
- * then stops search claiming more than it can use when there are few filters.
+ * Both earlier layouts failed one side. Filters at content width with no floor
+ * starved search: a 537px filter row in an 832px toolbar left it 89px. Splitting
+ * the row evenly clipped filters that would have fitted: at 1440px the Assets
+ * bar cut its third field at the scroll edge while search sat at 384px. With the
+ * floor, filters shrink and scroll only once search is down to 16rem.
  *
  * Below `lg` the row becomes a column and the filters wrap onto as many lines
  * as they need. Scrolling them as one line hid every filter past the first
  * behind the screen edge on a phone: at 390px the second select started at
  * 403px and a third at 652px, with nothing to say more were there. From `lg`
- * up they share one line and scroll within their half, as above.
+ * up they sit on one line as above.
  */
 /**
  * Slots only — `children` is omitted deliberately. A free child would render as

package/dist/primitives/toolbar.js

@@ -8,11 +8,11 @@ const Toolbar = React.forwardRef(({ className, search, filters, actions, ...prop
 	...props,
 	children: [
 		search && /* @__PURE__ */ jsx("div", {
-			className: "min-w-0 lg:max-w-sm lg:flex-1",
+			className: "min-w-0 lg:min-w-64 lg:max-w-sm lg:flex-1",
 			children: search
 		}),
 		filters && /* @__PURE__ */ jsx("div", {
-			className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 py-1 lg:flex-1 lg:flex-nowrap lg:gap-2 lg:overflow-x-auto",
+			className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 py-1 lg:flex-initial lg:flex-nowrap lg:gap-2 lg:overflow-x-auto",
 			children: filters
 		}),
 		actions && /* @__PURE__ */ jsx("div", {

package/dist/run/approval-card.d.ts

@@ -0,0 +1,46 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/run/approval-card.d.ts
+export interface ApprovalDiffFile {
+  path: string;
+  change?: "added" | "modified" | "deleted";
+  /** Unknown counts render as a dash rather than a guessed zero. */
+  additions?: number;
+  deletions?: number;
+}
+export interface ApprovalPlanStep {
+  label: ReactNode;
+  state: "done" | "current" | "upcoming";
+}
+export interface ApprovalCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  /** What the action does, in plain words. */
+  title: ReactNode;
+  /** Where it acts, such as "GitHub · owner/repo". */
+  context?: ReactNode;
+  /** This action's place in a declared plan. */
+  step?: {
+    index: number;
+    total: number;
+  };
+  /** The plan's steps, when the action belongs to one. */
+  plan?: readonly ApprovalPlanStep[];
+  /** Files the action writes, with line counts when known. */
+  diff?: readonly ApprovalDiffFile[];
+  /** Shown while line counts are being read. */
+  diffNote?: ReactNode;
+  /** The raw request, behind a Details toggle. */
+  details?: ReactNode;
+  status?: ReactNode;
+  actions?: ReactNode;
+}
+/** Files and +/− line counts for a write, with totals when every count is known. */
+export declare function ApprovalDiffSummary({ files, note }: {
+  files: readonly ApprovalDiffFile[];
+  note?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A request for a person to approve one action: what it does in plain words,
+ * where, its step in a plan, the files it writes, and the raw request behind
+ * a Details toggle. The caller owns the decision and supplies the actions.
+ */
+export declare function ApprovalCard({ title, context, step, plan, diff, diffNote, details, status, actions, className, ...props }: ApprovalCardProps): import("react").JSX.Element;
+//#endregion