@waveso/ui 0.15.1 → 0.16.0

package/dist/combobox.js

@@ -94,7 +94,7 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
 			"data-slot": "combobox-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 *:data-[slot=input-group]:bg-edge/30 *:data-[slot=input-group]:border-edge/30 group/combobox-content relative max-h-(--available-height) max-w-(--available-width) min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className),
+			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 *:data-[slot=input-group]:bg-shade/30 *:data-[slot=input-group]:border-shade/30 group/combobox-content relative max-h-(--available-height) max-w-(--available-width) min-w-(--anchor-width) overflow-hidden rounded-md shadow-md ring-1 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className),
 			...props
 		})
 	}) });
@@ -109,7 +109,7 @@ function ComboboxList({ className, ...props }) {
 function ComboboxItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
 		"data-slot": "combobox-item",
-		className: cn("data-highlighted:bg-primary data-highlighted:text-white not-data-[variant=destructive]:data-highlighted:**:text-white relative flex w-full cursor-clickable items-center gap-2 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("data-highlighted:bg-highlight relative flex w-full cursor-clickable items-center gap-2 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
 			render: /* @__PURE__ */ jsx("span", {
@@ -150,11 +150,11 @@ function ComboboxEmpty({ className, ...props }) {
 function ComboboxSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
 		"data-slot": "combobox-separator",
-		className: cn("bg-line -mx-1 my-1 h-px", className),
+		className: cn("bg-contour -mx-1 my-1 h-px", className),
 		...props
 	});
 }
-const comboboxChipsVariants = cva("bg-edge hover:border-focus focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-destructive/30 has-aria-invalid:border-destructive flex flex-wrap items-center gap-1 rounded-md border border-transparent motion-color focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", {
+const comboboxChipsVariants = cva("bg-shade hover:border-focus focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-danger/30 has-aria-invalid:border-danger flex flex-wrap items-center gap-1 rounded-md border border-transparent motion-color focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", {
 	variants: { size: {
 		xs: "min-h-6 rounded-sm px-2 py-0.5 text-xs",
 		sm: "min-h-8 px-3 py-1 text-sm",

package/dist/context-menu.d.ts

@@ -20,7 +20,8 @@ type ContextMenuLabelProps = React.ComponentProps<typeof ContextMenu$1.GroupLabe
 };
 type ContextMenuItemProps = React.ComponentProps<typeof ContextMenu$1.Item> & {
   inset?: boolean;
-  variant?: "default" | "destructive";
+  /** `danger` turns the item's text and leading icon red. */
+  variant?: "default" | "danger";
 };
 type ContextMenuSubProps = React.ComponentProps<typeof ContextMenu$1.SubmenuRoot>;
 type ContextMenuSubTriggerProps = React.ComponentProps<typeof ContextMenu$1.SubmenuTrigger> & {

package/dist/context-menu.js

@@ -24,7 +24,7 @@ function ContextMenuTrigger({ className, ...props }) {
 		...props
 	});
 }
-function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, restoreFocusOnClose, finalFocus, ...props }) {
+function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "inline-end", sideOffset = 0, restoreFocusOnClose, finalFocus, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
 		"data-slot": "context-menu-positioner",
 		className: "isolate z-50 outline-hidden",
@@ -34,7 +34,7 @@ function ContextMenuContent({ className, align = "start", alignOffset = 4, side
 		sideOffset,
 		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 			"data-slot": "context-menu-content",
-			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-hidden", className),
+			className: cn("motion-pop-md bg-elevated/80 not-supports-backdrop-filter:bg-elevated/90 text-contrast ring-contrast/10 z-50 max-h-(--available-height) min-w-48 overflow-x-hidden overflow-y-auto rounded-lg p-1.5 shadow-md ring-1 backdrop-blur-xl backdrop-saturate-150 outline-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
 			...props
 		})
@@ -50,7 +50,7 @@ function ContextMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
 		"data-slot": "context-menu-label",
 		"data-inset": inset,
-		className: cn("text-muted px-1.5 py-1 text-xs font-medium data-inset:pl-7", className),
+		className: cn("text-muted px-3 py-2.5 text-xs font-medium data-inset:ps-9.5", className),
 		...props
 	});
 }
@@ -59,7 +59,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "context-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("focus:bg-primary focus:text-white data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-white data-[variant=destructive]:focus:*:[svg]:text-destructive group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight data-[variant=danger]:text-danger data-[variant=danger]:*:[svg]:text-danger data-[variant=danger]:focus:bg-danger data-[variant=danger]:focus:text-white data-[variant=danger]:focus:**:text-white group/context-menu-item relative flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] px-3 py-2 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
@@ -73,15 +73,15 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
 		"data-slot": "context-menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white data-popup-open:bg-primary data-popup-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight data-popup-open:bg-highlight flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] px-3 py-2 text-sm font-medium outline-hidden select-none data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ms-auto rtl:rotate-180" })]
 	});
 }
