@kznlabs/labsui 0.1.5 → 0.1.7

package/dist/index.js

@@ -231,6 +231,7 @@ export function AccentPicker({ className }: { className?: string }) {
 	return (
 		<fieldset className={cn("flex items-center gap-1.5", className)}>
 			<legend className="sr-only">Accent color</legend>
+
 			{accents.map((accent) => (
 				<label
 					key={accent}
@@ -245,12 +246,15 @@ export function AccentPicker({ className }: { className?: string }) {
 						onChange={() => setAccent(accent)}
 						className="peer sr-only"
 					/>
+
 					<span className="sr-only">{accent}</span>
+
 					<span
 						aria-hidden="true"
 						style={{ backgroundColor: swatch[accent] }}
 						className="size-4 rounded-full ring-1 ring-foreground/10 ring-inset transition-transform duration-200 peer-hover:scale-110 peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50"
 					/>
+
 					{current === accent && (
 						<motion.span
 							aria-hidden="true"
@@ -418,6 +422,7 @@ export function AccordionTrigger({
 				)}
 			>
 				{children}
+
 				<motion.span
 					animate={{ rotate: open ? 180 : 0 }}
 					transition={spring}
@@ -537,7 +542,9 @@ export function Alert({
 					{glyph}
 				</span>
 			)}
+
 			<div className="grid min-w-0 flex-1 gap-1">{children}</div>
+
 			{action && <div className="-my-1 shrink-0 self-center">{action}</div>}
 		</div>
 	);
@@ -670,14 +677,17 @@ export function AppWindow({
 						);
 					})}
 				</div>
+
 				{header ??
 					(title && (
 						<p className="pointer-events-none absolute inset-x-24 truncate text-center font-medium text-muted-foreground text-xs">
 							{title}
 						</p>
 					))}
+
 				{actions && <div className="ml-auto flex items-center gap-1.5">{actions}</div>}
 			</div>
+
 			<div className={cn("flex-1", bodyClassName)}>{children}</div>
 		</div>
 	);
@@ -716,7 +726,7 @@ export function AspectRatio({ ratio = 16 / 9, className, style, ...props }: Aspe
 }
 ` }] }, attachment: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "attachment", type: "registry:ui", title: "Attachment & Dropzone", description: "File chips with image thumbnails or type icons, size, a springing upload bar, error state and remove; the list springs chips in and closes the gap. FileDropzone wraps a real file input: click, keyboard and the native picker work, drop and paste are checked against accept and maxSize, and dropped files land in the input so forms and Server Actions receive them.", docs: "https://kznlabs.github.io/labsUI/components/attachment", usage: '<FileDropzone name="clips" multiple accept="video/*" maxSize={50 * 1024 * 1024} onFiles={add} onReject={warn} /><AttachmentList>{files.map((f) => <Attachment key={f.id} name={f.name} size={f.size} type={f.type} progress={f.progress} onRemove={() => remove(f.id)} />)}</AttachmentList>', examples: [{ name: "clip-upload.tsx", code: `import { FileDropzone } from "@/components/ui/attachment";
 import { Button } from "@/components/ui/button";
-import { uploadClips } from "./actions"; // "use server": (formData) => formData.getAll("clips")
+import { uploadClips } from "./actions";
 
 // Picked and dropped files both land in the input, so the Server Action gets them.
 export function ClipUpload() {
@@ -747,8 +757,14 @@ export function Attachments({ files, onRemove }: { files: File[]; onRemove: (id:
       ))}
     </AttachmentList>
   );
-}` }], api: { entries: [{ kind: "function", name: "formatBytes", signature: "formatBytes(bytes: number, locale?: string) => string", description: 'Bytes as text in the given locale: 1536 is "1.5 kB".' }, { kind: "component", name: "Attachment", props: [{ name: "name", type: "string", required: true, description: "File name." }, { name: "error", type: "string", required: false, description: "Replaces the size line and turns the chip red." }, { name: "href", type: "string", required: false, description: "Makes the name a download link." }, { name: "locale", type: "string", required: false, description: "BCP 47 locale for the size." }, { name: "onRemove", type: "() => void", required: false, description: "Shows a remove button; called when it is pressed." }, { name: "progress", type: "number", required: false, description: "0 to 100 while uploading; the bar springs along the bottom edge." }, { name: "size", type: "number", required: false, description: "Bytes." }, { name: "src", type: "string", required: false, description: "Thumbnail source: a URL, or `URL.createObjectURL(file)` for a fresh upload." }, { name: "type", type: "string", required: false, description: "MIME type; picks the icon, and image types show `src` as a thumbnail." }], description: "File chip: thumbnail or type icon, name, size, upload progress or error, and remove." }, { kind: "component", name: "AttachmentList", props: [], extends: "<ul>", description: "Attachments that spring in, out and into place when one is removed. Key each child." }, { kind: "component", name: "FileDropzone", props: [{ name: "accept", type: "string", required: false, description: 'Same syntax as the input attribute: ".pdf,image/*". Enforced on drop and paste too.' }, { name: "aria-describedby", type: "string", required: false, description: "Ids of hint or error text; Field fills it in." }, { name: "aria-invalid", type: "boolean", required: false, description: "Error styling; Field sets it from `error`." }, { name: "children", type: "ReactNode", required: false, description: 'Replaces the default "Drop files or browse" content.' }, { name: "disabled", type: "boolean", required: false, description: "Blocks drops and the picker." }, { name: "id", type: "string", required: false, description: "Id of the file input; Field fills it in." }, { name: "maxSize", type: "number", required: false, description: "Bytes." }, { name: "multiple", type: "boolean", required: false, description: "Accept more than one file." }, { name: "name", type: "string", required: false, description: "Form field name: picked and dropped files both submit with the form." }, { name: "onFiles", type: "(files: File[]) => void", required: false, description: "Files that passed `accept` and `maxSize`, from a drop or the picker." }, { name: "onReject", type: "(rejected: Rejection[]) => void", required: false, description: "Files that failed `accept` or `maxSize`, each with a reason." }, { name: "required", type: "boolean", required: false, description: "Form submit needs at least one file." }], description: `Drop area around a real file input: click, Enter/Space and the native picker work as-is, and
-dropped files are written back into the input so plain forms and Server Actions get them.` }], types: { Rejection: '{ file: File; reason: "type" | "size" }' } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/attachment.tsx", type: "registry:ui", content: `"use client";
+}` }, { name: "actions.ts", code: `"use server";
+
+export async function uploadClips(formData: FormData) {
+  const clips = formData.getAll("clips") as File[];
+
+  console.log(clips.map((clip) => clip.name));
+}` }], api: { entries: [{ kind: "function", name: "formatBytes", signature: "formatBytes(bytes: number, locale?: string) => string", description: 'Bytes as text in the given locale: 1536 is "1.5 kB".' }, { kind: "component", name: "Attachment", props: [{ name: "name", type: "string", required: true, description: "File name." }, { name: "error", type: "string", required: false, description: "Replaces the size line and turns the chip red." }, { name: "href", type: "string", required: false, description: "Makes the name a download link." }, { name: "locale", type: "string", required: false, description: "BCP 47 locale for the size." }, { name: "onRemove", type: "() => void", required: false, description: "Shows a remove button; called when it is pressed." }, { name: "progress", type: "number", required: false, description: "0 to 100 while uploading; the bar springs along the bottom edge." }, { name: "size", type: "number", required: false, description: "Bytes." }, { name: "src", type: "string", required: false, description: "Thumbnail source: a URL, or `URL.createObjectURL(file)` for a fresh upload." }, { name: "type", type: "string", required: false, description: "MIME type; picks the icon, and image types show `src` as a thumbnail." }], description: "File chip: thumbnail or type icon, name, size, upload progress or error, and remove." }, { kind: "component", name: "AttachmentList", props: [], extends: "<ul>", description: "Attachments that spring in, out and into place when one is removed. Key each child." }, { kind: "component", name: "FileDropzone", props: [{ name: "accept", type: "string", required: false, description: 'Same syntax as the input attribute: ".pdf,image/*". Enforced on drop and paste too.' }, { name: "aria-describedby", type: "string", required: false, description: "Ids of hint or error text; Field fills it in." }, { name: "aria-invalid", type: "boolean", required: false, description: "Error styling; Field sets it from `error`." }, { name: "children", type: "ReactNode", required: false, description: 'Replaces the default "Drop files or browse" content.' }, { name: "disabled", type: "boolean", required: false, description: "Blocks drops and the picker; no file is submitted." }, { name: "id", type: "string", required: false, description: "Id of the file input; Field fills it in." }, { name: "maxSize", type: "number", required: false, description: "Bytes." }, { name: "multiple", type: "boolean", required: false, description: "Accept more than one file." }, { name: "name", type: "string", required: false, description: "Form field name: picked and dropped files both submit with the form." }, { name: "onFiles", type: "(files: File[]) => void", required: false, description: "Files that passed `accept` and `maxSize`, from a drop or the picker." }, { name: "onReject", type: "(rejected: FileRejection[]) => void", required: false, description: "Files that failed `accept` or `maxSize`, each with a reason." }, { name: "required", type: "boolean", required: false, description: "Form submit needs at least one file." }], description: `Drop area around a real file input: click, Enter/Space and the native picker work as-is, and
+dropped files are written back into the input so plain forms and Server Actions get them.` }], types: { FileRejection: '{ file: File; reason: "type" | "size" }' } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/attachment.tsx", type: "registry:ui", content: `"use client";
 
 import {
 	CloudUpload,
@@ -904,6 +920,7 @@ export function Attachment({
 					<Icon className="size-5" aria-hidden="true" />
 				)}
 			</span>
+
 			<span className="grid min-w-0 flex-1">
 				{href ? (
 					<a
@@ -916,6 +933,7 @@ export function Attachment({
 				) : (
 					<span className="truncate font-medium text-sm">{name}</span>
 				)}
+
 				<span
 					className={cn(
 						"truncate text-xs tabular-nums",
@@ -925,6 +943,7 @@ export function Attachment({
 					{meta || " "}
 				</span>
 			</span>
+
 			{onRemove && (
 				<button
 					type="button"
@@ -935,6 +954,7 @@ export function Attachment({
 					<X className="size-3.5" aria-hidden="true" />
 				</button>
 			)}
+
 			{uploading && (
 				<motion.span
 					aria-hidden="true"
@@ -963,7 +983,7 @@ export function AttachmentList({ className, children, ...props }: ComponentProps
 
 /* ---------- FileDropzone ---------- */
 
-type Rejection = { file: File; reason: "type" | "size" };
+export type FileRejection = { file: File; reason: "type" | "size" };
 
 type FileDropzoneProps = {
 	/** Same syntax as the input attribute: ".pdf,image/*". Enforced on drop and paste too. */
@@ -975,12 +995,12 @@ type FileDropzoneProps = {
 	/** Files that passed \`accept\` and \`maxSize\`, from a drop or the picker. */
 	onFiles?: (files: File[]) => void;
 	/** Files that failed \`accept\` or \`maxSize\`, each with a reason. */
-	onReject?: (rejected: Rejection[]) => void;
+	onReject?: (rejected: FileRejection[]) => void;
 	/** Form field name: picked and dropped files both submit with the form. */
 	name?: string;
 	/** Id of the file input; Field fills it in. */
 	id?: string;
-	/** Blocks drops and the picker. */
+	/** Blocks drops and the picker; no file is submitted. */
 	disabled?: boolean;
 	/** Form submit needs at least one file. */
 	required?: boolean;
@@ -1019,7 +1039,7 @@ export function FileDropzone(allProps: FileDropzoneProps) {
 		const all = [...list];
 		const picked = multiple ? all : all.slice(0, 1);
 		const ok: File[] = [];
-		const rejected: Rejection[] = [];
+		const rejected: FileRejection[] = [];
 
 		for (const file of picked) {
 			if (!accepts(file, accept)) rejected.push({ file, reason: "type" });
@@ -1075,7 +1095,7 @@ export function FileDropzone(allProps: FileDropzoneProps) {
 			}}
 			onDrop={onDrop}
 			onPaste={(event) =>
-				event.clipboardData.files.length > 0 && take(event.clipboardData.files, false)
+				!disabled && event.clipboardData.files.length > 0 && take(event.clipboardData.files, false)
 			}
 			className={cn(
 				"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed bg-card p-6 text-center transition-colors has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50",
@@ -1095,15 +1115,18 @@ export function FileDropzone(allProps: FileDropzoneProps) {
 				className="sr-only"
 				{...input}
 			/>
+
 			{children ?? (
 				<>
 					<span className="grid size-10 place-items-center rounded-full bg-muted text-muted-foreground">
 						<CloudUpload className="size-5" aria-hidden="true" />
 					</span>
+
 					<span className="text-sm">
 						<span className="font-medium">Drop {multiple ? "files" : "a file"}</span> or{" "}
 						<span className="font-medium text-primary-ink">browse</span>
 					</span>
+
 					{hint && <span className="text-muted-foreground text-xs">{hint}</span>}
 				</>
 			)}
@@ -1176,6 +1199,7 @@ export function Avatar({ src, alt, fallback, status, size = "default", className
 				className="relative flex size-full select-none items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-muted-foreground ring-1 ring-border"
 			>
 				<span aria-hidden="true">{fallback ?? initials(alt)}</span>
+
 				{showImg && (
 					// biome-ignore lint/performance/noImgElement: arbitrary remote avatars; no next/image loader config
 					<img
@@ -1196,6 +1220,7 @@ export function Avatar({ src, alt, fallback, status, size = "default", className
 					/>
 				)}
 			</span>
+
 			{status && (
 				<span
 					className={cn(
@@ -1213,14 +1238,14 @@ export function Avatar({ src, alt, fallback, status, size = "default", className
 ` }] }, "avatar-group": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "avatar-group", type: "registry:ui", title: "AvatarGroup", description: "Overlapping avatars with a +N overflow chip. Hover gently enlarges the avatar on a spring, keeping stack order.", docs: "https://kznlabs.github.io/labsUI/components/avatar-group", usage: '<AvatarGroup users={team} max={4} size="lg" />', examples: [{ name: "team.tsx", code: `import { AvatarGroup } from "@/components/ui/avatar-group";
 export function Team({ users }: { users: { alt: string; src?: string }[] }) {
   return <AvatarGroup users={users} max={4} size="lg" />;
-}` }], api: { entries: [{ kind: "component", name: "AvatarGroup", props: [{ name: "users", type: "GroupUser[]", required: true, description: "People in order; `alt` is each one's name." }, { name: "max", type: "number", required: false, default: "4", description: "How many avatars to show before the `+N` chip." }, { name: "size", type: '"sm" | "default" | "lg"', required: false, default: '"default"', description: "Size of every avatar and the chip." }], description: "Overlapping avatars with a `+N` overflow chip. Hover gently enlarges the avatar on a spring, staying in stack order." }], types: { GroupUser: "{ alt: string; src?: string; id?: string; }" } }, dependencies: ["motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/avatar.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/avatar-group.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "AvatarGroup", props: [{ name: "users", type: "AvatarGroupUser[]", required: true, description: "People in order; `alt` is each one's name." }, { name: "max", type: "number", required: false, default: "4", description: "How many avatars to show before the `+N` chip." }, { name: "size", type: '"sm" | "default" | "lg"', required: false, default: '"default"', description: "Size of every avatar and the chip." }], description: "Overlapping avatars with a `+N` overflow chip. Hover gently enlarges the avatar on a spring, staying in stack order." }], types: { AvatarGroupUser: "{ alt: string; src?: string; id?: string; }" } }, dependencies: ["motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/avatar.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/avatar-group.tsx", type: "registry:ui", content: `"use client";
 
 import { motion } from "motion/react";
 import { useState } from "react";
 import { Avatar } from "@/components/ui/avatar";
 import { cn, spring } from "@/lib/utils";
 
-type GroupUser = {
+export type AvatarGroupUser = {
 	alt: string;
 	/** Image URL; initials from \`alt\` show without one. */
 	src?: string;
@@ -1230,7 +1255,7 @@ type GroupUser = {
 
 type AvatarGroupProps = {
 	/** People in order; \`alt\` is each one's name. */
-	users: GroupUser[];
+	users: AvatarGroupUser[];
 	/** How many avatars to show before the \`+N\` chip. */
 	max?: number;
 	/** Size of every avatar and the chip. */
@@ -1274,6 +1299,7 @@ export function AvatarGroup({ users, max = 4, size = "default", className }: Ava
 					<Avatar src={user.src} alt={user.alt} size={size} />
 				</motion.li>
 			))}
+
 			{overflow > 0 && (
 				<li
 					className={cn(
@@ -1344,9 +1370,11 @@ export function Badge({
 					{pulse && (
 						<span className="absolute inset-0 animate-ping rounded-full bg-current opacity-60 [animation-duration:1.6s] motion-reduce:hidden" />
 					)}
+
 					<span className="relative size-1.5 rounded-full bg-current" />
 				</span>
 			)}
+
 			{children}
 		</span>
 	);
@@ -1363,10 +1391,10 @@ export function NavTrail({ post }: { post: { title: string } }) {
       ]}
     />
   );
-}` }], api: { entries: [{ kind: "component", name: "Breadcrumb", props: [{ name: "items", type: "Crumb[]", required: true, description: "The trail, outermost first. The last item is the current page." }, { name: "separator", type: "ReactNode", required: false, description: "Drawn between items. Default a chevron." }], extends: "<nav>", description: "Where the page sits in the site: a list of links ending at the current page. Server-safe." }], types: { Crumb: "{ label: ReactNode; href?: string; onClick?: MouseEventHandler<HTMLAnchorElement>; }" } }, dependencies: ["lucide-react@1.63.0"], registryDependencies: [], files: [{ path: "components/ui/breadcrumb.tsx", type: "registry:ui", content: `import { ChevronRight } from "lucide-react";
+}` }], api: { entries: [{ kind: "component", name: "Breadcrumb", props: [{ name: "items", type: "BreadcrumbItem[]", required: true, description: "The trail, outermost first. The last item is the current page." }, { name: "separator", type: "ReactNode", required: false, description: "Drawn between items. Default a chevron." }], extends: "<nav>", description: "Where the page sits in the site: a list of links ending at the current page. Server-safe." }], types: { BreadcrumbItem: "{ label: ReactNode; href?: string; onClick?: MouseEventHandler<HTMLAnchorElement>; }" } }, dependencies: ["lucide-react@1.63.0"], registryDependencies: [], files: [{ path: "components/ui/breadcrumb.tsx", type: "registry:ui", content: `import { ChevronRight } from "lucide-react";
 import type { ComponentProps, MouseEventHandler, ReactNode } from "react";
 
-type Crumb = {
+export type BreadcrumbItem = {
 	/** What the step reads as. */
 	label: ReactNode;
 	/** Leave out for a step that has no page of its own. */
@@ -1377,7 +1405,7 @@ type Crumb = {
 
 type BreadcrumbProps = Omit<ComponentProps<"nav">, "children"> & {
 	/** The trail, outermost first. The last item is the current page. */
-	items: Crumb[];
+	items: BreadcrumbItem[];
 	/** Drawn between items. Default a chevron. */
 	separator?: ReactNode;
 };
@@ -1401,6 +1429,7 @@ export function Breadcrumb({
 								{separator ?? <ChevronRight />}
 							</span>
 						)}
+
 						{i === items.length - 1 ? (
 							<span aria-current="page" className="text-foreground">
 								{item.label}
@@ -1460,7 +1489,7 @@ export function DeleteAccount({
       Delete account
     </Button>
   );
-}` }], api: { entries: [{ kind: "component", name: "Button", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, default: "3000", description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, default: "false", description: "Disables the button and shows a spinner before the label." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, default: '"idle"', description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, default: '"left"', description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }] }], types: { ButtonStatus: '"idle" | "loading" | "success"', SwapDirection: '"left" | "right" | "up" | "down"' } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/button-variants.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/button.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "Button", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, default: "3000", description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, default: "false", description: "Shows a spinner before the label and ignores clicks and Enter, so a form can't submit twice. Stays focusable." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, default: '"idle"', description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`. Both ignore clicks and Enter, so a form can't submit twice." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, default: '"left"', description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }] }], types: { ButtonStatus: '"idle" | "loading" | "success"', SwapDirection: '"left" | "right" | "up" | "down"' } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/button-variants.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/button.tsx", type: "registry:ui", content: `"use client";
 
 import { Check, Loader2 } from "lucide-react";
 import { AnimatePresence, type HTMLMotionProps, motion } from "motion/react";
@@ -1475,16 +1504,16 @@ import {
 import { spring } from "@/lib/utils";
 import { buttonVariants, type VariantProps } from "./button-variants";
 
-type ButtonStatus = "idle" | "loading" | "success";
+export type ButtonStatus = "idle" | "loading" | "success";
 /** Where the old label slides out to; the new one comes from the opposite side. */
-type SwapDirection = "left" | "right" | "up" | "down";
+export type SwapDirection = "left" | "right" | "up" | "down";
 type Phase = "idle" | "armed" | "loading" | "success";
 
 type ButtonProps = Omit<HTMLMotionProps<"button">, "children"> &
 	VariantProps & {
-		/** Disables the button and shows a spinner before the label. */
+		/** Shows a spinner before the label and ignores clicks and Enter, so a form can't submit twice. Stays focusable. */
 		loading?: boolean;
-		/** In-place feedback: \`loading\` spins, \`success\` swaps the label to \`successLabel\`. */
+		/** In-place feedback: \`loading\` spins, \`success\` swaps the label to \`successLabel\`. Both ignore clicks and Enter, so a form can't submit twice. */
 		status?: ButtonStatus;
 		/** Text shown on \`status="success"\`, with a check icon. Defaults to "Done". */
 		successLabel?: ReactNode;
@@ -1620,14 +1649,19 @@ export function Button({
 			{/* Hidden copies of every label reserve the widest one, so swaps never resize the button. */}
 			<span className="inline-grid justify-items-center">
 				{children !== undefined && <SizerLabel>{children}</SizerLabel>}
+
 				{loadingLabel !== undefined && <SizerLabel>{loadingLabel}</SizerLabel>}
+
 				{confirmLabel !== undefined && <SizerLabel>{confirmLabel}</SizerLabel>}
+
 				{successLabel !== undefined && (
 					<SizerLabel>
 						<Check />
+
 						{successLabel}
 					</SizerLabel>
 				)}
+
 				<AnimatePresence mode="wait" initial={false}>
 					{phase === "success" && (
 						<motion.span
@@ -1645,9 +1679,11 @@ export function Button({
 							>
 								<Check aria-hidden="true" />
 							</motion.span>
+
 							{successLabel ?? "Done"}
 						</motion.span>
 					)}
+
 					{phase === "armed" && (
 						<motion.span
 							key="armed"
@@ -1659,6 +1695,7 @@ export function Button({
 							{confirmLabel}
 						</motion.span>
 					)}
+
 					{phase === "loading" && (
 						<motion.span
 							key="loading"
@@ -1678,9 +1715,11 @@ export function Button({
 									<Loader2 className="animate-spin" aria-hidden="true" />
 								</motion.span>
 							</AnimatePresence>
+
 							{loadingLabel ?? children}
 						</motion.span>
 					)}
+
 					{phase === "idle" && (
 						<motion.span
 							key="idle"
@@ -2047,6 +2086,7 @@ export function Calendar(props: CalendarProps) {
 				<p id={\`\${id}-caption\`} aria-live="polite" className="font-semibold text-sm">
 					{month ? fmtMonth.format(month) : " "}
 				</p>
+
 				<div className="flex gap-0.5">
 					<Button
 						variant="ghost"
@@ -2058,6 +2098,7 @@ export function Calendar(props: CalendarProps) {
 					>
 						<ChevronLeft />
 					</Button>
+
 					<Button
 						variant="ghost"
 						size="icon"
@@ -2103,6 +2144,7 @@ export function Calendar(props: CalendarProps) {
 								))}
 							</tr>
 						</thead>
+
 						<tbody>
 							{weeks.map((week, weekIndex) => (
 								// biome-ignore lint/suspicious/noArrayIndexKey: six fixed rows
@@ -2694,7 +2736,7 @@ export function ChangelogPage() {
       ]}
     />
   );
-}` }], api: { entries: [{ kind: "component", name: "Changelog", props: [{ name: "releases", type: "Release[]", required: true, description: "Newest first; the first one is highlighted." }], description: "Release notes on a Timeline: the newest release is the highlighted one, changes are typed with Badges, Kbd shows how to try it." }], types: { Release: "{ version: string; title: string; date: string; dateTime?: string; changes: Change[]; shortcut?: string[]; }" } }, dependencies: ["lucide-react@1.63.0"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/badge.json", "https://kznlabs.github.io/labsUI/r/kbd.json", "https://kznlabs.github.io/labsUI/r/timeline.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/blocks/changelog.tsx", type: "registry:block", content: `import { Rocket } from "lucide-react";
+}` }], api: { entries: [{ kind: "component", name: "Changelog", props: [{ name: "releases", type: "ChangelogRelease[]", required: true, description: "Newest first; the first one is highlighted." }], description: "Release notes on a Timeline: the newest release is the highlighted one, changes are typed with Badges, Kbd shows how to try it." }], types: { ChangelogRelease: "{ version: string; title: string; date: string; dateTime?: string; changes: Change[]; shortcut?: string[]; }" } }, dependencies: ["lucide-react@1.63.0"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/badge.json", "https://kznlabs.github.io/labsUI/r/kbd.json", "https://kznlabs.github.io/labsUI/r/timeline.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/blocks/changelog.tsx", type: "registry:block", content: `import { Rocket } from "lucide-react";
 import type { ReactNode } from "react";
 import { Badge } from "@/components/ui/badge";
 import { KbdGroup } from "@/components/ui/kbd";
@@ -2705,7 +2747,7 @@ import { cn } from "@/lib/utils";
 
 type Change = { type: "new" | "improved" | "fixed"; text: ReactNode };
 
-type Release = {
+export type ChangelogRelease = {
 	version: string;
 	/** Release headline, shown beside the version. */
 	title: string;
@@ -2730,7 +2772,7 @@ export function Changelog({
 	className,
 }: {
 	/** Newest first; the first one is highlighted. */
-	releases: Release[];
+	releases: ChangelogRelease[];
 	className?: string;
 }) {
 	return (
@@ -2747,6 +2789,7 @@ export function Changelog({
 							<Badge variant="secondary" className="font-mono">
 								{release.version}
 							</Badge>
+
 							{release.title}
 						</span>
 					}
@@ -2758,10 +2801,12 @@ export function Changelog({
 								<Badge variant={kinds[change.type].variant} className="mt-px w-16 justify-center">
 									{kinds[change.type].label}
 								</Badge>
+
 								<span>{change.text}</span>
 							</li>
 						))}
 					</ul>
+
 					{release.shortcut && (
 						<p className="mt-3 flex items-center gap-2 text-muted-foreground text-xs">
 							Try it <KbdGroup keys={release.shortcut} />
@@ -2823,7 +2868,7 @@ import {
 import { useDismiss } from "@/lib/use-dismiss";
 import { clamp, cn, material, spring } from "@/lib/utils";
 
-type ChartSeries = {
+export type ChartSeries = {
 	key: string;
 	/** Legend and tooltip name of the series. */
 	label: string;
@@ -3168,9 +3213,11 @@ export function Chart({
 		// stop.
 		<Table containerClassName={view === "table" ? "max-h-[32rem]" : "overflow-x-visible"}>
 			<TableCaption className={view === "chart" ? "sr-only" : undefined}>{label}</TableCaption>
+
 			<TableHeader>
 				<TableRow>
 					<TableHead className="capitalize">{index}</TableHead>
+
 					{series.map((item) => (
 						<TableHead key={item.key} className="text-right">
 							{item.label}
@@ -3178,10 +3225,12 @@ export function Chart({
 					))}
 				</TableRow>
 			</TableHeader>
+
 			<TableBody>
 				{data.map((row) => (
 					<TableRow key={String(row[index])}>
 						<TableCell className="font-medium">{row[index]}</TableCell>
+
 						{series.map((item) => (
 							<TableCell key={item.key} className="text-right tabular-nums">
 								{fmt.format(num(row[item.key]))}
@@ -3229,6 +3278,7 @@ export function Chart({
 											}
 											style={{ background: color(slots.get(item.key) ?? 1) }}
 										/>
+
 										<span className={cn(off && "line-through")}>{item.label}</span>
 									</button>
 								</li>
@@ -3238,6 +3288,7 @@ export function Chart({
 				) : (
 					<span />
 				)}
+
 				<Button
 					size="sm"
 					variant="ghost"
@@ -3289,6 +3340,7 @@ export function Chart({
 												className={tick === 0 ? "stroke-foreground/25" : "stroke-border"}
 												shapeRendering="crispEdges"
 											/>
+
 											<text
 												x={margin.left - 8}
 												y={y(tick)}
@@ -3300,6 +3352,7 @@ export function Chart({
 											</text>
 										</g>
 									))}
+
 									{data.map((row, i) =>
 										i % every === 0 ? (
 											<text
@@ -3360,6 +3413,7 @@ export function Chart({
 																fillOpacity={0.1}
 															/>
 														)}
+
 														<motion.path
 															initial={{ d: linePath(flat(pts)) }}
 															animate={{ d: linePath(pts) }}
@@ -3370,6 +3424,7 @@ export function Chart({
 															strokeLinejoin="round"
 															strokeLinecap="round"
 														/>
+
 														{(active === null ? [rowCount - 1] : [active]).map((i) =>
 															pts[i] ? (
 																<motion.circle
@@ -3435,6 +3490,7 @@ export function Chart({
 											)}
 										>
 											<p className="mb-1.5 text-muted-foreground">{row[index]}</p>
+
 											<ul className="grid gap-1">
 												{shown.map((item) => (
 													<li key={item.key} className="flex items-center gap-2">
@@ -3442,7 +3498,9 @@ export function Chart({
 															className="h-0.5 w-2.5 shrink-0 rounded-full"
 															style={{ background: color(slots.get(item.key) ?? 1) }}
 														/>
+
 														<span className="text-muted-foreground">{item.label}</span>
+
 														<span className="ml-auto pl-3 font-medium tabular-nums">
 															{fmt.format(num(row[item.key]))}
 														</span>
@@ -3454,9 +3512,11 @@ export function Chart({
 								)}
 							</AnimatePresence>
 						</div>
+
 						<p className="sr-only" aria-live="polite">
 							{readout}
 						</p>
+
 						{/* The same numbers for screen readers, search engines and no-JS. */}
 						<div className="sr-only">{table}</div>
 					</>
@@ -3528,6 +3588,7 @@ export function Checkbox({
 				className="peer absolute -inset-1 z-10 cursor-pointer appearance-none rounded-[5px] outline-none disabled:cursor-not-allowed"
 				{...props}
 			/>
+
 			<span
 				aria-hidden="true"
 				className={cn(
@@ -3638,10 +3699,13 @@ export function ClipCard({
 				className="grid place-items-center overflow-hidden rounded-lg bg-foreground/[0.06] text-muted-foreground"
 			>
 				{thumbnail ?? <Film className="size-5" aria-hidden="true" />}
+
 				<Badge variant="secondary" className="absolute right-1.5 bottom-2 tabular-nums">
 					<span className="sr-only">Duration </span>
+
 					{duration}
 				</Badge>
+
 				{watched !== undefined && watched > 0 && (
 					<Progress
 						value={watched}
@@ -3651,8 +3715,10 @@ export function ClipCard({
 					/>
 				)}
 			</AspectRatio>
+
 			<div className="grid gap-0.5 px-0.5 text-left">
 				<p className="truncate font-medium text-sm">{title}</p>
+
 				{meta && <p className="truncate text-muted-foreground text-xs">{meta}</p>}
 			</div>
 		</>
@@ -3672,6 +3738,7 @@ export function ClipCard({
 			>
 				{body}
 			</ContextMenuTrigger>
+
 			<ContextMenuContent>{actions}</ContextMenuContent>
 		</ContextMenu>
 	);
@@ -3717,13 +3784,13 @@ import { OverflowFocus } from "@/lib/overflow-focus";
 import { cn } from "@/lib/utils";
 
 /** One line, or an inclusive \`[from, to]\` run. Numbers are the ones shown in the gutter. */
-type LineRange = number | [from: number, to: number];
+export type LineRange = number | [from: number, to: number];
 
 /**
  * Text to mark: every match of a string, matches on one line, or an exact \`[start, end)\`
  * column range (String#slice indices) on one line.
  */
-type CodeMark =
+export type CodeMark =
 	| string
 	| { text: string; line?: number }
 	| { line: number; start: number; end: number };
@@ -3739,7 +3806,7 @@ type Annotations = {
 	notes?: Record<number, ReactNode>;
 };
 
-type CodeFile = Annotations & {
+export type CodeFile = Annotations & {
 	name: string;
 	code: string;
 	/** Lines from \`highlightCode()\`, made ahead of time (server or build): no Shiki in the browser. */
@@ -4076,9 +4143,11 @@ function CodeLines({
 											)}
 										/>
 									)}
+
 									{numbered && <span style={{ minWidth: \`\${digits}ch\` }}>{lineNumber}</span>}
 								</span>
 							)}
+
 							{note ? (
 								<Tooltip content={note} side="top" align="start" delay={150} touch="tap">
 									<span
@@ -4122,8 +4191,10 @@ export function Code({
 			>
 				<div className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap rounded-sm font-mono text-xs outline-none [scrollbar-width:none] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&::-webkit-scrollbar]:hidden">
 					<CodeLines text={code} lines={lines} marks={annotations.marks} inline />
+
 					<OverflowFocus />
 				</div>
+
 				<CopyButton code={code} />
 			</div>
 		);
@@ -4138,10 +4209,13 @@ export function Code({
 		>
 			<div className="flex h-8 items-center justify-between border-b px-3">
 				<span className="font-mono text-muted-foreground text-xs">{language}</span>
+
 				<CopyButton code={code} />
 			</div>
+
 			<div className="overflow-x-auto font-mono text-xs leading-5 outline-none [--code-px:--spacing(3)] focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-inset">
 				<CodeLines text={code} lines={lines} {...annotations} />
+
 				<OverflowFocus />
 			</div>
 		</div>
@@ -4196,8 +4270,10 @@ export function CodePanel({ files, format, collapse, className }: CodePanelProps
 						</TabsTrigger>
 					))}
 				</TabsList>
+
 				<CopyButton code={copyText} />
 			</div>
+
 			{files.map((tab) => (
 				<TabsContent
 					key={tab.name}
@@ -4215,6 +4291,7 @@ export function CodePanel({ files, format, collapse, className }: CodePanelProps
 					</div>
 				</TabsContent>
 			))}
+
 			{foldable && (
 				<button
 					type="button"
@@ -4329,6 +4406,7 @@ export function CollapsibleTrigger({
 			{...props}
 		>
 			{children}
+
 			{chevron && (
 				<motion.span
 					animate={{ rotate: open ? 180 : 0 }}
@@ -4368,7 +4446,7 @@ export function CollapsibleContent({
 		</motion.div>
 	);
 }
-` }] }, combobox: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "combobox", type: "registry:ui", title: "Combobox", description: "A Select you can type into: the query filters by label and keywords (prefix matches first), arrows move, Enter picks. multiple keeps the list open and shows picks as removable tags. Submits through hidden inputs.", docs: "https://kznlabs.github.io/labsUI/components/combobox", usage: '<Combobox options={channels} value={channel} onValueChange={setChannel} placeholder="Pick a channel…" />', examples: [{ name: "channel-picker.tsx", code: `"use client";
+` }] }, combobox: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "combobox", type: "registry:ui", title: "Combobox", description: "A Select you can type into: the query filters by label and keywords (prefix matches first), arrows move, Enter picks. multiple keeps the list open and shows picks as removable tags. Submits and validates with the form.", docs: "https://kznlabs.github.io/labsUI/components/combobox", usage: '<Combobox options={channels} value={channel} onValueChange={setChannel} placeholder="Pick a channel…" />', examples: [{ name: "channel-picker.tsx", code: `"use client";
 
 import { Hash } from "lucide-react";
 import { useState } from "react";
@@ -4411,7 +4489,7 @@ export function RolePicker() {
       placeholder="Add roles…"
     />
   );
-}` }], api: { entries: [{ kind: "component", name: "Combobox", props: [{ name: "options", type: "ComboboxOption[]", required: true, description: "Choices; filtered as the user types." }, { name: "aria-describedby", type: "string", required: false, description: "Ids of hint or error text; Field fills it in." }, { name: "aria-invalid", type: "boolean", required: false, description: "Error styling; Field sets it from `error`." }, { name: "aria-label", type: "string", required: false, description: "Accessible name when there is no visible label." }, { name: "defaultValue", type: "string | string[]", required: false, description: "Value, or values when `multiple`, at first render (uncontrolled)." }, { name: "disabled", type: "boolean", required: false, description: "Blocks typing and opening." }, { name: "emptyText", type: "ReactNode", required: false, description: "Shown in the list when nothing matches." }, { name: "id", type: "string", required: false, description: "Id of the input; Field fills it in." }, { name: "multiple", type: "boolean", required: false, description: "Picks stay open and show as removable tags; Backspace removes the last one." }, { name: "name", type: "string", required: false, description: "Submits the value(s) through hidden inputs (one per value when multiple)." }, { name: "onValueChange", type: "((value: string) => void) | ((value: string[]) => void)", required: false, description: "Called with the picked value, or every picked value when `multiple`." }, { name: "placeholder", type: "string", required: false, description: "Field text when nothing is picked." }, { name: "required", type: "boolean", required: false, description: "Form submit needs a value." }, { name: "value", type: "string | string[]", required: false, description: "Controlled value, or values when `multiple`; pair with `onValueChange`." }], description: "Select you can type into: the input filters the list, Up and Down move, Enter picks, Esc closes.\nSingle shows the pick in the input; `multiple` shows picks as tags and keeps the list open." }], types: { ComboboxOption: "{ value: string; label: string; icon?: ReactNode; keywords?: string[]; disabled?: boolean; }" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/list.json", "https://kznlabs.github.io/labsUI/r/platform.json", "https://kznlabs.github.io/labsUI/r/tag-input.json", "https://kznlabs.github.io/labsUI/r/use-anchor.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/use-dismiss.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/combobox.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "Combobox", props: [{ name: "options", type: "ComboboxOption[]", required: true, description: "Choices; filtered as the user types." }, { name: "aria-describedby", type: "string", required: false, description: "Ids of hint or error text; Field fills it in." }, { name: "aria-invalid", type: "boolean", required: false, description: "Error styling; Field sets it from `error`." }, { name: "aria-label", type: "string", required: false, description: "Accessible name when there is no visible label." }, { name: "defaultValue", type: "string | string[]", required: false, description: "Value, or values when `multiple`, at first render (uncontrolled)." }, { name: "disabled", type: "boolean", required: false, description: "Blocks typing and opening; the value isn't submitted." }, { name: "emptyText", type: "ReactNode", required: false, description: "Shown in the list when nothing matches." }, { name: "id", type: "string", required: false, description: "Id of the input; Field fills it in." }, { name: "multiple", type: "boolean", required: false, description: "Picks stay open and show as removable tags; Backspace removes the last one." }, { name: "name", type: "string", required: false, description: "Form field name: one entry per picked value." }, { name: "onValueChange", type: "((value: string) => void) | ((value: string[]) => void)", required: false, description: "Called with the picked value, or every picked value when `multiple`." }, { name: "placeholder", type: "string", required: false, description: "Field text when nothing is picked." }, { name: "required", type: "boolean", required: false, description: "Form submit needs a value." }, { name: "value", type: "string | string[]", required: false, description: "Controlled value, or values when `multiple`; pair with `onValueChange`." }], description: "Select you can type into: the input filters the list, Up and Down move, Enter picks, Esc closes.\nSingle shows the pick in the input; `multiple` shows picks as tags and keeps the list open." }], types: { ComboboxOption: "{ value: string; label: string; icon?: ReactNode; keywords?: string[]; disabled?: boolean; }" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/form-value.json", "https://kznlabs.github.io/labsUI/r/list.json", "https://kznlabs.github.io/labsUI/r/platform.json", "https://kznlabs.github.io/labsUI/r/tag-input.json", "https://kznlabs.github.io/labsUI/r/use-anchor.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/use-dismiss.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/combobox.tsx", type: "registry:ui", content: `"use client";
 
 import { Check, ChevronsUpDown } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
@@ -4419,6 +4497,7 @@ import { type KeyboardEvent, type ReactNode, useEffect, useId, useRef, useState
 import { createPortal } from "react-dom";
 import { useFieldControl } from "@/components/ui/field";
 import { Tag, tagFieldClass } from "@/components/ui/tag-input";
+import { FormValue } from "@/lib/form-value";
 import { listKeyTarget, scrollIntoList } from "@/lib/list";
 import { useMounted } from "@/lib/platform";
 import { useAnchor } from "@/lib/use-anchor";
@@ -4426,7 +4505,7 @@ import { useControllableState } from "@/lib/use-controllable-state";
 import { useDismiss } from "@/lib/use-dismiss";
 import { cn, material, spring } from "@/lib/utils";
 
-type ComboboxOption = {
+export type ComboboxOption = {
 	/** Submitted and matched value. */
 	value: string;
 	/** Text shown and searched. */
@@ -4446,11 +4525,11 @@ type BaseProps = {
 	placeholder?: string;
 	/** Shown in the list when nothing matches. */
 	emptyText?: ReactNode;
-	/** Submits the value(s) through hidden inputs (one per value when multiple). */
+	/** Form field name: one entry per picked value. */
 	name?: string;
 	/** Id of the input; Field fills it in. */
 	id?: string;
-	/** Blocks typing and opening. */
+	/** Blocks typing and opening; the value isn't submitted. */
 	disabled?: boolean;
 	/** Form submit needs a value. */
 	required?: boolean;
@@ -4522,6 +4601,7 @@ export function Combobox(allProps: ComboboxProps) {
 	const box = useRef<HTMLDivElement>(null);
 	const input = useRef<HTMLInputElement>(null);
 	const list = useRef<HTMLDivElement>(null);
+	const [invalid, setInvalid] = useState(false);
 	// Public shape (string or string[]), "" = nothing picked.
 	const [raw, setRaw] = useControllableState<string | string[] | undefined>(
 		valueProp,
@@ -4635,11 +4715,13 @@ export function Combobox(allProps: ComboboxProps) {
 						))}
 					</AnimatePresence>
 				)}
+
 				{!multiple && !open && selected[0]?.icon && (
 					<span className="mr-2 flex shrink-0 text-muted-foreground [&_svg]:size-4">
 						{selected[0].icon}
 					</span>
 				)}
+
 				<input
 					ref={input}
 					id={id}
@@ -4653,6 +4735,7 @@ export function Combobox(allProps: ComboboxProps) {
 					aria-required={required}
 					disabled={disabled}
 					{...aria}
+					aria-invalid={aria["aria-invalid"] || (invalid && !values.length) || undefined}
 					value={text}
 					placeholder={hint}
 					onChange={(event) => {
@@ -4665,15 +4748,26 @@ export function Combobox(allProps: ComboboxProps) {
 						multiple && "px-1",
 					)}
 				/>
+
 				<ChevronsUpDown
 					className="ml-1 size-4 shrink-0 self-center text-muted-foreground"
 					aria-hidden="true"
 				/>
 			</div>
+
 			{name &&
 				(multiple ? values : values.slice(0, 1)).map((picked) => (
-					<input key={picked} type="hidden" name={name} value={picked} />
+					<input key={picked} type="hidden" name={name} value={picked} disabled={disabled} />
 				))}
+
+			<FormValue
+				value={values.join(",")}
+				required={required}
+				disabled={disabled}
+				anchor={input}
+				onInvalid={() => setInvalid(true)}
+			/>
+
 			{mounted &&
 				createPortal(
 					<AnimatePresence>
@@ -4729,7 +4823,9 @@ export function Combobox(allProps: ComboboxProps) {
 											{values.includes(option.value) && (
 												<Check className="!text-current absolute left-2" aria-hidden="true" />
 											)}
+
 											{option.icon}
+
 											<span className="truncate">{option.label}</span>
 										</div>
 									))
@@ -5001,6 +5097,7 @@ export function CommandGroup({
 					{heading}
 				</div>
 			)}
+
 			{children}
 		</div>
 	);
@@ -5114,6 +5211,7 @@ export function CommandDialog({
 				)}
 			>
 				<DialogTitle className="sr-only">{title}</DialogTitle>
+
 				<Command close={() => setOpen(false)} className="rounded-none border-0 bg-transparent">
 					{children}
 				</Command>
@@ -5176,7 +5274,7 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 
-type ConfirmOptions = {
+export type ConfirmOptions = {
 	/** Question in the dialog heading. */
 	title: ReactNode;
 	/** Consequences, under the title. */
@@ -5240,10 +5338,13 @@ export function Confirmer() {
 			<DialogContent alert className="max-w-md">
 				<DialogHeader>
 					<DialogTitle>{title}</DialogTitle>
+
 					{description && <DialogDescription>{description}</DialogDescription>}
 				</DialogHeader>
+
 				<DialogFooter>
 					<DialogClose>{cancelLabel}</DialogClose>
+
 					<Button variant={destructive ? "destructive" : "default"} onClick={() => settle(true)}>
 						{options.confirmLabel ?? (destructive ? "Delete" : "Continue")}
 					</Button>
@@ -5496,9 +5597,11 @@ export function CountTo({
 	return (
 		<span ref={ref} className={className}>
 			<span className="sr-only">{target}</span>
+
 			<span ref={out} aria-hidden="true" data-count-to-animated="">
 				{text(from)}
 			</span>
+
 			<span aria-hidden="true" data-count-to-fallback="" className="hidden">
 				{target}
 			</span>
@@ -5607,6 +5710,7 @@ export function CustomCursor() {
 						}}
 						transition={spring}
 					/>
+
 					<motion.div
 						className="absolute top-0 left-0 size-1.5 rounded-full bg-foreground"
 						style={{ x, y, translateX: "-50%", translateY: "-50%" }}
@@ -5669,7 +5773,7 @@ export function MembersDataTable({
       )}
     />
   );
-}` }], api: { entries: [{ kind: "component", name: "DataTable", props: [{ name: "columns", type: "DataTableColumn<T>[]", required: true, description: "Column definitions in display order." }, { name: "data", type: "T[]", required: true, description: "Rows; search, sort and paging happen on the client." }, { name: "getRowId", type: "(row: T) => string", required: true, description: "Stable id per row; selection is kept by it across pages." }, { name: "label", type: "string", required: true, description: `Names the table, the search box and each row's controls: "Members", "Select Jane".` }, { name: "rowLabel", type: "(row: T) => string", required: true, description: "Row name for screen readers, e.g. on its checkbox and ⋯ menu." }, { name: "defaultSort", type: "Sort", required: false, description: "Sort at first render." }, { name: "onSelectionChange", type: "(ids: string[]) => void", required: false, description: "Called with every selected row id." }, { name: "pageSize", type: "number", required: false, default: "10", description: "Rows per page." }, { name: "rowActions", type: "(row: T) => ReactNode", required: false, description: "Items for the row's ⋯ menu (DropdownMenuItem and friends)." }, { name: "searchable", type: "boolean", required: false, default: "true", description: "Show a search field that filters every column." }, { name: "searchPlaceholder", type: "string", required: false, default: '"Search…"', description: "Search field placeholder." }, { name: "selectable", type: "boolean", required: false, default: "false", description: "Checkbox column; selection survives search and paging." }, { name: "selection", type: "string[]", required: false, description: "Controlled selected row ids; pair with `onSelectionChange`." }, { name: "striped", type: "boolean", required: false, default: "false", description: "Alternate row backgrounds." }, { name: "toolbar", type: "(selected: T[]) => ReactNode", required: false, description: "Right side of the toolbar; receives the selected rows (bulk actions)." }], description: "Table with search, sortable columns, row selection, row actions and pagination, all on the\nclient. Columns are data: `{ id, header, accessor, cell?, sortable? }`. For server-driven\ndata, compose Table + Pagination yourself." }], types: { Sort: '{ id: string; dir: "ascending" | "descending" }', DataTableColumn: "{ id: string; header: ReactNode; accessor?: (row: T) => string | number; cell?: (row: T) => ReactNode; sortable?: boolean; className?: string; }" } }, dependencies: ["lucide-react@1.63.0"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/button.json", "https://kznlabs.github.io/labsUI/r/checkbox.json", "https://kznlabs.github.io/labsUI/r/dropdown-menu.json", "https://kznlabs.github.io/labsUI/r/empty.json", "https://kznlabs.github.io/labsUI/r/pagination.json", "https://kznlabs.github.io/labsUI/r/search-input.json", "https://kznlabs.github.io/labsUI/r/table.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/data-table.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "DataTable", props: [{ name: "columns", type: "DataTableColumn<T>[]", required: true, description: "Column definitions in display order." }, { name: "data", type: "T[]", required: true, description: "Rows; search, sort and paging happen on the client." }, { name: "getRowId", type: "(row: T) => string", required: true, description: "Stable id per row; selection is kept by it across pages." }, { name: "label", type: "string", required: true, description: `Names the table, the search box and each row's controls: "Members", "Select Jane".` }, { name: "rowLabel", type: "(row: T) => string", required: true, description: "Row name for screen readers, e.g. on its checkbox and ⋯ menu." }, { name: "defaultSort", type: "DataTableSort", required: false, description: "Sort at first render." }, { name: "onSelectionChange", type: "(ids: string[]) => void", required: false, description: "Called with every selected row id." }, { name: "pageSize", type: "number", required: false, default: "10", description: "Rows per page." }, { name: "rowActions", type: "(row: T) => ReactNode", required: false, description: "Items for the row's ⋯ menu (DropdownMenuItem and friends)." }, { name: "searchable", type: "boolean", required: false, default: "true", description: "Show a search field that filters every column." }, { name: "searchPlaceholder", type: "string", required: false, default: '"Search…"', description: "Search field placeholder." }, { name: "selectable", type: "boolean", required: false, default: "false", description: "Checkbox column; selection survives search and paging." }, { name: "selection", type: "string[]", required: false, description: "Controlled selected row ids; pair with `onSelectionChange`." }, { name: "striped", type: "boolean", required: false, default: "false", description: "Alternate row backgrounds." }, { name: "toolbar", type: "(selected: T[]) => ReactNode", required: false, description: "Right side of the toolbar; receives the selected rows (bulk actions)." }], description: "Table with search, sortable columns, row selection, row actions and pagination, all on the\nclient. Columns are data: `{ id, header, accessor, cell?, sortable? }`. For server-driven\ndata, compose Table + Pagination yourself." }], types: { DataTableSort: '{ id: string; dir: "ascending" | "descending" }', DataTableColumn: "{ id: string; header: ReactNode; accessor?: (row: T) => string | number; cell?: (row: T) => ReactNode; sortable?: boolean; className?: string; }" } }, dependencies: ["lucide-react@1.63.0"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/button.json", "https://kznlabs.github.io/labsUI/r/checkbox.json", "https://kznlabs.github.io/labsUI/r/dropdown-menu.json", "https://kznlabs.github.io/labsUI/r/empty.json", "https://kznlabs.github.io/labsUI/r/pagination.json", "https://kznlabs.github.io/labsUI/r/search-input.json", "https://kznlabs.github.io/labsUI/r/table.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/data-table.tsx", type: "registry:ui", content: `"use client";
 
 import { MoreHorizontal, SearchX } from "lucide-react";
 import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
@@ -5694,7 +5798,7 @@ import {
 import { useControllableState } from "@/lib/use-controllable-state";
 import { cn } from "@/lib/utils";
 
-type Sort = { id: string; dir: "ascending" | "descending" };
+export type DataTableSort = { id: string; dir: "ascending" | "descending" };
 
 export type DataTableColumn<T> = {
 	/** Unique key; also used by \`defaultSort\`. */
@@ -5723,7 +5827,7 @@ type DataTableProps<T> = {
 	/** Rows per page. */
 	pageSize?: number;
 	/** Sort at first render. */
-	defaultSort?: Sort;
+	defaultSort?: DataTableSort;
 	/** Show a search field that filters every column. */
 	searchable?: boolean;
 	/** Search field placeholder. */
@@ -5852,6 +5956,7 @@ export function DataTable<T>({
 							className="w-full sm:max-w-64"
 						/>
 					)}
+
 					{toolbar && (
 						<div className="ml-auto flex items-center gap-2">
 							{toolbar(data.filter((row) => selected.includes(getRowId(row))))}
@@ -5881,6 +5986,7 @@ export function DataTable<T>({
 									/>
 								</TableHead>
 							)}
+
 							{columns.map((column) => (
 								<TableHead
 									key={column.id}
@@ -5904,6 +6010,7 @@ export function DataTable<T>({
 									{column.header}
 								</TableHead>
 							))}
+
 							{rowActions && (
 								<TableHead className="w-px">
 									<span className="sr-only">Actions</span>
@@ -5911,6 +6018,7 @@ export function DataTable<T>({
 							)}
 						</TableRow>
 					</TableHeader>
+
 					<TableBody>
 						{rows.length === 0 ? (
 							<TableRow className="hover:bg-transparent">
@@ -5946,11 +6054,13 @@ export function DataTable<T>({
 												/>
 											</TableCell>
 										)}
+
 										{columns.map((column) => (
 											<TableCell key={column.id} className={column.className}>
 												{column.cell ? column.cell(row) : column.accessor?.(row)}
 											</TableCell>
 										))}
+
 										{rowActions && (
 											<TableCell className="py-1 pr-2">
 												<DropdownMenu>
@@ -5962,6 +6072,7 @@ export function DataTable<T>({
 													>
 														<MoreHorizontal />
 													</DropdownMenuTrigger>
+
 													<DropdownMenuContent align="end">{rowActions(row)}</DropdownMenuContent>
 												</DropdownMenu>
 											</TableCell>
@@ -5978,10 +6089,12 @@ export function DataTable<T>({
 			<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
 				<p className="text-muted-foreground text-xs tabular-nums" aria-live="polite">
 					{selectable && selected.length > 0 && \`\${selected.length} selected · \`}
+
 					{sorted.length === 0
 						? "0 results"
 						: \`\${from}–\${from + rows.length - 1} of \${sorted.length}\`}
 				</p>
+
 				{pages > 1 && (
 					<Pagination
 						page={page}
@@ -5994,7 +6107,7 @@ export function DataTable<T>({
 		</div>
 	);
 }
-` }] }, "date-picker": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "date-picker", type: "registry:ui", title: "Date Picker", description: "Field-styled button that opens a Calendar in a Popover, focused on the picked day. Single or range, presets such as Last 7 days, closes once the pick is complete, and submits ISO dates through a hidden input. Works inside Field.", docs: "https://kznlabs.github.io/labsUI/components/date-picker", usage: '<Field label="Report period"><DatePicker mode="range" name="period" presets={[{ label: "Last 7 days", value: { from, to } }]} /></Field>', examples: [{ name: "report-filters.tsx", code: `"use client";
+` }] }, "date-picker": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "date-picker", type: "registry:ui", title: "Date Picker", description: "Field-styled button that opens a Calendar in a Popover, focused on the picked day. Single or range, presets such as Last 7 days, closes once the pick is complete, and submits ISO dates with the form. Works inside Field.", docs: "https://kznlabs.github.io/labsUI/components/date-picker", usage: '<Field label="Report period"><DatePicker mode="range" name="period" presets={[{ label: "Last 7 days", value: { from, to } }]} /></Field>', examples: [{ name: "report-filters.tsx", code: `"use client";
 
 import { DatePicker } from "@/components/ui/date-picker";
 import { Field } from "@/components/ui/field";
@@ -6017,19 +6130,20 @@ export function ReportFilters() {
       />
     </Field>
   );
-}` }], api: { entries: [{ kind: "component", name: "DatePicker", props: [{ name: "aria-describedby", type: "string", required: false, description: "Ids of hint or error text; Field fills it in." }, { name: "aria-invalid", type: "boolean", required: false, description: "Error styling; Field sets it from `error`." }, { name: "aria-label", type: "string", required: false, description: "Accessible name when there is no visible label." }, { name: "defaultValue", type: "Date | DateRange | null", required: false, description: "Day or range at first render (uncontrolled)." }, { name: "disabled", type: "boolean", required: false, description: "Blocks opening." }, { name: "id", type: "string", required: false, description: "Pair with <Label htmlFor>, or let <Field> fill it in." }, { name: "isDisabled", type: "(date: Date) => boolean", required: false, description: "Extra rule, e.g. weekends off. Client-only (a function)." }, { name: "locale", type: "string", required: false, description: "BCP 47 locale for the button text and the calendar." }, { name: "max", type: "Date", required: false, description: "Latest selectable day." }, { name: "min", type: "Date", required: false, description: "Earliest selectable day." }, { name: "mode", type: '"single" | "range"', required: false, description: '"single": pick one day. "range": pick a start, then an end.' }, { name: "name", type: "string", required: false, description: "Submits ISO through a hidden input: `2026-10-21`, or `2026-10-03/2026-10-09` for a range." }, { name: "onValueChange", type: "((date: Date) => void) | ((range: DateRange) => void)", required: false, description: "Called with the picked day, or with the range once both ends are set." }, { name: "placeholder", type: "string", required: false, description: "Button text when nothing is picked." }, { name: "presets", type: "Preset<Date>[] | Preset<DateRange>[]", required: false, description: "Shortcuts beside the grid, e.g. Today, or Last 7 days for a range. Readers reach for these first." }, { name: "required", type: "boolean", required: false, description: "Form submit needs a date." }, { name: "value", type: "Date | DateRange | null", required: false, description: "Controlled day, or `{ from, to }` in range mode; null = nothing picked." }, { name: "weekStartsOn", type: "0 | 1 | 2 | 3 | 4 | 5 | 6", required: false, description: "0 is Sunday, 6 is Saturday. Default 1 (Monday, ISO)." }], description: `Field-styled button that opens a Calendar in a Popover, focused on the picked day. A single
-date closes on pick; a range closes once both ends are set. Optional presets, form-ready.` }], types: { Preset: "{ label: string; value: Value }" } }, dependencies: ["lucide-react@1.63.0"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/calendar.json", "https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/input.json", "https://kznlabs.github.io/labsUI/r/popover.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/date-picker.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "DatePicker", props: [{ name: "aria-describedby", type: "string", required: false, description: "Ids of hint or error text; Field fills it in." }, { name: "aria-invalid", type: "boolean", required: false, description: "Error styling; Field sets it from `error`." }, { name: "aria-label", type: "string", required: false, description: "Accessible name when there is no visible label." }, { name: "defaultValue", type: "Date | DateRange | null", required: false, description: "Day or range at first render (uncontrolled)." }, { name: "disabled", type: "boolean", required: false, description: "Blocks opening; the value isn't submitted." }, { name: "id", type: "string", required: false, description: "Pair with <Label htmlFor>, or let <Field> fill it in." }, { name: "isDisabled", type: "(date: Date) => boolean", required: false, description: "Extra rule, e.g. weekends off. Client-only (a function)." }, { name: "locale", type: "string", required: false, description: "BCP 47 locale for the button text and the calendar." }, { name: "max", type: "Date", required: false, description: "Latest selectable day." }, { name: "min", type: "Date", required: false, description: "Earliest selectable day." }, { name: "mode", type: '"single" | "range"', required: false, description: '"single": pick one day. "range": pick a start, then an end.' }, { name: "name", type: "string", required: false, description: "Submits ISO: `2026-10-21`, or `2026-10-03/2026-10-09` for a range." }, { name: "onValueChange", type: "((date: Date) => void) | ((range: DateRange) => void)", required: false, description: "Called with the picked day, or with the range once both ends are set." }, { name: "placeholder", type: "string", required: false, description: "Button text when nothing is picked." }, { name: "presets", type: "DatePickerPreset<Date>[] | DatePickerPreset<DateRange>[]", required: false, description: "Shortcuts beside the grid, e.g. Today, or Last 7 days for a range. Readers reach for these first." }, { name: "required", type: "boolean", required: false, description: "Form submit needs a date." }, { name: "value", type: "Date | DateRange | null", required: false, description: "Controlled day, or `{ from, to }` in range mode; null = nothing picked." }, { name: "weekStartsOn", type: "0 | 1 | 2 | 3 | 4 | 5 | 6", required: false, description: "0 is Sunday, 6 is Saturday. Default 1 (Monday, ISO)." }], description: `Field-styled button that opens a Calendar in a Popover, focused on the picked day. A single
+date closes on pick; a range closes once both ends are set. Optional presets, form-ready.` }], types: { DatePickerPreset: "{ label: string; value: Value }" } }, dependencies: ["lucide-react@1.63.0"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/calendar.json", "https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/form-value.json", "https://kznlabs.github.io/labsUI/r/input.json", "https://kznlabs.github.io/labsUI/r/popover.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/date-picker.tsx", type: "registry:ui", content: `"use client";
 
 import { CalendarDays } from "lucide-react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Calendar, type DateRange, key } from "@/components/ui/calendar";
 import { useFieldControl } from "@/components/ui/field";
 import { fieldClass } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { FormValue } from "@/lib/form-value";
 import { useControllableState } from "@/lib/use-controllable-state";
 import { cn } from "@/lib/utils";
 
-type Preset<Value> = { label: string; value: Value };
+export type DatePickerPreset<Value> = { label: string; value: Value };
 
 type Base = {
 	/** Button text when nothing is picked. */
@@ -6044,11 +6158,11 @@ type Base = {
 	weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 	/** BCP 47 locale for the button text and the calendar. */
 	locale?: string;
-	/** Submits ISO through a hidden input: \`2026-10-21\`, or \`2026-10-03/2026-10-09\` for a range. */
+	/** Submits ISO: \`2026-10-21\`, or \`2026-10-03/2026-10-09\` for a range. */
 	name?: string;
 	/** Pair with <Label htmlFor>, or let <Field> fill it in. */
 	id?: string;
-	/** Blocks opening. */
+	/** Blocks opening; the value isn't submitted. */
 	disabled?: boolean;
 	/** Form submit needs a date. */
 	required?: boolean;
@@ -6071,7 +6185,7 @@ type SingleProps = Base & {
 	/** Called with the picked day, or with the range once both ends are set. */
 	onValueChange?: (date: Date) => void;
 	/** Shortcuts beside the grid, e.g. Today, or Last 7 days for a range. Readers reach for these first. */
-	presets?: Preset<Date>[];
+	presets?: DatePickerPreset<Date>[];
 };
 
 type RangeProps = Base & {
@@ -6079,7 +6193,7 @@ type RangeProps = Base & {
 	value?: DateRange | null;
 	defaultValue?: DateRange | null;
 	onValueChange?: (range: DateRange) => void;
-	presets?: Preset<DateRange>[];
+	presets?: DatePickerPreset<DateRange>[];
 };
 
 type DatePickerProps = SingleProps | RangeProps;
@@ -6102,9 +6216,12 @@ export function DatePicker(allProps: DatePickerProps) {
 		weekStartsOn,
 		locale = "en-US",
 		name,
+		required,
 		className,
 		...trigger
 	} = useFieldControl(allProps);
+	const anchor = useRef<HTMLButtonElement>(null);
+	const [invalid, setInvalid] = useState(false);
 	const range = mode === "range";
 	const [open, setOpen] = useState(false);
 	const [value, setValue] = useControllableState<Date | DateRange | null>(
@@ -6143,6 +6260,7 @@ export function DatePicker(allProps: DatePickerProps) {
 		<>
 			<Popover open={open} onOpenChange={setOpen}>
 				<PopoverTrigger
+					ref={anchor}
 					variant="outline"
 					className={cn(
 						fieldClass,
@@ -6151,10 +6269,13 @@ export function DatePicker(allProps: DatePickerProps) {
 						className,
 					)}
 					{...trigger}
+					aria-invalid={trigger["aria-invalid"] || (invalid && !iso) || undefined}
 				>
 					<CalendarDays />
+
 					<span className="truncate">{label ?? placeholder}</span>
 				</PopoverTrigger>
+
 				<PopoverContent align="start" className="flex w-auto flex-col gap-3 p-3 sm:flex-row">
 					{presets && presets.length > 0 && (
 						// No room beside the calendar on phones.
@@ -6178,6 +6299,7 @@ export function DatePicker(allProps: DatePickerProps) {
 							))}
 						</ul>
 					)}
+
 					{range ? (
 						<Calendar key={shown} mode="range" {...shared} value={span} onValueChange={commit} />
 					) : (
@@ -6190,7 +6312,15 @@ export function DatePicker(allProps: DatePickerProps) {
 					)}
 				</PopoverContent>
 			</Popover>
-			{name && <input type="hidden" name={name} value={iso} />}
+
+			<FormValue
+				name={name}
+				value={iso}
+				required={required}
+				disabled={trigger.disabled}
+				anchor={anchor}
+				onInvalid={() => setInvalid(true)}
+			/>
 		</>
 	);
 }
@@ -6219,8 +6349,8 @@ export function EditProfile() {
       </DialogContent>
     </Dialog>
   );
-}` }], api: { entries: [{ kind: "function", name: "useDialog", signature: "useDialog() => Ctx" }, { kind: "component", name: "Dialog", props: [{ name: "children", type: "ReactNode", required: true, description: "`DialogTrigger` and `DialogContent`." }, { name: "defaultOpen", type: "boolean", required: false, default: "false", description: "Open at first render (uncontrolled)." }, { name: "onOpenChange", type: "(open: boolean) => void", required: false, description: "Called on the trigger, Esc, backdrop click or `DialogClose`." }, { name: "open", type: "boolean", required: false, description: "Controlled state; pair with `onOpenChange`." }], description: "State root. Controlled (`open` + `onOpenChange`) or uncontrolled." }, { kind: "component", name: "DialogTrigger", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Disables the button and shows a spinner before the label." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button" }, { kind: "component", name: "DialogClose", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Disables the button and shows a spinner before the label." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, default: '"outline"', description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button" }, { kind: "function", name: "useModal", signature: "useModal() => RefObject<HTMLDivElement | null>", description: `Modal behavior shared by Dialog and Drawer: focus first field, trap Tab, restore focus,
-lock page scroll, close on Esc (topmost modal only). Attach the returned ref to the panel.` }, { kind: "component", name: "DialogContent", props: [{ name: "children", type: "ReactNode", required: true, description: "Header, body and footer." }, { name: "alert", type: "boolean", required: false, default: "false", description: 'Confirm-a-destructive-action mode: role="alertdialog", backdrop click does not close.' }, { name: "showClose", type: "boolean", required: false, default: "!alert", description: "Close button in the corner. Off by default for `alert` dialogs." }], description: "Portal + blurred backdrop + spring scale-in. Esc/backdrop close, focus trap, scroll lock." }, { kind: "component", name: "DialogHeader", props: [], extends: "<div>" }, { kind: "component", name: "DialogFooter", props: [], extends: "<div>" }, { kind: "component", name: "DialogTitle", props: [], extends: "<h2>" }, { kind: "component", name: "DialogDescription", props: [], extends: "<p>" }], types: { Ctx: "{ open: boolean; setOpen: (open: boolean) => void; titleId: string; descId: string }" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/button.json", "https://kznlabs.github.io/labsUI/r/platform.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/dialog.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "function", name: "useDialog", signature: "useDialog() => DialogState" }, { kind: "component", name: "Dialog", props: [{ name: "children", type: "ReactNode", required: true, description: "`DialogTrigger` and `DialogContent`." }, { name: "defaultOpen", type: "boolean", required: false, default: "false", description: "Open at first render (uncontrolled)." }, { name: "onOpenChange", type: "(open: boolean) => void", required: false, description: "Called on the trigger, Esc, backdrop click or `DialogClose`." }, { name: "open", type: "boolean", required: false, description: "Controlled state; pair with `onOpenChange`." }], description: "State root. Controlled (`open` + `onOpenChange`) or uncontrolled." }, { kind: "component", name: "DialogTrigger", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Shows a spinner before the label and ignores clicks and Enter, so a form can't submit twice. Stays focusable." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`. Both ignore clicks and Enter, so a form can't submit twice." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button" }, { kind: "component", name: "DialogClose", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Shows a spinner before the label and ignores clicks and Enter, so a form can't submit twice. Stays focusable." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`. Both ignore clicks and Enter, so a form can't submit twice." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, default: '"outline"', description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button" }, { kind: "function", name: "useModal", signature: "useModal() => RefObject<HTMLDivElement | null>", description: `Modal behavior shared by Dialog and Drawer: focus first field, trap Tab, restore focus,
+lock page scroll, close on Esc (topmost modal only). Attach the returned ref to the panel.` }, { kind: "component", name: "DialogContent", props: [{ name: "children", type: "ReactNode", required: true, description: "Header, body and footer." }, { name: "alert", type: "boolean", required: false, default: "false", description: 'Confirm-a-destructive-action mode: role="alertdialog", backdrop click does not close.' }, { name: "showClose", type: "boolean", required: false, default: "!alert", description: "Close button in the corner. Off by default for `alert` dialogs." }], description: "Portal + blurred backdrop + spring scale-in. Esc/backdrop close, focus trap, scroll lock." }, { kind: "component", name: "DialogHeader", props: [], extends: "<div>" }, { kind: "component", name: "DialogFooter", props: [], extends: "<div>" }, { kind: "component", name: "DialogTitle", props: [], extends: "<h2>" }, { kind: "component", name: "DialogDescription", props: [], extends: "<p>" }], types: { DialogState: "{ open: boolean; setOpen: (open: boolean) => void; titleId: string; descId: string; }" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/button.json", "https://kznlabs.github.io/labsUI/r/platform.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/dialog.tsx", type: "registry:ui", content: `"use client";
 
 import { X } from "lucide-react";
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
@@ -6240,9 +6370,14 @@ import { useControllableState } from "@/lib/use-controllable-state";
 import { cn, spring } from "@/lib/utils";
 import { Button } from "./button";
 
-type Ctx = { open: boolean; setOpen: (open: boolean) => void; titleId: string; descId: string };
+export type DialogState = {
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	titleId: string;
+	descId: string;
+};
 
-const DialogContext = createContext<Ctx | null>(null);
+const DialogContext = createContext<DialogState | null>(null);
 
 export function useDialog() {
 	const ctx = use(DialogContext);
@@ -6414,6 +6549,7 @@ export function DialogContent({
 						transition={spring}
 						onClick={alert ? undefined : () => setOpen(false)}
 					/>
+
 					<motion.div
 						ref={ref}
 						role={alert ? "alertdialog" : "dialog"}
@@ -6431,6 +6567,7 @@ export function DialogContent({
 						)}
 					>
 						{children}
+
 						{showClose && (
 							<button
 								type="button"
@@ -6438,6 +6575,7 @@ export function DialogContent({
 								className="absolute top-4 right-4 cursor-pointer rounded-md p-1 text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
 							>
 								<X className="size-4" aria-hidden="true" />
+
 								<span className="sr-only">Close</span>
 							</button>
 						)}
@@ -6519,8 +6657,8 @@ export function CartDrawer({ items }: { items: string[] }) {
       </DrawerContent>
     </Drawer>
   );
-}` }], api: { entries: [{ kind: "component", name: "Drawer", props: [{ name: "children", type: "ReactNode", required: true, description: "`DialogTrigger` and `DialogContent`." }, { name: "defaultOpen", type: "boolean", required: false, default: "false", description: "Open at first render (uncontrolled)." }, { name: "onOpenChange", type: "(open: boolean) => void", required: false, description: "Called on the trigger, Esc, backdrop click or `DialogClose`." }, { name: "open", type: "boolean", required: false, description: "Controlled state; pair with `onOpenChange`." }] }, { kind: "component", name: "DrawerTrigger", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Disables the button and shows a spinner before the label." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button" }, { kind: "component", name: "DrawerClose", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Disables the button and shows a spinner before the label." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, default: '"outline"', description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button" }, { kind: "component", name: "DrawerTitle", props: [], extends: "<h2>" }, { kind: "component", name: "DrawerDescription", props: [], extends: "<p>" }, { kind: "component", name: "DrawerContent", props: [{ name: "children", type: "ReactNode", required: true, description: "Header, body and footer." }, { name: "showClose", type: "boolean", required: false, default: 'side === "left" || side === "right"', description: "Close button in the corner. On by default for side drawers." }, { name: "side", type: "Side", required: false, default: '"right"', description: "Edge it slides in from." }], description: `Panel that slides in from an edge on a spring. Swipe toward the edge to dismiss: side drawers
-drag from anywhere, top/bottom drawers from the handle or header so their content can scroll.` }, { kind: "component", name: "DrawerHeader", props: [], extends: "<div>", description: "Also a drag handle on top/bottom drawers." }, { kind: "component", name: "DrawerBody", props: [], extends: "<div>", description: "Scrolls when content is taller than the drawer." }, { kind: "component", name: "DrawerFooter", props: [], extends: "<div>" }], types: { Side: '"left" | "right" | "top" | "bottom"' } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/dialog.json", "https://kznlabs.github.io/labsUI/r/platform.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/drawer.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "Drawer", props: [{ name: "children", type: "ReactNode", required: true, description: "`DialogTrigger` and `DialogContent`." }, { name: "defaultOpen", type: "boolean", required: false, default: "false", description: "Open at first render (uncontrolled)." }, { name: "onOpenChange", type: "(open: boolean) => void", required: false, description: "Called on the trigger, Esc, backdrop click or `DialogClose`." }, { name: "open", type: "boolean", required: false, description: "Controlled state; pair with `onOpenChange`." }] }, { kind: "component", name: "DrawerTrigger", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Shows a spinner before the label and ignores clicks and Enter, so a form can't submit twice. Stays focusable." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`. Both ignore clicks and Enter, so a form can't submit twice." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button" }, { kind: "component", name: "DrawerClose", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Shows a spinner before the label and ignores clicks and Enter, so a form can't submit twice. Stays focusable." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`. Both ignore clicks and Enter, so a form can't submit twice." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, default: '"outline"', description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button" }, { kind: "component", name: "DrawerTitle", props: [], extends: "<h2>" }, { kind: "component", name: "DrawerDescription", props: [], extends: "<p>" }, { kind: "component", name: "DrawerContent", props: [{ name: "children", type: "ReactNode", required: true, description: "Header, body and footer." }, { name: "showClose", type: "boolean", required: false, default: 'side === "left" || side === "right"', description: "Close button in the corner. On by default for side drawers." }, { name: "side", type: "DrawerSide", required: false, default: '"right"', description: "Edge it slides in from." }], description: `Panel that slides in from an edge on a spring. Swipe toward the edge to dismiss: side drawers
+drag from anywhere, top/bottom drawers from the handle or header so their content can scroll.` }, { kind: "component", name: "DrawerHeader", props: [], extends: "<div>", description: "Also a drag handle on top/bottom drawers." }, { kind: "component", name: "DrawerBody", props: [], extends: "<div>", description: "Scrolls when content is taller than the drawer." }, { kind: "component", name: "DrawerFooter", props: [], extends: "<div>" }], types: { DrawerSide: '"left" | "right" | "top" | "bottom"' } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/dialog.json", "https://kznlabs.github.io/labsUI/r/platform.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/drawer.tsx", type: "registry:ui", content: `"use client";
 
 import { X } from "lucide-react";
 import { AnimatePresence, motion, type PanInfo, useDragControls, useIsPresent } from "motion/react";
@@ -6546,9 +6684,9 @@ export const DrawerClose = DialogClose;
 export const DrawerTitle = DialogTitle;
 export const DrawerDescription = DialogDescription;
 
-type Side = "left" | "right" | "top" | "bottom";
+export type DrawerSide = "left" | "right" | "top" | "bottom";
 
-const offscreen: Record<Side, { x?: string; y?: string }> = {
+const offscreen: Record<DrawerSide, { x?: string; y?: string }> = {
 	left: { x: "-100%" },
 	right: { x: "100%" },
 	top: { y: "-100%" },
@@ -6557,7 +6695,7 @@ const offscreen: Record<Side, { x?: string; y?: string }> = {
 
 // The \`after:\` bleed paints past the screen edge, so overshoot or dragging inward never shows a
 // gap.
-const placement: Record<Side, string> = {
+const placement: Record<DrawerSide, string> = {
 	left: "inset-y-0 left-0 h-full w-[min(20rem,85vw)] border-r after:right-full after:inset-y-0 after:w-[50vw]",
 	right:
 		"inset-y-0 right-0 h-full w-[min(24rem,90vw)] border-l after:left-full after:inset-y-0 after:w-[50vw]",
@@ -6581,7 +6719,7 @@ export function DrawerContent({
 	children,
 }: {
 	/** Edge it slides in from. */
-	side?: Side;
+	side?: DrawerSide;
 	/** Close button in the corner. On by default for side drawers. */
 	showClose?: boolean;
 	className?: string;
@@ -6630,6 +6768,7 @@ export function DrawerContent({
 						transition={spring}
 						onClick={() => setOpen(false)}
 					/>
+
 					<motion.div
 						ref={ref}
 						role="dialog"
@@ -6663,8 +6802,11 @@ export function DrawerContent({
 						)}
 					>
 						{side === "bottom" && <Handle />}
+
 						{children}
+
 						{side === "top" && <Handle />}
+
 						{showClose && (
 							<button
 								type="button"
@@ -6673,6 +6815,7 @@ export function DrawerContent({
 								className="absolute top-4 right-4 cursor-pointer rounded-md p-1 text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
 							>
 								<X className="size-4" aria-hidden="true" />
+
 								<span className="sr-only">Close</span>
 							</button>
 						)}
@@ -6773,7 +6916,7 @@ export function ClipActions({ onDelete }: { onDelete: () => void }) {
       </DropdownMenuContent>
     </DropdownMenu>
   );
-}` }], api: { entries: [{ kind: "component", name: "DropdownMenu", props: [{ name: "children", type: "ReactNode", required: true, description: "Trigger and content." }, { name: "defaultOpen", type: "boolean", required: false, default: "false", description: "Open at first render (uncontrolled)." }, { name: "onOpenChange", type: "(open: boolean) => void", required: false, description: "Called on the trigger, Esc, outside click or a selection." }, { name: "open", type: "boolean", required: false, description: "Controlled state; pair with `onOpenChange`." }], description: "Action menu anchored to a button. Controlled (`open` + `onOpenChange`) or uncontrolled." }, { kind: "component", name: "DropdownMenuTrigger", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Disables the button and shows a spinner before the label." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button", description: "A Button. Keyboard: Enter, Space or Down opens on the first item, Up on the last." }, { kind: "component", name: "DropdownMenuContent", props: [{ name: "children", type: "ReactNode", required: true, description: "Items, labels, groups and separators." }, { name: "align", type: '"start" | "end"', required: false, default: '"start"', description: "Edge of the trigger the menu lines up with." }] }, { kind: "component", name: "DropdownMenuItem", props: [{ name: "children", type: "ReactNode", required: true, description: "Label, optionally with a leading icon." }, { name: "disabled", type: "boolean", required: false, description: "Shown but not selectable." }, { name: "onSelect", type: "() => void", required: false, description: "Called on click or Enter; the menu then closes." }, { name: "shortcut", type: "string", required: false, description: 'Right-aligned hint, e.g. "⌘S".' }, { name: "variant", type: '"default" | "destructive"', required: false, default: '"default"', description: '"destructive": red, for irreversible actions.' }] }, { kind: "component", name: "DropdownMenuCheckboxItem", props: [{ name: "checked", type: "boolean", required: true, description: "Shows the check mark." }, { name: "children", type: "ReactNode", required: true, description: "Label, optionally with a leading icon." }, { name: "onCheckedChange", type: "(checked: boolean) => void", required: true, description: "Called with the new state." }, { name: "disabled", type: "boolean", required: false, description: "Shown but not selectable." }, { name: "shortcut", type: "string", required: false, description: 'Right-aligned hint, e.g. "⌘S".' }], description: "Toggles without closing the menu." }, { kind: "component", name: "DropdownMenuRadioGroup", props: [{ name: "children", type: "ReactNode", required: true, description: "`DropdownMenuRadioItem`s." }, { name: "onValueChange", type: "(value: string) => void", required: true, description: "Called with the picked item's value." }, { name: "value", type: "string", required: true, description: "Value of the checked item." }] }, { kind: "component", name: "DropdownMenuRadioItem", props: [{ name: "children", type: "ReactNode", required: true, description: "Label, optionally with a leading icon." }, { name: "value", type: "string", required: true, description: "Checked when it equals the group's `value`." }, { name: "disabled", type: "boolean", required: false, description: "Shown but not selectable." }], description: "One choice of a RadioGroup; picking it keeps the menu open." }, { kind: "component", name: "DropdownMenuLabel", props: [], extends: "<div>" }, { kind: "component", name: "DropdownMenuSeparator", props: [] }], types: {} }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/button.json", "https://kznlabs.github.io/labsUI/r/list.json", "https://kznlabs.github.io/labsUI/r/platform.json", "https://kznlabs.github.io/labsUI/r/use-anchor.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/use-dismiss.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/dropdown-menu.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "DropdownMenu", props: [{ name: "children", type: "ReactNode", required: true, description: "Trigger and content." }, { name: "defaultOpen", type: "boolean", required: false, default: "false", description: "Open at first render (uncontrolled)." }, { name: "onOpenChange", type: "(open: boolean) => void", required: false, description: "Called on the trigger, Esc, outside click or a selection." }, { name: "open", type: "boolean", required: false, description: "Controlled state; pair with `onOpenChange`." }], description: "Action menu anchored to a button. Controlled (`open` + `onOpenChange`) or uncontrolled." }, { kind: "component", name: "DropdownMenuTrigger", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Shows a spinner before the label and ignores clicks and Enter, so a form can't submit twice. Stays focusable." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`. Both ignore clicks and Enter, so a form can't submit twice." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button", description: "A Button. Keyboard: Enter, Space or Down opens on the first item, Up on the last." }, { kind: "component", name: "DropdownMenuContent", props: [{ name: "children", type: "ReactNode", required: true, description: "Items, labels, groups and separators." }, { name: "align", type: '"start" | "end"', required: false, default: '"start"', description: "Edge of the trigger the menu lines up with." }] }, { kind: "component", name: "DropdownMenuItem", props: [{ name: "children", type: "ReactNode", required: true, description: "Label, optionally with a leading icon." }, { name: "disabled", type: "boolean", required: false, description: "Shown but not selectable." }, { name: "onSelect", type: "() => void", required: false, description: "Called on click or Enter; the menu then closes." }, { name: "shortcut", type: "string", required: false, description: 'Right-aligned hint, e.g. "⌘S".' }, { name: "variant", type: '"default" | "destructive"', required: false, default: '"default"', description: '"destructive": red, for irreversible actions.' }] }, { kind: "component", name: "DropdownMenuCheckboxItem", props: [{ name: "checked", type: "boolean", required: true, description: "Shows the check mark." }, { name: "children", type: "ReactNode", required: true, description: "Label, optionally with a leading icon." }, { name: "onCheckedChange", type: "(checked: boolean) => void", required: true, description: "Called with the new state." }, { name: "disabled", type: "boolean", required: false, description: "Shown but not selectable." }, { name: "shortcut", type: "string", required: false, description: 'Right-aligned hint, e.g. "⌘S".' }], description: "Toggles without closing the menu." }, { kind: "component", name: "DropdownMenuRadioGroup", props: [{ name: "children", type: "ReactNode", required: true, description: "`DropdownMenuRadioItem`s." }, { name: "onValueChange", type: "(value: string) => void", required: true, description: "Called with the picked item's value." }, { name: "value", type: "string", required: true, description: "Value of the checked item." }] }, { kind: "component", name: "DropdownMenuRadioItem", props: [{ name: "children", type: "ReactNode", required: true, description: "Label, optionally with a leading icon." }, { name: "value", type: "string", required: true, description: "Checked when it equals the group's `value`." }, { name: "disabled", type: "boolean", required: false, description: "Shown but not selectable." }], description: "One choice of a RadioGroup; picking it keeps the menu open." }, { kind: "component", name: "DropdownMenuLabel", props: [], extends: "<div>" }, { kind: "component", name: "DropdownMenuSeparator", props: [] }], types: {} }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/button.json", "https://kznlabs.github.io/labsUI/r/list.json", "https://kznlabs.github.io/labsUI/r/platform.json", "https://kznlabs.github.io/labsUI/r/use-anchor.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/use-dismiss.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/dropdown-menu.tsx", type: "registry:ui", content: `"use client";
 
 import { Check, Circle } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
@@ -7061,6 +7204,7 @@ export function DropdownMenuItem({
 			)}
 		>
 			{children}
+
 			<Shortcut>{shortcut}</Shortcut>
 		</div>
 	);
@@ -7091,7 +7235,9 @@ export function DropdownMenuCheckboxItem({
 			<span className="absolute left-2 flex size-4 items-center justify-center">
 				{checked && <Check className="!text-current" aria-hidden="true" />}
 			</span>
+
 			{children}
+
 			<Shortcut>{shortcut}</Shortcut>
 		</div>
 	);
@@ -7148,6 +7294,7 @@ export function DropdownMenuRadioItem({
 			<span className="absolute left-2 flex size-4 items-center justify-center">
 				{checked && <Circle className="!size-2 !text-current fill-current" aria-hidden="true" />}
 			</span>
+
 			{children}
 		</div>
 	);
@@ -7219,12 +7366,15 @@ export function Empty({
 					{icon}
 				</span>
 			)}
+
 			<div className="grid max-w-sm gap-1.5">
 				<p className="font-semibold text-base tracking-tight">{title}</p>
+
 				{description && (
 					<p className="text-muted-foreground text-sm leading-relaxed">{description}</p>
 				)}
 			</div>
+
 			{children && <div className="flex flex-wrap justify-center gap-2">{children}</div>}
 		</div>
 	);
@@ -7340,6 +7490,7 @@ export function Field({
 	const labelEl = label && (
 		<Label htmlFor={id} className={cn(disabled && "cursor-not-allowed opacity-50")}>
 			{label}
+
 			{required && (
 				<span aria-hidden="true" className="text-destructive-ink">
 					*
@@ -7362,14 +7513,17 @@ export function Field({
 				{horizontal ? (
 					<div className="flex items-center gap-2.5">
 						{children}
+
 						{labelEl}
 					</div>
 				) : (
 					<>
 						{labelEl}
+
 						{children}
 					</>
 				)}
+
 				{description && (
 					<p
 						id={descId}
@@ -7378,6 +7532,7 @@ export function Field({
 						{description}
 					</p>
 				)}
+
 				{/* Persistent live region, so a new error is announced. */}
 				{/* -mt-2 cancels the grid gap while empty; the error brings its own pt-2. */}
 				<div aria-live="polite" className={cn("-mt-2", horizontal && "pl-6.5")}>
@@ -7401,6 +7556,45 @@ export function Field({
 		</FieldContext>
 	);
 }
+` }] }, "form-value": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "form-value", type: "registry:lib", description: "Submits a custom control's value and takes part in native validation, which a hidden input\ncan't: an empty `required` value blocks submit, shows the browser's message and focuses `anchor`.", api: { entries: [{ kind: "component", name: "FormValue", props: [{ name: "anchor", type: "RefObject<HTMLElement | null>", required: true, description: "The visible control that gets focus when the value is invalid." }, { name: "value", type: "string", required: true, description: 'The value to submit, "" when nothing is picked.' }, { name: "disabled", type: "boolean", required: false, description: "Skips validation and leaves the value out of the submit, like a disabled input." }, { name: "name", type: "string", required: false, description: "Form field name; without it the value only takes part in validation." }, { name: "onInvalid", type: "() => void", required: false, description: "Called when a submit finds the value invalid." }, { name: "required", type: "boolean", required: false, description: "An empty value blocks submit." }], description: "Submits a custom control's value and takes part in native validation, which a hidden input\ncan't: an empty `required` value blocks submit, shows the browser's message and focuses `anchor`." }], types: {} }, dependencies: [], registryDependencies: [], files: [{ path: "lib/form-value.tsx", type: "registry:lib", content: `import type { RefObject } from "react";
+
+type FormValueProps = {
+	/** Form field name; without it the value only takes part in validation. */
+	name?: string;
+	/** The value to submit, "" when nothing is picked. */
+	value: string;
+	/** An empty value blocks submit. */
+	required?: boolean;
+	/** Skips validation and leaves the value out of the submit, like a disabled input. */
+	disabled?: boolean;
+	/** The visible control that gets focus when the value is invalid. */
+	anchor: RefObject<HTMLElement | null>;
+	/** Called when a submit finds the value invalid. */
+	onInvalid?: () => void;
+};
+
+/**
+ * Submits a custom control's value and takes part in native validation, which a hidden input
+ * can't: an empty \`required\` value blocks submit, shows the browser's message and focuses \`anchor\`.
+ */
+export function FormValue({ name, value, required, disabled, anchor, onInvalid }: FormValueProps) {
+	if (!name && !required) return null;
+
+	return (
+		<input
+			aria-hidden="true"
+			tabIndex={-1}
+			name={name}
+			value={value}
+			required={required}
+			disabled={disabled}
+			onChange={() => undefined}
+			onInvalid={onInvalid}
+			onFocus={() => anchor.current?.focus()}
+			className="pointer-events-none absolute size-px opacity-0"
+		/>
+	);
+}
 ` }] }, highlight: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "highlight", type: "registry:lib", description: "Lines of colored tokens, with Shiki loaded on demand. Runs anywhere: Code calls it in the\nbrowser, and a Server Component or a build can call it ahead of time and pass the result as\n`tokens`, so the browser never loads Shiki. Null for unknown languages.", api: { entries: [{ kind: "function", name: "highlightCode", signature: "highlightCode(code: string, language: string) => Promise<CodeToken[][] | null>", description: "Lines of colored tokens, with Shiki loaded on demand. Runs anywhere: Code calls it in the\nbrowser, and a Server Component or a build can call it ahead of time and pass the result as\n`tokens`, so the browser never loads Shiki. Null for unknown languages." }, { kind: "function", name: "languageOf", signature: "languageOf(name: string) => string", description: "Language from a file name's extension. Falls back to tsx." }], types: { CodeToken: "{ content: string; color?: string; fontStyle?: number }" } }, dependencies: ["shiki@^4.5.0"], registryDependencies: [], files: [{ path: "lib/highlight.ts", type: "registry:lib", content: `import type { BundledLanguage } from "shiki";
 
 /** A run of text in one color: \`light-dark()\` holds both themes, so the page's color scheme picks. */
@@ -7562,6 +7756,7 @@ export function HoverCard({
 			}}
 		>
 			{children}
+
 			{mounted &&
 				createPortal(
 					<AnimatePresence>
@@ -7594,7 +7789,7 @@ export function HoverCard({
 		</span>
 	);
 }
-` }] }, input: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "input", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", docs: "https://kznlabs.github.io/labsUI/components/forms", usage: '<Label htmlFor="email">Email</Label><Input id="email" type="email" aria-invalid={err} />', examples: [{ name: "sign-up.tsx", code: `import { Input } from "@/components/ui/input";
+` }] }, input: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "input", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", docs: "https://kznlabs.github.io/labsUI/components/forms", usage: '<Label htmlFor="email">Email</Label><Input id="email" type="email" aria-invalid={err} /><Textarea aria-label="Bio" maxLength={280} showCount /><Switch aria-label="Notifications" checked={on} onCheckedChange={setOn} />', examples: [{ name: "sign-up.tsx", code: `import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
@@ -7869,6 +8064,7 @@ export function InputOTP({
 							className="h-px w-2.5 shrink-0 bg-muted-foreground/50"
 						/>
 					)}
+
 					<div className="flex min-w-0 gap-1.5" aria-hidden="true">
 						{Array.from({ length: count }, (_, slot) => {
 							const i = starts[group] + slot;
@@ -7923,6 +8119,7 @@ export function InputOTP({
 											)
 										)}
 									</AnimatePresence>
+
 									{isActive && !char && (
 										<span className="absolute h-4 w-px animate-caret-blink bg-foreground motion-reduce:animate-none" />
 									)}
@@ -7932,6 +8129,7 @@ export function InputOTP({
 					</div>
 				</Fragment>
 			))}
+
 			<AnimatePresence>
 				{merge && (
 					// Slots fold into one bar of the same size: a finished field, not a new widget.
@@ -7950,6 +8148,7 @@ export function InputOTP({
 								transition={{ ...spring, stiffness: 120, delay: 0.15 }}
 								className="absolute inset-0 rounded-full border-2 border-success"
 							/>
+
 							<motion.span
 								initial={{ scale: 0 }}
 								animate={{ scale: 1 }}
@@ -7970,6 +8169,7 @@ export function InputOTP({
 								</svg>
 							</motion.span>
 						</span>
+
 						<motion.span
 							initial={{ opacity: 0, x: -6 }}
 							animate={{ opacity: 1, x: 0 }}
@@ -7981,9 +8181,11 @@ export function InputOTP({
 					</motion.div>
 				)}
 			</AnimatePresence>
+
 			<span role="status" className="sr-only">
 				{verified ? verifiedLabel : null}
 			</span>
+
 			<input
 				type="text"
 				autoComplete="one-time-code"
@@ -8060,7 +8262,7 @@ export function KbdGroup({
 		</kbd>
 	);
 }
-` }] }, label: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "label", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", docs: "https://kznlabs.github.io/labsUI/components/forms", usage: '<Label htmlFor="email">Email</Label><Input id="email" type="email" aria-invalid={err} />', examples: [{ name: "sign-up.tsx", code: `import { Input } from "@/components/ui/input";
+` }] }, label: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "label", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", docs: "https://kznlabs.github.io/labsUI/components/forms", usage: '<Label htmlFor="email">Email</Label><Input id="email" type="email" aria-invalid={err} /><Textarea aria-label="Bio" maxLength={280} showCount /><Switch aria-label="Notifications" checked={on} onCheckedChange={setOn} />', examples: [{ name: "sign-up.tsx", code: `import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
@@ -8092,7 +8294,7 @@ export function Label({ className, ...props }: ComponentProps<"label">) {
 }
 ` }] }, list: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "list", type: "registry:lib", description: "The item a navigation key moves to in a list, from the item at `index` (-1: none active).\nUndefined when the key doesn't navigate.", api: { entries: [{ kind: "function", name: "listKeyTarget", signature: 'listKeyTarget(items: readonly T[], index: number, event: Pick<KeyboardEvent, "ctrlKey" | "key">, { orientation, loop, homeEnd }: ListKeyOptions) => T | undefined', description: "The item a navigation key moves to in a list, from the item at `index` (-1: none active).\nUndefined when the key doesn't navigate." }, { kind: "function", name: "scrollIntoList", signature: "scrollIntoList(box: HTMLElement, element: HTMLElement, pad?: number) => void", description: "Scrolls `box` just enough to show `el`, without moving the page the way scrollIntoView can." }], types: { ListKeyOptions: '{ orientation: "horizontal" | "vertical"; loop?: boolean; homeEnd?: boolean | "ctrl"; }' } }, dependencies: [], registryDependencies: ["https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "lib/list.ts", type: "registry:lib", content: `import { clamp } from "@/lib/utils";
 
-type ListKeyOptions = {
+export type ListKeyOptions = {
 	/** Which arrows move: Left/Right for "horizontal", Up/Down for "vertical". */
 	orientation: "horizontal" | "vertical";
 	/** Wrap past the last item to the first and back. Default true. */
@@ -8428,6 +8630,7 @@ export function Menubar({ className, children, ...props }: ComponentProps<"div">
 						className="-z-10 absolute inset-y-1 left-0 rounded-md bg-foreground/[0.08]"
 					/>
 				)}
+
 				{children}
 			</div>
 		</BarContext>
@@ -8529,7 +8732,7 @@ export function MenubarTrigger({
 		/>
 	);
 }
-` }] }, "message-bubble": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "message-bubble", type: "registry:ui", title: "Message Bubble", description: "User/assistant chat bubbles with avatar slot, streaming dots and copyable code blocks.", docs: "https://kznlabs.github.io/labsUI/components/chat", usage: '<MessageBubble from="assistant" avatar={<Avatar … />} streaming>…<Code code={src} language="tsx" /></MessageBubble>', examples: [{ name: "message.tsx", code: `import { Avatar } from "@/components/ui/avatar";
+` }] }, "message-bubble": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "message-bubble", type: "registry:ui", title: "Message Bubble", description: "User/assistant chat bubbles with avatar slot, streaming dots and copyable code blocks.", docs: "https://kznlabs.github.io/labsUI/components/chat", usage: '<MessageBubble from="assistant" avatar={<Avatar src={bot} alt="Assistant" />} streaming>…<Code code={src} language="tsx" /></MessageBubble>', examples: [{ name: "message.tsx", code: `import { Avatar } from "@/components/ui/avatar";
 import { Code } from "@/components/ui/code";
 import { MessageBubble } from "@/components/ui/message-bubble";
 export function Reply({ code }: { code: string }) {
@@ -8587,13 +8790,16 @@ export function MessageBubble({
 			className={cn("flex w-full gap-3", user && "flex-row-reverse", className)}
 		>
 			{avatar && <div className="shrink-0 pt-5">{avatar}</div>}
+
 			<div className={cn("flex min-w-0 max-w-[85%] flex-col gap-1", user && "items-end")}>
 				{(name || time) && (
 					<header className="flex items-center gap-2 px-1 text-muted-foreground text-xs">
 						{name && <span className="font-medium text-foreground">{name}</span>}
+
 						{time && <time>{time}</time>}
 					</header>
 				)}
+
 				<div
 					className={cn(
 						"min-w-0 rounded-2xl px-4 py-2.5 text-sm leading-relaxed",
@@ -8604,6 +8810,7 @@ export function MessageBubble({
 					)}
 				>
 					{children}
+
 					{streaming && <TypingDots className={children ? "mt-2" : "py-1.5"} />}
 				</div>
 			</div>
@@ -8648,14 +8855,14 @@ export function Storage() {
       ]}
     />
   );
-}` }], api: { entries: [{ kind: "component", name: "Meter", props: [{ name: "high", type: "number", required: false, default: "max", description: "Above this the value is high." }, { name: "label", type: "ReactNode", required: false, description: "Visible name above the bar; also the accessible name." }, { name: "low", type: "number", required: false, default: "min", description: "<meter> thresholds: below `low` is low, above `high` is high." }, { name: "max", type: "number", required: false, default: "100", description: "Upper bound." }, { name: "min", type: "number", required: false, default: "0", description: "Lower bound." }, { name: "optimum", type: "number", required: false, default: "(min + max) / 2", description: "Where good is: below low, between, or above high. Decides the color, like <meter>." }, { name: "segments", type: "Segment[]", required: false, description: "Stacked parts with a legend (like a storage bar). Overrides the threshold color." }, { name: "value", type: "number", required: false, description: "Total used. With `segments`, defaults to their sum." }, { name: "valueText", type: "string", required: false, description: 'Text on the right and the accessible value, e.g. "48 GB of 100 GB".' }], description: `A measurement within a known range (disk, quota, server load, password strength), not a
+}` }], api: { entries: [{ kind: "component", name: "Meter", props: [{ name: "high", type: "number", required: false, default: "max", description: "Above this the value is high." }, { name: "label", type: "ReactNode", required: false, description: "Visible name above the bar; also the accessible name." }, { name: "low", type: "number", required: false, default: "min", description: "<meter> thresholds: below `low` is low, above `high` is high." }, { name: "max", type: "number", required: false, default: "100", description: "Upper bound." }, { name: "min", type: "number", required: false, default: "0", description: "Lower bound." }, { name: "optimum", type: "number", required: false, default: "(min + max) / 2", description: "Where good is: below low, between, or above high. Decides the color, like <meter>." }, { name: "segments", type: "MeterSegment[]", required: false, description: "Stacked parts with a legend (like a storage bar). Overrides the threshold color." }, { name: "value", type: "number", required: false, description: "Total used. With `segments`, defaults to their sum." }, { name: "valueText", type: "string", required: false, description: 'Text on the right and the accessible value, e.g. "48 GB of 100 GB".' }], description: `A measurement within a known range (disk, quota, server load, password strength), not a
 task's progress (use Progress). Colors follow <meter>: green in the optimum region, orange one
-region away, red two away.` }], types: { Segment: "{ label: string; value: number; className?: string; }" } }, dependencies: [], registryDependencies: ["https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/meter.tsx", type: "registry:ui", content: `import type { ReactNode } from "react";
+region away, red two away.` }], types: { MeterSegment: "{ label: string; value: number; className?: string; }" } }, dependencies: [], registryDependencies: ["https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/meter.tsx", type: "registry:ui", content: `import type { ReactNode } from "react";
 import { clamp, cn } from "@/lib/utils";
 
 /* Server-safe (no "use client"). */
 
-type Segment = {
+export type MeterSegment = {
 	/** Legend text for this part. */
 	label: string;
 	/** Amount this part uses. */
@@ -8678,7 +8885,7 @@ type MeterProps = {
 	/** Where good is: below low, between, or above high. Decides the color, like <meter>. */
 	optimum?: number;
 	/** Stacked parts with a legend (like a storage bar). Overrides the threshold color. */
-	segments?: Segment[];
+	segments?: MeterSegment[];
 	/** Visible name above the bar; also the accessible name. */
 	label?: ReactNode;
 	/** Text on the right and the accessible value, e.g. "48 GB of 100 GB". */
@@ -8716,11 +8923,13 @@ export function Meter({
 			{(label || valueText) && (
 				<div className="flex items-baseline justify-between gap-3 text-sm">
 					{label && <span className="font-medium">{label}</span>}
+
 					{valueText && (
 						<span className="ml-auto text-muted-foreground text-xs tabular-nums">{valueText}</span>
 					)}
 				</div>
 			)}
+
 			{/* The real <meter> carries the semantics; the drawn bar below is decoration. */}
 			<meter
 				className="sr-only"
@@ -8734,6 +8943,7 @@ export function Meter({
 			>
 				{valueText ?? value}
 			</meter>
+
 			<div
 				aria-hidden="true"
 				className="flex h-2 w-full gap-px overflow-hidden rounded-full bg-foreground/10"
@@ -8753,6 +8963,7 @@ export function Meter({
 					<span style={{ width: pct(value) }} className={cn("h-full rounded-full", tone)} />
 				)}
 			</div>
+
 			{segments && (
 				<ul className="flex flex-wrap gap-x-4 gap-y-1 text-muted-foreground text-xs">
 					{segments.map((segment, i) => (
@@ -8764,6 +8975,7 @@ export function Meter({
 									segment.className ?? palette[i % palette.length],
 								)}
 							/>
+
 							{segment.label}
 						</li>
 					))}
@@ -8830,6 +9042,7 @@ export function NativeSelect({ className, children, ...rest }: ComponentProps<"s
 			>
 				{children}
 			</select>
+
 			<ChevronsUpDown
 				aria-hidden="true"
 				className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-3 size-4 text-muted-foreground"
@@ -9189,8 +9402,10 @@ export function NavigationMenu({
 							className="-z-10 absolute inset-y-0 left-0 rounded-lg bg-foreground/[0.06]"
 						/>
 					)}
+
 					{children}
 				</div>
+
 				<motion.div
 					ref={setViewport}
 					data-floating=""
@@ -9308,6 +9523,7 @@ export function NavigationMenuTrigger({
 			{...props}
 		>
 			{children}
+
 			<motion.span
 				aria-hidden="true"
 				animate={{ rotate: open ? 180 : 0 }}
@@ -9353,6 +9569,7 @@ export function NavigationMenuContent({
 	return (
 		<InPanel value>
 			{!open && <div hidden>{children}</div>}
+
 			{nav.viewport &&
 				createPortal(
 					<AnimatePresence custom={nav.dir} initial={false}>
@@ -9528,8 +9745,10 @@ export function NavigationMenuLink({
 							{icon}
 						</span>
 					)}
+
 					<span className="flex min-w-0 flex-col gap-0.5">
 						<span className="font-medium text-foreground">{title}</span>
+
 						{description && (
 							<span className="line-clamp-2 text-muted-foreground text-xs leading-snug">
 								{description}
@@ -9642,13 +9861,16 @@ export function Newsletter({
 							{title}
 						</h3>
 					)}
+
 					{description && <p className="text-muted-foreground text-sm">{description}</p>}
 				</div>
 			)}
+
 			<InputGroup>
 				<InputGroupAddon>
 					<Mail aria-hidden="true" />
 				</InputGroupAddon>
+
 				<Input
 					type="email"
 					name="email"
@@ -9657,6 +9879,7 @@ export function Newsletter({
 					placeholder={placeholder}
 					aria-label="Email address"
 				/>
+
 				<InputGroupAddon align="end">
 					<Button type="submit" size="sm" status={status} successLabel="Subscribed">
 						{submitLabel}
@@ -9755,6 +9978,7 @@ export function NumberInput({
 					<Minus aria-hidden="true" />
 				</button>
 			</InputGroupAddon>
+
 			<Input
 				type="number"
 				inputMode={Number.isInteger(step) ? "numeric" : "decimal"}
@@ -9778,6 +10002,7 @@ export function NumberInput({
 				className="px-0 text-center tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
 				{...props}
 			/>
+
 			<InputGroupAddon align="end" className="pr-1">
 				<button
 					type="button"
@@ -9896,6 +10121,7 @@ function Control({
 	const content = (
 		<>
 			{active && <PaginationActivePill />}
+
 			{children}
 		</>
 	);
@@ -9961,9 +10187,11 @@ export function Pagination({
 							className="gap-1 px-2.5"
 						>
 							<ChevronLeft aria-hidden="true" />
+
 							<span className="hidden sm:block">{labels?.previous ?? "Previous"}</span>
 						</Control>
 					</li>
+
 					{pageRange(current, total, siblings).map((page, i) => (
 						// biome-ignore lint/suspicious/noArrayIndexKey: slots stay mounted so numbers swipe (see pageRange)
 						<li key={i}>
@@ -9981,6 +10209,7 @@ export function Pagination({
 							)}
 						</li>
 					))}
+
 					<li>
 						<Control
 							{...nav}
@@ -9990,6 +10219,7 @@ export function Pagination({
 							className="gap-1 px-2.5"
 						>
 							<span className="hidden sm:block">{labels?.next ?? "Next"}</span>
+
 							<ChevronRight aria-hidden="true" />
 						</Control>
 					</li>
@@ -10137,7 +10367,7 @@ export function ClipFilters() {
       </PopoverContent>
     </Popover>
   );
-}` }], api: { entries: [{ kind: "component", name: "Popover", props: [{ name: "children", type: "ReactNode", required: true, description: "`PopoverTrigger` and `PopoverContent`." }, { name: "defaultOpen", type: "boolean", required: false, default: "false", description: "Open at first render (uncontrolled)." }, { name: "onOpenChange", type: "(open: boolean) => void", required: false, description: "Called on the trigger, Esc or an outside click." }, { name: "open", type: "boolean", required: false, description: "Controlled state; pair with `onOpenChange`." }], description: "Non-modal panel anchored to a button: filters, pickers, quick edits. Controlled or uncontrolled." }, { kind: "component", name: "PopoverTrigger", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Disables the button and shows a spinner before the label." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button" }, { kind: "component", name: "PopoverContent", props: [{ name: "children", type: "ReactNode", required: true, description: "Panel content." }, { name: "align", type: '"start" | "center" | "end"', required: false, default: '"center"', description: "Alignment with the trigger." }, { name: "side", type: '"top" | "bottom"', required: false, default: '"bottom"', description: "Preferred side; flips when there is no room." }], description: `Focus moves in on open. Esc or an outside click closes it; Esc returns focus to the trigger.
+}` }], api: { entries: [{ kind: "component", name: "Popover", props: [{ name: "children", type: "ReactNode", required: true, description: "`PopoverTrigger` and `PopoverContent`." }, { name: "defaultOpen", type: "boolean", required: false, default: "false", description: "Open at first render (uncontrolled)." }, { name: "onOpenChange", type: "(open: boolean) => void", required: false, description: "Called on the trigger, Esc or an outside click." }, { name: "open", type: "boolean", required: false, description: "Controlled state; pair with `onOpenChange`." }], description: "Non-modal panel anchored to a button: filters, pickers, quick edits. Controlled or uncontrolled." }, { kind: "component", name: "PopoverTrigger", props: [{ name: "children", type: "ReactNode", required: false, description: "Label; its width is reserved so loading and success never resize the button." }, { name: "confirmLabel", type: "ReactNode", required: false, description: "Two-step action: first click swaps the label to this, second click runs `onClick`." }, { name: "confirmTimeout", type: "number", required: false, description: "Ms before an armed confirm step resets. Also resets on blur or Esc." }, { name: "loading", type: "boolean", required: false, description: "Shows a spinner before the label and ignores clicks and Enter, so a form can't submit twice. Stays focusable." }, { name: "loadingLabel", type: "ReactNode", required: false, description: "Label shown while loading, with the spinner. Defaults to `children`." }, { name: "size", type: '"default" | "sm" | "lg" | "icon"', required: false, description: 'Height and padding; "icon" is square, so give it an `aria-label`.' }, { name: "status", type: "ButtonStatus", required: false, description: "In-place feedback: `loading` spins, `success` swaps the label to `successLabel`. Both ignore clicks and Enter, so a form can't submit twice." }, { name: "successLabel", type: "ReactNode", required: false, description: 'Text shown on `status="success"`, with a check icon. Defaults to "Done".' }, { name: "swap", type: "SwapDirection", required: false, description: 'Where the old label slides out to on a swap. Default "left".' }, { name: "variant", type: '"default" | "secondary" | "outline" | "ghost" | "destructive"', required: false, description: "Fill and emphasis: one primary action per view, `destructive` for irreversible ones." }], extends: "Button" }, { kind: "component", name: "PopoverContent", props: [{ name: "children", type: "ReactNode", required: true, description: "Panel content." }, { name: "align", type: '"start" | "center" | "end"', required: false, default: '"center"', description: "Alignment with the trigger." }, { name: "side", type: '"top" | "bottom"', required: false, default: '"bottom"', description: "Preferred side; flips when there is no room." }], description: `Focus moves in on open. Esc or an outside click closes it; Esc returns focus to the trigger.
 Not a focus trap: Tab past the end closes it and moves on, like any non-modal popup.` }], types: {} }, dependencies: ["motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/button.json", "https://kznlabs.github.io/labsUI/r/platform.json", "https://kznlabs.github.io/labsUI/r/use-anchor.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/use-dismiss.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/popover.tsx", type: "registry:ui", content: `"use client";
 
 import { AnimatePresence, motion } from "motion/react";
@@ -10292,6 +10522,19 @@ export function PopoverContent({
 					aria-labelledby={\`\${id}-trigger\`}
 					tabIndex={-1}
 					onKeyDown={(event) => {
+						// The panel sits at the end of body: Tab past its last field goes on from the trigger.
+						if (event.key === "Tab" && !event.shiftKey) {
+							const last = [...(panel.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [])].at(
+								-1,
+							);
+
+							if (last && event.target !== last) return;
+							setOpen(false);
+							trigger.current?.focus();
+
+							return;
+						}
+
 						if (event.key !== "Escape" || event.defaultPrevented) return;
 						// Handled here so an enclosing Dialog stays open.
 						event.preventDefault();
@@ -10349,8 +10592,8 @@ export function PricingPage() {
       ]}
     />
   );
-}` }], api: { entries: [{ kind: "component", name: "Pricing", props: [{ name: "plans", type: "Plan[]", required: true, description: "Plans in display order." }, { name: "currency", type: "string", required: false, default: '"USD"', description: 'ISO 4217 code for the price, e.g. "EUR".' }, { name: "defaultPeriod", type: "Period", required: false, default: '"monthly"', description: "Billing period selected at first render." }, { name: "locale", type: "string", required: false, default: '"en-US"', description: "BCP 47 locale for number formatting." }, { name: "yearlyNote", type: "string", required: false, description: 'Next to "Yearly", e.g. "−17%".' }], description: `Plan cards with a monthly / yearly switch (segmented ToggleGroup). Prices swap on a spring,
-rolling up when they drop and down when they rise.` }], types: { Period: '"monthly" | "yearly"', Plan: "{ name: string; description?: string; price: Record<Period, number>; features: string[]; cta: ReactNode; featured?: boolean; badge?: string; }" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/badge.json", "https://kznlabs.github.io/labsUI/r/card.json", "https://kznlabs.github.io/labsUI/r/toggle-group.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/blocks/pricing.tsx", type: "registry:block", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "Pricing", props: [{ name: "plans", type: "PricingPlan[]", required: true, description: "Plans in display order." }, { name: "currency", type: "string", required: false, default: '"USD"', description: 'ISO 4217 code for the price, e.g. "EUR".' }, { name: "defaultPeriod", type: "PricingPeriod", required: false, default: '"monthly"', description: "Billing period selected at first render." }, { name: "locale", type: "string", required: false, default: '"en-US"', description: "BCP 47 locale for number formatting." }, { name: "yearlyNote", type: "string", required: false, description: 'Next to "Yearly", e.g. "−17%".' }], description: `Plan cards with a monthly / yearly switch (segmented ToggleGroup). Prices swap on a spring,
+rolling up when they drop and down when they rise.` }], types: { PricingPeriod: '"monthly" | "yearly"', PricingPlan: "{ name: string; description?: string; price: Record<PricingPeriod, number>; features: string[]; cta: ReactNode; featured?: boolean; badge?: string; }" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/badge.json", "https://kznlabs.github.io/labsUI/r/card.json", "https://kznlabs.github.io/labsUI/r/toggle-group.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/blocks/pricing.tsx", type: "registry:block", content: `"use client";
 
 import { Check } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
@@ -10367,15 +10610,15 @@ import {
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { cn, spring } from "@/lib/utils";
 
-type Period = "monthly" | "yearly";
+export type PricingPeriod = "monthly" | "yearly";
 
-type Plan = {
+export type PricingPlan = {
 	/** Plan name, the card's heading. */
 	name: string;
 	/** One line under the name. */
 	description?: string;
 	/** Price per month on each billing period, e.g. \`{ monthly: 12, yearly: 10 }\`. */
-	price: Record<Period, number>;
+	price: Record<PricingPeriod, number>;
 	features: string[];
 	/** Call to action, e.g. \`<Button className="w-full">Start trial</Button>\`. */
 	cta: ReactNode;
@@ -10387,13 +10630,13 @@ type Plan = {
 
 type PricingProps = {
 	/** Plans in display order. */
-	plans: Plan[];
+	plans: PricingPlan[];
 	/** ISO 4217 code for the price, e.g. "EUR". */
 	currency?: string;
 	/** BCP 47 locale for number formatting. */
 	locale?: string;
 	/** Billing period selected at first render. */
-	defaultPeriod?: Period;
+	defaultPeriod?: PricingPeriod;
 	/** Next to "Yearly", e.g. "−17%". */
 	yearlyNote?: string;
 	className?: string;
@@ -10411,7 +10654,7 @@ export function Pricing({
 	yearlyNote,
 	className,
 }: PricingProps) {
-	const [period, setPeriod] = useState<Period>(defaultPeriod);
+	const [period, setPeriod] = useState<PricingPeriod>(defaultPeriod);
 	const money = new Intl.NumberFormat(locale, {
 		style: "currency",
 		currency,
@@ -10424,9 +10667,10 @@ export function Pricing({
 			<ToggleGroup
 				aria-label="Billing period"
 				value={period}
-				onValueChange={(value) => value && setPeriod(value as Period)}
+				onValueChange={(value) => value && setPeriod(value as PricingPeriod)}
 			>
 				<ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
+
 				<ToggleGroupItem value="yearly">
 					Yearly
 					{yearlyNote && (
@@ -10436,6 +10680,7 @@ export function Pricing({
 					)}
 				</ToggleGroupItem>
 			</ToggleGroup>
+
 			<div className="grid w-full gap-4 sm:grid-cols-[repeat(auto-fit,minmax(14rem,1fr))]">
 				{plans.map((plan) => (
 					<Card
@@ -10445,14 +10690,17 @@ export function Pricing({
 						<CardHeader>
 							<div className="flex min-h-6 items-center justify-between gap-2">
 								<CardTitle>{plan.name}</CardTitle>
+
 								{plan.badge && (
 									<Badge variant={plan.featured ? "default" : "secondary"} shape="pill">
 										{plan.badge}
 									</Badge>
 								)}
 							</div>
+
 							{plan.description && <CardDescription>{plan.description}</CardDescription>}
 						</CardHeader>
+
 						<CardContent className="flex flex-col gap-5">
 							<p className="flex items-baseline gap-1">
 								<span className="relative inline-flex overflow-hidden font-semibold text-4xl tabular-nums tracking-tight">
@@ -10474,20 +10722,24 @@ export function Pricing({
 										</motion.span>
 									</AnimatePresence>
 								</span>
+
 								<span className="text-muted-foreground text-sm">
 									/ month
 									<span className="sr-only">, billed {period}</span>
 								</span>
 							</p>
+
 							<ul className="flex flex-col gap-2 text-sm">
 								{plan.features.map((feature) => (
 									<li key={feature} className="flex gap-2">
 										<Check className="mt-0.5 size-4 shrink-0 text-primary-ink" aria-hidden="true" />
+
 										{feature}
 									</li>
 								))}
 							</ul>
 						</CardContent>
+
 						<CardFooter className="mt-auto">{plan.cta}</CardFooter>
 					</Card>
 				))}
@@ -10495,7 +10747,7 @@ export function Pricing({
 		</div>
 	);
 }
-` }] }, "product-card": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "product-card", type: "registry:block", title: "Product Card", description: "Shop tile: photos in an AspectRatio (a swipeable Carousel with dots when there are several), sale price, Badge and add-to-cart Button.", docs: "https://kznlabs.github.io/labsUI/components/product-card", usage: '<ProductCard name="Clip camera" price={279} compareAt={349} badge="−20%" media={[<img … />, <img … />]} onAddToCart={add} />', examples: [{ name: "product-grid.tsx", code: `import { ProductCard } from "@/components/blocks/product-card";
+` }] }, "product-card": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "product-card", type: "registry:block", title: "Product Card", description: "Shop tile: photos in an AspectRatio (a swipeable Carousel with dots when there are several), sale price, Badge and add-to-cart Button.", docs: "https://kznlabs.github.io/labsUI/components/product-card", usage: '<ProductCard name="Clip camera" price={279} compareAt={349} badge="−20%" media={[<img src={front} alt="Front" />, <img src={back} alt="Back" />]} onAddToCart={add} />', examples: [{ name: "product-grid.tsx", code: `import { ProductCard } from "@/components/blocks/product-card";
 
 type Product = {
   id: string;
@@ -10601,17 +10853,20 @@ export function ProductCard({
 								<CarouselItem key={i}>{frame(slide)}</CarouselItem>
 							))}
 						</CarouselContent>
+
 						<CarouselDots className="absolute inset-x-0 bottom-2 mt-0" />
 					</Carousel>
 				) : (
 					frame(media[0])
 				)}
+
 				{badge && (
 					<Badge shape="pill" className="absolute top-2 left-2">
 						{badge}
 					</Badge>
 				)}
 			</div>
+
 			<div className="flex flex-1 flex-col gap-3 p-3">
 				<div className="flex items-baseline justify-between gap-2">
 					<h3 className="min-w-0 truncate font-medium text-sm">
@@ -10623,16 +10878,20 @@ export function ProductCard({
 							name
 						)}
 					</h3>
+
 					<p className="shrink-0 text-sm tabular-nums">
 						{compareAt !== undefined && compareAt > price && (
 							<>
 								<del className="mr-1.5 text-muted-foreground">{money.format(compareAt)}</del>
+
 								<span className="sr-only">now </span>
 							</>
 						)}
+
 						{money.format(price)}
 					</p>
 				</div>
+
 				{onAddToCart && (
 					<Button size="sm" variant="outline" className="mt-auto w-full" onClick={onAddToCart}>
 						{addLabel}
@@ -10693,11 +10952,13 @@ export function Progress({
 			{(label || showValue) && (
 				<div className="flex items-center justify-between gap-3 text-xs">
 					{label && <span className="font-medium">{label}</span>}
+
 					{showValue && determinate && (
 						<span className="ml-auto text-muted-foreground tabular-nums">{pct}%</span>
 					)}
 				</div>
 			)}
+
 			<div
 				role="progressbar"
 				aria-label={label ?? ariaLabel}
@@ -10809,6 +11070,7 @@ export function Quote({
 			className={cn("flex flex-col", surface[variant], className)}
 		>
 			{large && <QuoteIcon aria-hidden="true" className="size-8 text-muted-foreground/60" />}
+
 			<blockquote
 				lang={lang}
 				className={cn(
@@ -10849,11 +11111,14 @@ export function Quote({
 					)}
 				</div>
 			</blockquote>
+
 			{(author || avatar) && (
 				<figcaption className="flex items-center gap-3">
 					{avatar}
+
 					<span className="grid text-left">
 						{author && <span className="font-medium text-foreground text-sm">{author}</span>}
+
 						{subtitle && <span className="text-muted-foreground text-xs">{subtitle}</span>}
 					</span>
 				</figcaption>
@@ -10870,7 +11135,7 @@ export function PlanPicker() {
       <RadioGroupItem value="pro" description="10 servers, unlimited clips.">Pro</RadioGroupItem>
     </RadioGroup>
   );
-}` }], api: { entries: [{ kind: "component", name: "RadioGroup", props: [{ name: "aria-invalid", type: "boolean", required: false, description: "Indicates the entered value does not conform to the format expected by the application." }, { name: "defaultValue", type: "string", required: false, default: '""', description: "Value at first render (uncontrolled)." }, { name: "legend", type: "ReactNode", required: false, description: "Visible group label, rendered as the fieldset's <legend>." }, { name: "name", type: "string", required: false, description: "Form field name; generated when omitted." }, { name: "onValueChange", type: "(value: string) => void", required: false, description: "Called with the picked item's value." }, { name: "orientation", type: '"vertical" | "horizontal"', required: false, default: '"vertical"', description: "Stack items or lay them in a row." }, { name: "value", type: "string", required: false, description: "Controlled value; pair with `onValueChange`." }], extends: "<fieldset>", description: "Native radios in a fieldset: arrow keys, form submit and labels work as the browser does." }, { kind: "component", name: "RadioGroupItem", props: [{ name: "children", type: "ReactNode", required: true, description: "Label." }, { name: "value", type: "string", required: true, description: "Submitted value." }, { name: "description", type: "ReactNode", required: false, description: "Muted line under the label." }, { name: "disabled", type: "boolean", required: false, description: "Shown but not selectable." }], description: "One option. `children` is its label; `description` adds a muted line under it." }], types: {} }, dependencies: ["motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/radio-group.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "RadioGroup", props: [{ name: "aria-invalid", type: "boolean", required: false, description: "Indicates the entered value does not conform to the format expected by the application." }, { name: "defaultValue", type: "string", required: false, default: '""', description: "Value at first render (uncontrolled)." }, { name: "legend", type: "ReactNode", required: false, description: "Visible group label, rendered as the fieldset's <legend>." }, { name: "name", type: "string", required: false, description: "Form field name; generated when omitted." }, { name: "onValueChange", type: "(value: string) => void", required: false, description: "Called with the picked item's value." }, { name: "orientation", type: '"vertical" | "horizontal"', required: false, default: '"vertical"', description: "Stack items or lay them in a row." }, { name: "required", type: "boolean", required: false, description: "Submit needs a picked item." }, { name: "value", type: "string", required: false, description: "Controlled value; pair with `onValueChange`." }], extends: "<fieldset>", description: "Native radios in a fieldset: arrow keys, form submit and labels work as the browser does." }, { kind: "component", name: "RadioGroupItem", props: [{ name: "children", type: "ReactNode", required: true, description: "Label." }, { name: "value", type: "string", required: true, description: "Submitted value." }, { name: "description", type: "ReactNode", required: false, description: "Muted line under the label." }, { name: "disabled", type: "boolean", required: false, description: "Shown but not selectable." }], description: "One option. `children` is its label; `description` adds a muted line under it." }], types: {} }, dependencies: ["motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/radio-group.tsx", type: "registry:ui", content: `"use client";
 
 import { motion } from "motion/react";
 import { type ComponentProps, createContext, type ReactNode, use, useId } from "react";
@@ -10883,6 +11148,7 @@ type RadioCtx = {
 	value: string;
 	setValue: (value: string) => void;
 	disabled?: boolean;
+	required?: boolean;
 	invalid?: boolean;
 };
 
@@ -10901,6 +11167,8 @@ type RadioGroupProps = Omit<ComponentProps<"fieldset">, "defaultValue" | "onChan
 	name?: string;
 	/** Stack items or lay them in a row. */
 	orientation?: "vertical" | "horizontal";
+	/** Submit needs a picked item. */
+	required?: boolean;
 	"aria-invalid"?: boolean;
 };
 
@@ -10916,12 +11184,8 @@ export function RadioGroup({
 	children,
 	...rest
 }: RadioGroupProps) {
-	// A fieldset takes no id from Field (labels can't target it) and no required.
-	const {
-		id: _id,
-		required: _required,
-		...props
-	} = useFieldControl<typeof rest & { required?: boolean }>(rest);
+	// A fieldset takes no id from Field (labels can't target it); required goes on the radios.
+	const { id: _id, required, ...props } = useFieldControl(rest);
 	const auto = useId();
 	const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
 
@@ -10932,11 +11196,13 @@ export function RadioGroup({
 				value,
 				setValue,
 				disabled: props.disabled,
+				required,
 				invalid: !!props["aria-invalid"],
 			}}
 		>
 			<fieldset className={cn("min-w-0", className)} {...props}>
 				{legend && <legend className="mb-3 font-medium text-sm leading-none">{legend}</legend>}
+
 				<div
 					className={cn(
 						"flex gap-3",
@@ -10986,11 +11252,13 @@ export function RadioGroupItem({
 					value={value}
 					checked={checked}
 					disabled={off}
+					required={ctx.required}
 					aria-invalid={ctx.invalid || undefined}
 					aria-describedby={description ? \`\${id}-description\` : undefined}
 					onChange={() => ctx.setValue(value)}
 					className="peer absolute inset-0 z-10 cursor-pointer appearance-none rounded-full outline-none disabled:cursor-not-allowed"
 				/>
+
 				<span
 					aria-hidden="true"
 					className={cn(
@@ -11006,6 +11274,7 @@ export function RadioGroupItem({
 					/>
 				</span>
 			</span>
+
 			<span className="grid gap-1">
 				<label
 					htmlFor={id}
@@ -11016,6 +11285,7 @@ export function RadioGroupItem({
 				>
 					{children}
 				</label>
+
 				{description && (
 					<span id={\`\${id}-description\`} className="text-muted-foreground text-xs">
 						{description}
@@ -11035,11 +11305,12 @@ export function ProductRating({ average, count }: { average: number; count: numb
       <span className="text-muted-foreground">· {count} reviews</span>
     </div>
   );
-}` }], api: { entries: [{ kind: "component", name: "Rating", props: [{ name: "defaultValue", type: "number", required: false, default: "0", description: "Rating at first render (uncontrolled)." }, { name: "label", type: "string", required: false, default: '"Rating"', description: "Group label (visually hidden)." }, { name: "max", type: "number", required: false, default: "5", description: "Number of stars." }, { name: "name", type: "string", required: false, description: "Form field name for the chosen value." }, { name: "onValueChange", type: "(value: number) => void", required: false, description: "Called with the picked rating." }, { name: "readOnly", type: "boolean", required: false, default: "false", description: "Display only: renders fractions (4.6) as a partially filled star, no inputs." }, { name: "size", type: '"sm" | "default"', required: false, default: '"default"', description: "Star size." }, { name: "value", type: "number", required: false, description: "Controlled rating; pair with `onValueChange`." }], description: "Star rating. Interactive: native radios (arrow keys, forms, screen readers) with a hover\npreview and a spring lift/press on the stars. `readOnly`: an image of the score, fractions included." }], types: {} }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/rating.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "Rating", props: [{ name: "aria-describedby", type: "string", required: false, description: "Ids of hint or error text; Field fills it in." }, { name: "aria-invalid", type: "boolean", required: false, description: "Error styling; Field sets it from `error`." }, { name: "defaultValue", type: "number", required: false, description: "Rating at first render (uncontrolled)." }, { name: "disabled", type: "boolean", required: false, description: "Stars can't be picked and the value isn't submitted." }, { name: "label", type: "string", required: false, description: "Group label (visually hidden)." }, { name: "max", type: "number", required: false, description: "Number of stars." }, { name: "name", type: "string", required: false, description: "Form field name for the chosen value." }, { name: "onValueChange", type: "(value: number) => void", required: false, description: "Called with the picked rating." }, { name: "readOnly", type: "boolean", required: false, description: "Display only: renders fractions (4.6) as a partially filled star, no inputs." }, { name: "required", type: "boolean", required: false, description: "Submit needs a rating." }, { name: "size", type: '"sm" | "default"', required: false, description: "Star size." }, { name: "value", type: "number", required: false, description: "Controlled rating; pair with `onValueChange`." }], description: "Star rating. Interactive: native radios (arrow keys, forms, screen readers) with a hover\npreview and a spring lift/press on the stars. `readOnly`: an image of the score, fractions included." }], types: {} }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/rating.tsx", type: "registry:ui", content: `"use client";
 
 import { Star } from "lucide-react";
 import { motion } from "motion/react";
 import { useId, useState } from "react";
+import { useFieldControl } from "@/components/ui/field";
 import { useControllableState } from "@/lib/use-controllable-state";
 import { clamp, cn, spring } from "@/lib/utils";
 
@@ -11056,10 +11327,18 @@ type RatingProps = {
 	readOnly?: boolean;
 	/** Form field name for the chosen value. */
 	name?: string;
+	/** Submit needs a rating. */
+	required?: boolean;
+	/** Stars can't be picked and the value isn't submitted. */
+	disabled?: boolean;
 	/** Group label (visually hidden). */
 	label?: string;
 	/** Star size. */
 	size?: "sm" | "default";
+	/** Ids of hint or error text; Field fills it in. */
+	"aria-describedby"?: string;
+	/** Error styling; Field sets it from \`error\`. */
+	"aria-invalid"?: boolean;
 	className?: string;
 };
 
@@ -11069,17 +11348,22 @@ const sizes = { sm: "size-4", default: "size-5" } as const;
  * Star rating. Interactive: native radios (arrow keys, forms, screen readers) with a hover
  * preview and a spring lift/press on the stars. \`readOnly\`: an image of the score, fractions included.
  */
-export function Rating({
-	value: valueProp,
-	defaultValue = 0,
-	onValueChange,
-	max = 5,
-	readOnly = false,
-	name,
-	label = "Rating",
-	size = "default",
-	className,
-}: RatingProps) {
+export function Rating(allProps: RatingProps) {
+	const {
+		value: valueProp,
+		defaultValue = 0,
+		onValueChange,
+		max = 5,
+		readOnly = false,
+		name,
+		required,
+		disabled,
+		label = "Rating",
+		size = "default",
+		className,
+		"aria-describedby": describedBy,
+		"aria-invalid": invalid,
+	} = useFieldControl(allProps);
 	const auto = useId();
 	const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
 	const [hover, setHover] = useState<number | null>(null);
@@ -11103,6 +11387,7 @@ export function Rating({
 								fill="currentColor"
 								strokeWidth={0}
 							/>
+
 							<span
 								className="absolute inset-0 overflow-hidden"
 								style={{ width: \`\${fill * 100}%\` }}
@@ -11125,23 +11410,34 @@ export function Rating({
 
 	return (
 		<fieldset
+			disabled={disabled}
+			aria-describedby={describedBy}
 			onPointerLeave={() => setHover(null)}
-			className={cn("inline-flex items-center gap-0.5", className)}
+			className={cn("inline-flex items-center gap-0.5", disabled && "opacity-50", className)}
 		>
 			<legend className="sr-only">{label}</legend>
+
 			{stars.map((star) => (
-				<label key={star} className="relative cursor-pointer" onPointerEnter={() => setHover(star)}>
+				<label
+					key={star}
+					className={cn("relative", disabled ? "cursor-not-allowed" : "cursor-pointer")}
+					onPointerEnter={() => !disabled && setHover(star)}
+				>
 					<input
 						type="radio"
 						name={name ?? auto}
 						value={star}
 						checked={value === star}
+						required={required}
+						aria-invalid={invalid || undefined}
 						onChange={() => setValue(star)}
 						className="peer sr-only"
 					/>
+
 					<span className="sr-only">
 						{star} {star === 1 ? "star" : "stars"}
 					</span>
+
 					<motion.span
 						aria-hidden="true"
 						// whileTap would make the star focusable, the radio underneath is the tab stop.
@@ -11293,11 +11589,11 @@ export function AdminLayout({ nav, log, children }: {
       </ResizablePanel>
     </ResizablePanelGroup>
   );
-}` }], api: { entries: [{ kind: "component", name: "ResizablePanelGroup", props: [{ name: "direction", type: "Direction", required: false, default: '"horizontal"', description: '"horizontal": panels side by side. "vertical": stacked.' }, { name: "keyboardStep", type: "number", required: false, default: "5", description: "% per arrow key press." }, { name: "onLayout", type: "(sizes: number[]) => void", required: false, description: "Final sizes after each drag, key or toggle, e.g. to save them in a cookie for SSR." }], extends: "<div>", description: `Split panes (admin layouts, docs, editors). Sizes are % of the group. Handles are APG window
+}` }], api: { entries: [{ kind: "component", name: "ResizablePanelGroup", props: [{ name: "direction", type: "ResizableDirection", required: false, default: '"horizontal"', description: '"horizontal": panels side by side. "vertical": stacked.' }, { name: "keyboardStep", type: "number", required: false, default: "5", description: "% per arrow key press." }, { name: "onLayout", type: "(sizes: number[]) => void", required: false, description: "Final sizes after each drag, key or toggle, e.g. to save them in a cookie for SSR." }], extends: "<div>", description: `Split panes (admin layouts, docs, editors). Sizes are % of the group. Handles are APG window
 splitters: arrows step, Home/End jump to the limits, Enter collapses a collapsible neighbor.
 Drag follows the pointer; keys and toggles spring. Panels and handles find their order in the
 DOM, so wrappers and Server Component parents work. Until hydration the layout is plain CSS
-(\`defaultSize\` as a flex basis, the others share the rest), so SSR already shows it.` }, { kind: "component", name: "ResizablePanel", props: [{ name: "collapsedSize", type: "number", required: false, default: "0", description: "Share in % when collapsed (default 0), e.g. an icon rail." }, { name: "collapsible", type: "boolean", required: false, default: "false", description: "Dragging past half the minimum snaps it shut; Enter or double-click on the handle toggles." }, { name: "defaultSize", type: "number", required: false, description: "Starting share of the group in %. Panels without one split what is left evenly." }, { name: "maxSize", type: "number", required: false, default: "100", description: "Largest size in % of the group." }, { name: "minSize", type: "number", required: false, default: "10", description: "Smallest share in % (default 10)." }], extends: "<div>" }, { kind: "component", name: "ResizableHandle", props: [{ name: "withHandle", type: "boolean", required: false, description: "Visible grip in the middle of the divider." }], extends: "<div>", description: "The divider between two panels. `withHandle` adds a visible grip." }], types: { Direction: '"horizontal" | "vertical"' } }, dependencies: ["motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/resizable.tsx", type: "registry:ui", content: `"use client";
+(\`defaultSize\` as a flex basis, the others share the rest), so SSR already shows it.` }, { kind: "component", name: "ResizablePanel", props: [{ name: "collapsedSize", type: "number", required: false, default: "0", description: "Share in % when collapsed (default 0), e.g. an icon rail." }, { name: "collapsible", type: "boolean", required: false, default: "false", description: "Dragging past half the minimum snaps it shut; Enter or double-click on the handle toggles." }, { name: "defaultSize", type: "number", required: false, description: "Starting share of the group in %. Panels without one split what is left evenly." }, { name: "maxSize", type: "number", required: false, default: "100", description: "Largest size in % of the group." }, { name: "minSize", type: "number", required: false, default: "10", description: "Smallest share in % (default 10)." }], extends: "<div>" }, { kind: "component", name: "ResizableHandle", props: [{ name: "withHandle", type: "boolean", required: false, description: "Visible grip in the middle of the divider." }], extends: "<div>", description: "The divider between two panels. `withHandle` adds a visible grip." }], types: { ResizableDirection: '"horizontal" | "vertical"' } }, dependencies: ["motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/resizable.tsx", type: "registry:ui", content: `"use client";
 
 import { type AnimationPlaybackControls, animate, useReducedMotion } from "motion/react";
 import {
@@ -11313,7 +11609,7 @@ import {
 } from "react";
 import { cn, spring } from "@/lib/utils";
 
-type Direction = "horizontal" | "vertical";
+export type ResizableDirection = "horizontal" | "vertical";
 type Limits = { min: number; max: number; collapsible: boolean; collapsed: number };
 
 type ResizablePanelProps = ComponentProps<"div"> & {
@@ -11337,7 +11633,7 @@ type Layout = {
 };
 
 type GroupCtx = {
-	direction: Direction;
+	direction: ResizableDirection;
 	id: string;
 	layout: Layout | null;
 	/** Panels report their limits here from a layout effect; the group's own effect reads them. */
@@ -11439,7 +11735,7 @@ export function ResizablePanelGroup({
 	...props
 }: ComponentProps<"div"> & {
 	/** "horizontal": panels side by side. "vertical": stacked. */
-	direction?: Direction;
+	direction?: ResizableDirection;
 	/** Final sizes after each drag, key or toggle, e.g. to save them in a cookie for SSR. */
 	onLayout?: (sizes: number[]) => void;
 	/** % per arrow key press. */
@@ -12060,7 +12356,9 @@ export function ScrollArea({
 			>
 				{children}
 			</div>
+
 			{orientation !== "horizontal" && <Thumb axis="y" viewport={viewport} />}
+
 			{orientation !== "vertical" && <Thumb axis="x" viewport={viewport} />}
 		</div>
 	);
@@ -12157,6 +12455,7 @@ export function SearchInput({
 				aria-hidden="true"
 				className="-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 size-4 text-muted-foreground"
 			/>
+
 			<Input
 				ref={(element) => {
 					input.current = element;
@@ -12183,6 +12482,7 @@ export function SearchInput({
 				)}
 				{...props}
 			/>
+
 			<span className="-translate-y-1/2 absolute top-1/2 right-2 flex">
 				<AnimatePresence mode="popLayout" initial={false}>
 					{value ? (
@@ -12289,6 +12589,7 @@ export function SegmentedTabs({ label, items, value, onChange, className }: Segm
 				transition={spring}
 				className="-z-10 absolute inset-y-1 left-0 rounded-md bg-raised shadow-sm ring-[0.5px] ring-raised-ring"
 			/>
+
 			{items.map((item) => (
 				<button
 					key={item}
@@ -12307,11 +12608,12 @@ export function SegmentedTabs({ label, items, value, onChange, className }: Segm
 					{item}
 				</button>
 			))}
+
 			<OverflowFocus />
 		</nav>
 	);
 }
-` }] }, select: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "select", type: "registry:ui", title: "Select", description: "Single-choice listbox styled like Input, with groups, icons and disabled options. Native-select keyboard (arrows, typeahead even while closed), flips above the trigger near the viewport edge, submits via a hidden input.", docs: "https://kznlabs.github.io/labsUI/components/select", usage: '<Select id="role" name="role" options={[{ value: "admin", label: "Admin" }]} value={v} onValueChange={setV} placeholder="Pick a role" />', examples: [{ name: "role-picker.tsx", code: `"use client";
+` }] }, select: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "select", type: "registry:ui", title: "Select", description: "Single-choice listbox styled like Input, with groups, icons and disabled options. Native-select keyboard (arrows, typeahead even while closed), flips above the trigger near the viewport edge, submits and validates with the form.", docs: "https://kznlabs.github.io/labsUI/components/select", usage: '<Select id="role" name="role" options={[{ value: "admin", label: "Admin" }]} value={v} onValueChange={setV} placeholder="Pick a role" />', examples: [{ name: "role-picker.tsx", code: `"use client";
 
 import { useState } from "react";
 import { Field } from "@/components/ui/field";
@@ -12330,8 +12632,8 @@ export function RolePicker() {
       <Select name="role" options={roles} value={role} onValueChange={setRole} />
     </Field>
   );
-}` }], api: { entries: [{ kind: "component", name: "Select", props: [{ name: "options", type: "SelectGroup[] | SelectOption[]", required: true, description: "Flat options, or labeled groups of options." }, { name: "aria-describedby", type: "string", required: false, description: "Ids of hint or error text; Field fills it in." }, { name: "aria-invalid", type: "boolean", required: false, description: "Error styling; Field sets it from `error`." }, { name: "aria-label", type: "string", required: false, description: "Accessible name when there is no visible label." }, { name: "defaultValue", type: "string", required: false, description: "Value at first render (uncontrolled)." }, { name: "disabled", type: "boolean", required: false, description: "Blocks opening." }, { name: "id", type: "string", required: false, description: "Pair with <Label htmlFor>, or let <Field> fill it in." }, { name: "name", type: "string", required: false, description: "Submits the value with a form, through a hidden input." }, { name: "onValueChange", type: "(value: string) => void", required: false, description: "Called with the picked value." }, { name: "placeholder", type: "string", required: false, description: "Trigger text when nothing is picked." }, { name: "required", type: "boolean", required: false, description: "Form submit needs a value." }, { name: "value", type: "string", required: false, description: "Controlled value; pair with `onValueChange`." }], description: `Single-choice listbox styled like Input. Keyboard matches a native select: Up, Down, Home, End,
-typeahead (also while closed), Enter or Space to pick, Esc to cancel.` }], types: { SelectOption: "{ value: string; label: string; icon?: ReactNode; disabled?: boolean }", SelectGroup: "{ label: string; options: SelectOption[] }" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/input.json", "https://kznlabs.github.io/labsUI/r/list.json", "https://kznlabs.github.io/labsUI/r/platform.json", "https://kznlabs.github.io/labsUI/r/use-anchor.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/use-dismiss.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/select.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "Select", props: [{ name: "options", type: "SelectGroup[] | SelectOption[]", required: true, description: "Flat options, or labeled groups of options." }, { name: "aria-describedby", type: "string", required: false, description: "Ids of hint or error text; Field fills it in." }, { name: "aria-invalid", type: "boolean", required: false, description: "Error styling; Field sets it from `error`." }, { name: "aria-label", type: "string", required: false, description: "Accessible name when there is no visible label." }, { name: "defaultValue", type: "string", required: false, description: "Value at first render (uncontrolled)." }, { name: "disabled", type: "boolean", required: false, description: "Blocks opening; the value isn't submitted." }, { name: "id", type: "string", required: false, description: "Pair with <Label htmlFor>, or let <Field> fill it in." }, { name: "name", type: "string", required: false, description: "Form field name for the picked value." }, { name: "onValueChange", type: "(value: string) => void", required: false, description: "Called with the picked value." }, { name: "placeholder", type: "string", required: false, description: "Trigger text when nothing is picked." }, { name: "required", type: "boolean", required: false, description: "Form submit needs a value." }, { name: "value", type: "string", required: false, description: "Controlled value; pair with `onValueChange`." }], description: `Single-choice listbox styled like Input. Keyboard matches a native select: Up, Down, Home, End,
+typeahead (also while closed), Enter or Space to pick, Esc to cancel.` }], types: { SelectOption: "{ value: string; label: string; icon?: ReactNode; disabled?: boolean }", SelectGroup: "{ label: string; options: SelectOption[] }" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/form-value.json", "https://kznlabs.github.io/labsUI/r/input.json", "https://kznlabs.github.io/labsUI/r/list.json", "https://kznlabs.github.io/labsUI/r/platform.json", "https://kznlabs.github.io/labsUI/r/use-anchor.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/use-dismiss.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/select.tsx", type: "registry:ui", content: `"use client";
 
 import { Check, ChevronsUpDown } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
@@ -12339,6 +12641,7 @@ import { type KeyboardEvent, type ReactNode, useEffect, useId, useRef, useState
 import { createPortal } from "react-dom";
 import { useFieldControl } from "@/components/ui/field";
 import { fieldClass } from "@/components/ui/input";
+import { FormValue } from "@/lib/form-value";
 import { listKeyTarget, scrollIntoList } from "@/lib/list";
 import { useMounted } from "@/lib/platform";
 import { useAnchor } from "@/lib/use-anchor";
@@ -12346,8 +12649,8 @@ import { useControllableState } from "@/lib/use-controllable-state";
 import { useDismiss } from "@/lib/use-dismiss";
 import { cn, material, spring } from "@/lib/utils";
 
-type SelectOption = { value: string; label: string; icon?: ReactNode; disabled?: boolean };
-type SelectGroup = { label: string; options: SelectOption[] };
+export type SelectOption = { value: string; label: string; icon?: ReactNode; disabled?: boolean };
+export type SelectGroup = { label: string; options: SelectOption[] };
 
 type SelectProps = {
 	/** Flat options, or labeled groups of options. */
@@ -12360,11 +12663,11 @@ type SelectProps = {
 	onValueChange?: (value: string) => void;
 	/** Trigger text when nothing is picked. */
 	placeholder?: string;
-	/** Submits the value with a form, through a hidden input. */
+	/** Form field name for the picked value. */
 	name?: string;
 	/** Pair with <Label htmlFor>, or let <Field> fill it in. */
 	id?: string;
-	/** Blocks opening. */
+	/** Blocks opening; the value isn't submitted. */
 	disabled?: boolean;
 	/** Form submit needs a value. */
 	required?: boolean;
@@ -12403,6 +12706,7 @@ export function Select(allProps: SelectProps) {
 	const list = useRef<HTMLDivElement>(null);
 	const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
 	const [open, setOpen] = useState(false);
+	const [invalid, setInvalid] = useState(false);
 	const [active, setActive] = useState<string>();
 	const pos = useAnchor(open, trigger, list);
 	const mounted = useMounted();
@@ -12507,6 +12811,7 @@ export function Select(allProps: SelectProps) {
 					className,
 				)}
 				{...aria}
+				aria-invalid={aria["aria-invalid"] || (invalid && !value) || undefined}
 			>
 				<span
 					className={cn(
@@ -12515,11 +12820,22 @@ export function Select(allProps: SelectProps) {
 					)}
 				>
 					{selected?.icon}
+
 					{selected?.label ?? placeholder}
 				</span>
+
 				<ChevronsUpDown className="text-muted-foreground" aria-hidden="true" />
 			</button>
-			{name && <input type="hidden" name={name} value={value} />}
+
+			<FormValue
+				name={name}
+				value={value}
+				required={required}
+				disabled={disabled}
+				anchor={trigger}
+				onInvalid={() => setInvalid(true)}
+			/>
+
 			{mounted &&
 				createPortal(
 					<AnimatePresence>
@@ -12560,6 +12876,7 @@ export function Select(allProps: SelectProps) {
 										{groupIndex > 0 && (
 											<div aria-hidden="true" className="-mx-1 my-1 h-px bg-border" />
 										)}
+
 										{group.label && (
 											<div
 												aria-hidden="true"
@@ -12568,6 +12885,7 @@ export function Select(allProps: SelectProps) {
 												{group.label}
 											</div>
 										)}
+
 										{group.options.map((option) => (
 											// biome-ignore lint/a11y/useKeyWithClickEvents: keys handled on the listbox (aria-activedescendant)
 											<div
@@ -12591,7 +12909,9 @@ export function Select(allProps: SelectProps) {
 												)}
 											>
 												{option.icon}
+
 												{option.label}
+
 												{option.value === value && (
 													<Check className="!text-current absolute right-2" aria-hidden="true" />
 												)}
@@ -12778,7 +13098,7 @@ export function SidebarLayout({
 	);
 }
 
-type SidebarItem = {
+export type SidebarItem = {
 	/** What \`current\` and \`onSelect\` refer to. Default: \`href\`, else \`label\`. */
 	id?: string;
 	/** Visible text; the rail shows it as a tooltip. */
@@ -12791,7 +13111,7 @@ type SidebarItem = {
 	badge?: ReactNode;
 };
 
-type SidebarGroup = {
+export type SidebarGroup = {
 	/** Heading above the items; fades out in the rail. */
 	label?: string;
 	/** The group's entries. */
@@ -12855,6 +13175,7 @@ export function Sidebar({
 	const body = (
 		<nav aria-label={label} className="flex min-h-0 flex-1 flex-col">
 			{header && <div className="border-b p-2">{header}</div>}
+
 			<div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden p-2">
 				{groups.map((group, i) =>
 					group.collapsible && group.label ? (
@@ -12863,6 +13184,7 @@ export function Sidebar({
 							<CollapsibleTrigger className={cn("px-2.5 pb-1 text-muted-foreground text-xs", fade)}>
 								{group.label}
 							</CollapsibleTrigger>
+
 							<CollapsibleContent>{list(group.items)}</CollapsibleContent>
 						</Collapsible>
 					) : (
@@ -12878,11 +13200,13 @@ export function Sidebar({
 									{group.label}
 								</p>
 							)}
+
 							{list(group.items)}
 						</div>
 					),
 				)}
 			</div>
+
 			{footer?.length ? <div className="border-t p-2">{list(footer)}</div> : null}
 		</nav>
 	);
@@ -12892,6 +13216,7 @@ export function Sidebar({
 			<Drawer open={openMobile} onOpenChange={setOpenMobile}>
 				<DrawerContent side="left" className={cn("bg-background pt-12 text-sm", className)}>
 					<DrawerTitle className="sr-only">{label}</DrawerTitle>
+
 					{body}
 				</DrawerContent>
 			</Drawer>
@@ -12933,7 +13258,9 @@ function Entry({
 	const body = (
 		<>
 			{item.icon}
+
 			<span className="min-w-0 flex-1 truncate">{item.label}</span>
+
 			{item.badge != null && (
 				<span className="ml-auto text-muted-foreground text-xs tabular-nums">{item.badge}</span>
 			)}
@@ -13030,8 +13357,8 @@ import {
 import { useDisclosure } from "@/lib/use-disclosure";
 import { cn } from "@/lib/utils";
 
-type SiteLink = { label: string; href: string };
-type SiteGroup = {
+export type SiteLink = { label: string; href: string };
+export type SiteGroup = {
 	/** Trigger text for the panel. */
 	label: string;
 	/** Links in the panel, each with an optional description and icon. */
@@ -13096,6 +13423,7 @@ export function SiteHeader({
 	return (
 		<>
 			<span ref={sentinel} aria-hidden="true" className="block h-px" />
+
 			<header
 				ref={header}
 				className={cn(
@@ -13112,6 +13440,7 @@ export function SiteHeader({
 								isGroup(link) ? (
 									<NavigationMenuItem key={link.label}>
 										<NavigationMenuTrigger>{link.label}</NavigationMenuTrigger>
+
 										<NavigationMenuContent>
 											<ul
 												className={cn(
@@ -13153,6 +13482,7 @@ export function SiteHeader({
 
 					<div className="ml-auto flex items-center gap-2">
 						{actions}
+
 						<Button
 							variant="ghost"
 							size="icon"
@@ -13172,6 +13502,7 @@ export function SiteHeader({
 					<DrawerHeader>
 						<DrawerTitle>Menu</DrawerTitle>
 					</DrawerHeader>
+
 					<DrawerBody>
 						<nav aria-label={label} className="flex flex-col gap-5">
 							{nav.map((link) =>
@@ -13180,6 +13511,7 @@ export function SiteHeader({
 										<h2 className="px-2.5 font-medium text-muted-foreground text-xs">
 											{link.label}
 										</h2>
+
 										<ul className="flex flex-col">
 											{link.items.map((i) => (
 												<li key={i.href}>
@@ -13241,6 +13573,7 @@ function MobileLink({
 			className="flex h-10 items-center gap-3 rounded-lg px-2.5 font-medium text-sm outline-none transition-colors hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[current=page]:bg-foreground/[0.08] [&_svg]:size-4 [&_svg]:text-primary-ink"
 		>
 			{icon && <span aria-hidden="true">{icon}</span>}
+
 			{children}
 		</a>
 	);
@@ -13289,6 +13622,7 @@ export function SkeletonGroup({
 	return (
 		<div role="status" aria-busy="true" className={className} {...props}>
 			<span className="sr-only">{label}</span>
+
 			{children}
 		</div>
 	);
@@ -13306,7 +13640,7 @@ export function PriceFilter() {
       <Slider value={price} onValueChange={setPrice} min={0} max={250} step={5} name="price" />
     </Field>
   );
-}` }], api: { entries: [{ kind: "component", name: "Slider", props: [{ name: "aria-describedby", type: "string", required: false, description: "Ids of hint or error text; Field fills it in." }, { name: "aria-invalid", type: "boolean", required: false, description: "Error styling; Field sets it from `error`." }, { name: "defaultValue", type: "number[]", required: false, description: "Values at first render (uncontrolled)." }, { name: "disabled", type: "boolean", required: false, description: "Blocks dragging and keys." }, { name: "id", type: "string", required: false, description: "Id of the first thumb; Field fills it in." }, { name: "labels", type: "string[]", required: false, description: 'Accessible names per thumb; defaults to "Minimum" / "Maximum" for a range.' }, { name: "max", type: "number", required: false, description: "Highest value." }, { name: "min", type: "number", required: false, description: "Lowest value." }, { name: "name", type: "string", required: false, description: "Submitted per thumb: `name` (one value) or `name` twice (range)." }, { name: "onValueChange", type: "(value: number[]) => void", required: false, description: "Called with every thumb's value while dragging." }, { name: "step", type: "number", required: false, description: "Increment for drag and arrow keys." }, { name: "value", type: "number[]", required: false, description: "One value, or two for a range (e.g. a price filter)." }], description: `Slider over native range inputs: keyboard, forms, touch and screen readers work as the
+}` }], api: { entries: [{ kind: "component", name: "Slider", props: [{ name: "aria-describedby", type: "string", required: false, description: "Ids of hint or error text; Field fills it in." }, { name: "aria-invalid", type: "boolean", required: false, description: "Error styling; Field sets it from `error`." }, { name: "defaultValue", type: "number[]", required: false, description: "Values at first render (uncontrolled)." }, { name: "disabled", type: "boolean", required: false, description: "Blocks dragging and keys; the values aren't submitted." }, { name: "id", type: "string", required: false, description: "Id of the first thumb; Field fills it in." }, { name: "labels", type: "string[]", required: false, description: 'Accessible names per thumb; defaults to "Minimum" / "Maximum" for a range.' }, { name: "max", type: "number", required: false, description: "Highest value." }, { name: "min", type: "number", required: false, description: "Lowest value." }, { name: "name", type: "string", required: false, description: "Submitted per thumb: `name` (one value) or `name` twice (range)." }, { name: "onValueChange", type: "(value: number[]) => void", required: false, description: "Called with every thumb's value while dragging." }, { name: "step", type: "number", required: false, description: "Increment for drag and arrow keys." }, { name: "value", type: "number[]", required: false, description: "One value, or two for a range (e.g. a price filter)." }], description: `Slider over native range inputs: keyboard, forms, touch and screen readers work as the
 browser does. Thin accent track, white knob that lifts while held. Two values = range.` }], types: {} }, dependencies: ["motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/slider.tsx", type: "registry:ui", content: `"use client";
 
 import { motion } from "motion/react";
@@ -13330,7 +13664,7 @@ type SliderProps = {
 	step?: number;
 	/** Submitted per thumb: \`name\` (one value) or \`name\` twice (range). */
 	name?: string;
-	/** Blocks dragging and keys. */
+	/** Blocks dragging and keys; the values aren't submitted. */
 	disabled?: boolean;
 	/** Accessible names per thumb; defaults to "Minimum" / "Maximum" for a range. */
 	labels?: string[];
@@ -13409,6 +13743,7 @@ export function Slider(allProps: SliderProps) {
 					}}
 				/>
 			</div>
+
 			{values.map((value, i) => (
 				<motion.span
 					// biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional (min, max)
@@ -13423,6 +13758,7 @@ export function Slider(allProps: SliderProps) {
 					)}
 				/>
 			))}
+
 			{values.map((thumbValue, i) => (
 				<input
 					// biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional (min, max)
@@ -13505,6 +13841,7 @@ export function Spinner({
 			{...props}
 		>
 			{label && <span className="sr-only">{label}</span>}
+
 			{spokes.map((i) => (
 				<span
 					key={i}
@@ -13605,10 +13942,12 @@ export function StatTile({
 		<Card className={cn("gap-4 pb-4", className)}>
 			<CardHeader>
 				<CardDescription>{label}</CardDescription>
+
 				<div className="flex flex-wrap items-center gap-2">
 					<CardTitle as="p" className="font-semibold text-3xl tabular-nums">
 						{value}
 					</CardTitle>
+
 					{delta !== undefined && delta !== 0 && (
 						<Badge variant={good ? "success" : "destructive"} shape="pill">
 							<Icon aria-hidden="true" />
@@ -13617,12 +13956,14 @@ export function StatTile({
 						</Badge>
 					)}
 				</div>
+
 				{period && (
 					<p aria-hidden="true" className="text-muted-foreground text-xs">
 						{period}
 					</p>
 				)}
 			</CardHeader>
+
 			{data && data.length > 1 && (
 				<Chart
 					type="area"
@@ -13650,14 +13991,14 @@ export function LandingStats({ users, uptime }: { users: number; uptime: number
       ]}
     />
   );
-}` }], api: { entries: [{ kind: "component", name: "StatsStrip", props: [{ name: "stats", type: "Stat[]", required: true, description: "Numbers in display order." }], description: "A row of headline numbers: each card rises in turn, then its number springs up. Each card is a <dl>." }], types: { Stat: "{ label: string; value: number; prefix?: string; suffix?: string; decimals?: number; hint?: string; }" } }, dependencies: [], registryDependencies: ["https://kznlabs.github.io/labsUI/r/card.json", "https://kznlabs.github.io/labsUI/r/count-to.json", "https://kznlabs.github.io/labsUI/r/reveal.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/blocks/stats-strip.tsx", type: "registry:block", content: `import { Card } from "@/components/ui/card";
+}` }], api: { entries: [{ kind: "component", name: "StatsStrip", props: [{ name: "stats", type: "StatsStripItem[]", required: true, description: "Numbers in display order." }], description: "A row of headline numbers: each card rises in turn, then its number springs up. Each card is a <dl>." }], types: { StatsStripItem: "{ label: string; value: number; prefix?: string; suffix?: string; decimals?: number; hint?: string; }" } }, dependencies: [], registryDependencies: ["https://kznlabs.github.io/labsUI/r/card.json", "https://kznlabs.github.io/labsUI/r/count-to.json", "https://kznlabs.github.io/labsUI/r/reveal.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/blocks/stats-strip.tsx", type: "registry:block", content: `import { Card } from "@/components/ui/card";
 import { CountTo } from "@/components/ui/count-to";
 import { Reveal } from "@/components/ui/reveal";
 import { cn } from "@/lib/utils";
 
 // Server-safe: CountTo and Reveal are the client parts.
 
-type Stat = {
+export type StatsStripItem = {
 	/** What the number counts, e.g. "Active users". */
 	label: string;
 	/** Number to count up to. */
@@ -13678,7 +14019,7 @@ export function StatsStrip({
 	className,
 }: {
 	/** Numbers in display order. */
-	stats: Stat[];
+	stats: StatsStripItem[];
 	className?: string;
 }) {
 	return (
@@ -13693,6 +14034,7 @@ export function StatsStrip({
 					<Card className="h-full px-5 py-4">
 						<dl className="flex flex-col gap-1">
 							<dt className="text-muted-foreground text-sm">{stat.label}</dt>
+
 							<dd className="font-semibold text-3xl tabular-nums tracking-tight">
 								<CountTo
 									to={stat.value}
@@ -13701,6 +14043,7 @@ export function StatsStrip({
 									decimals={stat.decimals}
 								/>
 							</dd>
+
 							{stat.hint && <dd className="text-muted-foreground text-xs">{stat.hint}</dd>}
 						</dl>
 					</Card>
@@ -13712,7 +14055,7 @@ export function StatsStrip({
 ` }] }, stepper: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "stepper", type: "registry:ui", title: "Stepper", description: "Multi-step form (questionnaire, checkout, setup wizard). Steps stay mounted so values survive Back and submit together; Continue checks only the current step's native constraints, plus an optional async onNext guard with a spinner. Progress header with springing connectors; works with onSubmit or a Server Action.", docs: "https://kznlabs.github.io/labsUI/components/stepper", usage: '<Stepper steps={[{ value: "server", title: "Server" }, { value: "bot", title: "Bot" }]} action={createBot}><StepperList /><StepperStep value="server"><Input name="serverId" required /></StepperStep><StepperStep value="bot">…</StepperStep><StepperFooter submitLabel="Create bot" /></Stepper>', examples: [{ name: "setup-wizard.tsx", code: `import { Field } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { Stepper, StepperFooter, StepperList, StepperStep } from "@/components/ui/stepper";
-import { createBot } from "./actions"; // "use server"
+import { createBot } from "./actions";
 
 const steps = [
   { value: "server", title: "Server", description: "Where the bot will live." },
@@ -13737,7 +14080,14 @@ export default function SetupPage() {
       <StepperFooter submitLabel="Create bot" />
     </Stepper>
   );
-}` }], api: { entries: [{ kind: "component", name: "Stepper", props: [{ name: "steps", type: "StepInfo[]", required: true, description: "Steps in order: `value`, `title` and an optional `description` for the header." }, { name: "defaultValue", type: "string", required: false, description: "Step shown at first render (uncontrolled)." }, { name: "onValueChange", type: "(value: string) => void", required: false, description: "Called with the new step's `value`." }, { name: "value", type: "string", required: false, description: "Current step's `value`. Controlled with `onValueChange`, or start at `defaultValue`." }], extends: "<form>", description: "Multi-step form. Every step stays mounted (hidden), so values survive Back and submit\ntogether; Continue checks only the current step's native constraints, and the last step\nsubmits the form (`onSubmit`, or a Server Action through `action`)." }, { kind: "component", name: "StepperList", props: [], extends: "<ol>", description: "Progress header. Finished steps are links back; the connector fills on a spring." }, { kind: "component", name: "StepperStep", props: [{ name: "children", type: "ReactNode", required: true, description: "The step's fields." }, { name: "value", type: "string", required: true, description: "Matches a step in `steps`." }, { name: "onNext", type: "Guard", required: false, description: "Runs on Continue after the native checks; return false to stay." }], description: "One step's fields. Hidden, not unmounted, while inactive. `onNext` runs after its native\nconstraints pass; return false (or resolve false) to stay, e.g. after a server check." }, { kind: "component", name: "StepperFooter", props: [{ name: "backLabel", type: "ReactNode", required: false, default: '"Back"', description: "Back button text." }, { name: "nextLabel", type: "ReactNode", required: false, default: '"Continue"', description: "Continue button text." }, { name: "submitLabel", type: "ReactNode", required: false, default: '"Submit"', description: "Submit button text on the last step." }], description: "Back and Continue; the last step's button submits. Continue shows a spinner while `onNext` runs." }], types: { StepInfo: "{ value: string; title: string; description?: string }", Guard: "() => boolean | undefined | Promise<boolean | undefined>" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/button.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/stepper.tsx", type: "registry:ui", content: `"use client";
+}` }, { name: "actions.ts", code: `"use server";
+
+export async function createBot(formData: FormData) {
+  const serverId = String(formData.get("serverId"));
+  const botName = String(formData.get("botName"));
+
+  console.log({ serverId, botName });
+}` }], api: { entries: [{ kind: "component", name: "Stepper", props: [{ name: "steps", type: "StepInfo[]", required: true, description: "Steps in order: `value`, `title` and an optional `description` for the header." }, { name: "defaultValue", type: "string", required: false, description: "Step shown at first render (uncontrolled)." }, { name: "onValueChange", type: "(value: string) => void", required: false, description: "Called with the new step's `value`." }, { name: "value", type: "string", required: false, description: "Current step's `value`. Controlled with `onValueChange`, or start at `defaultValue`." }], extends: "<form>", description: "Multi-step form. Every step stays mounted (hidden), so values survive Back and submit\ntogether; Continue checks only the current step's native constraints, and the last step\nsubmits the form (`onSubmit`, or a Server Action through `action`)." }, { kind: "component", name: "StepperList", props: [], extends: "<ol>", description: "Progress header. Finished steps are links back; the connector fills on a spring." }, { kind: "component", name: "StepperStep", props: [{ name: "children", type: "ReactNode", required: true, description: "The step's fields." }, { name: "value", type: "string", required: true, description: "Matches a step in `steps`." }, { name: "onNext", type: "StepGuard", required: false, description: "Runs on Continue after the native checks; return false to stay." }], description: "One step's fields. Hidden, not unmounted, while inactive. `onNext` runs after its native\nconstraints pass; return false (or resolve false) to stay, e.g. after a server check." }, { kind: "component", name: "StepperFooter", props: [{ name: "backLabel", type: "ReactNode", required: false, default: '"Back"', description: "Back button text." }, { name: "nextLabel", type: "ReactNode", required: false, default: '"Continue"', description: "Continue button text." }, { name: "submitLabel", type: "ReactNode", required: false, default: '"Submit"', description: "Submit button text on the last step." }], description: "Back and Continue; the last step's button submits. Continue shows a spinner while `onNext` runs." }], types: { StepInfo: "{ value: string; title: string; description?: string }", StepGuard: "() => boolean | undefined | Promise<boolean | undefined>" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/button.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/stepper.tsx", type: "registry:ui", content: `"use client";
 
 import { Check } from "lucide-react";
 import { motion } from "motion/react";
@@ -13754,8 +14104,8 @@ import { Button } from "@/components/ui/button";
 import { useControllableState } from "@/lib/use-controllable-state";
 import { cn, spring } from "@/lib/utils";
 
-type StepInfo = { value: string; title: string; description?: string };
-type Guard = () => boolean | undefined | Promise<boolean | undefined>;
+export type StepInfo = { value: string; title: string; description?: string };
+export type StepGuard = () => boolean | undefined | Promise<boolean | undefined>;
 
 type StepperCtx = {
 	steps: StepInfo[];
@@ -13764,7 +14114,7 @@ type StepperCtx = {
 	next: () => Promise<void>;
 	back: () => void;
 	fieldsets: Map<string, HTMLFieldSetElement>;
-	guards: Map<string, Guard>;
+	guards: Map<string, StepGuard>;
 };
 
 const StepperContext = createContext<StepperCtx | null>(null);
@@ -13827,7 +14177,7 @@ export function Stepper({
 		steps.findIndex((step) => step.value === value),
 	);
 	const fieldsets = useRef(new Map<string, HTMLFieldSetElement>()).current;
-	const guards = useRef(new Map<string, Guard>()).current;
+	const guards = useRef(new Map<string, StepGuard>()).current;
 	const moved = useRef(false);
 
 	const go = (i: number) => {
@@ -13940,15 +14290,19 @@ export function StepperList({ className, ...props }: ComponentProps<"ol">) {
 									className="flex cursor-pointer items-center gap-2 rounded-full pr-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
 								>
 									{mark}
+
 									{label}
+
 									<span className="sr-only"> (completed, go back)</span>
 								</button>
 							) : (
 								<span className="flex items-center gap-2 pr-1">
 									{mark}
+
 									{label}
 								</span>
 							)}
+
 							{i < steps.length - 1 && (
 								<span aria-hidden="true" className="relative mx-2 h-px flex-1 bg-border">
 									<motion.span
@@ -13963,6 +14317,7 @@ export function StepperList({ className, ...props }: ComponentProps<"ol">) {
 					);
 				})}
 			</ol>
+
 			{/* Small screens hide the titles; this keeps the current one (and announces moves). */}
 			<p aria-live="polite" className="text-muted-foreground text-xs sm:sr-only">
 				Step {index + 1} of {steps.length}
@@ -13985,7 +14340,7 @@ export function StepperStep({
 	/** Matches a step in \`steps\`. */
 	value: string;
 	/** Runs on Continue after the native checks; return false to stay. */
-	onNext?: Guard;
+	onNext?: StepGuard;
 	className?: string;
 	/** The step's fields. */
 	children: ReactNode;
@@ -14021,11 +14376,13 @@ export function StepperStep({
 			{step && (
 				<legend className="mb-4 grid gap-1">
 					<span className="font-semibold text-lg leading-none">{step.title}</span>
+
 					{step.description && (
 						<span className="text-muted-foreground text-sm">{step.description}</span>
 					)}
 				</legend>
 			)}
+
 			{children}
 		</motion.fieldset>
 	);
@@ -14054,6 +14411,7 @@ export function StepperFooter({
 			<Button variant="ghost" onClick={back} className={cn(index === 0 && "invisible")}>
 				{backLabel}
 			</Button>
+
 			{last ? (
 				<Button type="submit">{submitLabel}</Button>
 			) : (
@@ -14486,7 +14844,7 @@ export function StepperFooter({
 		display: inline !important;
 	}
 }
-` }] }, switch: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "switch", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", docs: "https://kznlabs.github.io/labsUI/components/forms", usage: '<Label htmlFor="email">Email</Label><Input id="email" type="email" aria-invalid={err} />', examples: [{ name: "sign-up.tsx", code: `import { Input } from "@/components/ui/input";
+` }] }, switch: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "switch", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", docs: "https://kznlabs.github.io/labsUI/components/forms", usage: '<Label htmlFor="email">Email</Label><Input id="email" type="email" aria-invalid={err} /><Textarea aria-label="Bio" maxLength={280} showCount /><Switch aria-label="Notifications" checked={on} onCheckedChange={setOn} />', examples: [{ name: "sign-up.tsx", code: `import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
@@ -14547,6 +14905,7 @@ export function Switch({
 				className="peer absolute inset-x-0 -inset-y-1 z-10 cursor-pointer appearance-none rounded-full outline-none disabled:cursor-not-allowed"
 				{...props}
 			/>
+
 			<span
 				aria-hidden="true"
 				className={cn(
@@ -14639,6 +14998,7 @@ export function Table({ striped = false, className, containerClassName, ...props
 				)}
 				{...props}
 			/>
+
 			<OverflowFocus />
 		</div>
 	);
@@ -14701,6 +15061,7 @@ export function TableHead({ sort, onSort, className, children, ...props }: Table
 					className="group -mx-1.5 inline-flex h-7 items-center gap-1 rounded-md px-1.5 outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 in-[.text-right]:flex-row-reverse"
 				>
 					{children}
+
 					<ArrowUp
 						aria-hidden="true"
 						className={cn(
@@ -14867,6 +15228,7 @@ export function TabsList({ className, children, ...props }: ComponentProps<"div"
 					)}
 				/>
 			)}
+
 			{children}
 		</div>
 	);
@@ -14944,7 +15306,7 @@ export function TabsContent({
 		</motion.div>
 	);
 }
-` }] }, "tag-input": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "tag-input", type: "registry:ui", title: "Tag Input", description: "Free-form tags: Enter or a separator adds, Backspace removes the last, pasting a list adds them all. Duplicates, a max and a validate function keep bad tags in the input. One hidden input per tag.", docs: "https://kznlabs.github.io/labsUI/components/tag-input", usage: "<TagInput value={tags} onValueChange={setTags} max={5} validate={(t) => t.length <= 24} />", examples: [{ name: "clip-tags.tsx", code: `"use client";
+` }] }, "tag-input": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "tag-input", type: "registry:ui", title: "Tag Input", description: "Free-form tags: Enter or a separator adds, Backspace removes the last, pasting a list adds them all. Duplicates, a max and a validate function keep bad tags in the input. Submits one entry per tag; required needs one.", docs: "https://kznlabs.github.io/labsUI/components/tag-input", usage: "<TagInput value={tags} onValueChange={setTags} max={5} validate={(t) => t.length <= 24} />", examples: [{ name: "clip-tags.tsx", code: `"use client";
 
 import { useState } from "react";
 import { Field } from "@/components/ui/field";
@@ -14964,12 +15326,13 @@ export function ClipTags() {
       />
     </Field>
   );
-}` }], api: { entries: [{ kind: "component", name: "Tag", props: [{ name: "children", type: "ReactNode", required: true, description: "Tag text." }, { name: "disabled", type: "boolean", required: false, description: "Hides the remove button." }, { name: "onRemove", type: "() => void", required: false, description: 'Shows a remove button; its accessible name is "Remove <children>".' }], description: 'Removable chip. Springs in and out when rendered inside AnimatePresence (`mode="popLayout"`).' }, { kind: "component", name: "TagInput", props: [{ name: "defaultValue", type: "string[]", required: false, default: "[]", description: "Tags at first render (uncontrolled)." }, { name: "max", type: "number", required: false, description: "Most tags allowed; typing stops at the limit." }, { name: "onValueChange", type: "(tags: string[]) => void", required: false, description: "Called with every tag after an add or remove." }, { name: "separators", type: "string[]", required: false, default: '[","]', description: "Keys that commit the typed text, besides Enter. Pasted text is split on these too." }, { name: "validate", type: "(tag: string) => boolean", required: false, description: "Return false to reject a tag (it stays in the input). Runs after trimming." }, { name: "value", type: "string[]", required: false, description: "Controlled tags; pair with `onValueChange`." }], extends: "<input>", description: "Free-form tags: type and press Enter or a separator; paste a list to add many; Backspace in an\nempty input removes the last tag. `name` submits one hidden input per tag." }], types: {} }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/tag-input.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "component", name: "Tag", props: [{ name: "children", type: "ReactNode", required: true, description: "Tag text." }, { name: "disabled", type: "boolean", required: false, description: "Hides the remove button." }, { name: "onRemove", type: "() => void", required: false, description: 'Shows a remove button; its accessible name is "Remove <children>".' }], description: 'Removable chip. Springs in and out when rendered inside AnimatePresence (`mode="popLayout"`).' }, { kind: "component", name: "TagInput", props: [{ name: "defaultValue", type: "string[]", required: false, default: "[]", description: "Tags at first render (uncontrolled)." }, { name: "max", type: "number", required: false, description: "Most tags allowed; typing stops at the limit." }, { name: "onValueChange", type: "(tags: string[]) => void", required: false, description: "Called with every tag after an add or remove." }, { name: "separators", type: "string[]", required: false, default: '[","]', description: "Keys that commit the typed text, besides Enter. Pasted text is split on these too." }, { name: "validate", type: "(tag: string) => boolean", required: false, description: "Return false to reject a tag (it stays in the input). Runs after trimming." }, { name: "value", type: "string[]", required: false, description: "Controlled tags; pair with `onValueChange`." }], extends: "<input>", description: "Free-form tags: type and press Enter or a separator; paste a list to add many; Backspace in an\nempty input removes the last tag. `name` submits one value per tag; `required` needs at least one." }], types: {} }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/field.json", "https://kznlabs.github.io/labsUI/r/form-value.json", "https://kznlabs.github.io/labsUI/r/use-controllable-state.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/tag-input.tsx", type: "registry:ui", content: `"use client";
 
 import { X } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { type ComponentProps, type ReactNode, useRef, useState } from "react";
 import { useFieldControl } from "@/components/ui/field";
+import { FormValue } from "@/lib/form-value";
 import { useControllableState } from "@/lib/use-controllable-state";
 import { cn, spring } from "@/lib/utils";
 
@@ -15006,6 +15369,7 @@ export function Tag({
 			)}
 		>
 			<span className="truncate">{children}</span>
+
 			{onRemove && (
 				<button
 					type="button"
@@ -15045,7 +15409,7 @@ type TagInputProps = Omit<
 
 /**
  * Free-form tags: type and press Enter or a separator; paste a list to add many; Backspace in an
- * empty input removes the last tag. \`name\` submits one hidden input per tag.
+ * empty input removes the last tag. \`name\` submits one value per tag; \`required\` needs at least one.
  */
 export function TagInput({
 	value: valueProp,
@@ -15062,7 +15426,8 @@ export function TagInput({
 	onBlur,
 	...rest
 }: TagInputProps) {
-	const props = useFieldControl(rest);
+	const { required, ...props } = useFieldControl(rest);
+	const [invalid, setInvalid] = useState(false);
 	const input = useRef<HTMLInputElement>(null);
 	const [tags, set] = useControllableState(valueProp, defaultValue, onValueChange);
 	const [draft, setDraft] = useState("");
@@ -15111,11 +15476,14 @@ export function TagInput({
 					</Tag>
 				))}
 			</AnimatePresence>
+
 			<input
 				ref={input}
 				type="text"
 				data-slot="tag-input"
 				{...props}
+				aria-required={required}
+				aria-invalid={props["aria-invalid"] || (invalid && !tags.length) || undefined}
 				// readOnly, not disabled: Backspace still has to remove tags at the limit.
 				readOnly={full || props.readOnly}
 				placeholder={full ? undefined : placeholder}
@@ -15150,7 +15518,19 @@ export function TagInput({
 				}}
 				className="h-6 min-w-20 flex-1 bg-transparent px-1 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
 			/>
-			{name && tags.map((tag) => <input key={tag} type="hidden" name={name} value={tag} />)}
+
+			{name &&
+				tags.map((tag) => (
+					<input key={tag} type="hidden" name={name} value={tag} disabled={props.disabled} />
+				))}
+
+			<FormValue
+				value={tags.join(",")}
+				required={required}
+				disabled={props.disabled}
+				anchor={input}
+				onInvalid={() => setInvalid(true)}
+			/>
 		</div>
 	);
 }
@@ -15252,15 +15632,19 @@ function Line({
 			{line.time && (
 				<span className="mr-3 text-muted-foreground tabular-nums select-none">{line.time}</span>
 			)}
+
 			{line.kind === "command" && (
 				<span className="mr-2 text-muted-foreground select-none">{prompt}</span>
 			)}
+
 			{kind.glyph && (
 				<span aria-hidden="true" className={cn("mr-2", kind.glyphClass)}>
 					{kind.glyph}
 				</span>
 			)}
+
 			{text}
+
 			{cursor && <Cursor />}
 		</div>
 	);
@@ -15392,6 +15776,7 @@ export function Terminal({
 								<Line key={key(item, i)} line={item} prompt={prompt} />
 							))}
 						</div>
+
 						<div aria-hidden="true" data-typewriter-animated="">
 							{lines
 								.slice(0, at.line + 1)
@@ -15408,8 +15793,10 @@ export function Terminal({
 										/>
 									) : null,
 								)}
+
 							{done && <Line line={{ kind: "command", text: "" }} prompt={prompt} cursor />}
 						</div>
+
 						<div aria-hidden="true" data-typewriter-fallback="" className="hidden">
 							{lines.map((item, i) => (
 								<Line key={key(item, i)} line={item} prompt={prompt} />
@@ -15431,6 +15818,7 @@ export function Terminal({
 					lines.map((item, i) => <Line key={key(item, i)} line={item} prompt={prompt} />)
 				)}
 			</div>
+
 			<AnimatePresence>
 				{log && behind && (
 					<motion.button
@@ -15516,9 +15904,11 @@ export function Testimonial({
 			>
 				{children}
 			</Quote>
+
 			{others && others.length > 0 && (
 				<div className="flex flex-wrap items-center gap-3 border-t pt-5">
 					<AvatarGroup users={others} max={5} size="sm" />
+
 					{othersLabel && <p className="text-muted-foreground text-sm">{othersLabel}</p>}
 				</div>
 			)}
@@ -15600,11 +15990,13 @@ export function TextSwap({
 			aria-live={isControlled ? "polite" : undefined}
 		>
 			<span className="sr-only">{currentItem}</span>
+
 			{list.map((item) => (
 				<span key={item} aria-hidden="true" className="invisible [grid-area:1/1]">
 					{item}
 				</span>
 			))}
+
 			<AnimatePresence mode="popLayout" initial={false}>
 				<motion.span
 					key={\`\${activeIndex}-\${currentItem}\`}
@@ -15629,7 +16021,7 @@ export function TextSwap({
 		</span>
 	);
 }
-` }] }, textarea: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "textarea", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", docs: "https://kznlabs.github.io/labsUI/components/forms", usage: '<Label htmlFor="email">Email</Label><Input id="email" type="email" aria-invalid={err} />', examples: [{ name: "sign-up.tsx", code: `import { Input } from "@/components/ui/input";
+` }] }, textarea: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "textarea", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", docs: "https://kznlabs.github.io/labsUI/components/forms", usage: '<Label htmlFor="email">Email</Label><Input id="email" type="email" aria-invalid={err} /><Textarea aria-label="Bio" maxLength={280} showCount /><Switch aria-label="Notifications" checked={on} onCheckedChange={setOn} />', examples: [{ name: "sign-up.tsx", code: `import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
@@ -15697,6 +16089,7 @@ export function Textarea({ className, showCount, onChange, ...rest }: TextareaPr
 	return (
 		<span className="relative block w-full min-w-0">
 			{textarea}
+
 			<span
 				id={countId}
 				className={cn(
@@ -15714,7 +16107,7 @@ export function Textarea({ className, showCount, onChange, ...rest }: TextareaPr
 		</span>
 	);
 }
-` }] }, theme: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "theme", type: "registry:lib", description: "Retints primary, focus rings, selection and switches app-wide. Persists like the theme.", api: { entries: [{ kind: "function", name: "isDark", signature: "isDark() => boolean" }, { kind: "function", name: "setTheme", signature: "setTheme(theme: Theme) => void" }, { kind: "function", name: "subscribeTheme", signature: "subscribeTheme(callback: () => void) => () => void" }, { kind: "function", name: "getAccent", signature: 'getAccent() => "blue" | "green" | "orange" | "pink" | "purple" | "red" | "slate" | "yellow"' }, { kind: "function", name: "setAccent", signature: 'setAccent(accent: "blue" | "green" | "orange" | "pink" | "purple" | "red" | "slate" | "yellow") => void', description: "Retints primary, focus rings, selection and switches app-wide. Persists like the theme." }], types: { Theme: '"light" | "dark"' } }, dependencies: [], registryDependencies: [], files: [{ path: "lib/theme.ts", type: "registry:lib", content: `type Theme = "light" | "dark";
+` }] }, theme: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "theme", type: "registry:lib", description: "Retints primary, focus rings, selection and switches app-wide. Persists like the theme.", api: { entries: [{ kind: "function", name: "isDark", signature: "isDark() => boolean" }, { kind: "function", name: "setTheme", signature: "setTheme(theme: Theme) => void" }, { kind: "function", name: "subscribeTheme", signature: "subscribeTheme(callback: () => void) => () => void" }, { kind: "function", name: "getAccent", signature: 'getAccent() => "blue" | "green" | "orange" | "pink" | "purple" | "red" | "slate" | "yellow"' }, { kind: "function", name: "setAccent", signature: 'setAccent(accent: "blue" | "green" | "orange" | "pink" | "purple" | "red" | "slate" | "yellow") => void', description: "Retints primary, focus rings, selection and switches app-wide. Persists like the theme." }], types: { Theme: '"light" | "dark"' } }, dependencies: [], registryDependencies: [], files: [{ path: "lib/theme.ts", type: "registry:lib", content: `export type Theme = "light" | "dark";
 
 const KEY = "theme";
 const EVENT = "themechange";
@@ -15909,6 +16302,7 @@ export function TimelineItem({
 				aria-hidden="true"
 				className="absolute top-7 bottom-1 left-3 w-px -translate-x-1/2 bg-border group-last/item:hidden"
 			/>
+
 			<span
 				aria-hidden="true"
 				className={cn(
@@ -15920,6 +16314,7 @@ export function TimelineItem({
 			>
 				{icon}
 			</span>
+
 			<div className="grid min-w-0 gap-1 pt-0.5">
 				{time &&
 					(dateTime ? (
@@ -15929,7 +16324,9 @@ export function TimelineItem({
 					) : (
 						<span className="text-muted-foreground text-xs tabular-nums">{time}</span>
 					))}
+
 				<p className="font-medium text-sm leading-snug">{title}</p>
+
 				{children && (
 					<div className="text-muted-foreground text-sm leading-relaxed">{children}</div>
 				)}
@@ -15938,12 +16335,12 @@ export function TimelineItem({
 	);
 }
 ` }] }, toast: { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "toast", type: "registry:ui", title: "Toast", description: "Stacked notifications. Hover to expand, swipe to dismiss, timers pause on hover.", docs: "https://kznlabs.github.io/labsUI/components/toast", mount: "<Toaster />", usage: 'toast.success("Saved", { description: "All changes synced", action: { label: "Undo", onClick } })', examples: [{ name: "save.tsx", code: `import { toast } from "@/components/ui/toast";
-export function notifySaved() {
+export function notifySaved(undo: () => void) {
   toast.success("Changes saved", {
     description: "All changes synced",
     action: { label: "Undo", onClick: undo },
   });
-}` }], api: { entries: [{ kind: "function", name: "toast", signature: 'toast(title: ReactNode, opts?: Partial<Omit<ToastData, "id" | "title">>) => number', description: '`toast("Saved")`, `toast.success(title, { description, action, duration })`, `toast.loading(title)`, `toast.promise(p, { loading, success, error })`, `toast.dismiss(id?)`.' }, { kind: "component", name: "Toaster", props: [], description: "Mount once (root layout). Stacked toasts: hover, focus or a tap expands, swipe dismisses." }], types: { ToastData: "{ id: number; title: ReactNode; description?: ReactNode; variant: Variant; duration: number; action?: { label: string; onClick: () => void }; }" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/use-dismiss.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/toast.tsx", type: "registry:ui", content: `"use client";
+}` }], api: { entries: [{ kind: "function", name: "toast", signature: 'toast(title: ReactNode, opts?: Partial<Omit<ToastData, "id" | "title">>) => number', description: '`toast("Saved")`, `toast.success(title, { description, action, duration })`, `toast.loading(title)`, `toast.promise(p, { loading, success, error })`, `toast.dismiss(id?)`.' }, { kind: "component", name: "Toaster", props: [], description: "Mount once (root layout). Stacked toasts: hover, focus or a tap expands, swipe dismisses." }], types: { ToastData: "{ id: number; title: ReactNode; description?: ReactNode; variant: ToastVariant; duration: number; action?: { label: string; onClick: () => void }; }" } }, dependencies: ["lucide-react@1.63.0", "motion@14.7.1"], registryDependencies: ["https://kznlabs.github.io/labsUI/r/use-dismiss.json", "https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "components/ui/toast.tsx", type: "registry:ui", content: `"use client";
 
 import { CircleAlert, CircleCheck, Info, Loader2, X } from "lucide-react";
 import { AnimatePresence, animate, motion, type PanInfo, useMotionValue } from "motion/react";
@@ -15960,12 +16357,12 @@ import { cn, material, spring } from "@/lib/utils";
 
 /* ---------- store (module-level, no provider needed) ---------- */
 
-type Variant = "default" | "success" | "error" | "info" | "loading";
-type ToastData = {
+export type ToastVariant = "default" | "success" | "error" | "info" | "loading";
+export type ToastData = {
 	id: number;
 	title: ReactNode;
 	description?: ReactNode;
-	variant: Variant;
+	variant: ToastVariant;
 	/** ms; Infinity = sticky. */
 	duration: number;
 	action?: { label: string; onClick: () => void };
@@ -16235,13 +16632,16 @@ function ToastItem({ toast: data, index, y, expanded, frontHeight, total, onHeig
 				className="flex items-start gap-3 p-4"
 			>
 				{icons[data.variant] && <span className="mt-0.5">{icons[data.variant]}</span>}
+
 				<div
 					className="flex min-w-0 flex-1 flex-col gap-0.5"
 					role={data.variant === "error" ? "alert" : undefined}
 				>
 					<p className="font-medium text-sm">{data.title}</p>
+
 					{data.description && <p className="text-muted-foreground text-sm">{data.description}</p>}
 				</div>
+
 				{data.action && (
 					<button
 						type="button"
@@ -16254,12 +16654,14 @@ function ToastItem({ toast: data, index, y, expanded, frontHeight, total, onHeig
 						{data.action.label}
 					</button>
 				)}
+
 				<button
 					type="button"
 					onClick={() => dismiss(data.id)}
 					className="-mt-1 -mr-1 shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground opacity-0 outline-none transition-opacity hover:text-foreground focus-visible:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 group-hover:opacity-100"
 				>
 					<X className="size-3.5" aria-hidden="true" />
+
 					<span className="sr-only">Dismiss</span>
 				</button>
 			</motion.div>
@@ -16405,6 +16807,7 @@ export function ToggleGroup(props: ToggleGroupProps) {
 						className="-z-10 absolute inset-y-0.5 left-0 rounded-md bg-raised shadow-sm ring-[0.5px] ring-raised-ring"
 					/>
 				)}
+
 				{children}
 			</div>
 		</GroupContext>
@@ -16609,9 +17012,11 @@ export function Tooltip({
 			{...touchHandlers}
 		>
 			{children}
+
 			<span id={id} hidden>
 				{content}
 			</span>
+
 			{mounted &&
 				createPortal(
 					<AnimatePresence>
@@ -16784,12 +17189,15 @@ export function Typewriter({
 	return (
 		<span className={cn("inline-flex items-baseline", className)}>
 			<span className="sr-only">{fullText}</span>
+
 			<span aria-hidden="true" data-typewriter-animated="">
 				{displayed}
 			</span>
+
 			<span aria-hidden="true" data-typewriter-fallback="" className="hidden">
 				{phrases[0]}
 			</span>
+
 			{cursor && (
 				<span
 					aria-hidden="true"
@@ -16808,24 +17216,24 @@ export function Typewriter({
 flipped when it doesn't fit, clamped to the viewport, kept in place on scroll and resize.
 Measures before paint, so nothing jumps.`, api: { entries: [{ kind: "function", name: "useAnchor", signature: `useAnchor(open: boolean, anchor: RefObject<HTMLElement | null>, floating: RefObject<HTMLElement | null>, { align, side: preferred, offset }?: {
     align?: "center" | "end" | "start" | undefined;
-    side?: Side | undefined;
+    side?: AnchorSide | undefined;
     offset?: number | undefined;
-}) => Placement`, description: `Fixed-position coordinates for a floating panel next to its anchor: on the preferred side,
+}) => AnchorPlacement`, description: `Fixed-position coordinates for a floating panel next to its anchor: on the preferred side,
 flipped when it doesn't fit, clamped to the viewport, kept in place on scroll and resize.
-Measures before paint, so nothing jumps.` }], types: { Side: '"bottom" | "top"', Placement: "{ top: number; left: number; width: number; side: Side; }" } }, dependencies: [], registryDependencies: ["https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "lib/use-anchor.ts", type: "registry:hook", content: `"use client";
+Measures before paint, so nothing jumps.` }], types: { AnchorSide: '"bottom" | "top"', AnchorPlacement: "{ top: number; left: number; width: number; side: AnchorSide; }" } }, dependencies: [], registryDependencies: ["https://kznlabs.github.io/labsUI/r/utils.json"], files: [{ path: "lib/use-anchor.ts", type: "registry:hook", content: `"use client";
 
 import { type RefObject, useLayoutEffect, useState } from "react";
 import { clamp } from "@/lib/utils";
 
-type Side = "bottom" | "top";
+export type AnchorSide = "bottom" | "top";
 
-type Placement = {
+export type AnchorPlacement = {
 	top: number;
 	left: number;
 	/** Anchor width, for \`min-width\` matching (Select). */
 	width: number;
 	/** Side actually used: the preferred one, or the other for lack of room. */
-	side: Side;
+	side: AnchorSide;
 };
 
 const MARGIN = 8;
@@ -16843,9 +17251,9 @@ export function useAnchor(
 		align = "start",
 		side: preferred = "bottom",
 		offset = 6,
-	}: { align?: "start" | "center" | "end"; side?: Side; offset?: number } = {},
+	}: { align?: "start" | "center" | "end"; side?: AnchorSide; offset?: number } = {},
 ) {
-	const [pos, setPos] = useState<Placement>({
+	const [pos, setPos] = useState<AnchorPlacement>({
 		top: -9999,
 		left: -9999,
 		width: 0,
@@ -16868,7 +17276,7 @@ export function useAnchor(
 			const above = anchorRect.top - offset - height;
 			const fitsBelow = below + height <= innerHeight - MARGIN;
 			const fitsAbove = above >= MARGIN;
-			const side: Side =
+			const side: AnchorSide =
 				preferred === "bottom"
 					? fitsBelow || !fitsAbove
 						? "bottom"
@@ -16955,17 +17363,17 @@ export function useDisclosure(defaultOpen = false) {
 		props: { open, onOpenChange: setOpen },
 	};
 }
-` }] }, "use-dismiss": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "use-dismiss", type: "registry:hook", description: "Inside one of `refs` (panel first, then its trigger), or inside a floating child opened from\nthe panel: a Select list or menu portals out, but it is marked `data-floating`.", api: { entries: [{ kind: "function", name: "isWithin", signature: "isWithin(refs: Refs, target: Node | null) => boolean", description: "Inside one of `refs` (panel first, then its trigger), or inside a floating child opened from\nthe panel: a Select list or menu portals out, but it is marked `data-floating`." }, { kind: "function", name: "useDismiss", signature: "useDismiss(open: boolean, refs: Refs, onDismiss: () => void) => void", description: "Closes a floating panel on a pointerdown outside it, its trigger and its floating children." }], types: { Refs: "readonly RefObject<HTMLElement | null>[]" } }, dependencies: [], registryDependencies: [], files: [{ path: "lib/use-dismiss.ts", type: "registry:hook", content: `"use client";
+` }] }, "use-dismiss": { $schema: "https://kznlabs.github.io/labsUI/r/registry-item.schema.json", name: "use-dismiss", type: "registry:hook", description: "Inside one of `refs` (panel first, then its trigger), or inside a floating child opened from\nthe panel: a Select list or menu portals out, but it is marked `data-floating`.", api: { entries: [{ kind: "function", name: "isWithin", signature: "isWithin(refs: DismissRefs, target: Node | null) => boolean", description: "Inside one of `refs` (panel first, then its trigger), or inside a floating child opened from\nthe panel: a Select list or menu portals out, but it is marked `data-floating`." }, { kind: "function", name: "useDismiss", signature: "useDismiss(open: boolean, refs: DismissRefs, onDismiss: () => void) => void", description: "Closes a floating panel on a pointerdown outside it, its trigger and its floating children." }], types: { DismissRefs: "readonly RefObject<HTMLElement | null>[]" } }, dependencies: [], registryDependencies: [], files: [{ path: "lib/use-dismiss.ts", type: "registry:hook", content: `"use client";
 
 import { type RefObject, useEffect, useEffectEvent } from "react";
 
-type Refs = readonly RefObject<HTMLElement | null>[];
+export type DismissRefs = readonly RefObject<HTMLElement | null>[];
 
 /**
  * Inside one of \`refs\` (panel first, then its trigger), or inside a floating child opened from
  * the panel: a Select list or menu portals out, but it is marked \`data-floating\`.
  */
-export function isWithin(refs: Refs, target: Node | null) {
+export function isWithin(refs: DismissRefs, target: Node | null) {
 	if (!target) return false;
 	if (refs.some((ref) => ref.current?.contains(target))) return true;
 
@@ -16975,7 +17383,7 @@ export function isWithin(refs: Refs, target: Node | null) {
 }
 
 /** Closes a floating panel on a pointerdown outside it, its trigger and its floating children. */
-export function useDismiss(open: boolean, refs: Refs, onDismiss: () => void) {
+export function useDismiss(open: boolean, refs: DismissRefs, onDismiss: () => void) {
 	// Effect events, an inline refs array or callback can't re-subscribe every render.
 	const outside = useEffectEvent((event: PointerEvent) => {
 		if (!isWithin(refs, event.target as Node)) onDismiss();
@@ -17009,7 +17417,7 @@ export function matchesHotkey(
 	return mod ? event.metaKey || event.ctrlKey : !event.metaKey && !event.ctrlKey;
 }
 
-type HotkeyOptions = {
+export type HotkeyOptions = {
 	/** Ignore the shortcut while typing in a field. Default: only for single keys. */
 	skipInFields?: boolean;
 };
@@ -17182,9 +17590,9 @@ export const spring = { type: "spring", stiffness: 400, damping: 30 } as const;
 export const clamp = (value: number, min: number, max: number) =>
 	Math.min(Math.max(value, min), max);
 ` }] } },
-  index: [{ name: "accent-picker", type: "registry:ui", title: "Accent Picker", description: "Accent color row: eight swatches (red to slate) that retint primary, focus rings, selection, switches and checkboxes app-wide. Persisted, applied before paint, or set your own hue with --accent-hue.", exports: ["AccentPicker"], keywords: ["accent", "app", "color", "radio", "retint", "row", "setaccent", "swatches", "that", "the", "via", "whole"], registryDependencies: ["theme", "utils"] }, { name: "accordion", type: "registry:ui", title: "Accordion", description: "Single or multiple panels with spring height animation. Closed content stays in the DOM for SEO.", exports: ["Accordion", "AccordionItem", "AccordionTrigger", "AccordionContent"], keywords: ["accordion", "accordioncontent", "accordionitem", "accordiontrigger", "allow", "and", "called", "children", "closed", "closes", "closing", "collapsible", "content", "controlled", "crawlable", "default", "defaultvalue", "every", "first", "heading", "height", "html", "independent", "inert", "item", "items", "level", "match", "matched", "mounted", "multiple", "none", "one", "only", "onvaluechange", "open", "outline", "page", "panel", "panels", "question", "remains", "render", "single", "stays", "text", "the", "time", "type", "uncontrolled", "unique", "value", "when", "while", "with", "within", "wrapping"], registryDependencies: ["use-controllable-state", "utils"] }, { name: "alert", type: "registry:ui", title: "Alert", description: "Server-safe inline banner: tinted surface, colored icon, title, description and an optional action. Info, success, warning and destructive tones follow the accent and status tokens.", exports: ["Alert", "AlertTitle", "AlertDescription"], keywords: ["action", "add", "alert", "aligned", "and", "announced", "appears", "banner", "button", "colored", "default", "description", "did", "for", "icon", "inline", "live", "load", "none", "not", "null", "pass", "region", "replaces", "response", "right", "role", "sets", "should", "slot", "small", "something", "static", "surface", "the", "tint", "tinted", "title", "tone", "user", "variant", "when"], registryDependencies: ["utils"] }, { name: "app-window", type: "registry:ui", title: "AppWindow", description: "Window container with close / minimize / zoom controls, title, custom header slot and actions. SegmentedTabs is the compact view switcher for its title bar.", exports: ["AppWindow"], keywords: ["actions", "aligned", "area", "bar", "blurred", "bodyclassname", "button", "called", "centered", "classes", "content", "control", "custom", "dot", "for", "glass", "handler", "header", "into", "matching", "maximize", "minimize", "navbar", "onclose", "onmaximize", "onminimize", "passing", "pressed", "replaces", "right", "search", "shows", "slot", "surface", "tabs", "text", "the", "title", "titlebar", "translucent", "turns", "under", "when"], registryDependencies: ["utils"] }, { name: "aspect-ratio", type: "registry:ui", title: "Aspect Ratio", description: "Server-safe box locked to a ratio (16:9 thumbnails, 9:16 clips). A direct image or video child fills it with object-cover.", exports: ["AspectRatio"], keywords: ["box", "child", "cover", "direct", "fills", "height", "img", "locked", "object", "ratio", "video", "width"], registryDependencies: ["utils"] }, { name: "attachment", type: "registry:ui", title: "Attachment & Dropzone", description: "File chips with image thumbnails or type icons, size, a springing upload bar, error state and remove; the list springs chips in and closes the gap. FileDropzone wraps a real file input: click, keyboard and the native picker work, drop and paste are checked against accept and maxSize, and dropped files land in the input so forms and Server Actions receive them.", exports: ["formatBytes", "Attachment", "AttachmentList", "FileDropzone"], keywords: ["accept", "actions", "along", "and", "are", "area", "aria", "around", "attachments", "attribute", "back", "bar", "bcp", "blocks", "both", "bottom", "browse", "button", "bytes", "called", "child", "children", "chip", "click", "content", "createobjecturl", "default", "describedby", "disabled", "download", "drop", "dropped", "drops", "each", "edge", "enforced", "enter", "error", "failed", "field", "file", "files", "fills", "for", "form", "forms", "fresh", "from", "get", "given", "hint", "href", "icon", "ids", "image", "input", "into", "invalid", "key", "least", "line", "link", "locale", "makes", "maxsize", "mime", "more", "multiple", "name", "native", "needs", "one", "onfiles", "onreject", "onremove", "out", "passed", "paste", "pdf", "picked", "picker", "picks", "place", "plain", "pressed", "progress", "real", "reason", "red", "remove", "removed", "replaces", "required", "same", "server", "sets", "show", "shows", "size", "source", "space", "spring", "springs", "src", "styling", "submit", "syntax", "text", "than", "that", "the", "them", "thumbnail", "too", "turns", "type", "types", "upload", "uploading", "url", "when", "while", "with", "work", "written"], registryDependencies: ["field", "utils"] }, { name: "avatar", type: "registry:ui", title: "Avatar", description: "Image with initials fallback on error, three sizes and online/away/busy/offline dots.", exports: ["Avatar"], keywords: ["alt", "and", "announced", "corner", "diameter", "dot", "fails", "fallback", "for", "icon", "image", "initials", "loads", "name", "overrides", "person", "presence", "show", "size", "src", "status", "text", "the", "url", "used", "while", "with"], registryDependencies: ["utils"] }, { name: "avatar-group", type: "registry:ui", title: "AvatarGroup", description: "Overlapping avatars with a +N overflow chip. Hover gently enlarges the avatar on a spring, keeping stack order.", exports: ["AvatarGroup"], keywords: ["alt", "and", "avatar", "avatars", "before", "chip", "each", "enlarges", "every", "gently", "hover", "how", "many", "max", "name", "one", "order", "overflow", "overlapping", "people", "show", "size", "spring", "stack", "staying", "the", "users", "with"], registryDependencies: ["avatar", "utils"] }, { name: "badge", type: "registry:ui", title: "Badge & Pill", description: "Minimal status tags. Rounded badge or fully rounded pill, with optional dot. pulse adds an expanding live-status ring.", exports: ["Badge"], keywords: ["and", "color", "current", "dot", "emits", "expanding", "forever", "fully", "leading", "like", "live", "needs", "pill", "pulse", "ring", "rounded", "shape", "status", "surface", "tag", "text", "the", "variant"], registryDependencies: ["utils"] }, { name: "breadcrumb", type: "registry:ui", title: "Breadcrumb", description: "Navigation trail from a list of items: links up to the current page, which is marked for assistive tech. Server-safe, custom separator.", exports: ["Breadcrumb"], keywords: ["between", "chevron", "current", "default", "drawn", "ending", "first", "item", "items", "last", "links", "list", "outermost", "page", "safe", "separator", "server", "site", "sits", "the", "trail", "where"], registryDependencies: [] }, { name: "button", type: "registry:ui", title: "Button", description: "Five variants, four sizes, spring press feedback, an animated loading spinner and in-place success state, a two-step confirm that swaps the label on first click, and a configurable swap direction. Width stays fixed to the longest label.", exports: ["Button"], keywords: ["action", "also", "and", "aria", "armed", "before", "blur", "button", "check", "children", "click", "confirm", "confirmlabel", "confirmtimeout", "default", "defaults", "destructive", "disables", "done", "emphasis", "esc", "feedback", "fill", "first", "for", "give", "height", "icon", "irreversible", "its", "label", "left", "loading", "loadinglabel", "never", "old", "onclick", "one", "ones", "out", "padding", "per", "place", "primary", "reserved", "resets", "resize", "runs", "second", "shown", "shows", "size", "slides", "spinner", "spins", "square", "status", "step", "success", "successlabel", "swap", "swaps", "text", "the", "this", "two", "variant", "view", "where", "while", "width", "with"], registryDependencies: ["button-variants", "utils"] }, { name: "button-group", type: "registry:ui", title: "Button Group", description: "Joins buttons into one strip that shares borders, corners and active states. Horizontal or vertical.", exports: ["ButtonGroup"], keywords: ["and", "attached", "borders", "buttons", "connected", "control", "corners", "default", "fuse", "groups", "horizontal", "into", "orientation", "related", "single", "strip", "together", "toolbar", "true", "vertical"], registryDependencies: ["utils"] }, { name: "button-variants", type: "registry:ui", description: 'Button classes for non-button elements, e.g. `<a className={buttonVariants({ variant: "outline" })}>`.', exports: ["buttonVariants"], keywords: ["button", "buttonvariants", "classes", "classname", "elements", "for", "non", "outline", "variant"], registryDependencies: ["utils"] }, { name: "calendar", type: "registry:ui", title: "Calendar", description: "Month grid on the WAI-ARIA date-grid pattern: single date or range with a hover preview, min/max and custom disabled days, months that slide in from the direction of travel. Arrows, Home/End and PageUp/PageDown (+Shift for years). Hydration-safe: today is only marked in the browser.", exports: ["key", "Calendar"], keywords: ["and", "another", "any", "aria", "arrows", "autofocus", "bcp", "called", "client", "controlled", "current", "custom", "date", "datepicker", "dates", "day", "days", "default", "defaultmonth", "defaultvalue", "direction", "disabled", "displayed", "earliest", "end", "ends", "extra", "first", "focus", "for", "from", "function", "grid", "home", "hover", "into", "isdisabled", "iso", "keyboard", "latest", "like", "local", "locale", "max", "min", "mode", "monday", "month", "months", "mount", "names", "nothing", "null", "off", "one", "only", "onmonthchange", "onvaluechange", "pagedown", "pages", "pageup", "pattern", "pick", "picked", "preview", "range", "render", "rule", "saturday", "selectable", "sets", "shift", "shown", "single", "slide", "sorts", "start", "sunday", "the", "then", "this", "travel", "uncontrolled", "user", "value", "wai", "week", "weekday", "weekends", "weekstartson", "when", "with", "year", "yyyy"], registryDependencies: ["button", "use-controllable-state", "utils"] }, { name: "card", type: "registry:ui", title: "Card", description: "Composable surface: header, title, description, content and footer. Optional glass.", exports: ["Card", "CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"], keywords: ["backgrounds", "colored", "default", "directly", "fits", "follows", "glass", "heading", "level", "not", "outline", "over", "page", "place", "subtle", "textured", "that", "the", "translucency", "under", "when"], registryDependencies: ["utils"] }, { name: "carousel", type: "registry:ui", title: "Carousel", description: "Native scroll-snap row, so touch, trackpad and no-JS scrolling work, with spring-driven arrows, page dots, arrow keys and mouse drag that throws to the next snap point. APG carousel semantics: a labeled region of slides announced as 3 of 8.", exports: ["Carousel", "CarouselContent", "CarouselItem", "CarouselPrevious", "CarouselNext", "CarouselDots"], keywords: ["accessible", "all", "and", "announced", "any", "apg", "are", "arrow", "basis", "buttons", "carousel", "css", "default", "dot", "dots", "drag", "driven", "edge", "end", "fewer", "from", "gap", "hides", "keys", "label", "labeled", "left", "mouse", "name", "native", "not", "one", "overlaid", "page", "pages", "per", "projects", "region", "rem", "right", "row", "scroll", "scrolling", "semantics", "sized", "slide", "slides", "snap", "spring", "start", "the", "there", "total", "touch", "trackpad", "two", "variables", "view", "with", "work"], registryDependencies: ["button", "utils"] }, { name: "changelog", type: "registry:block", title: "Changelog", description: "Release notes on a Timeline: newest release highlighted, changes typed New / Improved / Fixed with Badges, and a Kbd shortcut to try the headline feature. Server-safe.", exports: ["Changelog"], keywords: ["are", "badges", "changes", "first", "highlighted", "how", "kbd", "newest", "notes", "one", "release", "releases", "shows", "the", "timeline", "try", "typed", "with"], registryDependencies: ["badge", "kbd", "timeline", "utils"] }, { name: "chart", type: "registry:ui", title: "Chart", description: "Line, area and bar (grouped or stacked) charts in SVG with a colorblind-validated eight-color palette that keeps each series' color. Crosshair tooltip listing every series, arrow-key readout, legend that hides series, direct end labels, a table view, and spring transitions between data.", exports: ["Chart"], keywords: ["add", "and", "are", "area", "areas", "arrow", "assistive", "axis", "bar", "bars", "bcp", "can", "captions", "categorical", "category", "chart", "charts", "compact", "crosshair", "currency", "data", "direct", "each", "eight", "end", "every", "filled", "fold", "for", "format", "grouping", "height", "hides", "index", "instead", "into", "key", "keys", "label", "labels", "legend", "line", "lines", "listing", "locale", "mark", "most", "names", "notation", "numbers", "object", "one", "only", "other", "pages", "palette", "past", "per", "plot", "plus", "props", "render", "row", "serializable", "series", "server", "split", "stack", "stacked", "style", "svg", "table", "tail", "tech", "that", "the", "them", "ticks", "too", "tooltip", "type", "usd", "value", "view", "with"], registryDependencies: ["button", "table", "use-dismiss", "utils"] }, { name: "checkbox", type: "registry:ui", title: "Checkbox", description: "Native checkbox with a spring-drawn check mark and an indeterminate state for select-all rows. Controlled or uncontrolled; submits with forms.", exports: ["Checkbox"], keywords: ["all", "called", "check", "checkbox", "checked", "controlled", "dash", "defaultchecked", "drawn", "field", "first", "indeterminate", "inside", "mixed", "native", "new", "oncheckedchange", "pair", "render", "rows", "select", "selected", "shows", "some", "spring", "state", "the", "uncontrolled", "with", "works"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "clip-card", type: "registry:block", title: "Clip Card", description: "Video tile: AspectRatio thumbnail (16:9 or 9:16), duration Badge, watched Progress along the bottom, and a ContextMenu of actions.", exports: ["ClipCard"], keywords: ["accessible", "actions", "ago", "along", "also", "and", "aspectratio", "badge", "bar", "bottom", "card", "click", "clip", "clips", "context", "contextmenuitem", "days", "duration", "f10", "film", "for", "glyph", "height", "how", "img", "items", "menu", "meta", "much", "name", "one", "opens", "print", "progress", "ratio", "right", "shift", "small", "stands", "the", "them", "thin", "thumbnail", "tile", "title", "under", "vertical", "video", "views", "was", "watched", "width", "without"], registryDependencies: ["aspect-ratio", "badge", "context-menu", "progress", "utils"] }, { name: "code", type: "registry:ui", title: "Code", description: "Shiki-highlighted code that follows light and dark through light-dark() token colors, as a block, an inline one-liner or a tabbed file panel. Line numbers (from any start line), tinted lines with an accent bar, <mark>ed words or column ranges, and per-line notes in a tooltip that keyboard users can tab to. Optional Prettier at display time; copy hands out exactly what is shown.", exports: ["CopyButton", "Code", "CodePanel"], keywords: ["accessible", "active", "add", "all", "and", "animates", "annotations", "bar", "bash", "before", "behind", "block", "body", "build", "button", "clipboard", "code", "collapse", "copied", "copy", "dark", "default", "dom", "each", "every", "excerpts", "file", "files", "first", "focus", "fold", "for", "format", "formatted", "from", "gets", "ghost", "gutter", "header", "highlight", "highlightcode", "highlighted", "highlighting", "hover", "ignored", "inline", "inside", "into", "its", "json", "keep", "label", "language", "least", "left", "light", "line", "linenumbers", "lines", "loads", "longer", "made", "many", "mark", "marks", "name", "never", "note", "notes", "number", "numbers", "one", "options", "own", "page", "paint", "panel", "per", "place", "prettier", "primary", "ranges", "refer", "registry", "remember", "renders", "run", "scrolling", "scrolls", "server", "sets", "shared", "shiki", "show", "source", "stays", "switching", "syntax", "tab", "terminal", "text", "than", "that", "the", "themes", "this", "time", "tint", "tokens", "too", "touch", "tsx", "turns", "variant", "vertically", "wheel", "with", "words", "wrapped", "written"], registryDependencies: ["button", "highlight", "overflow-focus", "tabs", "tooltip", "utils"] }, { name: "collapsible", type: "registry:ui", title: "Collapsible", description: "A single show/hide region with a spring height animation and rotating chevron. Controlled or uncontrolled; closed content stays in the DOM for SEO.", exports: ["Collapsible", "CollapsibleTrigger", "CollapsibleContent"], keywords: ["after", "and", "called", "chevron", "children", "closed", "collapsiblecontent", "collapsibletrigger", "content", "controlled", "crawlable", "default", "defaultopen", "first", "height", "hide", "html", "inert", "label", "mounted", "one", "onopenchange", "open", "pair", "region", "remains", "render", "rotating", "show", "springs", "state", "stays", "that", "the", "toggles", "trigger", "true", "uncontrolled", "when", "while", "with"], registryDependencies: ["use-controllable-state", "utils"] }, { name: "combobox", type: "registry:ui", title: "Combobox", description: "A Select you can type into: the query filters by label and keywords (prefix matches first), arrows move, Enter picks. multiple keeps the list open and shows picks as removable tags. Submits through hidden inputs.", exports: ["Combobox"], keywords: ["accessible", "and", "aria", "backspace", "blocks", "called", "can", "choices", "closes", "controlled", "defaultvalue", "describedby", "disabled", "down", "emptytext", "enter", "error", "esc", "every", "field", "fills", "filtered", "filters", "first", "form", "from", "hidden", "hint", "ids", "input", "inputs", "into", "invalid", "keeps", "label", "last", "list", "matches", "move", "multiple", "name", "needs", "nothing", "one", "onvaluechange", "open", "opening", "options", "pair", "per", "pick", "picked", "picks", "placeholder", "removable", "removes", "render", "required", "select", "sets", "show", "shown", "shows", "single", "stay", "styling", "submit", "submits", "tags", "text", "the", "there", "through", "type", "types", "typing", "uncontrolled", "user", "value", "values", "visible", "when", "with", "you"], registryDependencies: ["field", "list", "platform", "tag-input", "use-anchor", "use-controllable-state", "use-dismiss", "utils"] }, { name: "command", type: "registry:ui", title: "Command", description: "⌘K palette: filterable groups, arrow-key highlight, Enter to run, keyword matching. Inline or as CommandDialog with a global shortcut; the first Esc clears, the second closes.", exports: ["Command", "CommandInput", "CommandList", "CommandEmpty", "CommandGroup", "CommandSeparator", "CommandItem", "CommandDialog"], keywords: ["accessible", "after", "against", "and", "arrows", "but", "called", "children", "click", "close", "closes", "collapse", "command", "commanddialog", "commandempty", "commandinput", "commanditem", "commandlist", "content", "controlled", "ctrl", "defaults", "dialog", "disable", "disabled", "driven", "elsewhere", "end", "enter", "esc", "extra", "false", "filterable", "filtering", "for", "global", "group", "groups", "heading", "hidden", "hides", "home", "icon", "inline", "input", "inside", "item", "items", "its", "itself", "keepopen", "keyboard", "keywords", "label", "list", "listbox", "mac", "match", "matched", "matches", "mod", "move", "name", "none", "not", "only", "onopenchange", "onselect", "open", "option", "outside", "own", "pair", "palette", "pass", "passes", "placeholder", "preferences", "query", "results", "scrollable", "search", "selectable", "selecting", "selection", "selects", "separators", "settings", "shortcut", "shown", "shows", "stack", "state", "stay", "terms", "text", "the", "title", "toggle", "toggled", "use", "used", "value", "visible", "visually", "when", "while", "with", "would"], registryDependencies: ["dialog", "list", "search-input", "separator", "use-controllable-state", "use-hotkey", "utils"] }, { name: "confirm", type: "registry:ui", title: "Confirm", description: "Promise-based confirm dialog called like toast: await confirm({ title, description, destructive }) resolves true or false. Built on Dialog's alert mode, Cancel takes the first focus, Esc cancels, one host mounted in the layout.", exports: ["confirm", "Confirmer"], keywords: ["acting", "asks", "await", "before", "cancel", "confirm", "confirmer", "delete", "destructive", "esc", "false", "for", "host", "layout", "mount", "mounted", "needs", "newer", "next", "once", "project", "remove", "resolves", "root", "title", "toaster", "true"], registryDependencies: ["button", "dialog"] }, { name: "context-menu", type: "registry:ui", title: "Context Menu", description: "Right-click menu for an area, opening at the pointer and flipping at screen edges. Shares Dropdown Menu's items, checkbox and radio items, keyboard and typeahead; Menu key or Shift+F10 opens it from the keyboard.", exports: ["ContextMenuContent", "ContextMenuItem", "ContextMenuCheckboxItem", "ContextMenuRadioGroup", "ContextMenuRadioItem", "ContextMenuLabel", "ContextMenuSeparator", "ContextMenu", "ContextMenuTrigger"], keywords: ["actions", "align", "aligned", "and", "area", "but", "called", "center", "check", "checked", "children", "click", "clickable", "closes", "contextmenucontent", "contextmenutrigger", "destructive", "disabled", "dropdownmenuradioitem", "edge", "enter", "equals", "f10", "first", "focus", "focusable", "for", "group", "groups", "hint", "icon", "irreversible", "item", "items", "its", "key", "keyboard", "label", "labels", "leading", "lines", "mark", "menu", "new", "not", "oncheckedchange", "onopenchange", "onselect", "onvaluechange", "opens", "optionally", "picked", "pointer", "press", "red", "right", "selectable", "separators", "shift", "shortcut", "shown", "shows", "state", "the", "then", "trigger", "value", "variant", "when", "with"], registryDependencies: ["dropdown-menu", "utils"] }, { name: "count-to", type: "registry:ui", title: "CountTo", description: "Springs a number up from a start value once it scrolls into view. Prefix, suffix, decimals and locale.", exports: ["CountTo"], keywords: ["after", "and", "bcp", "before", "decimal", "decimals", "digits", "dom", "final", "for", "from", "grouping", "into", "locale", "number", "once", "point", "prefix", "scrolls", "seo", "springs", "starting", "stays", "suffix", "text", "the", "value", "view"], registryDependencies: ["utils"] }, { name: "custom-cursor", type: "registry:ui", title: "Custom Cursor", description: "Optional spring cursor that expands over interactive elements. Off on touch and reduced motion.", exports: ["CustomCursor"], keywords: ["coarse", "cursor", "dot", "elements", "expands", "interactive", "motion", "mount", "nothing", "once", "opt", "over", "pointers", "reduced", "renders", "ring", "spring", "touch", "trailing", "with"], registryDependencies: ["platform", "utils"] }, { name: "data-table", type: "registry:ui", title: "Data Table", description: "Table with columns as data: search across every column, sortable headers, checkbox selection that survives paging, a ⋯ menu per row, bulk actions in the toolbar and pagination. Built from Table, SearchInput, Checkbox, DropdownMenu, Pagination and Empty.", exports: ["DataTable"], keywords: ["accessor", "across", "actions", "all", "alternate", "and", "are", "backgrounds", "box", "bulk", "called", "cell", "checkbox", "client", "column", "columns", "compose", "controlled", "controls", "data", "defaultsort", "definitions", "display", "driven", "dropdownmenuitem", "each", "every", "field", "filters", "first", "for", "friends", "getrowid", "happen", "header", "ids", "items", "its", "jane", "kept", "label", "members", "menu", "name", "names", "onselectionchange", "order", "page", "pages", "pagesize", "pagination", "paging", "pair", "per", "placeholder", "readers", "receives", "render", "right", "row", "rowactions", "rowlabel", "rows", "screen", "search", "searchable", "searchplaceholder", "select", "selectable", "selected", "selection", "server", "show", "side", "sort", "sortable", "stable", "striped", "survives", "table", "that", "the", "toolbar", "with", "yourself"], registryDependencies: ["button", "checkbox", "dropdown-menu", "empty", "pagination", "search-input", "table", "use-controllable-state", "utils"] }, { name: "date-picker", type: "registry:ui", title: "Date Picker", description: "Field-styled button that opens a Calendar in a Popover, focused on the picked day. Single or range, presets such as Last 7 days, closes once the pick is complete, and submits ISO dates through a hidden input. Works inside Field.", exports: ["DatePicker"], keywords: ["accessible", "and", "are", "aria", "bcp", "beside", "blocks", "both", "button", "calendar", "called", "client", "closes", "controlled", "date", "day", "days", "default", "defaultvalue", "describedby", "disabled", "earliest", "end", "ends", "error", "extra", "field", "fill", "fills", "first", "focused", "for", "form", "from", "function", "grid", "hidden", "hint", "htmlfor", "ids", "input", "invalid", "isdisabled", "iso", "label", "last", "latest", "let", "locale", "max", "min", "mode", "monday", "name", "needs", "nothing", "null", "off", "once", "one", "only", "onvaluechange", "opening", "opens", "optional", "pair", "pick", "picked", "placeholder", "popover", "presets", "range", "reach", "readers", "ready", "render", "required", "rule", "saturday", "selectable", "set", "sets", "shortcuts", "single", "start", "styled", "styling", "submit", "submits", "sunday", "text", "that", "the", "then", "there", "these", "through", "today", "uncontrolled", "value", "visible", "weekends", "weekstartson", "when", "with"], registryDependencies: ["calendar", "field", "input", "popover", "use-controllable-state", "utils"] }, { name: "dialog", type: "registry:ui", title: "Dialog", description: "Portal modal with blurred backdrop, spring scale-in, focus trap, Esc and scroll lock.", exports: ["useDialog", "Dialog", "DialogTrigger", "DialogClose", "useModal", "DialogContent", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription"], keywords: ["action", "alert", "alertdialog", "also", "and", "aria", "armed", "attach", "backdrop", "before", "behavior", "blur", "blurred", "body", "button", "called", "check", "children", "click", "close", "confirm", "confirmlabel", "confirmtimeout", "controlled", "corner", "default", "defaultopen", "defaults", "destructive", "dialog", "dialogclose", "dialogcontent", "dialogs", "dialogtrigger", "disables", "does", "done", "drawer", "emphasis", "esc", "feedback", "field", "fill", "first", "focus", "footer", "for", "give", "header", "height", "icon", "irreversible", "its", "label", "left", "loading", "loadinglabel", "lock", "modal", "mode", "never", "not", "off", "old", "onclick", "one", "ones", "only", "onopenchange", "open", "out", "padding", "page", "pair", "panel", "per", "place", "portal", "primary", "ref", "render", "reserved", "resets", "resize", "restore", "returned", "role", "root", "runs", "scale", "scroll", "second", "shared", "showclose", "shown", "shows", "size", "slides", "spinner", "spins", "spring", "square", "state", "status", "step", "success", "successlabel", "swap", "swaps", "tab", "text", "the", "this", "topmost", "trap", "trigger", "two", "uncontrolled", "variant", "view", "where", "while", "width", "with"], registryDependencies: ["button", "platform", "use-controllable-state", "utils"] }, { name: "drawer", type: "registry:ui", title: "Drawer", description: "Edge panel (left, right, top, bottom) that springs in and swipes away. Shares Dialog's focus trap, scroll lock and Esc handling. Sidebar uses it below md.", exports: ["Drawer", "DrawerTrigger", "DrawerClose", "DrawerTitle", "DrawerDescription", "DrawerContent", "DrawerHeader", "DrawerBody", "DrawerFooter"], keywords: ["action", "also", "and", "anywhere", "aria", "armed", "backdrop", "before", "blur", "body", "bottom", "button", "called", "can", "check", "children", "click", "close", "confirm", "confirmlabel", "confirmtimeout", "content", "controlled", "corner", "default", "defaultopen", "defaults", "destructive", "dialogclose", "dialogcontent", "dialogtrigger", "disables", "dismiss", "done", "drag", "drawer", "drawers", "edge", "emphasis", "esc", "feedback", "fill", "first", "footer", "for", "from", "give", "handle", "header", "height", "icon", "irreversible", "its", "label", "left", "loading", "loadinglabel", "never", "old", "onclick", "one", "ones", "onopenchange", "open", "out", "padding", "pair", "panel", "per", "place", "primary", "render", "reserved", "resets", "resize", "runs", "scroll", "scrolls", "second", "showclose", "shown", "shows", "side", "size", "slides", "spinner", "spins", "spring", "square", "state", "status", "step", "success", "successlabel", "swap", "swaps", "swipe", "taller", "text", "than", "that", "the", "their", "this", "top", "toward", "trigger", "two", "uncontrolled", "variant", "view", "when", "where", "while", "width", "with"], registryDependencies: ["dialog", "platform", "utils"] }, { name: "dropdown-menu", type: "registry:ui", title: "Dropdown Menu", description: "Action menu anchored to a Button: items with icons and shortcuts, checkbox and radio items, labels, separators, destructive variant. Arrow keys, typeahead, focus follows the pointer, Esc returns focus.", exports: ["MenuContext", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuCheckboxItem", "DropdownMenuRadioGroup", "DropdownMenuRadioItem", "DropdownMenuLabel", "DropdownMenuSeparator"], keywords: ["action", "actions", "align", "aligned", "also", "anchored", "and", "aria", "armed", "before", "blur", "but", "button", "called", "check", "checked", "children", "choice", "click", "closes", "closing", "confirm", "confirmlabel", "confirmtimeout", "content", "controlled", "default", "defaultopen", "defaults", "destructive", "disabled", "disables", "done", "down", "dropdownmenuradioitem", "edge", "emphasis", "enter", "equals", "esc", "feedback", "fill", "first", "for", "give", "group", "groups", "height", "hint", "icon", "irreversible", "item", "items", "its", "keeps", "keyboard", "label", "labels", "last", "leading", "left", "lines", "loading", "loadinglabel", "mark", "menu", "never", "new", "not", "old", "oncheckedchange", "onclick", "one", "ones", "onopenchange", "onselect", "onvaluechange", "open", "opens", "optionally", "out", "outside", "padding", "pair", "per", "picked", "picking", "place", "primary", "radiogroup", "red", "render", "reserved", "resets", "resize", "right", "runs", "second", "selectable", "selection", "separators", "shortcut", "shown", "shows", "size", "slides", "space", "spinner", "spins", "square", "state", "status", "step", "success", "successlabel", "swap", "swaps", "text", "the", "then", "this", "toggles", "trigger", "two", "uncontrolled", "value", "variant", "view", "when", "where", "while", "width", "with", "without"], registryDependencies: ["button", "list", "platform", "use-anchor", "use-controllable-state", "use-dismiss", "utils"] }, { name: "empty", type: "registry:ui", title: "Empty", description: "Server-safe empty state: icon tile, title, one helpful sentence and the next action. Bordered variant for empty lists and drop zones.", exports: ["Empty"], keywords: ["about", "action", "and", "app", "area", "bordered", "children", "clips", "dashed", "description", "drop", "empty", "for", "helpful", "icon", "inside", "like", "list", "next", "one", "outline", "page", "rounded", "sentence", "shown", "state", "the", "tile", "title", "what", "yet", "zone"], registryDependencies: ["utils"] }, { name: "field", type: "registry:ui", title: "Field", description: "Label, control, description and error as one unit. Controls inside (Input, Textarea, Select, Checkbox, Switch, RadioGroup) get id, aria-describedby, aria-invalid and required automatically; errors spring in and are announced.", exports: ["useFieldControl", "Field"], keywords: ["and", "aria", "automatically", "beside", "checkbox", "children", "control", "controls", "describedby", "description", "dims", "disabled", "disables", "enclosing", "error", "explicit", "field", "fills", "first", "for", "form", "from", "hint", "horizontal", "ids", "invalid", "its", "label", "makes", "marks", "match", "must", "one", "orientation", "out", "outside", "own", "picks", "props", "renders", "required", "returns", "shown", "springs", "state", "switch", "the", "unchanged", "under", "unit", "use", "when", "win", "wired", "with"], registryDependencies: ["label", "utils"] }, { name: "highlight", type: "registry:lib", description: "Lines of colored tokens, with Shiki loaded on demand. Runs anywhere: Code calls it in the\nbrowser, and a Server Component or a build can call it ahead of time and pass the result as\n`tokens`, so the browser never loads Shiki. Null for unknown languages.", exports: ["highlightCode", "languageOf"], keywords: ["ahead", "and", "anywhere", "back", "browser", "build", "call", "calls", "can", "code", "colored", "component", "demand", "extension", "falls", "file", "for", "from", "language", "languages", "lines", "loaded", "loads", "name", "never", "null", "pass", "result", "runs", "server", "shiki", "the", "time", "tokens", "tsx", "unknown", "with"], registryDependencies: [] }, { name: "hover-card", type: "registry:ui", title: "Hover Card", description: "Rich preview (profile, product, clip) that opens after a hover delay or keyboard focus. The pointer can move into the card; supplementary only.", exports: ["HoverCard"], keywords: ["acts", "align", "alignment", "avatar", "before", "bio", "can", "card", "children", "clip", "closedelay", "closes", "content", "first", "flips", "focus", "hover", "into", "keyboard", "leaves", "link", "move", "must", "once", "only", "opendelay", "opens", "pointer", "preferred", "preview", "product", "profile", "rich", "room", "second", "side", "stats", "supplementary", "tap", "the", "there", "time", "touch", "trigger", "usually", "when", "with", "without", "work"], registryDependencies: ["platform", "use-anchor", "use-dismiss", "use-hover-open", "utils"] }, { name: "input", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", exports: ["fieldClass", "Input"], keywords: ["and", "aria", "chrome", "field", "filled", "group", "handed", "inputgroup", "inside", "the", "works"], registryDependencies: ["field", "utils"] }, { name: "input-group", type: "registry:ui", title: "Input Group", description: "Server-safe wrapper that fuses an Input with icons, text (https://, USD) or buttons into one field with a shared border and focus ring. Clicking an addon focuses the input.", exports: ["InputGroup", "InputGroupAddon"], keywords: ["addons", "align", "and", "beside", "border", "button", "buttons", "clicking", "control", "data", "draws", "drops", "field", "focus", "focuses", "group", "https", "icon", "icons", "inner", "input", "its", "like", "made", "matched", "one", "own", "plain", "plus", "ring", "side", "sits", "slot", "text", "the"], registryDependencies: ["utils"] }, { name: "input-otp", type: "registry:ui", title: "Input OTP", description: "One-time code in separate slots, backed by one real input: paste and SMS autofill work, screen readers hear one field. Grouped slots, numeric or alphanumeric, characters spring in, onComplete to submit. verified turns each character into a check, then merges them into one mark.", exports: ["InputOTP"], keywords: ["accepted", "again", "allowed", "alphanumeric", "and", "announced", "are", "autocomplete", "autofill", "back", "beside", "between", "called", "change", "character", "characters", "charset", "check", "code", "controlled", "counts", "dash", "defaultvalue", "draws", "dropped", "each", "edit", "every", "false", "filled", "fires", "first", "for", "group", "groups", "input", "into", "label", "laid", "length", "mark", "merge", "merged", "number", "once", "oncomplete", "one", "only", "onvaluechange", "others", "over", "pair", "paste", "pasted", "per", "read", "readers", "real", "render", "screen", "set", "shown", "single", "sits", "slides", "slot", "slots", "sms", "submit", "the", "then", "time", "transparently", "turns", "typed", "uncontrolled", "uppercased", "value", "verified", "verifiedlabel", "via", "visual", "was", "with"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "kbd", type: "registry:ui", title: "Kbd", description: "Server-safe key caps for shortcut hints. KbdGroup nests keys per the HTML spec.", exports: ["Kbd", "KbdGroup"], keywords: ["cap", "html", "kbd", "kbdgroup", "key", "keys", "made", "nested", "one", "per", "several", "shortcut", "spec", "the"], registryDependencies: ["utils"] }, { name: "label", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", exports: ["Label"], keywords: [], registryDependencies: ["utils"] }, { name: "list", type: "registry:lib", description: "The item a navigation key moves to in a list, from the item at `index` (-1: none active).\nUndefined when the key doesn't navigate.", exports: ["listKeyTarget", "scrollIntoList"], keywords: ["active", "box", "can", "doesn", "enough", "from", "index", "item", "just", "key", "list", "moves", "moving", "navigate", "navigation", "none", "page", "scrollintoview", "scrolls", "show", "the", "undefined", "way", "when", "without"], registryDependencies: ["utils"] }, { name: "marker", type: "registry:ui", title: "Marker", description: "Highlighter-pen <mark> in four tints that wraps cleanly across lines and can draw itself on, left to right, when it scrolls into view. Highlight marks every match of a search in a string, for transcripts and search results.", exports: ["Marker", "Highlight"], keywords: ["across", "before", "case", "cleanly", "color", "delay", "draw", "drawing", "draws", "every", "first", "full", "fully", "highlight", "highlighter", "insensitive", "inside", "instant", "into", "left", "lines", "mark", "markers", "marks", "match", "motion", "one", "paragraph", "pen", "query", "reduced", "right", "scrolls", "search", "seconds", "several", "shown", "stagger", "sweeps", "term", "terms", "text", "the", "time", "view", "with", "without", "wraps"], registryDependencies: ["utils"] }, { name: "menubar", type: "registry:ui", title: "Menubar", description: "Desktop-style menu bar on the WAI-ARIA menubar pattern: one menu open at a time, hovering the next title while one is open switches to it, ← → walk the bar with or without a menu open, one Tab stop. A single highlight springs between titles; menus reuse every DropdownMenu item.", exports: ["MenubarContent", "MenubarItem", "MenubarCheckboxItem", "MenubarRadioGroup", "MenubarRadioItem", "MenubarLabel", "MenubarSeparator", "Menubar", "MenubarMenu", "MenubarTrigger"], keywords: ["actions", "align", "aligned", "analytics", "and", "another", "apart", "bar", "between", "but", "called", "check", "checked", "children", "click", "closes", "desktop", "destructive", "disabled", "down", "dropdownmenuradioitem", "edge", "enter", "equals", "first", "for", "generated", "give", "group", "groups", "highlight", "hint", "hovering", "icon", "irreversible", "item", "items", "its", "label", "labels", "last", "leading", "left", "lines", "mark", "menu", "menubarcontent", "menubartrigger", "menus", "move", "new", "not", "omitted", "oncheckedchange", "one", "onselect", "onvaluechange", "open", "opens", "optional", "optionally", "picked", "red", "right", "selectable", "separators", "shortcut", "shown", "shows", "space", "springs", "stable", "state", "style", "switches", "tell", "tests", "the", "then", "time", "title", "titles", "toggles", "trigger", "value", "variant", "when", "while", "with"], registryDependencies: ["dropdown-menu", "list", "use-indicator", "utils"] }, { name: "message-bubble", type: "registry:ui", title: "Message Bubble", description: "User/assistant chat bubbles with avatar slot, streaming dots and copyable code blocks.", exports: ["MessageBubble"], keywords: ["above", "accent", "after", "and", "animated", "are", "assistant", "attachments", "avatar", "bubble", "chat", "children", "code", "content", "dots", "from", "inline", "left", "lists", "message", "name", "next", "rich", "right", "sender", "shown", "shows", "side", "size", "slot", "streaming", "surface", "text", "the", "time", "typing", "user"], registryDependencies: ["utils"] }, { name: "meter", type: "registry:ui", title: "Meter", description: "Server-safe gauge for a value in a known range (storage, quota, server load, password strength). Colors by <meter> thresholds, or stacked segments with a legend, like a storage bar.", exports: ["Meter"], keywords: ["above", "accessible", "also", "and", "away", "bar", "below", "between", "bound", "color", "colors", "decides", "defaults", "disk", "follow", "good", "green", "high", "known", "label", "legend", "like", "load", "low", "lower", "max", "measurement", "meter", "min", "name", "not", "one", "optimum", "orange", "overrides", "parts", "password", "progress", "quota", "range", "red", "region", "right", "segments", "server", "stacked", "storage", "strength", "sum", "task", "text", "the", "their", "this", "threshold", "thresholds", "total", "two", "upper", "use", "used", "value", "valuetext", "visible", "where", "with", "within"], registryDependencies: ["utils"] }, { name: "motion-provider", type: "registry:component", exports: ["MotionProvider"], keywords: [], registryDependencies: ["utils"] }, { name: "native-select", type: "registry:ui", title: "Native Select", description: "A real <select> with option groups: native picker on phones, no-JS forms, native required validation. Where customizable select is supported (appearance: base-select), the open list gets the menu look.", exports: ["NativeSelect", "NativeSelectGroup", "NativeSelectOption"], keywords: ["appearance", "base", "browser", "custom", "customizable", "elsewhere", "forms", "gets", "group", "heading", "icons", "instead", "invalid", "label", "labeled", "list", "look", "menu", "native", "need", "open", "optgroup", "options", "phones", "picker", "real", "rendering", "required", "select", "stays", "supports", "the", "use", "user", "validation", "when", "where", "without", "works"], registryDependencies: ["field", "input", "utils"] }, { name: "navigation-menu", type: "registry:ui", title: "Navigation Menu", description: "Website top navigation on the APG disclosure pattern: plain links and panels of rich links. Hover opens after a beat, then sliding along the bar switches panels at once; every panel shares one viewport that springs to the next panel's size and position while the content slides in from the side you moved toward. Click, Enter, ↓, ← → and Esc work; closed panels keep their links in the HTML for crawlers.", exports: ["NavigationMenu", "NavigationMenuList", "NavigationMenuItem", "NavigationMenuTrigger", "NavigationMenuContent", "NavigationMenuLink"], keywords: ["active", "after", "all", "along", "and", "aria", "bar", "beat", "bold", "called", "children", "classname", "click", "closed", "closes", "content", "controlled", "crawlers", "current", "defaultvalue", "description", "down", "enter", "entry", "esc", "find", "first", "focuses", "following", "for", "generated", "hidden", "hover", "html", "icon", "inset", "into", "item", "items", "its", "left", "level", "line", "link", "links", "look", "matched", "menu", "mouse", "muted", "navigation", "omitted", "once", "one", "onvaluechange", "open", "opened", "opens", "optional", "own", "padding", "page", "pair", "panel", "panels", "pill", "plain", "readers", "rem", "render", "rich", "right", "row", "selected", "single", "size", "sliding", "space", "springs", "stable", "stay", "still", "switches", "the", "them", "then", "tile", "title", "toggle", "top", "trigger", "uncontrolled", "under", "value", "viewport", "walk", "website", "while", "with", "your"], registryDependencies: ["use-controllable-state", "use-dismiss", "use-indicator", "utils"] }, { name: "newsletter", type: "registry:block", title: "Newsletter", description: "Email signup: InputGroup with the submit Button inside, native email validation, a loading → success toast and an in-place success state on the button.", exports: ["Newsletter"], keywords: ["above", "address", "after", "and", "button", "check", "confirm", "confirms", "description", "email", "field", "for", "form", "heading", "inbox", "inputgroup", "inside", "into", "its", "line", "loading", "message", "native", "next", "onsubscribe", "place", "placeholder", "rejection", "resets", "resolves", "saved", "shows", "signup", "submit", "submitlabel", "success", "successmessage", "supporting", "text", "that", "the", "then", "title", "toast", "turns", "under", "validation", "when", "with", "your"], registryDependencies: ["button", "input", "input-group", "toast", "utils"] }, { name: "number-input", type: "registry:ui", title: "Number Input", description: "Native number field with −/+ buttons: arrow keys, min/max/step validation and form submit from the platform; clamps on blur, rounds to the step's precision.", exports: ["NumberInput"], keywords: ["amount", "and", "are", "arrows", "arrowup", "buttons", "called", "cart", "change", "controlled", "defaultvalue", "down", "field", "first", "form", "helpers", "highest", "keyboard", "lowest", "max", "min", "native", "new", "number", "onvaluechange", "pair", "pointer", "quantity", "render", "step", "submit", "tabindex", "the", "uncontrolled", "use", "users", "validation", "value", "with"], registryDependencies: ["input", "input-group", "use-controllable-state", "utils"] }, { name: "overflow-focus", type: "registry:lib", description: `Drop inside a scroll container: while the container overflows it becomes keyboard-focusable
+  index: [{ name: "accent-picker", type: "registry:ui", title: "Accent Picker", description: "Accent color row: eight swatches (red to slate) that retint primary, focus rings, selection, switches and checkboxes app-wide. Persisted, applied before paint, or set your own hue with --accent-hue.", exports: ["AccentPicker"], keywords: ["accent", "app", "color", "radio", "retint", "row", "setaccent", "swatches", "that", "the", "via", "whole"], registryDependencies: ["theme", "utils"] }, { name: "accordion", type: "registry:ui", title: "Accordion", description: "Single or multiple panels with spring height animation. Closed content stays in the DOM for SEO.", exports: ["Accordion", "AccordionItem", "AccordionTrigger", "AccordionContent"], keywords: ["accordion", "accordioncontent", "accordionitem", "accordiontrigger", "allow", "and", "called", "children", "closed", "closes", "closing", "collapsible", "content", "controlled", "crawlable", "default", "defaultvalue", "every", "first", "heading", "height", "html", "independent", "inert", "item", "items", "level", "match", "matched", "mounted", "multiple", "none", "one", "only", "onvaluechange", "open", "outline", "page", "panel", "panels", "question", "remains", "render", "single", "stays", "text", "the", "time", "type", "uncontrolled", "unique", "value", "when", "while", "with", "within", "wrapping"], registryDependencies: ["use-controllable-state", "utils"] }, { name: "alert", type: "registry:ui", title: "Alert", description: "Server-safe inline banner: tinted surface, colored icon, title, description and an optional action. Info, success, warning and destructive tones follow the accent and status tokens.", exports: ["Alert", "AlertTitle", "AlertDescription"], keywords: ["action", "add", "alert", "aligned", "and", "announced", "appears", "banner", "button", "colored", "default", "description", "did", "for", "icon", "inline", "live", "load", "none", "not", "null", "pass", "region", "replaces", "response", "right", "role", "sets", "should", "slot", "small", "something", "static", "surface", "the", "tint", "tinted", "title", "tone", "user", "variant", "when"], registryDependencies: ["utils"] }, { name: "app-window", type: "registry:ui", title: "AppWindow", description: "Window container with close / minimize / zoom controls, title, custom header slot and actions. SegmentedTabs is the compact view switcher for its title bar.", exports: ["AppWindow"], keywords: ["actions", "aligned", "area", "bar", "blurred", "bodyclassname", "button", "called", "centered", "classes", "content", "control", "custom", "dot", "for", "glass", "handler", "header", "into", "matching", "maximize", "minimize", "navbar", "onclose", "onmaximize", "onminimize", "passing", "pressed", "replaces", "right", "search", "shows", "slot", "surface", "tabs", "text", "the", "title", "titlebar", "translucent", "turns", "under", "when"], registryDependencies: ["utils"] }, { name: "aspect-ratio", type: "registry:ui", title: "Aspect Ratio", description: "Server-safe box locked to a ratio (16:9 thumbnails, 9:16 clips). A direct image or video child fills it with object-cover.", exports: ["AspectRatio"], keywords: ["box", "child", "cover", "direct", "fills", "height", "img", "locked", "object", "ratio", "video", "width"], registryDependencies: ["utils"] }, { name: "attachment", type: "registry:ui", title: "Attachment & Dropzone", description: "File chips with image thumbnails or type icons, size, a springing upload bar, error state and remove; the list springs chips in and closes the gap. FileDropzone wraps a real file input: click, keyboard and the native picker work, drop and paste are checked against accept and maxSize, and dropped files land in the input so forms and Server Actions receive them.", exports: ["formatBytes", "Attachment", "AttachmentList", "FileDropzone"], keywords: ["accept", "actions", "along", "and", "are", "area", "aria", "around", "attachments", "attribute", "back", "bar", "bcp", "blocks", "both", "bottom", "browse", "button", "bytes", "called", "child", "children", "chip", "click", "content", "createobjecturl", "default", "describedby", "disabled", "download", "drop", "dropped", "drops", "each", "edge", "enforced", "enter", "error", "failed", "field", "file", "files", "fills", "for", "form", "forms", "fresh", "from", "get", "given", "hint", "href", "icon", "ids", "image", "input", "into", "invalid", "key", "least", "line", "link", "locale", "makes", "maxsize", "mime", "more", "multiple", "name", "native", "needs", "one", "onfiles", "onreject", "onremove", "out", "passed", "paste", "pdf", "picked", "picker", "picks", "place", "plain", "pressed", "progress", "real", "reason", "red", "remove", "removed", "replaces", "required", "same", "server", "sets", "show", "shows", "size", "source", "space", "spring", "springs", "src", "styling", "submit", "submitted", "syntax", "text", "than", "that", "the", "them", "thumbnail", "too", "turns", "type", "types", "upload", "uploading", "url", "when", "while", "with", "work", "written"], registryDependencies: ["field", "utils"] }, { name: "avatar", type: "registry:ui", title: "Avatar", description: "Image with initials fallback on error, three sizes and online/away/busy/offline dots.", exports: ["Avatar"], keywords: ["alt", "and", "announced", "corner", "diameter", "dot", "fails", "fallback", "for", "icon", "image", "initials", "loads", "name", "overrides", "person", "presence", "show", "size", "src", "status", "text", "the", "url", "used", "while", "with"], registryDependencies: ["utils"] }, { name: "avatar-group", type: "registry:ui", title: "AvatarGroup", description: "Overlapping avatars with a +N overflow chip. Hover gently enlarges the avatar on a spring, keeping stack order.", exports: ["AvatarGroup"], keywords: ["alt", "and", "avatar", "avatars", "before", "chip", "each", "enlarges", "every", "gently", "hover", "how", "many", "max", "name", "one", "order", "overflow", "overlapping", "people", "show", "size", "spring", "stack", "staying", "the", "users", "with"], registryDependencies: ["avatar", "utils"] }, { name: "badge", type: "registry:ui", title: "Badge & Pill", description: "Minimal status tags. Rounded badge or fully rounded pill, with optional dot. pulse adds an expanding live-status ring.", exports: ["Badge"], keywords: ["and", "color", "current", "dot", "emits", "expanding", "forever", "fully", "leading", "like", "live", "needs", "pill", "pulse", "ring", "rounded", "shape", "status", "surface", "tag", "text", "the", "variant"], registryDependencies: ["utils"] }, { name: "breadcrumb", type: "registry:ui", title: "Breadcrumb", description: "Navigation trail from a list of items: links up to the current page, which is marked for assistive tech. Server-safe, custom separator.", exports: ["Breadcrumb"], keywords: ["between", "chevron", "current", "default", "drawn", "ending", "first", "item", "items", "last", "links", "list", "outermost", "page", "safe", "separator", "server", "site", "sits", "the", "trail", "where"], registryDependencies: [] }, { name: "button", type: "registry:ui", title: "Button", description: "Five variants, four sizes, spring press feedback, an animated loading spinner and in-place success state, a two-step confirm that swaps the label on first click, and a configurable swap direction. Width stays fixed to the longest label.", exports: ["Button"], keywords: ["action", "also", "and", "aria", "armed", "before", "blur", "both", "button", "can", "check", "children", "click", "clicks", "confirm", "confirmlabel", "confirmtimeout", "default", "defaults", "destructive", "done", "emphasis", "enter", "esc", "feedback", "fill", "first", "focusable", "for", "form", "give", "height", "icon", "ignore", "ignores", "irreversible", "its", "label", "left", "loading", "loadinglabel", "never", "old", "onclick", "one", "ones", "out", "padding", "per", "place", "primary", "reserved", "resets", "resize", "runs", "second", "shown", "shows", "size", "slides", "spinner", "spins", "square", "status", "stays", "step", "submit", "success", "successlabel", "swap", "swaps", "text", "the", "this", "twice", "two", "variant", "view", "where", "while", "width", "with"], registryDependencies: ["button-variants", "utils"] }, { name: "button-group", type: "registry:ui", title: "Button Group", description: "Joins buttons into one strip that shares borders, corners and active states. Horizontal or vertical.", exports: ["ButtonGroup"], keywords: ["and", "attached", "borders", "buttons", "connected", "control", "corners", "default", "fuse", "groups", "horizontal", "into", "orientation", "related", "single", "strip", "together", "toolbar", "true", "vertical"], registryDependencies: ["utils"] }, { name: "button-variants", type: "registry:ui", description: 'Button classes for non-button elements, e.g. `<a className={buttonVariants({ variant: "outline" })}>`.', exports: ["buttonVariants"], keywords: ["button", "buttonvariants", "classes", "classname", "elements", "for", "non", "outline", "variant"], registryDependencies: ["utils"] }, { name: "calendar", type: "registry:ui", title: "Calendar", description: "Month grid on the WAI-ARIA date-grid pattern: single date or range with a hover preview, min/max and custom disabled days, months that slide in from the direction of travel. Arrows, Home/End and PageUp/PageDown (+Shift for years). Hydration-safe: today is only marked in the browser.", exports: ["key", "Calendar"], keywords: ["and", "another", "any", "aria", "arrows", "autofocus", "bcp", "called", "client", "controlled", "current", "custom", "date", "datepicker", "dates", "day", "days", "default", "defaultmonth", "defaultvalue", "direction", "disabled", "displayed", "earliest", "end", "ends", "extra", "first", "focus", "for", "from", "function", "grid", "home", "hover", "into", "isdisabled", "iso", "keyboard", "latest", "like", "local", "locale", "max", "min", "mode", "monday", "month", "months", "mount", "names", "nothing", "null", "off", "one", "only", "onmonthchange", "onvaluechange", "pagedown", "pages", "pageup", "pattern", "pick", "picked", "preview", "range", "render", "rule", "saturday", "selectable", "sets", "shift", "shown", "single", "slide", "sorts", "start", "sunday", "the", "then", "this", "travel", "uncontrolled", "user", "value", "wai", "week", "weekday", "weekends", "weekstartson", "when", "with", "year", "yyyy"], registryDependencies: ["button", "use-controllable-state", "utils"] }, { name: "card", type: "registry:ui", title: "Card", description: "Composable surface: header, title, description, content and footer. Optional glass.", exports: ["Card", "CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"], keywords: ["backgrounds", "colored", "default", "directly", "fits", "follows", "glass", "heading", "level", "not", "outline", "over", "page", "place", "subtle", "textured", "that", "the", "translucency", "under", "when"], registryDependencies: ["utils"] }, { name: "carousel", type: "registry:ui", title: "Carousel", description: "Native scroll-snap row, so touch, trackpad and no-JS scrolling work, with spring-driven arrows, page dots, arrow keys and mouse drag that throws to the next snap point. APG carousel semantics: a labeled region of slides announced as 3 of 8.", exports: ["Carousel", "CarouselContent", "CarouselItem", "CarouselPrevious", "CarouselNext", "CarouselDots"], keywords: ["accessible", "all", "and", "announced", "any", "apg", "are", "arrow", "basis", "buttons", "carousel", "css", "default", "dot", "dots", "drag", "driven", "edge", "end", "fewer", "from", "gap", "hides", "keys", "label", "labeled", "left", "mouse", "name", "native", "not", "one", "overlaid", "page", "pages", "per", "projects", "region", "rem", "right", "row", "scroll", "scrolling", "semantics", "sized", "slide", "slides", "snap", "spring", "start", "the", "there", "total", "touch", "trackpad", "two", "variables", "view", "with", "work"], registryDependencies: ["button", "utils"] }, { name: "changelog", type: "registry:block", title: "Changelog", description: "Release notes on a Timeline: newest release highlighted, changes typed New / Improved / Fixed with Badges, and a Kbd shortcut to try the headline feature. Server-safe.", exports: ["Changelog"], keywords: ["are", "badges", "changes", "first", "highlighted", "how", "kbd", "newest", "notes", "one", "release", "releases", "shows", "the", "timeline", "try", "typed", "with"], registryDependencies: ["badge", "kbd", "timeline", "utils"] }, { name: "chart", type: "registry:ui", title: "Chart", description: "Line, area and bar (grouped or stacked) charts in SVG with a colorblind-validated eight-color palette that keeps each series' color. Crosshair tooltip listing every series, arrow-key readout, legend that hides series, direct end labels, a table view, and spring transitions between data.", exports: ["Chart"], keywords: ["add", "and", "are", "area", "areas", "arrow", "assistive", "axis", "bar", "bars", "bcp", "can", "captions", "categorical", "category", "chart", "charts", "compact", "crosshair", "currency", "data", "direct", "each", "eight", "end", "every", "filled", "fold", "for", "format", "grouping", "height", "hides", "index", "instead", "into", "key", "keys", "label", "labels", "legend", "line", "lines", "listing", "locale", "mark", "most", "names", "notation", "numbers", "object", "one", "only", "other", "pages", "palette", "past", "per", "plot", "plus", "props", "render", "row", "serializable", "series", "server", "split", "stack", "stacked", "style", "svg", "table", "tail", "tech", "that", "the", "them", "ticks", "too", "tooltip", "type", "usd", "value", "view", "with"], registryDependencies: ["button", "table", "use-dismiss", "utils"] }, { name: "checkbox", type: "registry:ui", title: "Checkbox", description: "Native checkbox with a spring-drawn check mark and an indeterminate state for select-all rows. Controlled or uncontrolled; submits with forms.", exports: ["Checkbox"], keywords: ["all", "called", "check", "checkbox", "checked", "controlled", "dash", "defaultchecked", "drawn", "field", "first", "indeterminate", "inside", "mixed", "native", "new", "oncheckedchange", "pair", "render", "rows", "select", "selected", "shows", "some", "spring", "state", "the", "uncontrolled", "with", "works"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "clip-card", type: "registry:block", title: "Clip Card", description: "Video tile: AspectRatio thumbnail (16:9 or 9:16), duration Badge, watched Progress along the bottom, and a ContextMenu of actions.", exports: ["ClipCard"], keywords: ["accessible", "actions", "ago", "along", "also", "and", "aspectratio", "badge", "bar", "bottom", "card", "click", "clip", "clips", "context", "contextmenuitem", "days", "duration", "f10", "film", "for", "glyph", "height", "how", "img", "items", "menu", "meta", "much", "name", "one", "opens", "print", "progress", "ratio", "right", "shift", "small", "stands", "the", "them", "thin", "thumbnail", "tile", "title", "under", "vertical", "video", "views", "was", "watched", "width", "without"], registryDependencies: ["aspect-ratio", "badge", "context-menu", "progress", "utils"] }, { name: "code", type: "registry:ui", title: "Code", description: "Shiki-highlighted code that follows light and dark through light-dark() token colors, as a block, an inline one-liner or a tabbed file panel. Line numbers (from any start line), tinted lines with an accent bar, <mark>ed words or column ranges, and per-line notes in a tooltip that keyboard users can tab to. Optional Prettier at display time; copy hands out exactly what is shown.", exports: ["CopyButton", "Code", "CodePanel"], keywords: ["accessible", "active", "add", "all", "and", "animates", "annotations", "bar", "bash", "before", "behind", "block", "body", "build", "button", "clipboard", "code", "collapse", "copied", "copy", "dark", "default", "dom", "each", "every", "excerpts", "file", "files", "first", "focus", "fold", "for", "format", "formatted", "from", "gets", "ghost", "gutter", "header", "highlight", "highlightcode", "highlighted", "highlighting", "hover", "ignored", "inline", "inside", "into", "its", "json", "keep", "label", "language", "least", "left", "light", "line", "linenumbers", "lines", "loads", "longer", "made", "many", "mark", "marks", "name", "never", "note", "notes", "number", "numbers", "one", "options", "own", "page", "paint", "panel", "per", "place", "prettier", "primary", "ranges", "refer", "registry", "remember", "renders", "run", "scrolling", "scrolls", "server", "sets", "shared", "shiki", "show", "source", "stays", "switching", "syntax", "tab", "terminal", "text", "than", "that", "the", "themes", "this", "time", "tint", "tokens", "too", "touch", "tsx", "turns", "variant", "vertically", "wheel", "with", "words", "wrapped", "written"], registryDependencies: ["button", "highlight", "overflow-focus", "tabs", "tooltip", "utils"] }, { name: "collapsible", type: "registry:ui", title: "Collapsible", description: "A single show/hide region with a spring height animation and rotating chevron. Controlled or uncontrolled; closed content stays in the DOM for SEO.", exports: ["Collapsible", "CollapsibleTrigger", "CollapsibleContent"], keywords: ["after", "and", "called", "chevron", "children", "closed", "collapsiblecontent", "collapsibletrigger", "content", "controlled", "crawlable", "default", "defaultopen", "first", "height", "hide", "html", "inert", "label", "mounted", "one", "onopenchange", "open", "pair", "region", "remains", "render", "rotating", "show", "springs", "state", "stays", "that", "the", "toggles", "trigger", "true", "uncontrolled", "when", "while", "with"], registryDependencies: ["use-controllable-state", "utils"] }, { name: "combobox", type: "registry:ui", title: "Combobox", description: "A Select you can type into: the query filters by label and keywords (prefix matches first), arrows move, Enter picks. multiple keeps the list open and shows picks as removable tags. Submits and validates with the form.", exports: ["Combobox"], keywords: ["accessible", "and", "aria", "backspace", "blocks", "called", "can", "choices", "closes", "controlled", "defaultvalue", "describedby", "disabled", "down", "emptytext", "enter", "entry", "error", "esc", "every", "field", "fills", "filtered", "filters", "first", "form", "from", "hint", "ids", "input", "into", "invalid", "isn", "keeps", "label", "last", "list", "matches", "move", "multiple", "name", "needs", "nothing", "one", "onvaluechange", "open", "opening", "options", "pair", "per", "pick", "picked", "picks", "placeholder", "removable", "removes", "render", "required", "select", "sets", "show", "shown", "shows", "single", "stay", "styling", "submit", "submitted", "tags", "text", "the", "there", "type", "types", "typing", "uncontrolled", "user", "value", "values", "visible", "when", "with", "you"], registryDependencies: ["field", "form-value", "list", "platform", "tag-input", "use-anchor", "use-controllable-state", "use-dismiss", "utils"] }, { name: "command", type: "registry:ui", title: "Command", description: "⌘K palette: filterable groups, arrow-key highlight, Enter to run, keyword matching. Inline or as CommandDialog with a global shortcut; the first Esc clears, the second closes.", exports: ["Command", "CommandInput", "CommandList", "CommandEmpty", "CommandGroup", "CommandSeparator", "CommandItem", "CommandDialog"], keywords: ["accessible", "after", "against", "and", "arrows", "but", "called", "children", "click", "close", "closes", "collapse", "command", "commanddialog", "commandempty", "commandinput", "commanditem", "commandlist", "content", "controlled", "ctrl", "defaults", "dialog", "disable", "disabled", "driven", "elsewhere", "end", "enter", "esc", "extra", "false", "filterable", "filtering", "for", "global", "group", "groups", "heading", "hidden", "hides", "home", "icon", "inline", "input", "inside", "item", "items", "its", "itself", "keepopen", "keyboard", "keywords", "label", "list", "listbox", "mac", "match", "matched", "matches", "mod", "move", "name", "none", "not", "only", "onopenchange", "onselect", "open", "option", "outside", "own", "pair", "palette", "pass", "passes", "placeholder", "preferences", "query", "results", "scrollable", "search", "selectable", "selecting", "selection", "selects", "separators", "settings", "shortcut", "shown", "shows", "stack", "state", "stay", "terms", "text", "the", "title", "toggle", "toggled", "use", "used", "value", "visible", "visually", "when", "while", "with", "would"], registryDependencies: ["dialog", "list", "search-input", "separator", "use-controllable-state", "use-hotkey", "utils"] }, { name: "confirm", type: "registry:ui", title: "Confirm", description: "Promise-based confirm dialog called like toast: await confirm({ title, description, destructive }) resolves true or false. Built on Dialog's alert mode, Cancel takes the first focus, Esc cancels, one host mounted in the layout.", exports: ["confirm", "Confirmer"], keywords: ["acting", "asks", "await", "before", "cancel", "confirm", "confirmer", "delete", "destructive", "esc", "false", "for", "host", "layout", "mount", "mounted", "needs", "newer", "next", "once", "project", "remove", "resolves", "root", "title", "toaster", "true"], registryDependencies: ["button", "dialog"] }, { name: "context-menu", type: "registry:ui", title: "Context Menu", description: "Right-click menu for an area, opening at the pointer and flipping at screen edges. Shares Dropdown Menu's items, checkbox and radio items, keyboard and typeahead; Menu key or Shift+F10 opens it from the keyboard.", exports: ["ContextMenuContent", "ContextMenuItem", "ContextMenuCheckboxItem", "ContextMenuRadioGroup", "ContextMenuRadioItem", "ContextMenuLabel", "ContextMenuSeparator", "ContextMenu", "ContextMenuTrigger"], keywords: ["actions", "align", "aligned", "and", "area", "but", "called", "center", "check", "checked", "children", "click", "clickable", "closes", "contextmenucontent", "contextmenutrigger", "destructive", "disabled", "dropdownmenuradioitem", "edge", "enter", "equals", "f10", "first", "focus", "focusable", "for", "group", "groups", "hint", "icon", "irreversible", "item", "items", "its", "key", "keyboard", "label", "labels", "leading", "lines", "mark", "menu", "new", "not", "oncheckedchange", "onopenchange", "onselect", "onvaluechange", "opens", "optionally", "picked", "pointer", "press", "red", "right", "selectable", "separators", "shift", "shortcut", "shown", "shows", "state", "the", "then", "trigger", "value", "variant", "when", "with"], registryDependencies: ["dropdown-menu", "utils"] }, { name: "count-to", type: "registry:ui", title: "CountTo", description: "Springs a number up from a start value once it scrolls into view. Prefix, suffix, decimals and locale.", exports: ["CountTo"], keywords: ["after", "and", "bcp", "before", "decimal", "decimals", "digits", "dom", "final", "for", "from", "grouping", "into", "locale", "number", "once", "point", "prefix", "scrolls", "seo", "springs", "starting", "stays", "suffix", "text", "the", "value", "view"], registryDependencies: ["utils"] }, { name: "custom-cursor", type: "registry:ui", title: "Custom Cursor", description: "Optional spring cursor that expands over interactive elements. Off on touch and reduced motion.", exports: ["CustomCursor"], keywords: ["coarse", "cursor", "dot", "elements", "expands", "interactive", "motion", "mount", "nothing", "once", "opt", "over", "pointers", "reduced", "renders", "ring", "spring", "touch", "trailing", "with"], registryDependencies: ["platform", "utils"] }, { name: "data-table", type: "registry:ui", title: "Data Table", description: "Table with columns as data: search across every column, sortable headers, checkbox selection that survives paging, a ⋯ menu per row, bulk actions in the toolbar and pagination. Built from Table, SearchInput, Checkbox, DropdownMenu, Pagination and Empty.", exports: ["DataTable"], keywords: ["accessor", "across", "actions", "all", "alternate", "and", "are", "backgrounds", "box", "bulk", "called", "cell", "checkbox", "client", "column", "columns", "compose", "controlled", "controls", "data", "defaultsort", "definitions", "display", "driven", "dropdownmenuitem", "each", "every", "field", "filters", "first", "for", "friends", "getrowid", "happen", "header", "ids", "items", "its", "jane", "kept", "label", "members", "menu", "name", "names", "onselectionchange", "order", "page", "pages", "pagesize", "pagination", "paging", "pair", "per", "placeholder", "readers", "receives", "render", "right", "row", "rowactions", "rowlabel", "rows", "screen", "search", "searchable", "searchplaceholder", "select", "selectable", "selected", "selection", "server", "show", "side", "sort", "sortable", "stable", "striped", "survives", "table", "that", "the", "toolbar", "with", "yourself"], registryDependencies: ["button", "checkbox", "dropdown-menu", "empty", "pagination", "search-input", "table", "use-controllable-state", "utils"] }, { name: "date-picker", type: "registry:ui", title: "Date Picker", description: "Field-styled button that opens a Calendar in a Popover, focused on the picked day. Single or range, presets such as Last 7 days, closes once the pick is complete, and submits ISO dates with the form. Works inside Field.", exports: ["DatePicker"], keywords: ["accessible", "and", "are", "aria", "bcp", "beside", "blocks", "both", "button", "calendar", "called", "client", "closes", "controlled", "date", "day", "days", "default", "defaultvalue", "describedby", "disabled", "earliest", "end", "ends", "error", "extra", "field", "fill", "fills", "first", "focused", "for", "form", "from", "function", "grid", "hint", "htmlfor", "ids", "invalid", "isdisabled", "isn", "iso", "label", "last", "latest", "let", "locale", "max", "min", "mode", "monday", "name", "needs", "nothing", "null", "off", "once", "one", "only", "onvaluechange", "opening", "opens", "optional", "pair", "pick", "picked", "placeholder", "popover", "presets", "range", "reach", "readers", "ready", "render", "required", "rule", "saturday", "selectable", "set", "sets", "shortcuts", "single", "start", "styled", "styling", "submit", "submits", "submitted", "sunday", "text", "that", "the", "then", "there", "these", "today", "uncontrolled", "value", "visible", "weekends", "weekstartson", "when", "with"], registryDependencies: ["calendar", "field", "form-value", "input", "popover", "use-controllable-state", "utils"] }, { name: "dialog", type: "registry:ui", title: "Dialog", description: "Portal modal with blurred backdrop, spring scale-in, focus trap, Esc and scroll lock.", exports: ["useDialog", "Dialog", "DialogTrigger", "DialogClose", "useModal", "DialogContent", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription"], keywords: ["action", "alert", "alertdialog", "also", "and", "aria", "armed", "attach", "backdrop", "before", "behavior", "blur", "blurred", "body", "both", "button", "called", "can", "check", "children", "click", "clicks", "close", "confirm", "confirmlabel", "confirmtimeout", "controlled", "corner", "default", "defaultopen", "defaults", "destructive", "dialog", "dialogclose", "dialogcontent", "dialogs", "dialogtrigger", "does", "done", "drawer", "emphasis", "enter", "esc", "feedback", "field", "fill", "first", "focus", "focusable", "footer", "for", "form", "give", "header", "height", "icon", "ignore", "ignores", "irreversible", "its", "label", "left", "loading", "loadinglabel", "lock", "modal", "mode", "never", "not", "off", "old", "onclick", "one", "ones", "only", "onopenchange", "open", "out", "padding", "page", "pair", "panel", "per", "place", "portal", "primary", "ref", "render", "reserved", "resets", "resize", "restore", "returned", "role", "root", "runs", "scale", "scroll", "second", "shared", "showclose", "shown", "shows", "size", "slides", "spinner", "spins", "spring", "square", "state", "status", "stays", "step", "submit", "success", "successlabel", "swap", "swaps", "tab", "text", "the", "this", "topmost", "trap", "trigger", "twice", "two", "uncontrolled", "variant", "view", "where", "while", "width", "with"], registryDependencies: ["button", "platform", "use-controllable-state", "utils"] }, { name: "drawer", type: "registry:ui", title: "Drawer", description: "Edge panel (left, right, top, bottom) that springs in and swipes away. Shares Dialog's focus trap, scroll lock and Esc handling. Sidebar uses it below md.", exports: ["Drawer", "DrawerTrigger", "DrawerClose", "DrawerTitle", "DrawerDescription", "DrawerContent", "DrawerHeader", "DrawerBody", "DrawerFooter"], keywords: ["action", "also", "and", "anywhere", "aria", "armed", "backdrop", "before", "blur", "body", "both", "bottom", "button", "called", "can", "check", "children", "click", "clicks", "close", "confirm", "confirmlabel", "confirmtimeout", "content", "controlled", "corner", "default", "defaultopen", "defaults", "destructive", "dialogclose", "dialogcontent", "dialogtrigger", "dismiss", "done", "drag", "drawer", "drawers", "edge", "emphasis", "enter", "esc", "feedback", "fill", "first", "focusable", "footer", "for", "form", "from", "give", "handle", "header", "height", "icon", "ignore", "ignores", "irreversible", "its", "label", "left", "loading", "loadinglabel", "never", "old", "onclick", "one", "ones", "onopenchange", "open", "out", "padding", "pair", "panel", "per", "place", "primary", "render", "reserved", "resets", "resize", "runs", "scroll", "scrolls", "second", "showclose", "shown", "shows", "side", "size", "slides", "spinner", "spins", "spring", "square", "state", "status", "stays", "step", "submit", "success", "successlabel", "swap", "swaps", "swipe", "taller", "text", "than", "that", "the", "their", "this", "top", "toward", "trigger", "twice", "two", "uncontrolled", "variant", "view", "when", "where", "while", "width", "with"], registryDependencies: ["dialog", "platform", "utils"] }, { name: "dropdown-menu", type: "registry:ui", title: "Dropdown Menu", description: "Action menu anchored to a Button: items with icons and shortcuts, checkbox and radio items, labels, separators, destructive variant. Arrow keys, typeahead, focus follows the pointer, Esc returns focus.", exports: ["MenuContext", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuCheckboxItem", "DropdownMenuRadioGroup", "DropdownMenuRadioItem", "DropdownMenuLabel", "DropdownMenuSeparator"], keywords: ["action", "actions", "align", "aligned", "also", "anchored", "and", "aria", "armed", "before", "blur", "both", "but", "button", "called", "can", "check", "checked", "children", "choice", "click", "clicks", "closes", "closing", "confirm", "confirmlabel", "confirmtimeout", "content", "controlled", "default", "defaultopen", "defaults", "destructive", "disabled", "done", "down", "dropdownmenuradioitem", "edge", "emphasis", "enter", "equals", "esc", "feedback", "fill", "first", "focusable", "for", "form", "give", "group", "groups", "height", "hint", "icon", "ignore", "ignores", "irreversible", "item", "items", "its", "keeps", "keyboard", "label", "labels", "last", "leading", "left", "lines", "loading", "loadinglabel", "mark", "menu", "never", "new", "not", "old", "oncheckedchange", "onclick", "one", "ones", "onopenchange", "onselect", "onvaluechange", "open", "opens", "optionally", "out", "outside", "padding", "pair", "per", "picked", "picking", "place", "primary", "radiogroup", "red", "render", "reserved", "resets", "resize", "right", "runs", "second", "selectable", "selection", "separators", "shortcut", "shown", "shows", "size", "slides", "space", "spinner", "spins", "square", "state", "status", "stays", "step", "submit", "success", "successlabel", "swap", "swaps", "text", "the", "then", "this", "toggles", "trigger", "twice", "two", "uncontrolled", "value", "variant", "view", "when", "where", "while", "width", "with", "without"], registryDependencies: ["button", "list", "platform", "use-anchor", "use-controllable-state", "use-dismiss", "utils"] }, { name: "empty", type: "registry:ui", title: "Empty", description: "Server-safe empty state: icon tile, title, one helpful sentence and the next action. Bordered variant for empty lists and drop zones.", exports: ["Empty"], keywords: ["about", "action", "and", "app", "area", "bordered", "children", "clips", "dashed", "description", "drop", "empty", "for", "helpful", "icon", "inside", "like", "list", "next", "one", "outline", "page", "rounded", "sentence", "shown", "state", "the", "tile", "title", "what", "yet", "zone"], registryDependencies: ["utils"] }, { name: "field", type: "registry:ui", title: "Field", description: "Label, control, description and error as one unit. Controls inside (Input, Textarea, Select, Checkbox, Switch, RadioGroup) get id, aria-describedby, aria-invalid and required automatically; errors spring in and are announced.", exports: ["useFieldControl", "Field"], keywords: ["and", "aria", "automatically", "beside", "checkbox", "children", "control", "controls", "describedby", "description", "dims", "disabled", "disables", "enclosing", "error", "explicit", "field", "fills", "first", "for", "form", "from", "hint", "horizontal", "ids", "invalid", "its", "label", "makes", "marks", "match", "must", "one", "orientation", "out", "outside", "own", "picks", "props", "renders", "required", "returns", "shown", "springs", "state", "switch", "the", "unchanged", "under", "unit", "use", "when", "win", "wired", "with"], registryDependencies: ["label", "utils"] }, { name: "form-value", type: "registry:lib", description: "Submits a custom control's value and takes part in native validation, which a hidden input\ncan't: an empty `required` value blocks submit, shows the browser's message and focuses `anchor`.", exports: ["FormValue"], keywords: ["anchor", "and", "blocks", "browser", "called", "can", "control", "custom", "disabled", "empty", "field", "finds", "focus", "focuses", "form", "gets", "hidden", "input", "invalid", "leaves", "like", "message", "name", "native", "nothing", "oninvalid", "only", "out", "part", "picked", "required", "shows", "skips", "submit", "submits", "takes", "that", "the", "validation", "value", "visible", "when", "which", "without"], registryDependencies: [] }, { name: "highlight", type: "registry:lib", description: "Lines of colored tokens, with Shiki loaded on demand. Runs anywhere: Code calls it in the\nbrowser, and a Server Component or a build can call it ahead of time and pass the result as\n`tokens`, so the browser never loads Shiki. Null for unknown languages.", exports: ["highlightCode", "languageOf"], keywords: ["ahead", "and", "anywhere", "back", "browser", "build", "call", "calls", "can", "code", "colored", "component", "demand", "extension", "falls", "file", "for", "from", "language", "languages", "lines", "loaded", "loads", "name", "never", "null", "pass", "result", "runs", "server", "shiki", "the", "time", "tokens", "tsx", "unknown", "with"], registryDependencies: [] }, { name: "hover-card", type: "registry:ui", title: "Hover Card", description: "Rich preview (profile, product, clip) that opens after a hover delay or keyboard focus. The pointer can move into the card; supplementary only.", exports: ["HoverCard"], keywords: ["acts", "align", "alignment", "avatar", "before", "bio", "can", "card", "children", "clip", "closedelay", "closes", "content", "first", "flips", "focus", "hover", "into", "keyboard", "leaves", "link", "move", "must", "once", "only", "opendelay", "opens", "pointer", "preferred", "preview", "product", "profile", "rich", "room", "second", "side", "stats", "supplementary", "tap", "the", "there", "time", "touch", "trigger", "usually", "when", "with", "without", "work"], registryDependencies: ["platform", "use-anchor", "use-dismiss", "use-hover-open", "utils"] }, { name: "input", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", exports: ["fieldClass", "Input"], keywords: ["and", "aria", "chrome", "field", "filled", "group", "handed", "inputgroup", "inside", "the", "works"], registryDependencies: ["field", "utils"] }, { name: "input-group", type: "registry:ui", title: "Input Group", description: "Server-safe wrapper that fuses an Input with icons, text (https://, USD) or buttons into one field with a shared border and focus ring. Clicking an addon focuses the input.", exports: ["InputGroup", "InputGroupAddon"], keywords: ["addons", "align", "and", "beside", "border", "button", "buttons", "clicking", "control", "data", "draws", "drops", "field", "focus", "focuses", "group", "https", "icon", "icons", "inner", "input", "its", "like", "made", "matched", "one", "own", "plain", "plus", "ring", "side", "sits", "slot", "text", "the"], registryDependencies: ["utils"] }, { name: "input-otp", type: "registry:ui", title: "Input OTP", description: "One-time code in separate slots, backed by one real input: paste and SMS autofill work, screen readers hear one field. Grouped slots, numeric or alphanumeric, characters spring in, onComplete to submit. verified turns each character into a check, then merges them into one mark.", exports: ["InputOTP"], keywords: ["accepted", "again", "allowed", "alphanumeric", "and", "announced", "are", "autocomplete", "autofill", "back", "beside", "between", "called", "change", "character", "characters", "charset", "check", "code", "controlled", "counts", "dash", "defaultvalue", "draws", "dropped", "each", "edit", "every", "false", "filled", "fires", "first", "for", "group", "groups", "input", "into", "label", "laid", "length", "mark", "merge", "merged", "number", "once", "oncomplete", "one", "only", "onvaluechange", "others", "over", "pair", "paste", "pasted", "per", "read", "readers", "real", "render", "screen", "set", "shown", "single", "sits", "slides", "slot", "slots", "sms", "submit", "the", "then", "time", "transparently", "turns", "typed", "uncontrolled", "uppercased", "value", "verified", "verifiedlabel", "via", "visual", "was", "with"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "kbd", type: "registry:ui", title: "Kbd", description: "Server-safe key caps for shortcut hints. KbdGroup nests keys per the HTML spec.", exports: ["Kbd", "KbdGroup"], keywords: ["cap", "html", "kbd", "kbdgroup", "key", "keys", "made", "nested", "one", "per", "several", "shortcut", "spec", "the"], registryDependencies: ["utils"] }, { name: "label", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", exports: ["Label"], keywords: [], registryDependencies: ["utils"] }, { name: "list", type: "registry:lib", description: "The item a navigation key moves to in a list, from the item at `index` (-1: none active).\nUndefined when the key doesn't navigate.", exports: ["listKeyTarget", "scrollIntoList"], keywords: ["active", "box", "can", "doesn", "enough", "from", "index", "item", "just", "key", "list", "moves", "moving", "navigate", "navigation", "none", "page", "scrollintoview", "scrolls", "show", "the", "undefined", "way", "when", "without"], registryDependencies: ["utils"] }, { name: "marker", type: "registry:ui", title: "Marker", description: "Highlighter-pen <mark> in four tints that wraps cleanly across lines and can draw itself on, left to right, when it scrolls into view. Highlight marks every match of a search in a string, for transcripts and search results.", exports: ["Marker", "Highlight"], keywords: ["across", "before", "case", "cleanly", "color", "delay", "draw", "drawing", "draws", "every", "first", "full", "fully", "highlight", "highlighter", "insensitive", "inside", "instant", "into", "left", "lines", "mark", "markers", "marks", "match", "motion", "one", "paragraph", "pen", "query", "reduced", "right", "scrolls", "search", "seconds", "several", "shown", "stagger", "sweeps", "term", "terms", "text", "the", "time", "view", "with", "without", "wraps"], registryDependencies: ["utils"] }, { name: "menubar", type: "registry:ui", title: "Menubar", description: "Desktop-style menu bar on the WAI-ARIA menubar pattern: one menu open at a time, hovering the next title while one is open switches to it, ← → walk the bar with or without a menu open, one Tab stop. A single highlight springs between titles; menus reuse every DropdownMenu item.", exports: ["MenubarContent", "MenubarItem", "MenubarCheckboxItem", "MenubarRadioGroup", "MenubarRadioItem", "MenubarLabel", "MenubarSeparator", "Menubar", "MenubarMenu", "MenubarTrigger"], keywords: ["actions", "align", "aligned", "analytics", "and", "another", "apart", "bar", "between", "but", "called", "check", "checked", "children", "click", "closes", "desktop", "destructive", "disabled", "down", "dropdownmenuradioitem", "edge", "enter", "equals", "first", "for", "generated", "give", "group", "groups", "highlight", "hint", "hovering", "icon", "irreversible", "item", "items", "its", "label", "labels", "last", "leading", "left", "lines", "mark", "menu", "menubarcontent", "menubartrigger", "menus", "move", "new", "not", "omitted", "oncheckedchange", "one", "onselect", "onvaluechange", "open", "opens", "optional", "optionally", "picked", "red", "right", "selectable", "separators", "shortcut", "shown", "shows", "space", "springs", "stable", "state", "style", "switches", "tell", "tests", "the", "then", "time", "title", "titles", "toggles", "trigger", "value", "variant", "when", "while", "with"], registryDependencies: ["dropdown-menu", "list", "use-indicator", "utils"] }, { name: "message-bubble", type: "registry:ui", title: "Message Bubble", description: "User/assistant chat bubbles with avatar slot, streaming dots and copyable code blocks.", exports: ["MessageBubble"], keywords: ["above", "accent", "after", "and", "animated", "are", "assistant", "attachments", "avatar", "bubble", "chat", "children", "code", "content", "dots", "from", "inline", "left", "lists", "message", "name", "next", "rich", "right", "sender", "shown", "shows", "side", "size", "slot", "streaming", "surface", "text", "the", "time", "typing", "user"], registryDependencies: ["utils"] }, { name: "meter", type: "registry:ui", title: "Meter", description: "Server-safe gauge for a value in a known range (storage, quota, server load, password strength). Colors by <meter> thresholds, or stacked segments with a legend, like a storage bar.", exports: ["Meter"], keywords: ["above", "accessible", "also", "and", "away", "bar", "below", "between", "bound", "color", "colors", "decides", "defaults", "disk", "follow", "good", "green", "high", "known", "label", "legend", "like", "load", "low", "lower", "max", "measurement", "meter", "min", "name", "not", "one", "optimum", "orange", "overrides", "parts", "password", "progress", "quota", "range", "red", "region", "right", "segments", "server", "stacked", "storage", "strength", "sum", "task", "text", "the", "their", "this", "threshold", "thresholds", "total", "two", "upper", "use", "used", "value", "valuetext", "visible", "where", "with", "within"], registryDependencies: ["utils"] }, { name: "motion-provider", type: "registry:component", exports: ["MotionProvider"], keywords: [], registryDependencies: ["utils"] }, { name: "native-select", type: "registry:ui", title: "Native Select", description: "A real <select> with option groups: native picker on phones, no-JS forms, native required validation. Where customizable select is supported (appearance: base-select), the open list gets the menu look.", exports: ["NativeSelect", "NativeSelectGroup", "NativeSelectOption"], keywords: ["appearance", "base", "browser", "custom", "customizable", "elsewhere", "forms", "gets", "group", "heading", "icons", "instead", "invalid", "label", "labeled", "list", "look", "menu", "native", "need", "open", "optgroup", "options", "phones", "picker", "real", "rendering", "required", "select", "stays", "supports", "the", "use", "user", "validation", "when", "where", "without", "works"], registryDependencies: ["field", "input", "utils"] }, { name: "navigation-menu", type: "registry:ui", title: "Navigation Menu", description: "Website top navigation on the APG disclosure pattern: plain links and panels of rich links. Hover opens after a beat, then sliding along the bar switches panels at once; every panel shares one viewport that springs to the next panel's size and position while the content slides in from the side you moved toward. Click, Enter, ↓, ← → and Esc work; closed panels keep their links in the HTML for crawlers.", exports: ["NavigationMenu", "NavigationMenuList", "NavigationMenuItem", "NavigationMenuTrigger", "NavigationMenuContent", "NavigationMenuLink"], keywords: ["active", "after", "all", "along", "and", "aria", "bar", "beat", "bold", "called", "children", "classname", "click", "closed", "closes", "content", "controlled", "crawlers", "current", "defaultvalue", "description", "down", "enter", "entry", "esc", "find", "first", "focuses", "following", "for", "generated", "hidden", "hover", "html", "icon", "inset", "into", "item", "items", "its", "left", "level", "line", "link", "links", "look", "matched", "menu", "mouse", "muted", "navigation", "omitted", "once", "one", "onvaluechange", "open", "opened", "opens", "optional", "own", "padding", "page", "pair", "panel", "panels", "pill", "plain", "readers", "rem", "render", "rich", "right", "row", "selected", "single", "size", "sliding", "space", "springs", "stable", "stay", "still", "switches", "the", "them", "then", "tile", "title", "toggle", "top", "trigger", "uncontrolled", "under", "value", "viewport", "walk", "website", "while", "with", "your"], registryDependencies: ["use-controllable-state", "use-dismiss", "use-indicator", "utils"] }, { name: "newsletter", type: "registry:block", title: "Newsletter", description: "Email signup: InputGroup with the submit Button inside, native email validation, a loading → success toast and an in-place success state on the button.", exports: ["Newsletter"], keywords: ["above", "address", "after", "and", "button", "check", "confirm", "confirms", "description", "email", "field", "for", "form", "heading", "inbox", "inputgroup", "inside", "into", "its", "line", "loading", "message", "native", "next", "onsubscribe", "place", "placeholder", "rejection", "resets", "resolves", "saved", "shows", "signup", "submit", "submitlabel", "success", "successmessage", "supporting", "text", "that", "the", "then", "title", "toast", "turns", "under", "validation", "when", "with", "your"], registryDependencies: ["button", "input", "input-group", "toast", "utils"] }, { name: "number-input", type: "registry:ui", title: "Number Input", description: "Native number field with −/+ buttons: arrow keys, min/max/step validation and form submit from the platform; clamps on blur, rounds to the step's precision.", exports: ["NumberInput"], keywords: ["amount", "and", "are", "arrows", "arrowup", "buttons", "called", "cart", "change", "controlled", "defaultvalue", "down", "field", "first", "form", "helpers", "highest", "keyboard", "lowest", "max", "min", "native", "new", "number", "onvaluechange", "pair", "pointer", "quantity", "render", "step", "submit", "tabindex", "the", "uncontrolled", "use", "users", "validation", "value", "with"], registryDependencies: ["input", "input-group", "use-controllable-state", "utils"] }, { name: "overflow-focus", type: "registry:lib", description: `Drop inside a scroll container: while the container overflows it becomes keyboard-focusable
 (tabIndex 0) so arrow keys can scroll it, and it leaves the tab order again once it fits.
-Renders a hidden span, so server components (Table) can use it as a child.`, exports: ["OverflowFocus"], keywords: ["again", "and", "arrow", "becomes", "can", "child", "components", "container", "drop", "fits", "focusable", "hidden", "inside", "keyboard", "keys", "leaves", "once", "order", "overflows", "renders", "scroll", "server", "span", "tab", "tabindex", "table", "the", "use", "while"], registryDependencies: [] }, { name: "pagination", type: "registry:ui", title: "Pagination", description: "Server-safe page links from page and total: previous/next, ellipsis gaps and a sliding active pill, with numbers that swipe the way you moved. Links by default; buttons with onPageChange. The row keeps a fixed width so it never jumps.", exports: ["Pagination", "pageRange"], keywords: ["active", "always", "and", "arrows", "bar", "become", "between", "buttons", "called", "changes", "client", "controls", "current", "default", "each", "ellipsis", "first", "for", "from", "gaps", "href", "index", "instead", "items", "its", "keeps", "kept", "key", "labels", "last", "length", "links", "mounted", "moved", "never", "next", "number", "numbers", "one", "only", "onpagechange", "page", "pagerange", "pages", "parents", "phones", "picked", "pill", "previous", "remounting", "render", "returns", "row", "same", "show", "siblings", "side", "slides", "slot", "stays", "swipe", "swipes", "text", "that", "the", "total", "unused", "url", "way", "width", "with", "without", "work", "you"], registryDependencies: ["button-variants", "pagination-motion", "utils"] }, { name: "pagination-motion", type: "registry:ui", description: "Scopes the active pill's `layoutId` so several paginations on a page don't share it.", exports: ["PaginationMotion", "PaginationActivePill", "PaginationNumber"], keywords: ["active", "behind", "changes", "children", "direction", "don", "from", "items", "its", "layoutid", "link", "moved", "next", "number", "outline", "page", "pagination", "paginations", "pill", "scopes", "several", "share", "side", "slot", "springs", "swipes", "that", "the", "toward", "travel", "value", "when"], registryDependencies: ["utils"] }, { name: "platform", type: "registry:lib", description: "False on the server and during hydration, true after: gates portals and other client-only output.", exports: ["useMounted", "useIsMac", "useMediaQuery"], keywords: ["after", "and", "assumes", "client", "corrects", "ctrl", "during", "false", "gates", "hydration", "live", "match", "media", "not", "only", "other", "output", "portals", "query", "render", "server", "shortcuts", "ssr", "the", "then", "true", "use", "where"], registryDependencies: [] }, { name: "popover", type: "registry:ui", title: "Popover", description: "Non-modal panel anchored to a Button for filters, pickers and quick edits. Focus moves in, Esc returns it, outside clicks close; Selects and menus opened inside don't count as outside.", exports: ["Popover", "PopoverTrigger", "PopoverContent"], keywords: ["action", "align", "alignment", "also", "anchored", "and", "any", "aria", "armed", "before", "blur", "button", "called", "check", "children", "click", "closes", "confirm", "confirmlabel", "confirmtimeout", "content", "controlled", "default", "defaultopen", "defaults", "destructive", "disables", "done", "edits", "emphasis", "end", "esc", "feedback", "fill", "filters", "first", "flips", "focus", "for", "give", "height", "icon", "irreversible", "its", "label", "left", "like", "loading", "loadinglabel", "modal", "moves", "never", "non", "not", "old", "onclick", "one", "ones", "onopenchange", "open", "out", "outside", "padding", "pair", "panel", "past", "per", "pickers", "place", "popovercontent", "popovertrigger", "popup", "preferred", "primary", "quick", "render", "reserved", "resets", "resize", "returns", "room", "runs", "second", "shown", "shows", "side", "size", "slides", "spinner", "spins", "square", "state", "status", "step", "success", "successlabel", "swap", "swaps", "tab", "text", "the", "there", "this", "trap", "trigger", "two", "uncontrolled", "variant", "view", "when", "where", "while", "width", "with"], registryDependencies: ["button", "platform", "use-anchor", "use-controllable-state", "use-dismiss", "utils"] }, { name: "pricing", type: "registry:block", title: "Pricing", description: "Plan cards with a monthly / yearly segmented switch. Prices roll on a spring in the direction they moved; the featured plan is outlined in the accent. Card, Badge, ToggleGroup, Button.", exports: ["Pricing"], keywords: ["and", "bcp", "billing", "cards", "code", "currency", "defaultperiod", "display", "down", "drop", "eur", "first", "for", "formatting", "iso", "locale", "monthly", "next", "number", "order", "period", "plan", "plans", "price", "prices", "render", "rise", "rolling", "segmented", "selected", "spring", "swap", "switch", "the", "they", "togglegroup", "when", "with", "yearly", "yearlynote"], registryDependencies: ["badge", "card", "toggle-group", "utils"] }, { name: "product-card", type: "registry:block", title: "Product Card", description: "Shop tile: photos in an AspectRatio (a swipeable Carousel with dots when there are several), sale price, Badge and add-to-cart Button.", exports: ["ProductCard"], keywords: ["add", "addlabel", "are", "aspectratio", "badge", "bcp", "become", "button", "called", "card", "carousel", "code", "compareat", "currency", "current", "dots", "for", "formatting", "heading", "height", "href", "img", "iso", "label", "link", "locale", "major", "media", "name", "new", "number", "onaddtocart", "one", "original", "over", "page", "per", "photos", "pressed", "price", "product", "ratio", "sale", "several", "shop", "shows", "slide", "small", "square", "struck", "swipeable", "text", "the", "there", "through", "tile", "units", "when", "width", "with"], registryDependencies: ["aspect-ratio", "badge", "button", "carousel", "utils"] }, { name: "progress", type: "registry:ui", title: "Progress", description: "Accent bar that springs to each new value, with an optional label and percentage. Leave out value for an indeterminate sweep (static under reduced motion).", exports: ["Progress"], keywords: ["above", "accent", "accessible", "across", "allowed", "also", "aria", "bar", "colored", "duration", "each", "for", "frame", "indeterminate", "infinite", "its", "label", "layout", "max", "motion", "name", "new", "next", "omit", "one", "per", "percentage", "reduced", "scalex", "segment", "show", "showvalue", "size", "springs", "static", "sweeps", "that", "the", "there", "thickness", "tween", "under", "unknown", "value", "visible", "when", "work"], registryDependencies: ["utils"] }, { name: "quote", type: "registry:ui", title: "Quote", description: "Semantic figure, blockquote and figcaption. Plain, card and large variants, with author, subtitle, avatar, lang, typewriter and textSwap.", exports: ["Quote"], keywords: ["accent", "alt", "and", "array", "author", "avatar", "blockquote", "card", "children", "correct", "custom", "cycles", "delay", "display", "doe", "effect", "enables", "fades", "figcaption", "figure", "for", "into", "jane", "job", "lang", "language", "large", "line", "mark", "options", "pass", "plain", "pronunciation", "quote", "quoted", "quotes", "reader", "said", "screen", "scrolls", "secondary", "semantic", "seo", "size", "slot", "speed", "spring", "string", "strings", "subtitle", "supports", "surface", "swap", "text", "textswap", "the", "through", "title", "transitions", "typewriter", "under", "variant", "view", "when", "who", "with", "work", "wrote"], registryDependencies: ["text-swap", "typewriter", "utils"] }, { name: "radio-group", type: "registry:ui", title: "Radio Group", description: "Native radios in a fieldset with a legend: browser arrow keys and form submit, a dot that springs in, optional per-option descriptions, vertical or horizontal.", exports: ["RadioGroup", "RadioGroupItem"], keywords: ["adds", "and", "application", "aria", "arrow", "browser", "but", "called", "children", "conform", "controlled", "defaultvalue", "description", "disabled", "does", "entered", "expected", "field", "fieldset", "first", "form", "format", "generated", "group", "indicates", "invalid", "item", "items", "its", "keys", "label", "labels", "lay", "legend", "line", "muted", "name", "native", "not", "omitted", "one", "onvaluechange", "option", "orientation", "pair", "picked", "radios", "render", "rendered", "row", "selectable", "shown", "stack", "submit", "submitted", "the", "them", "uncontrolled", "under", "value", "visible", "when", "with", "work"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "rating", type: "registry:ui", title: "Rating", description: "Star rating on native radios (arrow keys, forms) with hover preview, or readOnly display with fractional stars for averages.", exports: ["Rating"], keywords: ["and", "arrow", "called", "chosen", "controlled", "defaultvalue", "display", "field", "filled", "first", "for", "form", "forms", "fractions", "group", "hidden", "hover", "image", "included", "inputs", "interactive", "keys", "label", "lift", "max", "name", "native", "number", "only", "onvaluechange", "pair", "partially", "picked", "press", "preview", "radios", "rating", "readers", "readonly", "render", "renders", "score", "screen", "size", "spring", "star", "stars", "the", "uncontrolled", "value", "visually", "with"], registryDependencies: ["use-controllable-state", "utils"] }, { name: "relative-time", type: "registry:ui", title: "Relative Time", description: "Self-updating “5 minutes ago” in a semantic <time> with the full date as its title. Server renders the absolute date (no hydration mismatch); one shared ticker for the whole page.", exports: ["RelativeTime"], keywords: ["absolute", "ago", "and", "both", "client", "crawlers", "current", "date", "default", "differ", "full", "get", "hydration", "its", "itself", "keeps", "locale", "minutes", "mismatch", "not", "now", "one", "page", "pass", "real", "relative", "render", "renders", "semantic", "server", "shared", "stored", "text", "that", "the", "there", "ticker", "time", "timestamp", "title", "with", "would"], registryDependencies: ["utils"] }, { name: "resizable", type: "registry:ui", title: "Resizable", description: "Split panes for admin layouts, docs and editors. Hairline dividers with a wide grab area follow the pointer; collapsible panels snap shut past half their minimum. Dividers are APG window splitters: arrows step, Home/End jump to the limits, Enter or double-click collapses with a spring. Groups nest.", exports: ["ResizablePanelGroup", "ResizablePanel", "ResizableHandle"], keywords: ["adds", "admin", "after", "already", "and", "apg", "are", "arrow", "arrows", "basis", "between", "click", "collapsed", "collapsedsize", "collapses", "collapsible", "component", "cookie", "css", "default", "defaultsize", "direction", "divider", "docs", "dom", "double", "drag", "dragging", "each", "editors", "end", "enter", "evenly", "final", "find", "flex", "follows", "for", "grip", "group", "half", "handle", "handles", "home", "horizontal", "hydration", "icon", "jump", "key", "keyboardstep", "keys", "largest", "layout", "layouts", "left", "limits", "maxsize", "middle", "minimum", "minsize", "neighbor", "one", "onlayout", "order", "others", "panels", "panes", "parents", "past", "per", "plain", "pointer", "press", "rail", "rest", "save", "server", "share", "shows", "shut", "side", "size", "sizes", "smallest", "snaps", "split", "splitters", "spring", "ssr", "stacked", "starting", "step", "the", "their", "them", "toggle", "toggles", "two", "until", "vertical", "visible", "what", "when", "window", "withhandle", "without", "work", "wrappers"], registryDependencies: ["utils"] }, { name: "reveal", type: "registry:ui", title: "Reveal", description: "Scroll reveal: content fades and rises on a spring the first time it enters the viewport.", exports: ["Reveal"], keywords: ["after", "and", "content", "delay", "entering", "fades", "first", "into", "offset", "place", "rises", "scrolls", "seconds", "spring", "start", "stays", "the", "time", "view", "visible", "wait"], registryDependencies: ["utils"] }, { name: "scroll-area", type: "registry:ui", title: "Scroll Area", description: "Overlay scrollbars: thin thumbs that fade in while scrolling or on hover, widen under the pointer and drag. Scrolling stays native; the labeled region is keyboard-focusable.", exports: ["ScrollArea"], keywords: ["also", "and", "aria", "axes", "can", "classes", "drag", "fade", "focus", "for", "get", "give", "goes", "height", "here", "horizontal", "hover", "itself", "keyboard", "label", "mouse", "names", "native", "one", "orientation", "overlay", "padding", "region", "scroll", "scrollable", "scrollbars", "scrolling", "stays", "takes", "that", "the", "thin", "thumb", "thumbs", "touch", "users", "viewport", "viewportclassname", "wheel", "while", "widen"], registryDependencies: ["utils"] }, { name: "search-input", type: "registry:ui", title: "Search Input", description: 'Search field built on Input: leading icon, spring-in clear button, Esc to clear, and an optional focus shortcut ("/" or mod+k) with a Kbd hint.', exports: ["SearchInput"], keywords: ["accessible", "already", "and", "anywhere", "aside", "border", "browser", "button", "called", "change", "clear", "cleared", "clears", "command", "controlled", "ctrl", "default", "defaultvalue", "elsewhere", "embedded", "esc", "every", "field", "find", "first", "focus", "focused", "focuses", "for", "from", "ghost", "hidden", "hint", "htmlfor", "icon", "inputs", "kbd", "key", "label", "mac", "mod", "name", "onvaluechange", "opens", "optional", "own", "pair", "palette", "pass", "query", "render", "ring", "search", "second", "shadow", "shortcut", "single", "skipped", "spring", "steps", "still", "surface", "the", "uncontrolled", "value", "variant", "when", "while", "with", "you"], registryDependencies: ["input", "kbd", "platform", "use-controllable-state", "use-hotkey", "utils"] }, { name: "segmented-tabs", type: "registry:ui", title: "AppWindow", description: "Window container with close / minimize / zoom controls, title, custom header slot and actions. SegmentedTabs is the compact view switcher for its title bar.", exports: ["SegmentedTabs"], keywords: ["accessible", "active", "also", "always", "aria", "behind", "called", "current", "for", "indicator", "item", "items", "label", "labels", "list", "marked", "name", "onchange", "one", "pressed", "segmented", "slides", "spring", "tab", "tabs", "the", "under", "used", "value", "values", "with"], registryDependencies: ["overflow-focus", "use-indicator", "utils"] }, { name: "select", type: "registry:ui", title: "Select", description: "Single-choice listbox styled like Input, with groups, icons and disabled options. Native-select keyboard (arrows, typeahead even while closed), flips above the trigger near the viewport edge, submits via a hidden input.", exports: ["Select"], keywords: ["accessible", "also", "aria", "blocks", "called", "cancel", "choice", "closed", "controlled", "defaultvalue", "describedby", "disabled", "down", "end", "enter", "error", "esc", "field", "fill", "fills", "first", "flat", "form", "from", "groups", "hidden", "hint", "home", "htmlfor", "ids", "input", "invalid", "keyboard", "label", "labeled", "let", "like", "listbox", "matches", "name", "native", "needs", "nothing", "onvaluechange", "opening", "options", "pair", "pick", "picked", "placeholder", "render", "required", "select", "sets", "single", "space", "styled", "styling", "submit", "submits", "text", "the", "there", "through", "trigger", "typeahead", "uncontrolled", "value", "visible", "when", "while", "with"], registryDependencies: ["field", "input", "list", "platform", "use-anchor", "use-controllable-state", "use-dismiss", "utils"] }, { name: "separator", type: "registry:ui", title: "Separator", description: 'Server-safe hairline, horizontal or vertical, decorative by default, with an optional centered label like "or".', exports: ["Separator"], keywords: ["assistive", "centered", "content", "decorative", "default", "direction", "false", "for", "horizontal", "label", "line", "only", "orientation", "purely", "separates", "set", "tech", "text", "the", "visual", "when"], registryDependencies: ["utils"] }, { name: "sidebar", type: "registry:ui", title: "Sidebar", description: "App navigation from data: header, groups (optionally foldable), badges and pinned footer entries. Collapses to an icon rail on a spring (⌘B / Ctrl+B) with labels kept for assistive tech; below md it is a left drawer.", exports: ["SidebarLayout", "Sidebar", "SidebarTrigger"], keywords: ["a11y", "accessible", "and", "aria", "below", "bottom", "but", "called", "client", "clip", "collapsed", "collapses", "controlled", "ctrl", "current", "data", "default", "defaultcollapsed", "drawer", "entries", "field", "footer", "for", "from", "groups", "header", "highlighted", "holds", "icon", "ignored", "item", "label", "labels", "landmark", "lays", "left", "links", "name", "navigation", "oncollapsedchange", "onselect", "page", "pair", "picked", "pinned", "rail", "routing", "settings", "shortcut", "side", "sidebar", "slot", "spring", "start", "state", "stay", "the", "toggle", "too", "top", "tree", "trigger", "true", "typing", "uncontrolled", "when", "while", "with", "workspace"], registryDependencies: ["button", "collapsible", "drawer", "platform", "use-controllable-state", "use-hotkey", "utils"] }, { name: "site-header", type: "registry:block", title: "Site Header", description: "Sticky, translucent site header from one nav array: brand, NavigationMenu panels from md up, a right Drawer with the same links below it, and your actions on the right. The hairline underneath appears only once content scrolls beneath it.", exports: ["SiteHeader"], keywords: ["accessible", "acme", "actions", "alike", "and", "appears", "aria", "below", "brand", "client", "close", "controls", "current", "demo", "desktop", "drawer", "every", "for", "from", "hairline", "hand", "header", "href", "label", "left", "level", "link", "links", "logo", "marks", "matching", "name", "nav", "navigation", "navigationmenu", "once", "onclick", "only", "onnavigate", "over", "page", "panels", "right", "routing", "same", "scrolls", "search", "shown", "sign", "site", "sticky", "stub", "the", "theme", "top", "under", "width", "with"], registryDependencies: ["button", "drawer", "navigation-menu", "use-disclosure", "utils"] }, { name: "skeleton", type: "registry:ui", title: "Skeleton", description: 'Server-safe loading placeholders that pulse (static under reduced motion). SkeletonGroup announces one "Loading" to screen readers.', exports: ["Skeleton", "SkeletonGroup"], keywords: ["announced", "block", "classes", "classname", "hear", "instead", "label", "loading", "nothing", "one", "placeholder", "readers", "screen", "shown", "size", "skeleton", "skeletons", "this", "while", "with", "wrap"], registryDependencies: ["utils"] }, { name: "slider", type: "registry:ui", title: "Slider", description: "Slider over native range inputs: thin accent track, white knob that lifts while held. One value or two for a range; keyboard, forms, touch and Field wiring come from the platform.", exports: ["Slider"], keywords: ["accent", "accessible", "and", "aria", "arrow", "blocks", "browser", "called", "defaults", "defaultvalue", "describedby", "disabled", "does", "drag", "dragging", "error", "every", "field", "fills", "filter", "first", "for", "forms", "from", "held", "highest", "hint", "ids", "increment", "inputs", "invalid", "keyboard", "keys", "knob", "labels", "lifts", "lowest", "max", "maximum", "min", "minimum", "name", "names", "native", "one", "onvaluechange", "over", "per", "price", "range", "readers", "render", "screen", "sets", "slider", "step", "styling", "submitted", "text", "that", "the", "thin", "thumb", "touch", "track", "twice", "two", "uncontrolled", "value", "values", "while", "white", "with", "work"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "spinner", type: "registry:ui", title: "Spinner", description: "Server-safe activity indicator: eight spokes in currentColor, three sizes, its own status label (or silent inside a parent that announces). Holds still under reduced motion.", exports: ["Spinner"], keywords: ["accessible", "activity", "already", "announces", "busy", "currentcolor", "diameter", "eight", "holds", "indicator", "label", "motion", "name", "parent", "pass", "reduced", "size", "spokes", "state", "still", "the", "under", "when"], registryDependencies: ["utils"] }, { name: "stat-tile", type: "registry:block", title: "Stat Tile", description: "Admin dashboard metric: value, a delta Badge that is green when the change is good news (invert for errors and latency), and an area Chart of the trend. Server-safe.", exports: ["StatTile"], keywords: ["admin", "and", "area", "axis", "badge", "below", "change", "chart", "dashboard", "data", "datakey", "delta", "down", "each", "errors", "for", "format", "formatted", "good", "green", "headline", "index", "intl", "invert", "key", "label", "last", "latency", "metric", "metrics", "month", "name", "news", "number", "period", "positive", "revenue", "row", "rows", "the", "tile", "tooltip", "trend", "unless", "value", "when", "where"], registryDependencies: ["badge", "card", "chart", "utils"] }, { name: "stats-strip", type: "registry:block", title: "Stats Strip", description: "Headline numbers, each card a <dl>: cards rise in turn with Reveal, then each number springs up with CountTo. Final values are in the HTML.", exports: ["StatsStrip"], keywords: ["card", "display", "each", "headline", "its", "number", "numbers", "order", "rises", "row", "springs", "stats", "then", "turn"], registryDependencies: ["card", "count-to", "reveal", "utils"] }, { name: "stepper", type: "registry:ui", title: "Stepper", description: "Multi-step form (questionnaire, checkout, setup wizard). Steps stay mounted so values survive Back and submit together; Continue checks only the current step's native constraints, plus an optional async onNext guard with a spinner. Progress header with springing connectors; works with onSubmit or a Server Action.", exports: ["Stepper", "StepperList", "StepperStep", "StepperFooter"], keywords: ["action", "after", "and", "are", "back", "backlabel", "button", "called", "check", "checks", "children", "connector", "constraints", "continue", "controlled", "current", "defaultvalue", "description", "every", "false", "fields", "fills", "finished", "first", "for", "form", "header", "hidden", "inactive", "its", "last", "links", "matches", "mounted", "multi", "native", "new", "nextlabel", "not", "one", "only", "onnext", "onsubmit", "onvaluechange", "optional", "order", "pass", "progress", "render", "resolve", "return", "runs", "server", "shown", "shows", "spinner", "spring", "start", "stay", "stays", "step", "steps", "submit", "submitlabel", "submits", "survive", "text", "the", "through", "title", "together", "uncontrolled", "unmounted", "value", "values", "while", "with"], registryDependencies: ["button", "use-controllable-state", "utils"] }, { name: "styles", type: "registry:file", exports: [], keywords: [], registryDependencies: [] }, { name: "switch", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", exports: ["Switch"], keywords: ["called", "checkbox", "checked", "controlled", "defaultchecked", "first", "knob", "native", "new", "oncheckedchange", "pair", "render", "role", "spring", "state", "switch", "the", "uncontrolled", "with"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "table", type: "registry:ui", title: "Table", description: "Server-safe semantic <table> in a scrolling card: header, body, footer and caption, striped rows, tinted selected rows, and sortable headers that set aria-sort and flip their arrow.", exports: ["Table", "TableHeader", "TableBody", "TableFooter", "TableRow", "TableHead", "TableCell", "TableCaption"], keywords: ["alternating", "and", "aria", "around", "arrow", "button", "called", "card", "classes", "column", "containerclassname", "data", "direction", "for", "header", "keyboard", "makes", "narrow", "onsort", "pass", "pressed", "real", "requires", "row", "screens", "scrollable", "scrolling", "scrolls", "selected", "sets", "shading", "shows", "sideways", "sort", "sortable", "state", "striped", "table", "that", "the", "then", "tint", "when"], registryDependencies: ["overflow-focus", "utils"] }, { name: "tabs", type: "registry:ui", title: "Tabs", description: "WAI-ARIA tabs with arrow, Home and End keys. One indicator springs between tabs, segmented or underline. Inactive panels stay in the DOM for SEO; the active one fades in.", exports: ["Tabs", "TabsList", "TabsTrigger", "TabsContent"], keywords: ["activated", "active", "always", "and", "aria", "arrows", "bar", "behind", "called", "children", "content", "controlled", "crawlable", "defaultvalue", "dom", "end", "first", "focus", "hidden", "home", "html", "inactive", "indicator", "labels", "matches", "move", "muted", "one", "onvaluechange", "pair", "panel", "panels", "pill", "remains", "render", "segmented", "springs", "stay", "stays", "tab", "tabs", "tabscontent", "tabstrigger", "the", "their", "track", "uncontrolled", "under", "underline", "value", "variant", "wai", "while", "with"], registryDependencies: ["list", "use-controllable-state", "use-indicator", "utils"] }, { name: "tag-input", type: "registry:ui", title: "Tag Input", description: "Free-form tags: Enter or a separator adds, Backspace removes the last, pasting a list adds them all. Duplicates, a max and a validate function keep bad tags in the input. One hidden input per tag.", exports: ["tagFieldClass", "Tag", "TagInput"], keywords: ["accessible", "add", "after", "allowed", "and", "animatepresence", "backspace", "besides", "button", "called", "children", "chip", "commit", "controlled", "defaultvalue", "disabled", "empty", "enter", "every", "false", "first", "form", "free", "hidden", "hides", "input", "inside", "its", "keys", "last", "limit", "list", "many", "max", "mode", "most", "name", "one", "onremove", "onvaluechange", "out", "pair", "paste", "pasted", "per", "poplayout", "press", "reject", "removable", "remove", "removes", "render", "rendered", "return", "runs", "separator", "separators", "shows", "split", "springs", "stays", "stops", "submits", "tag", "tags", "text", "that", "the", "these", "too", "trimming", "type", "typed", "typing", "uncontrolled", "validate", "value", "when", "with"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "terminal", type: "registry:ui", title: "Terminal", description: "Terminal window. Snippet mode types install commands once scrolled into view, with the full transcript kept in the DOM for SEO and no-JS; log mode streams lines into a live region that follows the bottom unless you scroll up, then offers a jump back. Status lines carry glyphs, copy grabs the commands.", exports: ["Terminal"], keywords: ["and", "append", "arrives", "back", "before", "body", "bodyclassname", "bottom", "character", "clipboard", "commands", "copy", "copytext", "defaults", "dom", "false", "follows", "for", "full", "hides", "install", "jump", "lines", "live", "log", "mode", "new", "offering", "once", "order", "output", "per", "prompt", "puts", "read", "reveals", "role", "scroll", "scrolling", "seo", "size", "snippet", "snippets", "speed", "stays", "sticks", "stream", "streams", "symbol", "terminal", "text", "the", "title", "typed", "types", "typing", "unless", "view", "what", "when", "window", "you"], registryDependencies: ["app-window", "code", "platform", "utils"] }, { name: "testimonial", type: "registry:block", title: "Testimonial", description: "A large Quote with its author, and everyone else who agrees as an overlapping AvatarGroup. Server-safe.", exports: ["Testimonial"], keywords: ["agrees", "and", "author", "avatar", "avatargroup", "behind", "beside", "carried", "children", "company", "crowd", "else", "everyone", "few", "first", "fold", "initials", "into", "its", "lang", "language", "large", "line", "one", "others", "otherslabel", "photo", "quote", "rest", "role", "said", "show", "stack", "streamers", "subtitle", "the", "trusted", "under", "url", "who", "with", "without"], registryDependencies: ["avatar", "avatar-group", "quote", "utils"] }, { name: "text-swap", type: "registry:ui", title: "TextSwap", description: "Spring-powered text morphing and ticker. Auto-cycles phrases or animates whenever children change with blur and slide transitions.", exports: ["TextSwap"], keywords: ["active", "array", "automatically", "between", "changing", "child", "children", "controlling", "cycle", "cycling", "default", "direction", "externally", "hover", "index", "interval", "items", "milliseconds", "mouse", "new", "pass", "pause", "pauseonhover", "single", "string", "swap", "swaps", "text", "the", "through", "true", "when"], registryDependencies: ["utils"] }, { name: "textarea", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", exports: ["Textarea"], keywords: ["auto", "cap", "content", "corner", "end", "field", "firefox", "grows", "max", "maxlength", "near", "needs", "red", "resizable", "show", "showcount", "sizing", "the", "then", "turns", "unsupported", "used", "warning", "where", "with"], registryDependencies: ["field", "input", "utils"] }, { name: "theme", type: "registry:lib", description: "Retints primary, focus rings, selection and switches app-wide. Persists like the theme.", exports: ["isDark", "setTheme", "subscribeTheme", "accents", "getAccent", "setAccent", "themeScript"], keywords: ["and", "app", "focus", "like", "persists", "primary", "retints", "rings", "selection", "switches", "the", "theme", "wide"], registryDependencies: [] }, { name: "theme-toggle", type: "registry:ui", title: "Theme Toggle", description: "Light/dark icon switch with spring rotate-swap; follows the OS until first use.", exports: ["ThemeToggle"], keywords: ["button", "click", "first", "follows", "icon", "moon", "rotate", "spring", "sun", "swap", "until"], registryDependencies: ["button", "theme", "utils"] }, { name: "timeline", type: "registry:ui", title: "Timeline", description: "Server-safe ordered list of events on a rail: icon or dot markers with status colors, machine-readable <time>, title and an optional body. For changelogs, experience and mod logs.", exports: ["Timeline", "TimelineItem"], keywords: ["above", "and", "body", "children", "color", "date", "datetime", "dot", "event", "events", "first", "for", "headline", "icon", "inside", "list", "machine", "marker", "newest", "oldest", "one", "optional", "order", "ordered", "pair", "rail", "readable", "render", "shown", "small", "the", "then", "time", "title", "variant", "with", "without", "yours"], registryDependencies: ["utils"] }, { name: "toast", type: "registry:ui", title: "Toast", description: "Stacked notifications. Hover to expand, swipe to dismiss, timers pause on hover.", exports: ["toast", "Toaster"], keywords: ["action", "description", "dismiss", "dismisses", "duration", "error", "expands", "focus", "hover", "layout", "loading", "mount", "once", "promise", "root", "saved", "stacked", "success", "swipe", "tap", "title", "toast", "toasts"], registryDependencies: ["use-dismiss", "utils"] }, { name: "toggle-group", type: "registry:ui", title: "Toggle Group", description: "Segmented control of toggle buttons. Single mode slides one pill to the pressed item (view mode, billing period); multiple mode toggles items independently (bold, italic). Arrow keys move between items.", exports: ["ToggleGroup", "ToggleGroupItem"], keywords: ["always", "and", "aria", "arrow", "behind", "between", "billing", "bold", "buttons", "called", "choice", "control", "controlled", "defaultvalue", "end", "every", "filters", "first", "height", "home", "icon", "independent", "italic", "item", "items", "keys", "label", "labels", "mode", "move", "multiple", "need", "one", "only", "onvaluechange", "pair", "period", "pill", "pressed", "render", "reported", "segment", "segmented", "set", "single", "size", "slides", "springs", "the", "time", "toggle", "toggles", "type", "uncontrolled", "value", "values", "view", "when", "with"], registryDependencies: ["list", "use-controllable-state", "use-indicator", "utils"] }, { name: "tooltip", type: "registry:ui", title: "Tooltip", description: "Short label on hover or keyboard focus, also wired as the trigger's aria-describedby. Warm-up: once one opens, neighbors open instantly. Hoverable, Esc dismisses, ignores touch.", exports: ["Tooltip"], keywords: ["accessible", "action", "align", "alignment", "also", "and", "aria", "becomes", "before", "button", "children", "content", "control", "default", "delay", "description", "dismisses", "element", "esc", "first", "flips", "focus", "focusable", "for", "hold", "hover", "how", "icon", "keyboard", "label", "one", "open", "opens", "own", "pointer", "preferred", "press", "reaches", "room", "short", "shows", "side", "stays", "still", "tap", "text", "the", "their", "there", "toggles", "tooltip", "touch", "trigger", "triggers", "wcag", "when", "while", "with"], registryDependencies: ["platform", "use-anchor", "use-dismiss", "use-hover-open", "utils"] }, { name: "typewriter", type: "registry:ui", title: "Typewriter", description: "Types out text character-by-character with optional phrase cycling and pulsing cursor. Full copy stays in the DOM for SEO.", exports: ["Typewriter"], keywords: ["and", "array", "before", "blinking", "called", "character", "classes", "cursor", "cursorchar", "cursorclassname", "custom", "cycle", "default", "delay", "deletespeed", "deleting", "dom", "effect", "for", "full", "fully", "headers", "hero", "loop", "milliseconds", "once", "oncomplete", "pause", "pauseduration", "per", "phrase", "phrases", "quotes", "seo", "show", "speed", "starting", "stays", "text", "the", "through", "true", "type", "typed", "typewriter", "typing", "wait", "when", "whether", "while"], registryDependencies: ["platform", "utils"] }, { name: "use-anchor", type: "registry:hook", description: `Fixed-position coordinates for a floating panel next to its anchor: on the preferred side,
+Renders a hidden span, so server components (Table) can use it as a child.`, exports: ["OverflowFocus"], keywords: ["again", "and", "arrow", "becomes", "can", "child", "components", "container", "drop", "fits", "focusable", "hidden", "inside", "keyboard", "keys", "leaves", "once", "order", "overflows", "renders", "scroll", "server", "span", "tab", "tabindex", "table", "the", "use", "while"], registryDependencies: [] }, { name: "pagination", type: "registry:ui", title: "Pagination", description: "Server-safe page links from page and total: previous/next, ellipsis gaps and a sliding active pill, with numbers that swipe the way you moved. Links by default; buttons with onPageChange. The row keeps a fixed width so it never jumps.", exports: ["Pagination", "pageRange"], keywords: ["active", "always", "and", "arrows", "bar", "become", "between", "buttons", "called", "changes", "client", "controls", "current", "default", "each", "ellipsis", "first", "for", "from", "gaps", "href", "index", "instead", "items", "its", "keeps", "kept", "key", "labels", "last", "length", "links", "mounted", "moved", "never", "next", "number", "numbers", "one", "only", "onpagechange", "page", "pagerange", "pages", "parents", "phones", "picked", "pill", "previous", "remounting", "render", "returns", "row", "same", "show", "siblings", "side", "slides", "slot", "stays", "swipe", "swipes", "text", "that", "the", "total", "unused", "url", "way", "width", "with", "without", "work", "you"], registryDependencies: ["button-variants", "pagination-motion", "utils"] }, { name: "pagination-motion", type: "registry:ui", description: "Scopes the active pill's `layoutId` so several paginations on a page don't share it.", exports: ["PaginationMotion", "PaginationActivePill", "PaginationNumber"], keywords: ["active", "behind", "changes", "children", "direction", "don", "from", "items", "its", "layoutid", "link", "moved", "next", "number", "outline", "page", "pagination", "paginations", "pill", "scopes", "several", "share", "side", "slot", "springs", "swipes", "that", "the", "toward", "travel", "value", "when"], registryDependencies: ["utils"] }, { name: "platform", type: "registry:lib", description: "False on the server and during hydration, true after: gates portals and other client-only output.", exports: ["useMounted", "useIsMac", "useMediaQuery"], keywords: ["after", "and", "assumes", "client", "corrects", "ctrl", "during", "false", "gates", "hydration", "live", "match", "media", "not", "only", "other", "output", "portals", "query", "render", "server", "shortcuts", "ssr", "the", "then", "true", "use", "where"], registryDependencies: [] }, { name: "popover", type: "registry:ui", title: "Popover", description: "Non-modal panel anchored to a Button for filters, pickers and quick edits. Focus moves in, Esc returns it, outside clicks close; Selects and menus opened inside don't count as outside.", exports: ["Popover", "PopoverTrigger", "PopoverContent"], keywords: ["action", "align", "alignment", "also", "anchored", "and", "any", "aria", "armed", "before", "blur", "both", "button", "called", "can", "check", "children", "click", "clicks", "closes", "confirm", "confirmlabel", "confirmtimeout", "content", "controlled", "default", "defaultopen", "defaults", "destructive", "done", "edits", "emphasis", "end", "enter", "esc", "feedback", "fill", "filters", "first", "flips", "focus", "focusable", "for", "form", "give", "height", "icon", "ignore", "ignores", "irreversible", "its", "label", "left", "like", "loading", "loadinglabel", "modal", "moves", "never", "non", "not", "old", "onclick", "one", "ones", "onopenchange", "open", "out", "outside", "padding", "pair", "panel", "past", "per", "pickers", "place", "popovercontent", "popovertrigger", "popup", "preferred", "primary", "quick", "render", "reserved", "resets", "resize", "returns", "room", "runs", "second", "shown", "shows", "side", "size", "slides", "spinner", "spins", "square", "state", "status", "stays", "step", "submit", "success", "successlabel", "swap", "swaps", "tab", "text", "the", "there", "this", "trap", "trigger", "twice", "two", "uncontrolled", "variant", "view", "when", "where", "while", "width", "with"], registryDependencies: ["button", "platform", "use-anchor", "use-controllable-state", "use-dismiss", "utils"] }, { name: "pricing", type: "registry:block", title: "Pricing", description: "Plan cards with a monthly / yearly segmented switch. Prices roll on a spring in the direction they moved; the featured plan is outlined in the accent. Card, Badge, ToggleGroup, Button.", exports: ["Pricing"], keywords: ["and", "bcp", "billing", "cards", "code", "currency", "defaultperiod", "display", "down", "drop", "eur", "first", "for", "formatting", "iso", "locale", "monthly", "next", "number", "order", "period", "plan", "plans", "price", "prices", "render", "rise", "rolling", "segmented", "selected", "spring", "swap", "switch", "the", "they", "togglegroup", "when", "with", "yearly", "yearlynote"], registryDependencies: ["badge", "card", "toggle-group", "utils"] }, { name: "product-card", type: "registry:block", title: "Product Card", description: "Shop tile: photos in an AspectRatio (a swipeable Carousel with dots when there are several), sale price, Badge and add-to-cart Button.", exports: ["ProductCard"], keywords: ["add", "addlabel", "are", "aspectratio", "badge", "bcp", "become", "button", "called", "card", "carousel", "code", "compareat", "currency", "current", "dots", "for", "formatting", "heading", "height", "href", "img", "iso", "label", "link", "locale", "major", "media", "name", "new", "number", "onaddtocart", "one", "original", "over", "page", "per", "photos", "pressed", "price", "product", "ratio", "sale", "several", "shop", "shows", "slide", "small", "square", "struck", "swipeable", "text", "the", "there", "through", "tile", "units", "when", "width", "with"], registryDependencies: ["aspect-ratio", "badge", "button", "carousel", "utils"] }, { name: "progress", type: "registry:ui", title: "Progress", description: "Accent bar that springs to each new value, with an optional label and percentage. Leave out value for an indeterminate sweep (static under reduced motion).", exports: ["Progress"], keywords: ["above", "accent", "accessible", "across", "allowed", "also", "aria", "bar", "colored", "duration", "each", "for", "frame", "indeterminate", "infinite", "its", "label", "layout", "max", "motion", "name", "new", "next", "omit", "one", "per", "percentage", "reduced", "scalex", "segment", "show", "showvalue", "size", "springs", "static", "sweeps", "that", "the", "there", "thickness", "tween", "under", "unknown", "value", "visible", "when", "work"], registryDependencies: ["utils"] }, { name: "quote", type: "registry:ui", title: "Quote", description: "Semantic figure, blockquote and figcaption. Plain, card and large variants, with author, subtitle, avatar, lang, typewriter and textSwap.", exports: ["Quote"], keywords: ["accent", "alt", "and", "array", "author", "avatar", "blockquote", "card", "children", "correct", "custom", "cycles", "delay", "display", "doe", "effect", "enables", "fades", "figcaption", "figure", "for", "into", "jane", "job", "lang", "language", "large", "line", "mark", "options", "pass", "plain", "pronunciation", "quote", "quoted", "quotes", "reader", "said", "screen", "scrolls", "secondary", "semantic", "seo", "size", "slot", "speed", "spring", "string", "strings", "subtitle", "supports", "surface", "swap", "text", "textswap", "the", "through", "title", "transitions", "typewriter", "under", "variant", "view", "when", "who", "with", "work", "wrote"], registryDependencies: ["text-swap", "typewriter", "utils"] }, { name: "radio-group", type: "registry:ui", title: "Radio Group", description: "Native radios in a fieldset with a legend: browser arrow keys and form submit, a dot that springs in, optional per-option descriptions, vertical or horizontal.", exports: ["RadioGroup", "RadioGroupItem"], keywords: ["adds", "and", "application", "aria", "arrow", "browser", "but", "called", "children", "conform", "controlled", "defaultvalue", "description", "disabled", "does", "entered", "expected", "field", "fieldset", "first", "form", "format", "generated", "group", "indicates", "invalid", "item", "items", "its", "keys", "label", "labels", "lay", "legend", "line", "muted", "name", "native", "needs", "not", "omitted", "one", "onvaluechange", "option", "orientation", "pair", "picked", "radios", "render", "rendered", "required", "row", "selectable", "shown", "stack", "submit", "submitted", "the", "them", "uncontrolled", "under", "value", "visible", "when", "with", "work"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "rating", type: "registry:ui", title: "Rating", description: "Star rating on native radios (arrow keys, forms) with hover preview, or readOnly display with fractional stars for averages.", exports: ["Rating"], keywords: ["and", "aria", "arrow", "called", "can", "chosen", "controlled", "defaultvalue", "describedby", "disabled", "display", "error", "field", "filled", "fills", "first", "for", "form", "forms", "fractions", "from", "group", "hidden", "hint", "hover", "ids", "image", "included", "inputs", "interactive", "invalid", "isn", "keys", "label", "lift", "max", "name", "native", "needs", "number", "only", "onvaluechange", "pair", "partially", "picked", "press", "preview", "radios", "rating", "readers", "readonly", "render", "renders", "required", "score", "screen", "sets", "size", "spring", "star", "stars", "styling", "submit", "submitted", "text", "the", "uncontrolled", "value", "visually", "with"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "relative-time", type: "registry:ui", title: "Relative Time", description: "Self-updating “5 minutes ago” in a semantic <time> with the full date as its title. Server renders the absolute date (no hydration mismatch); one shared ticker for the whole page.", exports: ["RelativeTime"], keywords: ["absolute", "ago", "and", "both", "client", "crawlers", "current", "date", "default", "differ", "full", "get", "hydration", "its", "itself", "keeps", "locale", "minutes", "mismatch", "not", "now", "one", "page", "pass", "real", "relative", "render", "renders", "semantic", "server", "shared", "stored", "text", "that", "the", "there", "ticker", "time", "timestamp", "title", "with", "would"], registryDependencies: ["utils"] }, { name: "resizable", type: "registry:ui", title: "Resizable", description: "Split panes for admin layouts, docs and editors. Hairline dividers with a wide grab area follow the pointer; collapsible panels snap shut past half their minimum. Dividers are APG window splitters: arrows step, Home/End jump to the limits, Enter or double-click collapses with a spring. Groups nest.", exports: ["ResizablePanelGroup", "ResizablePanel", "ResizableHandle"], keywords: ["adds", "admin", "after", "already", "and", "apg", "are", "arrow", "arrows", "basis", "between", "click", "collapsed", "collapsedsize", "collapses", "collapsible", "component", "cookie", "css", "default", "defaultsize", "direction", "divider", "docs", "dom", "double", "drag", "dragging", "each", "editors", "end", "enter", "evenly", "final", "find", "flex", "follows", "for", "grip", "group", "half", "handle", "handles", "home", "horizontal", "hydration", "icon", "jump", "key", "keyboardstep", "keys", "largest", "layout", "layouts", "left", "limits", "maxsize", "middle", "minimum", "minsize", "neighbor", "one", "onlayout", "order", "others", "panels", "panes", "parents", "past", "per", "plain", "pointer", "press", "rail", "rest", "save", "server", "share", "shows", "shut", "side", "size", "sizes", "smallest", "snaps", "split", "splitters", "spring", "ssr", "stacked", "starting", "step", "the", "their", "them", "toggle", "toggles", "two", "until", "vertical", "visible", "what", "when", "window", "withhandle", "without", "work", "wrappers"], registryDependencies: ["utils"] }, { name: "reveal", type: "registry:ui", title: "Reveal", description: "Scroll reveal: content fades and rises on a spring the first time it enters the viewport.", exports: ["Reveal"], keywords: ["after", "and", "content", "delay", "entering", "fades", "first", "into", "offset", "place", "rises", "scrolls", "seconds", "spring", "start", "stays", "the", "time", "view", "visible", "wait"], registryDependencies: ["utils"] }, { name: "scroll-area", type: "registry:ui", title: "Scroll Area", description: "Overlay scrollbars: thin thumbs that fade in while scrolling or on hover, widen under the pointer and drag. Scrolling stays native; the labeled region is keyboard-focusable.", exports: ["ScrollArea"], keywords: ["also", "and", "aria", "axes", "can", "classes", "drag", "fade", "focus", "for", "get", "give", "goes", "height", "here", "horizontal", "hover", "itself", "keyboard", "label", "mouse", "names", "native", "one", "orientation", "overlay", "padding", "region", "scroll", "scrollable", "scrollbars", "scrolling", "stays", "takes", "that", "the", "thin", "thumb", "thumbs", "touch", "users", "viewport", "viewportclassname", "wheel", "while", "widen"], registryDependencies: ["utils"] }, { name: "search-input", type: "registry:ui", title: "Search Input", description: 'Search field built on Input: leading icon, spring-in clear button, Esc to clear, and an optional focus shortcut ("/" or mod+k) with a Kbd hint.', exports: ["SearchInput"], keywords: ["accessible", "already", "and", "anywhere", "aside", "border", "browser", "button", "called", "change", "clear", "cleared", "clears", "command", "controlled", "ctrl", "default", "defaultvalue", "elsewhere", "embedded", "esc", "every", "field", "find", "first", "focus", "focused", "focuses", "for", "from", "ghost", "hidden", "hint", "htmlfor", "icon", "inputs", "kbd", "key", "label", "mac", "mod", "name", "onvaluechange", "opens", "optional", "own", "pair", "palette", "pass", "query", "render", "ring", "search", "second", "shadow", "shortcut", "single", "skipped", "spring", "steps", "still", "surface", "the", "uncontrolled", "value", "variant", "when", "while", "with", "you"], registryDependencies: ["input", "kbd", "platform", "use-controllable-state", "use-hotkey", "utils"] }, { name: "segmented-tabs", type: "registry:ui", title: "AppWindow", description: "Window container with close / minimize / zoom controls, title, custom header slot and actions. SegmentedTabs is the compact view switcher for its title bar.", exports: ["SegmentedTabs"], keywords: ["accessible", "active", "also", "always", "aria", "behind", "called", "current", "for", "indicator", "item", "items", "label", "labels", "list", "marked", "name", "onchange", "one", "pressed", "segmented", "slides", "spring", "tab", "tabs", "the", "under", "used", "value", "values", "with"], registryDependencies: ["overflow-focus", "use-indicator", "utils"] }, { name: "select", type: "registry:ui", title: "Select", description: "Single-choice listbox styled like Input, with groups, icons and disabled options. Native-select keyboard (arrows, typeahead even while closed), flips above the trigger near the viewport edge, submits and validates with the form.", exports: ["Select"], keywords: ["accessible", "also", "aria", "blocks", "called", "cancel", "choice", "closed", "controlled", "defaultvalue", "describedby", "disabled", "down", "end", "enter", "error", "esc", "field", "fill", "fills", "first", "flat", "for", "form", "from", "groups", "hint", "home", "htmlfor", "ids", "input", "invalid", "isn", "keyboard", "label", "labeled", "let", "like", "listbox", "matches", "name", "native", "needs", "nothing", "onvaluechange", "opening", "options", "pair", "pick", "picked", "placeholder", "render", "required", "select", "sets", "single", "space", "styled", "styling", "submit", "submitted", "text", "the", "there", "trigger", "typeahead", "uncontrolled", "value", "visible", "when", "while", "with"], registryDependencies: ["field", "form-value", "input", "list", "platform", "use-anchor", "use-controllable-state", "use-dismiss", "utils"] }, { name: "separator", type: "registry:ui", title: "Separator", description: 'Server-safe hairline, horizontal or vertical, decorative by default, with an optional centered label like "or".', exports: ["Separator"], keywords: ["assistive", "centered", "content", "decorative", "default", "direction", "false", "for", "horizontal", "label", "line", "only", "orientation", "purely", "separates", "set", "tech", "text", "the", "visual", "when"], registryDependencies: ["utils"] }, { name: "sidebar", type: "registry:ui", title: "Sidebar", description: "App navigation from data: header, groups (optionally foldable), badges and pinned footer entries. Collapses to an icon rail on a spring (⌘B / Ctrl+B) with labels kept for assistive tech; below md it is a left drawer.", exports: ["SidebarLayout", "Sidebar", "SidebarTrigger"], keywords: ["a11y", "accessible", "and", "aria", "below", "bottom", "but", "called", "client", "clip", "collapsed", "collapses", "controlled", "ctrl", "current", "data", "default", "defaultcollapsed", "drawer", "entries", "field", "footer", "for", "from", "groups", "header", "highlighted", "holds", "icon", "ignored", "item", "label", "labels", "landmark", "lays", "left", "links", "name", "navigation", "oncollapsedchange", "onselect", "page", "pair", "picked", "pinned", "rail", "routing", "settings", "shortcut", "side", "sidebar", "slot", "spring", "start", "state", "stay", "the", "toggle", "too", "top", "tree", "trigger", "true", "typing", "uncontrolled", "when", "while", "with", "workspace"], registryDependencies: ["button", "collapsible", "drawer", "platform", "use-controllable-state", "use-hotkey", "utils"] }, { name: "site-header", type: "registry:block", title: "Site Header", description: "Sticky, translucent site header from one nav array: brand, NavigationMenu panels from md up, a right Drawer with the same links below it, and your actions on the right. The hairline underneath appears only once content scrolls beneath it.", exports: ["SiteHeader"], keywords: ["accessible", "acme", "actions", "alike", "and", "appears", "aria", "below", "brand", "client", "close", "controls", "current", "demo", "desktop", "drawer", "every", "for", "from", "hairline", "hand", "header", "href", "label", "left", "level", "link", "links", "logo", "marks", "matching", "name", "nav", "navigation", "navigationmenu", "once", "onclick", "only", "onnavigate", "over", "page", "panels", "right", "routing", "same", "scrolls", "search", "shown", "sign", "site", "sticky", "stub", "the", "theme", "top", "under", "width", "with"], registryDependencies: ["button", "drawer", "navigation-menu", "use-disclosure", "utils"] }, { name: "skeleton", type: "registry:ui", title: "Skeleton", description: 'Server-safe loading placeholders that pulse (static under reduced motion). SkeletonGroup announces one "Loading" to screen readers.', exports: ["Skeleton", "SkeletonGroup"], keywords: ["announced", "block", "classes", "classname", "hear", "instead", "label", "loading", "nothing", "one", "placeholder", "readers", "screen", "shown", "size", "skeleton", "skeletons", "this", "while", "with", "wrap"], registryDependencies: ["utils"] }, { name: "slider", type: "registry:ui", title: "Slider", description: "Slider over native range inputs: thin accent track, white knob that lifts while held. One value or two for a range; keyboard, forms, touch and Field wiring come from the platform.", exports: ["Slider"], keywords: ["accent", "accessible", "and", "aren", "aria", "arrow", "blocks", "browser", "called", "defaults", "defaultvalue", "describedby", "disabled", "does", "drag", "dragging", "error", "every", "field", "fills", "filter", "first", "for", "forms", "from", "held", "highest", "hint", "ids", "increment", "inputs", "invalid", "keyboard", "keys", "knob", "labels", "lifts", "lowest", "max", "maximum", "min", "minimum", "name", "names", "native", "one", "onvaluechange", "over", "per", "price", "range", "readers", "render", "screen", "sets", "slider", "step", "styling", "submitted", "text", "that", "the", "thin", "thumb", "touch", "track", "twice", "two", "uncontrolled", "value", "values", "while", "white", "with", "work"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "spinner", type: "registry:ui", title: "Spinner", description: "Server-safe activity indicator: eight spokes in currentColor, three sizes, its own status label (or silent inside a parent that announces). Holds still under reduced motion.", exports: ["Spinner"], keywords: ["accessible", "activity", "already", "announces", "busy", "currentcolor", "diameter", "eight", "holds", "indicator", "label", "motion", "name", "parent", "pass", "reduced", "size", "spokes", "state", "still", "the", "under", "when"], registryDependencies: ["utils"] }, { name: "stat-tile", type: "registry:block", title: "Stat Tile", description: "Admin dashboard metric: value, a delta Badge that is green when the change is good news (invert for errors and latency), and an area Chart of the trend. Server-safe.", exports: ["StatTile"], keywords: ["admin", "and", "area", "axis", "badge", "below", "change", "chart", "dashboard", "data", "datakey", "delta", "down", "each", "errors", "for", "format", "formatted", "good", "green", "headline", "index", "intl", "invert", "key", "label", "last", "latency", "metric", "metrics", "month", "name", "news", "number", "period", "positive", "revenue", "row", "rows", "the", "tile", "tooltip", "trend", "unless", "value", "when", "where"], registryDependencies: ["badge", "card", "chart", "utils"] }, { name: "stats-strip", type: "registry:block", title: "Stats Strip", description: "Headline numbers, each card a <dl>: cards rise in turn with Reveal, then each number springs up with CountTo. Final values are in the HTML.", exports: ["StatsStrip"], keywords: ["card", "display", "each", "headline", "its", "number", "numbers", "order", "rises", "row", "springs", "stats", "then", "turn"], registryDependencies: ["card", "count-to", "reveal", "utils"] }, { name: "stepper", type: "registry:ui", title: "Stepper", description: "Multi-step form (questionnaire, checkout, setup wizard). Steps stay mounted so values survive Back and submit together; Continue checks only the current step's native constraints, plus an optional async onNext guard with a spinner. Progress header with springing connectors; works with onSubmit or a Server Action.", exports: ["Stepper", "StepperList", "StepperStep", "StepperFooter"], keywords: ["action", "after", "and", "are", "back", "backlabel", "button", "called", "check", "checks", "children", "connector", "constraints", "continue", "controlled", "current", "defaultvalue", "description", "every", "false", "fields", "fills", "finished", "first", "for", "form", "header", "hidden", "inactive", "its", "last", "links", "matches", "mounted", "multi", "native", "new", "nextlabel", "not", "one", "only", "onnext", "onsubmit", "onvaluechange", "optional", "order", "pass", "progress", "render", "resolve", "return", "runs", "server", "shown", "shows", "spinner", "spring", "start", "stay", "stays", "step", "steps", "submit", "submitlabel", "submits", "survive", "text", "the", "through", "title", "together", "uncontrolled", "unmounted", "value", "values", "while", "with"], registryDependencies: ["button", "use-controllable-state", "utils"] }, { name: "styles", type: "registry:file", exports: [], keywords: [], registryDependencies: [] }, { name: "switch", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", exports: ["Switch"], keywords: ["called", "checkbox", "checked", "controlled", "defaultchecked", "first", "knob", "native", "new", "oncheckedchange", "pair", "render", "role", "spring", "state", "switch", "the", "uncontrolled", "with"], registryDependencies: ["field", "use-controllable-state", "utils"] }, { name: "table", type: "registry:ui", title: "Table", description: "Server-safe semantic <table> in a scrolling card: header, body, footer and caption, striped rows, tinted selected rows, and sortable headers that set aria-sort and flip their arrow.", exports: ["Table", "TableHeader", "TableBody", "TableFooter", "TableRow", "TableHead", "TableCell", "TableCaption"], keywords: ["alternating", "and", "aria", "around", "arrow", "button", "called", "card", "classes", "column", "containerclassname", "data", "direction", "for", "header", "keyboard", "makes", "narrow", "onsort", "pass", "pressed", "real", "requires", "row", "screens", "scrollable", "scrolling", "scrolls", "selected", "sets", "shading", "shows", "sideways", "sort", "sortable", "state", "striped", "table", "that", "the", "then", "tint", "when"], registryDependencies: ["overflow-focus", "utils"] }, { name: "tabs", type: "registry:ui", title: "Tabs", description: "WAI-ARIA tabs with arrow, Home and End keys. One indicator springs between tabs, segmented or underline. Inactive panels stay in the DOM for SEO; the active one fades in.", exports: ["Tabs", "TabsList", "TabsTrigger", "TabsContent"], keywords: ["activated", "active", "always", "and", "aria", "arrows", "bar", "behind", "called", "children", "content", "controlled", "crawlable", "defaultvalue", "dom", "end", "first", "focus", "hidden", "home", "html", "inactive", "indicator", "labels", "matches", "move", "muted", "one", "onvaluechange", "pair", "panel", "panels", "pill", "remains", "render", "segmented", "springs", "stay", "stays", "tab", "tabs", "tabscontent", "tabstrigger", "the", "their", "track", "uncontrolled", "under", "underline", "value", "variant", "wai", "while", "with"], registryDependencies: ["list", "use-controllable-state", "use-indicator", "utils"] }, { name: "tag-input", type: "registry:ui", title: "Tag Input", description: "Free-form tags: Enter or a separator adds, Backspace removes the last, pasting a list adds them all. Duplicates, a max and a validate function keep bad tags in the input. Submits one entry per tag; required needs one.", exports: ["tagFieldClass", "Tag", "TagInput"], keywords: ["accessible", "add", "after", "allowed", "and", "animatepresence", "backspace", "besides", "button", "called", "children", "chip", "commit", "controlled", "defaultvalue", "disabled", "empty", "enter", "every", "false", "first", "form", "free", "hides", "input", "inside", "its", "keys", "last", "least", "limit", "list", "many", "max", "mode", "most", "name", "needs", "one", "onremove", "onvaluechange", "out", "pair", "paste", "pasted", "per", "poplayout", "press", "reject", "removable", "remove", "removes", "render", "rendered", "required", "return", "runs", "separator", "separators", "shows", "split", "springs", "stays", "stops", "submits", "tag", "tags", "text", "that", "the", "these", "too", "trimming", "type", "typed", "typing", "uncontrolled", "validate", "value", "when", "with"], registryDependencies: ["field", "form-value", "use-controllable-state", "utils"] }, { name: "terminal", type: "registry:ui", title: "Terminal", description: "Terminal window. Snippet mode types install commands once scrolled into view, with the full transcript kept in the DOM for SEO and no-JS; log mode streams lines into a live region that follows the bottom unless you scroll up, then offers a jump back. Status lines carry glyphs, copy grabs the commands.", exports: ["Terminal"], keywords: ["and", "append", "arrives", "back", "before", "body", "bodyclassname", "bottom", "character", "clipboard", "commands", "copy", "copytext", "defaults", "dom", "false", "follows", "for", "full", "hides", "install", "jump", "lines", "live", "log", "mode", "new", "offering", "once", "order", "output", "per", "prompt", "puts", "read", "reveals", "role", "scroll", "scrolling", "seo", "size", "snippet", "snippets", "speed", "stays", "sticks", "stream", "streams", "symbol", "terminal", "text", "the", "title", "typed", "types", "typing", "unless", "view", "what", "when", "window", "you"], registryDependencies: ["app-window", "code", "platform", "utils"] }, { name: "testimonial", type: "registry:block", title: "Testimonial", description: "A large Quote with its author, and everyone else who agrees as an overlapping AvatarGroup. Server-safe.", exports: ["Testimonial"], keywords: ["agrees", "and", "author", "avatar", "avatargroup", "behind", "beside", "carried", "children", "company", "crowd", "else", "everyone", "few", "first", "fold", "initials", "into", "its", "lang", "language", "large", "line", "one", "others", "otherslabel", "photo", "quote", "rest", "role", "said", "show", "stack", "streamers", "subtitle", "the", "trusted", "under", "url", "who", "with", "without"], registryDependencies: ["avatar", "avatar-group", "quote", "utils"] }, { name: "text-swap", type: "registry:ui", title: "TextSwap", description: "Spring-powered text morphing and ticker. Auto-cycles phrases or animates whenever children change with blur and slide transitions.", exports: ["TextSwap"], keywords: ["active", "array", "automatically", "between", "changing", "child", "children", "controlling", "cycle", "cycling", "default", "direction", "externally", "hover", "index", "interval", "items", "milliseconds", "mouse", "new", "pass", "pause", "pauseonhover", "single", "string", "swap", "swaps", "text", "the", "through", "true", "when"], registryDependencies: ["utils"] }, { name: "textarea", type: "registry:ui", title: "Forms", description: "Input, Textarea, Label and Switch: smooth focus rings, native :user-invalid validation (red only after interaction), aria-invalid, auto-growing textarea with an optional character count, and a spring switch.", exports: ["Textarea"], keywords: ["auto", "cap", "content", "corner", "end", "field", "firefox", "grows", "max", "maxlength", "near", "needs", "red", "resizable", "show", "showcount", "sizing", "the", "then", "turns", "unsupported", "used", "warning", "where", "with"], registryDependencies: ["field", "input", "utils"] }, { name: "theme", type: "registry:lib", description: "Retints primary, focus rings, selection and switches app-wide. Persists like the theme.", exports: ["isDark", "setTheme", "subscribeTheme", "accents", "getAccent", "setAccent", "themeScript"], keywords: ["and", "app", "focus", "like", "persists", "primary", "retints", "rings", "selection", "switches", "the", "theme", "wide"], registryDependencies: [] }, { name: "theme-toggle", type: "registry:ui", title: "Theme Toggle", description: "Light/dark icon switch with spring rotate-swap; follows the OS until first use.", exports: ["ThemeToggle"], keywords: ["button", "click", "first", "follows", "icon", "moon", "rotate", "spring", "sun", "swap", "until"], registryDependencies: ["button", "theme", "utils"] }, { name: "timeline", type: "registry:ui", title: "Timeline", description: "Server-safe ordered list of events on a rail: icon or dot markers with status colors, machine-readable <time>, title and an optional body. For changelogs, experience and mod logs.", exports: ["Timeline", "TimelineItem"], keywords: ["above", "and", "body", "children", "color", "date", "datetime", "dot", "event", "events", "first", "for", "headline", "icon", "inside", "list", "machine", "marker", "newest", "oldest", "one", "optional", "order", "ordered", "pair", "rail", "readable", "render", "shown", "small", "the", "then", "time", "title", "variant", "with", "without", "yours"], registryDependencies: ["utils"] }, { name: "toast", type: "registry:ui", title: "Toast", description: "Stacked notifications. Hover to expand, swipe to dismiss, timers pause on hover.", exports: ["toast", "Toaster"], keywords: ["action", "description", "dismiss", "dismisses", "duration", "error", "expands", "focus", "hover", "layout", "loading", "mount", "once", "promise", "root", "saved", "stacked", "success", "swipe", "tap", "title", "toast", "toasts"], registryDependencies: ["use-dismiss", "utils"] }, { name: "toggle-group", type: "registry:ui", title: "Toggle Group", description: "Segmented control of toggle buttons. Single mode slides one pill to the pressed item (view mode, billing period); multiple mode toggles items independently (bold, italic). Arrow keys move between items.", exports: ["ToggleGroup", "ToggleGroupItem"], keywords: ["always", "and", "aria", "arrow", "behind", "between", "billing", "bold", "buttons", "called", "choice", "control", "controlled", "defaultvalue", "end", "every", "filters", "first", "height", "home", "icon", "independent", "italic", "item", "items", "keys", "label", "labels", "mode", "move", "multiple", "need", "one", "only", "onvaluechange", "pair", "period", "pill", "pressed", "render", "reported", "segment", "segmented", "set", "single", "size", "slides", "springs", "the", "time", "toggle", "toggles", "type", "uncontrolled", "value", "values", "view", "when", "with"], registryDependencies: ["list", "use-controllable-state", "use-indicator", "utils"] }, { name: "tooltip", type: "registry:ui", title: "Tooltip", description: "Short label on hover or keyboard focus, also wired as the trigger's aria-describedby. Warm-up: once one opens, neighbors open instantly. Hoverable, Esc dismisses, ignores touch.", exports: ["Tooltip"], keywords: ["accessible", "action", "align", "alignment", "also", "and", "aria", "becomes", "before", "button", "children", "content", "control", "default", "delay", "description", "dismisses", "element", "esc", "first", "flips", "focus", "focusable", "for", "hold", "hover", "how", "icon", "keyboard", "label", "one", "open", "opens", "own", "pointer", "preferred", "press", "reaches", "room", "short", "shows", "side", "stays", "still", "tap", "text", "the", "their", "there", "toggles", "tooltip", "touch", "trigger", "triggers", "wcag", "when", "while", "with"], registryDependencies: ["platform", "use-anchor", "use-dismiss", "use-hover-open", "utils"] }, { name: "typewriter", type: "registry:ui", title: "Typewriter", description: "Types out text character-by-character with optional phrase cycling and pulsing cursor. Full copy stays in the DOM for SEO.", exports: ["Typewriter"], keywords: ["and", "array", "before", "blinking", "called", "character", "classes", "cursor", "cursorchar", "cursorclassname", "custom", "cycle", "default", "delay", "deletespeed", "deleting", "dom", "effect", "for", "full", "fully", "headers", "hero", "loop", "milliseconds", "once", "oncomplete", "pause", "pauseduration", "per", "phrase", "phrases", "quotes", "seo", "show", "speed", "starting", "stays", "text", "the", "through", "true", "type", "typed", "typewriter", "typing", "wait", "when", "whether", "while"], registryDependencies: ["platform", "utils"] }, { name: "use-anchor", type: "registry:hook", description: `Fixed-position coordinates for a floating panel next to its anchor: on the preferred side,
 flipped when it doesn't fit, clamped to the viewport, kept in place on scroll and resize.
 Measures before paint, so nothing jumps.`, exports: ["useAnchor"], keywords: ["anchor", "and", "before", "clamped", "coordinates", "doesn", "fit", "fixed", "flipped", "floating", "for", "its", "jumps", "kept", "measures", "next", "nothing", "paint", "panel", "place", "position", "preferred", "resize", "scroll", "side", "the", "viewport", "when"], registryDependencies: ["utils"] }, { name: "use-controllable-state", type: "registry:hook", description: "State a parent may own. Controlled while `value` is defined; otherwise kept here, seeded from\n`defaultValue`. The setter always reports through `onChange`, so both modes stay observable.", exports: ["useControllableState"], keywords: ["always", "both", "controlled", "defaultvalue", "defined", "from", "here", "kept", "may", "modes", "observable", "onchange", "otherwise", "own", "parent", "reports", "seeded", "setter", "state", "stay", "the", "through", "value", "while"], registryDependencies: [] }, { name: "use-disclosure", type: "registry:hook", description: "Open state for any overlay. Spread `props` onto Dialog, Drawer, Popover or DropdownMenu and\nopen it from anywhere: `const drawer = useDisclosure(); <Drawer {...drawer.props}>`, `drawer.show()`.", exports: ["useDisclosure"], keywords: ["and", "any", "anywhere", "const", "dialog", "drawer", "dropdownmenu", "for", "from", "onto", "open", "overlay", "popover", "props", "show", "spread", "state", "usedisclosure"], registryDependencies: [] }, { name: "use-dismiss", type: "registry:hook", description: "Inside one of `refs` (panel first, then its trigger), or inside a floating child opened from\nthe panel: a Select list or menu portals out, but it is marked `data-floating`.", exports: ["isWithin", "useDismiss"], keywords: ["and", "but", "child", "children", "closes", "data", "first", "floating", "from", "inside", "its", "list", "marked", "menu", "one", "opened", "out", "outside", "panel", "pointerdown", "portals", "refs", "select", "the", "then", "trigger"], registryDependencies: [] }, { name: "use-hotkey", type: "registry:hook", description: '`"mod+k"`: ⌘K on Mac, Ctrl+K elsewhere, without Alt. `"/"`: the key alone, no modifiers.', exports: ["matchesHotkey", "useHotkey"], keywords: ["alone", "alt", "browser", "ctrl", "disable", "elsewhere", "false", "handler", "key", "keyboard", "leave", "mac", "mod", "modifiers", "pass", "preventdefault", "returns", "shortcut", "the", "undefined", "wide", "window", "without"], registryDependencies: [] }, { name: "use-hover-open", type: "registry:hook", description: "Open-on-hover state with intent delays, shared by Tooltip and HoverCard. Mouse only (touch\ntaps go to the trigger's own action); keyboard focus opens it too. Spread `trigger` on the\nanchor and `floating` on the panel so moving between them keeps it open.", exports: ["useHoverOpen"], keywords: ["action", "anchor", "and", "between", "delays", "floating", "focus", "hover", "hovercard", "intent", "keeps", "keyboard", "mouse", "moving", "only", "open", "opens", "own", "panel", "shared", "spread", "state", "taps", "the", "them", "too", "tooltip", "touch", "trigger", "with"], registryDependencies: [] }, { name: "use-indicator", type: "registry:hook", description: `Offset and width of the active item, for one indicator that springs between items (Tabs,
 ToggleGroup). Re-measures when the item or its row resizes (font swap, wrap), or the pill
@@ -17284,7 +17692,7 @@ async function fetchAllItems(source) {
 // jsr.json
 var jsr_default = {
   name: "@kznlabs/labsui",
-  version: "0.1.5",
+  version: "0.1.7",
   license: "MIT",
   exports: "./src/index.ts",
   publish: {
@@ -18129,6 +18537,9 @@ function printView(views) {
   console.log(md.replace(/^(#{2,3} .*)$/gm, (line) => bold(line)));
 }
 
+// src/mcp.ts
+import { fileURLToPath } from "node:url";
+
 // src/rules.ts
 var rules = (alias = "@/") => `# labsUI
 
@@ -18417,6 +18828,26 @@ function serve(ctx) {
 `);
   let queue = Promise.resolve();
   let buffer = "";
+  let usesRoots = false;
+  let sent = 0;
+  const waiting = new Map;
+  const ask = (method) => new Promise((resolve) => {
+    const id = `labsui-${++sent}`;
+    const settle = (result) => {
+      clearTimeout(timer);
+      waiting.delete(id);
+      resolve(result);
+    };
+    const timer = setTimeout(() => settle(undefined), 5000);
+    waiting.set(id, settle);
+    write({ jsonrpc: "2.0", id, method });
+  });
+  const readRoots = async () => {
+    const roots = (await ask("roots/list"))?.roots;
+    const uri = roots?.find((root) => root.uri?.startsWith("file:"))?.uri;
+    if (uri)
+      ctx.cwd = fileURLToPath(uri);
+  };
   const onLine = (line) => {
     let msg;
     try {
@@ -18424,6 +18855,15 @@ function serve(ctx) {
     } catch {
       return write({ jsonrpc: "2.0", id: null, error: { code: -32700, message: "Parse error" } });
     }
+    if (!Array.isArray(msg) && msg.method === undefined)
+      return waiting.get(String(msg.id))?.(msg.result);
+    if (!Array.isArray(msg) && !ctx.pinned) {
+      if (msg.method === "initialize")
+        usesRoots = Boolean(msg.params?.capabilities?.roots);
+      const changed = msg.method === "notifications/initialized" || msg.method === "notifications/roots/list_changed";
+      if (usesRoots && changed)
+        queue = queue.then(readRoots);
+    }
     queue = queue.then(async () => {
       try {
         if (Array.isArray(msg)) {
@@ -18564,7 +19004,7 @@ async function main() {
     case "rules":
       return console.log(rules(readConfig(cwd)?.alias));
     case "mcp":
-      return serve({ cwd, registry, version: VERSION });
+      return serve({ cwd, pinned: values.cwd !== undefined, registry, version: VERSION });
     default:
       throw new CliError(`Unknown command "${command}". Run labsui --help.`);
   }