@nebutra/ui 0.2.2 → 2.0.0

package/dist/primitives/canonical.js

@@ -1,6 +1,6 @@
 "use client";
 import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
-import { ChevronUpDown, Check, ChevronRight, ChevronDown, MagnifyingGlass, Plus, Cross, MoreHorizontal, Status, Copy, Hash, Code, Link, Information, Warning, External, LoaderCircle, EyeOff, Eye, Minus, LockClosed, CheckCircle, MoreVertical, DeviceDesktop, Sun, Moon, FolderOpen, FolderClosed, File, ChevronLeft, ChevronUp, FileText } from '@nebutra/icons';
+import { ChevronUpDown, Check, ChevronRight, ChevronDown, MagnifyingGlass, Plus, Cross, MoreHorizontal, Status, Copy, Information, Warning, External, LoaderCircle, EyeOff, Eye, Minus, LockClosed, CheckCircle, MoreVertical, DeviceDesktop, Sun, Moon, Hash, Code, Link, FolderOpen, FolderClosed, File, ChevronLeft, ChevronUp, FileText } from '@nebutra/icons';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -8,9 +8,9 @@ import { cva } from 'class-variance-authority';
 import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
 import * as React24 from 'react';
 import React24__default, { createContext, useId, useRef, useState, useMemo, use, useCallback, useEffect, Children, isValidElement, cloneElement } from 'react';
-import { colors, flow, emerge } from '@nebutra/brand';
+import { colors, brandSpring, flow, emerge } from '@nebutra/brand';
 export { brandSpring } from '@nebutra/brand';
-import { useReducedMotion, motion, AnimatePresence, LazyMotion, domAnimation, m } from 'framer-motion';
+import { useReducedMotion, LazyMotion, domAnimation, AnimatePresence, motion, m } from 'framer-motion';
 import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { Prism } from 'react-syntax-highlighter';
 import { nightOwl } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -41,6 +41,10 @@ function cn(...inputs) {
 }
 
 // src/utils/primitive-props.ts
+function asPlainStyle(style) {
+  if (style == null || typeof style === "function") return {};
+  return style;
+}
 function withHtmlProps(Component) {
   return Component;
 }
