@tangle-network/ui 11.35.0 → 11.37.0

package/dist/lib/code-presentation.js

@@ -0,0 +1,437 @@
+import { tabsPresentation } from "../presentation.js";
+//#region src/lib/code-presentation.ts
+const SYNTAX = {
+	comment: "var(--syntax-comment, currentColor)",
+	keyword: "var(--syntax-keyword, currentColor)",
+	string: "var(--syntax-string, currentColor)",
+	function: "var(--syntax-function, currentColor)",
+	number: "var(--syntax-number, currentColor)",
+	variable: "var(--syntax-variable, currentColor)",
+	foreground: "var(--syntax-foreground, currentColor)"
+};
+const SHIKI_THEME = "tangle-syntax";
+const BRAND_COLOR_FOR_SHIKI = {
+	"var(--shiki-foreground)": SYNTAX.foreground,
+	"var(--shiki-token-comment)": SYNTAX.comment,
+	"var(--shiki-token-keyword)": SYNTAX.keyword,
+	"var(--shiki-token-string)": SYNTAX.string,
+	"var(--shiki-token-string-expression)": SYNTAX.string,
+	"var(--shiki-token-function)": SYNTAX.function,
+	"var(--shiki-token-constant)": SYNTAX.number,
+	"var(--shiki-token-link)": SYNTAX.number,
+	"var(--shiki-token-parameter)": SYNTAX.variable,
+	"var(--shiki-token-punctuation)": SYNTAX.foreground
+};
+const GRAMMARS = {
+	typescript: () => import("shiki/langs/typescript.mjs"),
+	tsx: () => import("shiki/langs/tsx.mjs"),
+	javascript: () => import("shiki/langs/javascript.mjs"),
+	jsx: () => import("shiki/langs/jsx.mjs"),
+	json: () => import("shiki/langs/json.mjs"),
+	jsonc: () => import("shiki/langs/jsonc.mjs"),
+	bash: () => import("shiki/langs/bash.mjs"),
+	python: () => import("shiki/langs/python.mjs"),
+	html: () => import("shiki/langs/html.mjs"),
+	css: () => import("shiki/langs/css.mjs"),
+	scss: () => import("shiki/langs/scss.mjs"),
+	markdown: () => import("shiki/langs/markdown.mjs"),
+	mdx: () => import("shiki/langs/mdx.mjs"),
+	yaml: () => import("shiki/langs/yaml.mjs"),
+	toml: () => import("shiki/langs/toml.mjs"),
+	sql: () => import("shiki/langs/sql.mjs"),
+	diff: () => import("shiki/langs/diff.mjs"),
+	go: () => import("shiki/langs/go.mjs"),
+	rust: () => import("shiki/langs/rust.mjs"),
+	solidity: () => import("shiki/langs/solidity.mjs"),
+	ruby: () => import("shiki/langs/ruby.mjs"),
+	java: () => import("shiki/langs/java.mjs"),
+	kotlin: () => import("shiki/langs/kotlin.mjs"),
+	swift: () => import("shiki/langs/swift.mjs"),
+	php: () => import("shiki/langs/php.mjs"),
+	c: () => import("shiki/langs/c.mjs"),
+	cpp: () => import("shiki/langs/cpp.mjs"),
+	csharp: () => import("shiki/langs/csharp.mjs"),
+	graphql: () => import("shiki/langs/graphql.mjs"),
+	xml: () => import("shiki/langs/xml.mjs"),
+	dockerfile: () => import("shiki/langs/dockerfile.mjs")
+};
+const LANGUAGE_ALIASES = {
+	ts: "typescript",
+	mts: "typescript",
+	cts: "typescript",
+	js: "javascript",
+	mjs: "javascript",
+	cjs: "javascript",
+	node: "javascript",
+	sh: "bash",
+	shell: "bash",
+	zsh: "bash",
+	console: "bash",
+	shellscript: "bash",
+	py: "python",
+	python3: "python",
+	yml: "yaml",
+	md: "markdown",
+	rs: "rust",
+	sol: "solidity",
+	rb: "ruby",
+	kt: "kotlin",
+	cs: "csharp",
+	"c#": "csharp",
+	"c++": "cpp",
+	gql: "graphql",
+	svg: "xml",
+	docker: "dockerfile",
+	patch: "diff",
+	htm: "html"
+};
+const LANGUAGE_NAMES = {
+	typescript: "TypeScript",
+	tsx: "TSX",
+	javascript: "JavaScript",
+	jsx: "JSX",
+	json: "JSON",
+	jsonc: "JSONC",
+	bash: "Bash",
+	python: "Python",
+	html: "HTML",
+	css: "CSS",
+	scss: "SCSS",
+	markdown: "Markdown",
+	mdx: "MDX",
+	yaml: "YAML",
+	toml: "TOML",
+	sql: "SQL",
+	diff: "Diff",
+	go: "Go",
+	rust: "Rust",
+	solidity: "Solidity",
+	ruby: "Ruby",
+	java: "Java",
+	kotlin: "Kotlin",
+	swift: "Swift",
+	php: "PHP",
+	c: "C",
+	cpp: "C++",
+	csharp: "C#",
+	graphql: "GraphQL",
+	xml: "XML",
+	dockerfile: "Dockerfile"
+};
+/** The Shiki grammar for a fence language, or undefined for plain text. */
+const PLAIN_TEXT = /* @__PURE__ */ new Set([
+	"text",
+	"txt",
+	"plain",
+	"plaintext"
+]);
+function codeBlockGrammar(language) {
+	if (!language) return void 0;
+	const id = language.toLowerCase();
+	const resolved = LANGUAGE_ALIASES[id] ?? id;
+	return GRAMMARS[resolved] ? resolved : void 0;
+}
+let highlighterPromise;
+const grammarLoads = /* @__PURE__ */ new Map();
+function loadHighlighter() {
+	return highlighterPromise ??= Promise.all([import("shiki/core"), import("shiki/engine/javascript")]).then(([core, engine]) => core.createHighlighterCore({
+		themes: [core.createCssVariablesTheme({
+			name: SHIKI_THEME,
+			variablePrefix: "--shiki-",
+			fontStyle: true
+		})],
+		langs: [],
+		engine: engine.createJavaScriptRegexEngine()
+	})).catch((error) => {
+		highlighterPromise = void 0;
+		throw error;
+	});
+}
+async function tokenize(code, grammar) {
+	const highlighter = await loadHighlighter();
+	let load = grammarLoads.get(grammar);
+	if (!load) {
+		load = GRAMMARS[grammar]().then((module) => highlighter.loadLanguage(module.default));
+		load.catch(() => grammarLoads.delete(grammar));
+		grammarLoads.set(grammar, load);
+	}
+	await load;
+	return highlighter.codeToTokensBase(code, {
+		lang: grammar,
+		theme: SHIKI_THEME
+	});
+}
+function tokenStyle(token) {
+	const color = token.color ? BRAND_COLOR_FOR_SHIKI[token.color] ?? SYNTAX.foreground : void 0;
+	const style = token.fontStyle ?? 0;
+	if (!color && !style) return void 0;
+	return {
+		...color ? { color } : {},
+		...style & 1 ? { fontStyle: "italic" } : {},
+		...style & 2 ? { fontWeight: "bold" } : {},
+		...style & 4 ? { textDecoration: "underline" } : {}
+	};
+}
+const codePreStyle = {
+	margin: 0,
+	padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
+	background: "transparent",
+	color: SYNTAX.foreground,
+	fontSize: "var(--code-font-size, 0.8125rem)",
+	lineHeight: "var(--code-line-height, 1.5)",
+	overflowX: "auto"
+};
+const codeTextStyle = {
+	fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)",
+	whiteSpace: "pre"
+};
+const codePresentation = {
+	tabs: `tangle-code-tabs ${tabsPresentation.list.underline}`,
+	tab: tabsPresentation.trigger.underline,
+	root: "group relative min-w-0 overflow-hidden rounded-lg border font-mono bg-card border-border",
+	header: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-3 py-1.5 bg-[var(--code-header-bg,hsl(var(--background)))]",
+	copy: "flex items-center justify-center min-w-8 min-h-8 pointer-coarse:min-w-11 pointer-coarse:min-h-11 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors data-[copy-loading=true]:after:content-['…'] data-[copy-loading=true]:gap-1",
+	copyStatus: "sr-only data-[copy-long-work=true]:not-sr-only data-[copy-long-work=true]:text-xs data-[copy-long-work=true]:text-muted-foreground"
+};
+const apiMetadataText = (meta) => [
+	meta.kind,
+	meta.method,
+	meta.status,
+	meta.contentType
+].filter((v) => v !== void 0).join(" · ");
+/** Same lazy grammar/token model for React, Hono SSR and static renderers. */
+async function highlightCode(code, language) {
+	const grammar = codeBlockGrammar(language);
+	if (!grammar) return code.split("\n").map((content) => [{
+		content,
+		style: void 0
+	}]);
+	return (await tokenize(code, grammar)).map((line) => line.map((token) => ({
+		content: token.content,
+		style: tokenStyle(token)
+	})));
+}
+/** Legacy fallback is used only when the modern clipboard API is absent. */
+async function writeClipboard(text) {
+	if (navigator.clipboard?.writeText) {
+		await navigator.clipboard.writeText(text);
+		return;
+	}
+	const active = document.activeElement, selection = document.getSelection();
+	const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, i) => selection.getRangeAt(i).cloneRange()) : [];
+	const field = document.createElement("textarea");
+	field.value = text;
+	field.readOnly = true;
+	field.tabIndex = -1;
+	field.setAttribute("aria-hidden", "true");
+	field.style.position = "fixed";
+	field.style.left = "-9999px";
+	document.body.append(field);
+	try {
+		field.select();
+		if (!document.execCommand?.("copy")) throw Error("Clipboard unavailable");
+	} finally {
+		field.remove();
+		active?.focus({ preventScroll: true });
+		if (selection) {
+			selection.removeAllRanges();
+			for (const range of ranges) selection.addRange(range);
+		}
+	}
+}
+const COPY_FEEDBACK_MS = 2e3;
+/** Resolve scoped Brand times, including calc(), without duplicating token values. */
+function interactionBudgets(scope) {
+	const view = scope.ownerDocument.defaultView;
+	if (!view) return {};
+	const probe = scope.ownerDocument.createElement("i");
+	probe.hidden = true;
+	scope.append(probe);
+	const read = (role) => {
+		const name = `--interaction-${role}`;
+		if (!view.getComputedStyle(scope).getPropertyValue(name).trim()) return void 0;
+		probe.style.animationDuration = `var(${name})`;
+		const time = /^(\d+(?:\.\d+)?)(ms|s)$/.exec(view.getComputedStyle(probe).animationDuration);
+		return time ? Number(time[1]) * (time[2] === "s" ? 1e3 : 1) : void 0;
+	};
+	try {
+		return {
+			feedback: read("feedback-budget"),
+			pending: read("pending-delay"),
+			longWork: read("long-work-delay"),
+			mutation: read("mutation-budget")
+		};
+	} finally {
+		probe.remove();
+	}
+}
+/** Owns one accepted write, scoped delays and cleanup for both renderers. */
+function createCopyFeedback(change, write = writeClipboard, scope) {
+	let disposed = false, pending = false, timer;
+	let delays = [], elapsed;
+	const clearPending = () => {
+		for (const delay of delays) clearTimeout(delay);
+		delays = [];
+		if (elapsed) clearInterval(elapsed);
+		elapsed = void 0;
+	};
+	return {
+		async copy(text) {
+			if (disposed || pending) return;
+			const started = performance.now(), budgets = scope ? interactionBudgets(scope) : {};
+			pending = true;
+			if (timer) clearTimeout(timer);
+			let loading = budgets.pending === void 0, longRunning = false;
+			const announce = () => {
+				const elapsedMs = performance.now() - started;
+				change({
+					copied: false,
+					pending: true,
+					loading,
+					longRunning,
+					elapsedMs,
+					status: longRunning ? `Copying · ${Math.floor(elapsedMs / 1e3)}s elapsed. Time remaining unknown. Cannot cancel this clipboard write; waiting for confirmation.` : "Copying to clipboard"
+				});
+			};
+			announce();
+			const feedbackMs = performance.now() - started;
+			if (budgets.pending !== void 0) delays.push(setTimeout(() => {
+				loading = true;
+				announce();
+			}, budgets.pending));
+			if (budgets.longWork !== void 0) delays.push(setTimeout(() => {
+				longRunning = true;
+				announce();
+				elapsed = setInterval(announce, 1e3);
+			}, budgets.longWork));
+			let copied;
+			try {
+				await write(text);
+				copied = true;
+			} catch {
+				copied = false;
+			}
+			pending = false;
+			clearPending();
+			if (disposed) return;
+			const elapsedMs = performance.now() - started;
+			change({
+				copied,
+				status: copied ? "Copied to clipboard" : "Copy failed",
+				pending: false,
+				measurement: {
+					elapsedMs,
+					feedbackMs,
+					budgets,
+					mutationBudgetExceeded: budgets.mutation === void 0 ? void 0 : elapsedMs > budgets.mutation
+				}
+			});
+			timer = setTimeout(() => {
+				if (!disposed) change({
+					copied: false,
+					status: "",
+					pending: false
+				});
+			}, COPY_FEEDBACK_MS);
+		},
+		dispose() {
+			disposed = true;
+			clearPending();
+			if (timer) clearTimeout(timer);
+		}
+	};
+}
+function bindCopyButton(button, status, text) {
+	const previous = {
+		label: button.getAttribute("aria-label"),
+		status: status.textContent,
+		disabled: button.getAttribute("aria-disabled"),
+		busy: button.getAttribute("aria-busy"),
+		loading: button.getAttribute("data-copy-loading"),
+		long: status.getAttribute("data-copy-long-work")
+	};
+	const restore = (element, name, value) => {
+		if (value === null) element.removeAttribute(name);
+		else element.setAttribute(name, value);
+	};
+	const feedback = createCopyFeedback((state) => {
+		status.textContent = state.status;
+		status.setAttribute("data-copy-long-work", String(!!state.longRunning));
+		button.setAttribute("data-copy-loading", String(!!state.loading));
+		button.setAttribute("aria-label", state.pending ? "Copying to clipboard" : state.copied ? "Copied" : "Copy to clipboard");
+		if (state.pending) {
+			button.setAttribute("aria-disabled", "true");
+			button.setAttribute("aria-busy", "true");
+		} else {
+			restore(button, "aria-disabled", previous.disabled);
+			restore(button, "aria-busy", previous.busy);
+		}
+	}, writeClipboard, button);
+	const click = () => {
+		if (!button.disabled && button.getAttribute("aria-disabled") !== "true") feedback.copy(text());
+	};
+	button.addEventListener("click", click);
+	return () => {
+		button.removeEventListener("click", click);
+		feedback.dispose();
+		restore(button, "aria-label", previous.label);
+		status.textContent = previous.status;
+		restore(button, "aria-disabled", previous.disabled);
+		restore(button, "aria-busy", previous.busy);
+		restore(button, "data-copy-loading", previous.loading);
+		restore(status, "data-copy-long-work", previous.long);
+	};
+}
+/** Native tabs adapter. The consumer owns labels, IDs and escaped panel content. */
+function bindCodeTabs(list, onSelect) {
+	const buttons = () => [...list.querySelectorAll("[role=\"tab\"]")];
+	const select = (index, focus) => {
+		const tabs = buttons(), tab = tabs[index];
+		if (!tab) return;
+		for (const panel of new Set(tabs.map((t) => document.getElementById(t.getAttribute("aria-controls") ?? "")))) if (panel) panel.hidden = true;
+		tabs.forEach((t, i) => {
+			t.setAttribute("aria-selected", String(i === index));
+			t.dataset.state = i === index ? "active" : "inactive";
+			t.tabIndex = i === index ? 0 : -1;
+		});
+		const panel = document.getElementById(tab.getAttribute("aria-controls") ?? "");
+		if (panel) {
+			panel.hidden = false;
+			panel.setAttribute("aria-labelledby", tab.id);
+		}
+		if (focus) tab.focus();
+		onSelect?.(index);
+	};
+	const click = (event) => {
+		const tab = event.target.closest("[role=\"tab\"]");
+		const index = buttons().findIndex((t) => t === tab);
+		if (index >= 0) select(index, false);
+	};
+	const key = (event) => {
+		const tabs = buttons(), current = tabs.findIndex((t) => t === document.activeElement);
+		if (current < 0) return;
+		const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : event.key === "ArrowRight" ? (current + 1) % tabs.length : event.key === "ArrowLeft" ? (current + tabs.length - 1) % tabs.length : void 0;
+		if (next !== void 0) {
+			event.preventDefault();
+			select(next, true);
+		}
+	};
+	list.addEventListener("click", click);
+	list.addEventListener("keydown", key);
+	return () => {
+		list.removeEventListener("click", click);
+		list.removeEventListener("keydown", key);
+	};
+}
+function schemaRows(fields, parent = "", depth = 0) {
+	return fields.flatMap((field) => {
+		const path = parent ? `${parent}.${field.name}` : field.name;
+		return [{
+			...field,
+			path,
+			depth
+		}, ...schemaRows(field.children ?? [], path, depth + 1)];
+	});
+}
+//#endregion
+export { LANGUAGE_NAMES, PLAIN_TEXT, SYNTAX, apiMetadataText, bindCodeTabs, bindCopyButton, codeBlockGrammar, codePreStyle, codePresentation, codeTextStyle, createCopyFeedback, highlightCode, interactionBudgets, schemaRows, tokenStyle, tokenize, writeClipboard };

