@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/knob-contracts/stepper-knobs.js

@@ -6,7 +6,10 @@ const stepperKnobs = [
 	"--cui-stepper-indicator-border-color",
 	"--cui-stepper-indicator-border-width",
 	"--cui-stepper-separator-background",
-	"--cui-stepper-title-foreground"
+	"--cui-stepper-title-foreground",
+	"--cui-stepper-indicator-size",
+	"--cui-stepper-indicator-current-border-width",
+	"--cui-stepper-title-current-font-weight"
 ];
 //#endregion
 export { stepperKnobs };

package/dist/knob-contracts/switch-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/switch-knobs.d.ts
-export declare const switchKnobs: readonly ["--cui-switch-thumb-shadow", "--cui-switch-background", "--cui-switch-hover-background", "--cui-switch-checked-background", "--cui-switch-checked-hover-background", "--cui-switch-thumb-radius", "--cui-switch-thumb-background", "--cui-switch-inline-size", "--cui-switch-height", "--cui-switch-padding", "--cui-switch-thumb-inline-size", "--cui-switch-thumb-press-scale", "--cui-switch-thumb-backdrop-filter"];
+export declare const switchKnobs: readonly ["--cui-switch-thumb-shadow", "--cui-switch-radius", "--cui-switch-shadow", "--cui-switch-background", "--cui-switch-border-color", "--cui-switch-border-width", "--cui-switch-checked-border-color", "--cui-switch-hover-background", "--cui-switch-checked-background", "--cui-switch-checked-hover-background", "--cui-switch-thumb-radius", "--cui-switch-thumb-background", "--cui-switch-inline-size", "--cui-switch-height", "--cui-switch-padding", "--cui-switch-thumb-inline-size", "--cui-switch-thumb-press-scale", "--cui-switch-thumb-backdrop-filter"];
 export type SwitchKnobStyle = Partial<Record<(typeof switchKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/switch-knobs.js

@@ -1,7 +1,12 @@
 //#region src/knob-contracts/switch-knobs.ts
 const switchKnobs = [
 	"--cui-switch-thumb-shadow",
+	"--cui-switch-radius",
+	"--cui-switch-shadow",
 	"--cui-switch-background",
+	"--cui-switch-border-color",
+	"--cui-switch-border-width",
+	"--cui-switch-checked-border-color",
 	"--cui-switch-hover-background",
 	"--cui-switch-checked-background",
 	"--cui-switch-checked-hover-background",

package/dist/knob-contracts/table-of-contents-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/table-of-contents-knobs.d.ts
-export declare const tableOfContentsKnobs: readonly ["--cui-table-of-contents-background", "--cui-table-of-contents-border-color", "--cui-table-of-contents-border-width", "--cui-table-of-contents-radius", "--cui-table-of-contents-shadow", "--cui-table-of-contents-backdrop-filter", "--cui-table-of-contents-padding", "--cui-table-of-contents-label-foreground", "--cui-table-of-contents-label-font-size", "--cui-table-of-contents-label-font-weight", "--cui-table-of-contents-label-gap", "--cui-table-of-contents-item-foreground", "--cui-table-of-contents-item-hover-foreground", "--cui-table-of-contents-item-active-foreground", "--cui-table-of-contents-item-font-size", "--cui-table-of-contents-item-line-height", "--cui-table-of-contents-item-font-weight", "--cui-table-of-contents-item-root-font-weight", "--cui-table-of-contents-item-padding-block", "--cui-table-of-contents-item-padding-inline", "--cui-table-of-contents-item-indent-size", "--cui-table-of-contents-rail-stroke", "--cui-table-of-contents-rail-size", "--cui-table-of-contents-trail-stroke", "--cui-table-of-contents-trail-size", "--cui-table-of-contents-indicator-foreground"];
+export declare const tableOfContentsKnobs: readonly ["--cui-table-of-contents-background", "--cui-table-of-contents-border-color", "--cui-table-of-contents-border-width", "--cui-table-of-contents-radius", "--cui-table-of-contents-shadow", "--cui-table-of-contents-backdrop-filter", "--cui-table-of-contents-padding", "--cui-table-of-contents-label-foreground", "--cui-table-of-contents-label-font-size", "--cui-table-of-contents-label-font-weight", "--cui-table-of-contents-label-gap", "--cui-table-of-contents-item-foreground", "--cui-table-of-contents-item-hover-foreground", "--cui-table-of-contents-item-active-foreground", "--cui-table-of-contents-item-font-size", "--cui-table-of-contents-item-line-height", "--cui-table-of-contents-item-font-weight", "--cui-table-of-contents-item-root-font-weight", "--cui-table-of-contents-item-padding-block", "--cui-table-of-contents-item-padding-inline", "--cui-table-of-contents-item-indent-size", "--cui-table-of-contents-rail-stroke", "--cui-table-of-contents-rail-size", "--cui-table-of-contents-trail-stroke", "--cui-table-of-contents-trail-size", "--cui-table-of-contents-indicator-foreground", "--cui-table-of-contents-scroll-inset"];
 export type TableOfContentsKnobStyle = Partial<Record<(typeof tableOfContentsKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/table-of-contents-knobs.js

@@ -25,7 +25,8 @@ const tableOfContentsKnobs = [
 	"--cui-table-of-contents-rail-size",
 	"--cui-table-of-contents-trail-stroke",
 	"--cui-table-of-contents-trail-size",
-	"--cui-table-of-contents-indicator-foreground"
+	"--cui-table-of-contents-indicator-foreground",
+	"--cui-table-of-contents-scroll-inset"
 ];
 //#endregion
 export { tableOfContentsKnobs };

package/dist/knob-contracts/tabs-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/tabs-knobs.d.ts
-export declare const tabsKnobs: readonly ["--cui-tabs-trigger-radius", "--cui-tabs-list-padding", "--cui-tabs-list-radius", "--cui-tabs-list-background", "--cui-tabs-list-backdrop-filter", "--cui-tabs-indicator-background", "--cui-tabs-foreground", "--cui-tabs-active-foreground", "--cui-tabs-indicator-shadow", "--cui-tabs-list-shadow", "--cui-tabs-border-color", "--cui-tabs-border-width"];
+export declare const tabsKnobs: readonly ["--cui-tabs-trigger-radius", "--cui-tabs-list-padding", "--cui-tabs-list-radius", "--cui-tabs-list-background", "--cui-tabs-list-backdrop-filter", "--cui-tabs-indicator-background", "--cui-tabs-foreground", "--cui-tabs-active-foreground", "--cui-tabs-hover-foreground", "--cui-tabs-indicator-shadow", "--cui-tabs-list-shadow", "--cui-tabs-border-color", "--cui-tabs-border-width"];
 export type TabsKnobStyle = Partial<Record<(typeof tabsKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/tabs-knobs.js

@@ -8,6 +8,7 @@ const tabsKnobs = [
 	"--cui-tabs-indicator-background",
 	"--cui-tabs-foreground",
 	"--cui-tabs-active-foreground",
+	"--cui-tabs-hover-foreground",
 	"--cui-tabs-indicator-shadow",
 	"--cui-tabs-list-shadow",
 	"--cui-tabs-border-color",

package/dist/knob-contracts/tree-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/tree-knobs.d.ts
-export declare const treeKnobs: readonly ["--cui-tree-item-trigger-radius", "--cui-tree-item-trigger-foreground", "--cui-tree-item-trigger-hover-background", "--cui-tree-item-trigger-hover-foreground", "--cui-tree-item-trigger-selected-background", "--cui-tree-item-trigger-selected-foreground", "--cui-tree-item-trigger-font-size", "--cui-tree-item-trigger-selected-font-weight"];
+export declare const treeKnobs: readonly ["--cui-tree-item-trigger-radius", "--cui-tree-item-trigger-foreground", "--cui-tree-item-trigger-hover-background", "--cui-tree-item-trigger-hover-foreground", "--cui-tree-item-trigger-selected-background", "--cui-tree-item-trigger-selected-foreground", "--cui-tree-item-trigger-font-size", "--cui-tree-item-trigger-selected-font-weight", "--cui-tree-indent-inset"];
 export type TreeKnobStyle = Partial<Record<(typeof treeKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/tree-knobs.js

@@ -7,7 +7,8 @@ const treeKnobs = [
 	"--cui-tree-item-trigger-selected-background",
 	"--cui-tree-item-trigger-selected-foreground",
 	"--cui-tree-item-trigger-font-size",
-	"--cui-tree-item-trigger-selected-font-weight"
+	"--cui-tree-item-trigger-selected-font-weight",
+	"--cui-tree-indent-inset"
 ];
 //#endregion
 export { treeKnobs };

package/dist/lib/cn.js

@@ -13,10 +13,6 @@ const twMerge = extendTailwindMerge({
 			"heading-2",
 			"heading-3",
 			"heading-4",
-			"meta",
-			"title-sm",
-			"title-md",
-			"title-lg",
 			"display"
 		] }],
 		shadow: [{ shadow: [

package/dist/lib/contrast.d.ts

@@ -25,5 +25,6 @@ export declare function contrastRatio(a: {
 export declare function wcagLevels(ratio: number): WcagLevels;
 export declare function nextFixLevel(levels: WcagLevels): WcagLevel | null;
 export declare function contrastOf(color: Hsva, background: Rgba): number;
+export declare function formatContrastRatio(ratio: number): string;
 export declare function fixColorForContrast(color: Hsva, background: Rgba, target?: number): Hsva | null;
 //#endregion

package/dist/lib/contrast.js

@@ -29,17 +29,29 @@ function nextFixLevel(levels) {
 	if (!levels.AAA) return "AAA";
 	return null;
 }
+function paintedOver(color, background) {
+	const blend = (channel) => color[channel] * color.a + background[channel] * (1 - color.a);
+	return {
+		r: blend("r"),
+		g: blend("g"),
+		b: blend("b"),
+		a: 1
+	};
+}
 function contrastOf(color, background) {
-	return contrastRatio(hsvaToRgba(color), background);
+	return contrastRatio(paintedOver(hsvaToRgba(color), background), background);
+}
+function formatContrastRatio(ratio) {
+	return (Math.floor(ratio * 100) / 100).toFixed(2);
 }
 function fixColorForContrast(color, background, target = AA_RATIO) {
 	const ok = hsvaToOklcha(color);
-	const ratioAtL = (L) => contrastRatio(hsvaToRgba(oklchaToHsva({
+	const ratioAtL = (L) => contrastOf(oklchaToHsva({
 		L,
 		C: ok.C,
 		H: ok.H,
-		a: 1
-	})), background);
+		a: color.a
+	}), background);
 	if (ratioAtL(ok.L) >= target) return null;
 	let best = null;
 	for (let step = 0; step <= 100; step++) {
@@ -61,4 +73,4 @@ function fixColorForContrast(color, background, target = AA_RATIO) {
 	return ratioAtL(0) >= ratioAtL(1) ? pick(0) : pick(1);
 }
 //#endregion
-export { AAA_RATIO, AA_RATIO, TARGET_RATIO, contrastOf, contrastRatio, fixColorForContrast, luminanceFromRgb, nextFixLevel, wcagLevels };
+export { AAA_RATIO, AA_RATIO, TARGET_RATIO, contrastOf, contrastRatio, fixColorForContrast, formatContrastRatio, luminanceFromRgb, nextFixLevel, wcagLevels };

package/dist/lib/dropzone-validation.js

@@ -60,17 +60,20 @@ async function validateDropzoneFile(file, policy, signal) {
 	const errors = [];
 	const minSize = policy?.minSize ?? DEFAULT_POLICY.minSize;
 	const maxSize = policy?.maxSize ?? DEFAULT_POLICY.maxSize;
-	if (!isDropzoneFileAccepted(file, policy?.accept)) errors.push({
-		code: DropzoneErrorCode.FileInvalidType,
-		message: "File type is not accepted."
-	});
+	if (!isDropzoneFileAccepted(file, policy?.accept)) {
+		const accepted = compileDropzoneAccept(policy?.accept)?.split(",").join(", ");
+		errors.push({
+			code: DropzoneErrorCode.FileInvalidType,
+			message: accepted ? `File type is not accepted. Use ${accepted}.` : "File type is not accepted."
+		});
+	}
 	if (file.size < minSize) errors.push({
 		code: DropzoneErrorCode.FileTooSmall,
-		message: `File is smaller than the ${formatDropzoneFileSize(minSize)} minimum.`
+		message: `File is smaller than the ${formatDropzoneFileSize(minSize)} minimum. Choose a larger file.`
 	});
 	if (file.size > maxSize) errors.push({
 		code: DropzoneErrorCode.FileTooLarge,
-		message: `File is larger than the ${formatDropzoneFileSize(maxSize)} limit.`
+		message: `File is larger than the ${formatDropzoneFileSize(maxSize)} limit. Choose a smaller file.`
 	});
 	if (policy?.validator) {
 		signal.throwIfAborted();
@@ -80,6 +83,30 @@ async function validateDropzoneFile(file, policy, signal) {
 	}
 	return errors;
 }
+function createDropzoneSelection(currentValue, policy) {
+	const appended = getDropzoneSelectionMode(policy) === "append" ? currentValue : [];
+	const allowDuplicates = policy?.allowDuplicates ?? false;
+	return {
+		files: [...appended],
+		identities: new Set(allowDuplicates ? [] : appended.map(getDropzoneFileIdentity)),
+		allowDuplicates,
+		capacity: getDropzoneCapacity(policy)
+	};
+}
+function getDropzoneSelectionErrors(file, identity, selection) {
+	if (!selection.allowDuplicates && selection.identities.has(identity)) return [{
+		code: DropzoneErrorCode.FileAlreadySelected,
+		message: `File "${file.name}" is already selected.`
+	}];
+	if (selection.files.length >= selection.capacity) {
+		const { capacity } = selection;
+		return [{
+			code: DropzoneErrorCode.TooManyFiles,
+			message: `Too many files. Choose up to ${capacity} ${capacity === 1 ? "file" : "files"}.`
+		}];
+	}
+	return [];
+}
 async function processDropzoneFiles(files, currentValue, policy, signal) {
 	signal.throwIfAborted();
 	const validatedFiles = await Promise.all(files.map(async (file) => ({
@@ -90,9 +117,7 @@ async function processDropzoneFiles(files, currentValue, policy, signal) {
 	const acceptedFiles = [];
 	const fileRejections = [];
 	const selectionMode = getDropzoneSelectionMode(policy);
-	const capacity = getDropzoneCapacity(policy);
-	const selectedFiles = selectionMode === "append" ? [...currentValue] : [];
-	const selectedIdentities = new Set(policy?.allowDuplicates ? [] : (selectionMode === "append" ? currentValue : []).map(getDropzoneFileIdentity));
+	const selection = createDropzoneSelection(currentValue, policy);
 	for (const { file, errors } of validatedFiles) {
 		if (errors.length > 0) {
 			fileRejections.push({
@@ -102,29 +127,17 @@ async function processDropzoneFiles(files, currentValue, policy, signal) {
 			continue;
 		}
 		const identity = getDropzoneFileIdentity(file);
-		if (!policy?.allowDuplicates && selectedIdentities.has(identity)) {
+		const selectionErrors = getDropzoneSelectionErrors(file, identity, selection);
+		if (selectionErrors.length > 0) {
 			fileRejections.push({
 				file,
-				errors: [{
-					code: DropzoneErrorCode.FileAlreadySelected,
-					message: `File "${file.name}" is already selected.`
-				}]
-			});
-			continue;
-		}
-		if (selectedFiles.length >= capacity) {
-			fileRejections.push({
-				file,
-				errors: [{
-					code: DropzoneErrorCode.TooManyFiles,
-					message: "Too many files."
-				}]
+				errors: selectionErrors
 			});
 			continue;
 		}
 		acceptedFiles.push(file);
-		selectedFiles.push(file);
-		selectedIdentities.add(identity);
+		selection.files.push(file);
+		selection.identities.add(identity);
 	}
 	if (selectionMode === "replace" && acceptedFiles.length === 0) return {
 		acceptedFiles,
@@ -135,8 +148,8 @@ async function processDropzoneFiles(files, currentValue, policy, signal) {
 	return {
 		acceptedFiles,
 		fileRejections,
-		value: selectedFiles,
-		removedFiles: selectionMode === "replace" ? getRemovedFiles(currentValue, selectedFiles) : []
+		value: selection.files,
+		removedFiles: selectionMode === "replace" ? getRemovedFiles(currentValue, selection.files) : []
 	};
 }
 function getDropzoneDragVerdict(files, currentValue, policy, options = {}) {

package/dist/lib/env-file.d.ts

@@ -4,7 +4,7 @@ export interface EnvironmentVariableEntry {
   value: string;
 }
 export declare const ENV_FILE_MAX_SIZE: number;
-export declare const DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE = "Environment variable keys must be unique";
+export declare const DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE = "Rename or remove the duplicate key.";
 export declare class DuplicateEnvironmentVariableKeyError extends Error {
   readonly key: string;
   constructor(key: string);

package/dist/lib/env-file.js

@@ -1,6 +1,6 @@
 //#region src/lib/env-file.ts
 const ENV_FILE_MAX_SIZE = 65536;
-const DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE = "Environment variable keys must be unique";
+const DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE = "Rename or remove the duplicate key.";
 var DuplicateEnvironmentVariableKeyError = class extends Error {
 	key;
 	constructor(key) {
@@ -175,7 +175,7 @@ async function readEnvFile(file, options = {}) {
 	const maxSize = options.maxSize ?? 65536;
 	if (file.size > maxSize) return {
 		ok: false,
-		error: `File is too large (max ${Math.ceil(maxSize / 1024)} KB).`
+		error: `That file is over ${Math.ceil(maxSize / 1024)} KB. Choose a smaller .env file.`
 	};
 	let text;
 	try {
@@ -183,17 +183,17 @@ async function readEnvFile(file, options = {}) {
 	} catch {
 		return {
 			ok: false,
-			error: "Could not read the selected file. Please try again."
+			error: "Couldn't read that file. Try selecting it again."
 		};
 	}
 	if (text.includes("\0")) return {
 		ok: false,
-		error: "File appears to be binary. Please import a plain-text .env file."
+		error: "That file isn't plain text. Choose a .env text file."
 	};
 	const entries = parseEnvFileText(text);
 	if (entries.length === 0) return {
 		ok: false,
-		error: "No valid environment variables found in the file."
+		error: "No variables found. Use one KEY=value per line."
 	};
 	return {
 		ok: true,

package/dist/lib/motion.d.ts

@@ -0,0 +1,4 @@
+//#region src/lib/motion.d.ts
+export declare function prefersReducedMotion(node?: Element | null): boolean;
+export declare function readDurationMs(element: Element, token: string): number;
+//#endregion

package/dist/lib/motion.js

@@ -0,0 +1,15 @@
+//#region src/lib/motion.ts
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion(node) {
+	return globalThis.matchMedia?.(REDUCED_MOTION_QUERY).matches === true || node?.closest("[data-motion=\"reduced\"]") != null;
+}
+function readDurationMs(element, token) {
+	const value = getComputedStyle(element).getPropertyValue(token).trim();
+	const amount = Number.parseFloat(value);
+	if (!Number.isFinite(amount)) return 0;
+	if (value.endsWith("ms")) return amount;
+	if (value.endsWith("s")) return amount * 1e3;
+	return amount;
+}
+//#endregion
+export { prefersReducedMotion, readDurationMs };

package/dist/lib/phone-input-format.js

@@ -1,5 +1,5 @@
-import { getCountryCallingCode } from "react-phone-number-input/max";
 import { AsYouType } from "libphonenumber-js/max";
+import { getCountryCallingCode } from "react-phone-number-input/max";
 //#region src/lib/phone-input-format.ts
 function normalizePhoneInputText(value, country) {
 	if (!country) return value;

package/dist/lib/trigger-detect.js

@@ -1,19 +1,14 @@
 //#region src/lib/trigger-detect.ts
-const WHITESPACE = /* @__PURE__ */ new Set([
-	" ",
-	"\n",
-	"	",
-	"\xA0"
-]);
+const WHITESPACE = /\s/u;
 function detectTrigger(textBeforeCaret, triggerChars) {
 	const triggerSet = new Set(triggerChars);
 	for (let i = textBeforeCaret.length - 1; i >= 0; i -= 1) {
 		const char = textBeforeCaret.at(i);
 		if (char === void 0) return null;
-		if (WHITESPACE.has(char)) return null;
+		if (WHITESPACE.test(char)) return null;
 		if (triggerSet.has(char)) {
 			const preceding = i === 0 ? "" : textBeforeCaret.at(i - 1) ?? "";
-			if (preceding === "" || WHITESPACE.has(preceding)) return {
+			if (preceding === "" || WHITESPACE.test(preceding)) return {
 				char,
 				query: textBeforeCaret.slice(i + 1),
 				start: i,
@@ -25,6 +20,8 @@ function detectTrigger(textBeforeCaret, triggerChars) {
 	return null;
 }
 const MIRROR_PROPERTIES = [
+	"direction",
+	"writing-mode",
 	"box-sizing",
 	"width",
 	"font-family",
@@ -33,6 +30,7 @@ const MIRROR_PROPERTIES = [
 	"font-style",
 	"font-variant",
 	"letter-spacing",
+	"word-spacing",
 	"text-transform",
 	"text-indent",
 	"line-height",

package/dist/markdown-block.js

@@ -31,7 +31,7 @@ function MarkdownBlockHeader({ className, ...props }) {
 		"data-control-ui": "markdown-block",
 		"data-control-family": "markdown-block",
 		"data-slot": "header",
-		className: cn("sticky top-0 z-10 flex items-center justify-between", className),
+		className: cn("flex items-center justify-between", className),
 		...props
 	});
 }
@@ -51,6 +51,7 @@ function MarkdownBlockTitle({ children = "Markdown", className, ...props }) {
 			children: "MD"
 		}), /* @__PURE__ */ jsx("span", {
 			className: "truncate",
+			title: typeof children === "string" ? children : void 0,
 			children
 		})]
 	});

package/dist/popup-parts.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from "./ui/button.js";
+//#region src/popup-parts.d.ts
+export type PopupCloseButtonProps = Omit<ButtonProps, "children" | "iconOnly"> & {
+  label: string;
+};
+export declare function PopupCloseButton({ label, variant, size, ...props }: PopupCloseButtonProps): import("react").JSX.Element;
+export declare function PopupArrowShape(): import("react").JSX.Element;
+//#endregion

package/dist/popup-parts.js

@@ -0,0 +1,43 @@
+"use client";
+import { Button } from "./ui/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/popup-parts.tsx
+function PopupCloseButton({ label, variant = "ghost", size = "xs", ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-popup-part": "close",
+		variant,
+		size,
+		iconOnly: true,
+		...props,
+		children: [/* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 16 16",
+			"aria-hidden": "true",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M4 4 12 12M12 4 4 12",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}
+function PopupArrowShape() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		focusable: "false",
+		width: "12",
+		height: "8",
+		viewBox: "0 0 12 8",
+		overflow: "visible",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M0 7L4 2Q6 0 8 2L12 7L12 8L0 8Z",
+			fill: "currentColor"
+		})
+	});
+}
+//#endregion
+export { PopupArrowShape, PopupCloseButton };

package/dist/source-badge.js

@@ -45,6 +45,7 @@ function SourceFavicon({ faviconSrc, href, imageProps, fallbackProps, className,
 }
 function SourceBadge({ faviconSrc, href, children, className, rel, target, ...props }) {
 	const hostname = sourceHostname(href);
+	const label = children ?? hostname;
 	return /* @__PURE__ */ jsxs(Badge, {
 		variant: "outline",
 		render: /* @__PURE__ */ jsx("a", {
@@ -63,8 +64,9 @@ function SourceBadge({ faviconSrc, href, children, className, rel, target, ...pr
 		}), /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "source-badge",
 			"data-slot": "label",
+			title: typeof label === "string" ? label : void 0,
 			className: "truncate",
-			children: children ?? hostname
+			children: label
 		})]
 	});
 }

package/dist/styles/code.css

@@ -26,7 +26,6 @@
   --diff-del-emphasis: oklch(0.87 0.12 22 / 0.8);
   --diff-del-gutter: oklch(0.92 0.07 22);
   --diff-del-fg: oklch(0.53 0.16 22);
-  --diff-context-fg: var(--muted-foreground);
   --diff-gutter-bg: oklch(from var(--muted) l c h / 0.5);
 }
 
@@ -52,6 +51,5 @@
   --diff-del-emphasis: oklch(0.62 0.18 22 / 0.36);
   --diff-del-gutter: oklch(0.55 0.14 22 / 0.3);
   --diff-del-fg: oklch(0.78 0.15 22);
-  --diff-context-fg: var(--muted-foreground);
   --diff-gutter-bg: oklch(from var(--muted) l c h / 0.4);
 }

package/dist/styles/effects.css

@@ -5,14 +5,6 @@
   background-image: linear-gradient(100deg, var(--muted) 30%, oklch(from var(--muted-foreground) l c h / 0.25) 50%, var(--muted) 70%);
   background-size: 220% 100%;
   animation: shimmer calc(var(--duration-slow) * 5) var(--ease-standard) infinite;
-
-  /* Reduced motion: hold resting gradient (infinite animation ignores 0ms collapse, must still explicitly) under OS pref + motion kill-switch attribute. */
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-  :where([data-motion="reduced"]) & {
-    animation: none;
-  }
 }
 
 /* shimmer-text — same sweep clipped to text ("AI is generating" treatment); subtle --muted-foreground↔--foreground stops keep it readable. */
@@ -24,14 +16,6 @@
   -webkit-text-fill-color: transparent;
   color: transparent;
   animation: shimmer calc(var(--duration-slow) * 6) var(--ease-standard) infinite;
-
-  /* Reduced motion: static muted-foreground text, no sweep — stilled under OS pref + motion kill-switch (infinite animation ignores 0ms tempo). */
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-  :where([data-motion="reduced"]) & {
-    animation: none;
-  }
 }
 
 @keyframes shimmer {
@@ -69,14 +53,6 @@
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   animation: aui-halftone calc(var(--duration-slow) * 6) var(--ease-standard) infinite;
-
-  /* Reduced motion: dots hold at their resting radius — still a legible placeholder, just no breathing. */
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-  :where([data-motion="reduced"]) & {
-    animation: none;
-  }
 }
 
 @keyframes aui-halftone {
@@ -106,14 +82,6 @@
   color: transparent;
   text-shadow: none;
   animation: aui-progress-sweep calc(var(--duration-slow) * 12) linear infinite;
-
-  /* Reduced motion: static blocks, no march — stilled under OS pref + motion kill-switch (infinite animation ignores 0ms tempo). */
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-  :where([data-motion="reduced"]) & {
-    animation: none;
-  }
 }
 
 @keyframes aui-progress-sweep {
@@ -124,3 +92,9 @@
     background-position: -200% 0;
   }
 }
+
+@keyframes cui-spin {
+  to {
+    rotate: 360deg;
+  }
+}

package/dist/styles/index.css

@@ -1,8 +1,10 @@
 @import "./theme.css";
 @import "./recipes/accordion.css";
 @import "./recipes/button.css";
+@import "./recipes/button-states.css";
 @import "./recipes/action-bar.css";
 @import "./recipes/collapsible.css";
+@import "./effects.css";
 @import "./recipes/progressive-blur.css";
 @import "./recipes/scroll-area.css";
 @import "./recipes/activity.css";
@@ -17,16 +19,17 @@
 @import "./recipes/field-parts.css";
 @import "./recipes/avatar.css";
 @import "./recipes/badge.css";
+@import "./recipes/breadcrumb.css";
 @import "./recipes/track-highlight.css";
 @import "./recipes/button-group.css";
 @import "./recipes/calendar.css";
 @import "./recipes/card.css";
-@import "./recipes/chat-layout.css";
-@import "./effects.css";
 @import "./recipes/chat-message.css";
+@import "./recipes/chat-message-social.css";
+@import "./recipes/chat-layout.css";
+@import "./recipes/spinner.css";
 @import "./recipes/chat-composer.css";
 @import "./chat-composer-editor.css";
-@import "./recipes/spinner.css";
 @import "./recipes/chat-composer-attachment.css";
 @import "./recipes/choice.css";
 @import "./code.css";
@@ -34,29 +37,31 @@
 @import "./recipes/code-diff.css";
 @import "./recipes/sidebar.css";
 @import "./recipes/sidebar-menu.css";
+@import "./recipes/sidebar-parts.css";
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";
 @import "./recipes/empty.css";
 @import "./recipes/context.css";
+@import "./recipes/popup-drawer.css";
 @import "./recipes/infinite-canvas.css";
 @import "./recipes/resizable.css";
 @import "./recipes/separator.css";
 @import "./recipes/toolbar.css";
-@import "./recipes/popup-drawer.css";
+@import "./recipes/kbd.css";
 @import "./recipes/dockable-panel.css";
 @import "./recipes/item.css";
 @import "./recipes/dropzone.css";
 @import "./recipes/dynamic-notification.css";
 @import "./recipes/dynamic-notification-input.css";
 @import "./recipes/dynamic-notification-motion.css";
+@import "./recipes/emoji-picker.css";
 @import "./recipes/environment-variables.css";
 @import "./recipes/filter-bar.css";
 @import "./recipes/gradient-editor.css";
 @import "./recipes/inline-attachment.css";
 @import "./recipes/source-badge.css";
 @import "./recipes/inline-citation.css";
-@import "./recipes/kbd.css";
 @import "./recipes/markdown.css";
 @import "./recipes/markdown-block.css";
 @import "./recipes/range.css";