@tangle-network/ui 11.36.0 → 11.38.0

package/dist/lib/code-presentation.js

@@ -0,0 +1,437 @@
+import { tabsPresentation } from "../presentation.js";
+//#region src/lib/code-presentation.ts
+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" } : {}
+	};
+}
+const codePreStyle = {
+	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 codeTextStyle = {
+	fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)",
+	whiteSpace: "pre"
+};
+const codePresentation = {
+	tabs: `tangle-code-tabs ${tabsPresentation.list.underline}`,
+	tab: tabsPresentation.trigger.underline,
+	root: "group relative min-w-0 overflow-hidden rounded-lg border font-mono bg-card border-border",
+	header: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-3 py-1.5 bg-[var(--code-header-bg,hsl(var(--background)))]",
+	copy: "flex items-center justify-center min-w-8 min-h-8 pointer-coarse:min-w-11 pointer-coarse:min-h-11 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors data-[copy-loading=true]:after:content-['…'] data-[copy-loading=true]:gap-1",
+	copyStatus: "sr-only data-[copy-long-work=true]:not-sr-only data-[copy-long-work=true]:text-xs data-[copy-long-work=true]:text-muted-foreground"
+};
+const apiMetadataText = (meta) => [
+	meta.kind,
+	meta.method,
+	meta.status,
+	meta.contentType
+].filter((v) => v !== void 0).join(" · ");
+/** Same lazy grammar/token model for React, Hono SSR and static renderers. */
+async function highlightCode(code, language) {
+	const grammar = codeBlockGrammar(language);
+	if (!grammar) return code.split("\n").map((content) => [{
+		content,
+		style: void 0
+	}]);
+	return (await tokenize(code, grammar)).map((line) => line.map((token) => ({
+		content: token.content,
+		style: tokenStyle(token)
+	})));
+}
+/** Legacy fallback is used only when the modern clipboard API is absent. */
+async function writeClipboard(text) {
+	if (navigator.clipboard?.writeText) {
+		await navigator.clipboard.writeText(text);
+		return;
+	}
+	const active = document.activeElement, selection = document.getSelection();
+	const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, i) => selection.getRangeAt(i).cloneRange()) : [];
+	const field = document.createElement("textarea");
+	field.value = text;
+	field.readOnly = true;
+	field.tabIndex = -1;
+	field.setAttribute("aria-hidden", "true");
+	field.style.position = "fixed";
+	field.style.left = "-9999px";
+	document.body.append(field);
+	try {
+		field.select();
+		if (!document.execCommand?.("copy")) throw Error("Clipboard unavailable");
+	} finally {
+		field.remove();
+		active?.focus({ preventScroll: true });
+		if (selection) {
+			selection.removeAllRanges();
+			for (const range of ranges) selection.addRange(range);
+		}
+	}
+}
+const COPY_FEEDBACK_MS = 2e3;
+/** Resolve scoped Brand times, including calc(), without duplicating token values. */
+function interactionBudgets(scope) {
+	const view = scope.ownerDocument.defaultView;
+	if (!view) return {};
+	const probe = scope.ownerDocument.createElement("i");
+	probe.hidden = true;
+	scope.append(probe);
+	const read = (role) => {
+		const name = `--interaction-${role}`;
+		if (!view.getComputedStyle(scope).getPropertyValue(name).trim()) return void 0;
+		probe.style.animationDuration = `var(${name})`;
+		const time = /^(\d+(?:\.\d+)?)(ms|s)$/.exec(view.getComputedStyle(probe).animationDuration);
+		return time ? Number(time[1]) * (time[2] === "s" ? 1e3 : 1) : void 0;
+	};
+	try {
+		return {
+			feedback: read("feedback-budget"),
+			pending: read("pending-delay"),
+			longWork: read("long-work-delay"),
+			mutation: read("mutation-budget")
+		};
+	} finally {
+		probe.remove();
+	}
+}
+/** Owns one accepted write, scoped delays and cleanup for both renderers. */
+function createCopyFeedback(change, write = writeClipboard, scope) {
+	let disposed = false, pending = false, timer;
+	let delays = [], elapsed;
+	const clearPending = () => {
+		for (const delay of delays) clearTimeout(delay);
+		delays = [];
+		if (elapsed) clearInterval(elapsed);
+		elapsed = void 0;
+	};
+	return {
+		async copy(text) {
+			if (disposed || pending) return;
+			const started = performance.now(), budgets = scope ? interactionBudgets(scope) : {};
+			pending = true;
+			if (timer) clearTimeout(timer);
+			let loading = budgets.pending === void 0, longRunning = false;
+			const announce = () => {
+				const elapsedMs = performance.now() - started;
+				change({
+					copied: false,
+					pending: true,
+					loading,
+					longRunning,
+					elapsedMs,
+					status: longRunning ? `Copying · ${Math.floor(elapsedMs / 1e3)}s elapsed. Time remaining unknown. Cannot cancel this clipboard write; waiting for confirmation.` : "Copying to clipboard"
+				});
+			};
+			announce();
+			const feedbackMs = performance.now() - started;
+			if (budgets.pending !== void 0) delays.push(setTimeout(() => {
+				loading = true;
+				announce();
+			}, budgets.pending));
+			if (budgets.longWork !== void 0) delays.push(setTimeout(() => {
+				longRunning = true;
+				announce();
+				elapsed = setInterval(announce, 1e3);
+			}, budgets.longWork));
+			let copied;
+			try {
+				await write(text);
+				copied = true;
+			} catch {
+				copied = false;
+			}
+			pending = false;
+			clearPending();
+			if (disposed) return;
+			const elapsedMs = performance.now() - started;
+			change({
+				copied,
+				status: copied ? "Copied to clipboard" : "Copy failed",
+				pending: false,
+				measurement: {
+					elapsedMs,
+					feedbackMs,
+					budgets,
+					mutationBudgetExceeded: budgets.mutation === void 0 ? void 0 : elapsedMs > budgets.mutation
+				}
+			});
+			timer = setTimeout(() => {
+				if (!disposed) change({
+					copied: false,
+					status: "",
+					pending: false
+				});
+			}, COPY_FEEDBACK_MS);
+		},
+		dispose() {
+			disposed = true;
+			clearPending();
+			if (timer) clearTimeout(timer);
+		}
+	};
+}
+function bindCopyButton(button, status, text) {
+	const previous = {
+		label: button.getAttribute("aria-label"),
+		status: status.textContent,
+		disabled: button.getAttribute("aria-disabled"),
+		busy: button.getAttribute("aria-busy"),
+		loading: button.getAttribute("data-copy-loading"),
+		long: status.getAttribute("data-copy-long-work")
+	};
+	const restore = (element, name, value) => {
+		if (value === null) element.removeAttribute(name);
+		else element.setAttribute(name, value);
+	};
+	const feedback = createCopyFeedback((state) => {
+		status.textContent = state.status;
+		status.setAttribute("data-copy-long-work", String(!!state.longRunning));
+		button.setAttribute("data-copy-loading", String(!!state.loading));
+		button.setAttribute("aria-label", state.pending ? "Copying to clipboard" : state.copied ? "Copied" : "Copy to clipboard");
+		if (state.pending) {
+			button.setAttribute("aria-disabled", "true");
+			button.setAttribute("aria-busy", "true");
+		} else {
+			restore(button, "aria-disabled", previous.disabled);
+			restore(button, "aria-busy", previous.busy);
+		}
+	}, writeClipboard, button);
+	const click = () => {
+		if (!button.disabled && button.getAttribute("aria-disabled") !== "true") feedback.copy(text());
+	};
+	button.addEventListener("click", click);
+	return () => {
+		button.removeEventListener("click", click);
+		feedback.dispose();
+		restore(button, "aria-label", previous.label);
+		status.textContent = previous.status;
+		restore(button, "aria-disabled", previous.disabled);
+		restore(button, "aria-busy", previous.busy);
+		restore(button, "data-copy-loading", previous.loading);
+		restore(status, "data-copy-long-work", previous.long);
+	};
+}
+/** Native tabs adapter. The consumer owns labels, IDs and escaped panel content. */
+function bindCodeTabs(list, onSelect) {
+	const buttons = () => [...list.querySelectorAll("[role=\"tab\"]")];
+	const select = (index, focus) => {
+		const tabs = buttons(), tab = tabs[index];
+		if (!tab) return;
+		for (const panel of new Set(tabs.map((t) => document.getElementById(t.getAttribute("aria-controls") ?? "")))) if (panel) panel.hidden = true;
+		tabs.forEach((t, i) => {
+			t.setAttribute("aria-selected", String(i === index));
+			t.dataset.state = i === index ? "active" : "inactive";
+			t.tabIndex = i === index ? 0 : -1;
+		});
+		const panel = document.getElementById(tab.getAttribute("aria-controls") ?? "");
+		if (panel) {
+			panel.hidden = false;
+			panel.setAttribute("aria-labelledby", tab.id);
+		}
+		if (focus) tab.focus();
+		onSelect?.(index);
+	};
+	const click = (event) => {
+		const tab = event.target.closest("[role=\"tab\"]");
+		const index = buttons().findIndex((t) => t === tab);
+		if (index >= 0) select(index, false);
+	};
+	const key = (event) => {
+		const tabs = buttons(), current = tabs.findIndex((t) => t === document.activeElement);
+		if (current < 0) return;
+		const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : event.key === "ArrowRight" ? (current + 1) % tabs.length : event.key === "ArrowLeft" ? (current + tabs.length - 1) % tabs.length : void 0;
+		if (next !== void 0) {
+			event.preventDefault();
+			select(next, true);
+		}
+	};
+	list.addEventListener("click", click);
+	list.addEventListener("keydown", key);
+	return () => {
+		list.removeEventListener("click", click);
+		list.removeEventListener("keydown", key);
+	};
+}
+function schemaRows(fields, parent = "", depth = 0) {
+	return fields.flatMap((field) => {
+		const path = parent ? `${parent}.${field.name}` : field.name;
+		return [{
+			...field,
+			path,
+			depth
+		}, ...schemaRows(field.children ?? [], path, depth + 1)];
+	});
+}
+//#endregion
+export { LANGUAGE_NAMES, PLAIN_TEXT, SYNTAX, apiMetadataText, bindCodeTabs, bindCopyButton, codeBlockGrammar, codePreStyle, codePresentation, codeTextStyle, createCopyFeedback, highlightCode, interactionBudgets, schemaRows, tokenStyle, tokenize, writeClipboard };

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