@@ -73,7 +77,7 @@ var AccordionTrigger = ({
   {
     ref,
     className: cn(
-      "font-medium flex flex-1 items-center justify-between transition-[color,box-shadow] duration-flow ease-out hover:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none [&[data-panel-open]>svg]:rotate-45",
+      "font-medium flex flex-1 items-center justify-between transition-[color,box-shadow] duration-flow ease-out hover:text-muted-foreground focus-visible:outline-none [&[data-panel-open]>svg]:rotate-45",
       size === "small" ? "py-2.5 text-sm" : "py-4 text-[15px]",
       className
     ),
@@ -305,7 +309,7 @@ function Alert({
             className: cn(
               "group shrink-0 size-4 inline-flex items-center justify-center rounded-[var(--radius-sm)]",
               "opacity-70 hover:opacity-100 transition-opacity",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              "focus-visible:outline-none"
             ),
             children: /* @__PURE__ */ jsx(Cross, { className: "size-4" })
           }
@@ -454,7 +458,7 @@ var primitiveTransition = {
     // hero entrance, big delight moments
   },
   easing: {
-    default: "ease-out",
+    default: "var(--ease-brand)",
     inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
   }
 };
@@ -472,7 +476,7 @@ var shadowClasses = {
   "2xl": "shadow-2xl"};
 
 // src/tokens/components/overlay.ts
-var overlayFocusRingClassName = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+var overlayFocusRingClassName = "outline-none";
 var overlayZIndex = {
   backdrop: 1040,
   modal: 1050,
@@ -488,72 +492,73 @@ var overlayTokens = {
   }};
 var overlayClassNames = {
   focusRing: overlayFocusRingClassName,
-  backdrop: "fixed inset-0 bg-black/40 backdrop-blur-sm transition-[opacity,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none",
+  backdrop: "fixed inset-0 bg-black/40 backdrop-blur-sm transition-[opacity,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none",
   modalSurface: [
     "fixed left-1/2 top-1/2 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4",
     "border border-border/60 bg-background/95 p-6 text-foreground backdrop-blur-xl",
     "rounded-[var(--radius-xl)]",
     shadowClasses["2xl"],
     "outline-none",
-    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
+    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
     "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
     "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
   ].join(" "),
   menuSurface: [
-    "min-w-32 overflow-hidden rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-1 text-popover-foreground backdrop-blur-md",
+    "min-w-32 origin-[var(--transform-origin)] overflow-hidden rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-1 text-popover-foreground backdrop-blur-md",
     shadowClasses.xl,
-    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.97] data-[ending-style]:opacity-0",
     "motion-reduce:transition-none motion-reduce:data-[starting-style]:transform-none motion-reduce:data-[ending-style]:transform-none"
   ].join(" "),
   selectSurface: [
-    "max-h-[var(--select-content-max-height)] min-w-[var(--select-content-min-width)] overflow-hidden",
+    "max-h-[var(--select-content-max-height)] min-w-[var(--select-content-min-width)] origin-[var(--transform-origin)] overflow-hidden",
     "rounded-[var(--select-content-radius)] border border-border/70 bg-popover/95 text-popover-foreground backdrop-blur-md",
     "shadow-[var(--select-content-shadow)] outline-none",
-    "transition-[opacity,transform,display] duration-[var(--select-duration)] ease-[var(--select-easing)]",
-    "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
+    "transition-[opacity,transform,display] duration-[var(--select-duration)] ease-[var(--ease-brand)]",
+    "data-starting-style:scale-[0.97] data-starting-style:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0",
     "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
   ].join(" "),
   navigationMenuSurface: [
-    "min-w-32 overflow-hidden rounded-[var(--radius-xl)] border border-border/70 bg-popover/95 text-popover-foreground backdrop-blur-md",
+    "min-w-32 origin-[var(--transform-origin)] overflow-hidden rounded-[var(--radius-xl)] border border-border/70 bg-popover/95 text-popover-foreground backdrop-blur-md",
     shadowClasses.xl,
-    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.97] data-[ending-style]:opacity-0",
     "motion-reduce:transition-none motion-reduce:data-[starting-style]:transform-none motion-reduce:data-[ending-style]:transform-none"
   ].join(" "),
   popoverSurface: [
-    "w-72 rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-4 text-popover-foreground backdrop-blur-md",
+    "w-72 origin-[var(--transform-origin)] rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-4 text-popover-foreground backdrop-blur-md",
     shadowClasses.xl,
-    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-[open]:opacity-100 data-[closed]:opacity-0 data-[closed]:scale-95 data-[open]:scale-100",
+    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-[open]:opacity-100 data-[closed]:opacity-0 data-[closed]:scale-[0.97] data-[open]:scale-100",
     "motion-reduce:transition-none motion-reduce:data-[closed]:transform-none motion-reduce:data-[open]:transform-none"
   ].join(" "),
   tooltipSurface: [
-    "overflow-hidden rounded-[var(--radius-md)] border border-border/70 bg-popover/95 px-3 py-1.5 text-sm text-popover-foreground backdrop-blur-md",
+    "origin-[var(--transform-origin)] overflow-hidden rounded-[var(--radius-md)] border border-border/70 bg-popover/95 px-3 py-1.5 text-sm text-popover-foreground backdrop-blur-md",
     shadowClasses.md,
-    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
+    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-starting-style:scale-[0.97] data-starting-style:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0",
+    "data-[instant]:duration-0",
     "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
   ].join(" "),
   sheetBackdrop: [
     "fixed inset-0 bg-[var(--sheet-overlay-background)] backdrop-blur-[var(--sheet-overlay-blur)]",
-    "transition-[opacity,backdrop-filter,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
+    "transition-[opacity,backdrop-filter,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
     "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
   ].join(" "),
   sheetSurface: [
     "fixed flex flex-col overflow-hidden border border-border bg-[var(--sheet-background)] text-foreground shadow-[var(--sheet-shadow)]",
-    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
+    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
     "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
   ].join(" "),
-  closeButton: `absolute right-4 top-4 rounded-[var(--radius-sm)] opacity-70 ring-offset-background ${overlayFocusRingClassName} transition-opacity duration-[var(--motion-duration-micro)] ease-[var(--ease-out)] hover:opacity-100 disabled:pointer-events-none data-[open]:bg-accent data-[open]:text-muted-foreground motion-reduce:transition-none`
+  closeButton: `absolute right-4 top-4 rounded-[var(--radius-sm)] opacity-70 ring-offset-background ${overlayFocusRingClassName} transition-opacity duration-[var(--motion-duration-micro)] ease-[var(--ease-brand)] hover:opacity-100 disabled:pointer-events-none data-[open]:bg-accent data-[open]:text-muted-foreground motion-reduce:transition-none`
 };
 var buttonVariants = cva(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
     "rounded-[var(--btn-default-radius,var(--radius-md))]",
     "text-[length:var(--control-font-size-md,0.875rem)] font-[number:var(--font-weight-medium,500)]",
-    "transition-colors duration-micro ease-out",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "transition-[color,background-color,border-color,transform] duration-flow ease-[var(--ease-brand)]",
+    "active:scale-[0.97] motion-reduce:active:scale-100 motion-reduce:transition-none",
     "disabled:pointer-events-none disabled:opacity-50",
     "aria-busy:cursor-wait"
   ].join(" "),
@@ -580,8 +585,30 @@ var buttonVariants = cva(
       },
       shape: {
         default: "",
-        square: "",
-        circle: ""
+        // Radius from --btn-default-radius / --radius-md — brand-switchable.
+        // Do not hardcode rounded-md here; a language must be able to retarget
+        // the corner treatment of every icon trigger at once.
+        square: "rounded-[var(--btn-default-radius,var(--radius-md))]",
+        // Pill radius token, not Tailwind rounded-full — same 9999px default,
+        // but a brand that ships a softer "circle" can override --radius-pill.
+        circle: "rounded-[var(--radius-pill,9999px)]",
+        pill: "rounded-[var(--radius-pill,9999px)]"
+      },
+      // Icon-only box size — orthogonal to `size` (which tunes text-button
+      // height/padding/font together) and to `shape` (which picks the
+      // corner treatment). Only takes effect combined with shape="square"
+      // or shape="circle" (see compoundVariants below); every other
+      // combination ignores it. 28/32/36 cover the icon-trigger sizes that
+      // actually occur in the app — 24/40/48 are already reachable via
+      // shape + size (tiny/default/lg). Heights read --control-height-icon-*
+      // so density-aware Brand Packages can scale them with the ladder.
+      iconSize: {
+        sm: "",
+        // 28px default
+        md: "",
+        // 32px default
+        lg: ""
+        // 36px default
       }
     },
     compoundVariants: [
@@ -592,22 +619,56 @@ var buttonVariants = cva(
       {
         shape: "circle",
         size: "tiny",
-        className: "w-[var(--control-height-tiny,1.5rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-tiny,1.5rem)] px-0"
       },
       {
         shape: "circle",
         size: "sm",
-        className: "w-[var(--control-height-sm,2rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-sm,2rem)] px-0"
       },
       {
         shape: "circle",
         size: "default",
-        className: "w-[var(--control-height-md,2.5rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-md,2.5rem)] px-0"
       },
       {
         shape: "circle",
         size: "lg",
-        className: "w-[var(--control-height-lg,3rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-lg,3rem)] px-0"
+      },
+      // iconSize wins over the size-driven box above — matched on shape +
+      // iconSize only, so it applies regardless of whatever `size` was
+      // passed (or left at its "default" fallback). Corner treatment stays
+      // on the shape variant (token-backed); only the box is set here.
+      {
+        shape: "square",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
       }
     ],
     defaultVariants: {
@@ -763,13 +824,13 @@ var motionDurations = {
   cinematic: 500
 };
 var easings = {
-  easeOut: [0, 0, 0.2, 1],
+  easeOut: [0.16, 1, 0.3, 1],
   easeInOut: [0.4, 0, 0.2, 1]};
 var motionVariants = {
   fadeInUp: {
-    initial: { opacity: 0, y: 20 },
-    animate: { opacity: 1, y: 0 },
-    exit: { opacity: 0, y: 10 }
+    initial: { opacity: 0, transform: "translateY(20px)" },
+    animate: { opacity: 1, transform: "translateY(0px)" },
+    exit: { opacity: 0, transform: "translateY(10px)" }
   },
   scaleIn: {
     initial: { opacity: 0, scale: 0.95 },
@@ -779,15 +840,15 @@ var motionVariants = {
 var staggerContainers = {
   fast: {
     initial: {},
-    animate: { transition: { staggerChildren: 0.05, delayChildren: 0.1 } }
+    animate: { transition: { staggerChildren: 0.04, delayChildren: 0 } }
   },
   normal: {
     initial: {},
-    animate: { transition: { staggerChildren: 0.1, delayChildren: 0.2 } }
+    animate: { transition: { staggerChildren: 0.06, delayChildren: 0.04 } }
   },
   slow: {
     initial: {},
-    animate: { transition: { staggerChildren: 0.15, delayChildren: 0.3 } }
+    animate: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } }
   }
 };
 var viewportSettings = {
@@ -818,15 +879,63 @@ var PRESETS = {
   /** Fade + rise */
   fadeUp: motionVariants.fadeInUp,
   /** Scale in */
-  scale: motionVariants.scaleIn
+  scale: motionVariants.scaleIn,
+  /**
+   * Keyed content swap — short, symmetric, blur-softened. Rises in, sinks out.
+   * Shorter and shallower than `emerge` on purpose: a swap replaces content the
+   * reader is already looking at, so it must resolve inside the reveal rail.
+   * Pair with `AnimateSwap`.
+   */
+  swap: {
+    initial: { opacity: 0, transform: "translateY(10px)", filter: "blur(4px)" },
+    animate: { opacity: 1, transform: "translateY(0px)", filter: "blur(0px)" },
+    exit: { opacity: 0, transform: "translateY(-10px)", filter: "blur(4px)" },
+    transition: { duration: motionDurations.reveal / 1e3 }
+  },
+  /** Off-canvas panel entering from the right edge (drawer, sheet). */
+  slideFromRight: {
+    initial: { transform: "translateX(100%)" },
+    animate: { transform: "translateX(0%)" },
+    exit: { transform: "translateX(100%)" },
+    transition: brandSpring.default
+  },
+  /** Off-canvas panel entering from the left edge. */
+  slideFromLeft: {
+    initial: { transform: "translateX(-100%)" },
+    animate: { transform: "translateX(0%)" },
+    exit: { transform: "translateX(-100%)" },
+    transition: brandSpring.default
+  },
+  /** Off-canvas panel entering from the top edge (banner, command bar). */
+  slideFromTop: {
+    initial: { transform: "translateY(-100%)" },
+    animate: { transform: "translateY(0%)" },
+    exit: { transform: "translateY(-100%)" },
+    transition: brandSpring.default
+  },
+  /** Off-canvas panel entering from the bottom edge (mobile action sheet). */
+  slideFromBottom: {
+    initial: { transform: "translateY(100%)" },
+    animate: { transform: "translateY(0%)" },
+    exit: { transform: "translateY(100%)" },
+    transition: brandSpring.default
+  }
 };
 function MotionDiv(props) {
   return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(m.div, { ...props }) });
 }
 function AnimateIn(props) {
-  const { children, preset = "emerge", delay = 0, duration, inView = false, className } = props;
+  const {
+    children,
+    preset = "fade",
+    delay = 0,
+    duration,
+    inView = false,
+    className,
+    ...rest
+  } = props;
   const shouldReduce = useReducedMotion();
-  const base = PRESETS[preset] || PRESETS.emerge;
+  const base = PRESETS[preset] || PRESETS.fade;
   const initial = shouldReduce ? { opacity: 0 } : base.initial;
   const animate2 = shouldReduce ? { opacity: 1 } : base.animate;
   const exit = shouldReduce ? { opacity: 0 } : "exit" in base ? base.exit : void 0;
@@ -839,6 +948,7 @@ function AnimateIn(props) {
     return /* @__PURE__ */ jsx(
       MotionDiv,
       {
+        ...rest,
         className,
         initial,
         whileInView: animate2,
@@ -852,6 +962,7 @@ function AnimateIn(props) {
   return /* @__PURE__ */ jsx(
     MotionDiv,
     {
+      ...rest,
       className,
       initial,
       animate: animate2,
@@ -861,6 +972,10 @@ function AnimateIn(props) {
     }
   );
 }
+function AnimateSwap(props) {
+  const { swapKey, ...animateInProps } = props;
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(AnimateIn, { ...animateInProps }, swapKey) }) });
+}
 function AnimateInGroup(props) {
   const { children, stagger = "normal", inView = false, className } = props;
   const shouldReduce = useReducedMotion();
@@ -963,9 +1078,18 @@ function getAvatarFallbackClass(size) {
 }
 function getAvatarStyle(size, style) {
   if (typeof size !== "number") return style;
-  return {
+  const numericVars = {
     "--avatar-size": `${size}px`,
-    "--avatar-font-size": `${Math.max(10, Math.round(size * 0.375))}px`,
+    "--avatar-font-size": `${Math.max(10, Math.round(size * 0.375))}px`
+  };
+  if (typeof style === "function") {
+    return (state) => ({
+      ...numericVars,
+      ...style(state)
+    });
+  }
+  return {
+    ...numericVars,
     ...style
   };
 }
@@ -1134,7 +1258,7 @@ function AvatarGroup({
   ] });
 }
 var badgeVariants = cva(
-  "inline-flex justify-center items-center align-middle shrink-0 rounded-full font-sans font-medium whitespace-nowrap tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border border-transparent",
+  "inline-flex justify-center items-center align-middle shrink-0 rounded-full font-sans font-medium whitespace-nowrap tabular-nums transition-colors focus-visible:outline-none border border-transparent",
   {
     variants: {
       variant: {
@@ -1156,15 +1280,26 @@ var badgeVariants = cva(
         purple: "bg-secondary text-secondary-foreground fill-current",
         "purple-subtle": "bg-secondary/40 text-secondary-foreground fill-current border-transparent",
         amber: "bg-warning text-warning-foreground fill-current",
-        "amber-subtle": "bg-warning/15 text-warning fill-current border-transparent",
+        "amber-subtle": (
+          // --warning is a FILL (2.13:1). As ink on its own tint it measured 1.91:1.
+          // --warning-strong is the AA-safe amber foreground: 5.01:1 light / 6.20:1 dark.
+          "bg-warning/10 text-[hsl(var(--warning-strong))] fill-current border-transparent"
+        ),
         red: "bg-destructive text-destructive-foreground fill-current",
-        "red-subtle": "bg-destructive/15 text-destructive fill-current border-transparent",
+        "red-subtle": (
+          // --destructive is fill-only in dark (2.01:1 as ink on its own tint).
+          // --destructive-strong: 4.58:1 light / 4.97:1 dark.
+          "bg-destructive/10 text-[hsl(var(--destructive-strong))] fill-current border-transparent"
+        ),
         pink: "bg-accent text-accent-foreground fill-current",
         "pink-subtle": "bg-accent/40 text-accent-foreground fill-current border-transparent",
         green: "bg-success text-success-foreground fill-current",
-        "green-subtle": "bg-success/15 text-success fill-current border-transparent",
+        "green-subtle": (
+          // --success-strong closes the 4.49:1 light gap: 4.99:1 light / 4.83:1 dark.
+          "bg-success/10 text-[hsl(var(--success-strong))] fill-current border-transparent"
+        ),
         teal: "bg-info text-info-foreground fill-current",
-        "teal-subtle": "bg-info/15 text-info fill-current border-transparent",
+        "teal-subtle": "bg-info/10 text-info fill-current border-transparent",
         inverted: "bg-foreground text-background fill-current",
         // Special visual treatments (intentional product design, not brand hex)
         trial: "bg-gradient-to-br from-trial-start to-trial-end text-primary-foreground fill-current",
@@ -1381,7 +1516,10 @@ function Spinner({ className }) {
     }
   );
 }
-function getIconSizeClass(size) {
+function getIconSizeClass(size, iconSize2) {
+  if (iconSize2 === "sm") return "[&>svg]:size-3.5";
+  if (iconSize2 === "md") return "[&>svg]:size-3.5";
+  if (iconSize2 === "lg") return "[&>svg]:size-4";
   switch (size) {
     case "tiny":
       return "[&>svg]:size-3";
@@ -1396,7 +1534,10 @@ function getIconSizeClass(size) {
       return "[&>svg]:size-4";
   }
 }
-function getSpinnerSizeClass(size) {
+function getSpinnerSizeClass(size, iconSize2) {
+  if (iconSize2 === "sm") return "size-3.5";
+  if (iconSize2 === "md") return "size-3.5";
+  if (iconSize2 === "lg") return "size-4";
   switch (size) {
     case "tiny":
       return "size-3";
@@ -1421,10 +1562,10 @@ function resolveShadowClass(shadow) {
   const level = shadow === true ? "md" : shadow;
   return SHADOW_CLASSES[level];
 }
-function ButtonContent({ loading, prefix, suffix, size, children }) {
-  const iconSizeClass = getIconSizeClass(size);
+function ButtonContent({ loading, prefix, suffix, size, iconSize: iconSize2, children }) {
+  const iconSizeClass = getIconSizeClass(size, iconSize2);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size) }),
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize2) }),
     prefix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: prefix }),
     children,
     suffix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: suffix })
@@ -1435,6 +1576,7 @@ var Button = ({
   variant,
   size,
   shape,
+  iconSize: iconSize2,
   asChild = false,
   loading = false,
   disabled,
@@ -1452,11 +1594,21 @@ var Button = ({
     Comp,
     {
       ref,
-      className: cn(buttonVariants({ variant, size, shape }), shadowClass, className),
+      className: cn(buttonVariants({ variant, size, shape, iconSize: iconSize2 }), shadowClass, className),
       disabled: isDisabled,
       "aria-busy": loading || void 0,
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
+      children: asChild ? children : /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          prefix,
+          suffix,
+          size,
+          iconSize: iconSize2,
+          children
+        }
+      )
     }
   );
 };
@@ -1466,6 +1618,7 @@ var ButtonLink = ({
   variant,
   size,
   shape,
+  iconSize: iconSize2,
   prefix,
   suffix,
   shadow,
@@ -1485,14 +1638,24 @@ var ButtonLink = ({
     {
       ref,
       className: cn(
-        buttonVariants({ variant, size, shape }),
+        buttonVariants({ variant, size, shape, iconSize: iconSize2 }),
         shadowClass,
         loading && "pointer-events-none opacity-50",
         className
       ),
       ...loadingProps,
       ...props,
-      children: /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
+      children: /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          prefix,
+          suffix,
+          size,
+          iconSize: iconSize2,
+          children
+        }
+      )
     }
   );
 };
@@ -1559,8 +1722,68 @@ var CardFooter = ({
   ...props
 }) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props });
 CardFooter.displayName = "CardFooter";
+var DEFAULT_STROKE_WIDTH = 1.6;
+function CheckGlyph({
+  size = 16,
+  width,
+  height,
+  strokeWidth = DEFAULT_STROKE_WIDTH,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "shrink-0",
+      viewBox: "0 0 16 16",
+      width: width ?? size,
+      height: height ?? size,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M11.2 5.6L6.8 10L4.8 8",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth
+        }
+      )
+    }
+  );
+}
+function IndeterminateGlyph({
+  size = 16,
+  width,
+  height,
+  strokeWidth = DEFAULT_STROKE_WIDTH,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "shrink-0",
+      viewBox: "0 0 16 16",
+      width: width ?? size,
+      height: height ?? size,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "4",
+          x2: "12",
+          y1: "8",
+          y2: "8",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth
+        }
+      )
+    }
+  );
+}
 var getInputClasses = (checked, disabled, indeterminate) => {
-  let className = "relative border w-4 h-4 duration-200 rounded inline-flex items-center justify-center";
+  let className = "relative border w-4 h-4 duration-micro rounded inline-flex items-center justify-center";
   if (disabled) {
     if (!checked || indeterminate) {
       className += " bg-geist-gray-100 border-geist-gray-500";
@@ -1623,26 +1846,7 @@ var Checkbox = ({
             className: "sr-only"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: getInputClasses(checked, disabled, indeterminate), children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "shrink-0", height: "16", viewBox: "0 0 20 20", width: "16", children: indeterminate ? /* @__PURE__ */ jsx(
-          "line",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            strokeWidth: "2",
-            x1: "5",
-            x2: "15",
-            y1: "10",
-            y2: "10"
-          }
-        ) : /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M14 7L8.5 12.5L6 10",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            strokeWidth: "2"
-          }
-        ) }) }),
+        /* @__PURE__ */ jsx("span", { className: getInputClasses(checked, disabled, indeterminate), children: indeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, {}) : /* @__PURE__ */ jsx(CheckGlyph, {}) }),
         children && /* @__PURE__ */ jsx("span", { className: "ml-2", children })
       ]
     }
