@tangle-network/ui 11.35.0 → 11.37.0

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/presentation.d.ts

@@ -0,0 +1,88 @@
+import { controlMotion } from "./lib/motion.js";
+import { controlHeight, controlRadius, controlSizes, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "./lib/control-presentation.js";
+import { ixControlSoft, ixSelected, ixTabUnderline } from "./lib/interaction.js";
+//#region src/presentation.d.ts
+export declare const buttonVariants: (props?: ({
+  variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "sandbox" | "secondary" | null | undefined;
+  size?: "compact" | "default" | "display" | "icon" | "icon-lg" | "icon-sm" | "lg" | "md" | "sm" | "touch" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const inputVariants: (props?: ({
+  variant?: "default" | "error" | "sandbox" | null | undefined;
+  size?: "compact" | "default" | "lg" | "md" | "sm" | "touch" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tablePresentation: {
+  readonly root: "w-full caption-bottom text-sm";
+  readonly wrapper: "relative w-full overflow-auto";
+  readonly head: "[&_tr]:border-b";
+  readonly body: "[&_tr:last-child]:border-0";
+  readonly footer: "border-t bg-card font-medium [&>tr]:last:border-b-0";
+  readonly row: "border-border border-b [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none hover:bg-muted/50 data-[state=selected]:bg-muted/50";
+  readonly columnHeader: "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0";
+  readonly cell: "p-4 align-middle [&:has([role=checkbox])]:pr-0";
+  readonly caption: "mt-4 text-muted-foreground text-sm";
+};
+export declare const emptyStatePresentation: {
+  readonly root: "flex flex-col items-center justify-center px-4 py-16 text-center";
+  readonly icon: "mb-4 rounded-full bg-muted p-4 text-muted-foreground";
+  readonly title: "font-semibold text-lg";
+  readonly description: "mt-2 max-w-sm text-muted-foreground text-sm";
+  readonly action: "mt-6";
+};
+export declare const metricPresentation: {
+  readonly strip: "grid min-w-0 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]";
+  readonly item: "min-w-0 border-border p-4 sm:p-5";
+  readonly value: "mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl";
+  readonly label: "flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm";
+  readonly labelText: "min-w-0 whitespace-normal [overflow-wrap:anywhere]";
+  readonly hint: "mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs";
+};
+export declare const metricLayouts: {
+  readonly 3: "grid-cols-2 sm:grid-cols-3 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(3n+1))]:border-l";
+  readonly 4: "grid-cols-2 sm:grid-cols-4 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(4n+1))]:border-l";
+  readonly 5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(5n+1))]:border-l";
+  readonly 6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(6n+1))]:border-l";
+};
+export declare const dialogPresentation: {
+  readonly overlay: "fixed inset-0 z-50 bg-black/40";
+  readonly transition: "data-[state=open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=delayed-open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=instant-open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=closed]:[animation:tangle-surface-absent_var(--motion-dismiss)_both] motion-reduce:animate-none!";
+  readonly position: "fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]";
+  readonly surface: "gap-4 rounded-lg border bg-card p-6 shadow-lg";
+  readonly close: "absolute top-4 right-4 rounded-sm opacity-70 [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground";
+  readonly header: "flex flex-col space-y-1.5 text-center sm:text-left";
+  readonly footer: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2";
+  readonly title: "font-semibold text-lg leading-none tracking-tight";
+  readonly description: "text-muted-foreground text-sm";
+};
+/** Native-dialog adapter for Hono/static markup. Radix remains the React Dialog/Sheet owner. */
+export declare function bindDialog(dialog: HTMLDialogElement, trigger: HTMLElement): () => void;
+export declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const helpPresentation: {
+  root: string;
+  error: string;
+  hint: string;
+};
+export declare const cardPresentation: {
+  readonly root: "rounded-[var(--radius-lg)] border text-card-foreground [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none";
+  readonly padding: "p-4";
+  readonly variants: {
+    readonly default: "bg-card border-border shadow-[var(--edge-highlight),var(--shadow-card)]";
+    readonly elevated: "bg-muted/50 border-border shadow-[var(--shadow-card)]";
+    readonly glass: "bg-card/80 backdrop-blur-xl border-border shadow-[var(--shadow-card)]";
+    readonly sandbox: "bg-muted/50 border-primary/20 shadow-[var(--shadow-accent)]";
+  };
+};
+/** Canonical segmented, pill and underline navigation presentation. */
+export declare const tabsPresentation: {
+  readonly list: {
+    readonly default: "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground";
+    readonly pills: "inline-flex items-center gap-2";
+    readonly underline: "inline-flex items-center gap-4 border-b border-border";
+  };
+  readonly trigger: {
+    readonly default: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)] aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]";
+    readonly pills: "inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 data-[state=inactive]:text-muted-foreground hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)] aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]";
+    readonly underline: "inline-flex items-center justify-center whitespace-nowrap rounded-t-md pb-3 text-sm font-medium [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=inactive]:text-muted-foreground hover:shadow-[inset_0_-2px_0_hsl(var(--hsl-ring)/0.4)] data-[state=active]:bg-[hsl(var(--hsl-ring)/0.07)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_-2px_0_var(--ix-sel-ring)] aria-checked:bg-[hsl(var(--hsl-ring)/0.07)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_-2px_0_var(--ix-sel-ring)]";
+  };
+};
+//#endregion
+export { controlHeight, controlMotion, controlRadius, controlSizes, controlText, fieldPresentation, fieldSizes, fieldTouchText, ixControlSoft, ixSelected, ixTabUnderline };