-function ContextMenuSubContent({ align = "start", alignOffset = -4, side = "right", sideOffset = 0, className, ...props }) {
+function ContextMenuSubContent({ align = "start", alignOffset = -6, side = "inline-end", sideOffset = 0, className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenuContent, {
 		"data-slot": "context-menu-sub-content",
-		className: cn("w-auto min-w-24 shadow-md", className),
+		className: cn("w-auto min-w-24", className),
 		align,
 		alignOffset,
 		side,
@@ -93,12 +93,12 @@ function ContextMenuCheckboxItem({ className, children, checked, inset, ...props
 	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
 		"data-slot": "context-menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white focus:*:[svg]:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight relative flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] py-2 pe-8 ps-3 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "context-menu-checkbox-item-indicator",
-			className: "absolute right-2 pointer-events-none",
+			className: "absolute end-2 pointer-events-none",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
@@ -113,11 +113,11 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
 		"data-slot": "context-menu-radio-item",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white focus:*:[svg]:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight relative flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] py-2 pe-8 ps-3 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "context-menu-radio-item-indicator",
-			className: "absolute right-2 pointer-events-none",
+			className: "absolute end-2 pointer-events-none",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
@@ -125,14 +125,14 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 function ContextMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
 		"data-slot": "context-menu-separator",
-		className: cn("bg-line -mx-1 my-1 h-px", className),
+		className: cn("bg-contour -mx-1.5 my-1.5 h-px", className),
 		...props
 	});
 }
 function ContextMenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "context-menu-shortcut",
-		className: cn("text-muted group-focus/context-menu-item:text-white ml-auto text-xs tracking-widest", className),
+		className: cn("text-muted ms-auto text-xs tracking-widest", className),
 		...props
 	});
 }

package/dist/dialog.js

@@ -40,13 +40,13 @@ function DialogOverlay({ className, ...props }) {
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
 		"data-slot": "dialog-content",
-		className: cn("motion-scale-lg bg-foundation ring-contrast/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 text-sm ring-1 outline-hidden sm:max-w-sm", className),
+		className: cn("motion-scale-lg bg-foundation ring-contrast/10 fixed top-1/2 start-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-6 rounded-lg p-6 text-sm ring-1 outline-hidden sm:max-w-sm shadow-lg", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
 			"data-slot": "dialog-close",
 			render: /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
-				className: "absolute top-2 right-2",
+				className: "absolute top-3 end-3",
 				size: "icon-sm"
 			}),
 			children: [/* @__PURE__ */ jsx(CloseIcon, {}), /* @__PURE__ */ jsx("span", {
@@ -59,21 +59,21 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 function DialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-header",
-		className: cn("flex flex-col gap-2", className),
+		className: cn("flex flex-col gap-3", className),
 		...props
 	});
 }
 function DialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-footer",
-		className: cn("bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t border-line p-4 sm:flex-row sm:justify-end", className),
+		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
 		...props
 	});
 }
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Title, {
 		"data-slot": "dialog-title",
-		className: cn("text-base leading-none font-medium pr-8", className),
+		className: cn("text-lg font-medium leading-none pe-8", className),
 		...props
 	});
 }

package/dist/drawer.js