@@ -1878,6 +2082,11 @@ var overlayPrimitiveClassNames = {
     "data-[highlighted]:bg-accent data-[popup-open]:bg-accent"
   ].join(" "),
   menuCheckboxItem: [menuItemBaseClassName, menuHighlightedClassName, "pl-8"].join(" "),
+  menuFilterInput: [
+    "h-7 w-full rounded-[var(--radius-sm)] bg-muted px-2 text-sm text-foreground",
+    "placeholder:text-muted-foreground outline-none"
+  ].join(" "),
+  menuEmpty: "px-2 py-3 text-center text-sm text-muted-foreground",
   menuIndicator: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center text-muted-foreground",
   menubarRoot: "flex h-10 items-center space-x-1 rounded-[var(--radius-md)] border border-border bg-background p-1 outline-none",
   menubarTrigger: [
@@ -1989,7 +2198,7 @@ var DropdownMenuSubContent = ({
   style,
   ref,
   ...props
-}) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { style: { zIndex: overlayZIndex.popover }, children: /* @__PURE__ */ jsx(
   Menu$1.Popup,
   {
     ref,
@@ -2019,6 +2228,7 @@ var DropdownMenuContent = ({
     align,
     alignOffset,
     side,
+    style: { zIndex: overlayZIndex.popover },
     children: /* @__PURE__ */ jsx(
       Menu$1.Popup,
       {
@@ -2087,6 +2297,40 @@ var DropdownMenuRadioItem = ({
   }
 );
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+var MENU_RESERVED_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "Enter", "Tab"]);
+var DropdownMenuFilterInput = ({
+  className,
+  onKeyDown,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    ref,
+    type: "search",
+    className: cn(overlayPrimitiveClassNames.menuFilterInput, className),
+    onKeyDown: (event) => {
+      onKeyDown?.(event);
+      if (!MENU_RESERVED_KEYS.has(event.key)) {
+        event.stopPropagation();
+      }
+    },
+    ...props
+  }
+);
+DropdownMenuFilterInput.displayName = "DropdownMenuFilterInput";
+var DropdownMenuEmpty = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    role: "presentation",
+    className: cn(overlayPrimitiveClassNames.menuEmpty, className),
+    ...props
+  }
+);
+DropdownMenuEmpty.displayName = "DropdownMenuEmpty";
 var DropdownMenuLabel = ({
   className,
   inset,
@@ -3242,11 +3486,14 @@ var comboboxSizeTokens = {
 var comboboxTriggerVariants = cva(
   [
     "flex w-full items-center justify-between gap-2 whitespace-nowrap",
-    "h-[var(--combobox-trigger-height)] rounded-[var(--radius-md)] border border-input bg-background px-[var(--combobox-trigger-padding-x)]",
+    // --input-radius, not the generic md step: this trigger is a form control and
+    // should round like Input and Select do. Reading the scale step meant it
+    // tracked whatever a language did to medium surfaces instead of what it
+    // decided for its fields.
+    "h-[var(--combobox-trigger-height)] rounded-[var(--input-radius,var(--radius-md))] border border-input bg-background px-[var(--combobox-trigger-padding-x)]",
     "text-[length:var(--combobox-font-size)] ring-offset-background",
     "transition-colors duration-micro ease-out",
     "placeholder:text-muted-foreground",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
     "disabled:cursor-not-allowed disabled:opacity-50",
     "[&>span]:line-clamp-1 [&>span]:text-left"
   ].join(" "),
@@ -3258,7 +3505,7 @@ var comboboxTriggerVariants = cva(
         large: ""
       },
       error: {
-        true: "border-destructive focus-visible:ring-destructive",
+        true: "border-destructive",
         false: ""
       }
     },
@@ -3763,19 +4010,54 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
   SubContent: ContextMenuSubContent
 });
 var DEFAULT_TOOLTIP_DELAY_MS = 150;
+var SKIP_DELAY_WINDOW_MS = 400;
+var lastTooltipOpenAt = 0;
+var skipDelayListeners = /* @__PURE__ */ new Set();
+function markTooltipOpened() {
+  lastTooltipOpenAt = Date.now();
+  for (const listener of skipDelayListeners) listener();
+}
+function shouldSkipDelay() {
+  return Date.now() - lastTooltipOpenAt < SKIP_DELAY_WINDOW_MS;
+}
+function useSkipDelay() {
+  const [, tick] = React24.useReducer((count) => count + 1, 0);
+  React24.useEffect(() => {
+    skipDelayListeners.add(tick);
+    return () => {
+      skipDelayListeners.delete(tick);
+    };
+  }, []);
+  return shouldSkipDelay();
+}
+var TooltipInstantContext = React24.createContext(false);
 var TooltipProvider = ({
   children,
   delayDuration = DEFAULT_TOOLTIP_DELAY_MS
 }) => {
-  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: delayDuration, children });
+  const skipDelay = useSkipDelay();
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: skipDelay ? 0 : delayDuration, children });
 };
 var Tooltip = ({
   delayDuration,
   children,
+  onOpenChange,
   ...props
 }) => {
-  const delay = delayDuration ?? DEFAULT_TOOLTIP_DELAY_MS;
-  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props, children }) });
+  const skipDelay = useSkipDelay();
+  const instant = delayDuration == null && skipDelay;
+  const delay = delayDuration ?? (instant ? 0 : DEFAULT_TOOLTIP_DELAY_MS);
+  return /* @__PURE__ */ jsx(TooltipInstantContext.Provider, { value: instant, children: /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsx(
+    Tooltip$1.Root,
+    {
+      ...props,
+      onOpenChange: (open, eventDetails) => {
+        if (open) markTooltipOpened();
+        onOpenChange?.(open, eventDetails);
+      },
+      children
+    }
+  ) }) });
 };
 var TooltipTrigger = ({
   asChild,
@@ -3805,40 +4087,51 @@ var TooltipContent = ({
   alignOffset = 0,
   ref,
   ...props
-}) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
-  Tooltip$1.Positioner,
-  {
-    side,
-    align,
-    sideOffset,
-    alignOffset,
-    style: { zIndex: overlayZIndex.tooltip },
-    children: /* @__PURE__ */ jsx(
-      Tooltip$1.Popup,
-      {
-        ref,
-        className: cn(overlayClassNames.tooltipSurface, className),
-        style: { zIndex: overlayZIndex.tooltip, ...style },
-        ...props
-      }
-    )
-  }
-) });
+}) => {
+  const instant = React24.use(TooltipInstantContext);
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+    Tooltip$1.Positioner,
+    {
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      style: { zIndex: overlayZIndex.tooltip },
+      children: /* @__PURE__ */ jsx(
+        Tooltip$1.Popup,
+        {
+          ref,
+          className: cn(overlayClassNames.tooltipSurface, className),
+          "data-instant": instant || void 0,
+          style: { zIndex: overlayZIndex.tooltip, ...style },
+          ...props
+        }
+      )
+    }
+  ) });
+};
 TooltipContent.displayName = "TooltipContent";
