@tangle-network/ui 11.36.0 → 11.38.0

package/dist/primitives/wizard.js

@@ -0,0 +1,158 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronLeft } from "lucide-react";
+//#region src/primitives/wizard.tsx
+const WizardContext = React.createContext(null);
+function useWizardContext(component) {
+	const context = React.useContext(WizardContext);
+	if (!context) throw new Error(`<${component}> must be used inside <Wizard>`);
+	return context;
+}
+function Wizard({ children, step, defaultStep = 0, onStepChange, onFinished, className, ...rest }) {
+	const steps = React.Children.toArray(children).filter(React.isValidElement);
+	const [internal, setInternal] = React.useState(defaultStep);
+	const current = step !== void 0 ? step : internal;
+	const total = steps.length;
+	const goTo = React.useCallback((target) => {
+		const bounded = Math.max(0, Math.min(target, total - 1));
+		if (bounded === current) return;
+		onStepChange?.(bounded);
+		if (step === void 0) setInternal(bounded);
+	}, [
+		current,
+		onStepChange,
+		step,
+		total
+	]);
+	const context = React.useMemo(() => ({
+		current,
+		total,
+		goTo,
+		next: () => goTo(current + 1),
+		back: () => goTo(current - 1),
+		finish: () => onFinished?.()
+	}), [
+		current,
+		goTo,
+		onFinished,
+		total
+	]);
+	const titles = steps.map((child) => child.props.title);
+	const activeTitle = titles[current] ?? "";
+	return /* @__PURE__ */ jsx(WizardContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("w-full", className),
+			...rest,
+			children: [
+				/* @__PURE__ */ jsx("ol", {
+					"aria-label": "Steps",
+					className: "hidden items-center gap-2 sm:flex",
+					children: titles.map((title, index) => {
+						const state = index < current ? "done" : index === current ? "active" : "future";
+						const marker = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+							className: cn("flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium", state === "active" && "bg-primary text-primary-foreground", state === "done" && "bg-primary/15 text-primary", state === "future" && "bg-muted text-muted-foreground"),
+							children: state === "done" ? /* @__PURE__ */ jsx(Check, {
+								className: "size-3.5",
+								"aria-hidden": true
+							}) : index + 1
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn("text-sm", state === "active" && "font-medium text-foreground", state === "done" && "text-foreground", state === "future" && "text-muted-foreground"),
+							children: title
+						})] });
+						return /* @__PURE__ */ jsxs(React.Fragment, { children: [index > 0 && /* @__PURE__ */ jsx("li", {
+							"aria-hidden": true,
+							className: "h-px flex-1 bg-border"
+						}), /* @__PURE__ */ jsx("li", { children: state === "future" ? /* @__PURE__ */ jsx("span", {
+							"aria-disabled": "true",
+							className: "flex items-center gap-2 p-1 opacity-70",
+							children: marker
+						}) : /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => goTo(index),
+							className: "-m-1 flex items-center gap-2 rounded-md p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+							children: marker
+						}) })] }, `${index}-${title}`);
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "sm:hidden",
+					children: [/* @__PURE__ */ jsxs("p", {
+						className: "text-xs text-muted-foreground",
+						children: [
+							"Step ",
+							current + 1,
+							" of ",
+							total,
+							" · ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium text-foreground",
+								children: activeTitle
+							})
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "mt-2 h-1 overflow-hidden rounded-full bg-muted",
+						role: "progressbar",
+						"aria-valuemin": 1,
+						"aria-valuemax": total,
+						"aria-valuenow": current + 1,
+						"aria-label": `Step ${current + 1} of ${total}`,
+						children: /* @__PURE__ */ jsx("div", {
+							className: "h-full rounded-full bg-primary transition-all",
+							style: { width: `${(current + 1) / total * 100}%` }
+						})
+					})]
+				}),
+				steps.map((child, index) => index === current ? /* @__PURE__ */ jsx(React.Fragment, { children: child }, index) : null)
+			]
+		})
+	});
+}
+function WizardStep({ title, children, nextLabel, onNext, nextDisabled, hideBack }) {
+	const { current, total, goTo, back, finish } = useWizardContext("Wizard.Step");
+	const [busy, setBusy] = React.useState(false);
+	const isLast = current === total - 1;
+	async function runNext() {
+		if (!onNext) {
+			if (isLast) finish();
+			else goTo(current + 1);
+			return;
+		}
+		setBusy(true);
+		try {
+			if (await onNext() === false) return;
+			if (isLast) finish();
+			else goTo(current + 1);
+		} catch {} finally {
+			setBusy(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": title,
+		className: "pt-6",
+		children: [children, (nextLabel || !hideBack) && /* @__PURE__ */ jsxs("div", {
+			className: "mt-6 flex items-center justify-between gap-2 border-t border-border pt-4",
+			children: [!hideBack && current > 0 ? /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "ghost",
+				onClick: back,
+				children: [/* @__PURE__ */ jsx(ChevronLeft, {
+					className: "size-4",
+					"aria-hidden": true
+				}), " Back"]
+			}) : /* @__PURE__ */ jsx("span", {}), nextLabel && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				className: "w-full sm:w-auto",
+				onClick: () => void runNext(),
+				disabled: nextDisabled,
+				loading: busy,
+				children: nextLabel
+			})]
+		})]
+	});
+}
+Wizard.Step = WizardStep;
+//#endregion
+export { Wizard, WizardStep };