package/dist/lib/control-presentation.d.ts

@@ -1,3 +1,4 @@
+import { controlMotion } from "./motion.js";
 //#region src/lib/control-presentation.d.ts
 /**
  * The control scale. Button, Input, Textarea and SelectTrigger take the same
@@ -7,4 +8,36 @@
  * Brand stylesheet at the same pixels.
  */
 export type ControlSize = "sm" | "md" | "lg";
-//#endregion
+export declare const controlHeight: {
+  readonly sm: "h-[var(--control-height-sm,2rem)]";
+  readonly md: "h-[var(--control-height,2.25rem)]";
+  readonly lg: "h-[var(--control-height-lg,2.75rem)]";
+};
+export declare const controlText: {
+  readonly sm: "text-[length:var(--control-text-sm,0.75rem)]";
+  readonly md: "text-[length:var(--control-text-md,0.875rem)]";
+  readonly lg: "text-[length:var(--control-text-lg,1rem)]";
+};
+export declare const controlRadius: {
+  readonly sm: "rounded-md";
+  readonly md: "rounded-lg";
+  readonly lg: "rounded-lg";
+};
+/**
+ * Field text never drops below 16px on a coarse pointer: iOS Safari zooms the
+ * page on focus for anything smaller.
+ */
+export declare const fieldTouchText = "pointer-coarse:text-base";
+/** Field sizes: the control scale with field padding. */
+export declare const fieldSizes: {
+  readonly sm: string;
+  readonly md: string;
+  readonly lg: string;
+};
+export declare const controlSizes: {
+  readonly compact: "h-[var(--control-height)] px-3 py-1 text-sm";
+  readonly touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base";
+};
+export declare const fieldPresentation: string;
+//#endregion
+export { controlMotion };

