@lessly/ui 2.1.0 → 2.3.0

package/dist/index.js

@@ -19,7 +19,7 @@ import {
   cn,
   useIsMobile,
   useSidebar
-} from "./chunk-F5RMHSPS.js";
+} from "./chunk-CEXND5YW.js";
 
 // src/components/auto-height.tsx
 import * as React from "react";
@@ -170,7 +170,7 @@ var DialogContent = React3.forwardRef(({ className, children, showClose = true,
       ...props,
       children: [
         children,
-        showClose && /* @__PURE__ */ jsxs2(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm text-text-tertiary opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-border-focus disabled:pointer-events-none", children: [
+        showClose && /* @__PURE__ */ jsxs2(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm text-text-tertiary opacity-70 transition-opacity duration-fast hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-border-focus disabled:pointer-events-none", children: [
           /* @__PURE__ */ jsx3(X, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
         ] })
@@ -291,7 +291,7 @@ var DropdownMenuItem = React4.forwardRef(({ className, inset, variant = "default
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-bg-secondary focus:text-text-primary focus:ring-1 focus:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast focus:bg-bg-secondary focus:text-text-primary focus:ring-1 focus:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       // Destructive reddens — wash and label — under the pointer or the keyboard, and drops the red
       // frame a destructive Button rests on, because a row repeated down a menu makes the whole menu
@@ -308,7 +308,7 @@ var DropdownMenuCheckboxItem = React4.forwardRef(({ className, children, checked
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-bg-secondary focus:text-text-primary focus:ring-1 focus:ring-inset focus:ring-border-selected data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors duration-fast focus:bg-bg-secondary focus:text-text-primary focus:ring-1 focus:ring-inset focus:ring-border-selected data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     checked,
@@ -325,7 +325,7 @@ var DropdownMenuRadioItem = React4.forwardRef(({ className, children, ...props }
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-bg-secondary focus:text-text-primary focus:ring-1 focus:ring-inset focus:ring-border-selected data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors duration-fast focus:bg-bg-secondary focus:text-text-primary focus:ring-1 focus:ring-inset focus:ring-border-selected data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -349,7 +349,7 @@ var DropdownMenuSeparator = React4.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-border-default", className),
+    className: cn("-mx-1 my-1 h-px bg-border-subtle", className),
     ...props
   }
 ));
@@ -479,7 +479,7 @@ import { cva as cva2 } from "class-variance-authority";
 import { Check as Check2 } from "lucide-react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var optionCardVariants = cva2(
-  "flex w-full items-center gap-3 rounded-lg border border-border-default p-3 text-left transition-colors hover:bg-bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+  "flex w-full items-center gap-3 rounded-lg border border-border-default p-3 text-left transition-colors duration-fast hover:bg-bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
   {
     variants: {
       selected: {
@@ -724,18 +724,18 @@ function Switch({
       "data-testid": testId,
       disabled,
       onClick: () => onCheckedChange(!checked),
-      className: `relative inline-flex h-6 w-10 shrink-0 cursor-pointer rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${checked ? "bg-text-brand" : "bg-bg-surface"} ${disabled ? "cursor-not-allowed opacity-50" : ""} ${className}`,
+      className: `relative inline-flex h-6 w-10 shrink-0 cursor-pointer rounded-full transition-colors duration-fast outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${checked ? "bg-text-brand" : "bg-bg-surface"} ${disabled ? "cursor-not-allowed opacity-50" : ""} ${className}`,
       children: [
         /* @__PURE__ */ jsx14(
           "span",
           {
-            className: `pointer-events-none absolute inset-0 rounded-full border border-border-strong transition-opacity ${checked ? "opacity-0" : "opacity-100"}`
+            className: `pointer-events-none absolute inset-0 rounded-full border border-border-strong transition-opacity duration-fast ${checked ? "opacity-0" : "opacity-100"}`
           }
         ),
         /* @__PURE__ */ jsx14(
           "span",
           {
-            className: `pointer-events-none absolute inset-y-0 left-0 flex w-6 items-center justify-center transition-opacity ${checked ? "opacity-100" : "opacity-0"}`,
+            className: `pointer-events-none absolute inset-y-0 left-0 flex w-6 items-center justify-center transition-opacity duration-fast ${checked ? "opacity-100" : "opacity-0"}`,
             children: /* @__PURE__ */ jsx14(Check3, { className: "size-3 text-white" })
           }
         ),
@@ -743,7 +743,7 @@ function Switch({
           "span",
           {
             "aria-hidden": "true",
-            className: `pointer-events-none absolute top-1/2 left-0 h-4 w-4 -translate-y-1/2 rounded-full transition-transform ${checked ? "translate-x-5 bg-white" : "translate-x-1 bg-border-strong"}`
+            className: `pointer-events-none absolute top-1/2 left-0 h-4 w-4 -translate-y-1/2 rounded-full transition-transform duration-fast ${checked ? "translate-x-5 bg-white" : "translate-x-1 bg-border-strong"}`
           }
         )
       ]
@@ -832,7 +832,7 @@ var Slider = React14.forwardRef(({ className, ...props }, ref) => {
         Array.from({ length: thumbCount }).map((_, i) => /* @__PURE__ */ jsx18(
           SliderPrimitive.Thumb,
           {
-            className: "block size-5 rounded-full border border-border-brand bg-bg-elevated shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+            className: "block size-5 rounded-full border border-border-brand bg-bg-elevated shadow-sm transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
           },
           i
         ))
@@ -848,7 +848,7 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva as cva3 } from "class-variance-authority";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var toggleVariants = cva3(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium text-text-secondary transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium data-[state=on]:font-semibold text-text-secondary transition-colors duration-fast focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       /**
@@ -857,7 +857,7 @@ var toggleVariants = cva3(
        */
       treatment: {
         frame: "ring-1 ring-inset ring-border-subtle hover:bg-bg-secondary hover:text-text-primary data-[state=on]:text-text-primary data-[state=on]:ring-border-strong",
-        track: "data-[state=off]:hover:text-text-primary data-[state=on]:bg-bg-brand-subtle data-[state=on]:text-text-brand"
+        track: "data-[state=off]:hover:text-text-primary data-[state=on]:bg-bg-sunken data-[state=on]:text-text-primary"
       },
       variant: {
         default: "bg-transparent",
@@ -909,17 +909,18 @@ var SlidingThumb = ({ index, count }) => /* @__PURE__ */ jsx20(
   "span",
   {
     "aria-hidden": "true",
-    className: "motion-segment-thumb pointer-events-none absolute inset-y-0 left-0 rounded-md bg-bg-brand-subtle",
+    className: "motion-segment-thumb pointer-events-none absolute inset-y-0 left-0 rounded-md bg-bg-sunken",
     style: { width: `calc(100% / ${count})`, transform: `translateX(${index * 100}%)` }
   }
 );
 var ToggleGroup = React16.forwardRef(({ className, variant, size, treatment, sliding, children, ...props }, ref) => {
-  const resolved = treatment ?? (props.type === "single" ? "track" : "frame");
+  const slots = React16.Children.toArray(children).filter(React16.isValidElement);
+  const wordless = slots.length > 0 && slots.every((slot) => isIconOnly(slot.props.children));
+  const resolved = treatment ?? (props.type === "single" && !wordless ? "track" : "frame");
   const [mirror, setMirror] = React16.useState(
     () => typeof props.defaultValue === "string" ? props.defaultValue : void 0
   );
   const selected = typeof props.value === "string" ? props.value : mirror;
-  const slots = React16.Children.toArray(children).filter(React16.isValidElement);
   const index = slots.findIndex((slot) => slot.props.value === selected);
   const rootProps = sliding && typeof props.value !== "string" ? {
     ...props,
@@ -940,10 +941,13 @@ var ToggleGroup = React16.forwardRef(({ className, variant, size, treatment, sli
           // what lets the thumb be exactly `100% / count` wide and travel in multiples of itself.
           "inline-flex w-fit items-center gap-0.5"
         ) : "flex items-center justify-center gap-1",
-        // A sliding track is as wide as what holds it and its slots share that width equally, because
-        // the thumb is one slot wide and travels in multiples of itself. The gap goes for the same
-        // reason: a gap between slots is width the thumb's own step does not account for.
-        sliding && "relative flex w-full gap-0",
+        // A sliding track's slots share its width equally, because the thumb is one slot wide and
+        // travels in multiples of itself. The gap goes for the same reason: a gap between slots is
+        // width the thumb's own step does not account for. The track sizes to those slots rather
+        // than to whatever holds it — given a parent and no width of its own it used to span the
+        // whole of it, and with no frame drawn the slots then read as loose words with a step
+        // somewhere in them (#754). A caller wanting full width writes one, as every call site did.
+        sliding && "relative flex w-fit gap-0",
         className
       ),
       ...rootProps,
@@ -968,11 +972,11 @@ var ToggleGroupItem = React16.forwardRef(({ className, children, variant, size,
     // the height its size declares. A slot is the one place this matters most — the items of a
     // group sit side by side, so one that is 8px wider than its neighbours is visible.
     isIconOnly(children) && ICON_ONLY_BOX,
-    // Inside a track, the selected slot is also the heavier word: weight is the one channel that
-    // survives hue removal, and the tint under it is 1.104:1 light / 1.144:1 dark on its own.
+    // Inside a track, the selected slot is also the heavier word: the surface step under it is
+    // 1.208:1 light / 1.109:1 dark on its own, which is a mark but not one on its own.
     context.treatment === "track" && "data-[state=on]:font-semibold",
-    // Under a sliding thumb the tint belongs to the thumb, which is the one that travels; a second
-    // copy on the slot would sit still while the first one moved. The word stays the slot's own.
+    // Under a sliding thumb the surface step belongs to the thumb, which is the one that travels; a
+    // second copy on the slot would sit still while the first one moved. The word stays the slot's own.
     context.sliding && "relative z-10 flex-1 data-[state=on]:bg-transparent"
   );
   if (inert) {
@@ -1012,7 +1016,7 @@ var InputOTPSlot = React17.forwardRef(({ index, className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "relative flex size-10 items-center justify-center border-y border-r text-sm text-text-primary transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        "relative flex size-10 items-center justify-center border-y border-r text-sm text-text-primary transition-all duration-fast first:rounded-l-md first:border-l last:rounded-r-md",
         // A field takes the field border (`Guidelines/Look/Borders`, #417), and a slot is the other
         // control that can honestly paint the filled step — it holds its own character, so the step
         // is a literal class picked by a boolean and the code walks the ladder as you type.
@@ -1290,7 +1294,7 @@ var ContextMenuItem = React22.forwardRef(({ className, inset, ...props }, ref) =
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     ),
@@ -1303,7 +1307,7 @@ var ContextMenuCheckboxItem = React22.forwardRef(({ className, children, checked
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors duration-fast focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     checked,
@@ -1320,7 +1324,7 @@ var ContextMenuRadioItem = React22.forwardRef(({ className, children, ...props }
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors duration-fast focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -1438,7 +1442,7 @@ var MenubarItem = React23.forwardRef(({ className, inset, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     ),
@@ -1451,7 +1455,7 @@ var MenubarCheckboxItem = React23.forwardRef(({ className, children, checked, ..
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors duration-fast focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     checked,
@@ -1468,7 +1472,7 @@ var MenubarRadioItem = React23.forwardRef(({ className, children, ...props }, re
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors duration-fast focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -1507,7 +1511,7 @@ import * as React24 from "react";
 import { cva as cva4 } from "class-variance-authority";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var badgeVariants = cva4(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
   {
     variants: {
       variant: {
@@ -1567,7 +1571,7 @@ var TableRow = React25.forwardRef(
     {
       ref,
       className: cn(
-        "border-b border-border-subtle transition-colors hover:bg-bg-secondary-a50 data-[state=selected]:bg-bg-secondary",
+        "border-b border-border-subtle transition-colors duration-fast hover:bg-bg-secondary-a50 data-[state=selected]:bg-bg-secondary",
         className
       ),
       ...props
@@ -1659,12 +1663,11 @@ var GLYPH_SIZE = {
 };
 var TONE = {
   neutral: "bg-bg-secondary text-text-secondary",
-  brand: "bg-bg-brand-subtle text-text-brand",
   teal: "bg-bg-teal-subtle text-text-teal",
   violet: "bg-bg-violet-subtle text-text-violet",
   rose: "bg-bg-rose-subtle text-text-rose"
 };
-var TINT_FAMILIES = ["brand", "teal", "violet", "rose"];
+var TINT_FAMILIES = ["teal", "violet", "rose"];
 function initialsOf(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (parts.length === 0) return "?";
@@ -1676,9 +1679,17 @@ function initialOf(name) {
   return c ? c.toUpperCase() : "?";
 }
 function tintFor(seed) {
-  let h = 0;
-  for (let i = 0; i < seed.length; i++) h = h * 31 + seed.charCodeAt(i) >>> 0;
-  return TINT_FAMILIES[h % TINT_FAMILIES.length];
+  return TINT_FAMILIES[hashSeed(seed) % TINT_FAMILIES.length];
+}
+function hashSeed(seed) {
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i++) h = Math.imul(h ^ seed.charCodeAt(i), 16777619);
+  h ^= h >>> 16;
+  h = Math.imul(h, 2246822507);
+  h ^= h >>> 13;
+  h = Math.imul(h, 3266489909);
+  h ^= h >>> 16;
+  return h >>> 0;
 }
 function Mark({ shape, size, tone, src, label, children }) {
   return /* @__PURE__ */ jsxs18(
@@ -1759,7 +1770,7 @@ var Progress = React30.forwardRef(({ className, value, ...props }, ref) => /* @_
     children: /* @__PURE__ */ jsx37(
       ProgressPrimitive.Indicator,
       {
-        className: "h-full w-full flex-1 bg-text-tertiary transition-all",
+        className: "h-full w-full flex-1 bg-text-tertiary transition-all duration-slide",
         style: { transform: `translateX(-${100 - (value || 0)}%)` }
       }
     )
@@ -1781,7 +1792,7 @@ var TabsList = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-bg-secondary p-1 text-text-secondary",
+      "inline-flex h-10 items-center justify-center rounded-md bg-bg-surface p-1 text-text-secondary",
       className
     ),
     ...props
@@ -1793,7 +1804,7 @@ var TabsTrigger = React31.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bg-elevated data-[state=active]:text-text-primary data-[state=active]:shadow-sm",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bg-sunken data-[state=active]:font-semibold data-[state=active]:text-text-primary",
       className
     ),
     ...props
@@ -1833,7 +1844,7 @@ var AccordionTrigger = React32.forwardRef(({ className, children, ...props }, re
   {
     ref,
     className: cn(
-      "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+      "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all duration-fast hover:underline [&[data-state=open]>svg]:rotate-180",
       className
     ),
     ...props,
@@ -1900,7 +1911,7 @@ var ScrollBar = React34.forwardRef(({ className, orientation = "vertical", ...pr
     ref,
     orientation,
     className: cn(
-      "flex touch-none select-none transition-colors",
+      "flex touch-none select-none transition-colors duration-fast",
       orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
@@ -1998,7 +2009,7 @@ var BreadcrumbLink = React36.forwardRef(({ asChild, className, ...props }, ref)
     Comp,
     {
       ref,
-      className: cn("transition-colors hover:text-text-primary", className),
+      className: cn("transition-colors duration-fast hover:text-text-primary", className),
       ...props
     }
   );
@@ -2257,7 +2268,7 @@ var NavigationMenuList = React39.forwardRef(({ className, ...props }, ref) => /*
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = cva6(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-bg-elevated px-4 py-2 text-sm font-medium transition-colors hover:bg-bg-secondary hover:text-text-primary focus:bg-bg-secondary focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-bg-secondary"
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-bg-elevated px-4 py-2 text-sm font-medium transition-colors duration-fast hover:bg-bg-secondary hover:text-text-primary focus:bg-bg-secondary focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-bg-secondary"
 );
 var NavigationMenuTrigger = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs25(
   NavigationMenuPrimitive.Trigger,
@@ -2413,7 +2424,7 @@ function ThemeToggle() {
     "button",
     {
       onClick: () => setTheme(next),
-      className: "p-2 rounded-lg text-text-secondary hover:bg-bg-secondary transition-colors",
+      className: "p-2 rounded-lg text-text-secondary hover:bg-bg-secondary transition-colors duration-fast",
       "aria-label": label,
       title: label,
       children: /* @__PURE__ */ jsx48(Icon, { className: "w-4 h-4" })
@@ -2451,20 +2462,35 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         week: "flex w-full mt-2",
         day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
         day_button: cn(
-          "inline-flex size-9 items-center justify-center rounded-md p-0 font-regular text-text-primary transition-colors",
+          "inline-flex size-9 items-center justify-center rounded-md p-0 font-regular text-text-primary transition-colors duration-fast",
           "hover:bg-bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
           "aria-selected:opacity-100"
         ),
-        selected: "[&>button]:bg-blue-400 [&>button]:text-text-on-brand [&>button]:hover:bg-blue-350 [&>button]:hover:text-text-on-brand",
-        // Scope today's surface to non-selected buttons so a selected "today"
-        // keeps the brand fill (rdp sets aria-selected on the selected button)
-        // rather than colliding at equal specificity.
-        today: '[&>button:not([aria-selected="true"])]:bg-bg-secondary [&>button:not([aria-selected="true"])]:text-text-primary',
+        // The console's selection mark, unchanged for a day: the surface step, the weight step, the
+        // primary tone (Guidelines/Look/Selection weight). Hovering a chosen day holds the step —
+        // `day_button`'s wash is the pointer's channel and would lighten the mark out from under it.
+        selected: "[&>button]:bg-bg-sunken [&>button]:font-semibold [&>button]:text-text-primary [&>button]:hover:bg-bg-sunken",
+        // Today moved off `bg-secondary` because the selection mark landed on `bg-sunken`, and in
+        // dark those two measure 1.034:1 — today would have worn the chosen day's fill. A hairline
+        // is the free channel: it rests at `border-default`, the kit's resting edge, where a
+        // selection with no word to thicken steps to `border-strong`, so neither reads as the
+        // other, and a day that is both wears the plate and the hairline at once. `border` rather
+        // than a ring because the box is a fixed `size-9`, so the edge costs no layout here and
+        // leaves the focus ring the one thing drawing a ring.
+        today: "[&>button]:border [&>button]:border-border-default",
         outside: "[&>button]:text-text-tertiary [&>button]:opacity-50",
         disabled: "[&>button]:text-text-disabled [&>button]:opacity-50",
-        range_start: "[&>button]:bg-blue-400 [&>button]:text-text-on-brand rounded-l-md",
-        range_end: "[&>button]:bg-blue-400 [&>button]:text-text-on-brand rounded-r-md",
-        range_middle: "[&>button]:bg-bg-secondary [&>button]:text-text-primary [&>button]:rounded-none",
+        // A range is one band, so the fill goes on the cell, which has no radius of its own to notch
+        // the join with; the ends round their outer side and a one-day range rounds both. Every day
+        // in a range also carries `selected`, so the band and each button's own plate are the same
+        // step and meet without a seam.
+        range_start: "bg-bg-sunken rounded-l-md",
+        range_end: "bg-bg-sunken rounded-r-md",
+        // Spanned, not chosen: the middle keeps the surface step and gives back the weight step and
+        // the primary tone. `[&[data-selected]>button]` is the specificity that takes them back —
+        // rdp writes `data-selected` on every cell of a range, so this beats `selected` by an
+        // attribute rather than by whatever order Tailwind happens to emit two equal selectors in.
+        range_middle: "bg-bg-sunken [&[data-selected]>button]:font-regular [&[data-selected]>button]:text-text-secondary",
         hidden: "invisible",
         ...classNames
       },
@@ -2892,7 +2918,7 @@ var DocsLink = React45.forwardRef(
       target: "_blank",
       rel: "noreferrer noopener",
       className: cn(
-        "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm text-text-secondary transition-colors hover:bg-bg-secondary hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+        "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm text-text-secondary transition-colors duration-fast hover:bg-bg-secondary hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
         className
       ),
       ...props,
@@ -3350,7 +3376,7 @@ function UserMenu({ user, items, collapsed = false, align = "start" }) {
     "button",
     {
       type: "button",
-      className: "flex w-full items-center gap-2.5 rounded-xl px-1.5 py-[5px] text-left transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+      className: "flex w-full items-center gap-2.5 rounded-xl px-1.5 py-[5px] text-left transition-colors duration-fast hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
       children: [
         avatar,
         /* @__PURE__ */ jsxs36("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
@@ -3378,7 +3404,7 @@ function UserMenu({ user, items, collapsed = false, align = "start" }) {
             /* @__PURE__ */ jsx61("span", { className: "block truncate text-sm font-medium text-text-primary", children: user.name }),
             collapsed && secondLine && /* @__PURE__ */ jsx61("span", { className: "block truncate text-xs font-regular text-text-tertiary", children: secondLine })
           ] }),
-          /* @__PURE__ */ jsx61(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
+          /* @__PURE__ */ jsx61(DropdownMenuSeparator, { className: "mx-0 shrink-0" }),
           items.map((item, i) => {
             const Icon = item.icon;
             const content = /* @__PURE__ */ jsxs36(Fragment2, { children: [
@@ -4459,10 +4485,43 @@ var RemovableChip = React62.forwardRef(
 );
 RemovableChip.displayName = "RemovableChip";
 
-// src/components/nav-section-label.tsx
+// src/hooks/use-fresh-highlight.ts
 import * as React63 from "react";
+var HOLD_MS = 3200;
+var CLEAR_MS = HOLD_MS + 900;
+function useFreshHighlight() {
+  const [freshId, setFreshId] = React63.useState(null);
+  const [message, setMessage] = React63.useState("");
+  const timer = React63.useRef(void 0);
+  React63.useEffect(() => () => clearTimeout(timer.current), []);
+  const markFresh = React63.useCallback((id, announce) => {
+    clearTimeout(timer.current);
+    setFreshId(id);
+    if (announce) setMessage(announce);
+    timer.current = setTimeout(() => setFreshId(null), CLEAR_MS);
+  }, []);
+  const isFresh = React63.useCallback((id) => id === freshId, [freshId]);
+  const freshRef = React63.useCallback((el) => {
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const viewportH = window.innerHeight || document.documentElement.clientHeight;
+    const offscreen = rect.top < 0 || rect.bottom > viewportH;
+    if (!offscreen) return;
+    const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    el.scrollIntoView({ block: "nearest", behavior: reduce ? "auto" : "smooth" });
+  }, []);
+  const announcer = React63.createElement(
+    "span",
+    { role: "status", "aria-live": "polite", className: "sr-only" },
+    message
+  );
+  return { isFresh, markFresh, freshRef, announcer };
+}
+
+// src/components/nav-section-label.tsx
+import * as React64 from "react";
 import { jsx as jsx75 } from "react/jsx-runtime";
-var NavSectionLabel = React63.forwardRef(
+var NavSectionLabel = React64.forwardRef(
   function NavSectionLabel2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx75(
       "div",
@@ -4477,7 +4536,7 @@ var NavSectionLabel = React63.forwardRef(
 NavSectionLabel.displayName = "NavSectionLabel";
 
 // src/components/menu-popup.tsx
-import * as React64 from "react";
+import * as React65 from "react";
 import { jsx as jsx76, jsxs as jsxs49 } from "react/jsx-runtime";
 function MenuPopup({
   trigger,
@@ -4507,7 +4566,7 @@ function MenuPopup({
     )
   ] });
 }
-var MenuDivider = React64.forwardRef(
+var MenuDivider = React65.forwardRef(
   function MenuDivider2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx76(
       "div",
@@ -4523,11 +4582,11 @@ var MenuDivider = React64.forwardRef(
 MenuDivider.displayName = "MenuDivider";
 
 // src/components/sidebar-product-header.tsx
-import * as React65 from "react";
+import * as React66 from "react";
 import { Slot as Slot4 } from "@radix-ui/react-slot";
 import { ChevronsUpDown as ChevronsUpDown2 } from "lucide-react";
 import { Fragment as Fragment7, jsx as jsx77, jsxs as jsxs50 } from "react/jsx-runtime";
-var SidebarProductHeader = React65.forwardRef(
+var SidebarProductHeader = React66.forwardRef(
   function SidebarProductHeader2({ name, icon, trailing, asChild = false, className, children, ...props }, ref) {
     const adornment = trailing === void 0 ? /* @__PURE__ */ jsx77(ChevronsUpDown2, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }) : trailing;
     const content = /* @__PURE__ */ jsxs50(Fragment7, { children: [
@@ -4537,8 +4596,8 @@ var SidebarProductHeader = React65.forwardRef(
     ] });
     const classes = cn("flex w-full items-center gap-2.5 rounded-xl px-1.5 py-0 text-left", className);
     if (asChild) {
-      const child = React65.Children.only(children);
-      return /* @__PURE__ */ jsx77(Slot4, { ref, className: classes, ...props, children: React65.cloneElement(child, void 0, content) });
+      const child = React66.Children.only(children);
+      return /* @__PURE__ */ jsx77(Slot4, { ref, className: classes, ...props, children: React66.cloneElement(child, void 0, content) });
     }
     return /* @__PURE__ */ jsx77("button", { ref, type: "button", className: classes, ...props, children: content });
   }
@@ -4548,7 +4607,7 @@ SidebarProductHeader.displayName = "SidebarProductHeader";
 // src/components/org-product-switcher.tsx
 import { ChevronsUpDown as ChevronsUpDown3, Check as Check9 } from "lucide-react";
 import { Fragment as Fragment8, jsx as jsx78, jsxs as jsxs51 } from "react/jsx-runtime";
-var triggerBox = "flex w-full items-center gap-2.5 rounded-xl px-1.5 py-1 text-left transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
+var triggerBox = "flex w-full items-center gap-2.5 rounded-xl px-1.5 py-1 text-left transition-colors duration-fast hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
 var menuItem = "gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-text-secondary focus:bg-[var(--menu-hov)] focus:text-text-primary";
 var sectionLabel = "px-2 pt-1.5 pb-1 text-xs font-medium text-text-tertiary";
 var NO_ORG_LABEL = "Select an organization\u2026";
@@ -4639,7 +4698,7 @@ function OrgProductSwitcher({
             o.id === activeOrgId && /* @__PURE__ */ jsx78(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
           ] }, o.id)),
           products.length > 0 && /* @__PURE__ */ jsxs51(Fragment8, { children: [
-            /* @__PURE__ */ jsx78(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
+            /* @__PURE__ */ jsx78(DropdownMenuSeparator, { className: "mx-0 shrink-0" }),
             /* @__PURE__ */ jsx78(DropdownMenuLabel, { className: sectionLabel, children: orgName ? `${orgName} \xB7 Products` : "Products" }),
             products.map((p) => /* @__PURE__ */ jsxs51(DropdownMenuItem, { className: menuItem, onSelect: () => onProductSelect?.(p.id), children: [
               /* @__PURE__ */ jsx78(Mark2, { item: p, size: "sm", reserve: true }),
@@ -4648,7 +4707,7 @@ function OrgProductSwitcher({
             ] }, p.id))
           ] }),
           actions && actions.length > 0 && /* @__PURE__ */ jsxs51(Fragment8, { children: [
-            /* @__PURE__ */ jsx78(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
+            /* @__PURE__ */ jsx78(DropdownMenuSeparator, { className: "mx-0 shrink-0" }),
             actions.map((a) => /* @__PURE__ */ jsx78(DropdownMenuItem, { className: menuItem, onSelect: a.onSelect, asChild: Boolean(a.href), children: a.href ? /* @__PURE__ */ jsxs51("a", { href: a.href, children: [
               a.icon,
               a.label
@@ -4668,7 +4727,7 @@ OrgProductSwitcher.displayName = "OrgProductSwitcher";
 import { ArrowLeft as ArrowLeft3 } from "lucide-react";
 import { jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
 var focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
-var arrowPlate = "flex size-5 items-center justify-center rounded-md transition-colors hover:bg-[color-mix(in_srgb,var(--text-primary)_12%,transparent)] hover:text-text-primary";
+var arrowPlate = "flex size-5 items-center justify-center rounded-md transition-colors duration-fast hover:bg-[color-mix(in_srgb,var(--text-primary)_12%,transparent)] hover:text-text-primary";
 var arrowBox = "flex shrink-0 cursor-pointer items-center rounded-xl py-2 pr-0 pl-2.5 text-text-secondary";
 var titleBox = "min-w-0 flex-1 cursor-pointer truncate rounded-xl py-2 pr-2.5 pl-[14px] text-left text-sm font-semibold text-text-primary";
 var Arrow = () => /* @__PURE__ */ jsx79(ArrowLeft3, { size: 16, "aria-hidden": "true" });
@@ -4726,9 +4785,9 @@ function SidebarBackHeader({
 SidebarBackHeader.displayName = "SidebarBackHeader";
 
 // src/components/top-bar.tsx
-import * as React66 from "react";
+import * as React67 from "react";
 import { jsx as jsx80, jsxs as jsxs53 } from "react/jsx-runtime";
-var TopBar = React66.forwardRef(
+var TopBar = React67.forwardRef(
   ({ left, right, className, ...props }, ref) => /* @__PURE__ */ jsxs53("div", { ref, className: cn("flex w-full items-center gap-1", className), ...props, children: [
     left,
     right && /* @__PURE__ */ jsx80("div", { className: "ml-auto flex items-center gap-2", children: right })
@@ -4737,9 +4796,9 @@ var TopBar = React66.forwardRef(
 TopBar.displayName = "TopBar";
 
 // src/components/top-bar-utilities.tsx
-import * as React67 from "react";
+import * as React68 from "react";
 import { jsx as jsx81, jsxs as jsxs54 } from "react/jsx-runtime";
-var TopBarUtilities = React67.forwardRef(
+var TopBarUtilities = React68.forwardRef(
   ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx81("div", { ref, className: cn("flex items-center gap-1", className), ...props, children: items.map(({ name, icon, onClick }) => /* @__PURE__ */ jsxs54(Tooltip, { children: [
     /* @__PURE__ */ jsx81(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx81(Button, { variant: "ghost", size: "sm", icon, "aria-label": name, onClick }) }),
     /* @__PURE__ */ jsx81(TooltipContent, { children: name })
@@ -4748,10 +4807,10 @@ var TopBarUtilities = React67.forwardRef(
 TopBarUtilities.displayName = "TopBarUtilities";
 
 // src/components/grid.tsx
-import * as React68 from "react";
+import * as React69 from "react";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import { jsx as jsx82 } from "react/jsx-runtime";
-var Grid = React68.forwardRef(
+var Grid = React69.forwardRef(
   ({ fluid = false, asChild = false, className, ...props }, ref) => {
     const Comp = asChild ? Slot5 : "div";
     return /* @__PURE__ */ jsx82(
@@ -4772,7 +4831,7 @@ var Grid = React68.forwardRef(
 Grid.displayName = "Grid";
 
 // src/components/col.tsx
-import * as React69 from "react";
+import * as React70 from "react";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
 import { jsx as jsx83 } from "react/jsx-runtime";
 var TIER_MAX = { base: 4, md: 8, xl: 12 };
@@ -4894,7 +4953,7 @@ function responsiveClasses(span, offset) {
   }
   return cn(...spanClasses, ...startClasses);
 }
-var Col = React69.forwardRef(
+var Col = React70.forwardRef(
   ({ span, offset, asChild = false, className, ...props }, ref) => {
     const Comp = asChild ? Slot6 : "div";
     return /* @__PURE__ */ jsx83(Comp, { ref, className: cn(responsiveClasses(span, offset), className), ...props });
@@ -4913,7 +4972,7 @@ function PageColumn({ className, width = "reading", ...props }) {
 }
 
 // src/components/code-block.tsx
-import * as React70 from "react";
+import * as React71 from "react";
 import { jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
 var TOKEN_CLASS = {
   comment: "text-text-tertiary italic",
@@ -5085,11 +5144,11 @@ function dropLeading(tokens, count) {
   }
   return out;
 }
-var CodeBlock = React70.forwardRef(
+var CodeBlock = React71.forwardRef(
   ({ code, lang = "tsx", variant = "default", copy = false, filename, scroll = false, highlightLines, showLineNumbers = false, className, ...props }, ref) => {
-    const lines = React70.useMemo(() => tokenizeLines(code, lang), [code, lang]);
-    const rawLines = React70.useMemo(() => code.split("\n"), [code]);
-    const highlighted = React70.useMemo(() => parseHighlightLines(highlightLines), [highlightLines]);
+    const lines = React71.useMemo(() => tokenizeLines(code, lang), [code, lang]);
+    const rawLines = React71.useMemo(() => code.split("\n"), [code]);
+    const highlighted = React71.useMemo(() => parseHighlightLines(highlightLines), [highlightLines]);
     const isDiff = variant === "diff";
     const isTerminal = variant === "terminal";
     const showCopy = copy && !isTerminal;
@@ -5164,7 +5223,7 @@ var CodeBlock = React70.forwardRef(
   }
 );
 CodeBlock.displayName = "CodeBlock";
-var Code = React70.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx85(
+var Code = React71.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx85(
   "code",
   {
     ref,
@@ -5178,10 +5237,10 @@ var Code = React70.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Code.displayName = "Code";
 
 // src/components/grid-overlay.tsx
-import * as React71 from "react";
+import * as React72 from "react";
 import { jsx as jsx86 } from "react/jsx-runtime";
 var BASELINE = "var(--grid-gutter) / 2";
-var GridOverlay = React71.forwardRef(
+var GridOverlay = React72.forwardRef(
   ({ columns, baseline = false, className, style, ...props }, ref) => {
     const count = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;
     return /* @__PURE__ */ jsx86(
@@ -5209,7 +5268,7 @@ var GridOverlay = React71.forwardRef(
 GridOverlay.displayName = "GridOverlay";
 
 // src/components/attachment-chip.tsx
-import * as React72 from "react";
+import * as React73 from "react";
 import { cva as cva8 } from "class-variance-authority";
 import { Link2, Clock, Plus as Plus2 } from "lucide-react";
 import { jsx as jsx87, jsxs as jsxs56 } from "react/jsx-runtime";
@@ -5231,7 +5290,7 @@ var stateIcons = {
   requested: Clock,
   available: Plus2
 };
-var AttachmentChip = React72.forwardRef(
+var AttachmentChip = React73.forwardRef(
   ({ state, account, icon, hideIcon = false, className, ...props }, ref) => {
     const Icon = icon ?? stateIcons[state ?? "attached"];
     return /* @__PURE__ */ jsxs56("span", { ref, className: cn(attachmentChipVariants({ state }), className), ...props, children: [
@@ -5243,7 +5302,7 @@ var AttachmentChip = React72.forwardRef(
 AttachmentChip.displayName = "AttachmentChip";
 
 // src/components/connector-card.tsx
-import * as React73 from "react";
+import * as React74 from "react";
 import { AlertTriangle, ChevronDown as ChevronDown6 } from "lucide-react";
 import { Fragment as Fragment9, jsx as jsx88, jsxs as jsxs57 } from "react/jsx-runtime";
 var originLabels = {
@@ -5258,7 +5317,7 @@ var statusLabels = {
 function monogram(name) {
   return name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
 }
-var ConnectorCard = React73.forwardRef(
+var ConnectorCard = React74.forwardRef(
   ({
     name,
     kind,
@@ -5362,7 +5421,7 @@ var ConnectorCard = React73.forwardRef(
                     ChevronDown6,
                     {
                       "aria-hidden": "true",
-                      className: "size-4 shrink-0 text-text-tertiary transition-transform group-data-[state=open]:rotate-180"
+                      className: "size-4 shrink-0 text-text-tertiary transition-transform duration-fast group-data-[state=open]:rotate-180"
                     }
                   )
                 ] })
@@ -5382,12 +5441,12 @@ var ConnectorCard = React73.forwardRef(
 ConnectorCard.displayName = "ConnectorCard";
 
 // src/components/request-row.tsx
-import * as React74 from "react";
+import * as React75 from "react";
 import { Fragment as Fragment10, jsx as jsx89, jsxs as jsxs58 } from "react/jsx-runtime";
 function monogram2(name) {
   return name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
 }
-var RequestRow = React74.forwardRef(
+var RequestRow = React75.forwardRef(
   ({ surface, name, state, glyph, subtitle, account, onApprove, onDeny, onRequest, onRevoke, action, className, ...props }, ref) => {
     let controls = action;
     if (controls === void 0) {
@@ -5439,7 +5498,7 @@ var RequestRow = React74.forwardRef(
 RequestRow.displayName = "RequestRow";
 
 // src/components/feedback-button.tsx
-import * as React75 from "react";
+import * as React76 from "react";
 import { MessageSquare, Loader2 as Loader23, CheckCircle2 } from "lucide-react";
 import { jsx as jsx90, jsxs as jsxs59 } from "react/jsx-runtime";
 var TITLE_MAX = 256;
@@ -5455,15 +5514,15 @@ var DEFAULT_LABELS = {
 };
 function FeedbackButton({ onSubmit, labels, className }) {
   const l = { ...DEFAULT_LABELS, ...labels };
-  const uid = React75.useId();
+  const uid = React76.useId();
   const titleId = `${uid}-title`;
   const detailsId = `${uid}-details`;
   const titleErrId = `${uid}-title-error`;
   const detailsErrId = `${uid}-details-error`;
-  const [open, setOpen] = React75.useState(false);
-  const [status, setStatus] = React75.useState("idle");
-  const [title, setTitle] = React75.useState("");
-  const [details, setDetails] = React75.useState("");
+  const [open, setOpen] = React76.useState(false);
+  const [status, setStatus] = React76.useState("idle");
+  const [title, setTitle] = React76.useState("");
+  const [details, setDetails] = React76.useState("");
   const titleTooLong = title.length > TITLE_MAX;
   const detailsTooLong = details.length > DETAILS_MAX;
   const titleEmpty = title.trim().length === 0;
@@ -5597,11 +5656,11 @@ function isNotificationSettled(item) {
 }
 
 // src/components/notification-bell.tsx
-import * as React77 from "react";
+import * as React78 from "react";
 import { BellRing, Settings } from "lucide-react";
 
 // src/components/notification-row.tsx
-import * as React76 from "react";
+import * as React77 from "react";
 
 // src/components/notification-parts.tsx
 import { Check as Check10 } from "lucide-react";
@@ -5636,7 +5695,7 @@ function DeepLinkControl({
 
 // src/components/notification-row.tsx
 import { jsx as jsx92, jsxs as jsxs60 } from "react/jsx-runtime";
-var NotificationRow = React76.forwardRef(
+var NotificationRow = React77.forwardRef(
   ({ item, onItemClick, onActionClick, onMarkRead, formatAge, className, ...props }, ref) => {
     const settled = isNotificationSettled(item);
     const unread = !settled && !item.read;
@@ -5700,7 +5759,7 @@ var NotificationRow = React76.forwardRef(
                     onClick: () => onActionClick?.(item, action),
                     className: cn(
                       rowControlHitArea,
-                      chip ? "rounded-md px-2.5 py-1 text-xs font-medium transition-colors" : "text-xs font-semibold text-text-secondary transition-opacity hover:opacity-80",
+                      chip ? "rounded-md px-2.5 py-1 text-xs font-medium transition-colors duration-fast" : "text-xs font-semibold text-text-secondary transition-opacity duration-fast hover:opacity-80",
                       action.variant === "primary" && "bg-bg-brand text-text-on-brand hover:bg-bg-brand-hover",
                       action.variant === "destructive" && "bg-bg-elevated text-text-danger hover:bg-bg-sunken"
                     ),
@@ -5717,7 +5776,7 @@ var NotificationRow = React76.forwardRef(
                   onClick: () => onItemClick?.(item),
                   className: cn(
                     rowControlHitArea,
-                    "text-xs font-semibold text-text-brand transition-opacity hover:opacity-80"
+                    "text-xs font-semibold text-text-brand transition-opacity duration-fast hover:opacity-80"
                   )
                 }
               )
@@ -5732,7 +5791,7 @@ NotificationRow.displayName = "NotificationRow";
 
 // src/components/notification-bell.tsx
 import { jsx as jsx93, jsxs as jsxs61 } from "react/jsx-runtime";
-var NotificationBell = React77.forwardRef(
+var NotificationBell = React78.forwardRef(
   ({
     items,
     unreadCount,
@@ -5760,7 +5819,7 @@ var NotificationBell = React77.forwardRef(
           type: "button",
           "aria-label": "Notifications",
           className: cn(
-            "relative flex size-8 items-center justify-center rounded-lg text-text-secondary transition-colors hover:bg-bg-elevated hover:text-text-primary data-[state=open]:bg-bg-brand-subtle data-[state=open]:text-text-brand",
+            "relative flex size-8 items-center justify-center rounded-lg text-text-secondary transition-colors duration-fast hover:bg-bg-elevated hover:text-text-primary data-[state=open]:bg-bg-elevated data-[state=open]:text-text-primary",
             className
           ),
           children: [
@@ -5785,7 +5844,7 @@ var NotificationBell = React77.forwardRef(
                   {
                     type: "button",
                     onClick: () => onMarkAllRead?.(),
-                    className: "text-sm font-medium text-text-tertiary transition-colors hover:text-text-primary",
+                    className: "text-sm font-medium text-text-tertiary transition-colors duration-fast hover:text-text-primary",
                     children: "Mark all read"
                   }
                 ),
@@ -5795,7 +5854,7 @@ var NotificationBell = React77.forwardRef(
                     type: "button",
                     "aria-label": "Notification settings",
                     onClick: () => onOpenSettings(),
-                    className: "flex size-6 items-center justify-center rounded-md text-text-tertiary transition-colors hover:bg-bg-surface hover:text-text-primary",
+                    className: "flex size-6 items-center justify-center rounded-md text-text-tertiary transition-colors duration-fast hover:bg-bg-surface hover:text-text-primary",
                     children: /* @__PURE__ */ jsx93(Settings, { className: "size-[15px]", "aria-hidden": "true" })
                   }
                 )
@@ -5818,7 +5877,7 @@ var NotificationBell = React77.forwardRef(
               {
                 type: "button",
                 onClick: () => onOpenArchive(),
-                className: "flex w-full shrink-0 items-center justify-center px-5 py-2.5 text-sm font-medium text-text-brand transition-colors hover:bg-bg-surface",
+                className: "flex w-full shrink-0 items-center justify-center px-5 py-2.5 text-sm font-medium text-text-brand transition-colors duration-fast hover:bg-bg-surface",
                 children: hidden > 0 ? `Open notifications archive, ${hidden} more` : "Open notifications archive"
               }
             )
@@ -5831,11 +5890,11 @@ var NotificationBell = React77.forwardRef(
 NotificationBell.displayName = "NotificationBell";
 
 // src/components/notification-center.tsx
-import * as React78 from "react";
+import * as React79 from "react";
 import { Check as Check11, Search as Search2 } from "lucide-react";
 import { jsx as jsx94, jsxs as jsxs62 } from "react/jsx-runtime";
-var chipBase = "rounded-lg px-3 py-1.5 text-sm font-medium transition-colors";
-var chipOn = "bg-bg-brand-subtle text-text-brand";
+var chipBase = "rounded-md px-3 py-1.5 text-sm font-medium transition-colors duration-fast";
+var chipOn = "bg-bg-sunken font-semibold text-text-primary";
 var chipOff = "bg-bg-elevated text-text-secondary hover:text-text-primary";
 function CenterRow({
   item,
@@ -5890,14 +5949,14 @@ function CenterRow({
           onClick: () => onDeepLinkClick?.(item),
           className: cn(
             rowControlHitArea,
-            "inline-flex items-center gap-1 text-sm font-medium text-text-brand transition-colors hover:text-text-primary"
+            "inline-flex items-center gap-1 text-sm font-medium text-text-brand transition-colors duration-fast hover:text-text-primary"
           )
         }
       )
     ] })
   ] });
 }
-var NotificationCenter = React78.forwardRef(
+var NotificationCenter = React79.forwardRef(
   ({
     items,
     header = true,
@@ -5914,16 +5973,16 @@ var NotificationCenter = React78.forwardRef(
     formatAge,
     className
   }, ref) => {
-    const [status, setStatus] = React78.useState("all");
-    const [source, setSource] = React78.useState("all");
-    const [product, setProduct] = React78.useState("all");
-    const [query, setQuery] = React78.useState("");
-    const [limit, setLimit] = React78.useState(pageSize);
-    const age = React78.useCallback(
+    const [status, setStatus] = React79.useState("all");
+    const [source, setSource] = React79.useState("all");
+    const [product, setProduct] = React79.useState("all");
+    const [query, setQuery] = React79.useState("");
+    const [limit, setLimit] = React79.useState(pageSize);
+    const age = React79.useCallback(
       (createdAt) => formatAge ? formatAge(createdAt) : formatRelativeAge(createdAt),
       [formatAge]
     );
-    const sourceChips = React78.useMemo(
+    const sourceChips = React79.useMemo(
       () => sources ?? Array.from(new Set(items.map((n) => n.source))),
       [sources, items]
     );
@@ -5945,7 +6004,7 @@ var NotificationCenter = React78.forwardRef(
           {
             type: "button",
             onClick: () => onMarkAllRead(),
-            className: "shrink-0 rounded-md px-2.5 py-1 text-sm font-medium text-text-tertiary transition-colors hover:text-text-primary",
+            className: "shrink-0 rounded-md px-2.5 py-1 text-sm font-medium text-text-tertiary transition-colors duration-fast hover:text-text-primary",
             children: "Read all"
           }
         )
@@ -6042,7 +6101,7 @@ var NotificationCenter = React78.forwardRef(
           {
             type: "button",
             onClick: () => setLimit((l) => l + pageSize),
-            className: "mt-1 rounded-lg bg-bg-elevated px-4 py-2.5 text-sm font-medium text-text-secondary transition-colors hover:bg-bg-surface hover:text-text-primary",
+            className: "mt-1 rounded-lg bg-bg-elevated px-4 py-2.5 text-sm font-medium text-text-secondary transition-colors duration-fast hover:bg-bg-surface hover:text-text-primary",
             children: [
               "Load ",
               remaining,
@@ -6057,7 +6116,7 @@ var NotificationCenter = React78.forwardRef(
 NotificationCenter.displayName = "NotificationCenter";
 
 // src/components/notification-settings.tsx
-import * as React79 from "react";
+import * as React80 from "react";
 import { Moon as Moon2, Plus as Plus3, Volume2 } from "lucide-react";
 import { Fragment as Fragment11, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
 var THRESHOLDS = [
@@ -6084,7 +6143,7 @@ function ThresholdControl({
     }
   );
 }
-var NotificationSettings = React79.forwardRef(
+var NotificationSettings = React80.forwardRef(
   ({
     subscriptions,
     value,
@@ -6097,7 +6156,7 @@ var NotificationSettings = React79.forwardRef(
     pushSlot,
     className
   }, ref) => {
-    const [tab, setTab] = React79.useState(DEFAULT_KEY);
+    const [tab, setTab] = React80.useState(DEFAULT_KEY);
     const isDefault = tab === DEFAULT_KEY;
     const defaults = value[DEFAULT_KEY] ?? { thresholds: {} };
     const customized = !isDefault && Object.prototype.hasOwnProperty.call(value, tab);
@@ -6179,7 +6238,7 @@ var NotificationSettings = React79.forwardRef(
               {
                 type: "button",
                 onClick: () => onUnmute?.(m.source),
-                className: "rounded-md px-2.5 py-1 text-sm font-medium text-text-brand transition-colors hover:bg-bg-surface",
+                className: "rounded-md px-2.5 py-1 text-sm font-medium text-text-brand transition-colors duration-fast hover:bg-bg-surface",
                 children: "Unmute"
               }
             )
@@ -6213,7 +6272,7 @@ var NotificationSettings = React79.forwardRef(
           {
             type: "button",
             onClick: customize,
-            className: "mt-5 inline-flex items-center gap-1.5 rounded-lg bg-bg-brand px-3.5 py-2 text-sm font-semibold text-text-on-brand transition-colors hover:bg-bg-brand-hover",
+            className: "mt-5 inline-flex items-center gap-1.5 rounded-lg bg-bg-brand px-3.5 py-2 text-sm font-semibold text-text-on-brand transition-colors duration-fast hover:bg-bg-brand-hover",
             children: [
               /* @__PURE__ */ jsx95(Plus3, { className: "size-4", "aria-hidden": "true" }),
               " Customize for ",
@@ -6235,7 +6294,7 @@ var NotificationSettings = React79.forwardRef(
             {
               type: "button",
               onClick: resetToDefault,
-              className: "shrink-0 rounded-md px-2.5 py-1 text-sm font-medium text-text-tertiary transition-colors hover:text-text-danger",
+              className: "shrink-0 rounded-md px-2.5 py-1 text-sm font-medium text-text-tertiary transition-colors duration-fast hover:text-text-danger",
               children: "Reset to Default"
             }
           )
@@ -6248,14 +6307,14 @@ var NotificationSettings = React79.forwardRef(
 NotificationSettings.displayName = "NotificationSettings";
 
 // src/components/notification-toast.tsx
-import * as React80 from "react";
+import * as React81 from "react";
 import { X as X4 } from "lucide-react";
 import { jsx as jsx96, jsxs as jsxs64 } from "react/jsx-runtime";
-var chipBase2 = "rounded-lg px-2.5 py-1 text-sm font-medium transition-colors";
+var chipBase2 = "rounded-lg px-2.5 py-1 text-sm font-medium transition-colors duration-fast";
 var chipPrimary = "bg-bg-brand text-text-on-brand hover:bg-bg-brand-hover";
 var chipDestructive = "bg-bg-elevated text-text-danger hover:bg-bg-surface";
-var linkAction = "text-sm font-semibold text-text-brand transition-colors hover:text-text-primary";
-var NotificationToast = React80.forwardRef(
+var linkAction = "text-sm font-semibold text-text-brand transition-colors duration-fast hover:text-text-primary";
+var NotificationToast = React81.forwardRef(
   ({
     item,
     showSource = true,
@@ -6272,7 +6331,7 @@ var NotificationToast = React80.forwardRef(
     const actions = item.actions ?? [];
     const percent = progress === void 0 || !Number.isFinite(progress) ? void 0 : Math.min(100, Math.max(0, progress));
     const progressLine = progressLabel === void 0 && percent !== void 0 ? `live, ${Math.round(percent)}%` : progressLabel;
-    const barId = React80.useId();
+    const barId = React81.useId();
     const hasProgressLine = progressLine !== null && progressLine !== void 0;
     return /* @__PURE__ */ jsxs64(
       "div",
@@ -6296,7 +6355,7 @@ var NotificationToast = React80.forwardRef(
                   type: "button",
                   "aria-label": dismissLabel,
                   onClick: () => onDismiss(item),
-                  className: "flex size-5 shrink-0 items-center justify-center rounded-md text-text-tertiary transition-colors hover:bg-bg-surface hover:text-text-primary",
+                  className: "flex size-5 shrink-0 items-center justify-center rounded-md text-text-tertiary transition-colors duration-fast hover:bg-bg-surface hover:text-text-primary",
                   children: /* @__PURE__ */ jsx96(X4, { className: "size-3.5", "aria-hidden": "true" })
                 }
               )
@@ -6350,7 +6409,7 @@ var NotificationToast = React80.forwardRef(
 NotificationToast.displayName = "NotificationToast";
 
 // src/components/notification-toaster.tsx
-import * as React81 from "react";
+import * as React82 from "react";
 import { jsx as jsx97 } from "react/jsx-runtime";
 var positions = {
   "bottom-right": "bottom-6 right-6 flex-col",
@@ -6358,7 +6417,7 @@ var positions = {
   "top-right": "top-6 right-6 flex-col-reverse",
   "top-left": "top-6 left-6 flex-col-reverse"
 };
-var NotificationToaster = React81.forwardRef(
+var NotificationToaster = React82.forwardRef(
   ({
     items,
     dwell,
@@ -6375,15 +6434,15 @@ var NotificationToaster = React81.forwardRef(
     className
   }, ref) => {
     const shown = items.slice(0, max);
-    const [paused, setPaused] = React81.useState(false);
-    const onDismissRef = React81.useRef(onDismiss);
+    const [paused, setPaused] = React82.useState(false);
+    const onDismissRef = React82.useRef(onDismiss);
     onDismissRef.current = onDismiss;
     const fyiDwell = dwell?.fyi;
     const importantDwell = dwell?.important;
     const criticalDwell = dwell?.critical;
-    const remaining = React81.useRef(/* @__PURE__ */ new Map());
+    const remaining = React82.useRef(/* @__PURE__ */ new Map());
     const liveIds = shown.map((item) => `${item.id}:${item.severity}`).join(" ");
-    React81.useEffect(() => {
+    React82.useEffect(() => {
       const owedById = remaining.current;
       const dwellSeconds = {
         fyi: fyiDwell ?? TOAST_DWELL.fyi,
@@ -6711,11 +6770,11 @@ var COUNTRY_OPTIONS = [
 ];
 
 // src/components/organization-onboarding-form.tsx
-import * as React82 from "react";
+import * as React83 from "react";
 
 // src/lib/auth-surface.ts
-var AUTH_FILLED_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[11px] rounded-[10px] border border-transparent bg-text-primary px-[14px] text-[14.5px] font-semibold tracking-[-0.005em] text-bg-sunken transition-opacity hover:opacity-[0.92] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand active:translate-y-px disabled:cursor-not-allowed disabled:opacity-[0.55]";
-var AUTH_QUIET_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[11px] rounded-[10px] border border-border-default bg-transparent px-[14px] text-[14.5px] font-medium tracking-[-0.005em] text-text-secondary transition-colors hover:bg-bg-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand";
+var AUTH_FILLED_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[11px] rounded-[10px] border border-transparent bg-text-primary px-[14px] text-[14.5px] font-semibold tracking-[-0.005em] text-bg-sunken transition-opacity duration-fast hover:opacity-[0.92] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand active:translate-y-px disabled:cursor-not-allowed disabled:opacity-[0.55]";
+var AUTH_QUIET_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[11px] rounded-[10px] border border-border-default bg-transparent px-[14px] text-[14.5px] font-medium tracking-[-0.005em] text-text-secondary transition-colors duration-fast hover:bg-bg-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand";
 var AUTH_BUTTON_SHADOW = "var(--auth-btn-shadow)";
 
 // src/components/organization-onboarding-form.tsx
@@ -6754,22 +6813,22 @@ function OrganizationOnboardingForm({
   onCancel,
   className
 }) {
-  const [name, setName] = React82.useState(defaultValues?.name ?? "");
-  const [legalName, setLegalName] = React82.useState(defaultValues?.legal_name ?? "");
-  const [ownerName, setOwnerName] = React82.useState(defaultValues?.owner_name ?? "");
-  const [countryOfIncorporation, setCountryOfIncorporation] = React82.useState(
+  const [name, setName] = React83.useState(defaultValues?.name ?? "");
+  const [legalName, setLegalName] = React83.useState(defaultValues?.legal_name ?? "");
+  const [ownerName, setOwnerName] = React83.useState(defaultValues?.owner_name ?? "");
+  const [countryOfIncorporation, setCountryOfIncorporation] = React83.useState(
     defaultValues?.country_of_incorporation ?? ""
   );
-  const [residencyCountry, setResidencyCountry] = React82.useState(
+  const [residencyCountry, setResidencyCountry] = React83.useState(
     defaultValues?.residency_country ?? ""
   );
-  const [owners, setOwners] = React82.useState(
+  const [owners, setOwners] = React83.useState(
     () => initialRows(defaultValues?.beneficial_owners)
   );
-  const [ownershipConfirmed, setOwnershipConfirmed] = React82.useState(false);
-  const [confirmationAttempted, setConfirmationAttempted] = React82.useState(false);
-  const nextKeyRef = React82.useRef(owners.length);
-  const submittingRef = React82.useRef(false);
+  const [ownershipConfirmed, setOwnershipConfirmed] = React83.useState(false);
+  const [confirmationAttempted, setConfirmationAttempted] = React83.useState(false);
+  const nextKeyRef = React83.useRef(owners.length);
+  const submittingRef = React83.useRef(false);
   const trimmed = name.trim();
   const filledOwners = owners.filter((row) => !isRowBlank(row));
   const ownerShares = filledOwners.map((row) => parseShare(row.share));
@@ -6823,7 +6882,7 @@ function OrganizationOnboardingForm({
       ...needsOwnershipConfirmation ? { ownership_confirmed: ownershipConfirmed } : {}
     });
   };
-  React82.useEffect(() => {
+  React83.useEffect(() => {
     submittingRef.current = false;
   }, [
     name,
@@ -7049,7 +7108,7 @@ function OrganizationOnboardingForm({
 }
 
 // src/components/list-columns.tsx
-import * as React83 from "react";
+import * as React84 from "react";
 import { jsx as jsx99, jsxs as jsxs66 } from "react/jsx-runtime";
 var CELL_WIDTH = { 20: "w-20", 24: "w-24", 28: "w-28", 32: "w-32" };
 var headerClass = "flex items-center gap-3 border-b border-border-subtle bg-bg-secondary px-4 py-1.5 text-xs text-text-tertiary";
@@ -7068,7 +7127,7 @@ function warnDuplicateKeys(columns, where) {
     seen.add(c.key);
   }
 }
-var ListHeader = React83.forwardRef(function ListHeader2({ lead, columns, mark = true, trailing = true, className, ...props }, ref) {
+var ListHeader = React84.forwardRef(function ListHeader2({ lead, columns, mark = true, trailing = true, className, ...props }, ref) {
   warnDuplicateKeys(columns, "ListHeader");
   return /* @__PURE__ */ jsxs66("div", { ref, className: cn(headerClass, className), ...props, children: [
     mark && /* @__PURE__ */ jsx99("span", { className: "size-8 shrink-0", "aria-hidden": true }),
@@ -7082,7 +7141,7 @@ function cellValue(values, column) {
   const value = values[column.key];
   return value === void 0 || value === null || value === "" ? column.fallback : value;
 }
-var ListCells = React83.forwardRef(function ListCells2({ columns, values, className, ...props }, ref) {
+var ListCells = React84.forwardRef(function ListCells2({ columns, values, className, ...props }, ref) {
   warnDuplicateKeys(columns, "ListCells");
   return /* @__PURE__ */ jsx99("span", { ref, className: cn(cellsClass, className), ...props, children: columns.map((c) => /* @__PURE__ */ jsx99(
     "span",
@@ -7097,7 +7156,7 @@ ListHeader.displayName = "ListHeader";
 ListCells.displayName = "ListCells";
 
 // src/components/theme-picker.tsx
-import * as React84 from "react";
+import * as React85 from "react";
 import { Check as Check12, Monitor } from "lucide-react";
 import { jsx as jsx100, jsxs as jsxs67 } from "react/jsx-runtime";
 var THEME_SWATCHES = {
@@ -7146,11 +7205,11 @@ function Panels({ palette }) {
     )
   ] });
 }
-var autoPlateClass = "flex h-full items-center justify-center bg-bg-secondary";
+var autoPlateClass = "flex h-full items-center justify-center bg-bg-surface";
 var previewClass = "block h-28 overflow-hidden rounded-lg border border-border-default";
-var cardClass = "grid gap-2 rounded-lg p-1.5 text-left transition-colors hover:bg-bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus";
+var cardClass = "grid gap-2 rounded-lg p-1.5 text-left transition-colors duration-fast hover:bg-bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus";
 var TRACK = { gridTemplateColumns: "repeat(auto-fit, minmax(8rem, 1fr))" };
-var Picker = React84.forwardRef(function Picker2({ value, onValueChange, className, ...props }, ref) {
+var Picker = React85.forwardRef(function Picker2({ value, onValueChange, className, ...props }, ref) {
   return /* @__PURE__ */ jsx100("div", { role: "group", "aria-label": "Theme", ...props, ref, className: cn("grid gap-4", className), style: { ...TRACK, ...props.style }, children: OPTIONS.map((o) => {
     const selected = o.value === value;
     return (
@@ -7165,7 +7224,7 @@ var Picker = React84.forwardRef(function Picker2({ value, onValueChange, classNa
           onClick: () => onValueChange(o.value),
           className: cardClass,
           children: [
-            /* @__PURE__ */ jsx100("span", { className: cn(previewClass, selected && "ring-2 ring-border-strong"), "aria-hidden": true, children: o.value === "system" ? /* @__PURE__ */ jsx100("span", { className: autoPlateClass, children: /* @__PURE__ */ jsx100(Monitor, { className: "size-8 text-text-tertiary" }) }) : /* @__PURE__ */ jsx100(Panels, { palette: THEME_SWATCHES[o.value] }) }),
+            /* @__PURE__ */ jsx100("span", { className: cn(previewClass, selected && "border-border-strong"), "aria-hidden": true, children: o.value === "system" ? /* @__PURE__ */ jsx100("span", { className: autoPlateClass, children: /* @__PURE__ */ jsx100(Monitor, { className: "size-8 text-text-tertiary" }) }) : /* @__PURE__ */ jsx100(Panels, { palette: THEME_SWATCHES[o.value] }) }),
             /* @__PURE__ */ jsxs67(
               "span",
               {
@@ -7186,7 +7245,7 @@ var Picker = React84.forwardRef(function Picker2({ value, onValueChange, classNa
     );
   }) });
 });
-var WiredPicker = React84.forwardRef(function WiredPicker2({ onValueChange, ...props }, ref) {
+var WiredPicker = React85.forwardRef(function WiredPicker2({ onValueChange, ...props }, ref) {
   const { theme, setTheme } = useTheme();
   return /* @__PURE__ */ jsx100(
     Picker,
@@ -7201,8 +7260,8 @@ var WiredPicker = React84.forwardRef(function WiredPicker2({ onValueChange, ...p
     }
   );
 });
-var ThemePicker = React84.forwardRef(function ThemePicker2({ value, onValueChange, ...props }, ref) {
-  const controlled = React84.useRef(value !== void 0);
+var ThemePicker = React85.forwardRef(function ThemePicker2({ value, onValueChange, ...props }, ref) {
+  const controlled = React85.useRef(value !== void 0);
   if (process.env.NODE_ENV !== "production" && controlled.current !== (value !== void 0)) {
     console.warn(
       "[ThemePicker] `value` went from " + (controlled.current ? "set to missing" : "missing to set") + " after mount. The picker stays " + (controlled.current ? "controlled" : "wired to the console theme") + " for its whole life: render it once its value is known, or leave `value` off entirely."
@@ -7214,7 +7273,7 @@ var ThemePicker = React84.forwardRef(function ThemePicker2({ value, onValueChang
 ThemePicker.displayName = "ThemePicker";
 
 // src/components/secret-reveal.tsx
-import * as React85 from "react";
+import * as React86 from "react";
 import { Copy as Copy2, Download } from "lucide-react";
 import { jsx as jsx101, jsxs as jsxs68 } from "react/jsx-runtime";
 var asText = (value) => Array.isArray(value) ? value.join("\n") : value;
@@ -7232,7 +7291,7 @@ function SecretValue({ value }) {
   }
   return /* @__PURE__ */ jsx101("code", { className: "block break-all font-mono text-sm font-medium text-text-primary", children: value });
 }
-var SecretReveal = React85.forwardRef(
+var SecretReveal = React86.forwardRef(
   ({
     value,
     caption,
@@ -7249,18 +7308,18 @@ var SecretReveal = React85.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [takenText, setTakenText] = React85.useState(null);
-    const [refusedText, setRefusedText] = React85.useState(null);
-    const [announcedFor, setAnnouncedFor] = React85.useState(null);
-    const copyRef = React85.useRef(null);
-    const captionId = React85.useId();
+    const [takenText, setTakenText] = React86.useState(null);
+    const [refusedText, setRefusedText] = React86.useState(null);
+    const [announcedFor, setAnnouncedFor] = React86.useState(null);
+    const copyRef = React86.useRef(null);
+    const captionId = React86.useId();
     const text = asText(value);
     const empty = text.length === 0;
     const taken = takenText === text;
     const refused = refusedText === text;
-    React85.useEffect(() => setAnnouncedFor(text), [text]);
+    React86.useEffect(() => setAnnouncedFor(text), [text]);
     const announced = announcedFor === text ? REVEALED : "";
-    React85.useEffect(() => {
+    React86.useEffect(() => {
       if (autoFocus) copyRef.current?.focus();
     }, [autoFocus]);
     const reportTaken = () => {
@@ -7320,6 +7379,212 @@ var SecretReveal = React85.forwardRef(
   }
 );
 SecretReveal.displayName = "SecretReveal";
+
+// src/components/star-rating.tsx
+import * as React87 from "react";
+import * as RadioGroupPrimitive2 from "@radix-ui/react-radio-group";
+import { Star } from "lucide-react";
+import { jsx as jsx102 } from "react/jsx-runtime";
+var STAR_BOX = {
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6"
+};
+var ROW_GAP = {
+  sm: "gap-0.5",
+  md: "gap-1",
+  lg: "gap-1.5"
+};
+var defaultItemLabel = (value, max) => `${value} out of ${max} stars`;
+var StarGlyph = ({ filled, size }) => /* @__PURE__ */ jsx102(
+  Star,
+  {
+    "aria-hidden": "true",
+    className: cn(
+      STAR_BOX[size],
+      "shrink-0 transition-colors duration-fast",
+      filled ? "fill-current text-text-primary" : "text-text-tertiary"
+    )
+  }
+);
+var StarRating = React87.forwardRef(
+  ({
+    className,
+    value,
+    defaultValue,
+    onValueChange,
+    max = 5,
+    min = 1,
+    size = "md",
+    readOnly,
+    disabled,
+    itemLabel = defaultItemLabel,
+    ...props
+  }, ref) => {
+    const stars = Array.from({ length: max }, (_, index) => index + 1);
+    const [mirror, setMirror] = React87.useState(defaultValue ?? 0);
+    const selected = value ?? mirror;
+    const [preview, setPreview] = React87.useState(null);
+    const shown = preview ?? selected;
+    const commit = (next) => {
+      setMirror(next);
+      onValueChange?.(next);
+    };
+    if (readOnly) {
+      return /* @__PURE__ */ jsx102(
+        "div",
+        {
+          ref,
+          role: "img",
+          "aria-label": props["aria-label"] ?? itemLabel(selected, max),
+          className: cn("inline-flex items-center", ROW_GAP[size], className),
+          children: stars.map((star) => /* @__PURE__ */ jsx102(StarGlyph, { filled: star <= selected, size }, star))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx102(
+      RadioGroupPrimitive2.Root,
+      {
+        ref,
+        ...props,
+        disabled,
+        value: String(selected),
+        onValueChange: (next) => commit(Number(next)),
+        onKeyDown: (event) => {
+          if (min === 0 && (event.key === "Backspace" || event.key === "Delete")) {
+            event.preventDefault();
+            commit(0);
+          }
+        },
+        orientation: "horizontal",
+        loop: false,
+        className: cn("inline-flex items-center", ROW_GAP[size], className),
+        children: stars.map((star) => /* @__PURE__ */ jsx102(
+          RadioGroupPrimitive2.Item,
+          {
+            value: String(star),
+            "aria-label": itemLabel(star, max),
+            onPointerEnter: () => setPreview(star),
+            onPointerLeave: () => setPreview((current) => current === star ? null : current),
+            onClick: () => {
+              if (min === 0 && star === selected) commit(0);
+            },
+            className: cn(
+              // Focus is an outline held off the box, never a flush ring (`Guidelines/Look/Borders`).
+              "rounded-md p-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+              "disabled:pointer-events-none disabled:opacity-50"
+            ),
+            children: /* @__PURE__ */ jsx102(StarGlyph, { filled: star <= shown, size })
+          },
+          star
+        ))
+      }
+    );
+  }
+);
+StarRating.displayName = "StarRating";
+
+// src/components/rating-scale.tsx
+import * as React88 from "react";
+import * as RadioGroupPrimitive3 from "@radix-ui/react-radio-group";
+import { jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
+var SLOT_BOX = {
+  sm: "h-8 min-w-8 px-2 text-xs",
+  md: "h-9 min-w-9 px-2 text-sm",
+  lg: "h-11 min-w-11 px-3 text-base"
+};
+var defaultItemLabel2 = (value, _min, max) => `${value} out of ${max}`;
+var RatingScale = React88.forwardRef(
+  ({
+    className,
+    value,
+    defaultValue,
+    onValueChange,
+    min = 0,
+    max = 10,
+    size = "md",
+    readOnly,
+    disabled,
+    endLabels,
+    itemLabel = defaultItemLabel2,
+    ...props
+  }, ref) => {
+    const slots = Array.from({ length: Math.max(0, max - min + 1) }, (_, index) => min + index);
+    const [mirror, setMirror] = React88.useState(defaultValue);
+    const selected = value ?? mirror;
+    const row = /* @__PURE__ */ jsx103("div", { className: cn("flex flex-wrap items-center gap-1.5", !endLabels && className), children: slots.map((slot) => {
+      const isSelected = slot === selected;
+      const box = cn(
+        "inline-flex items-center justify-center rounded-md border tabular-nums transition-colors duration-fast",
+        SLOT_BOX[size],
+        isSelected ? "border-border-strong font-semibold text-text-primary" : "border-field-border font-medium text-text-secondary"
+      );
+      if (readOnly) {
+        return /* @__PURE__ */ jsx103("span", { className: box, "aria-hidden": "true", children: slot }, slot);
+      }
+      return /* @__PURE__ */ jsx103(
+        RadioGroupPrimitive3.Item,
+        {
+          value: String(slot),
+          "aria-label": itemLabel(slot, min, max),
+          className: cn(
+            box,
+            // The hover step is the same channel the mark uses, one rung short of it, so the
+            // pointer never promises a mark it is not making.
+            "hover:border-field-border-hover hover:text-text-primary",
+            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+            "disabled:pointer-events-none disabled:opacity-50"
+          ),
+          children: slot
+        },
+        slot
+      );
+    }) });
+    const ends = endLabels ? /* @__PURE__ */ jsxs69("div", { className: "flex items-center justify-between text-xs text-text-tertiary", children: [
+      /* @__PURE__ */ jsx103("span", { children: endLabels.low }),
+      /* @__PURE__ */ jsx103("span", { children: endLabels.high })
+    ] }) : null;
+    if (readOnly) {
+      return /* @__PURE__ */ jsxs69(
+        "div",
+        {
+          ref,
+          role: "img",
+          "aria-label": props["aria-label"] ?? (selected === void 0 ? "Not answered" : itemLabel(selected, min, max)),
+          className: cn(endLabels && cn("flex flex-col gap-1.5", className)),
+          children: [
+            row,
+            ends
+          ]
+        }
+      );
+    }
+    const group = /* @__PURE__ */ jsx103(
+      RadioGroupPrimitive3.Root,
+      {
+        ref,
+        ...props,
+        disabled,
+        value: selected === void 0 ? "" : String(selected),
+        onValueChange: (next) => {
+          const parsed = Number(next);
+          setMirror(parsed);
+          onValueChange?.(parsed);
+        },
+        orientation: "horizontal",
+        loop: false,
+        asChild: true,
+        children: row
+      }
+    );
+    if (!endLabels) return group;
+    return /* @__PURE__ */ jsxs69("div", { className: cn("flex flex-col gap-1.5", className), children: [
+      group,
+      ends
+    ] });
+  }
+);
+RatingScale.displayName = "RatingScale";
 export {
   Accordion,
   AccordionContent,
@@ -7534,6 +7799,7 @@ export {
   Progress,
   RadioGroup2 as RadioGroup,
   RadioGroupItem,
+  RatingScale,
   RemovableChip,
   RemoveButton,
   RequestRow,
@@ -7558,6 +7824,7 @@ export {
   SidebarProductHeader,
   Skeleton,
   Slider,
+  StarRating,
   StatCard,
   StatusDot,
   StepUpChallenge,
@@ -7607,6 +7874,7 @@ export {
   toggleVariants,
   useCarousel,
   useFormField,
+  useFreshHighlight,
   useIsMobile,
   useSidebar,
   useTheme