@@ -46,7 +46,7 @@ function DrawerViewport({ className, ...props }) {
 function DrawerContent({ className, children, showCloseButton = false, ...props }) {
 	return /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsx(DrawerViewport, { children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
 		"data-slot": "drawer-content",
-		className: cn("group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto border-edge text-sm shadow-lg outline-hidden", "transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
+		className: cn("group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto border-shade text-sm shadow-lg outline-hidden", "transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("div", {

package/dist/encrypted-text.d.ts

@@ -9,7 +9,21 @@ type EncryptedTextProps = React.ComponentProps<"span"> & {
   revealedClassName?: string;
   scrambleOnly?: boolean;
   scrambleOneChar?: boolean;
+  /** Where the reveal begins. Default: "start" */
+  revealDirection?: "start" | "end" | "center" | "random";
+  /** Scramble and reveal again when hovered. Default: false */
+  scrambleOnHover?: boolean;
+  /** Scramble and reveal again after every reveal. Default: false */
+  loop?: boolean;
+  /** Pause between a reveal and the next loop, in ms. Default: 2000 */
+  loopDelayMs?: number;
 };
-declare function EncryptedText({ text, className, revealDelayMs, charset, flipDelayMs, encryptedClassName, revealedClassName, scrambleOnly, scrambleOneChar, ...props }: EncryptedTextProps): React.JSX.Element | null;
+/**
+ * Text that starts scrambled and reveals itself, character by character, once
+ * it scrolls into view. Each character keeps its real width while scrambled
+ * (the stand-in glyph sits over an invisible copy and narrows to fit), so the
+ * text never shifts what's around it. Screen readers get the real text.
+ */
+declare function EncryptedText({ text, className, revealDelayMs, charset, flipDelayMs, encryptedClassName, revealedClassName, scrambleOnly, scrambleOneChar, revealDirection, scrambleOnHover, loop, loopDelayMs, onPointerEnter, ...props }: EncryptedTextProps): React.JSX.Element | null;
 //#endregion
 export { EncryptedText, type EncryptedTextProps };

package/dist/encrypted-text.js

@@ -1,29 +1,95 @@
 "use client";
 import { cn } from "./lib/utils.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useReducedMotion } from "motion/react";
 //#region src/encrypted-text.tsx
 const DEFAULT_CHARSET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-={}[];:,.<>/?";
-function randomChar(charset) {
-	return charset.charAt(Math.floor(Math.random() * charset.length));
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+/** Opacity of a scrambled character far from its turn. */
+const ENCRYPTED_OPACITY = .6;
+/** Characters ahead of the reveal that brighten toward full opacity. */
+const LEAD = 4;
+function isSpace(char) {
+	return /\s/.test(char);
 }
-function scramblePreservingSpaces(original, charset) {
-	if (!original) return "";
-	let result = "";
-	for (let i = 0; i < original.length; i += 1) result += original[i] === " " ? " " : randomChar(charset);
-	return result;
+function randomGlyph(pool) {
+	return pool[Math.floor(Math.random() * pool.length)] ?? "";
 }
-function EncryptedText({ text, className, revealDelayMs = 50, charset = DEFAULT_CHARSET, flipDelayMs = 50, encryptedClassName, revealedClassName, scrambleOnly = false, scrambleOneChar = false, ...props }) {
-	const prefersReducedMotion = useReducedMotion();
+/**
+* A scramble that's the same on the server and in the browser, so the text
+* can start encrypted without a hydration mismatch.
+*/
+function initialFrame(chars, pool) {
+	let rank = 0;
+	return {
+		glyphs: chars.map((char, index) => isSpace(char) ? char : pool[((char.codePointAt(0) ?? 0) + index * 7) % pool.length] ?? char),
+		scales: chars.map(() => 1),
+		ranks: chars.map((char) => isSpace(char) ? -1 : rank++),
+		revealed: 0
+	};
+}
+/** Each character's place in the reveal order for a direction; -1 for spaces. */
+function rankLetters(chars, direction) {
+	const order = chars.flatMap((char, index) => isSpace(char) ? [] : [index]);
+	if (direction === "end") order.reverse();
+	if (direction === "center") {
+		const middle = (chars.length - 1) / 2;
+		order.sort((a, b) => Math.abs(a - middle) - Math.abs(b - middle));
+	}
+	if (direction === "random") for (let i = order.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[order[i], order[j]] = [order[j] ?? 0, order[i] ?? 0];
+	}
+	const ranks = chars.map(() => -1);
+	order.forEach((index, rank) => {
+		ranks[index] = rank;
+	});
+	return ranks;
+}
+const glyphWidths = /* @__PURE__ */ new Map();
+let measurer;
+/** Measures a glyph in a font, caching it once the font has loaded. */
+function measureGlyph(font, glyph) {
+	const key = `${font}|${glyph}`;
+	const cached = glyphWidths.get(key);
+	if (cached !== void 0) return cached;
+	measurer ??= document.createElement("canvas").getContext("2d");
+	if (!measurer) return 0;
+	measurer.font = font;
+	const width = measurer.measureText(glyph).width;
+	if (document.fonts.check(font)) glyphWidths.set(key, width);
+	return width;
+}
+/** How much to narrow a stand-in glyph so it fits the real one's width. */
+function squeeze(font, char, glyph) {
+	const room = measureGlyph(font, char);
+	const need = measureGlyph(font, glyph);
+	return need > room && need > 0 ? Math.max(.05, room / need) : 1;
+}
+function subscribeReducedMotion(onChange) {
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+const getReducedMotion = () => window.matchMedia(REDUCED_MOTION).matches;
+const getServerReducedMotion = () => false;
+/**
+* Text that starts scrambled and reveals itself, character by character, once
+* it scrolls into view. Each character keeps its real width while scrambled
+* (the stand-in glyph sits over an invisible copy and narrows to fit), so the
+* text never shifts what's around it. Screen readers get the real text.
+*/
+function EncryptedText({ text, className, revealDelayMs = 50, charset = DEFAULT_CHARSET, flipDelayMs = 50, encryptedClassName, revealedClassName, scrambleOnly = false, scrambleOneChar = false, revealDirection = "start", scrambleOnHover = false, loop = false, loopDelayMs = 2e3, onPointerEnter, ...props }) {
+	const prefersReducedMotion = React.useSyncExternalStore(subscribeReducedMotion, getReducedMotion, getServerReducedMotion);
 	const ref = React.useRef(null);
+	const restartRef = React.useRef(null);
+	const isRunningRef = React.useRef(false);
 	const [isInView, setIsInView] = React.useState(false);
-	const [revealCount, setRevealCount] = React.useState(0);
-	const [, setFlipTick] = React.useState(0);
-	const animationFrameRef = React.useRef(null);
-	const startTimeRef = React.useRef(0);
-	const lastFlipTimeRef = React.useRef(0);
-	const scrambleCharsRef = React.useRef([]);
+	const chars = React.useMemo(() => Array.from(text), [text]);
+	const pool = React.useMemo(() => Array.from(charset.length > 0 ? charset : DEFAULT_CHARSET), [charset]);
+	const initial = React.useMemo(() => initialFrame(chars, pool), [chars, pool]);
+	const [live, setLive] = React.useState();
+	const frame = live?.chars === chars ? live.frame : initial;
 	React.useEffect(() => {
 		if (prefersReducedMotion) return;
 		const el = ref.current;
@@ -38,79 +104,151 @@ function EncryptedText({ text, className, revealDelayMs = 50, charset = DEFAULT_
 		return () => observer.disconnect();
 	}, [prefersReducedMotion]);
 	React.useEffect(() => {
-		if (prefersReducedMotion) return;
-		if (!isInView) return;
-		const initial = text ? scramblePreservingSpaces(text, charset) : "";
-		scrambleCharsRef.current = initial.split("");
-		startTimeRef.current = performance.now();
-		lastFlipTimeRef.current = startTimeRef.current;
-		setRevealCount(0);
-		let isCancelled = false;
+		const root = ref.current;
+		if (prefersReducedMotion || !isInView || !root) return;
+		const computed = getComputedStyle(root);
+		const font = `${computed.fontStyle} ${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+		const letters = chars.filter((char) => !isSpace(char)).length;
+		let glyphs = [];
+		let scales = [];
+		let ranks = [];
+		let revealed = 0;
+		let start = 0;
+		let lastFlip = 0;
+		let frameId = 0;
+		let timer;
+		const scramble = (index) => {
+			const glyph = randomGlyph(pool);
+			glyphs[index] = glyph;
+			scales[index] = squeeze(font, chars[index] ?? glyph, glyph);
+		};
+		const publish = () => {
+			setLive({
+				chars,
+				frame: {
+					glyphs: [...glyphs],
+					scales: [...scales],
+					ranks,
+					revealed
+				}
+			});
+		};
 		const update = (now) => {
-			if (isCancelled) return;
-			const totalLength = text.length;
-			if (scrambleOnly) {
-				if (now - lastFlipTimeRef.current >= Math.max(0, flipDelayMs)) {
-					if (scrambleOneChar) {
-						const indices = [];
-						for (let i = 0; i < totalLength; i++) if (text[i] !== " ") indices.push(i);
-						if (indices.length > 0) {
-							const idx = indices[Math.floor(Math.random() * indices.length)];
-							scrambleCharsRef.current[idx] = randomChar(charset);
-						}
-					} else for (let index = 0; index < totalLength; index += 1) scrambleCharsRef.current[index] = text[index] === " " ? " " : randomChar(charset);
-					lastFlipTimeRef.current = now;
-					setFlipTick((t) => t + 1 & 65535);
+			let isChanged = false;
+			if (!scrambleOnly) {
+				const next = Math.min(letters, Math.floor((now - start) / Math.max(1, revealDelayMs)));
+				isChanged = next !== revealed;
+				revealed = next;
+				if (revealed >= letters) {
+					publish();
+					isRunningRef.current = false;
+					if (loop) timer = setTimeout(run, Math.max(0, loopDelayMs));
+					return;
 				}
-				animationFrameRef.current = requestAnimationFrame(update);
-				return;
 			}
-			const elapsedMs = now - startTimeRef.current;
-			const currentRevealCount = Math.min(totalLength, Math.floor(elapsedMs / Math.max(1, revealDelayMs)));
-			setRevealCount(currentRevealCount);
-			if (currentRevealCount >= totalLength) return;
-			if (now - lastFlipTimeRef.current >= Math.max(0, flipDelayMs)) {
-				for (let index = currentRevealCount; index < totalLength; index += 1) scrambleCharsRef.current[index] = text[index] === " " ? " " : randomChar(charset);
-				lastFlipTimeRef.current = now;
-				setFlipTick((t) => t + 1 & 65535);
+			if (now - lastFlip >= Math.max(0, flipDelayMs)) {
+				lastFlip = now;
+				isChanged = true;
+				if (scrambleOnly && scrambleOneChar) {
+					const scrambled = chars.flatMap((char, index) => isSpace(char) ? [] : [index]);
+					const index = scrambled[Math.floor(Math.random() * scrambled.length)];
+					if (index !== void 0) scramble(index);
+				} else chars.forEach((char, index) => {
+					if (!isSpace(char) && (ranks[index] ?? 0) >= revealed) scramble(index);
+				});
 			}
-			animationFrameRef.current = requestAnimationFrame(update);
+			if (isChanged) publish();
+			frameId = requestAnimationFrame(update);
+		};
+		const run = () => {
+			cancelAnimationFrame(frameId);
+			clearTimeout(timer);
+			isRunningRef.current = true;
+			ranks = rankLetters(chars, revealDirection);
+			glyphs = [...chars];
+			scales = chars.map(() => 1);
+			chars.forEach((char, index) => {
+				if (!isSpace(char)) scramble(index);
+			});
+			revealed = 0;
+			start = performance.now();
+			lastFlip = start;
+			publish();
+			frameId = requestAnimationFrame(update);
 		};
-		animationFrameRef.current = requestAnimationFrame(update);
+		restartRef.current = run;
+		run();
 		return () => {
-			isCancelled = true;
-			if (animationFrameRef.current !== null) cancelAnimationFrame(animationFrameRef.current);
+			cancelAnimationFrame(frameId);
+			clearTimeout(timer);
+			isRunningRef.current = false;
+			restartRef.current = null;
 		};
 	}, [
 		prefersReducedMotion,
 		isInView,
-		text,
+		chars,
+		pool,
 		revealDelayMs,
-		charset,
 		flipDelayMs,
 		scrambleOnly,
-		scrambleOneChar
+		scrambleOneChar,
+		revealDirection,
+		loop,
+		loopDelayMs
 	]);
+	const handlePointerEnter = (event) => {
+		onPointerEnter?.(event);
+		if (scrambleOnHover && !scrambleOnly && !isRunningRef.current) restartRef.current?.();
+	};
 	if (!text) return null;
+	const words = [];
+	chars.forEach((char, index) => {
+		const word = words.at(-1);
+		if (isSpace(char) || !word || isSpace(chars[index - 1] ?? " ")) words.push({
+			start: index,
+			letters: [char]
+		});
+		else word.letters.push(char);
+	});
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
 		"data-slot": "encrypted-text",
 		className,
+		onPointerEnter: handlePointerEnter,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: text
-		}), text.split("").map((char, index) => {
-			const isRevealed = prefersReducedMotion || !isInView || !scrambleOnly && index < revealCount;
-			const displayChar = isRevealed ? char : char === " " ? " " : scrambleCharsRef.current[index] ?? char;
-			return /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				"data-slot": "encrypted-text-char",
-				"data-revealed": isRevealed || void 0,
-				className: cn(isRevealed ? revealedClassName : encryptedClassName),
-				children: displayChar
-			}, index);
-		})]
+		}), words.map((word) => isSpace(word.letters[0] ?? "") ? /* @__PURE__ */ jsx(React.Fragment, { children: word.letters[0] }, word.start) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "encrypted-text-word",
+			className: "whitespace-nowrap",
+			children: word.letters.map((char, offset) => {
+				const index = word.start + offset;
+				const rank = frame.ranks[index] ?? 0;
+				const isRevealed = prefersReducedMotion || !scrambleOnly && rank < frame.revealed;
+				const distance = rank - frame.revealed;
+				const lift = Math.max(0, 1 - distance / LEAD);
+				const scale = frame.scales[index] ?? 1;
+				return /* @__PURE__ */ jsx("span", {
+					"data-slot": "encrypted-text-char",
+					"data-revealed": isRevealed || void 0,
+					className: cn("motion-color relative inline-block", isRevealed ? revealedClassName : encryptedClassName),
+					style: isRevealed || scrambleOnly ? void 0 : { opacity: ENCRYPTED_OPACITY + .4 * lift },
+					children: isRevealed ? char : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						"data-slot": "encrypted-text-ghost",
+						className: "invisible",
+						children: char
+					}), /* @__PURE__ */ jsx("span", {
+						"data-slot": "encrypted-text-glyph",
+						className: "absolute top-0 left-1/2 -translate-x-1/2",
+						style: scale < 1 ? { scale: `${scale} 1` } : void 0,
+						children: frame.glyphs[index] ?? char
+					})] })
+				}, index);
+			})
+		}, word.start))]
 	});
 }
 //#endregion

package/dist/field.d.ts

@@ -1,19 +1,37 @@
 import * as React from "react";
+import { VariantProps } from "class-variance-authority";
 import { Field as FieldPrimitive } from "@base-ui/react/field";
 //#region src/field.d.ts
-type FieldProps = React.ComponentProps<typeof FieldPrimitive.Root>;
+declare const fieldVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FieldProps = React.ComponentProps<typeof FieldPrimitive.Root> & VariantProps<typeof fieldVariants>;
 type FieldLabelProps = React.ComponentProps<typeof FieldPrimitive.Label>;
+type FieldContentProps = React.ComponentProps<"div">;
 type FieldDescriptionProps = React.ComponentProps<typeof FieldPrimitive.Description>;
 type FieldItemProps = React.ComponentProps<typeof FieldPrimitive.Item>;
 type FieldErrorProps = React.ComponentProps<typeof FieldPrimitive.Error>;
 type FieldValidityProps = React.ComponentProps<typeof FieldPrimitive.Validity>;
 type FieldControlProps = React.ComponentProps<typeof FieldPrimitive.Control>;
-declare function Field({ className, ...props }: FieldProps): React.JSX.Element;
+/**
+ * A labelled control with its messages. Below the control, `FieldError`
+ * comes first and `FieldDescription` under it, so the hint stays visible
+ * while the error is showing. An invalid field doesn't tint its text: the
+ * control's danger ring and the error carry the state, and the label
+ * stays neutral.
+ */
+declare function Field({ className, orientation, ...props }: FieldProps): React.JSX.Element;
 declare function FieldLabel({ className, ...props }: FieldLabelProps): React.JSX.Element;
 declare function FieldControl({ className, ...props }: FieldControlProps): React.JSX.Element;
+/**
+ * A label and its description stacked together, beside a control. The label
+ * row is as tall as the default checkbox, radio and switch (24px), so its
+ * text centers on the control.
+ */
+declare function FieldContent({ className, ...props }: FieldContentProps): React.JSX.Element;
 declare function FieldDescription({ className, ...props }: FieldDescriptionProps): React.JSX.Element;
 declare function FieldItem({ className, ...props }: FieldItemProps): React.JSX.Element;
 declare function FieldError({ className, ...props }: FieldErrorProps): React.JSX.Element;
 declare const FieldValidity: React.FC<import("@base-ui/react").FieldValidityProps>;
 //#endregion
-export { Field, FieldControl, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, FieldPrimitive, type FieldProps, FieldValidity, type FieldValidityProps };
+export { Field, FieldContent, type FieldContentProps, FieldControl, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, FieldPrimitive, type FieldProps, FieldValidity, type FieldValidityProps, fieldVariants };