@tangle-network/ui 11.36.0 → 11.38.0

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;

package/dist/primitives/popover.js

@@ -1,5 +1,7 @@
 "use client";
+import { surfaceMotion } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
+import { SurfaceMotion } from "../lib/surface-motion.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -13,12 +15,18 @@ const PopoverClose = PopoverPrimitive.Close;
 * shadow as `DropdownMenuContent`. Width defaults to 18rem; pass a width class
 * for wider content and keep long text wrapping inside it.
 */
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, asChild, children, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
 	ref,
 	align,
 	sideOffset,
-	className: cn("z-50 w-72 max-w-[calc(100vw-2rem)] origin-(--radix-popover-content-transform-origin) rounded-xl border border-border bg-card p-4 text-foreground shadow-[var(--shadow-card)] outline-hidden", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "motion-reduce:animate-none", className),
-	...props
+	className: cn("z-50 w-72 max-w-[calc(100vw-2rem)] origin-(--radix-popover-content-transform-origin) rounded-xl border border-border bg-card p-4 text-foreground shadow-[var(--shadow-card)] outline-hidden", surfaceMotion, className),
+	...props,
+	asChild: true,
+	children: /* @__PURE__ */ jsx(SurfaceMotion, {
+		kind: "popover",
+		asChild,
+		children
+	})
 }) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 //#endregion

package/dist/primitives/wizard.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+//#region src/primitives/wizard.d.ts
+export interface WizardProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /** Drives the active step; omit for uncontrolled with `defaultStep`. */
+  step?: number;
+  defaultStep?: number;
+  onStepChange?: (step: number) => void;
+  /** Fires when the last step's primary action resolves. */
+  onFinished?: () => void;
+}
+export declare function Wizard({ children, step, defaultStep, onStepChange, onFinished, className, ...rest }: WizardProps): React.JSX.Element;
+export interface WizardStepProps {
+  /** Shown in the rail (and the mobile position line). Steps read at a glance; keep it one or two words. */
+  title: string;
+  children: React.ReactNode;
+  /** The footer's primary action label. Omit when the step renders its own actions. */
+  nextLabel?: string;
+  /** Runs before advancing. Resolve (or return a non-false value) to advance; return false or throw to stay — the step's own content shows why. */
+  onNext?: () => Promise<unknown> | unknown;
+  /** Disables the primary action (a required choice is still missing). */
+  nextDisabled?: boolean;
+  /** Hides the Back button for steps where going back makes no sense (a completed handshake). */
+  hideBack?: boolean;
+}
+export declare function WizardStep({ title, children, nextLabel, onNext, nextDisabled, hideBack }: WizardStepProps): React.JSX.Element;
+export interface Wizard extends React.FC<WizardProps> {
+  Step: typeof WizardStep;
+}
+//#endregion