+var COPIED_TINT = "text-[hsl(var(--success-strong))]";
+function CopiedAnnouncement({ copied, message }) {
+  return /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? message : "" });
+}
 function CopyButton({
   value,
   label,
+  copiedLabel = "Copied",
   successMessage = "Copied to clipboard",
   tooltipText = "Copy",
   iconType = "copy",
+  iconPosition = "leading",
   showToast = true,
+  timeout = 2e3,
   onCopied,
   variant = "ghost",
   size = "icon",
   className,
   ...props
 }) {
-  const [copied, setCopied] = React24.useState(false);
+  const { copied, copy } = useCopyToClipboard({ successMessage, showToast, timeout });
   const IconComponent = {
     copy: Copy,
     link: Link,
@@ -3846,38 +4139,30 @@ function CopyButton({
     hash: Hash
   }[iconType];
   const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(value);
-      setCopied(true);
-      if (showToast) {
-        toast.success(successMessage);
-      }
-      onCopied?.(value);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch (error) {
-      console.error("Failed to copy:", error);
-      toast.error("Failed to copy to clipboard");
-    }
+    if (await copy(value)) onCopied?.(value);
   };
+  const icon = copied ? /* @__PURE__ */ jsx(Check, { className: COPIED_TINT }) : /* @__PURE__ */ jsx(IconComponent, {});
+  const iconSlot = iconPosition === "trailing" ? { suffix: icon } : { prefix: icon };
   const button = /* @__PURE__ */ jsxs(
     Button,
     {
       variant,
       size,
       onClick: handleCopy,
-      className: cn("transition-colors", copied && "text-green-600 dark:text-green-400", className),
+      className: cn("transition-colors", className),
+      ...iconSlot,
       ...props,
       children: [
-        copied ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsx(IconComponent, { className: "size-4" }),
-        label && /* @__PURE__ */ jsx("span", { className: "ml-1.5", children: label }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: tooltipText })
+        label && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: copied && copiedLabel ? copiedLabel : label }),
+        !label && /* @__PURE__ */ jsx("span", { className: "sr-only", children: tooltipText }),
+        /* @__PURE__ */ jsx(CopiedAnnouncement, { copied, message: successMessage })
       ]
     }
   );
   if (!label) {
     return /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: copied ? "Copied!" : tooltipText }) })
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: copied ? "Copied" : tooltipText }) })
     ] });
   }
   return button;