package/dist/primitives.d.ts

@@ -50,7 +50,8 @@ import { Pagination, PaginationProps } from "./primitives/pagination.js";
 import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
 import { Tag, TagProps } from "./primitives/tag.js";
 import { Chip, ChipProps } from "./primitives/chip.js";
+import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/wizard.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };

package/dist/primitives.js

@@ -49,8 +49,9 @@ import { StatusPill } from "./primitives/status-pill.js";
 import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
 import { Tag } from "./primitives/tag.js";
 import { Chip } from "./primitives/chip.js";
+import { Wizard, WizardStep } from "./primitives/wizard.js";
 import { IconTile, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricStrip } from "./primitives/metric-strip.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
 import { Logo, TangleKnot } from "@tangle-network/brand";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, HelpText, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, badgeVariants, buttonVariants, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, HelpText, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.36.0",
+  "version": "11.38.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -120,6 +120,11 @@
       "default": "./dist/presentation.js"
     },
     "./styles/presentation.css": "./src/styles/presentation.css",
+    "./code-presentation": {
+      "types": "./dist/code-presentation.d.ts",
+      "import": "./dist/code-presentation.js",
+      "default": "./dist/code-presentation.js"
+    },
     "./styles/compat.css": "./src/styles/compat.css"
   },
   "dependencies": {
@@ -148,7 +153,7 @@
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.48.0",
     "marked": "^18.0.14",
-    "motion": "14.2.0",
+    "motion": "14.1.0",
     "react-markdown": "^10.1.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",

package/src/code-presentation.ts

@@ -0,0 +1,2 @@
+/** Framework-neutral highlighting, copy and tabs; no React runtime dependency. */
+export { codeBlockGrammar, highlightCode, codePreStyle, codeTextStyle, codePresentation, bindCopyButton, bindCodeTabs, createCopyFeedback, interactionBudgets, writeClipboard, apiMetadataText, schemaRows, type CopyFeedback, type InteractionBudgets, type CodeExample, type ApiMetadata, type ApiField, type TokenStyle } from "./lib/code-presentation";

package/src/lib/code-presentation.ts

@@ -0,0 +1,257 @@
+import { tabsPresentation } from "../presentation";
+import type { HighlighterCore, LanguageRegistration, ThemedToken } from "shiki/core";
+// Leave variables unresolved: the browser resolves them on each token span,
+// including nested themes, inline overrides and CSS/media changes. No document
+// sampling, observers, layout reads or React re-render are needed to recolor code.
+export 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)",
+} as const;
+
+const SHIKI_THEME = "tangle-syntax";
+// Shiki's CSS-variables theme names token roles; each maps onto a Brand syntax token.
+const BRAND_COLOR_FOR_SHIKI: Record<string, string> = {
+  "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,
+};
+
+type GrammarModule = { default: LanguageRegistration[] };
+const GRAMMARS: Record<string, () => Promise<GrammarModule>> = {
+  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: Record<string, string> = {
+  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",
+};
+
+export const LANGUAGE_NAMES: Record<string, string> = {
+  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. */
+export const PLAIN_TEXT = new Set(["text", "txt", "plain", "plaintext"]);
+
+export function codeBlockGrammar(language: string | undefined): string | undefined {
+  if (!language) return undefined;
+  const id = language.toLowerCase();
+  const resolved = LANGUAGE_ALIASES[id] ?? id;
+  return GRAMMARS[resolved] ? resolved : undefined;
+}
+
+let highlighterPromise: Promise<HighlighterCore> | undefined;
+const grammarLoads = new Map<string, Promise<void>>();
+
+function loadHighlighter(): Promise<HighlighterCore> {
+  // The JavaScript regex engine needs no WebAssembly, so it runs under a strict CSP.
+  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: unknown) => {
+      highlighterPromise = undefined;
+      throw error;
+    });
+}
+
+export async function tokenize(code: string, grammar: string): Promise<ThemedToken[][]> {
+  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 });
+}
+
+export function tokenStyle(token: ThemedToken): TokenStyle | undefined {
+  const color = token.color ? BRAND_COLOR_FOR_SHIKI[token.color] ?? SYNTAX.foreground : undefined;
+  const style = token.fontStyle ?? 0;
+  if (!color && !style) return undefined;
+  return {
+    ...(color ? { color } : {}),
+    ...(style & 1 ? { fontStyle: "italic" } : {}),
+    ...(style & 2 ? { fontWeight: "bold" } : {}),
+    ...(style & 4 ? { textDecoration: "underline" } : {}),
+  };
+}
+
+export interface TokenStyle {color?: string; fontStyle?: "italic"; fontWeight?: "bold"; textDecoration?: "underline";}
+export 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",
+} as const;
+export const codeTextStyle = {fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)",whiteSpace:"pre"} as const;
+export 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",
+};
+export interface CodeExample {label:string;code:string;language?:string;filename?:string;}
+export interface ApiMetadata {kind:"request"|"response"|"error";method?:string;status?:number;contentType?:string;}
+export const apiMetadataText = (meta:ApiMetadata) => [meta.kind,meta.method,meta.status,meta.contentType].filter(v=>v!==undefined).join(" · ");
+
+/** Same lazy grammar/token model for React, Hono SSR and static renderers. */
+export async function highlightCode(code:string,language?:string) {
+ const grammar=codeBlockGrammar(language);
+ if(!grammar)return code.split("\n").map(content=>[{content,style:undefined as TokenStyle|undefined}]);
+ 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. */
+export async function writeClipboard(text:string):Promise<void> {
+ if(navigator.clipboard?.writeText){await navigator.clipboard.writeText(text);return;}
+ const active=document.activeElement as HTMLElement|null,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=2000;
+export interface InteractionBudgets { feedback?:number; pending?:number; longWork?:number; mutation?:number; }
+/** Resolve scoped Brand times, including calc(), without duplicating token values. */
+export function interactionBudgets(scope:HTMLElement):InteractionBudgets {
+ const view=scope.ownerDocument.defaultView;if(!view)return {};
+ const probe=scope.ownerDocument.createElement("i");probe.hidden=true;scope.append(probe);
+ const read=(role:string)=>{
+  const name=`--interaction-${role}`;
+  if(!view.getComputedStyle(scope).getPropertyValue(name).trim())return undefined;
+  probe.style.animationDuration=`var(${name})`;
+  const time=/^(\d+(?:\.\d+)?)(ms|s)$/.exec(view.getComputedStyle(probe).animationDuration);
+  return time?Number(time[1])*(time[2]==="s"?1000:1):undefined;
+ };
+ try{return {feedback:read("feedback-budget"),pending:read("pending-delay"),longWork:read("long-work-delay"),mutation:read("mutation-budget")};}
+ finally{probe.remove();}
+}
+export interface CopyFeedback {
+ copied:boolean;status:string;pending:boolean;loading?:boolean;longRunning?:boolean;elapsedMs?:number;
+ measurement?:{elapsedMs:number;feedbackMs:number;budgets:InteractionBudgets;mutationBudgetExceeded:boolean|undefined};
+}
+/** Owns one accepted write, scoped delays and cleanup for both renderers. */
+export function createCopyFeedback(change:(state:CopyFeedback)=>void,write:(text:string)=>Promise<void>=writeClipboard,scope?:HTMLElement) {
+ let disposed=false,pending=false,timer:ReturnType<typeof setTimeout>|undefined;
+ let delays:Array<ReturnType<typeof setTimeout>>=[],elapsed:ReturnType<typeof setInterval>|undefined;
+ const clearPending=()=>{for(const delay of delays)clearTimeout(delay);delays=[];if(elapsed)clearInterval(elapsed);elapsed=undefined;};
+ return {
+  async copy(text:string) {
+   if(disposed||pending)return;
+   const started=performance.now(),budgets=scope?interactionBudgets(scope):{};
+   pending=true;if(timer)clearTimeout(timer);
+   let loading=budgets.pending===undefined,longRunning=false;
+   const announce=()=>{
+    const elapsedMs=performance.now()-started;
+    change({copied:false,pending:true,loading,longRunning,elapsedMs,status:longRunning
+     ?`Copying · ${Math.floor(elapsedMs/1000)}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!==undefined)delays.push(setTimeout(()=>{loading=true;announce();},budgets.pending));
+   if(budgets.longWork!==undefined)delays.push(setTimeout(()=>{longRunning=true;announce();elapsed=setInterval(announce,1000);},budgets.longWork));
+   let copied:boolean;
+   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===undefined?undefined:elapsedMs>budgets.mutation}});
+   timer=setTimeout(()=>{if(!disposed)change({copied:false,status:"",pending:false});},COPY_FEEDBACK_MS);
+  },
+  dispose(){disposed=true;clearPending();if(timer)clearTimeout(timer);},
+ };
+}
+export function bindCopyButton(button:HTMLButtonElement,status:HTMLElement,text:()=>string) {
+ 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:HTMLElement,name:string,value:string|null)=>{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")void 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. */
+export function bindCodeTabs(list:HTMLElement,onSelect?:(index:number)=>void) {
+ const buttons=()=>[...list.querySelectorAll<HTMLButtonElement>('[role="tab"]')];
+ const select=(index:number,focus:boolean)=>{
+  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:MouseEvent)=>{const tab=(event.target as Element).closest('[role="tab"]');const index=buttons().findIndex(t=>t===tab);if(index>=0)select(index,false);};
+ const key=(event:KeyboardEvent)=>{
+  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:undefined;
+  if(next!==undefined){event.preventDefault();select(next,true);}
+ };
+ list.addEventListener("click",click);list.addEventListener("keydown",key);
+ return ()=>{list.removeEventListener("click",click);list.removeEventListener("keydown",key);};
+}
+export interface ApiField {name:string;type:string;description?:string;required?:boolean;children?:readonly ApiField[];}
+export function schemaRows(fields:readonly ApiField[],parent="",depth=0):Array<ApiField&{path:string;depth:number}> {
+ return fields.flatMap(field=>{const path=parent?`${parent}.${field.name}`:field.name;return [{...field,path,depth},...schemaRows(field.children??[],path,depth+1)];});
+}

package/src/lib/surface-motion.tsx

@@ -2,11 +2,11 @@
 
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { animate } from "motion";
+import { animate, motionValue, styleEffect, type MotionValue } from "motion";
 
 type Side = "top" | "right" | "bottom" | "left";
 type SurfaceProps = React.HTMLAttributes<HTMLDivElement> & {
-  kind: "dialog" | "sheet" | "overlay" | "tooltip";
+  kind: "dialog" | "sheet" | "overlay" | "tooltip" | "popover";
   side?: Side;
   asChild?: boolean;
   "data-state"?: string;
@@ -16,8 +16,8 @@ type SurfaceProps = React.HTMLAttributes<HTMLDivElement> & {
 export const SurfaceMotion = React.forwardRef<HTMLDivElement, SurfaceProps>(
   ({ kind, side = "right", asChild, "data-state": state, ...props }, forwardedRef) => {
     const element = React.useRef<HTMLDivElement | null>(null);
-    const initialized = React.useRef(false);
-    const controls = React.useRef<ReturnType<typeof animate> | undefined>(undefined);
+    const values = React.useRef<Record<"opacity" | "scale" | "x" | "y", MotionValue<number>> | null>(null);
+    const controls = React.useRef<Array<ReturnType<typeof animate>>>([]);
     const ref = React.useCallback<React.RefCallback<HTMLDivElement>>((node) => {
       element.current = node;
       if (typeof forwardedRef === "function") {
@@ -30,12 +30,13 @@ export const SurfaceMotion = React.forwardRef<HTMLDivElement, SurfaceProps>(
       const node = element.current;
       if (!node) return;
       const preference = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : undefined;
+      let cancelRender: (() => void) | undefined;
       const run = () => {
         const closed = state === "closed";
         const bounds = node.getBoundingClientRect();
         const hidden = {
           opacity: kind === "sheet" ? 1 : 0,
-          scale: kind === "dialog" || kind === "tooltip" ? 0.98 : 1,
+          scale: kind === "dialog" || kind === "tooltip" || kind === "popover" ? 0.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,
         };
@@ -51,26 +52,32 @@ export const SurfaceMotion = React.forwardRef<HTMLDivElement, SurfaceProps>(
         // Missing styles and reduced motion settle synchronously. No semantic
         // transition waits for a JavaScript completion callback.
         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"] as const) values.current[key].jump(target[key]);
           place(target);
-          if (initialized.current) controls.current = animate(node, target, { duration: 0 });
           return;
         }
-        if (!initialized.current) { place(hidden); initialized.current = true; }
+        if (!values.current) {
+          place(hidden);
+          values.current = { opacity: motionValue(hidden.opacity), scale: motionValue(hidden.scale), x: motionValue(hidden.x), y: motionValue(hidden.y) };
+        }
+        cancelRender ??= styleEffect(node, values.current);
         // Critically damped response: <0.01% residual at the role's deadline.
-        // Reusing this element's Motion values preserves position and velocity
-        // on reversal; a duration-based spring would discard velocity.
+        // Explicit values keep every channel on the same frame clock, including
+        // opacity, without resampling a compositor animation on reversal.
         const frequency = 12 / seconds;
-        controls.current = animate(node, target, {
+        controls.current = (["opacity", "scale", "x", "y"] as const).map(key => animate(values.current![key], target[key], {
           type: "spring", stiffness: frequency * frequency, damping: 2 * frequency,
           restDelta: 0.001, restSpeed: 0.01,
-        });
+        }));
       };
       run();
       preference?.addEventListener("change", run);
-      return () => preference?.removeEventListener("change", run);
-    }, [state, kind, side]);
-    React.useEffect(() => () => controls.current?.stop(), []);
+      return () => { preference?.removeEventListener("change", run); cancelRender?.(); };
+    // Radix Popper temporarily suppresses animation until placement resolves.
+    // Start the same retained values when that inline override clears.
+    }, [state, kind, side, props.style?.animation]);
+    React.useEffect(() => () => controls.current.forEach(control => control.stop()), []);
     const Component = asChild ? Slot : "div";
     return <Component {...props} data-state={state} ref={ref} />;
   },

package/src/markdown/api-presentation.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent,render,screen } from "@testing-library/react";
+import { describe,it,expect,vi } from "vitest";
+import { CodeBlock } from "./code-block";
+import { ApiSchema } from "./api-schema";
+import { bindCopyButton,createCopyFeedback,highlightCode } from "../code-presentation";
+describe("shared API presentation",()=>{
+ it("renders field paths without turning schema text into HTML",()=>{
+  render(<ApiSchema fields={[{name:"messages",type:"array",children:[{name:"content",type:"string",description:"<script>bad()</script>"}]}]}/>);
+  expect(screen.getByText("messages.content")).toBeInTheDocument();expect(document.querySelector("script")).toBeNull();
+ });
+ it("keeps stale clipboard completions and disposed feedback silent",async()=>{
+  const updates=vi.fn();let complete!:()=>void;const feedback=createCopyFeedback(updates,()=>new Promise<void>(resolve=>{complete=resolve;}));
+  const pending=feedback.copy("bytes");feedback.dispose();complete();await pending;expect(updates).toHaveBeenCalledTimes(1);
+ });
+ it("blocks duplicate writes until the accepted operation settles",async()=>{
+  const updates=vi.fn();let complete!:()=>void;
+  const write=vi.fn(()=>new Promise<void>(resolve=>{complete=resolve;}));
+  const feedback=createCopyFeedback(updates,write);
+  const first=feedback.copy("first");await feedback.copy("duplicate");
+  expect(write.mock.calls).toEqual([["first"]]);
+  expect(updates).toHaveBeenLastCalledWith(expect.objectContaining({copied:false,status:"Copying to clipboard",pending:true}));
+  complete();await first;
+  expect(updates).toHaveBeenLastCalledWith(expect.objectContaining({copied:true,status:"Copied to clipboard",pending:false}));
+  const next=feedback.copy("next");expect(write).toHaveBeenCalledTimes(2);complete();await next;
+  feedback.dispose();await feedback.copy("disposed");expect(write).toHaveBeenCalledTimes(2);
+ });
+ it("retains exact newlines and plain binary/SSE text",async()=>{
+  const text='data: {"delta":"<x>"}\n\ndata: [DONE]\n';const lines=await highlightCode(text,"text");expect(lines.map(line=>line.map(t=>t.content).join("")).join("\n")).toBe(text);
+ });
+});
+
+describe("copy binding cleanup",()=>{
+ it.each(["pending","success","failure"])("restores retained DOM after %s",async phase=>{
+  const descriptor=Object.getOwnPropertyDescriptor(navigator,"clipboard");
+  let resolve!:()=>void,reject!:(error:Error)=>void;
+  const writeText=vi.fn(()=>new Promise<void>((yes,no)=>{resolve=yes;reject=no;}));
+  Object.defineProperty(navigator,"clipboard",{configurable:true,value:{writeText}});
+  const button=document.createElement("button"),status=document.createElement("span");
+  button.setAttribute("aria-label","Copy request");status.textContent="Ready";
+  const cleanup=bindCopyButton(button,status,()=>"exact bytes");
+  try {
+   button.click();expect(button.getAttribute("aria-label")).toBe("Copying to clipboard");
+   if(phase!=="pending"){
+    if(phase==="failure")reject(new Error("Denied"));else resolve();
+    await vi.waitFor(()=>expect(button.getAttribute("aria-label")).toBe(phase==="failure"?"Copy to clipboard":"Copied"));
+   }
+   cleanup();
+   expect(button.getAttribute("aria-label")).toBe("Copy request");expect(status.textContent).toBe("Ready");
+   resolve();await Promise.resolve();await Promise.resolve();
+   expect(button.getAttribute("aria-label")).toBe("Copy request");expect(status.textContent).toBe("Ready");
+  }finally{
+   cleanup();if(descriptor)Object.defineProperty(navigator,"clipboard",descriptor);else delete (navigator as {clipboard?:unknown}).clipboard;
+  }
+ });
+ it("restores an originally absent accessible label",()=>{
+  const button=document.createElement("button"),status=document.createElement("span");
+  const cleanup=bindCopyButton(button,status,()=>"bytes");button.setAttribute("aria-label","Copied");cleanup();expect(button.hasAttribute("aria-label")).toBe(false);
+ });
+ it("gives a single code example no orphaned tab relationship",()=>{
+  const {container,unmount}=render(<CodeBlock code="fallback" examples={[{label:"Plain",language:"text",code:"one"}]}/>);
+  try {expect(container.querySelector('[role="tab"]')).toBeNull();expect(container.querySelector('[role="tabpanel"]')).toBeNull();expect(container.querySelector('[aria-labelledby]')).toBeNull();expect(container.querySelector("pre")?.textContent).toBe("one");}finally{unmount();}
+ });
+});