@tangle-network/ui 11.36.0 → 11.37.0

package/dist/lib/surface-motion.js

@@ -2,13 +2,13 @@
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { animate } from "motion";
+import { animate, motionValue, styleEffect } from "motion";
 //#region src/lib/surface-motion.tsx
 /** Radix owns state, focus and presence; Motion only retargets the visible object. */
 const SurfaceMotion = React.forwardRef(({ kind, side = "right", asChild, "data-state": state, ...props }, forwardedRef) => {
 	const element = React.useRef(null);
-	const initialized = React.useRef(false);
-	const controls = React.useRef(void 0);
+	const values = React.useRef(null);
+	const controls = React.useRef([]);
 	const ref = React.useCallback((node) => {
 		element.current = node;
 		if (typeof forwardedRef === "function") {
@@ -23,12 +23,13 @@ const SurfaceMotion = React.forwardRef(({ kind, side = "right", asChild, "data-s
 		const node = element.current;
 		if (!node) return;
 		const preference = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : void 0;
+		let cancelRender;
 		const run = () => {
 			const closed = state === "closed";
 			const bounds = node.getBoundingClientRect();
 			const hidden = {
 				opacity: kind === "sheet" ? 1 : 0,
-				scale: kind === "dialog" || kind === "tooltip" ? .98 : 1,
+				scale: kind === "dialog" || kind === "tooltip" || kind === "popover" ? .98 : 1,
 				x: kind === "sheet" ? side === "left" ? -bounds.width : side === "right" ? bounds.width : 0 : 0,
 				y: kind === "sheet" ? side === "top" ? -bounds.height : side === "bottom" ? bounds.height : 0 : 0
 			};
@@ -46,33 +47,53 @@ const SurfaceMotion = React.forwardRef(({ kind, side = "right", asChild, "data-s
 				node.style.transform = `translateX(${value.x}px) translateY(${value.y}px) scale(${value.scale})`;
 			};
 			if (preference?.matches || seconds <= 0 || style.animationName === "none") {
-				controls.current?.stop();
+				controls.current.forEach((control) => control.stop());
+				if (values.current) for (const key of [
+					"opacity",
+					"scale",
+					"x",
+					"y"
+				]) values.current[key].jump(target[key]);
 				place(target);
-				if (initialized.current) controls.current = animate(node, target, { duration: 0 });
 				return;
 			}
-			if (!initialized.current) {
+			if (!values.current) {
 				place(hidden);
-				initialized.current = true;
+				values.current = {
+					opacity: motionValue(hidden.opacity),
+					scale: motionValue(hidden.scale),
+					x: motionValue(hidden.x),
+					y: motionValue(hidden.y)
+				};
 			}
+			cancelRender ??= styleEffect(node, values.current);
 			const frequency = 12 / seconds;
-			controls.current = animate(node, target, {
+			controls.current = [
+				"opacity",
+				"scale",
+				"x",
+				"y"
+			].map((key) => animate(values.current[key], target[key], {
 				type: "spring",
 				stiffness: frequency * frequency,
 				damping: 2 * frequency,
 				restDelta: .001,
 				restSpeed: .01
-			});
+			}));
 		};
 		run();
 		preference?.addEventListener("change", run);
-		return () => preference?.removeEventListener("change", run);
+		return () => {
+			preference?.removeEventListener("change", run);
+			cancelRender?.();
+		};
 	}, [
 		state,
 		kind,
-		side
+		side,
+		props.style?.animation
 	]);
-	React.useEffect(() => () => controls.current?.stop(), []);
+	React.useEffect(() => () => controls.current.forEach((control) => control.stop()), []);
 	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
 		...props,
 		"data-state": state,

package/dist/markdown/api-schema.d.ts

@@ -0,0 +1,9 @@
+import { ApiField } from "../lib/code-presentation.js";
+//#region src/markdown/api-schema.d.ts
+export interface ApiSchemaProps {
+  fields: readonly ApiField[];
+  label?: string;
+}
+/** Presentation only: the consuming API owns all fields and constraints. */
+export declare function ApiSchema({ fields, label }: ApiSchemaProps): import("react").JSX.Element;
+//#endregion

package/dist/markdown/api-schema.js

@@ -0,0 +1,20 @@
+import { schemaRows } from "../lib/code-presentation.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/markdown/api-schema.tsx
+/** Presentation only: the consuming API owns all fields and constraints. */
+function ApiSchema({ fields, label = "Schema" }) {
+	return /* @__PURE__ */ jsx("dl", {
+		"aria-label": label,
+		className: "tangle-api-schema",
+		children: schemaRows(fields).map((field, index) => /* @__PURE__ */ jsxs("div", {
+			style: { paddingInlineStart: `${field.depth}rem` },
+			children: [/* @__PURE__ */ jsxs("dt", { children: [
+				/* @__PURE__ */ jsx("code", { children: field.path }),
+				" ",
+				/* @__PURE__ */ jsxs("span", { children: [field.type, field.required ? " · required" : ""] })
+			] }), field.description && /* @__PURE__ */ jsx("dd", { children: field.description })]
+		}, `${field.path}-${index}`))
+	});
+}
+//#endregion
+export { ApiSchema };

package/dist/markdown/code-block.d.ts

@@ -1,8 +1,10 @@
-import { HTMLAttributes, ReactNode } from "react";
+import { ApiMetadata, CodeExample, codeBlockGrammar } from "../lib/code-presentation.js";
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 //#region src/markdown/code-block.d.ts
-export declare function codeBlockGrammar(language: string | undefined): string | undefined;
 export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
   code: string;
+  examples?: readonly CodeExample[];
+  metadata?: ApiMetadata;
   language?: string;
   /**
    * Header text. Defaults to the language's name. Set this when the display
@@ -20,9 +22,15 @@ export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
  * Code with Shiki highlighting in Brand's syntax colors. It renders readable
  * plain code first (and on the server), then highlights once its grammar loads.
  */
-export declare const CodeBlock: import("react").MemoExoticComponent<({ code, language, label, filename, showLineNumbers, light, className, children, ...props }: CodeBlockProps) => import("react").JSX.Element>;
-/** Copy-to-clipboard button for use inside CodeBlock. */
-export declare const CopyButton: import("react").MemoExoticComponent<({ text }: {
+export declare const CodeBlock: import("react").MemoExoticComponent<({ code: defaultCode, language: defaultLanguage, label, filename: defaultFilename, examples, metadata, showLineNumbers, light, className, children, ...props }: CodeBlockProps) => import("react").JSX.Element>;
+export interface CopyButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
   text: string;
-}) => import("react").JSX.Element>;
-//#endregion
+  /** Supply for a visible action label; omitted preserves the icon-only control. */
+  label?: string;
+  copiedLabel?: string;
+  failedLabel?: string;
+}
+/** Copy-to-clipboard button for use inside CodeBlock or other exact-text actions. */
+export declare const CopyButton: import("react").MemoExoticComponent<({ text, label: actionLabel, copiedLabel, failedLabel, className, onClick, ...props }: CopyButtonProps) => import("react").JSX.Element>;
+//#endregion
+export { codeBlockGrammar };

package/dist/markdown/code-block.js

@@ -1,186 +1,23 @@
 import { focusRing, focusRingInset } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { LANGUAGE_NAMES, PLAIN_TEXT, SYNTAX, apiMetadataText, bindCodeTabs, codeBlockGrammar, codePreStyle, codePresentation, codeTextStyle, createCopyFeedback, tokenStyle, tokenize } from "../lib/code-presentation.js";
+import { memo, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy, FileCode2 } from "lucide-react";
 //#region src/markdown/code-block.tsx
-const SYNTAX = {
-	comment: "var(--syntax-comment, currentColor)",
-	keyword: "var(--syntax-keyword, currentColor)",
-	string: "var(--syntax-string, currentColor)",
-	function: "var(--syntax-function, currentColor)",
-	number: "var(--syntax-number, currentColor)",
-	variable: "var(--syntax-variable, currentColor)",
-	foreground: "var(--syntax-foreground, currentColor)"
-};
-const SHIKI_THEME = "tangle-syntax";
-const BRAND_COLOR_FOR_SHIKI = {
-	"var(--shiki-foreground)": SYNTAX.foreground,
-	"var(--shiki-token-comment)": SYNTAX.comment,
-	"var(--shiki-token-keyword)": SYNTAX.keyword,
-	"var(--shiki-token-string)": SYNTAX.string,
-	"var(--shiki-token-string-expression)": SYNTAX.string,
-	"var(--shiki-token-function)": SYNTAX.function,
-	"var(--shiki-token-constant)": SYNTAX.number,
-	"var(--shiki-token-link)": SYNTAX.number,
-	"var(--shiki-token-parameter)": SYNTAX.variable,
-	"var(--shiki-token-punctuation)": SYNTAX.foreground
-};
-const GRAMMARS = {
-	typescript: () => import("shiki/langs/typescript.mjs"),
-	tsx: () => import("shiki/langs/tsx.mjs"),
-	javascript: () => import("shiki/langs/javascript.mjs"),
-	jsx: () => import("shiki/langs/jsx.mjs"),
-	json: () => import("shiki/langs/json.mjs"),
-	jsonc: () => import("shiki/langs/jsonc.mjs"),
-	bash: () => import("shiki/langs/bash.mjs"),
-	python: () => import("shiki/langs/python.mjs"),
-	html: () => import("shiki/langs/html.mjs"),
-	css: () => import("shiki/langs/css.mjs"),
-	scss: () => import("shiki/langs/scss.mjs"),
-	markdown: () => import("shiki/langs/markdown.mjs"),
-	mdx: () => import("shiki/langs/mdx.mjs"),
-	yaml: () => import("shiki/langs/yaml.mjs"),
-	toml: () => import("shiki/langs/toml.mjs"),
-	sql: () => import("shiki/langs/sql.mjs"),
-	diff: () => import("shiki/langs/diff.mjs"),
-	go: () => import("shiki/langs/go.mjs"),
-	rust: () => import("shiki/langs/rust.mjs"),
-	solidity: () => import("shiki/langs/solidity.mjs"),
-	ruby: () => import("shiki/langs/ruby.mjs"),
-	java: () => import("shiki/langs/java.mjs"),
-	kotlin: () => import("shiki/langs/kotlin.mjs"),
-	swift: () => import("shiki/langs/swift.mjs"),
-	php: () => import("shiki/langs/php.mjs"),
-	c: () => import("shiki/langs/c.mjs"),
-	cpp: () => import("shiki/langs/cpp.mjs"),
-	csharp: () => import("shiki/langs/csharp.mjs"),
-	graphql: () => import("shiki/langs/graphql.mjs"),
-	xml: () => import("shiki/langs/xml.mjs"),
-	dockerfile: () => import("shiki/langs/dockerfile.mjs")
-};
-const LANGUAGE_ALIASES = {
-	ts: "typescript",
-	mts: "typescript",
-	cts: "typescript",
-	js: "javascript",
-	mjs: "javascript",
-	cjs: "javascript",
-	node: "javascript",
-	sh: "bash",
-	shell: "bash",
-	zsh: "bash",
-	console: "bash",
-	shellscript: "bash",
-	py: "python",
-	python3: "python",
-	yml: "yaml",
-	md: "markdown",
-	rs: "rust",
-	sol: "solidity",
-	rb: "ruby",
-	kt: "kotlin",
-	cs: "csharp",
-	"c#": "csharp",
-	"c++": "cpp",
-	gql: "graphql",
-	svg: "xml",
-	docker: "dockerfile",
-	patch: "diff",
-	htm: "html"
-};
-const LANGUAGE_NAMES = {
-	typescript: "TypeScript",
-	tsx: "TSX",
-	javascript: "JavaScript",
-	jsx: "JSX",
-	json: "JSON",
-	jsonc: "JSONC",
-	bash: "Bash",
-	python: "Python",
-	html: "HTML",
-	css: "CSS",
-	scss: "SCSS",
-	markdown: "Markdown",
-	mdx: "MDX",
-	yaml: "YAML",
-	toml: "TOML",
-	sql: "SQL",
-	diff: "Diff",
-	go: "Go",
-	rust: "Rust",
-	solidity: "Solidity",
-	ruby: "Ruby",
-	java: "Java",
-	kotlin: "Kotlin",
-	swift: "Swift",
-	php: "PHP",
-	c: "C",
-	cpp: "C++",
-	csharp: "C#",
-	graphql: "GraphQL",
-	xml: "XML",
-	dockerfile: "Dockerfile"
-};
-/** The Shiki grammar for a fence language, or undefined for plain text. */
-const PLAIN_TEXT = /* @__PURE__ */ new Set([
-	"text",
-	"txt",
-	"plain",
-	"plaintext"
-]);
-function codeBlockGrammar(language) {
-	if (!language) return void 0;
-	const id = language.toLowerCase();
-	const resolved = LANGUAGE_ALIASES[id] ?? id;
-	return GRAMMARS[resolved] ? resolved : void 0;
-}
-let highlighterPromise;
-const grammarLoads = /* @__PURE__ */ new Map();
-function loadHighlighter() {
-	return highlighterPromise ??= Promise.all([import("shiki/core"), import("shiki/engine/javascript")]).then(([core, engine]) => core.createHighlighterCore({
-		themes: [core.createCssVariablesTheme({
-			name: SHIKI_THEME,
-			variablePrefix: "--shiki-",
-			fontStyle: true
-		})],
-		langs: [],
-		engine: engine.createJavaScriptRegexEngine()
-	})).catch((error) => {
-		highlighterPromise = void 0;
-		throw error;
-	});
-}
-async function tokenize(code, grammar) {
-	const highlighter = await loadHighlighter();
-	let load = grammarLoads.get(grammar);
-	if (!load) {
-		load = GRAMMARS[grammar]().then((module) => highlighter.loadLanguage(module.default));
-		load.catch(() => grammarLoads.delete(grammar));
-		grammarLoads.set(grammar, load);
-	}
-	await load;
-	return highlighter.codeToTokensBase(code, {
-		lang: grammar,
-		theme: SHIKI_THEME
-	});
-}
-function tokenStyle(token) {
-	const color = token.color ? BRAND_COLOR_FOR_SHIKI[token.color] ?? SYNTAX.foreground : void 0;
-	const style = token.fontStyle ?? 0;
-	if (!color && !style) return void 0;
-	return {
-		...color ? { color } : {},
-		...style & 1 ? { fontStyle: "italic" } : {},
-		...style & 2 ? { fontWeight: "bold" } : {},
-		...style & 4 ? { textDecoration: "underline" } : {}
-	};
-}
 /**
 * Code with Shiki highlighting in Brand's syntax colors. It renders readable
 * plain code first (and on the server), then highlights once its grammar loads.
 */
-const CodeBlock = memo(({ code, language, label, filename, showLineNumbers = false, light, className, children, ...props }) => {
+const CodeBlock = memo(({ code: defaultCode, language: defaultLanguage, label, filename: defaultFilename, examples, metadata, showLineNumbers = false, light, className, children, ...props }) => {
+	const [selected, setSelected] = useState(0);
+	const tabId = useId(), tabList = useRef(null);
+	const selectedIndex = Math.min(selected, Math.max(0, (examples?.length ?? 1) - 1));
+	const example = examples?.[selectedIndex];
+	const code = example?.code ?? defaultCode, language = example?.language ?? defaultLanguage, filename = example?.filename ?? defaultFilename;
+	useEffect(() => {
+		if (tabList.current) return bindCodeTabs(tabList.current, setSelected);
+	}, [examples?.length]);
 	const grammar = codeBlockGrammar(language);
 	const [highlighted, setHighlighted] = useState(null);
 	useEffect(() => {
@@ -199,21 +36,8 @@ const CodeBlock = memo(({ code, language, label, filename, showLineNumbers = fal
 	}, [code, grammar]);
 	const languageName = grammar ? LANGUAGE_NAMES[grammar] : PLAIN_TEXT.has(language?.toLowerCase() ?? "") ? void 0 : language;
 	const headerLabel = label ?? (filename ? void 0 : languageName);
-	const hasHeader = Boolean(filename || headerLabel);
+	const hasHeader = Boolean(filename || headerLabel || metadata || examples?.length);
 	const mode = light === void 0 ? {} : { "data-theme": light ? "light" : "dark" };
-	const preStyle = {
-		margin: 0,
-		padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
-		background: "transparent",
-		color: SYNTAX.foreground,
-		fontSize: "var(--code-font-size, 0.8125rem)",
-		lineHeight: "var(--code-line-height, 1.5)",
-		overflowX: "auto"
-	};
-	const codeStyle = {
-		fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)",
-		whiteSpace: "pre"
-	};
 	const isHighlighted = Boolean(highlighted && highlighted.code === code && highlighted.grammar === grammar);
 	const lines = isHighlighted ? highlighted.lines.map((line) => line.map((token) => ({
 		content: token.content,
@@ -221,113 +45,141 @@ const CodeBlock = memo(({ code, language, label, filename, showLineNumbers = fal
 	}))) : code.split("\n").map((line) => [{ content: line }]);
 	const regionName = filename ?? headerLabel;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("group relative overflow-hidden rounded-lg border font-mono", "bg-card border-border", className),
+		className: cn(codePresentation.root, className),
 		"data-highlighted": isHighlighted ? "true" : void 0,
 		...props,
 		...mode,
 		children: [
 			hasHeader && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between gap-3 border-b border-border px-3 py-1.5 bg-[var(--code-header-bg,hsl(var(--background)))]",
-				children: [filename ? /* @__PURE__ */ jsxs("span", {
-					className: "flex min-w-0 items-center gap-2 font-sans text-sm",
-					children: [
-						/* @__PURE__ */ jsx(FileCode2, {
-							"aria-hidden": true,
-							className: "size-4 shrink-0 text-muted-foreground"
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "min-w-0 truncate font-mono font-medium text-foreground",
-							title: filename,
-							children: filename
-						}),
-						languageName && /* @__PURE__ */ jsx("span", {
-							className: "shrink-0 text-muted-foreground",
-							children: languageName
-						})
-					]
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "font-sans text-sm font-medium text-muted-foreground",
-					children: headerLabel
-				}), children]
+				className: codePresentation.header,
+				children: [
+					metadata && /* @__PURE__ */ jsx("span", {
+						className: "tangle-api-meta",
+						children: apiMetadataText(metadata)
+					}),
+					filename ? /* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 items-center gap-2 font-sans text-sm",
+						children: [
+							/* @__PURE__ */ jsx(FileCode2, {
+								"aria-hidden": true,
+								className: "size-4 shrink-0 text-muted-foreground"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 truncate font-mono font-medium text-foreground",
+								title: filename,
+								children: filename
+							}),
+							languageName && /* @__PURE__ */ jsx("span", {
+								className: "shrink-0 text-muted-foreground",
+								children: languageName
+							})
+						]
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "font-sans text-sm font-medium text-muted-foreground",
+						children: headerLabel
+					}),
+					children,
+					examples?.length ? /* @__PURE__ */ jsx(CopyButton, { text: code }) : null
+				]
 			}),
 			!hasHeader && children && /* @__PURE__ */ jsx("div", {
 				className: "absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
 				children
 			}),
-			/* @__PURE__ */ jsx("pre", {
-				tabIndex: 0,
-				role: "region",
-				"aria-label": regionName ? `${regionName} code` : "Code",
-				className: focusRingInset,
-				style: preStyle,
-				children: /* @__PURE__ */ jsx("code", {
-					style: codeStyle,
-					children: !isHighlighted && !showLineNumbers ? code : lines.map((line, index) => /* @__PURE__ */ jsxs("span", { children: [
-						showLineNumbers && /* @__PURE__ */ jsx("span", {
-							"aria-hidden": "true",
-							"data-line-number": true,
-							className: "inline-block select-none pr-4 text-right",
-							style: {
-								color: SYNTAX.comment,
-								minWidth: "2.5em"
-							},
-							children: index + 1
-						}),
-						line.map((token, tokenIndex) => /* @__PURE__ */ jsx("span", {
-							style: token.style,
-							children: token.content
-						}, tokenIndex)),
-						index < lines.length - 1 ? "\n" : null
-					] }, index))
+			examples && examples.length > 1 && /* @__PURE__ */ jsx("div", {
+				role: "tablist",
+				"aria-label": "Code examples",
+				ref: tabList,
+				className: codePresentation.tabs,
+				children: examples.map((item, index) => /* @__PURE__ */ jsx("button", {
+					id: `${tabId}-tab-${index}`,
+					type: "button",
+					role: "tab",
+					className: codePresentation.tab,
+					"data-state": index === selectedIndex ? "active" : "inactive",
+					"aria-selected": index === selectedIndex,
+					tabIndex: index === selectedIndex ? 0 : -1,
+					"aria-controls": `${tabId}-panel`,
+					children: item.label
+				}, index))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: `${tabId}-panel`,
+				role: examples && examples.length > 1 ? "tabpanel" : void 0,
+				"aria-labelledby": examples && examples.length > 1 ? `${tabId}-tab-${selectedIndex}` : void 0,
+				children: /* @__PURE__ */ jsx("pre", {
+					tabIndex: 0,
+					role: "region",
+					"aria-label": regionName ? `${regionName} code` : "Code",
+					className: focusRingInset,
+					style: codePreStyle,
+					children: /* @__PURE__ */ jsx("code", {
+						style: codeTextStyle,
+						children: !isHighlighted && !showLineNumbers ? code : lines.map((line, index) => /* @__PURE__ */ jsxs("span", { children: [
+							showLineNumbers && /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-line-number": true,
+								className: "inline-block select-none pr-4 text-right",
+								style: {
+									color: SYNTAX.comment,
+									minWidth: "2.5em"
+								},
+								children: index + 1
+							}),
+							line.map((token, tokenIndex) => /* @__PURE__ */ jsx("span", {
+								style: token.style,
+								children: token.content
+							}, tokenIndex)),
+							index < lines.length - 1 ? "\n" : null
+						] }, index))
+					})
 				})
 			})
 		]
 	});
 });
 CodeBlock.displayName = "CodeBlock";
-/** Copy-to-clipboard button for use inside CodeBlock. */
-const CopyButton = memo(({ text }) => {
-	const [copied, setCopied] = useState(false);
-	const [status, setStatus] = useState("");
-	const timerRef = useRef(null);
+/** Copy-to-clipboard button for use inside CodeBlock or other exact-text actions. */
+const CopyButton = memo(({ text, label: actionLabel, copiedLabel = "Copied", failedLabel = "Copy failed", className, onClick, ...props }) => {
+	const [{ copied, status, pending, loading, longRunning }, setFeedback] = useState({
+		copied: false,
+		status: "",
+		pending: false
+	});
+	const button = useRef(null);
+	const feedback = useRef(null);
 	useEffect(() => {
-		return () => {
-			if (timerRef.current) clearTimeout(timerRef.current);
-		};
+		const controller = createCopyFeedback(setFeedback, void 0, button.current ?? void 0);
+		feedback.current = controller;
+		return () => controller.dispose();
 	}, []);
-	const handleCopy = useCallback(async () => {
-		setStatus("");
-		if (timerRef.current) clearTimeout(timerRef.current);
-		try {
-			await navigator.clipboard.writeText(text);
-			setCopied(true);
-			setStatus("Copied to clipboard");
-		} catch (err) {
-			console.warn("Clipboard write failed:", err);
-			setCopied(false);
-			setStatus("Copy failed");
-		}
-		timerRef.current = setTimeout(() => {
-			setCopied(false);
-			setStatus("");
-		}, 2e3);
-	}, [text]);
-	const label = copied ? "Copied" : "Copy to clipboard";
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+	const handleCopy = (event) => {
+		if (pending || props["aria-disabled"] === true || props["aria-disabled"] === "true") return;
+		onClick?.(event);
+		if (!event.defaultPrevented) feedback.current?.copy(text);
+	};
+	const label = copied ? copiedLabel : actionLabel && status === "Copy failed" ? failedLabel : actionLabel ?? "Copy to clipboard";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+		...props,
+		ref: button,
+		"data-copy-loading": !!loading,
 		type: "button",
 		onClick: handleCopy,
-		className: cn("flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors", focusRing),
-		"aria-label": label,
+		className: cn(codePresentation.copy, actionLabel && "gap-2 px-3", focusRing, className),
+		"aria-label": pending ? "Copying to clipboard" : label,
+		"aria-busy": pending || props["aria-busy"],
+		"aria-disabled": pending || props["aria-disabled"],
 		title: label,
-		children: copied ? /* @__PURE__ */ jsx(Check, {
+		children: [copied ? /* @__PURE__ */ jsx(Check, {
 			"aria-hidden": "true",
 			className: "w-3.5 h-3.5 text-[var(--surface-success-text)]"
 		}) : /* @__PURE__ */ jsx(Copy, {
 			"aria-hidden": "true",
 			className: "w-3.5 h-3.5 text-muted-foreground"
-		})
+		}), actionLabel && /* @__PURE__ */ jsx("span", { children: label })]
 	}), /* @__PURE__ */ jsx("span", {
-		className: "sr-only",
+		className: codePresentation.copyStatus,
+		"data-copy-long-work": !!longRunning,
 		role: "status",
 		"aria-live": "polite",
 		children: status

package/dist/markdown.d.ts

@@ -1,5 +1,7 @@
 import { Markdown, MarkdownLinkChip, MarkdownLinkChipResolver, MarkdownProps, getSanitizedMarkdownHeadingIdFromRawFragment } from "./markdown/markdown.js";
-import { CodeBlock, CodeBlockProps, CopyButton, codeBlockGrammar } from "./markdown/code-block.js";
+import { codeBlockGrammar } from "./lib/code-presentation.js";
+import { CodeBlock, CodeBlockProps, CopyButton, CopyButtonProps } 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 };
+import { ApiSchema, ApiSchemaProps } from "./markdown/api-schema.js";
+export { ApiSchema, type ApiSchemaProps, CodeBlock, type CodeBlockProps, CopyButton, type CopyButtonProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, codeBlockGrammar, fenceInfo, getSanitizedMarkdownHeadingIdFromRawFragment, numericColumns, tableCsv };

package/dist/markdown.js

@@ -1,5 +1,7 @@
-import { CodeBlock, CopyButton, codeBlockGrammar } from "./markdown/code-block.js";
+import { codeBlockGrammar } from "./lib/code-presentation.js";
+import { CodeBlock, CopyButton } 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, codeBlockGrammar, fenceInfo, getSanitizedMarkdownHeadingIdFromRawFragment, numericColumns, tableCsv };
+import { ApiSchema } from "./markdown/api-schema.js";
+export { ApiSchema, CodeBlock, CopyButton, Markdown, codeBlockGrammar, fenceInfo, getSanitizedMarkdownHeadingIdFromRawFragment, numericColumns, tableCsv };

package/dist/primitives/button.js

@@ -1,3 +1,4 @@
+import { controlMotion } from "../lib/motion.js";
 import { ixControl, ixControlSoft, ixSelected } from "../lib/interaction.js";
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
@@ -6,7 +7,7 @@ import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/button.tsx
-const bareButton = `${focusRing} ${ixControlSoft} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50`;
+const bareButton = `${focusRing} ${controlMotion} ${ixControlSoft} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50`;
 /** One Button render's classes: variant and size, the toggle states, then the caller's. */
 function buttonClassName(variant, size, pressed, className) {
 	const toggle = pressed === void 0 ? void 0 : `${ixControl} ${ixSelected}`;

package/dist/primitives/code-block.d.ts

@@ -1,4 +1,4 @@
-import { CodeBlock, CodeBlockProps, CopyButton } from "../markdown/code-block.js";
+import { CodeBlock, CodeBlockProps, CopyButton, CopyButtonProps } from "../markdown/code-block.js";
 //#region src/primitives/code-block.d.ts
 export interface InlineCodeProps extends React.HTMLAttributes<HTMLElement> {}
 export declare function InlineCode({ className, children, ...props }: InlineCodeProps): import("react").JSX.Element;