@@ -3933,6 +4218,36 @@ function CopyCodeButton({
     }
   );
 }
+function CopyMenuItem({
+  value,
+  children,
+  successMessage = "Copied to clipboard",
+  showToast = false,
+  timeout = 2e3,
+  closeOnCopy = false,
+  onCopied,
+  className,
+  ...props
+}) {
+  const { copied, copy } = useCopyToClipboard({ successMessage, showToast, timeout });
+  const handleCopy = async () => {
+    if (await copy(value)) onCopied?.(value);
+  };
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuItem,
+    {
+      closeOnClick: closeOnCopy,
+      onClick: handleCopy,
+      className: cn("cursor-pointer", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: cn("size-4", COPIED_TINT) }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true", className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(CopiedAnnouncement, { copied, message: successMessage })
+      ]
+    }
+  );
+}
 function CopyableField({ value, label, truncate = true, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
     label && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground shrink-0", children: [
@@ -4142,7 +4457,7 @@ var ContextCardTrigger = ({
               "transition-[opacity,transform,display] duration-[var(--context-card-duration)] ease-[var(--context-card-easing)]",
               "data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-ending-style:scale-[0.98]",
               "motion-reduce:transition-none motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100",
-              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              "",
               "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom",
               className
             ),
@@ -5146,11 +5461,11 @@ var formControlInvalidClassNames = {
 };
 var inputVariants = cva(
   [
-    "flex h-[var(--input-height)] w-full rounded-[var(--input-radius)] border border-input bg-background",
-    "px-[var(--input-padding-x)] text-[length:var(--input-font-size)] text-foreground shadow-xs",
+    "flex h-[var(--input-height)] w-full rounded-[var(--input-radius)]",
+    "px-[var(--input-padding-x)] text-[length:var(--input-font-size)] text-foreground",
     "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out",
     "placeholder:text-muted-foreground",
-    formControlFocusClassNames.input,
+    "outline-none",
     "disabled:cursor-not-allowed disabled:opacity-50",
     "read-only:bg-muted/70 read-only:cursor-default",
     "file:h-full file:border-0 file:border-e file:border-solid file:border-input file:bg-transparent",
@@ -5173,11 +5488,31 @@ var inputVariants = cva(
         prefix: "pl-[var(--input-padding-left)]",
         suffix: "pr-[var(--input-padding-right)]",
         both: "pl-[var(--input-padding-left)] pr-[var(--input-padding-right)]"
+      },
+      /**
+       * `bare` drops the field's own stroke, fill and lift so it can sit inside
+       * a container that already provides them — a footer subscribe group, a
+       * search well, a segmented composer. Those surfaces were each being built
+       * by hand with a raw <input>, because overriding the bordered look from
+       * outside is not reliable: `border-transparent` passed via className and
+       * `border-input` from the base are both border-color utilities, so which
+       * one wins depends on their order in the generated stylesheet rather than
+       * on the order they were written. That is why the stroke, fill and shadow
+       * live in this variant instead of the base — the two tones now never emit
+       * a competing declaration.
+       *
+       * A bare field draws no focus ring of its own. The container owns it, so
+       * the ring surrounds the whole group rather than a box inside it.
+       */
+      tone: {
+        bordered: `border border-input bg-background shadow-xs ${formControlFocusClassNames.input}`,
+        bare: "border-0 bg-transparent shadow-none"
       }
     },
     defaultVariants: {
       size: "md",
-      affix: "none"
+      affix: "none",
+      tone: "bordered"
     }
   }
 );
@@ -5199,8 +5534,8 @@ var inputControlButtonVariants = cva(
   [
     "absolute right-[var(--input-control-inset)] top-1/2 flex size-[var(--input-control-size)] -translate-y-1/2 items-center justify-center",
     "rounded-[var(--radius-sm)] text-muted-foreground transition-colors duration-micro ease-out",
-    "hover:bg-accent hover:text-foreground",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+    "hover:bg-accent hover:text-accent-foreground",
+    "focus-visible:outline-none",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:size-[var(--input-control-icon-size)]"
   ].join(" ")
@@ -5239,7 +5574,7 @@ function getInputStyle(size, style) {
     "--input-focus-ring-width": `${inputTokens.focusRingWidth}px`,
     borderRadius: "var(--input-radius)",
     outline: "none",
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getAffixMode(prefix, hasRightAdornment) {
@@ -5265,6 +5600,7 @@ var Input = ({
     className,
     type = "text",
     size = "md",
+    tone = "bordered",
     prefix,
     suffix,
     clearable,
@@ -5384,7 +5720,7 @@ var Input = ({
       "aria-describedby": describedBy,
       "aria-busy": loading || void 0,
       className: cn(
-        inputVariants({ size, affix }),
+        inputVariants({ size, affix, tone }),
         type === "file" && "p-0 pr-[var(--input-padding-x)] text-muted-foreground",
         className
       ),
@@ -6577,7 +6913,7 @@ var MultiSelectTrigger = ({
         "gap-[var(--multi-select-trigger-gap)] rounded-[var(--multi-select-trigger-radius)] border border-input bg-background",
         "px-[var(--multi-select-trigger-padding-x)] text-left text-[length:var(--multi-select-trigger-font-size)] text-foreground shadow-xs",
         "transition-[background-color,border-color,box-shadow,color] duration-[var(--multi-select-duration)] ease-[var(--multi-select-easing)]",
-        "hover:bg-accent/60 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "hover:bg-accent/60 focus-visible:border-ring focus-visible:outline-none",
         "disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
@@ -6768,7 +7104,7 @@ var MultiSelectRow = ({
                 "peer size-[var(--multi-select-checkbox-size)] appearance-none rounded-[var(--radius-sm)] border border-input bg-background",
                 "transition-[background-color,border-color,box-shadow] duration-[var(--multi-select-duration)] ease-[var(--multi-select-easing)]",
                 "hover:border-ring checked:border-primary checked:bg-primary",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                "focus-visible:outline-none"
               )
             }
           ),
@@ -6798,7 +7134,7 @@ var MultiSelectRow = ({
             className: cn(
               "min-w-[var(--multi-select-action-min-width)] shrink-0 rounded-[var(--radius-sm)] px-2 py-1 text-right text-[length:var(--multi-select-row-description-size)] font-medium text-muted-foreground",
               "opacity-0 transition-[background-color,color,opacity] duration-[var(--multi-select-duration)] ease-[var(--multi-select-easing)]",
-              "hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:opacity-100 focus-visible:outline-none",
               "group-hover:opacity-100 group-focus-within:opacity-100"
             ),
             children: action.label
@@ -7848,7 +8184,7 @@ function PaginationRail({
         "group flex min-h-[var(--pagination-min-height)] min-w-0 items-center gap-[var(--pagination-gap)] rounded-[var(--pagination-radius)] border border-border bg-background",
         "px-[var(--pagination-padding-x)] py-[var(--pagination-padding-y)] text-foreground shadow-xs",
         "transition-[background-color,border-color,box-shadow,color,transform] duration-[var(--pagination-duration)] ease-[var(--pagination-easing)]",
-        "hover:border-ring hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "hover:border-ring hover:bg-accent focus-visible:outline-none",
         "motion-reduce:transition-none",
         isPrevious ? "justify-start text-left" : "justify-end text-right"
       ),
@@ -8081,7 +8417,7 @@ var variantMap = {
     cta: "text-foreground decoration-border hover:text-foreground hover:decoration-foreground"
   }
 };
-var ctaBase = "font-medium underline underline-offset-[5px] transition-colors duration-100";
+var ctaBase = "font-medium underline underline-offset-[5px] transition-colors duration-micro";
 function ProjectBanner({
   variant = "info",
   label,
@@ -8139,9 +8475,9 @@ var radioControlClassName = cn(
   "relative inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)] border-[length:var(--radio-border-width)] border-border bg-background text-foreground",
   "size-[var(--radio-control-size)]",
   "transition-[background-color,border-color,box-shadow] duration-[var(--radio-motion-duration)] ease-[var(--radio-motion-easing)]",
-  "after:size-[var(--radio-dot-size)] after:scale-0 after:rounded-[var(--radius-full)] after:bg-current after:opacity-0 after:transition-[opacity,transform] after:duration-[var(--radio-motion-duration)] after:ease-[var(--radio-motion-easing)] after:content-['']",
+  "after:size-[var(--radio-dot-size)] after:scale-95 after:rounded-[var(--radius-full)] after:bg-current after:opacity-0 after:transition-[opacity,transform] after:duration-[var(--radio-motion-duration)] after:ease-[var(--radio-motion-easing)] after:content-['']",
   "peer-checked:border-[var(--neutral-12)] peer-checked:after:scale-100 peer-checked:after:opacity-100",
-  "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2",
+  "peer-focus-visible:outline-none",
   "peer-disabled:border-[var(--neutral-5)] peer-disabled:bg-muted peer-disabled:text-[var(--neutral-8)]"
 );
 function useRadioGroupContext() {
@@ -8360,7 +8696,7 @@ var ResizableHandle = ({
   Separator,
   {
     className: cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
       className
     ),
     ...props,
@@ -8505,7 +8841,7 @@ function ScrollerButton({
         "absolute z-20 grid size-[var(--scroller-button-size)] place-items-center rounded-[var(--scroller-button-radius)]",
         "border border-border bg-background text-muted-foreground shadow-[var(--scroller-button-shadow)]",
         "transition-[background-color,border-color,color,opacity,transform] duration-[var(--scroller-duration)] ease-[var(--scroller-easing)]",
-        "hover:border-ring hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "hover:border-ring hover:text-foreground focus-visible:outline-none",
         "disabled:pointer-events-none disabled:opacity-0 motion-reduce:transition-none",
         axis === "x" && direction === "previous" && "left-[var(--scroller-button-offset)] top-1/2 -translate-y-1/2",
         axis === "x" && direction === "next" && "right-[var(--scroller-button-offset)] top-1/2 -translate-y-1/2",
@@ -8600,7 +8936,7 @@ function Scroller({
             onScroll: updateEdgeState,
             className: cn(
               "h-[var(--scroller-height)] rounded-[var(--scroller-radius)] outline-none",
-              "scroll-smooth overscroll-contain focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:scroll-auto",
+              "scroll-smooth overscroll-contain motion-reduce:scroll-auto",
               resolveScrollClasses(overflow)
             ),
             children: /* @__PURE__ */ jsx(
@@ -8651,7 +8987,7 @@ function getSelectTriggerStyle(size, style) {
     "--select-focus-ring-width": `${selectTokens.focusRingWidth}px`,
     borderRadius: "var(--select-radius)",
     outline: "none",
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getNativeSelectStyle(size, style) {
@@ -8670,7 +9006,7 @@ function getNativeSelectStyle(size, style) {
     "--select-message-gap": `${selectTokens.messageGap}px`,
     "--select-duration": `${selectTokens.motion.duration}ms`,
     "--select-easing": selectTokens.motion.easing,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getSelectContentStyle(style) {
@@ -8690,7 +9026,7 @@ function getSelectContentStyle(style) {
     "--select-item-indicator-size": `${selectTokens.item.indicatorSize}px`,
     "--select-item-indicator-icon-size": `${selectTokens.item.indicatorIconSize}px`,
     zIndex: overlayZIndex.popover,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function textOf(node) {
@@ -9126,7 +9462,7 @@ function getSheetStyle(style) {
     "--sheet-shadow": sheetTokens.surface.shadow,
     "--sheet-duration": `${overlayTokens.motion.duration}ms`,
     "--sheet-easing": overlayTokens.motion.easing,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function Sheet({ modal = "trap-focus", disablePointerDismissal = true, ...props }) {
@@ -9428,7 +9764,7 @@ var ShowMore = ({
               "h-[var(--show-more-trigger-height)] rounded-[var(--show-more-radius)] px-[var(--show-more-trigger-padding-x)]",
               "transition-[background-color,border-color,color] duration-[var(--show-more-duration)] ease-[var(--show-more-easing)]",
               "hover:border-border hover:bg-muted",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              "focus-visible:outline-none",
               "disabled:pointer-events-none disabled:opacity-50",
               "motion-reduce:transition-none",
               buttonClassName
@@ -9581,7 +9917,7 @@ function getSliderStyle(progress, style) {
     "--slider-duration": `${sliderTokens.motion.duration}ms`,
     "--slider-easing": sliderTokens.motion.easing,
     "--slider-progress": `${progress}%`,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function formatSliderValue(value, unit) {
@@ -9697,7 +10033,7 @@ var Slider = ({
             onBlur,
             className: cn(
               "h-[var(--slider-height)] w-full cursor-pointer appearance-none rounded-[var(--slider-radius)] bg-[linear-gradient(to_right,var(--slider-track-fill)_0,var(--slider-track-fill)_var(--slider-progress),var(--slider-track-background)_var(--slider-progress),var(--slider-track-background)_100%)] bg-[length:100%_var(--slider-track-height)] bg-center bg-no-repeat outline-none",
-              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+              "disabled:cursor-not-allowed disabled:opacity-50",
               "[&::-moz-range-thumb]:size-[var(--slider-thumb-size)] [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-border [&::-moz-range-thumb]:bg-[var(--slider-thumb-background)] [&::-moz-range-thumb]:shadow-[var(--slider-thumb-shadow)]",
               "[&::-webkit-slider-thumb]:size-[var(--slider-thumb-size)] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-border [&::-webkit-slider-thumb]:bg-[var(--slider-thumb-background)] [&::-webkit-slider-thumb]:shadow-[var(--slider-thumb-shadow)]",
               "[&::-moz-range-thumb]:transition-transform [&::-moz-range-thumb]:duration-[var(--slider-duration)] [&::-moz-range-thumb]:ease-[var(--slider-easing)]",
@@ -9730,7 +10066,7 @@ function getSpinnerStyle(size, style) {
     "--spinner-bar-radius": `${spinnerTokens.barRadius}px`,
     "--spinner-duration": `${spinnerTokens.motion.duration}ms`,
     "--spinner-easing": spinnerTokens.motion.easing,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getBarOpacity(index) {
@@ -10109,7 +10445,7 @@ function getSwitchStyle(size, style) {
     "--switch-control-radius": `${switchTokens.controlRadius}px`,
     "--switch-duration": `${switchTokens.motion.duration}ms`,
     "--switch-easing": switchTokens.motion.easing,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getSwitchControlStyle(size, style) {
@@ -10120,7 +10456,7 @@ function getSwitchControlStyle(size, style) {
     "--switch-control-padding-x": `${sizeTokens.paddingX}px`,
     "--switch-icon-size": `${sizeTokens.iconSize}px`,
     "--switch-font-size": `${sizeTokens.fontSize}px`,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 var SwitchRoot = function SwitchRoot2({
@@ -10230,7 +10566,7 @@ var SwitchControl = function SwitchControl2({
               "inline-flex h-full w-full items-center justify-center gap-1.5 whitespace-nowrap rounded-[var(--switch-control-radius)] px-[var(--switch-control-padding-x)] font-medium text-[length:var(--switch-font-size)]",
               "text-muted-foreground transition-[background-color,box-shadow,color] duration-[var(--switch-duration)] ease-[var(--switch-easing)]",
               "peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-sm",
-              "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
+              "",
               "peer-disabled:pointer-events-none peer-disabled:text-muted-foreground/60",
               "[&_svg]:size-[var(--switch-icon-size)]"
             ),
@@ -10249,7 +10585,12 @@ SwitchControl.displayName = "Switch.Control";
 var Switch = Object.assign(SwitchRoot, {
   Control: SwitchControl
 });
-function createTableVars(style) {
+var ALIGNMENT_CLASS = {
+  start: "text-left",
+  center: "text-center",
+  end: "text-right"
+};
+function createTableVars(style, bare) {
   return {
     "--table-min-width": `${tableTokens.wrapper.minWidth}px`,
     "--table-padding": `${tableTokens.wrapper.padding}px`,
@@ -10261,7 +10602,7 @@ function createTableVars(style) {
     "--table-font-size": `${tableTokens.typography.size}px`,
     "--table-heading-weight": tableTokens.typography.headingWeight,
     "--table-body-weight": tableTokens.typography.bodyWeight,
-    "--table-body-spacer": `${tableTokens.spacer.bodyTop}px`,
+    "--table-body-spacer": bare ? "0px" : `${tableTokens.spacer.bodyTop}px`,
     "--table-motion-duration": `${tableTokens.motion.duration}ms`,
     "--table-motion-easing": tableTokens.motion.easing,
     ...style
@@ -10272,16 +10613,18 @@ var TableRoot = ({
   wrapperClassName,
   wrapperStyle,
   style,
+  bare = false,
   ref,
   ...props
 }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
-      "relative w-full min-w-[var(--table-min-width)] overflow-auto rounded-[var(--table-radius)] border border-border bg-card p-[var(--table-padding)]",
+      "relative w-full overflow-auto",
+      !bare && "min-w-[var(--table-min-width)] rounded-[var(--table-radius)] border border-border bg-card p-[var(--table-padding)]",
       wrapperClassName
     ),
-    style: createTableVars(wrapperStyle),
+    style: createTableVars(wrapperStyle, bare),
     children: /* @__PURE__ */ jsx(
       "table",
       {
@@ -10367,6 +10710,7 @@ TableRow.displayName = "TableRow";
 var TableHead = ({
   className,
   numeric = false,
+  alignment,
   scope = "col",
   ref,
   ...props
@@ -10377,8 +10721,10 @@ var TableHead = ({
     scope,
     className: cn(
       "h-[var(--table-header-height)] px-[var(--table-cell-padding-x)] text-left align-middle font-[var(--table-heading-weight)] text-muted-foreground",
-      "last:text-right [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-px",
+      "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-px",
+      !alignment && "last:text-right",
       numeric && "text-right font-mono tabular-nums",
+      alignment && ALIGNMENT_CLASS[alignment],
       className
     ),
     ...props
@@ -10388,6 +10734,7 @@ TableHead.displayName = "TableHead";
 var TableCell = ({
   className,
   numeric = false,
+  alignment,
   ref,
   ...props
 }) => /* @__PURE__ */ jsx(
@@ -10396,8 +10743,10 @@ var TableCell = ({
     ref,
     className: cn(
       "px-[var(--table-cell-padding-x)] py-[var(--table-cell-padding-y)] align-middle",
-      "last:text-right [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-px",
+      "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-px",
+      !alignment && "last:text-right",
       numeric && "text-right font-mono tabular-nums",
+      alignment && ALIGNMENT_CLASS[alignment],
       className
     ),
     ...props
@@ -10464,7 +10813,7 @@ var tabsListVariants = cva(
   }
 );
 var tabsTriggerVariants = cva(
-  "relative inline-flex h-[calc(var(--tabs-height)-var(--tabs-padding)*2)] min-w-[var(--tabs-trigger-min-width)] shrink-0 cursor-pointer items-center justify-center gap-[var(--tabs-trigger-gap)] whitespace-nowrap rounded-[var(--tabs-trigger-radius)] px-[var(--tabs-trigger-padding-x)] font-medium text-[length:var(--tabs-font-size)] outline-none transition-[background-color,border-color,box-shadow,color,opacity] duration-[var(--tabs-duration)] ease-[var(--tabs-easing)] focus-visible:ring-[length:var(--tabs-focus-ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--tabs-focus-ring-offset)] focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:size-[var(--tabs-icon-size)] [&_svg]:shrink-0",
+  "relative inline-flex h-[calc(var(--tabs-height)-var(--tabs-padding)*2)] min-w-[var(--tabs-trigger-min-width)] shrink-0 cursor-pointer items-center justify-center gap-[var(--tabs-trigger-gap)] whitespace-nowrap rounded-[var(--tabs-trigger-radius)] px-[var(--tabs-trigger-padding-x)] font-medium text-[length:var(--tabs-font-size)] outline-none transition-[background-color,border-color,box-shadow,color,opacity] duration-[var(--tabs-duration)] ease-[var(--tabs-easing)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:size-[var(--tabs-icon-size)] [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -10501,7 +10850,7 @@ var tabsIndicatorVariants = cva(
   }
 );
 var tabsContentVariants = cva(
-  "mt-[var(--tabs-panel-gap)] text-[length:var(--tabs-font-size)] text-muted-foreground focus-visible:outline-none focus-visible:ring-[length:var(--tabs-focus-ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--tabs-focus-ring-offset)] focus-visible:ring-offset-background",
+  "mt-[var(--tabs-panel-gap)] text-[length:var(--tabs-font-size)] text-muted-foreground focus-visible:outline-none",
   {
     variants: {
       variant: {
@@ -10543,7 +10892,7 @@ function getTabsStyle(size, style) {
     "--tabs-badge-font-size": `${tabsTokens.badgeFontSize}px`,
     "--tabs-duration": `${tabsTokens.motion.duration}ms`,
     "--tabs-easing": tabsTokens.motion.easing,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getFirstEnabledValue(tabs) {
@@ -10739,7 +11088,7 @@ function getTextareaStyle(size, style) {
     "--textarea-focus-ring-width": `${textareaTokens.focusRingWidth}px`,
     borderRadius: "var(--textarea-radius)",
     outline: "none",
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getTextareaFieldStyle() {
@@ -10852,7 +11201,7 @@ function getThemeSwitcherStyle(size, style) {
     "--theme-switcher-focus-ring-offset": `${themeSwitcherTokens.focusRingOffset}px`,
     "--theme-switcher-duration": `${themeSwitcherTokens.motion.duration}ms`,
     "--theme-switcher-easing": themeSwitcherTokens.motion.easing,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function isThemeSwitcherValue(value) {
@@ -10951,7 +11300,7 @@ function getThemeToggleStyle(size, style) {
     "--theme-toggle-radius": `${token.radius}px`,
     "--theme-toggle-duration": `${themeToggleTokens.motion.duration}ms`,
     "--theme-toggle-easing": themeToggleTokens.motion.easing,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function readDocumentTheme() {
@@ -11076,7 +11425,6 @@ var ThemeToggle = ({
         "inline-flex size-[var(--theme-toggle-size)] shrink-0 items-center justify-center rounded-[var(--theme-toggle-radius)] p-[var(--theme-toggle-padding)] text-foreground",
         "transition-[background-color,color,box-shadow] duration-[var(--theme-toggle-duration)] ease-[var(--theme-toggle-easing)]",
         "hover:bg-accent hover:text-accent-foreground",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:pointer-events-none disabled:opacity-50",
         "motion-reduce:transition-none",
         className
@@ -11351,7 +11699,7 @@ function getToggleStyle(size, color, style) {
     "--toggle-thumb": colorTokens.thumb,
     "--toggle-icon-on": colorTokens.iconOn,
     "--toggle-icon-off": colorTokens.iconOff,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 var Toggle = ({
@@ -11425,7 +11773,7 @@ var Toggle = ({
           "border-[var(--toggle-track-border)] transition-[background-color,border-color] duration-[var(--toggle-duration)] ease-[var(--toggle-easing)]",
           "peer-checked:bg-[var(--toggle-track-on)]",
           "peer-checked:[&>span]:translate-x-[var(--toggle-thumb-translate)] peer-checked:[&>span]:text-[var(--toggle-icon-on)]",
-          "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
+          "",
           "peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
           "motion-reduce:transition-none"
         ),
@@ -11478,7 +11826,10 @@ var toggleGroupVariants = cva(
     variants: {
       variant: {
         default: "",
-        outline: "bg-transparent border"
+        outline: "bg-transparent border",
+        // Segmented pill look — theme-toggle / mode-pills style. Rounded-full
+        // track with a rounded-full active segment (see toggleGroupItemVariants).
+        pill: "rounded-full bg-neutral-2 p-0.5"
       }
     },
     defaultVariants: {
@@ -11487,12 +11838,13 @@ var toggleGroupVariants = cva(
   }
 );
 var toggleGroupItemVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--radius-md)] px-3 py-1.5 text-sm font-medium ring-offset-background transition-[background-color,box-shadow,color,opacity] duration-flow ease-out motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm",
+  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-[var(--radius-md)] px-3 py-1.5 text-sm font-medium ring-offset-background transition-[background-color,box-shadow,color,opacity] duration-flow ease-out motion-reduce:transition-none disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm",
   {
     variants: {
       variant: {
         default: "",
-        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+        pill: "rounded-full text-neutral-11 hover:text-neutral-12 data-[state=on]:bg-primary/5 data-[state=on]:text-primary data-[state=on]:shadow-none"
       },
       size: {
         default: "h-9 px-3",
@@ -11550,7 +11902,17 @@ var ToggleGroup = ({
     }
     onValueChange?.(newValue);
   }
-  return /* @__PURE__ */ jsx("div", { ref, className: cn(toggleGroupVariants({ variant }), className), ...props, children: /* @__PURE__ */ jsx(ToggleGroupTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx(ToggleGroupValueContext.Provider, { value, children: /* @__PURE__ */ jsx(ToggleGroupChangeContext.Provider, { value: changeToggleGroupValue, children: /* @__PURE__ */ jsx(ToggleGroupDisabledContext.Provider, { value: disabled, children: /* @__PURE__ */ jsx(ToggleGroupVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(ToggleGroupSizeContext.Provider, { value: size, children }) }) }) }) }) }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: type === "single" ? "radiogroup" : "group",
+      "data-toggle-group-root": "",
+      className: cn(toggleGroupVariants({ variant }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx(ToggleGroupValueContext.Provider, { value, children: /* @__PURE__ */ jsx(ToggleGroupChangeContext.Provider, { value: changeToggleGroupValue, children: /* @__PURE__ */ jsx(ToggleGroupDisabledContext.Provider, { value: disabled, children: /* @__PURE__ */ jsx(ToggleGroupVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(ToggleGroupSizeContext.Provider, { value: size, children }) }) }) }) }) })
+    }
+  );
 };
 ToggleGroup.displayName = "ToggleGroup";
 var ToggleGroupItem = ({
@@ -11568,7 +11930,8 @@ var ToggleGroupItem = ({
   function toggleItemSelection(event) {
     if (isDisabled) return;
     if (context.type === "single") {
-      context.onValueChange(isSelected ? "" : value);
+      if (isSelected) return;
+      context.onValueChange(value);
     } else {
       const currentArray = Array.isArray(context.value) ? context.value : [];
       context.onValueChange(
@@ -11577,26 +11940,75 @@ var ToggleGroupItem = ({
     }
     props.onClick?.(event);
   }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type: "button",
-      disabled: isDisabled,
-      "data-state": isSelected ? "on" : "off",
-      "aria-pressed": isSelected,
-      className: cn(
-        toggleGroupItemVariants({
-          variant: variant ?? context.variant,
-          size: size ?? context.size
-        }),
-        className,
-        "focus-visible:z-10"
-      ),
-      onClick: toggleItemSelection,
-      ...props,
-      children
-    }
+  function handleItemKeyDown(event) {
+    props.onKeyDown?.(event);
+    if (context.type !== "single" || event.defaultPrevented) return;
+    const container = event.currentTarget.closest("[data-toggle-group-root]");
+    if (!container) return;
+    const items = Array.from(
+      container.querySelectorAll("[data-toggle-item]:not(:disabled)")
+    );
+    const currentIndex = items.indexOf(event.currentTarget);
+    if (currentIndex === -1 || items.length === 0) return;
+    const focusAndSelect = (targetIndex) => {
+      const wrapped = (targetIndex % items.length + items.length) % items.length;
+      const target = items[wrapped];
+      if (!target) return;
+      target.focus();
+      const targetValue = target.dataset.toggleValue;
+      if (targetValue !== void 0) context.onValueChange(targetValue);
+    };
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        focusAndSelect(currentIndex + 1);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        focusAndSelect(currentIndex - 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        focusAndSelect(0);
+        break;
+      case "End":
+        event.preventDefault();
+        focusAndSelect(items.length - 1);
+        break;
+    }
+  }
+  const rovingTabIndex = context.type === "single" ? isSelected || context.value === "" ? 0 : -1 : void 0;
+  return (
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: see comment above.
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled: isDisabled,
+        "data-state": isSelected ? "on" : "off",
+        "data-toggle-item": "",
+        "data-toggle-value": value,
+        role: context.type === "single" ? "radio" : void 0,
+        "aria-checked": context.type === "single" ? isSelected : void 0,
+        "aria-pressed": context.type === "multiple" ? isSelected : void 0,
+        tabIndex: rovingTabIndex,
+        className: cn(
+          toggleGroupItemVariants({
+            variant: variant ?? context.variant,
+            size: size ?? context.size
+          }),
+          className,
+          "focus-visible:z-10"
+        ),
+        onClick: toggleItemSelection,
+        ...props,
+        onKeyDown: handleItemKeyDown,
+        children
+      }
+    )
   );
 };
 ToggleGroupItem.displayName = "ToggleGroupItem";
@@ -11898,6 +12310,6 @@ var TreeIcon = ({ icon, hasChildren = false, className, ...props }) => {
 };
 var TreeLabel = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("font flex-1 truncate text-sm", className), ...props });
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertContent, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertIcon, AlertTitle, AlertToolbar, AnimateIn, AnimateInGroup, AnimatedThemeToggler, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonLink, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeBlock, Collapse, CollapseGroup, Combobox, ComboboxEmpty, ComboboxGroupSub, ComboboxInput, ComboboxList, ComboboxOptionItem, ComboboxRoot, ComboboxSeparator, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandResults, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyCodeButton, CopyIdButton, CopyLinkButton, CopyableField, Description, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateIcon, EmptyStateRoot, ErrorSurface as Error, ErrorMessage, Field, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gauge, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, LoadingDots, Menu, MenuButton, MenuContainer, MenuItem, MenuItemLocked, MenuLink, MenuSection, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectContent, MultiSelectRoot, MultiSelectRow, MultiSelectTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Note, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverPositioner, PopoverTrigger, Progress, ProjectBanner, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Scroller, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShowMore, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonText, Slider, Spinner2 as Spinner, SplitButton, SplitButtonMenuItem, Stack, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableCol, TableColgroup, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitcher, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, alertVariants, badgeVariants, buttonVariants, containerWidths, flexLayouts, gridLayouts, labelVariants, navigationMenuTriggerStyle, progressIndicatorVariants, progressVariants, tabsContentVariants, tabsListVariants, tabsTriggerVariants, toggleGroupItemVariants, toggleGroupVariants, useCopyToClipboard, useFormField, useToasts, zIndex };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertContent, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertIcon, AlertTitle, AlertToolbar, AnimateIn, AnimateInGroup, AnimateSwap, AnimatedThemeToggler, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonLink, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeBlock, Collapse, CollapseGroup, Combobox, ComboboxEmpty, ComboboxGroupSub, ComboboxInput, ComboboxList, ComboboxOptionItem, ComboboxRoot, ComboboxSeparator, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandResults, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyCodeButton, CopyIdButton, CopyLinkButton, CopyMenuItem, CopyableField, Description, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuEmpty, DropdownMenuFilterInput, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateIcon, EmptyStateRoot, ErrorSurface as Error, ErrorMessage, Field, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gauge, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, LoadingDots, Menu, MenuButton, MenuContainer, MenuItem, MenuItemLocked, MenuLink, MenuSection, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectContent, MultiSelectRoot, MultiSelectRow, MultiSelectTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Note, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverPositioner, PopoverTrigger, Progress, ProjectBanner, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Scroller, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShowMore, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonText, Slider, Spinner2 as Spinner, SplitButton, SplitButtonMenuItem, Stack, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableCol, TableColgroup, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitcher, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, alertVariants, badgeVariants, buttonVariants, containerWidths, flexLayouts, gridLayouts, labelVariants, navigationMenuTriggerStyle, progressIndicatorVariants, progressVariants, tabsContentVariants, tabsListVariants, tabsTriggerVariants, toggleGroupItemVariants, toggleGroupVariants, useCopyToClipboard, useFormField, useToasts, zIndex };
 //# sourceMappingURL=canonical.js.map
 //# sourceMappingURL=canonical.js.map