package/dist/lib/control-presentation.js

@@ -1,8 +1,8 @@
+import { controlMotion } from "./motion.js";
 import { ixField } from "./interaction.js";
 import { focusField } from "./focus.js";
 import { cn } from "./utils.js";
 //#region src/lib/control-presentation.ts
-const controlMotion = "duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none motion-reduce:duration-0";
 const controlHeight = {
 	sm: "h-[var(--control-height-sm,2rem)]",
 	md: "h-[var(--control-height,2.25rem)]",

package/dist/lib/focus.d.ts

@@ -27,7 +27,7 @@
  * replaces it through tailwind-merge; the focus border outranks it because
  * Tailwind emits `focus:` after `hover:`.
  */
-export declare const focusField = "border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)]";
+export declare const focusField = "border-border [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:border-[var(--border-strong)] focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)]";
 /**
  * The field treatment for a container that wraps a borderless field, such as a
  * composer around a textarea and its buttons. It lights while a FIELD inside
@@ -45,7 +45,7 @@ export declare const focusField = "border-border transition-[border-color,box-sh
  * own well fill, the `--field-border` hairline and the green hover edge. The
  * borderless field inside stays transparent.
  */
-export declare const focusFieldWithin = "focus-field-within transition-[border-color,box-shadow] duration-150 ease-out bg-[var(--field-surface,var(--well))] border-[var(--field-border)] shadow-[var(--shadow-well)] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--shadow-well),var(--ix-hover)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]";
+export declare const focusFieldWithin = "focus-field-within [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 bg-[var(--field-surface,var(--well))] border-[var(--field-border)] shadow-[var(--shadow-well)] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--shadow-well),var(--ix-hover)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]";
 /** Error state for a field: a danger hairline and the same focus shape in danger. Compose after `focusField`. */
 export declare const focusFieldInvalid = "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]";
 /** Keyboard-only focus for a control: a 1px focus line with the halo beyond it. */

package/dist/lib/focus.js

@@ -1,3 +1,4 @@
+import { controlMotion } from "./motion.js";
 import { ixField } from "./interaction.js";
 //#region src/lib/focus.ts
 /**
@@ -28,7 +29,7 @@ import { ixField } from "./interaction.js";
 * replaces it through tailwind-merge; the focus border outranks it because
 * Tailwind emits `focus:` after `hover:`.
 */
-const focusField = "border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)]";
+const focusField = `border-border ${controlMotion} hover:border-[var(--border-strong)] focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)]`;
 /**
 * The field treatment for a container that wraps a borderless field, such as a
 * composer around a textarea and its buttons. It lights while a FIELD inside
@@ -46,7 +47,7 @@ const focusField = "border-border transition-[border-color,box-shadow] duration-
 * own well fill, the `--field-border` hairline and the green hover edge. The
 * borderless field inside stays transparent.
 */
-const focusFieldWithin = `focus-field-within transition-[border-color,box-shadow] duration-150 ease-out ${ixField} has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]`;
+const focusFieldWithin = `focus-field-within ${controlMotion} ${ixField} has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]`;
 /** Error state for a field: a danger hairline and the same focus shape in danger. Compose after `focusField`. */
 const focusFieldInvalid = "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]";
 const focusRingBase = "focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)]";

package/dist/lib/motion.d.ts

@@ -0,0 +1,4 @@
+//#region src/lib/motion.d.ts
+/** Brand motion roles contain duration AND easing; consume complete shorthands. */
+export declare const controlMotion = "[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";
+//#endregion

package/dist/lib/motion.js

@@ -0,0 +1,7 @@
+//#region src/lib/motion.ts
+/** Brand motion roles contain duration AND easing; consume complete shorthands. */
+const controlMotion = "[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";
+/** Radix presence markers carry the scoped role; SurfaceMotion owns interruptible geometry. */
+const surfaceMotion = "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!";
+//#endregion
+export { controlMotion, surfaceMotion };

package/dist/lib/surface-motion.js

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

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

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