@lessly/ui 3.0.0 → 4.1.0

package/dist/index.js

@@ -1,6 +1,10 @@
 import {
   Button,
+  EntityRow,
   NavRow,
+  RailToggle,
+  ScrollArea,
+  ScrollBar,
   Sheet,
   SheetClose,
   SheetContent,
@@ -19,7 +23,7 @@ import {
   cn,
   useIsMobile,
   useSidebar
-} from "./chunk-CEXND5YW.js";
+} from "./chunk-LTHOLX7I.js";
 
 // src/components/auto-height.tsx
 import * as React from "react";
@@ -82,9 +86,10 @@ var Card = React2.forwardRef(
     "div",
     {
       ref,
+      "data-slot": "card",
       title: tooltip,
       className: cn(
-        "rounded-xl border border-border-subtle bg-bg-surface text-text-primary shadow-sm",
+        "rounded-xl border border-border-subtle bg-bg-overlay text-text-primary shadow-sm",
         variant === "list" && "overflow-hidden",
         variant === "nested" && "rounded-md bg-bg-secondary p-3 shadow-none",
         className
@@ -170,7 +175,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 duration-fast 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 cursor-pointer 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" })
         ] })
@@ -231,10 +236,17 @@ var DropdownMenuTrigger = React4.forwardRef(({ variant = "bare", chevron = true,
     ...props,
     ...variant === "quiet" ? {
       className: cn(
-        "inline-flex min-h-9 items-center gap-1.5 rounded-md px-2 py-1.5 text-sm hover:bg-bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+        "inline-flex min-h-9 cursor-pointer items-center gap-1.5 rounded-md px-2 py-1.5 text-sm hover:bg-bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
         props.className
       )
-    } : null,
+    } : (
+      // A trigger the call site styles is a control the call site drew, so the cursor its own
+      // guideline asks for comes with the class list rather than from four call sites remembering
+      // it (Guidelines/Controls/What the cursor says). A trigger given no className still renders
+      // with no `class` attribute at all, which is what `bare` promises and what the test below
+      // pins — and whatever it wraps through `asChild` carries its own.
+      props.className !== void 0 ? { className: cn("cursor-pointer", props.className) } : null
+    ),
     children: variant === "quiet" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
       children,
       chevron && /* @__PURE__ */ jsx4(ChevronDown, { className: "size-3.5 shrink-0 text-text-tertiary", "aria-hidden": true })
@@ -293,9 +305,10 @@ var DropdownMenuItem = React4.forwardRef(({ className, inset, variant = "default
     className: cn(
       "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
-      // feel dangerous (Guidelines/Controls/Destructive actions). Only a dialog's confirm rests red.
+      // Destructive reddens — wash and label — under the pointer or the keyboard, and carries nothing
+      // at rest: it drops the frame and the wash a destructive Button rests on, because a row repeated
+      // down a menu makes the whole menu feel dangerous (Guidelines/Controls/Destructive actions).
+      // The opaque plate is a dialog's confirm alone.
       variant === "destructive" ? "focus:bg-bg-danger-subtle focus:text-text-danger focus:ring-border-danger" : "focus:ring-border-selected",
       className
     ),
@@ -479,7 +492,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 duration-fast hover:bg-bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+  "flex w-full cursor-pointer items-center gap-3 rounded-lg border border-border-default p-3 text-left transition-colors duration-fast hover:bg-[var(--hov-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
   {
     variants: {
       selected: {
@@ -523,7 +536,7 @@ var Medallion = React9.forwardRef(
       "aria-hidden": true,
       className: cn(
         "inline-flex size-12 shrink-0 items-center justify-center rounded-full border border-border-subtle",
-        filled ? "border-transparent bg-text-primary text-text-inverse" : "bg-bg-secondary text-text-secondary",
+        filled ? "border-transparent bg-text-primary text-text-inverse" : "bg-bg-overlay text-text-secondary",
         className
       ),
       ...props,
@@ -535,11 +548,12 @@ Medallion.displayName = "Medallion";
 
 // src/components/page-header.tsx
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-function PageHeader({ title, subtitle, icon: Icon, media, badge, actions, id }) {
-  if (Icon && !subtitle && !media && process.env.NODE_ENV !== "production") {
+function PageHeader({ title, subtitle, icon: Icon, media, badge, actions, size = "page", id }) {
+  const compact = size === "compact";
+  if (Icon && !subtitle && !media && !compact && process.env.NODE_ENV !== "production") {
     console.warn("PageHeader: `icon` needs a `subtitle` to render the medallion; medallion dropped.");
   }
-  const leading = media ?? (Icon && subtitle ? /* @__PURE__ */ jsx10(Medallion, { icon: Icon, "data-slot": "page-header-medallion" }) : null);
+  const leading = media ?? (Icon && subtitle && !compact ? /* @__PURE__ */ jsx10(Medallion, { icon: Icon, "data-slot": "page-header-medallion" }) : null);
   const heading = /* @__PURE__ */ jsx10("h2", { id, className: "text-lg font-semibold text-text-primary", children: title });
   return /* @__PURE__ */ jsxs6("div", { className: "flex min-h-9 items-center gap-3", children: [
     leading,
@@ -548,7 +562,7 @@ function PageHeader({ title, subtitle, icon: Icon, media, badge, actions, id })
         heading,
         badge
       ] }),
-      subtitle && /* @__PURE__ */ jsx10("p", { className: "text-sm text-text-secondary", children: subtitle })
+      subtitle && !compact && /* @__PURE__ */ jsx10("p", { className: "text-sm text-text-secondary", children: subtitle })
     ] }),
     actions && /* @__PURE__ */ jsx10("div", { className: "ml-auto shrink-0", children: actions })
   ] });
@@ -653,8 +667,9 @@ function Select({
 
 // src/components/setting-row.tsx
 import * as React10 from "react";
+import { Lock } from "lucide-react";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-var SettingRow = React10.forwardRef(function SettingRow2({ icon: Icon, label, description, labelTone = "primary", htmlFor, children, className, ...props }, ref) {
+var SettingRow = React10.forwardRef(function SettingRow2({ icon: Icon, label, description, labelTone = "primary", locked, htmlFor, children, className, ...props }, ref) {
   const Label5 = htmlFor ? "label" : "span";
   const quiet = labelTone === "secondary";
   return /* @__PURE__ */ jsxs9(
@@ -694,7 +709,10 @@ var SettingRow = React10.forwardRef(function SettingRow2({ icon: Icon, label, de
             description && /* @__PURE__ */ jsx13("span", { className: "block text-xs text-text-tertiary", children: description })
           ] })
         ] }),
-        /* @__PURE__ */ jsx13("span", { className: "flex shrink-0 items-center", children })
+        /* @__PURE__ */ jsxs9("span", { className: "flex shrink-0 items-center gap-2", children: [
+          locked && /* @__PURE__ */ jsx13(Lock, { className: "size-3.5 text-text-tertiary", "aria-hidden": "true" }),
+          children
+        ] })
       ]
     }
   );
@@ -724,7 +742,7 @@ 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 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}`,
+      className: `relative inline-flex h-6 w-10 shrink-0 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" : "cursor-pointer"} ${className}`,
       children: [
         /* @__PURE__ */ jsx14(
           "span",
@@ -764,7 +782,7 @@ var Checkbox = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__
       // A field takes the field border (`Guidelines/Look/Borders`, #417). No hover step and no
       // filled step: a 16px box's hover reading is the label beside it, and "answered" is already
       // the checked mark, which paints the whole box.
-      "peer size-4 shrink-0 rounded-sm border border-field-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-400 data-[state=checked]:text-text-on-brand data-[state=checked]:border-blue-400",
+      "peer size-4 shrink-0 cursor-pointer rounded-sm border border-field-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-400 data-[state=checked]:text-text-on-brand data-[state=checked]:border-blue-400",
       className
     ),
     ...props,
@@ -786,7 +804,7 @@ var RadioGroupItem = React12.forwardRef(({ className, ...props }, ref) => /* @__
     ref,
     className: cn(
       // The same field edge a `Checkbox` takes, and for the same reasons (#417).
-      "aspect-square size-4 rounded-full border border-field-border text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-blue-400",
+      "aspect-square size-4 cursor-pointer rounded-full border border-field-border text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-blue-400",
       className
     ),
     ...props,
@@ -825,7 +843,7 @@ var Slider = React14.forwardRef(({ className, ...props }, ref) => {
     SliderPrimitive.Root,
     {
       ref,
-      className: cn("relative flex w-full touch-none select-none items-center", className),
+      className: cn("relative flex w-full cursor-pointer touch-none select-none items-center", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx18(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-bg-secondary", children: /* @__PURE__ */ jsx18(SliderPrimitive.Range, { className: "absolute h-full bg-blue-400" }) }),
@@ -848,7 +866,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 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",
+  "inline-flex cursor-pointer 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: {
       /**
@@ -1518,11 +1536,11 @@ var badgeVariants = cva4(
         default: "border-transparent bg-blue-400 text-text-on-brand",
         secondary: "border-transparent bg-bg-secondary text-text-primary",
         outline: "border-border-default text-text-primary",
-        status: "border-transparent bg-bg-sunken text-text-primary",
+        status: "border-border-subtle bg-bg-overlay text-text-primary",
         destructive: "border-transparent bg-bg-danger text-text-on-danger",
         "danger-subtle": "border-transparent bg-bg-danger-subtle text-text-danger",
         "warning-subtle": "border-transparent bg-bg-warning-subtle text-text-warning",
-        "neutral-subtle": "border-transparent bg-bg-sunken text-text-tertiary",
+        "neutral-subtle": "border-border-subtle bg-bg-overlay text-text-tertiary",
         success: "border-transparent bg-bg-success text-text-on-success",
         warning: "border-transparent bg-bg-warning text-text-on-warning"
       }
@@ -1662,7 +1680,7 @@ var GLYPH_SIZE = {
   lg: "size-6"
 };
 var TONE = {
-  neutral: "bg-bg-secondary text-text-secondary",
+  neutral: "bg-bg-overlay text-text-secondary",
   teal: "bg-bg-teal-subtle text-text-teal",
   violet: "bg-bg-violet-subtle text-text-violet",
   rose: "bg-bg-rose-subtle text-text-rose"
@@ -1728,12 +1746,12 @@ function GlyphAvatar({ kind, size = "sm", label }) {
 // src/components/entity-tile.tsx
 import * as React28 from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
-function EntityTile({ name, glyph, src, size = "sm", label }) {
-  const tone = !glyph && name ? tintFor(name) : "neutral";
+function EntityTile({ name, glyph, tone = "auto", src, size = "sm", label }) {
+  const painted = tone === "auto" && !glyph && name ? tintFor(name) : "neutral";
   const sizedGlyph = React28.isValidElement(glyph) ? React28.cloneElement(glyph, {
     className: cn(GLYPH_SIZE[size], glyph.props.className)
   }) : glyph;
-  return /* @__PURE__ */ jsx35(Mark, { shape: "square", size, tone, src, label, children: sizedGlyph ?? (name ? initialOf(name) : null) });
+  return /* @__PURE__ */ jsx35(Mark, { shape: "square", size, tone: painted, src, label, children: sizedGlyph ?? (name ? initialOf(name) : null) });
 }
 
 // src/components/separator.tsx
@@ -1804,7 +1822,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 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",
+      "inline-flex cursor-pointer 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
@@ -1844,7 +1862,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 duration-fast hover:underline [&[data-state=open]>svg]:rotate-180",
+      "flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium transition-all duration-fast hover:underline [&[data-state=open]>svg]:rotate-180",
       className
     ),
     ...props,
@@ -1887,61 +1905,26 @@ var CollapsibleContent2 = React33.forwardRef(({ className, ...props }, ref) => /
 ));
 CollapsibleContent2.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;
 
-// src/components/scroll-area.tsx
-import * as React34 from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx41, jsxs as jsxs20 } from "react/jsx-runtime";
-var ScrollArea = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs20(
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("relative overflow-hidden", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx41(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-      /* @__PURE__ */ jsx41(ScrollBar, {}),
-      /* @__PURE__ */ jsx41(ScrollAreaPrimitive.Corner, {})
-    ]
-  }
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React34.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx41(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "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
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx41(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border-selected" })
-  }
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
 // src/components/alert.tsx
-import * as React35 from "react";
+import * as React34 from "react";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs20 } from "react/jsx-runtime";
 var alertVariants = cva5(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-bg-elevated border-border-subtle text-text-primary",
-        destructive: "bg-bg-danger border-border-danger text-text-on-danger",
-        success: "bg-bg-success border-border-success text-text-on-success",
-        warning: "bg-bg-warning border-border-warning text-text-on-warning"
+        default: "bg-bg-elevated border-border-default text-text-primary [&>svg]:text-text-secondary",
+        destructive: "bg-bg-danger-subtle border-border-danger text-text-primary [&>svg]:text-text-danger",
+        success: "bg-bg-success-subtle border-border-success text-text-primary [&>svg]:text-text-success",
+        warning: "bg-bg-warning-subtle border-border-warning text-text-primary [&>svg]:text-text-warning"
       }
     },
     defaultVariants: { variant: "default" }
   }
 );
-var Alert = React35.forwardRef(
-  ({ className, variant, value, action, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
+var Alert = React34.forwardRef(
+  ({ className, variant, value, action, children, ...props }, ref) => /* @__PURE__ */ jsxs20(
     "div",
     {
       ref,
@@ -1950,43 +1933,43 @@ var Alert = React35.forwardRef(
       ...props,
       children: [
         children,
-        (value !== void 0 || action !== void 0) && /* @__PURE__ */ jsxs21("div", { className: "mt-2 flex items-center gap-2", children: [
-          value !== void 0 && /* @__PURE__ */ jsx42("code", { className: "min-w-0 flex-1 truncate font-mono text-sm font-medium", children: value }),
-          action !== void 0 && /* @__PURE__ */ jsx42("span", { className: "flex shrink-0 items-center gap-2", children: action })
+        (value !== void 0 || action !== void 0) && /* @__PURE__ */ jsxs20("div", { className: "mt-2 flex items-center gap-2", children: [
+          value !== void 0 && /* @__PURE__ */ jsx41("code", { className: "min-w-0 flex-1 truncate font-mono text-sm font-medium", children: value }),
+          action !== void 0 && /* @__PURE__ */ jsx41("span", { className: "flex shrink-0 items-center gap-2", children: action })
         ] })
       ]
     }
   )
 );
 Alert.displayName = "Alert";
-var AlertTitle = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+var AlertTitle = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
   "h5",
   {
     ref,
-    className: cn("mb-1 font-medium leading-none tracking-tight", className),
+    className: cn("mb-1 text-sm font-semibold leading-none tracking-tight", className),
     ...props
   }
 ));
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+var AlertDescription = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
   "div",
   {
     ref,
-    className: cn("text-sm [&_p]:leading-relaxed", className),
+    className: cn("text-sm text-text-secondary [&_p]:leading-relaxed", className),
     ...props
   }
 ));
 AlertDescription.displayName = "AlertDescription";
 
 // src/components/breadcrumb.tsx
-import * as React36 from "react";
+import * as React35 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight as ChevronRight4, MoreHorizontal } from "lucide-react";
-import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
-var Breadcrumb = React36.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx43("nav", { ref, "aria-label": "breadcrumb", ...props }));
+import { jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
+var Breadcrumb = React35.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx42("nav", { ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React36.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var BreadcrumbList = React35.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
     "ol",
     {
       ref,
@@ -1999,13 +1982,13 @@ var BreadcrumbList = React36.forwardRef(
   )
 );
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React36.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43("li", { ref, className: cn("inline-flex items-center gap-1.5", className), ...props })
+var BreadcrumbItem = React35.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx42("li", { ref, className: cn("inline-flex items-center gap-1.5", className), ...props })
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React36.forwardRef(({ asChild, className, ...props }, ref) => {
+var BreadcrumbLink = React35.forwardRef(({ asChild, className, ...props }, ref) => {
   const Comp = asChild ? Slot : "a";
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx42(
     Comp,
     {
       ref,
@@ -2015,8 +1998,8 @@ var BreadcrumbLink = React36.forwardRef(({ asChild, className, ...props }, ref)
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React36.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var BreadcrumbPage = React35.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
     "span",
     {
       ref,
@@ -2033,18 +2016,18 @@ var BreadcrumbSeparator = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ jsx43(
+}) => /* @__PURE__ */ jsx42(
   "li",
   {
     role: "presentation",
     "aria-hidden": "true",
     className: cn("[&>svg]:h-4 [&>svg]:w-4", className),
     ...props,
-    children: children ?? /* @__PURE__ */ jsx43(ChevronRight4, {})
+    children: children ?? /* @__PURE__ */ jsx42(ChevronRight4, {})
   }
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs22(
+var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs21(
   "span",
   {
     role: "presentation",
@@ -2052,18 +2035,18 @@ var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs22(
     className: cn("flex h-9 w-9 items-center justify-center", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx43(MoreHorizontal, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "More" })
+      /* @__PURE__ */ jsx42(MoreHorizontal, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx42("span", { className: "sr-only", children: "More" })
     ]
   }
 );
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 
 // src/components/pagination.tsx
-import * as React37 from "react";
+import * as React36 from "react";
 import { ChevronLeft, ChevronRight as ChevronRight5, MoreHorizontal as MoreHorizontal2 } from "lucide-react";
-import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
-var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx44(
+import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
+var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx43(
   "nav",
   {
     role: "navigation",
@@ -2073,15 +2056,15 @@ var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx44(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React37.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx44("ul", { ref, className: cn("flex flex-row items-center gap-1", className), ...props })
+var PaginationContent = React36.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43("ul", { ref, className: cn("flex flex-row items-center gap-1", className), ...props })
 );
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React37.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx44("li", { ref, className: cn("", className), ...props })
+var PaginationItem = React36.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43("li", { ref, className: cn("", className), ...props })
 );
 PaginationItem.displayName = "PaginationItem";
-var PaginationLink = ({ className, isActive, size = "icon", ...props }) => /* @__PURE__ */ jsx44(
+var PaginationLink = ({ className, isActive, size = "icon", ...props }) => /* @__PURE__ */ jsx43(
   "a",
   {
     "aria-current": isActive ? "page" : void 0,
@@ -2093,7 +2076,7 @@ var PaginationLink = ({ className, isActive, size = "icon", ...props }) => /* @_
   }
 );
 PaginationLink.displayName = "PaginationLink";
-var PaginationPrevious = ({ className, ...props }) => /* @__PURE__ */ jsxs23(
+var PaginationPrevious = ({ className, ...props }) => /* @__PURE__ */ jsxs22(
   PaginationLink,
   {
     "aria-label": "Go to previous page",
@@ -2101,13 +2084,13 @@ var PaginationPrevious = ({ className, ...props }) => /* @__PURE__ */ jsxs23(
     className: cn("gap-1 pl-2.5", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx44(ChevronLeft, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx44("span", { children: "Previous" })
+      /* @__PURE__ */ jsx43(ChevronLeft, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx43("span", { children: "Previous" })
     ]
   }
 );
 PaginationPrevious.displayName = "PaginationPrevious";
-var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ jsxs23(
+var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ jsxs22(
   PaginationLink,
   {
     "aria-label": "Go to next page",
@@ -2115,32 +2098,32 @@ var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ jsxs23(
     className: cn("gap-1 pr-2.5", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx44("span", { children: "Next" }),
-      /* @__PURE__ */ jsx44(ChevronRight5, { className: "h-4 w-4" })
+      /* @__PURE__ */ jsx43("span", { children: "Next" }),
+      /* @__PURE__ */ jsx43(ChevronRight5, { className: "h-4 w-4" })
     ]
   }
 );
 PaginationNext.displayName = "PaginationNext";
-var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs23(
+var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs22(
   "span",
   {
     "aria-hidden": true,
     className: cn("flex h-9 w-9 items-center justify-center", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx44(MoreHorizontal2, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx44("span", { className: "sr-only", children: "More pages" })
+      /* @__PURE__ */ jsx43(MoreHorizontal2, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "More pages" })
     ]
   }
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
 // src/components/command.tsx
-import * as React38 from "react";
-import { Command as CommandPrimitive } from "cmdk";
+import * as React37 from "react";
+import { Command as CommandPrimitive, useCommandState } from "cmdk";
 import { Search } from "lucide-react";
-import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
-var Command = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+import { Fragment as Fragment2, jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
+var Command = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx44(
   CommandPrimitive,
   {
     ref,
@@ -2152,10 +2135,61 @@ var Command = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Command.displayName = CommandPrimitive.displayName;
-var CommandDialog = ({ children, ...props }) => /* @__PURE__ */ jsx45(Dialog, { ...props, children: /* @__PURE__ */ jsx45(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx45(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-text-tertiary [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
-var CommandInput = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs24("div", { className: "flex items-center border-b border-border-subtle px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx45(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx45(
+var KeyCap = ({ children }) => /* @__PURE__ */ jsx44("kbd", { className: "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-border-default bg-bg-elevated px-1 font-sans text-xs text-text-secondary", children });
+var CommandKeyHints = () => /* @__PURE__ */ jsx44("div", { className: "flex items-center gap-4 border-t border-border-subtle bg-bg-sunken px-3 py-2 text-xs text-text-tertiary", children: [[["\u2191", "\u2193"], "to navigate"], [["\u21B5"], "to select"]].map(([keys, verb]) => /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1.5", children: [
+  /* @__PURE__ */ jsx44("span", { className: "flex items-center gap-1", children: keys.map((key) => /* @__PURE__ */ jsx44(KeyCap, { children: key }, key)) }),
+  " ",
+  verb
+] }, verb)) });
+var CommandKeyHintsSlot = ({ children }) => {
+  const count = useCommandState((state) => state.filtered.count);
+  return count > 0 ? /* @__PURE__ */ jsx44(Fragment2, { children }) : null;
+};
+var CommandDialog = ({
+  children,
+  groups,
+  placeholder,
+  empty,
+  keyHints = /* @__PURE__ */ jsx44(CommandKeyHints, {}),
+  shortcut = false,
+  open,
+  onOpenChange,
+  ...props
+}) => {
+  React37.useEffect(() => {
+    if (!shortcut || !onOpenChange) return;
+    const onKey = (e) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        onOpenChange(!open);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [shortcut, open, onOpenChange]);
+  return /* @__PURE__ */ jsx44(Dialog, { open, onOpenChange, ...props, children: /* @__PURE__ */ jsx44(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx44(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-text-tertiary [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: groups ? /* @__PURE__ */ jsxs23(Fragment2, { children: [
+    /* @__PURE__ */ jsx44(CommandInput, { placeholder }),
+    /* @__PURE__ */ jsxs23(CommandList, { className: "max-h-[420px]", children: [
+      /* @__PURE__ */ jsx44(CommandEmpty, { children: empty }),
+      groups.map((group) => /* @__PURE__ */ jsx44(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsx44(
+        CommandItem,
+        {
+          value: item.value ?? [group.heading, item.sub, item.label].filter(Boolean).join(" "),
+          mark: item.mark,
+          sub: item.sub,
+          className: item.sub ? void 0 : "items-center",
+          onSelect: item.onSelect,
+          children: item.label
+        },
+        item.id ?? `${group.heading}:${String(item.label)}`
+      )) }, group.heading))
+    ] }),
+    /* @__PURE__ */ jsx44(CommandKeyHintsSlot, { children: keyHints })
+  ] }) : children }) }) });
+};
+var CommandInput = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs23("div", { className: "flex items-center border-b border-border-subtle px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx44(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx44(
     CommandPrimitive.Input,
     {
       ref,
@@ -2168,16 +2202,16 @@ var CommandInput = React38.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+var CommandList = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx44(
   CommandPrimitive.List,
   {
     ref,
-    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden pb-2", className),
     ...props
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React38.forwardRef((props, ref) => /* @__PURE__ */ jsx45(
+var CommandEmpty = React37.forwardRef((props, ref) => /* @__PURE__ */ jsx44(
   CommandPrimitive.Empty,
   {
     ref,
@@ -2186,7 +2220,7 @@ var CommandEmpty = React38.forwardRef((props, ref) => /* @__PURE__ */ jsx45(
   }
 ));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+var CommandGroup = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx44(
   CommandPrimitive.Group,
   {
     ref,
@@ -2198,7 +2232,7 @@ var CommandGroup = React38.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+var CommandSeparator = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx44(
   CommandPrimitive.Separator,
   {
     ref,
@@ -2207,29 +2241,29 @@ var CommandSeparator = React38.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React38.forwardRef(
-  ({ className, mark, sub, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
+var CommandItem = React37.forwardRef(
+  ({ className, mark, sub, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
     CommandPrimitive.Item,
     {
       ref,
       className: cn(
-        "relative flex cursor-default select-none gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-bg-secondary data-[selected=true]:text-text-primary",
+        "relative flex cursor-default select-none gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-[var(--hov-bg)] data-[selected=true]:text-text-primary",
         mark ? "items-start" : "items-center",
         className
       ),
       ...props,
       children: [
-        mark ? /* @__PURE__ */ jsx45("span", { className: "shrink-0", children: mark }) : null,
-        sub ? /* @__PURE__ */ jsxs24("span", { className: "flex min-w-0 flex-col", children: [
-          /* @__PURE__ */ jsx45("span", { className: "truncate", children }),
-          /* @__PURE__ */ jsx45("span", { className: "truncate text-xs text-text-tertiary", children: sub })
+        mark ? /* @__PURE__ */ jsx44("span", { className: "shrink-0", children: mark }) : null,
+        sub ? /* @__PURE__ */ jsxs23("span", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsx44("span", { className: "truncate", children }),
+          /* @__PURE__ */ jsx44("span", { className: "truncate text-xs text-text-tertiary", children: sub })
         ] }) : children
       ]
     }
   )
 );
 CommandItem.displayName = CommandPrimitive.Item.displayName;
-var CommandShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx45(
+var CommandShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx44(
   "span",
   {
     className: cn("ml-auto text-xs tracking-widest text-text-tertiary", className),
@@ -2239,12 +2273,12 @@ var CommandShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx45(
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/navigation-menu.tsx
-import * as React39 from "react";
+import * as React38 from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva as cva6 } from "class-variance-authority";
 import { ChevronDown as ChevronDown4 } from "lucide-react";
-import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
-var NavigationMenu = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs25(
+import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
+var NavigationMenu = React38.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
   NavigationMenuPrimitive.Root,
   {
     ref,
@@ -2252,12 +2286,12 @@ var NavigationMenu = React39.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx46(NavigationMenuViewport, {})
+      /* @__PURE__ */ jsx45(NavigationMenuViewport, {})
     ]
   }
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var NavigationMenuList = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   NavigationMenuPrimitive.List,
   {
     ref,
@@ -2268,9 +2302,9 @@ 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 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"
+  "group inline-flex h-10 w-max cursor-pointer 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(
+var NavigationMenuTrigger = React38.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
   NavigationMenuPrimitive.Trigger,
   {
     ref,
@@ -2279,7 +2313,7 @@ var NavigationMenuTrigger = React39.forwardRef(({ className, children, ...props
     children: [
       children,
       " ",
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx45(
         ChevronDown4,
         {
           className: "relative top-[1px] ml-1 h-4 w-4 transition duration-200 group-data-[state=open]:rotate-180",
@@ -2290,7 +2324,7 @@ var NavigationMenuTrigger = React39.forwardRef(({ className, children, ...props
   }
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var NavigationMenuContent = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   NavigationMenuPrimitive.Content,
   {
     ref,
@@ -2303,7 +2337,7 @@ var NavigationMenuContent = React39.forwardRef(({ className, ...props }, ref) =>
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
-var NavigationMenuViewport = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx46(
+var NavigationMenuViewport = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx45(
   NavigationMenuPrimitive.Viewport,
   {
     ref,
@@ -2315,7 +2349,7 @@ var NavigationMenuViewport = React39.forwardRef(({ className, ...props }, ref) =
   }
 ) }));
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var NavigationMenuIndicator = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   NavigationMenuPrimitive.Indicator,
   {
     ref,
@@ -2324,13 +2358,13 @@ var NavigationMenuIndicator = React39.forwardRef(({ className, ...props }, ref)
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx46("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border-subtle shadow-md" })
+    children: /* @__PURE__ */ jsx45("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border-subtle shadow-md" })
   }
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 
 // src/hooks/useTheme.ts
-import { useEffect as useEffect2, useState as useState2, useCallback } from "react";
+import { useEffect as useEffect3, useState as useState2, useCallback } from "react";
 var STORAGE_KEY = "lessly_theme";
 var THEMES = ["light", "dark", "system"];
 function parseStoredTheme(stored) {
@@ -2364,10 +2398,10 @@ function useTheme() {
     applyTheme(resolveTheme(newTheme));
     window.dispatchEvent(new CustomEvent("lessly-theme-change", { detail: newTheme }));
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     applyTheme(resolvedTheme);
   }, [resolvedTheme]);
-  useEffect2(() => {
+  useEffect3(() => {
     const handler = (e) => {
       const newTheme = e.detail;
       setThemeState(newTheme);
@@ -2375,7 +2409,7 @@ function useTheme() {
     window.addEventListener("lessly-theme-change", handler);
     return () => window.removeEventListener("lessly-theme-change", handler);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (theme !== "system") return;
     const mql = window.matchMedia("(prefers-color-scheme: light)");
     const handler = () => applyTheme(getSystemTheme());
@@ -2387,10 +2421,10 @@ function useTheme() {
 
 // src/components/sonner.tsx
 import { Toaster as SonnerToaster, toast } from "sonner";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var Toaster = ({ ...props }) => {
   const { resolvedTheme } = useTheme();
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx46(
     SonnerToaster,
     {
       theme: resolvedTheme,
@@ -2410,6 +2444,20 @@ var Toaster = ({ ...props }) => {
 
 // src/components/theme-toggle.tsx
 import { Sun, Moon } from "lucide-react";
+
+// src/components/top-bar-utilities.tsx
+import * as React39 from "react";
+import { jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
+var topBarMarkClass = "relative flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-text-secondary transition-colors duration-fast hover:bg-[var(--hov-bg)] hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus [&>svg]:size-[18px]";
+var TopBarUtilities = React39.forwardRef(
+  ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx47("div", { ref, className: cn("flex items-center gap-1", className), ...props, children: items.map(({ name, icon, onClick }) => /* @__PURE__ */ jsxs25(Tooltip, { children: [
+    /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47("button", { type: "button", className: topBarMarkClass, "aria-label": name, onClick, children: icon }) }),
+    /* @__PURE__ */ jsx47(TooltipContent, { children: name })
+  ] }, name)) })
+);
+TopBarUtilities.displayName = "TopBarUtilities";
+
+// src/components/theme-toggle.tsx
 import { jsx as jsx48 } from "react/jsx-runtime";
 var icons = {
   light: Sun,
@@ -2423,11 +2471,12 @@ function ThemeToggle() {
   return /* @__PURE__ */ jsx48(
     "button",
     {
+      type: "button",
       onClick: () => setTheme(next),
-      className: "p-2 rounded-lg text-text-secondary hover:bg-bg-secondary transition-colors duration-fast",
+      className: topBarMarkClass,
       "aria-label": label,
       title: label,
-      children: /* @__PURE__ */ jsx48(Icon, { className: "w-4 h-4" })
+      children: /* @__PURE__ */ jsx48(Icon, {})
     }
   );
 }
@@ -3016,7 +3065,7 @@ var toneFromDirection = {
   neutral: "neutral"
 };
 var StatCard = React48.forwardRef(
-  ({ label, value, delta, hint, sub, icon: Icon, className, ...props }, ref) => {
+  ({ label, value, delta, hint, sub, icon: Icon, trend, className, ...props }, ref) => {
     const direction = delta?.direction ?? "neutral";
     const tone = delta?.tone ?? toneFromDirection[direction];
     const DeltaIcon = directionIcons[direction];
@@ -3025,14 +3074,15 @@ var StatCard = React48.forwardRef(
       "div",
       {
         ref,
-        className: cn("rounded-xl border border-border-subtle bg-bg-surface p-5", className),
+        "data-slot": "stat-card",
+        className: cn("rounded-xl border border-border-subtle bg-bg-overlay p-5", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between gap-2", children: [
             /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-1.5", children: [
               /* @__PURE__ */ jsx58("span", { className: "text-xs font-medium text-text-tertiary", children: label }),
               hint && /* @__PURE__ */ jsx58(TooltipProvider, { children: /* @__PURE__ */ jsxs33(Tooltip, { children: [
-                /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58("button", { type: "button", "aria-label": "More info", className: "inline-flex cursor-help text-icon-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus rounded-sm", children: /* @__PURE__ */ jsx58(Info2, { className: "size-3.5", "aria-hidden": "true" }) }) }),
+                /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58("button", { type: "button", "aria-label": "More info", className: "inline-flex cursor-pointer text-icon-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus rounded-sm", children: /* @__PURE__ */ jsx58(Info2, { className: "size-3.5", "aria-hidden": "true" }) }) }),
                 /* @__PURE__ */ jsx58(TooltipContent, { children: hint })
               ] }) })
             ] }),
@@ -3045,7 +3095,8 @@ var StatCard = React48.forwardRef(
               delta.value
             ] }),
             sub && /* @__PURE__ */ jsx58("span", { className: "text-text-tertiary", children: sub })
-          ] })
+          ] }),
+          trend !== void 0 && /* @__PURE__ */ jsx58("div", { "data-slot": "stat-card-trend", className: "mt-3 min-h-10", children: trend })
         ]
       }
     );
@@ -3063,7 +3114,7 @@ import { Fingerprint, Loader2 } from "lucide-react";
 import { jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
 var DEFAULT_METHODS = ["passkey", "code"];
 var ATTEMPT_GAP_MS = 500;
-var FACTOR_SWITCH = "w-fit rounded-sm text-sm text-text-secondary underline-offset-2 hover:text-text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:pointer-events-none disabled:opacity-50";
+var FACTOR_SWITCH = "w-fit cursor-pointer rounded-sm text-sm text-text-secondary underline-offset-2 hover:text-text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:pointer-events-none disabled:opacity-50";
 var StepUpChallenge = React49.forwardRef((props, ref) => {
   const {
     methods,
@@ -3359,24 +3410,31 @@ function ConfirmDialog({
 }
 
 // src/components/user-menu.tsx
+import * as React51 from "react";
 import { ChevronsUpDown } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
-function UserMenu({ user, items, collapsed = false, align = "start" }) {
+import { Fragment as Fragment3, jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
+function UserMenu({ user, items, collapsed = false, tooltip = true, align = "start" }) {
+  const openedByPointer = React51.useRef(false);
   const secondLine = user.subtitle ?? user.email;
   const avatar = /* @__PURE__ */ jsx61(PersonAvatar, { name: user.name, id: user.id, src: user.avatarUrl, size: "sm" });
-  const trigger = collapsed ? /* @__PURE__ */ jsx61(
-    "button",
-    {
-      type: "button",
-      "aria-label": user.name,
-      className: "rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-      children: avatar
-    }
+  const trigger = collapsed ? (
+    // The plate every other mark in a top bar gets, drawn outside the avatar instead of behind it:
+    // a round mark fills its own box, so a background under one is a background nobody sees, and
+    // this trigger rested with no hover at all beside four icon buttons that all had one.
+    /* @__PURE__ */ jsx61(
+      "button",
+      {
+        type: "button",
+        "aria-label": user.name,
+        className: "cursor-pointer rounded-full ring-0 ring-bg-secondary transition-[box-shadow] duration-fast hover:ring-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+        children: avatar
+      }
+    )
   ) : /* @__PURE__ */ jsxs36(
     "button",
     {
       type: "button",
-      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",
+      className: "flex w-full cursor-pointer 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: [
@@ -3387,9 +3445,21 @@ function UserMenu({ user, items, collapsed = false, align = "start" }) {
       ]
     }
   );
-  const menuTrigger = /* @__PURE__ */ jsx61(DropdownMenuTrigger, { asChild: true, children: trigger });
+  const menuTrigger = /* @__PURE__ */ jsx61(
+    DropdownMenuTrigger,
+    {
+      asChild: true,
+      onPointerDown: () => {
+        openedByPointer.current = true;
+      },
+      onKeyDown: () => {
+        openedByPointer.current = false;
+      },
+      children: trigger
+    }
+  );
   const menu = /* @__PURE__ */ jsxs36(DropdownMenu, { children: [
-    collapsed ? /* @__PURE__ */ jsx61(TooltipProvider, { children: /* @__PURE__ */ jsxs36(Tooltip, { children: [
+    collapsed && tooltip ? /* @__PURE__ */ jsx61(TooltipProvider, { children: /* @__PURE__ */ jsxs36(Tooltip, { children: [
       /* @__PURE__ */ jsx61(TooltipTrigger, { asChild: true, children: menuTrigger }),
       /* @__PURE__ */ jsx61(TooltipContent, { side: "right", children: user.name })
     ] }) }) : menuTrigger,
@@ -3398,6 +3468,9 @@ function UserMenu({ user, items, collapsed = false, align = "start" }) {
       {
         align,
         sideOffset: 6,
+        onCloseAutoFocus: (e) => {
+          if (openedByPointer.current) e.preventDefault();
+        },
         className: "flex w-[var(--radix-dropdown-menu-trigger-width)] min-w-56 flex-col gap-px rounded-xl border-border-subtle bg-[var(--menu-bg)] p-1 shadow-(--menu-shadow)",
         children: [
           /* @__PURE__ */ jsxs36(DropdownMenuLabel, { className: "px-2 pt-1.5 pb-1 text-xs font-medium text-text-tertiary", children: [
@@ -3407,7 +3480,7 @@ function UserMenu({ user, items, collapsed = false, align = "start" }) {
           /* @__PURE__ */ jsx61(DropdownMenuSeparator, { className: "mx-0 shrink-0" }),
           items.map((item, i) => {
             const Icon = item.icon;
-            const content = /* @__PURE__ */ jsxs36(Fragment2, { children: [
+            const content = /* @__PURE__ */ jsxs36(Fragment3, { children: [
               Icon && /* @__PURE__ */ jsx61(Icon, { className: "size-4", "aria-hidden": "true" }),
               item.label
             ] });
@@ -3433,7 +3506,7 @@ function UserMenu({ user, items, collapsed = false, align = "start" }) {
 }
 
 // src/components/extension-icon.tsx
-import * as React51 from "react";
+import * as React52 from "react";
 import * as LucideIcons from "lucide-react";
 import { Puzzle } from "lucide-react";
 import { jsx as jsx62 } from "react/jsx-runtime";
@@ -3461,7 +3534,7 @@ function warnUnknownIconOnce(name) {
   warnedUnknownIcons.add(name);
   console.warn(`[@lessly/ui] ExtensionIcon: unknown icon "${name}" \u2014 falling back to Puzzle.`);
 }
-var ExtensionIcon = React51.forwardRef(
+var ExtensionIcon = React52.forwardRef(
   ({ name, ...props }, ref) => {
     const Icon = resolveIcon(name);
     if (!Icon) {
@@ -3474,9 +3547,9 @@ var ExtensionIcon = React51.forwardRef(
 ExtensionIcon.displayName = "ExtensionIcon";
 
 // src/components/icon-hint.tsx
-import * as React52 from "react";
+import * as React53 from "react";
 import { jsx as jsx63, jsxs as jsxs37 } from "react/jsx-runtime";
-var IconHint = React52.forwardRef(
+var IconHint = React53.forwardRef(
   ({ children, label, side = "top", align = "center", className, ...props }, ref) => {
     if (label.trim().length === 0) {
       if (process.env.NODE_ENV !== "production") {
@@ -3523,9 +3596,9 @@ var IconHint = React52.forwardRef(
 IconHint.displayName = "IconHint";
 
 // src/components/decorative-icon.tsx
-import * as React53 from "react";
+import * as React54 from "react";
 import { jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
-var DecorativeIcon = React53.forwardRef(
+var DecorativeIcon = React54.forwardRef(
   ({ children, label, side = "top", align = "center", className, ...props }, ref) => {
     if (label.trim().length === 0) {
       if (process.env.NODE_ENV !== "production") {
@@ -3571,8 +3644,8 @@ var DecorativeIcon = React53.forwardRef(
 DecorativeIcon.displayName = "DecorativeIcon";
 
 // src/components/image-cropper.tsx
-import * as React54 from "react";
-import { Fragment as Fragment3, jsx as jsx65, jsxs as jsxs39 } from "react/jsx-runtime";
+import * as React55 from "react";
+import { Fragment as Fragment4, jsx as jsx65, jsxs as jsxs39 } from "react/jsx-runtime";
 var FALLBACK_STAGE_W = 360;
 var FALLBACK_STAGE_H = 270;
 var STEP = 8;
@@ -3605,7 +3678,7 @@ var MASK_CLASS = {
   circle: "rounded-full"
 };
 var clampTo = (value, min, max) => Math.min(Math.max(value, min), max);
-var ImageCropper = React54.forwardRef(
+var ImageCropper = React55.forwardRef(
   ({
     src,
     shape = "square",
@@ -3625,21 +3698,21 @@ var ImageCropper = React54.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [nat, setNat] = React54.useState(null);
-    const [error, setError] = React54.useState(null);
-    const [focused, setFocused] = React54.useState(false);
-    const [stage, setStage] = React54.useState({ w: FALLBACK_STAGE_W, h: FALLBACK_STAGE_H });
-    const [crop, setCrop] = React54.useState({ x: 0, y: 0, size: 0 });
-    const imgRef = React54.useRef(null);
-    const stageRef = React54.useRef(null);
-    const framed = React54.useRef(false);
-    const inset = React54.useRef({ left: 0, top: 0 });
-    React54.useEffect(() => {
+    const [nat, setNat] = React55.useState(null);
+    const [error, setError] = React55.useState(null);
+    const [focused, setFocused] = React55.useState(false);
+    const [stage, setStage] = React55.useState({ w: FALLBACK_STAGE_W, h: FALLBACK_STAGE_H });
+    const [crop, setCrop] = React55.useState({ x: 0, y: 0, size: 0 });
+    const imgRef = React55.useRef(null);
+    const stageRef = React55.useRef(null);
+    const framed = React55.useRef(false);
+    const inset = React55.useRef({ left: 0, top: 0 });
+    React55.useEffect(() => {
       framed.current = false;
       setNat(null);
       setError(null);
     }, [src]);
-    React54.useLayoutEffect(() => {
+    React55.useLayoutEffect(() => {
       const el = stageRef.current;
       if (!el) return void 0;
       const read = (entry) => {
@@ -3665,13 +3738,13 @@ var ImageCropper = React54.forwardRef(
     const drawH = nat ? nat.h * fit : stage.h;
     const padX = (stage.w - drawW) / 2;
     const padY = (stage.h - drawH) / 2;
-    React54.useEffect(() => {
+    React55.useEffect(() => {
       if (!nat || framed.current) return;
       framed.current = true;
       const size = Math.min(nat.w, nat.h);
       setCrop({ x: (nat.w - size) / 2, y: (nat.h - size) / 2, size });
     }, [nat]);
-    const clampCrop = React54.useCallback(
+    const clampCrop = React55.useCallback(
       (x, y, size) => {
         if (!nat) return { x, y, size };
         const max = Math.min(nat.w, nat.h);
@@ -3681,8 +3754,8 @@ var ImageCropper = React54.forwardRef(
       },
       [nat, fit, minCropSize]
     );
-    const moving = React54.useRef(null);
-    const resizing = React54.useRef(null);
+    const moving = React55.useRef(null);
+    const resizing = React55.useRef(null);
     const onMoveDown = (e) => {
       e.target.setPointerCapture(e.pointerId);
       moving.current = { px: e.clientX, py: e.clientY, cx: crop.x, cy: crop.y };
@@ -3831,7 +3904,7 @@ var ImageCropper = React54.forwardRef(
                 children: errorMessage
               }
             ),
-            nat && error !== "load" && /* @__PURE__ */ jsxs39(Fragment3, { children: [
+            nat && error !== "load" && /* @__PURE__ */ jsxs39(Fragment4, { children: [
               /* @__PURE__ */ jsx65(
                 "div",
                 {
@@ -3948,7 +4021,7 @@ function ImageCropDialog({
 ImageCropDialog.displayName = "ImageCropDialog";
 
 // src/components/image-upload.tsx
-import * as React55 from "react";
+import * as React56 from "react";
 import { Image as ImageIcon } from "lucide-react";
 import { jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";
 var PREVIEW_BOX = {
@@ -3965,7 +4038,7 @@ function formatSize(bytes) {
   if (bytes >= 1024) return `${Math.floor(bytes / 1024)} KB`;
   return `${bytes} B`;
 }
-var ImageUpload = React55.forwardRef(
+var ImageUpload = React56.forwardRef(
   ({
     value,
     onChange,
@@ -3988,11 +4061,11 @@ var ImageUpload = React55.forwardRef(
     className,
     ...props
   }, ref) => {
-    const inputRef = React55.useRef(null);
-    const [picked, setPicked] = React55.useState(null);
-    const [cropOpen, setCropOpen] = React55.useState(false);
-    const [error, setError] = React55.useState(null);
-    const pickSeq = React55.useRef(0);
+    const inputRef = React56.useRef(null);
+    const [picked, setPicked] = React56.useState(null);
+    const [cropOpen, setCropOpen] = React56.useState(false);
+    const [error, setError] = React56.useState(null);
+    const pickSeq = React56.useRef(0);
     const refuse = (message) => {
       setError(message);
       onError?.(message);
@@ -4116,71 +4189,11 @@ var ImageUpload = React55.forwardRef(
 );
 ImageUpload.displayName = "ImageUpload";
 
-// src/components/entity-row.tsx
-import * as React56 from "react";
-import { Slot as Slot3 } from "@radix-ui/react-slot";
-import { ChevronDown as ChevronDown5, ChevronRight as ChevronRight7 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
-var rowClass = "flex w-full items-center gap-3 px-4 py-2.5 text-left";
-var plateClass = "relative isolate after:pointer-events-none after:absolute after:inset-x-1.5 after:inset-y-1 after:-z-10 after:rounded-lg hover:after:bg-bg-elevated disabled:hover:after:bg-transparent focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-border-focus";
-var stackClass = "flex-col items-stretch gap-1";
-var caretMotion = {
-  transitionDuration: "var(--motion-duration-normal)",
-  transitionTimingFunction: "var(--motion-easing-standard)"
-};
-var EntityRow = React56.forwardRef(function EntityRow2({ mark, title, badge, sub, meta, summary, opens = "page", expanded, asChild = false, className, children, ...props }, ref) {
-  if (process.env.NODE_ENV !== "production" && opens === "disclosure" && expanded === void 0) {
-    console.warn(
-      '[EntityRow] `opens="disclosure"` needs `expanded`: it draws the caret AND sets `aria-expanded`, and without it the row renders a caret that never turns and states no state at all. Pass `expanded={open}`, or use `opens="page"` / `opens="modal"`.'
-    );
-  }
-  const line = /* @__PURE__ */ jsxs42(Fragment4, { children: [
-    mark,
-    /* @__PURE__ */ jsxs42("span", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs42("span", { className: "flex min-h-5 items-center gap-2", children: [
-        /* @__PURE__ */ jsx68("span", { className: cn("truncate text-sm text-text-primary", opens !== "none" && "font-medium"), children: title }),
-        badge != null && /* @__PURE__ */ jsx68("span", { className: "flex h-5 shrink-0 items-center", children: badge })
-      ] }),
-      sub != null && /* @__PURE__ */ jsx68("span", { className: "block truncate text-xs text-text-secondary", children: sub })
-    ] }),
-    meta != null && /* @__PURE__ */ jsx68("span", { className: "shrink-0 text-sm text-text-secondary", children: meta }),
-    opens !== "none" && /* @__PURE__ */ jsxs42("span", { className: "flex size-4 shrink-0 items-center justify-center", children: [
-      opens === "page" && /* @__PURE__ */ jsx68(ChevronRight7, { className: "size-4 text-text-tertiary", "aria-hidden": true }),
-      opens === "disclosure" && /* @__PURE__ */ jsx68(
-        ChevronDown5,
-        {
-          className: cn(
-            "size-4 shrink-0 text-text-tertiary transition-transform",
-            expanded ? "rotate-180" : "rotate-0"
-          ),
-          style: caretMotion,
-          "aria-hidden": true
-        }
-      )
-    ] })
-  ] });
-  const content = summary == null ? line : /* @__PURE__ */ jsxs42(Fragment4, { children: [
-    /* @__PURE__ */ jsx68("span", { className: "flex w-full items-center gap-3", children: line }),
-    /* @__PURE__ */ jsx68("span", { className: "block w-full text-xs text-text-secondary", children: summary })
-  ] });
-  const classes = cn(rowClass, opens !== "none" && plateClass, summary != null && stackClass, className);
-  const stateProps = opens === "disclosure" ? { "aria-expanded": expanded } : void 0;
-  if (opens === "none") {
-    return /* @__PURE__ */ jsx68("div", { ...props, ref, className: classes, children: content });
-  }
-  if (asChild) {
-    const child = React56.Children.only(children);
-    return /* @__PURE__ */ jsx68(Slot3, { ...props, ref, className: classes, ...stateProps, children: React56.cloneElement(child, stateProps, content) });
-  }
-  return /* @__PURE__ */ jsx68("button", { ...props, ref, type: "button", className: classes, ...stateProps, children: content });
-});
-EntityRow.displayName = "EntityRow";
-
 // src/components/back-link.tsx
 import * as React57 from "react";
 import { ArrowLeft as ArrowLeft2 } from "lucide-react";
 import { Slottable } from "@radix-ui/react-slot";
-import { jsx as jsx69, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
 var SLOTTED_GLYPH = "inline-flex shrink-0 items-center justify-center [&>svg]:size-3.5";
 var BackLink = React57.forwardRef(
   ({ parent, asChild = false, children, className, onClick, ...props }, ref) => {
@@ -4192,23 +4205,23 @@ var BackLink = React57.forwardRef(
       className: cn("w-fit -ml-2", className)
     };
     if (slotted) {
-      return /* @__PURE__ */ jsxs43(Button, { ...props, ...shell, onClick, ref, asChild: true, children: [
-        /* @__PURE__ */ jsx69(Slottable, { children }),
-        /* @__PURE__ */ jsx69("span", { className: SLOTTED_GLYPH, "aria-hidden": true, children: /* @__PURE__ */ jsx69(ArrowLeft2, {}) }),
+      return /* @__PURE__ */ jsxs42(Button, { ...props, ...shell, onClick, ref, asChild: true, children: [
+        /* @__PURE__ */ jsx68(Slottable, { children }),
+        /* @__PURE__ */ jsx68("span", { className: SLOTTED_GLYPH, "aria-hidden": true, children: /* @__PURE__ */ jsx68(ArrowLeft2, {}) }),
         parent
       ] });
     }
-    return /* @__PURE__ */ jsx69(Button, { ...props, ...shell, onClick, ref, icon: /* @__PURE__ */ jsx69(ArrowLeft2, {}), children: parent });
+    return /* @__PURE__ */ jsx68(Button, { ...props, ...shell, onClick, ref, icon: /* @__PURE__ */ jsx68(ArrowLeft2, {}), children: parent });
   }
 );
 BackLink.displayName = "BackLink";
 
 // src/components/card-note.tsx
 import * as React58 from "react";
-import { Lock } from "lucide-react";
-import { jsx as jsx70, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Lock as Lock2 } from "lucide-react";
+import { jsx as jsx69, jsxs as jsxs43 } from "react/jsx-runtime";
 var CardNote = React58.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs44(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs43(
     "p",
     {
       ...props,
@@ -4218,7 +4231,7 @@ var CardNote = React58.forwardRef(
         className
       ),
       children: [
-        /* @__PURE__ */ jsx70(Lock, { className: "mt-0.5 size-3 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsx69(Lock2, { className: "mt-0.5 size-3 shrink-0", "aria-hidden": true }),
         children
       ]
     }
@@ -4229,10 +4242,10 @@ CardNote.displayName = "CardNote";
 // src/components/remove-button.tsx
 import * as React59 from "react";
 import { X as X2 } from "lucide-react";
-import { jsx as jsx71, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs44 } from "react/jsx-runtime";
 var RemoveButton = React59.forwardRef(
   ({ label, size = "sm", side = "top", className, ...props }, ref) => {
-    const button = /* @__PURE__ */ jsx71(
+    const button = /* @__PURE__ */ jsx70(
       Button,
       {
         ...props,
@@ -4242,13 +4255,13 @@ var RemoveButton = React59.forwardRef(
         "aria-describedby": void 0,
         variant: "destructive-ghost",
         size,
-        icon: /* @__PURE__ */ jsx71(X2, {}),
+        icon: /* @__PURE__ */ jsx70(X2, {}),
         className: cn("shrink-0", className)
       }
     );
-    return /* @__PURE__ */ jsxs45(Tooltip, { children: [
-      /* @__PURE__ */ jsx71(TooltipTrigger, { asChild: true, children: props.disabled ? /* @__PURE__ */ jsx71("span", { className: "inline-flex shrink-0", children: button }) : button }),
-      /* @__PURE__ */ jsx71(TooltipContent, { side, "aria-hidden": true, children: label })
+    return /* @__PURE__ */ jsxs44(Tooltip, { children: [
+      /* @__PURE__ */ jsx70(TooltipTrigger, { asChild: true, children: props.disabled ? /* @__PURE__ */ jsx70("span", { className: "inline-flex shrink-0", children: button }) : button }),
+      /* @__PURE__ */ jsx70(TooltipContent, { side, "aria-hidden": true, children: label })
     ] });
   }
 );
@@ -4257,7 +4270,7 @@ RemoveButton.displayName = "RemoveButton";
 // src/components/grant-role-picker.tsx
 import * as React60 from "react";
 import { Check as Check8 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx72, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx71, jsxs as jsxs45 } from "react/jsx-runtime";
 var WEIGHT_TONE = {
   faint: "text-text-secondary",
   normal: "text-text-primary",
@@ -4294,15 +4307,15 @@ var GrantRolePicker = React60.forwardRef(
     const rungs = !readOnly && !carried && pickable.length > 0;
     const removeWords = grantRemoveLabel(void 0, notInForce !== void 0);
     const valueNote = !current ? notes?.missing : rungs && !pickable.some((r) => r.id === value) ? notes?.aboveCap : void 0;
-    const item = (r) => /* @__PURE__ */ jsxs46(DropdownMenuItem, { onSelect: () => onChange(r.id), className: "items-start gap-2 py-1.5", children: [
-      /* @__PURE__ */ jsx72(Check8, { className: cn("mt-0.5 size-3.5 shrink-0 text-text-primary", r.id !== value && "invisible") }),
-      /* @__PURE__ */ jsxs46("span", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx72("span", { className: cn("text-sm", WEIGHT_TONE[r.weight ?? "normal"]), children: r.name }),
-        r.hint && /* @__PURE__ */ jsx72("span", { className: "text-xs text-text-tertiary", children: r.hint })
+    const item = (r) => /* @__PURE__ */ jsxs45(DropdownMenuItem, { onSelect: () => onChange(r.id), className: "items-start gap-2 py-1.5", children: [
+      /* @__PURE__ */ jsx71(Check8, { className: cn("mt-0.5 size-3.5 shrink-0 text-text-primary", r.id !== value && "invisible") }),
+      /* @__PURE__ */ jsxs45("span", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx71("span", { className: cn("text-sm", WEIGHT_TONE[r.weight ?? "normal"]), children: r.name }),
+        r.hint && /* @__PURE__ */ jsx71("span", { className: "text-xs text-text-tertiary", children: r.hint })
       ] })
     ] }, r.id);
-    return /* @__PURE__ */ jsxs46(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx72(
+    return /* @__PURE__ */ jsxs45(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx71(
         DropdownMenuTrigger,
         {
           ref,
@@ -4311,27 +4324,27 @@ var GrantRolePicker = React60.forwardRef(
           type: "button",
           "aria-label": ariaLabel ? `${ariaLabel}: ${nameOf2(value)}` : void 0,
           className,
-          children: /* @__PURE__ */ jsx72("span", { className: cn("max-w-[10rem] truncate", current ? WEIGHT_TONE[current.weight ?? "normal"] : MISSING_TONE), children: nameOf2(value) })
+          children: /* @__PURE__ */ jsx71("span", { className: cn("max-w-[10rem] truncate", current ? WEIGHT_TONE[current.weight ?? "normal"] : MISSING_TONE), children: nameOf2(value) })
         }
       ),
-      /* @__PURE__ */ jsxs46(DropdownMenuContent, { align, className: "w-64", children: [
-        carried && /* @__PURE__ */ jsx72("div", { className: MENU_STATEMENT, children: `${via} grants this role.` }),
-        valueNote !== void 0 && /* @__PURE__ */ jsx72("div", { className: MENU_STATEMENT, children: valueNote }),
+      /* @__PURE__ */ jsxs45(DropdownMenuContent, { align, className: "w-64", children: [
+        carried && /* @__PURE__ */ jsx71("div", { className: MENU_STATEMENT, children: `${via} grants this role.` }),
+        valueNote !== void 0 && /* @__PURE__ */ jsx71("div", { className: MENU_STATEMENT, children: valueNote }),
         rungs && pickable.filter((r) => !r.group).map(item),
         rungs && // Bands in the order the roles list states them, so a caller decides the order once.
-        [...new Set(pickable.map((r) => r.group).filter((g) => !!g))].map((band) => /* @__PURE__ */ jsxs46(React60.Fragment, { children: [
-          /* @__PURE__ */ jsx72(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsx72(DropdownMenuLabel, { className: "px-2 py-1 text-xs font-medium text-text-tertiary", children: band }),
+        [...new Set(pickable.map((r) => r.group).filter((g) => !!g))].map((band) => /* @__PURE__ */ jsxs45(React60.Fragment, { children: [
+          /* @__PURE__ */ jsx71(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx71(DropdownMenuLabel, { className: "px-2 py-1 text-xs font-medium text-text-tertiary", children: band }),
           pickable.filter((r) => r.group === band).map(item)
         ] }, band)),
-        notInForce && /* @__PURE__ */ jsxs46("div", { className: "px-2 py-1.5 text-xs text-text-tertiary", children: [
-          /* @__PURE__ */ jsx72("span", { className: "line-through", children: nameOf2(notInForce.role) }),
+        notInForce && /* @__PURE__ */ jsxs45("div", { className: "px-2 py-1.5 text-xs text-text-tertiary", children: [
+          /* @__PURE__ */ jsx71("span", { className: "line-through", children: nameOf2(notInForce.role) }),
           " ",
           notInForce.why
         ] }),
-        onRemove && /* @__PURE__ */ jsxs46(Fragment6, { children: [
-          rungs && /* @__PURE__ */ jsx72(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsxs46(
+        onRemove && /* @__PURE__ */ jsxs45(Fragment6, { children: [
+          rungs && /* @__PURE__ */ jsx71(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs45(
             DropdownMenuItem,
             {
               variant: "destructive",
@@ -4339,13 +4352,13 @@ var GrantRolePicker = React60.forwardRef(
               "aria-label": removeDetail ? grantRemoveLabel(removeDetail, notInForce !== void 0) : void 0,
               className: "gap-2 py-1.5",
               children: [
-                rungs && /* @__PURE__ */ jsx72(Check8, { className: "invisible size-3.5 shrink-0" }),
+                rungs && /* @__PURE__ */ jsx71(Check8, { className: "invisible size-3.5 shrink-0" }),
                 removeWords
               ]
             }
           )
         ] }),
-        !carried && !rungs && valueNote === void 0 && !notInForce && !onRemove && notes?.empty !== void 0 && /* @__PURE__ */ jsx72("div", { className: MENU_STATEMENT, children: notes.empty })
+        !carried && !rungs && valueNote === void 0 && !notInForce && !onRemove && notes?.empty !== void 0 && /* @__PURE__ */ jsx71("div", { className: MENU_STATEMENT, children: notes.empty })
       ] })
     ] });
   }
@@ -4354,7 +4367,7 @@ GrantRolePicker.displayName = "GrantRolePicker";
 
 // src/components/grant-row.tsx
 import * as React61 from "react";
-import { jsx as jsx73, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs46 } from "react/jsx-runtime";
 var GrantRow = React61.forwardRef((props, ref) => {
   const {
     name,
@@ -4378,12 +4391,12 @@ var GrantRow = React61.forwardRef((props, ref) => {
   const nameOf2 = (id) => roles.find((r) => r.id === id)?.name ?? missingLabel;
   const picks = stated || readOnly ? void 0 : props.onChange;
   const removes = grantRemoveLabel(removeDetail ?? name, notInForce !== void 0);
-  return /* @__PURE__ */ jsxs47("div", { ref, className: cn("flex items-center justify-between gap-2 px-4 py-2.5", className), children: [
-    /* @__PURE__ */ jsx73("span", { className: "min-w-0 text-sm text-text-primary", children: name }),
+  return /* @__PURE__ */ jsxs46("div", { ref, className: cn("flex items-center justify-between gap-2 px-4 py-2.5", className), children: [
+    /* @__PURE__ */ jsx72("span", { className: "min-w-0 text-sm text-text-primary", children: name }),
     props.actionsInMenu ? (
       // One control, and the row ends at it. The carried case is derived from `via`: the group
       // is what makes the role not this row's to change.
-      /* @__PURE__ */ jsx73(
+      /* @__PURE__ */ jsx72(
         GrantRolePicker,
         {
           value: role,
@@ -4407,8 +4420,8 @@ var GrantRow = React61.forwardRef((props, ref) => {
       // picker at all; an overtaken grant only exists under a group's, so it is the same fact
       // arriving by the other route. A row that picked and also said either would be offering
       // rungs that change nothing.
-      /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx73(
+      /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx72(
           GrantRolePicker,
           {
             value: role,
@@ -4420,29 +4433,29 @@ var GrantRow = React61.forwardRef((props, ref) => {
             missingLabel
           }
         ),
-        onRemove ? /* @__PURE__ */ jsx73(RemoveButton, { label: removes, onClick: onRemove }) : reserveRemove ? (
+        onRemove ? /* @__PURE__ */ jsx72(RemoveButton, { label: removes, onClick: onRemove }) : reserveRemove ? (
           // Spacing, not a control: `RemoveButton`'s list-row box is 36px, so a row with nothing
           // to remove holds the same 36px and the card keeps one right edge.
-          /* @__PURE__ */ jsx73("span", { "aria-hidden": true, className: "w-9 shrink-0" })
+          /* @__PURE__ */ jsx72("span", { "aria-hidden": true, className: "w-9 shrink-0" })
         ) : null
       ] })
-    ) : /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-1.5 pr-2", children: [
-        /* @__PURE__ */ jsxs47("div", { className: "flex shrink-0 flex-col items-end", children: [
-          /* @__PURE__ */ jsx73("span", { className: cn("text-sm", held ? WEIGHT_TONE[held.weight ?? "normal"] : MISSING_TONE), children: nameOf2(role) }),
-          via && /* @__PURE__ */ jsxs47("span", { className: "text-xs text-text-tertiary", children: [
+    ) : /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-1.5 pr-2", children: [
+        /* @__PURE__ */ jsxs46("div", { className: "flex shrink-0 flex-col items-end", children: [
+          /* @__PURE__ */ jsx72("span", { className: cn("text-sm", held ? WEIGHT_TONE[held.weight ?? "normal"] : MISSING_TONE), children: nameOf2(role) }),
+          via && /* @__PURE__ */ jsxs46("span", { className: "text-xs text-text-tertiary", children: [
             "via ",
             via
           ] }),
-          notInForce && /* @__PURE__ */ jsxs47("span", { className: "text-right text-xs text-text-tertiary", children: [
-            /* @__PURE__ */ jsx73("span", { className: "line-through", children: nameOf2(notInForce.role) }),
+          notInForce && /* @__PURE__ */ jsxs46("span", { className: "text-right text-xs text-text-tertiary", children: [
+            /* @__PURE__ */ jsx72("span", { className: "line-through", children: nameOf2(notInForce.role) }),
             " ",
             notInForce.why
           ] })
         ] }),
-        reserveChevron && /* @__PURE__ */ jsx73("span", { "aria-hidden": true, className: "w-3.5 shrink-0" })
+        reserveChevron && /* @__PURE__ */ jsx72("span", { "aria-hidden": true, className: "w-3.5 shrink-0" })
       ] }),
-      !readOnly && onRemove ? /* @__PURE__ */ jsx73(RemoveButton, { label: removes, onClick: onRemove }) : reserveRemove ? /* @__PURE__ */ jsx73("span", { "aria-hidden": true, className: "w-9 shrink-0" }) : null
+      !readOnly && onRemove ? /* @__PURE__ */ jsx72(RemoveButton, { label: removes, onClick: onRemove }) : reserveRemove ? /* @__PURE__ */ jsx72("span", { "aria-hidden": true, className: "w-9 shrink-0" }) : null
     ] })
   ] });
 });
@@ -4451,9 +4464,9 @@ GrantRow.displayName = "GrantRow";
 // src/components/removable-chip.tsx
 import * as React62 from "react";
 import { X as X3 } from "lucide-react";
-import { jsx as jsx74, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs47 } from "react/jsx-runtime";
 var RemovableChip = React62.forwardRef(
-  ({ label, onRemove, leading, removeLabel, className, ...props }, ref) => /* @__PURE__ */ jsxs48(
+  ({ label, onRemove, leading, removeLabel, className, ...props }, ref) => /* @__PURE__ */ jsxs47(
     "span",
     {
       ref,
@@ -4466,8 +4479,8 @@ var RemovableChip = React62.forwardRef(
       ),
       children: [
         leading,
-        /* @__PURE__ */ jsx74("span", { className: "truncate", children: label }),
-        /* @__PURE__ */ jsx74(
+        /* @__PURE__ */ jsx73("span", { className: "truncate", children: label }),
+        /* @__PURE__ */ jsx73(
           Button,
           {
             type: "button",
@@ -4475,7 +4488,7 @@ var RemovableChip = React62.forwardRef(
             "aria-label": removeLabel ?? `Remove ${label}`,
             variant: "ghost",
             size: "xs",
-            icon: /* @__PURE__ */ jsx74(X3, {}),
+            icon: /* @__PURE__ */ jsx73(X3, {}),
             className: "shrink-0 hover:bg-bg-overlay"
           }
         )
@@ -4518,6 +4531,58 @@ function useFreshHighlight() {
   return { isFresh, markFresh, freshRef, announcer };
 }
 
+// src/components/quick-search-row.tsx
+import { Search as Search2 } from "lucide-react";
+import { jsx as jsx74, jsxs as jsxs48 } from "react/jsx-runtime";
+function QuickSearchRow({
+  onOpen,
+  label = "Quick search",
+  shortcut = "\u2318K",
+  collapsed = false,
+  icon
+}) {
+  const name = shortcut ? `${label} ${shortcut}` : label;
+  if (!collapsed) {
+    return /* @__PURE__ */ jsxs48(
+      "button",
+      {
+        type: "button",
+        onClick: onOpen,
+        "aria-label": name,
+        className: cn(
+          // `bg-bg-overlay` where every other field in the kit takes `bg-bg-primary`, because every
+          // other field sits on a card or a page and this one sits on the rail — which IS
+          // `bg-bg-primary`, so the field's own fill would be its ground and only the border would
+          // say it is there. Lifted, it is 1.073:1 above the rail in light and 1.184:1 in dark
+          // (`Guidelines/Look/Surface tone`), and the field edge still reads at 2.348 and 2.611.
+          "flex h-9 w-full cursor-pointer items-center gap-2 rounded-md border border-field-border bg-bg-overlay px-2.5",
+          "text-left text-sm text-text-tertiary transition-colors duration-fast",
+          "hover:border-field-border-hover hover:text-text-secondary",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus"
+        ),
+        children: [
+          /* @__PURE__ */ jsx74("span", { className: "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx74(Search2, {}) }),
+          /* @__PURE__ */ jsx74("span", { className: "min-w-0 flex-1 truncate", children: label }),
+          shortcut && /* @__PURE__ */ jsx74("span", { className: "shrink-0 text-xs font-medium text-text-tertiary", children: shortcut })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs48(Tooltip, { children: [
+    /* @__PURE__ */ jsx74(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx74(
+      NavRow,
+      {
+        variant: "rail",
+        icon: icon ?? /* @__PURE__ */ jsx74(Search2, { "aria-hidden": "true" }),
+        label,
+        onClick: onOpen
+      }
+    ) }),
+    /* @__PURE__ */ jsx74(TooltipContent, { side: "right", children: name })
+  ] });
+}
+QuickSearchRow.displayName = "QuickSearchRow";
+
 // src/components/nav-section-label.tsx
 import * as React64 from "react";
 import { jsx as jsx75 } from "react/jsx-runtime";
@@ -4583,7 +4648,7 @@ MenuDivider.displayName = "MenuDivider";
 
 // src/components/sidebar-product-header.tsx
 import * as React66 from "react";
-import { Slot as Slot4 } from "@radix-ui/react-slot";
+import { Slot as Slot3 } 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 = React66.forwardRef(
@@ -4594,10 +4659,10 @@ var SidebarProductHeader = React66.forwardRef(
       /* @__PURE__ */ jsx77("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-text-primary", children: name }),
       adornment && /* @__PURE__ */ jsx77("span", { className: "flex shrink-0 items-center", children: adornment })
     ] });
-    const classes = cn("flex w-full items-center gap-2.5 rounded-xl px-1.5 py-0 text-left", className);
+    const classes = cn("flex w-full cursor-pointer items-center gap-2.5 rounded-xl px-1.5 py-0 text-left", className);
     if (asChild) {
       const child = React66.Children.only(children);
-      return /* @__PURE__ */ jsx77(Slot4, { ref, className: classes, ...props, children: React66.cloneElement(child, void 0, content) });
+      return /* @__PURE__ */ jsx77(Slot3, { ref, className: classes, ...props, children: React66.cloneElement(child, void 0, content) });
     }
     return /* @__PURE__ */ jsx77("button", { ref, type: "button", className: classes, ...props, children: content });
   }
@@ -4605,49 +4670,63 @@ var SidebarProductHeader = React66.forwardRef(
 SidebarProductHeader.displayName = "SidebarProductHeader";
 
 // src/components/org-product-switcher.tsx
-import { ChevronsUpDown as ChevronsUpDown3, Check as Check9 } from "lucide-react";
+import * as React67 from "react";
+import { ChevronsUpDown as ChevronsUpDown3, Check as Check9, Search as Search3 } 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 duration-fast hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
+var PRODUCT_STATUS_LABEL = {
+  blocked: "Blocked",
+  archived: "Archived"
+};
+function productStatusBadge(status) {
+  if (status === "active") return void 0;
+  return /* @__PURE__ */ jsx78(Badge, { variant: "status", children: PRODUCT_STATUS_LABEL[status] });
+}
+var triggerBox = "flex min-h-[40px] 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 inlineTriggerBox = "flex items-center gap-1.5 rounded-lg px-2 py-1 text-sm font-semibold text-text-primary 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 searchBox = "mx-1 mb-1 flex h-8 shrink-0 items-center gap-2 rounded-md border border-field-border bg-bg-primary px-2 focus-within:ring-2 focus-within:ring-border-focus";
+var rowScroller = "flex max-h-[18rem] min-h-0 flex-col gap-px overflow-y-auto overscroll-contain";
 var NO_ORG_LABEL = "Select an organization\u2026";
 var nameOf = (item) => item?.name.trim() ? item.name : void 0;
 var UNNAMED = { organization: "Unnamed organization", product: "Unnamed product" };
+function NameLine({ className, children }) {
+  return /* @__PURE__ */ jsxs51("span", { className: "flex min-w-0 items-center gap-1", children: [
+    /* @__PURE__ */ jsx78("span", { className: cn("min-w-0 truncate text-sm leading-[normal]", className), children }),
+    /* @__PURE__ */ jsx78(ChevronsUpDown3, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
+  ] });
+}
+var SEARCH_NOUN = { organization: "organizations", product: "products" };
 function ItemLabel({ item, kind }) {
   const name = nameOf(item);
   return /* @__PURE__ */ jsx78("span", { className: cn("min-w-0 flex-1 truncate", !name && "text-text-tertiary"), children: name ?? UNNAMED[kind] });
 }
-function Mark2({ item, size, reserve }) {
-  const box = size === "md" ? "size-7" : "size-5";
+var MARK_SIZE = { md: "sm", sm: "xs" };
+var ICON_BOX = { md: "size-8 rounded-md", sm: "size-6 rounded-sm" };
+function Mark2({ item, kind, size, reserve }) {
   if (item.icon) {
-    return /* @__PURE__ */ jsx78("span", { className: cn("flex shrink-0 items-center justify-center overflow-hidden rounded-md", box), "aria-hidden": "true", children: item.icon });
+    return /* @__PURE__ */ jsx78("span", { className: cn("flex shrink-0 items-center justify-center overflow-hidden", ICON_BOX[size]), "aria-hidden": "true", children: item.icon });
   }
-  const initial = nameOf(item)?.trim().charAt(0).toUpperCase();
-  if (!initial) return reserve ? /* @__PURE__ */ jsx78("span", { "aria-hidden": "true", className: cn("shrink-0", box) }) : null;
-  return /* @__PURE__ */ jsx78(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: cn(
-        "flex shrink-0 items-center justify-center rounded-md bg-[var(--menu-hov)] font-semibold text-text-secondary",
-        box,
-        size === "md" ? "text-sm" : "text-xs"
-      ),
-      children: initial
-    }
-  );
+  const name = nameOf(item);
+  if (!name) return reserve ? /* @__PURE__ */ jsx78("span", { "aria-hidden": "true", className: cn("shrink-0", ICON_BOX[size]) }) : null;
+  return /* @__PURE__ */ jsx78(EntityTile, { name, tone: kind === "product" ? "auto" : "neutral", size: MARK_SIZE[size] });
 }
 function OrgProductSwitcher({
-  organizations,
+  organizations = [],
   activeOrgId,
   onOrgSelect,
   products = [],
   activeProductId,
   onProductSelect,
   actions,
+  trigger = "stacked",
   className,
   ...props
 }) {
+  const [open, setOpen] = React67.useState(false);
+  const [query, setQuery] = React67.useState("");
+  const contentRef = React67.useRef(null);
+  const searchRef = React67.useRef(null);
   const activeOrg = organizations.find((o) => o.id === activeOrgId);
   const activeProduct = products.find((p) => p.id === activeProductId);
   const orgName = nameOf(activeOrg);
@@ -4655,59 +4734,108 @@ function OrgProductSwitcher({
   const orgLevel = !activeProduct;
   const productLabel = activeProduct && (productName ?? UNNAMED.product);
   const markItem = activeProduct?.icon || productName ? activeProduct : activeOrg;
+  const markKind = markItem === activeProduct ? "product" : "organization";
   const trail = [orgName, productLabel].filter(Boolean).join(" / ");
   const ariaLabel = props["aria-label"] ?? (trail || NO_ORG_LABEL);
-  return /* @__PURE__ */ jsxs51(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs51(DropdownMenuTrigger, { "aria-label": ariaLabel, className: cn(triggerBox, className), children: [
-      markItem && /* @__PURE__ */ jsx78(Mark2, { item: markItem, size: "md" }),
-      orgLevel ? /* @__PURE__ */ jsx78("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx78(
-        "span",
-        {
-          className: cn(
-            "truncate text-sm leading-[normal]",
-            orgName ? "font-semibold text-text-primary" : "text-text-tertiary"
-          ),
-          children: orgName ?? NO_ORG_LABEL
-        }
-      ) }) : /* @__PURE__ */ jsxs51("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+  const inlineName = productLabel ?? orgName;
+  const menuKind = organizations.length > 0 ? "organization" : "product";
+  const items = menuKind === "organization" ? organizations : products;
+  const activeItemId = menuKind === "organization" ? activeOrgId : activeProductId;
+  const triggerMark = menuKind === "organization" && markItem;
+  const noun = SEARCH_NOUN[menuKind];
+  const searchLabel = items.length > 1 ? `Search ${items.length} ${noun}` : `Search ${noun}`;
+  const needle = query.trim().toLowerCase();
+  const matches = needle ? items.filter((i) => (nameOf(i) ?? UNNAMED[menuKind]).toLowerCase().includes(needle)) : items;
+  const hasList = items.length > 0;
+  React67.useEffect(() => {
+    if (!open || !hasList) return;
+    const id = window.setTimeout(() => searchRef.current?.focus());
+    return () => window.clearTimeout(id);
+  }, [open, hasList]);
+  const setMenuOpen = (next) => {
+    setOpen(next);
+    if (!next) setQuery("");
+  };
+  const pick = (id) => {
+    setMenuOpen(false);
+    if (menuKind === "organization") onOrgSelect?.(id);
+    else onProductSelect?.(id);
+  };
+  const onSearchKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      contentRef.current?.querySelector("[data-menu-row]")?.focus();
+      return;
+    }
+    if (e.key === "Enter") {
+      const first = matches[0];
+      if (first) {
+        e.preventDefault();
+        pick(first.id);
+      }
+      return;
+    }
+    if (e.key.length === 1) e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs51(DropdownMenu, { open, onOpenChange: setMenuOpen, children: [
+    trigger === "inline" ? (
+      // One line, and the words are the whole trigger: the product where one has resolved, the
+      // org where it has not, and the same tertiary placeholder as the stacked form where neither
+      // has. Nothing is truncated — a bar sizes to its contents, and a name cut short in a bar is
+      // a name nowhere else on the page repeats.
+      /* @__PURE__ */ jsxs51(DropdownMenuTrigger, { "aria-label": ariaLabel, className: cn(inlineTriggerBox, className), children: [
+        /* @__PURE__ */ jsx78("span", { className: cn(!inlineName && "font-medium text-text-tertiary"), children: inlineName ?? NO_ORG_LABEL }),
+        /* @__PURE__ */ jsx78(ChevronsUpDown3, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
+      ] })
+    ) : /* @__PURE__ */ jsxs51(DropdownMenuTrigger, { "aria-label": ariaLabel, className: cn(triggerBox, className), children: [
+      triggerMark && /* @__PURE__ */ jsx78(Mark2, { item: triggerMark, kind: markKind, size: "md" }),
+      orgLevel ? /* @__PURE__ */ jsx78("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx78(NameLine, { className: orgName ? "font-semibold text-text-primary" : "text-text-tertiary", children: orgName ?? NO_ORG_LABEL }) }) : /* @__PURE__ */ jsxs51("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
         orgName && /* @__PURE__ */ jsx78("span", { className: "truncate text-xs leading-[normal] text-text-tertiary", children: orgName }),
-        /* @__PURE__ */ jsx78(
-          "span",
-          {
-            className: cn(
-              "truncate text-sm leading-[normal]",
-              productName ? "font-semibold text-text-primary" : "text-text-tertiary"
-            ),
-            children: productLabel
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx78(ChevronsUpDown3, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
+        /* @__PURE__ */ jsx78(NameLine, { className: productName ? "font-semibold text-text-primary" : "text-text-tertiary", children: productLabel })
+      ] })
     ] }),
     /* @__PURE__ */ jsxs51(
       DropdownMenuContent,
       {
+        ref: contentRef,
         align: "start",
         sideOffset: 6,
-        className: "flex w-[var(--radix-dropdown-menu-trigger-width)] min-w-56 flex-col gap-px rounded-xl border-border-subtle bg-[var(--menu-bg)] p-1 shadow-(--menu-shadow)",
+        className: "flex w-[var(--radix-dropdown-menu-trigger-width)] min-w-64 flex-col gap-px rounded-xl border-border-subtle bg-[var(--menu-bg)] p-1 shadow-(--menu-shadow)",
         children: [
-          /* @__PURE__ */ jsx78(DropdownMenuLabel, { className: sectionLabel, children: "Organizations" }),
-          organizations.map((o) => /* @__PURE__ */ jsxs51(DropdownMenuItem, { className: menuItem, onSelect: () => onOrgSelect(o.id), children: [
-            /* @__PURE__ */ jsx78(Mark2, { item: o, size: "sm", reserve: true }),
-            /* @__PURE__ */ jsx78(ItemLabel, { item: o, kind: "organization" }),
-            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" }),
-            /* @__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 }),
-              /* @__PURE__ */ jsx78(ItemLabel, { item: p, kind: "product" }),
-              p.id === activeProductId && /* @__PURE__ */ jsx78(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
-            ] }, p.id))
+          items.length > 0 && /* @__PURE__ */ jsxs51(Fragment8, { children: [
+            /* @__PURE__ */ jsx78(DropdownMenuLabel, { className: sectionLabel, children: menuKind === "organization" ? "Organizations" : "Products" }),
+            /* @__PURE__ */ jsxs51("div", { className: searchBox, onKeyDown: onSearchKeyDown, children: [
+              /* @__PURE__ */ jsx78(Search3, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
+              /* @__PURE__ */ jsx78(
+                "input",
+                {
+                  ref: searchRef,
+                  type: "text",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  placeholder: searchLabel,
+                  "aria-label": searchLabel,
+                  className: "min-w-0 flex-1 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx78("div", { role: "group", className: rowScroller, children: matches.map((item) => {
+              const status = menuKind === "product" && productStatusBadge(item.status ?? "active");
+              return /* @__PURE__ */ jsxs51(DropdownMenuItem, { "data-menu-row": "", className: menuItem, onSelect: () => pick(item.id), children: [
+                /* @__PURE__ */ jsx78(Mark2, { item, kind: menuKind, size: "sm", reserve: true }),
+                /* @__PURE__ */ jsx78(ItemLabel, { item, kind: menuKind }),
+                status && /* @__PURE__ */ jsx78("span", { className: "shrink-0", children: status }),
+                item.id === activeItemId && /* @__PURE__ */ jsx78(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
+              ] }, item.id);
+            }) }),
+            matches.length === 0 && /* @__PURE__ */ jsxs51("div", { className: "px-2 py-1.5 text-sm text-text-tertiary", children: [
+              "No ",
+              noun,
+              " match."
+            ] })
           ] }),
           actions && actions.length > 0 && /* @__PURE__ */ jsxs51(Fragment8, { children: [
-            /* @__PURE__ */ jsx78(DropdownMenuSeparator, { className: "mx-0 shrink-0" }),
+            items.length > 0 && /* @__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
@@ -4728,6 +4856,7 @@ 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 duration-fast hover:bg-[color-mix(in_srgb,var(--text-primary)_12%,transparent)] hover:text-text-primary";
+var rowPlate = "transition-colors duration-fast hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]";
 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" });
@@ -4749,7 +4878,7 @@ function SidebarBackHeader({
       {
         type: "button",
         onClick: onBack,
-        className: cn("flex items-center rounded-xl", focusRing, className),
+        className: cn("flex cursor-pointer items-center rounded-xl", rowPlate, focusRing, className),
         ...rowProps,
         children: [
           /* @__PURE__ */ jsx79("span", { className: arrowBox, children: /* @__PURE__ */ jsx79("span", { className: cn(arrowPlate, arrowClassName), ...arrowRest, children: /* @__PURE__ */ jsx79(Arrow, {}) }) }),
@@ -4758,7 +4887,7 @@ function SidebarBackHeader({
       }
     );
   }
-  return /* @__PURE__ */ jsxs52("div", { className: cn("flex items-center", className), ...rowProps, children: [
+  return /* @__PURE__ */ jsxs52("div", { className: cn("flex items-center rounded-xl", rowPlate, className), ...rowProps, children: [
     /* @__PURE__ */ jsx79(
       "button",
       {
@@ -4785,9 +4914,9 @@ function SidebarBackHeader({
 SidebarBackHeader.displayName = "SidebarBackHeader";
 
 // src/components/top-bar.tsx
-import * as React67 from "react";
+import * as React68 from "react";
 import { jsx as jsx80, jsxs as jsxs53 } from "react/jsx-runtime";
-var TopBar = React67.forwardRef(
+var TopBar = React68.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 })
@@ -4795,25 +4924,14 @@ var TopBar = React67.forwardRef(
 );
 TopBar.displayName = "TopBar";
 
-// src/components/top-bar-utilities.tsx
-import * as React68 from "react";
-import { jsx as jsx81, jsxs as jsxs54 } from "react/jsx-runtime";
-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 })
-  ] }, name)) })
-);
-TopBarUtilities.displayName = "TopBarUtilities";
-
 // src/components/grid.tsx
 import * as React69 from "react";
-import { Slot as Slot5 } from "@radix-ui/react-slot";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var Grid = React69.forwardRef(
   ({ fluid = false, asChild = false, className, ...props }, ref) => {
-    const Comp = asChild ? Slot5 : "div";
-    return /* @__PURE__ */ jsx82(
+    const Comp = asChild ? Slot4 : "div";
+    return /* @__PURE__ */ jsx81(
       Comp,
       {
         ref,
@@ -4832,8 +4950,8 @@ Grid.displayName = "Grid";
 
 // src/components/col.tsx
 import * as React70 from "react";
-import { Slot as Slot6 } from "@radix-ui/react-slot";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var TIER_MAX = { base: 4, md: 8, xl: 12 };
 var SPAN = {
   base: { 1: "col-span-1", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4" },
@@ -4955,25 +5073,25 @@ function responsiveClasses(span, offset) {
 }
 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 });
+    const Comp = asChild ? Slot5 : "div";
+    return /* @__PURE__ */ jsx82(Comp, { ref, className: cn(responsiveClasses(span, offset), className), ...props });
   }
 );
 Col.displayName = "Col";
 
 // src/components/page-column.tsx
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var WIDTH = {
   reading: "grid gap-5 page-column",
   full: "grid gap-5"
 };
 function PageColumn({ className, width = "reading", ...props }) {
-  return /* @__PURE__ */ jsx84("div", { "data-slot": "page-column", className: cn(WIDTH[width], className), ...props });
+  return /* @__PURE__ */ jsx83("div", { "data-slot": "page-column", className: cn(WIDTH[width], className), ...props });
 }
 
 // src/components/code-block.tsx
 import * as React71 from "react";
-import { jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs54 } from "react/jsx-runtime";
 var TOKEN_CLASS = {
   comment: "text-text-tertiary italic",
   string: "text-text-success",
@@ -5154,20 +5272,20 @@ var CodeBlock = React71.forwardRef(
     const showCopy = copy && !isTerminal;
     const overlayCopy = showCopy && !filename;
     const contentWhitespace = scroll ? "whitespace-pre" : "whitespace-pre-wrap break-words";
-    const pre = /* @__PURE__ */ jsx85(
+    const pre = /* @__PURE__ */ jsx84(
       "pre",
       {
         ref,
         className: cn("py-4 font-mono text-xs leading-6 text-text-secondary", scroll && "overflow-x-auto", className),
         ...props,
-        children: /* @__PURE__ */ jsx85("code", { className: "block min-w-full", children: lines.map((tokens, i) => {
+        children: /* @__PURE__ */ jsx84("code", { className: "block min-w-full", children: lines.map((tokens, i) => {
           const n = i + 1;
           const raw = rawLines[i] ?? "";
           const diffKind = isDiff ? raw[0] === "+" ? "add" : raw[0] === "-" ? "remove" : null : null;
           const promptLen = isTerminal && raw[0] === "$" ? 1 : 0;
           const markerDrop = diffKind ? 1 : promptLen;
           const body = markerDrop ? dropLeading(tokens, markerDrop) : tokens;
-          return /* @__PURE__ */ jsxs55(
+          return /* @__PURE__ */ jsxs54(
             "span",
             {
               "data-line": n,
@@ -5180,8 +5298,8 @@ var CodeBlock = React71.forwardRef(
                 !diffKind && highlighted.has(n) && "bg-bg-brand-subtle"
               ),
               children: [
-                showLineNumbers && /* @__PURE__ */ jsx85("span", { "aria-hidden": true, className: "mr-3 w-8 shrink-0 select-none text-right text-text-tertiary", children: n }),
-                (isDiff || isTerminal) && /* @__PURE__ */ jsx85(
+                showLineNumbers && /* @__PURE__ */ jsx84("span", { "aria-hidden": true, className: "mr-3 w-8 shrink-0 select-none text-right text-text-tertiary", children: n }),
+                (isDiff || isTerminal) && /* @__PURE__ */ jsx84(
                   "span",
                   {
                     "aria-hidden": true,
@@ -5194,7 +5312,7 @@ var CodeBlock = React71.forwardRef(
                     children: diffKind === "add" ? "+" : diffKind === "remove" ? "-" : promptLen > 0 ? "$" : ""
                   }
                 ),
-                /* @__PURE__ */ jsx85("span", { className: cn("min-w-0 flex-1", contentWhitespace), children: body.length ? body.map((token, j) => /* @__PURE__ */ jsx85("span", { className: TOKEN_CLASS[token.kind], children: token.text }, j)) : "\xA0" })
+                /* @__PURE__ */ jsx84("span", { className: cn("min-w-0 flex-1", contentWhitespace), children: body.length ? body.map((token, j) => /* @__PURE__ */ jsx84("span", { className: TOKEN_CLASS[token.kind], children: token.text }, j)) : "\xA0" })
               ]
             },
             i
@@ -5202,16 +5320,16 @@ var CodeBlock = React71.forwardRef(
         }) })
       }
     );
-    return /* @__PURE__ */ jsxs55("div", { className: "relative overflow-hidden rounded-lg border border-border-subtle bg-bg-primary", children: [
-      filename && /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between gap-3 border-b border-border-subtle px-4 py-2", children: [
-        /* @__PURE__ */ jsx85("span", { className: "font-mono text-xs text-text-tertiary", children: filename }),
-        showCopy && /* @__PURE__ */ jsx85(CopyButton, { value: code, label: "Copy code", className: "size-7" })
+    return /* @__PURE__ */ jsxs54("div", { className: "relative overflow-hidden rounded-lg border border-border-subtle bg-bg-primary", children: [
+      filename && /* @__PURE__ */ jsxs54("div", { className: "flex items-center justify-between gap-3 border-b border-border-subtle px-4 py-2", children: [
+        /* @__PURE__ */ jsx84("span", { className: "font-mono text-xs text-text-tertiary", children: filename }),
+        showCopy && /* @__PURE__ */ jsx84(CopyButton, { value: code, label: "Copy code", className: "size-7" })
       ] }),
       pre,
       overlayCopy && // Always visible, on every device: a copy control you have to hover to discover is a
       // control most people never find. Opaque (`bg-bg-primary`, the block's own surface) so it
       // reads cleanly where a long first line runs under it.
-      /* @__PURE__ */ jsx85(
+      /* @__PURE__ */ jsx84(
         CopyButton,
         {
           value: code,
@@ -5223,7 +5341,7 @@ var CodeBlock = React71.forwardRef(
   }
 );
 CodeBlock.displayName = "CodeBlock";
-var Code = React71.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx85(
+var Code = React71.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx84(
   "code",
   {
     ref,
@@ -5238,12 +5356,12 @@ Code.displayName = "Code";
 
 // src/components/grid-overlay.tsx
 import * as React72 from "react";
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var BASELINE = "var(--grid-gutter) / 2";
 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(
+    return /* @__PURE__ */ jsx85(
       "div",
       {
         ref,
@@ -5260,7 +5378,7 @@ var GridOverlay = React72.forwardRef(
           ...style
         },
         ...props,
-        children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx86("span", { style: { backgroundColor: "var(--bg-brand)", opacity: 0.1 } }, i))
+        children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx85("span", { style: { backgroundColor: "var(--bg-brand)", opacity: 0.1 } }, i))
       }
     );
   }
@@ -5271,7 +5389,7 @@ GridOverlay.displayName = "GridOverlay";
 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";
+import { jsx as jsx86, jsxs as jsxs55 } from "react/jsx-runtime";
 var attachmentChipVariants = cva8(
   "inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-sm font-medium leading-tight",
   {
@@ -5293,8 +5411,8 @@ var stateIcons = {
 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: [
-      !hideIcon && /* @__PURE__ */ jsx87(Icon, { className: "size-3.5 shrink-0 opacity-90", "aria-hidden": "true" }),
+    return /* @__PURE__ */ jsxs55("span", { ref, className: cn(attachmentChipVariants({ state }), className), ...props, children: [
+      !hideIcon && /* @__PURE__ */ jsx86(Icon, { className: "size-3.5 shrink-0 opacity-90", "aria-hidden": "true" }),
       account
     ] });
   }
@@ -5303,8 +5421,8 @@ AttachmentChip.displayName = "AttachmentChip";
 
 // src/components/connector-card.tsx
 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";
+import { AlertTriangle, ChevronDown as ChevronDown5 } from "lucide-react";
+import { Fragment as Fragment9, jsx as jsx87, jsxs as jsxs56 } from "react/jsx-runtime";
 var originLabels = {
   org: "Attached by the organization",
   product: "Attached by this product"
@@ -5338,56 +5456,56 @@ var ConnectorCard = React74.forwardRef(
   }, ref) => {
     const connected = status !== "not-connected";
     const label = statusLabel ?? statusLabels[status];
-    const glyphBox = /* @__PURE__ */ jsx88(
+    const glyphBox = /* @__PURE__ */ jsx87(
       "div",
       {
         "aria-hidden": "true",
-        className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-elevated text-sm font-bold text-text-secondary",
+        className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-secondary text-sm font-bold text-text-secondary",
         children: glyph ?? monogram(name)
       }
     );
-    const identity = /* @__PURE__ */ jsxs57("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx88("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
-      (kind || origin) && /* @__PURE__ */ jsxs57("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [
-        kind && /* @__PURE__ */ jsx88(Badge, { variant: "secondary", children: kind }),
-        origin && /* @__PURE__ */ jsx88(Badge, { variant: "outline", children: originLabels[origin] })
+    const identity = /* @__PURE__ */ jsxs56("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx87("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
+      (kind || origin) && /* @__PURE__ */ jsxs56("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [
+        kind && /* @__PURE__ */ jsx87(Badge, { variant: "secondary", children: kind }),
+        origin && /* @__PURE__ */ jsx87(Badge, { variant: "outline", children: originLabels[origin] })
       ] })
     ] });
-    const statusBadge = label ? /* @__PURE__ */ jsx88(Badge, { variant: "status", children: label }) : null;
-    const accessNote = access ? /* @__PURE__ */ jsxs57(
+    const statusBadge = label ? /* @__PURE__ */ jsx87(Badge, { variant: "status", children: label }) : null;
+    const accessNote = access ? /* @__PURE__ */ jsxs56(
       "div",
       {
         role: "note",
         className: "flex items-start gap-2 border-t border-border-subtle bg-bg-secondary px-4 py-2.5 text-xs font-medium text-text-secondary",
         children: [
-          /* @__PURE__ */ jsx88(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx88("span", { children: access })
+          /* @__PURE__ */ jsx87(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx87("span", { children: access })
         ]
       }
     ) : null;
     const footerAction = collapsible ? action : connected && action;
-    const footer = attachedCount !== void 0 || footerAction ? /* @__PURE__ */ jsxs57("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-3", children: [
-      /* @__PURE__ */ jsx88("span", { className: "text-sm text-text-secondary", children: attachedCount !== void 0 ? /* @__PURE__ */ jsxs57(Fragment9, { children: [
+    const footer = attachedCount !== void 0 || footerAction ? /* @__PURE__ */ jsxs56("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-3", children: [
+      /* @__PURE__ */ jsx87("span", { className: "text-sm text-text-secondary", children: attachedCount !== void 0 ? /* @__PURE__ */ jsxs56(Fragment9, { children: [
         "Attached to ",
-        /* @__PURE__ */ jsx88("span", { className: "font-semibold text-text-primary", children: attachedCount }),
+        /* @__PURE__ */ jsx87("span", { className: "font-semibold text-text-primary", children: attachedCount }),
         " ",
         attachedCount === 1 ? "product" : "products"
-      ] }) : /* @__PURE__ */ jsx88("span", { className: "text-text-tertiary", children: "Not attached to any product yet" }) }),
+      ] }) : /* @__PURE__ */ jsx87("span", { className: "text-text-tertiary", children: "Not attached to any product yet" }) }),
       footerAction
     ] }) : null;
-    const drawer = children ? /* @__PURE__ */ jsx88("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children }) : null;
+    const drawer = children ? /* @__PURE__ */ jsx87("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children }) : null;
     if (!collapsible) {
-      return /* @__PURE__ */ jsxs57(
+      return /* @__PURE__ */ jsxs56(
         Card,
         {
           ref,
           className: cn(status === "not-connected" && "border-dashed border-border-default", className),
           ...props,
           children: [
-            /* @__PURE__ */ jsxs57("div", { className: "flex items-center gap-3 p-4", children: [
+            /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-3 p-4", children: [
               glyphBox,
               identity,
-              /* @__PURE__ */ jsx88("div", { className: "ml-auto shrink-0", children: connected ? statusBadge : action ?? statusBadge })
+              /* @__PURE__ */ jsx87("div", { className: "ml-auto shrink-0", children: connected ? statusBadge : action ?? statusBadge })
             ] }),
             accessNote,
             footer,
@@ -5396,7 +5514,7 @@ var ConnectorCard = React74.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsx88(Collapsible, { defaultOpen, open, onOpenChange, children: /* @__PURE__ */ jsxs57(
+    return /* @__PURE__ */ jsx87(Collapsible, { defaultOpen, open, onOpenChange, children: /* @__PURE__ */ jsxs56(
       Card,
       {
         ref,
@@ -5407,7 +5525,7 @@ var ConnectorCard = React74.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx88(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs57(
+          /* @__PURE__ */ jsx87(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs56(
             "button",
             {
               type: "button",
@@ -5415,10 +5533,10 @@ var ConnectorCard = React74.forwardRef(
               children: [
                 glyphBox,
                 identity,
-                /* @__PURE__ */ jsxs57("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+                /* @__PURE__ */ jsxs56("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
                   statusBadge,
-                  /* @__PURE__ */ jsx88(
-                    ChevronDown6,
+                  /* @__PURE__ */ jsx87(
+                    ChevronDown5,
                     {
                       "aria-hidden": "true",
                       className: "size-4 shrink-0 text-text-tertiary transition-transform duration-fast group-data-[state=open]:rotate-180"
@@ -5428,7 +5546,7 @@ var ConnectorCard = React74.forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs57(CollapsibleContent2, { children: [
+          /* @__PURE__ */ jsxs56(CollapsibleContent2, { children: [
             accessNote,
             footer,
             drawer
@@ -5442,7 +5560,7 @@ ConnectorCard.displayName = "ConnectorCard";
 
 // src/components/request-row.tsx
 import * as React75 from "react";
-import { Fragment as Fragment10, jsx as jsx89, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx88, jsxs as jsxs57 } 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("");
 }
@@ -5451,23 +5569,23 @@ var RequestRow = React75.forwardRef(
     let controls = action;
     if (controls === void 0) {
       if (surface === "org" && state === "pending") {
-        controls = /* @__PURE__ */ jsxs58(Fragment10, { children: [
-          /* @__PURE__ */ jsx89(Button, { variant: "ghost", size: "sm", onClick: onDeny, children: "Deny" }),
-          /* @__PURE__ */ jsx89(Button, { variant: "outline", size: "sm", onClick: onApprove, children: "Approve" })
+        controls = /* @__PURE__ */ jsxs57(Fragment10, { children: [
+          /* @__PURE__ */ jsx88(Button, { variant: "ghost", size: "sm", onClick: onDeny, children: "Deny" }),
+          /* @__PURE__ */ jsx88(Button, { variant: "outline", size: "sm", onClick: onApprove, children: "Approve" })
         ] });
       } else if (state === "sent") {
-        controls = /* @__PURE__ */ jsx89(Button, { variant: "destructive-ghost", size: "sm", onClick: onRevoke, children: "Revoke" });
+        controls = /* @__PURE__ */ jsx88(Button, { variant: "destructive-ghost", size: "sm", onClick: onRevoke, children: "Revoke" });
       } else if (state === "available") {
-        controls = /* @__PURE__ */ jsx89(Button, { variant: "outline", size: "sm", onClick: onRequest, children: "Request" });
+        controls = /* @__PURE__ */ jsx88(Button, { variant: "outline", size: "sm", onClick: onRequest, children: "Request" });
       } else if (state === "pending") {
-        controls = /* @__PURE__ */ jsx89(Badge, { variant: "status", children: "Requested" });
+        controls = /* @__PURE__ */ jsx88(Badge, { variant: "status", children: "Requested" });
       } else if (state === "denied") {
-        controls = /* @__PURE__ */ jsx89(Badge, { variant: "status", children: "Denied" });
+        controls = /* @__PURE__ */ jsx88(Badge, { variant: "status", children: "Denied" });
       } else if (state === "attached") {
-        controls = account ? /* @__PURE__ */ jsx89(AttachmentChip, { state: "attached", account }) : /* @__PURE__ */ jsx89(Badge, { variant: "status", children: "In use" });
+        controls = account ? /* @__PURE__ */ jsx88(AttachmentChip, { state: "attached", account }) : /* @__PURE__ */ jsx88(Badge, { variant: "status", children: "In use" });
       }
     }
-    return /* @__PURE__ */ jsxs58(
+    return /* @__PURE__ */ jsxs57(
       "div",
       {
         ref,
@@ -5477,19 +5595,19 @@ var RequestRow = React75.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx89(
+          /* @__PURE__ */ jsx88(
             "div",
             {
               "aria-hidden": "true",
-              className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-elevated text-sm font-bold text-text-secondary",
+              className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-secondary text-sm font-bold text-text-secondary",
               children: glyph ?? monogram2(name)
             }
           ),
-          /* @__PURE__ */ jsxs58("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx89("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
-            subtitle && /* @__PURE__ */ jsx89("p", { className: "truncate text-xs text-text-tertiary", children: subtitle })
+          /* @__PURE__ */ jsxs57("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx88("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
+            subtitle && /* @__PURE__ */ jsx88("p", { className: "truncate text-xs text-text-tertiary", children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx89("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: controls })
+          /* @__PURE__ */ jsx88("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: controls })
         ]
       }
     );
@@ -5500,7 +5618,7 @@ RequestRow.displayName = "RequestRow";
 // src/components/feedback-button.tsx
 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";
+import { jsx as jsx89, jsxs as jsxs58 } from "react/jsx-runtime";
 var TITLE_MAX = 256;
 var DETAILS_MAX = 65536;
 var DEFAULT_LABELS = {
@@ -5547,20 +5665,20 @@ function FeedbackButton({ onSubmit, labels, className }) {
       setStatus("error");
     }
   };
-  return /* @__PURE__ */ jsxs59(Popover, { open, onOpenChange: changeOpen, children: [
-    /* @__PURE__ */ jsx90(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs59(Button, { variant: "ghost", size: "sm", "aria-label": l.trigger, className, children: [
-      /* @__PURE__ */ jsx90(MessageSquare, { className: "size-4", "aria-hidden": "true" }),
+  return /* @__PURE__ */ jsxs58(Popover, { open, onOpenChange: changeOpen, children: [
+    /* @__PURE__ */ jsx89(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs58(Button, { variant: "ghost", size: "sm", "aria-label": l.trigger, className, children: [
+      /* @__PURE__ */ jsx89(MessageSquare, { className: "size-4", "aria-hidden": "true" }),
       l.trigger
     ] }) }),
-    /* @__PURE__ */ jsx90(PopoverContent, { align: "end", side: "bottom", className: "w-80", children: status === "success" ? /* @__PURE__ */ jsxs59("div", { className: "flex flex-col items-center gap-3 py-2 text-center", children: [
-      /* @__PURE__ */ jsx90(CheckCircle2, { className: "size-8 text-text-success", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx90("p", { role: "status", className: "text-sm text-text-primary", children: l.success }),
-      /* @__PURE__ */ jsx90(Button, { variant: "outline", size: "sm", onClick: () => changeOpen(false), children: "Close" })
-    ] }) : /* @__PURE__ */ jsxs59("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsx90("p", { className: "text-sm font-medium text-text-primary", children: l.title }),
-      /* @__PURE__ */ jsxs59("div", { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsx90(Label2, { htmlFor: titleId, children: l.titleField }),
-        /* @__PURE__ */ jsx90(
+    /* @__PURE__ */ jsx89(PopoverContent, { align: "end", side: "bottom", className: "w-80", children: status === "success" ? /* @__PURE__ */ jsxs58("div", { className: "flex flex-col items-center gap-3 py-2 text-center", children: [
+      /* @__PURE__ */ jsx89(CheckCircle2, { className: "size-8 text-text-success", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx89("p", { role: "status", className: "text-sm text-text-primary", children: l.success }),
+      /* @__PURE__ */ jsx89(Button, { variant: "outline", size: "sm", onClick: () => changeOpen(false), children: "Close" })
+    ] }) : /* @__PURE__ */ jsxs58("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx89("p", { className: "text-sm font-medium text-text-primary", children: l.title }),
+      /* @__PURE__ */ jsxs58("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx89(Label2, { htmlFor: titleId, children: l.titleField }),
+        /* @__PURE__ */ jsx89(
           Input,
           {
             id: titleId,
@@ -5571,16 +5689,16 @@ function FeedbackButton({ onSubmit, labels, className }) {
             "aria-describedby": titleTooLong ? titleErrId : void 0
           }
         ),
-        titleTooLong && /* @__PURE__ */ jsxs59("p", { id: titleErrId, className: "text-xs text-text-danger", children: [
+        titleTooLong && /* @__PURE__ */ jsxs58("p", { id: titleErrId, className: "text-xs text-text-danger", children: [
           l.titleField,
           " must be ",
           TITLE_MAX,
           " characters or fewer."
         ] })
       ] }),
-      /* @__PURE__ */ jsxs59("div", { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsx90(Label2, { htmlFor: detailsId, children: l.detailsField }),
-        /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsxs58("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx89(Label2, { htmlFor: detailsId, children: l.detailsField }),
+        /* @__PURE__ */ jsx89(
           Textarea,
           {
             id: detailsId,
@@ -5591,16 +5709,16 @@ function FeedbackButton({ onSubmit, labels, className }) {
             "aria-describedby": detailsTooLong ? detailsErrId : void 0
           }
         ),
-        detailsTooLong && /* @__PURE__ */ jsxs59("p", { id: detailsErrId, className: "text-xs text-text-danger", children: [
+        detailsTooLong && /* @__PURE__ */ jsxs58("p", { id: detailsErrId, className: "text-xs text-text-danger", children: [
           l.detailsField,
           " must be ",
           DETAILS_MAX,
           " characters or fewer."
         ] })
       ] }),
-      status === "error" && /* @__PURE__ */ jsx90(InlineError, { children: l.error }),
-      /* @__PURE__ */ jsxs59(Button, { type: "submit", disabled: !valid || submitting, children: [
-        submitting && /* @__PURE__ */ jsx90(Loader23, { className: "size-4 animate-spin", "aria-hidden": "true" }),
+      status === "error" && /* @__PURE__ */ jsx89(InlineError, { children: l.error }),
+      /* @__PURE__ */ jsxs58(Button, { type: "submit", disabled: !valid || submitting, children: [
+        submitting && /* @__PURE__ */ jsx89(Loader23, { className: "size-4 animate-spin", "aria-hidden": "true" }),
         l.submit
       ] })
     ] }) })
@@ -5664,19 +5782,19 @@ import * as React77 from "react";
 
 // src/components/notification-parts.tsx
 import { Check as Check10 } from "lucide-react";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var rowControlHitArea = "relative after:absolute after:-inset-x-2 after:-top-1.5 after:-bottom-2.5";
 function rowControlName(label, title) {
   return `${label} "${title}"`;
 }
 function MarkReadButton({ title, onClick }) {
   const label = `Mark "${title}" as read`;
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx90(
     Button,
     {
       variant: "ghost",
       size: "xs",
-      icon: /* @__PURE__ */ jsx91(Check10, {}),
+      icon: /* @__PURE__ */ jsx90(Check10, {}),
       "aria-label": label,
       onClick,
       className: "relative text-text-secondary after:absolute after:-inset-3 hover:text-text-primary"
@@ -5690,11 +5808,11 @@ function DeepLinkControl({
   onClick
 }) {
   const name = rowControlName(link.label, title);
-  return link.href ? /* @__PURE__ */ jsx91("a", { href: link.href, "aria-label": name, onClick, className, children: link.label }) : /* @__PURE__ */ jsx91("button", { type: "button", "aria-label": name, onClick, className, children: link.label });
+  return link.href ? /* @__PURE__ */ jsx90("a", { href: link.href, "aria-label": name, onClick, className, children: link.label }) : /* @__PURE__ */ jsx90("button", { type: "button", "aria-label": name, onClick, className: cn("cursor-pointer", className), children: link.label });
 }
 
 // src/components/notification-row.tsx
-import { jsx as jsx92, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs59 } from "react/jsx-runtime";
 var NotificationRow = React77.forwardRef(
   ({ item, onItemClick, onActionClick, onMarkRead, formatAge, className, ...props }, ref) => {
     const settled = isNotificationSettled(item);
@@ -5707,32 +5825,32 @@ var NotificationRow = React77.forwardRef(
       // Three steps of one ladder, and every one of them a token a reader can read:
       // unread is the loudest, read is quieter, settled is quietest. An opacity is
       // not a step — it drags the text under the contrast floor with the row.
-      /* @__PURE__ */ jsxs60(
+      /* @__PURE__ */ jsxs59(
         "div",
         {
           ref,
           className: cn("group rounded-lg bg-bg-surface px-3 py-2.5", className),
           ...props,
           children: [
-            /* @__PURE__ */ jsxs60("div", { className: "flex items-start gap-2.5", children: [
-              /* @__PURE__ */ jsxs60("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxs60("p", { className: "truncate text-xs text-text-tertiary", children: [
-                  /* @__PURE__ */ jsx92("span", { className: "font-semibold uppercase tracking-wide text-text-secondary", children: item.source }),
+            /* @__PURE__ */ jsxs59("div", { className: "flex items-start gap-2.5", children: [
+              /* @__PURE__ */ jsxs59("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs59("p", { className: "truncate text-xs text-text-tertiary", children: [
+                  /* @__PURE__ */ jsx91("span", { className: "font-semibold", children: item.source }),
                   item.receipt ? `, ${item.receipt}` : ""
                 ] }),
-                /* @__PURE__ */ jsx92(
+                /* @__PURE__ */ jsx91(
                   "button",
                   {
                     type: "button",
                     onClick: () => onItemClick?.(item),
                     className: cn(
-                      "mt-0.5 block text-left text-sm leading-tight underline-offset-2 hover:underline",
+                      "mt-0.5 block cursor-pointer text-left text-sm leading-tight underline-offset-2 hover:underline",
                       settled ? "text-text-tertiary" : unread ? "font-semibold text-text-primary" : "text-text-secondary"
                     ),
                     children: item.title
                   }
                 ),
-                item.body && /* @__PURE__ */ jsx92(
+                item.body && /* @__PURE__ */ jsx91(
                   "p",
                   {
                     className: cn(
@@ -5743,15 +5861,15 @@ var NotificationRow = React77.forwardRef(
                   }
                 )
               ] }),
-              (age || markable) && /* @__PURE__ */ jsxs60("div", { className: "mt-px flex shrink-0 items-center gap-1", children: [
-                stamp && age && /* @__PURE__ */ jsx92("time", { dateTime: toDateTimeAttribute(stamp), className: "text-xs text-text-tertiary", children: age }),
-                markable && /* @__PURE__ */ jsx92(MarkReadButton, { title: item.title, onClick: () => onMarkRead(item.id) })
+              (age || markable) && /* @__PURE__ */ jsxs59("div", { className: "mt-px flex shrink-0 items-center gap-1", children: [
+                stamp && age && /* @__PURE__ */ jsx91("time", { dateTime: toDateTimeAttribute(stamp), className: "text-xs text-text-tertiary", children: age }),
+                markable && /* @__PURE__ */ jsx91(MarkReadButton, { title: item.title, onClick: () => onMarkRead(item.id) })
               ] })
             ] }),
-            (actions.length > 0 || item.deepLink) && /* @__PURE__ */ jsxs60("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-2", children: [
+            (actions.length > 0 || item.deepLink) && /* @__PURE__ */ jsxs59("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-2", children: [
               actions.map((action) => {
                 const chip = action.variant === "primary" || action.variant === "destructive";
-                return /* @__PURE__ */ jsx92(
+                return /* @__PURE__ */ jsx91(
                   "button",
                   {
                     type: "button",
@@ -5759,6 +5877,7 @@ var NotificationRow = React77.forwardRef(
                     onClick: () => onActionClick?.(item, action),
                     className: cn(
                       rowControlHitArea,
+                      "cursor-pointer",
                       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"
@@ -5768,7 +5887,7 @@ var NotificationRow = React77.forwardRef(
                   action.id
                 );
               }),
-              item.deepLink && /* @__PURE__ */ jsx92(
+              item.deepLink && /* @__PURE__ */ jsx91(
                 DeepLinkControl,
                 {
                   link: item.deepLink,
@@ -5790,7 +5909,7 @@ var NotificationRow = React77.forwardRef(
 NotificationRow.displayName = "NotificationRow";
 
 // src/components/notification-bell.tsx
-import { jsx as jsx93, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs60 } from "react/jsx-runtime";
 var NotificationBell = React78.forwardRef(
   ({
     items,
@@ -5811,56 +5930,60 @@ var NotificationBell = React78.forwardRef(
     const unread = unreadCount ?? items.filter((n) => !n.read && n.cls !== "ephemeral").length;
     const rows = items.slice(0, maxItems);
     const hidden = items.length - rows.length;
-    return /* @__PURE__ */ jsxs61(Popover, { open, onOpenChange, children: [
-      /* @__PURE__ */ jsx93(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs61(
+    return /* @__PURE__ */ jsxs60(Popover, { open, onOpenChange, children: [
+      /* @__PURE__ */ jsx92(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs60(
         "button",
         {
           ref,
           type: "button",
           "aria-label": "Notifications",
           className: cn(
-            "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",
+            topBarMarkClass,
+            "data-[state=open]:bg-[var(--hov-bg)] data-[state=open]:text-text-primary",
             className
           ),
           children: [
-            /* @__PURE__ */ jsx93(BellRing, { className: "size-[18px]", "aria-hidden": "true" }),
-            unread > 0 && /* @__PURE__ */ jsx93("span", { className: "absolute -right-1.5 -top-1.5 flex size-[17px] items-center justify-center rounded-full bg-bg-brand text-xs font-bold leading-none text-text-on-brand ring-2 ring-bg-surface", children: unread })
+            /* @__PURE__ */ jsx92(BellRing, { "aria-hidden": "true" }),
+            unread > 0 && /* @__PURE__ */ jsx92("span", { className: "absolute -right-1.5 -top-1.5 flex size-[17px] items-center justify-center rounded-full bg-bg-brand text-xs font-bold leading-none text-text-on-brand ring-2 ring-bg-surface", children: unread })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxs61(
+      /* @__PURE__ */ jsxs60(
         PopoverContent,
         {
           align: "end",
           collisionPadding: 12,
-          style: { maxHeight: "var(--radix-popover-content-available-height, 32rem)" },
+          style: {
+            maxHeight: "var(--radix-popover-content-available-height, 32rem)",
+            maxWidth: "var(--radix-popover-content-available-width, 380px)"
+          },
           className: "flex w-[380px] flex-col overflow-hidden p-0",
           children: [
-            /* @__PURE__ */ jsxs61("div", { className: "flex shrink-0 items-center justify-between px-5 py-3", children: [
-              /* @__PURE__ */ jsx93("span", { className: "text-sm font-bold text-text-primary", children: "Notification center" }),
-              /* @__PURE__ */ jsxs61("div", { className: "flex items-center gap-3", children: [
-                unread === 0 ? /* @__PURE__ */ jsx93("span", { className: "text-sm font-medium text-text-tertiary", children: "All read" }) : /* @__PURE__ */ jsx93(
+            /* @__PURE__ */ jsxs60("div", { className: "flex shrink-0 items-center justify-between px-5 py-3", children: [
+              /* @__PURE__ */ jsx92("span", { className: "text-sm font-bold text-text-primary", children: "Notification center" }),
+              /* @__PURE__ */ jsxs60("div", { className: "flex items-center gap-3", children: [
+                unread === 0 ? /* @__PURE__ */ jsx92("span", { className: "text-sm font-medium text-text-tertiary", children: "All read" }) : /* @__PURE__ */ jsx92(
                   "button",
                   {
                     type: "button",
                     onClick: () => onMarkAllRead?.(),
-                    className: "text-sm font-medium text-text-tertiary transition-colors duration-fast hover:text-text-primary",
+                    className: "cursor-pointer text-sm font-medium text-text-tertiary transition-colors duration-fast hover:text-text-primary",
                     children: "Mark all read"
                   }
                 ),
-                onOpenSettings && /* @__PURE__ */ jsx93(
+                onOpenSettings && /* @__PURE__ */ jsx92(
                   "button",
                   {
                     type: "button",
                     "aria-label": "Notification settings",
                     onClick: () => onOpenSettings(),
-                    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" })
+                    className: "flex size-6 cursor-pointer items-center justify-center rounded-md text-text-tertiary transition-colors duration-fast hover:bg-bg-surface hover:text-text-primary",
+                    children: /* @__PURE__ */ jsx92(Settings, { className: "size-[15px]", "aria-hidden": "true" })
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsx93("div", { className: "min-h-0 flex-1 space-y-1.5 overflow-y-auto px-2 pb-2", children: rows.length === 0 ? /* @__PURE__ */ jsx93("p", { className: "px-3 py-12 text-center text-xs leading-relaxed text-text-tertiary", children: "Nothing yet. Everything addressed to you lands here." }) : rows.map((item) => /* @__PURE__ */ jsx93(
+            /* @__PURE__ */ jsx92("div", { className: "min-h-0 flex-1 space-y-1.5 overflow-y-auto px-2 pb-2", children: rows.length === 0 ? /* @__PURE__ */ jsx92("p", { className: "px-3 py-12 text-center text-xs leading-relaxed text-text-tertiary", children: "Nothing yet. Everything addressed to you lands here." }) : rows.map((item) => /* @__PURE__ */ jsx92(
               NotificationRow,
               {
                 item,
@@ -5871,13 +5994,13 @@ var NotificationBell = React78.forwardRef(
               },
               item.id
             )) }),
-            footer != null && /* @__PURE__ */ jsx93("div", { className: "shrink-0 px-5 py-2.5 text-xs text-text-tertiary", children: footer }),
-            items.length > 0 && onOpenArchive && /* @__PURE__ */ jsx93(
+            footer != null && /* @__PURE__ */ jsx92("div", { className: "shrink-0 px-5 py-2.5 text-xs text-text-tertiary", children: footer }),
+            items.length > 0 && onOpenArchive && /* @__PURE__ */ jsx92(
               "button",
               {
                 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 duration-fast hover:bg-bg-surface",
+                className: "flex w-full shrink-0 cursor-pointer 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"
               }
             )
@@ -5891,9 +6014,9 @@ NotificationBell.displayName = "NotificationBell";
 
 // src/components/notification-center.tsx
 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-md px-3 py-1.5 text-sm font-medium transition-colors duration-fast";
+import { Check as Check11, Search as Search4 } from "lucide-react";
+import { jsx as jsx93, jsxs as jsxs61 } from "react/jsx-runtime";
+var chipBase = "cursor-pointer 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({
@@ -5907,12 +6030,12 @@ function CenterRow({
   const markable = Boolean(onMarkRead) && unread && item.cls !== "ephemeral";
   const stamp = item.createdAt ? item.createdAt instanceof Date ? item.createdAt : new Date(item.createdAt) : null;
   const age = stamp ? formatAge(stamp) : null;
-  return /* @__PURE__ */ jsxs62("article", { className: "group rounded-lg bg-bg-elevated px-4 py-3", children: [
-    /* @__PURE__ */ jsxs62("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx94("span", { className: "text-xs font-semibold uppercase tracking-[0.09em] text-text-secondary", children: item.source }),
-      /* @__PURE__ */ jsx94(Badge, { variant: severityBadgeVariant(item.severity), children: severityLabels[item.severity] }),
-      (age || markable) && /* @__PURE__ */ jsxs62("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
-        stamp && age && /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsxs61("article", { className: "group rounded-lg bg-bg-elevated px-4 py-3", children: [
+    /* @__PURE__ */ jsxs61("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx93("span", { className: "text-xs font-semibold text-text-tertiary", children: item.source }),
+      /* @__PURE__ */ jsx93(Badge, { variant: severityBadgeVariant(item.severity), children: severityLabels[item.severity] }),
+      (age || markable) && /* @__PURE__ */ jsxs61("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+        stamp && age && /* @__PURE__ */ jsx93(
           "time",
           {
             dateTime: toDateTimeAttribute(stamp),
@@ -5920,28 +6043,28 @@ function CenterRow({
             children: age
           }
         ),
-        markable && /* @__PURE__ */ jsx94(MarkReadButton, { title: item.title, onClick: () => onMarkRead(item.id) })
+        markable && /* @__PURE__ */ jsx93(MarkReadButton, { title: item.title, onClick: () => onMarkRead(item.id) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx94(
+    /* @__PURE__ */ jsx93(
       "button",
       {
         type: "button",
         onClick: () => onItemClick?.(item),
         className: cn(
-          "mt-1 block text-left text-sm leading-snug underline-offset-2 hover:underline",
+          "mt-1 block cursor-pointer text-left text-sm leading-snug underline-offset-2 hover:underline",
           unread ? "font-semibold text-text-primary" : "font-medium text-text-secondary"
         ),
         children: item.title
       }
     ),
-    item.body && /* @__PURE__ */ jsx94("p", { className: "mt-0.5 text-sm leading-snug text-text-secondary", children: item.body }),
-    (item.receipt || item.deepLink) && /* @__PURE__ */ jsxs62("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5", children: [
-      item.receipt && /* @__PURE__ */ jsxs62("span", { className: "inline-flex items-center gap-1.5 text-sm text-text-tertiary", children: [
-        /* @__PURE__ */ jsx94(Check11, { className: "size-3 shrink-0 text-text-success", "aria-hidden": "true" }),
+    item.body && /* @__PURE__ */ jsx93("p", { className: "mt-0.5 text-sm leading-snug text-text-secondary", children: item.body }),
+    (item.receipt || item.deepLink) && /* @__PURE__ */ jsxs61("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5", children: [
+      item.receipt && /* @__PURE__ */ jsxs61("span", { className: "inline-flex items-center gap-1.5 text-sm text-text-tertiary", children: [
+        /* @__PURE__ */ jsx93(Check11, { className: "size-3 shrink-0 text-text-success", "aria-hidden": "true" }),
         item.receipt
       ] }),
-      item.deepLink && /* @__PURE__ */ jsx94(
+      item.deepLink && /* @__PURE__ */ jsx93(
         DeepLinkControl,
         {
           link: item.deepLink,
@@ -5993,25 +6116,25 @@ var NotificationCenter = React79.forwardRef(
     const shown = matched.slice(0, limit);
     const remaining = matched.length - shown.length;
     const filtering = q !== "" || status !== "all" || source !== "all" || product !== "all";
-    return /* @__PURE__ */ jsxs62("div", { ref, className: cn("mx-auto max-w-[560px]", className), children: [
-      (header || onMarkAllRead) && /* @__PURE__ */ jsxs62("div", { className: cn("mb-4 flex items-start gap-4", !header && "justify-end"), children: [
-        header && /* @__PURE__ */ jsxs62("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx94("h1", { className: "mb-1.5 text-2xl font-semibold tracking-tight text-text-primary", children: title }),
-          description && /* @__PURE__ */ jsx94("p", { className: "text-sm text-text-tertiary", children: description })
+    return /* @__PURE__ */ jsxs61("div", { ref, className: cn("mx-auto max-w-[560px]", className), children: [
+      (header || onMarkAllRead) && /* @__PURE__ */ jsxs61("div", { className: cn("mb-4 flex items-start gap-4", !header && "justify-end"), children: [
+        header && /* @__PURE__ */ jsxs61("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx93("h1", { className: "mb-1.5 text-2xl font-semibold tracking-tight text-text-primary", children: title }),
+          description && /* @__PURE__ */ jsx93("p", { className: "text-sm text-text-tertiary", children: description })
         ] }),
-        onMarkAllRead && /* @__PURE__ */ jsx94(
+        onMarkAllRead && /* @__PURE__ */ jsx93(
           "button",
           {
             type: "button",
             onClick: () => onMarkAllRead(),
-            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",
+            className: "shrink-0 cursor-pointer 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"
           }
         )
       ] }),
-      searchable && /* @__PURE__ */ jsxs62("div", { className: "mb-3 flex items-center gap-2 rounded-lg bg-bg-elevated px-3 py-2", children: [
-        /* @__PURE__ */ jsx94(Search2, { className: "size-4 shrink-0 text-text-tertiary", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx94(
+      searchable && /* @__PURE__ */ jsxs61("div", { className: "mb-3 flex items-center gap-2 rounded-lg bg-bg-elevated px-3 py-2", children: [
+        /* @__PURE__ */ jsx93(Search4, { className: "size-4 shrink-0 text-text-tertiary", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx93(
           "input",
           {
             type: "text",
@@ -6022,8 +6145,8 @@ var NotificationCenter = React79.forwardRef(
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs62("div", { className: "mb-2 flex flex-wrap gap-1.5", children: [
-        /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsxs61("div", { className: "mb-2 flex flex-wrap gap-1.5", children: [
+        /* @__PURE__ */ jsx93(
           "button",
           {
             type: "button",
@@ -6032,7 +6155,7 @@ var NotificationCenter = React79.forwardRef(
             children: "All"
           }
         ),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx93(
           "button",
           {
             type: "button",
@@ -6042,8 +6165,8 @@ var NotificationCenter = React79.forwardRef(
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs62("div", { className: "mb-2 flex flex-wrap gap-1.5", children: [
-        /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsxs61("div", { className: "mb-2 flex flex-wrap gap-1.5", children: [
+        /* @__PURE__ */ jsx93(
           "button",
           {
             type: "button",
@@ -6052,7 +6175,7 @@ var NotificationCenter = React79.forwardRef(
             children: "All sources"
           }
         ),
-        sourceChips.map((s) => /* @__PURE__ */ jsx94(
+        sourceChips.map((s) => /* @__PURE__ */ jsx93(
           "button",
           {
             type: "button",
@@ -6063,8 +6186,8 @@ var NotificationCenter = React79.forwardRef(
           s
         ))
       ] }),
-      products && products.length > 0 && /* @__PURE__ */ jsxs62("div", { className: "mb-4 flex flex-wrap gap-1.5", children: [
-        /* @__PURE__ */ jsx94(
+      products && products.length > 0 && /* @__PURE__ */ jsxs61("div", { className: "mb-4 flex flex-wrap gap-1.5", children: [
+        /* @__PURE__ */ jsx93(
           "button",
           {
             type: "button",
@@ -6073,7 +6196,7 @@ var NotificationCenter = React79.forwardRef(
             children: "All products"
           }
         ),
-        products.map((p) => /* @__PURE__ */ jsx94(
+        products.map((p) => /* @__PURE__ */ jsx93(
           "button",
           {
             type: "button",
@@ -6084,8 +6207,8 @@ var NotificationCenter = React79.forwardRef(
           p.id
         ))
       ] }),
-      shown.length === 0 ? /* @__PURE__ */ jsx94("p", { className: "rounded-xl bg-bg-elevated px-4 py-10 text-center text-sm leading-relaxed text-text-tertiary", children: filtering ? "Nothing matches." : "Nothing here yet. Everything addressed to you lands here." }) : /* @__PURE__ */ jsxs62("div", { className: "flex flex-col gap-1.5", children: [
-        shown.map((item) => /* @__PURE__ */ jsx94(
+      shown.length === 0 ? /* @__PURE__ */ jsx93("p", { className: "rounded-xl bg-bg-elevated px-4 py-10 text-center text-sm leading-relaxed text-text-tertiary", children: filtering ? "Nothing matches." : "Nothing here yet. Everything addressed to you lands here." }) : /* @__PURE__ */ jsxs61("div", { className: "flex flex-col gap-1.5", children: [
+        shown.map((item) => /* @__PURE__ */ jsx93(
           CenterRow,
           {
             item,
@@ -6096,12 +6219,12 @@ var NotificationCenter = React79.forwardRef(
           },
           item.id
         )),
-        remaining > 0 && /* @__PURE__ */ jsxs62(
+        remaining > 0 && /* @__PURE__ */ jsxs61(
           "button",
           {
             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 duration-fast hover:bg-bg-surface hover:text-text-primary",
+            className: "mt-1 cursor-pointer 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,
@@ -6118,7 +6241,7 @@ NotificationCenter.displayName = "NotificationCenter";
 // src/components/notification-settings.tsx
 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";
+import { Fragment as Fragment11, jsx as jsx94, jsxs as jsxs62 } from "react/jsx-runtime";
 var THRESHOLDS = [
   ["everything", "Everything"],
   ["important", "Important"],
@@ -6130,7 +6253,7 @@ function ThresholdControl({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx94(
     ToggleGroup,
     {
       type: "single",
@@ -6139,7 +6262,7 @@ function ThresholdControl({
       value,
       onValueChange: (next) => next && onChange(next),
       className: "shrink-0",
-      children: THRESHOLDS.map(([threshold, text]) => /* @__PURE__ */ jsx95(ToggleGroupItem, { value: threshold, children: text }, threshold))
+      children: THRESHOLDS.map(([threshold, text]) => /* @__PURE__ */ jsx94(ToggleGroupItem, { value: threshold, children: text }, threshold))
     }
   );
 }
@@ -6176,15 +6299,15 @@ var NotificationSettings = React80.forwardRef(
     const scopeGroup = (scope) => {
       const rows = subscriptions.filter((s) => s.scope === scope);
       if (rows.length === 0) return null;
-      return /* @__PURE__ */ jsxs63("div", { children: [
-        /* @__PURE__ */ jsx95("p", { className: "mb-1.5 px-0.5 text-xs font-bold uppercase tracking-wider text-text-tertiary", children: scope === "product" ? "This product" : "Organization" }),
-        /* @__PURE__ */ jsx95("div", { className: "space-y-2", children: rows.map((sub) => /* @__PURE__ */ jsxs63(
+      return /* @__PURE__ */ jsxs62("div", { children: [
+        /* @__PURE__ */ jsx94("p", { className: "mb-1.5 px-0.5 text-xs font-medium text-text-tertiary", children: scope === "product" ? "This product" : "Organization" }),
+        /* @__PURE__ */ jsx94("div", { className: "space-y-2", children: rows.map((sub) => /* @__PURE__ */ jsxs62(
           "div",
           {
             className: "flex items-center gap-4 rounded-xl bg-bg-elevated px-4 py-3",
             children: [
-              /* @__PURE__ */ jsx95("p", { className: "min-w-0 flex-1 text-sm font-semibold text-text-primary", children: sub.name }),
-              /* @__PURE__ */ jsx95(
+              /* @__PURE__ */ jsx94("p", { className: "min-w-0 flex-1 text-sm font-semibold text-text-primary", children: sub.name }),
+              /* @__PURE__ */ jsx94(
                 ThresholdControl,
                 {
                   label: sub.name,
@@ -6198,10 +6321,10 @@ var NotificationSettings = React80.forwardRef(
         )) })
       ] }, scope);
     };
-    return /* @__PURE__ */ jsxs63("div", { ref, className: cn("space-y-5", className), children: [
-      products && products.length > 0 && /* @__PURE__ */ jsxs63("div", { children: [
-        /* @__PURE__ */ jsx95("p", { className: "mb-2 px-0.5 text-xs font-bold uppercase tracking-wider text-text-tertiary", children: "Preferences for" }),
-        /* @__PURE__ */ jsx95(
+    return /* @__PURE__ */ jsxs62("div", { ref, className: cn("space-y-5", className), children: [
+      products && products.length > 0 && /* @__PURE__ */ jsxs62("div", { children: [
+        /* @__PURE__ */ jsx94("p", { className: "mb-2 px-0.5 text-xs font-medium text-text-tertiary", children: "Preferences for" }),
+        /* @__PURE__ */ jsx94(
           ToggleGroup,
           {
             type: "single",
@@ -6210,35 +6333,35 @@ var NotificationSettings = React80.forwardRef(
             value: tab,
             onValueChange: (next) => next && setTab(next),
             className: "flex-wrap",
-            children: [{ id: DEFAULT_KEY, label: "Default" }, ...products].map((t) => /* @__PURE__ */ jsx95(ToggleGroupItem, { value: t.id, children: t.label }, t.id))
+            children: [{ id: DEFAULT_KEY, label: "Default" }, ...products].map((t) => /* @__PURE__ */ jsx94(ToggleGroupItem, { value: t.id, children: t.label }, t.id))
           }
         )
       ] }),
-      isDefault ? /* @__PURE__ */ jsxs63(Fragment11, { children: [
-        /* @__PURE__ */ jsx95("p", { className: "text-sm leading-relaxed text-text-secondary", children: "Your defaults, applied to every product unless you customize one. Everything addressed to you always lands in the in-app record; that cannot be turned off." }),
-        /* @__PURE__ */ jsxs63(Card, { className: "border-none bg-bg-elevated p-5", children: [
-          /* @__PURE__ */ jsx95("p", { className: "mb-1.5 text-xs font-bold uppercase tracking-wide text-text-tertiary", children: "Push to" }),
-          /* @__PURE__ */ jsx95("p", { className: "mb-3 text-sm leading-relaxed text-text-secondary", children: "Forward notifications beyond the in-app record to a connected integration." }),
-          pushSlot ?? /* @__PURE__ */ jsx95("div", { className: "rounded-lg bg-bg-surface px-4 py-6 text-center", children: /* @__PURE__ */ jsx95("p", { className: "text-sm text-text-tertiary", children: "No integrations connected." }) })
+      isDefault ? /* @__PURE__ */ jsxs62(Fragment11, { children: [
+        /* @__PURE__ */ jsx94("p", { className: "text-sm leading-relaxed text-text-secondary", children: "Your defaults, applied to every product unless you customize one. Everything addressed to you always lands in the in-app record; that cannot be turned off." }),
+        /* @__PURE__ */ jsxs62(Card, { className: "border-none bg-bg-elevated p-5", children: [
+          /* @__PURE__ */ jsx94(CardTitle, { as: "p", className: "mb-1.5", children: "Push to" }),
+          /* @__PURE__ */ jsx94("p", { className: "mb-3 text-sm leading-relaxed text-text-secondary", children: "Forward notifications beyond the in-app record to a connected integration." }),
+          pushSlot ?? /* @__PURE__ */ jsx94("div", { className: "rounded-lg bg-bg-surface px-4 py-6 text-center", children: /* @__PURE__ */ jsx94("p", { className: "text-sm text-text-tertiary", children: "No integrations connected." }) })
         ] }),
-        mutes.length > 0 && /* @__PURE__ */ jsxs63("div", { children: [
-          /* @__PURE__ */ jsx95("p", { className: "mb-1.5 px-0.5 text-xs font-bold uppercase tracking-wider text-text-tertiary", children: "Muted" }),
-          /* @__PURE__ */ jsx95(Card, { className: "border-none bg-bg-elevated p-2", children: mutes.map((m) => /* @__PURE__ */ jsxs63("div", { className: "flex items-center gap-3 rounded-lg px-3 py-2.5", children: [
-            /* @__PURE__ */ jsx95(Moon2, { className: "size-4 shrink-0 text-text-tertiary", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsxs63("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx95("p", { className: "text-sm font-medium text-text-primary", children: m.source }),
-              /* @__PURE__ */ jsxs63("p", { className: "text-sm text-text-tertiary", children: [
-                "Muted \u2014 ",
+        mutes.length > 0 && /* @__PURE__ */ jsxs62("div", { children: [
+          /* @__PURE__ */ jsx94("p", { className: "mb-1.5 px-0.5 text-xs font-medium text-text-tertiary", children: "Muted" }),
+          /* @__PURE__ */ jsx94(Card, { className: "border-none bg-bg-elevated p-2", children: mutes.map((m) => /* @__PURE__ */ jsxs62("div", { className: "flex items-center gap-3 rounded-lg px-3 py-2.5", children: [
+            /* @__PURE__ */ jsx94(Moon2, { className: "size-4 shrink-0 text-text-tertiary", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs62("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx94("p", { className: "text-sm font-medium text-text-primary", children: m.source }),
+              /* @__PURE__ */ jsxs62("p", { className: "text-sm text-text-tertiary", children: [
+                "Muted, ",
                 m.label,
                 ". Critical still comes through."
               ] })
             ] }),
-            /* @__PURE__ */ jsx95(
+            /* @__PURE__ */ jsx94(
               "button",
               {
                 type: "button",
                 onClick: () => onUnmute?.(m.source),
-                className: "rounded-md px-2.5 py-1 text-sm font-medium text-text-brand transition-colors duration-fast hover:bg-bg-surface",
+                className: "cursor-pointer rounded-md px-2.5 py-1 text-sm font-medium text-text-brand transition-colors duration-fast hover:bg-bg-surface",
                 children: "Unmute"
               }
             )
@@ -6246,13 +6369,13 @@ var NotificationSettings = React80.forwardRef(
         ] }),
         scopeGroup("product"),
         scopeGroup("org"),
-        onSoundEnabledChange && /* @__PURE__ */ jsx95(Card, { className: "border-none bg-bg-elevated p-4", children: /* @__PURE__ */ jsxs63("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx95(Volume2, { className: "size-4 text-text-tertiary", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs63("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsx95("p", { className: "text-sm font-medium text-text-primary", children: "Notification sound" }),
-            /* @__PURE__ */ jsx95("p", { className: "text-sm text-text-tertiary", children: "Play a tone when a notification arrives. Critical always chimes." })
+        onSoundEnabledChange && /* @__PURE__ */ jsx94(Card, { className: "border-none bg-bg-elevated p-4", children: /* @__PURE__ */ jsxs62("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx94(Volume2, { className: "size-4 text-text-tertiary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs62("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx94("p", { className: "text-sm font-medium text-text-primary", children: "Notification sound" }),
+            /* @__PURE__ */ jsx94("p", { className: "text-sm text-text-tertiary", children: "Play a tone when a notification arrives. Critical always chimes." })
           ] }),
-          /* @__PURE__ */ jsx95(
+          /* @__PURE__ */ jsx94(
             Switch,
             {
               checked: soundEnabled ?? false,
@@ -6261,40 +6384,40 @@ var NotificationSettings = React80.forwardRef(
             }
           )
         ] }) })
-      ] }) : !customized ? /* @__PURE__ */ jsxs63(Card, { className: "border-none bg-bg-elevated p-8 text-center", children: [
-        /* @__PURE__ */ jsxs63("p", { className: "text-sm font-semibold text-text-primary", children: [
+      ] }) : !customized ? /* @__PURE__ */ jsxs62(Card, { className: "border-none bg-bg-elevated p-8 text-center", children: [
+        /* @__PURE__ */ jsxs62("p", { className: "text-sm font-semibold text-text-primary", children: [
           productLabel,
           " follows your Default preferences."
         ] }),
-        /* @__PURE__ */ jsx95("p", { className: "mx-auto mt-1.5 max-w-[360px] text-sm leading-relaxed text-text-tertiary", children: "Interrupt thresholds, sound and forwarding all come from Default. Opt in to give this product its own interrupt thresholds." }),
-        /* @__PURE__ */ jsxs63(
+        /* @__PURE__ */ jsx94("p", { className: "mx-auto mt-1.5 max-w-[360px] text-sm leading-relaxed text-text-tertiary", children: "Interrupt thresholds, sound and forwarding all come from Default. Opt in to give this product its own interrupt thresholds." }),
+        /* @__PURE__ */ jsxs62(
           "button",
           {
             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 duration-fast hover:bg-bg-brand-hover",
+            className: "mt-5 inline-flex cursor-pointer 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" }),
+              /* @__PURE__ */ jsx94(Plus3, { className: "size-4", "aria-hidden": "true" }),
               " Customize for ",
               productLabel
             ]
           }
         )
-      ] }) : /* @__PURE__ */ jsxs63(Fragment11, { children: [
-        /* @__PURE__ */ jsx95(Card, { className: "border-none bg-bg-brand-subtle p-3.5", children: /* @__PURE__ */ jsxs63("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxs63("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsxs63("p", { className: "text-sm font-semibold text-text-brand", children: [
+      ] }) : /* @__PURE__ */ jsxs62(Fragment11, { children: [
+        /* @__PURE__ */ jsx94(Card, { className: "border-none bg-bg-brand-subtle p-3.5", children: /* @__PURE__ */ jsxs62("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs62("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs62("p", { className: "text-sm font-semibold text-text-brand", children: [
               "Custom preferences for ",
               productLabel
             ] }),
-            /* @__PURE__ */ jsx95("p", { className: "text-sm leading-relaxed text-text-secondary", children: "Only the interrupt thresholds below differ. Sound and forwarding follow Default." })
+            /* @__PURE__ */ jsx94("p", { className: "text-sm leading-relaxed text-text-secondary", children: "Only the interrupt thresholds below differ. Sound and forwarding follow Default." })
           ] }),
-          /* @__PURE__ */ jsx95(
+          /* @__PURE__ */ jsx94(
             "button",
             {
               type: "button",
               onClick: resetToDefault,
-              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",
+              className: "shrink-0 cursor-pointer 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"
             }
           )
@@ -6309,11 +6432,11 @@ NotificationSettings.displayName = "NotificationSettings";
 // src/components/notification-toast.tsx
 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 duration-fast";
+import { jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
+var chipBase2 = "cursor-pointer 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 duration-fast hover:text-text-primary";
+var linkAction = "cursor-pointer text-sm font-semibold text-text-brand transition-colors duration-fast hover:text-text-primary";
 var NotificationToast = React81.forwardRef(
   ({
     item,
@@ -6333,7 +6456,7 @@ var NotificationToast = React81.forwardRef(
     const progressLine = progressLabel === void 0 && percent !== void 0 ? `live, ${Math.round(percent)}%` : progressLabel;
     const barId = React81.useId();
     const hasProgressLine = progressLine !== null && progressLine !== void 0;
-    return /* @__PURE__ */ jsxs64(
+    return /* @__PURE__ */ jsxs63(
       "div",
       {
         ref,
@@ -6344,40 +6467,40 @@ var NotificationToast = React81.forwardRef(
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs64("div", { className: "flex items-center gap-2", children: [
-            showSource && /* @__PURE__ */ jsx96("span", { className: "text-xs font-semibold uppercase tracking-[0.09em] text-text-secondary", children: item.source }),
-            /* @__PURE__ */ jsx96(Badge, { variant: severityBadgeVariant(item.severity), children: severityLabels[item.severity] }),
-            (overflow || onDismiss) && /* @__PURE__ */ jsxs64("span", { className: "-mr-1 ml-auto flex shrink-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsxs63("div", { className: "flex items-center gap-2", children: [
+            showSource && /* @__PURE__ */ jsx95("span", { className: "text-xs font-semibold text-text-tertiary", children: item.source }),
+            /* @__PURE__ */ jsx95(Badge, { variant: severityBadgeVariant(item.severity), children: severityLabels[item.severity] }),
+            (overflow || onDismiss) && /* @__PURE__ */ jsxs63("span", { className: "-mr-1 ml-auto flex shrink-0 items-center gap-1", children: [
               overflow,
-              onDismiss && /* @__PURE__ */ jsx96(
+              onDismiss && /* @__PURE__ */ jsx95(
                 "button",
                 {
                   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 duration-fast hover:bg-bg-surface hover:text-text-primary",
-                  children: /* @__PURE__ */ jsx96(X4, { className: "size-3.5", "aria-hidden": "true" })
+                  className: "flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-text-tertiary transition-colors duration-fast hover:bg-bg-surface hover:text-text-primary",
+                  children: /* @__PURE__ */ jsx95(X4, { className: "size-3.5", "aria-hidden": "true" })
                 }
               )
             ] })
           ] }),
-          onItemClick ? /* @__PURE__ */ jsx96(
+          onItemClick ? /* @__PURE__ */ jsx95(
             "button",
             {
               type: "button",
               onClick: () => onItemClick(item),
-              className: "mt-1 block text-left text-sm font-semibold leading-snug text-text-primary underline-offset-2 hover:underline",
+              className: "mt-1 block cursor-pointer text-left text-sm font-semibold leading-snug text-text-primary underline-offset-2 hover:underline",
               children: item.title
             }
-          ) : /* @__PURE__ */ jsx96("p", { className: "mt-1 text-sm font-semibold leading-snug text-text-primary", children: item.title }),
-          item.body && /* @__PURE__ */ jsx96("p", { className: "mt-0.5 text-sm leading-snug text-text-secondary", children: item.body }),
-          note && /* @__PURE__ */ jsx96("p", { className: "mt-1.5 text-xs font-medium text-text-warning", children: note }),
+          ) : /* @__PURE__ */ jsx95("p", { className: "mt-1 text-sm font-semibold leading-snug text-text-primary", children: item.title }),
+          item.body && /* @__PURE__ */ jsx95("p", { className: "mt-0.5 text-sm leading-snug text-text-secondary", children: item.body }),
+          note && /* @__PURE__ */ jsx95("p", { className: "mt-1.5 text-xs font-medium text-text-warning", children: note }),
           percent !== void 0 && // The card is a `role="status"`, which implies `aria-atomic` — every tick of the bar would
           // otherwise re-announce the whole card. `aria-live="off"` on the subtree that moves is the
           // one cheap mitigation: the bar stays in the accessibility tree to be read on demand, it
           // just stops interrupting.
-          /* @__PURE__ */ jsxs64("div", { className: "mt-2", "aria-live": "off", children: [
-            /* @__PURE__ */ jsx96(
+          /* @__PURE__ */ jsxs63("div", { className: "mt-2", "aria-live": "off", children: [
+            /* @__PURE__ */ jsx95(
               Progress,
               {
                 value: percent,
@@ -6386,11 +6509,11 @@ var NotificationToast = React81.forwardRef(
                 "aria-label": hasProgressLine ? void 0 : "Progress"
               }
             ),
-            hasProgressLine && /* @__PURE__ */ jsx96("p", { id: barId, className: "mt-0.5 text-xs text-text-secondary", children: progressLine })
+            hasProgressLine && /* @__PURE__ */ jsx95("p", { id: barId, className: "mt-0.5 text-xs text-text-secondary", children: progressLine })
           ] }),
-          actions.length > 0 && /* @__PURE__ */ jsx96("div", { className: "mt-2.5 flex flex-wrap items-center gap-2", children: actions.map((action) => {
+          actions.length > 0 && /* @__PURE__ */ jsx95("div", { className: "mt-2.5 flex flex-wrap items-center gap-2", children: actions.map((action) => {
             const variant = action.variant ?? "link";
-            return /* @__PURE__ */ jsx96(
+            return /* @__PURE__ */ jsx95(
               "button",
               {
                 type: "button",
@@ -6410,7 +6533,7 @@ NotificationToast.displayName = "NotificationToast";
 
 // src/components/notification-toaster.tsx
 import * as React82 from "react";
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var positions = {
   "bottom-right": "bottom-6 right-6 flex-col",
   "bottom-left": "bottom-6 left-6 flex-col",
@@ -6483,7 +6606,7 @@ var NotificationToaster = React82.forwardRef(
       };
     }, [liveIds, paused, fyiDwell, importantDwell, criticalDwell]);
     if (shown.length === 0) return null;
-    return /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx96(
       "div",
       {
         ref,
@@ -6496,7 +6619,7 @@ var NotificationToaster = React82.forwardRef(
           positions[position],
           className
         ),
-        children: shown.map((item, i) => /* @__PURE__ */ jsx97("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx97(
+        children: shown.map((item, i) => /* @__PURE__ */ jsx96("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx96(
           NotificationToast,
           {
             item,
@@ -6778,7 +6901,7 @@ var AUTH_QUIET_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[1
 var AUTH_BUTTON_SHADOW = "var(--auth-btn-shadow)";
 
 // src/components/organization-onboarding-form.tsx
-import { jsx as jsx98, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs64 } from "react/jsx-runtime";
 var CONTROLLER_SHARE_PCT = 50;
 var MAX_BENEFICIAL_OWNERS = 50;
 var REQUIRED_FIELD_LABELS = {
@@ -6793,7 +6916,7 @@ function isOwnershipViolation(violation) {
   return /ownership[_\s-]?confirmed/i.test(violation);
 }
 function RequiredMark() {
-  return /* @__PURE__ */ jsx98("span", { className: "text-text-danger", children: " *" });
+  return /* @__PURE__ */ jsx97("span", { className: "text-text-danger", children: " *" });
 }
 function parseShare(raw) {
   if (!/^\d{1,3}$/.test(raw.trim())) return null;
@@ -6913,12 +7036,12 @@ function OrganizationOnboardingForm({
     submitting,
     serverError
   ]);
-  const countryField = (params) => /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsxs65(Label2, { htmlFor: params.id, children: [
+  const countryField = (params) => /* @__PURE__ */ jsxs64("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs64(Label2, { htmlFor: params.id, children: [
       params.label,
-      /* @__PURE__ */ jsx98(RequiredMark, {})
+      /* @__PURE__ */ jsx97(RequiredMark, {})
     ] }),
-    /* @__PURE__ */ jsx98(
+    /* @__PURE__ */ jsx97(
       Select,
       {
         id: params.id,
@@ -6931,13 +7054,13 @@ function OrganizationOnboardingForm({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs65("form", { onSubmit: handleSubmit, className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-name", children: [
+  return /* @__PURE__ */ jsxs64("form", { onSubmit: handleSubmit, className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs64("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxs64(Label2, { htmlFor: "create-org-name", children: [
         REQUIRED_FIELD_LABELS.name,
-        /* @__PURE__ */ jsx98(RequiredMark, {})
+        /* @__PURE__ */ jsx97(RequiredMark, {})
       ] }),
-      /* @__PURE__ */ jsx98(
+      /* @__PURE__ */ jsx97(
         Input,
         {
           id: "create-org-name",
@@ -6948,12 +7071,12 @@ function OrganizationOnboardingForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-legal-name", children: [
+    /* @__PURE__ */ jsxs64("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxs64(Label2, { htmlFor: "create-org-legal-name", children: [
         REQUIRED_FIELD_LABELS.legalName,
-        /* @__PURE__ */ jsx98(RequiredMark, {})
+        /* @__PURE__ */ jsx97(RequiredMark, {})
       ] }),
-      /* @__PURE__ */ jsx98(
+      /* @__PURE__ */ jsx97(
         Input,
         {
           id: "create-org-legal-name",
@@ -6964,12 +7087,12 @@ function OrganizationOnboardingForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-owner-name", children: [
+    /* @__PURE__ */ jsxs64("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxs64(Label2, { htmlFor: "create-org-owner-name", children: [
         REQUIRED_FIELD_LABELS.ownerName,
-        /* @__PURE__ */ jsx98(RequiredMark, {})
+        /* @__PURE__ */ jsx97(RequiredMark, {})
       ] }),
-      /* @__PURE__ */ jsx98(
+      /* @__PURE__ */ jsx97(
         Input,
         {
           id: "create-org-owner-name",
@@ -6992,10 +7115,10 @@ function OrganizationOnboardingForm({
       value: residencyCountry,
       onChange: setResidencyCountry
     }),
-    /* @__PURE__ */ jsxs65("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs65("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx98(Label2, { children: "Beneficial owners" }),
-        /* @__PURE__ */ jsx98(
+    /* @__PURE__ */ jsxs64("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs64("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx97(Label2, { children: "Beneficial owners" }),
+        /* @__PURE__ */ jsx97(
           Button,
           {
             type: "button",
@@ -7008,16 +7131,16 @@ function OrganizationOnboardingForm({
           }
         )
       ] }),
-      owners.length === 0 && /* @__PURE__ */ jsx98("p", { className: "text-xs text-text-tertiary", children: "List the natural persons who ultimately own or control the organization." }),
-      owners.map((row) => /* @__PURE__ */ jsxs65(
+      owners.length === 0 && /* @__PURE__ */ jsx97("p", { className: "text-xs text-text-tertiary", children: "List the natural persons who ultimately own or control the organization." }),
+      owners.map((row) => /* @__PURE__ */ jsxs64(
         "div",
         {
           "data-testid": `beneficial-owner-row-${row.key}`,
           className: "flex items-end gap-2",
           children: [
-            /* @__PURE__ */ jsxs65("div", { className: "flex-1 space-y-1", children: [
-              /* @__PURE__ */ jsx98(Label2, { htmlFor: `bo-name-${row.key}`, className: "text-xs", children: "Name" }),
-              /* @__PURE__ */ jsx98(
+            /* @__PURE__ */ jsxs64("div", { className: "flex-1 space-y-1", children: [
+              /* @__PURE__ */ jsx97(Label2, { htmlFor: `bo-name-${row.key}`, className: "text-xs", children: "Name" }),
+              /* @__PURE__ */ jsx97(
                 Input,
                 {
                   id: `bo-name-${row.key}`,
@@ -7027,9 +7150,9 @@ function OrganizationOnboardingForm({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs65("div", { className: "w-40 space-y-1", children: [
-              /* @__PURE__ */ jsx98(Label2, { htmlFor: `bo-country-${row.key}`, className: "text-xs", children: "Country" }),
-              /* @__PURE__ */ jsx98(
+            /* @__PURE__ */ jsxs64("div", { className: "w-40 space-y-1", children: [
+              /* @__PURE__ */ jsx97(Label2, { htmlFor: `bo-country-${row.key}`, className: "text-xs", children: "Country" }),
+              /* @__PURE__ */ jsx97(
                 Select,
                 {
                   id: `bo-country-${row.key}`,
@@ -7042,9 +7165,9 @@ function OrganizationOnboardingForm({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs65("div", { className: "w-24 space-y-1", children: [
-              /* @__PURE__ */ jsx98(Label2, { htmlFor: `bo-share-${row.key}`, className: "text-xs", children: "Share %" }),
-              /* @__PURE__ */ jsx98(
+            /* @__PURE__ */ jsxs64("div", { className: "w-24 space-y-1", children: [
+              /* @__PURE__ */ jsx97(Label2, { htmlFor: `bo-share-${row.key}`, className: "text-xs", children: "Share %" }),
+              /* @__PURE__ */ jsx97(
                 Input,
                 {
                   id: `bo-share-${row.key}`,
@@ -7055,7 +7178,7 @@ function OrganizationOnboardingForm({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx98(
+            /* @__PURE__ */ jsx97(
               Button,
               {
                 type: "button",
@@ -7070,16 +7193,16 @@ function OrganizationOnboardingForm({
         },
         row.key
       )),
-      !ownersValid && /* @__PURE__ */ jsx98("p", { "data-testid": "beneficial-owners-error", className: "text-xs text-text-danger", children: "Every owner needs a name, a country and a share between 0 and 100." }),
-      shareSum > 100 && /* @__PURE__ */ jsxs65("p", { "data-testid": "beneficial-owners-sum-warning", className: "text-xs text-text-warning", children: [
+      !ownersValid && /* @__PURE__ */ jsx97("p", { "data-testid": "beneficial-owners-error", className: "text-xs text-text-danger", children: "Every owner needs a name, a country and a share between 0 and 100." }),
+      shareSum > 100 && /* @__PURE__ */ jsxs64("p", { "data-testid": "beneficial-owners-sum-warning", className: "text-xs text-text-warning", children: [
         "The listed shares add up to ",
         shareSum,
         "%, which is more than 100%."
       ] })
     ] }),
-    needsOwnershipConfirmation && /* @__PURE__ */ jsxs65("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxs65("div", { className: "flex items-start gap-2", children: [
-        /* @__PURE__ */ jsx98(
+    needsOwnershipConfirmation && /* @__PURE__ */ jsxs64("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs64("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx97(
           Checkbox,
           {
             id: "create-org-ownership-confirmed",
@@ -7089,19 +7212,19 @@ function OrganizationOnboardingForm({
             onCheckedChange: (value) => setOwnershipConfirmed(value === true)
           }
         ),
-        /* @__PURE__ */ jsxs65(
+        /* @__PURE__ */ jsxs64(
           Label2,
           {
             htmlFor: "create-org-ownership-confirmed",
             className: "text-xs font-regular leading-snug",
             children: [
               "I confirm the ownership structure above is complete and correct",
-              /* @__PURE__ */ jsx98(RequiredMark, {})
+              /* @__PURE__ */ jsx97(RequiredMark, {})
             ]
           }
         )
       ] }),
-      showConfirmationError && /* @__PURE__ */ jsx98(
+      showConfirmationError && /* @__PURE__ */ jsx97(
         "p",
         {
           id: "create-org-ownership-error",
@@ -7111,31 +7234,31 @@ function OrganizationOnboardingForm({
         }
       )
     ] }),
-    showRequiredError && /* @__PURE__ */ jsx98(InlineError, { "data-testid": "create-org-required-error", children: missingRequired.length === 1 ? `${missingRequired[0]} is required` : `These fields are required: ${missingRequired.join(", ")}` }),
-    (serverError || otherViolations.length > 0) && /* @__PURE__ */ jsxs65(InlineError, { "data-testid": "create-org-server-error", children: [
+    showRequiredError && /* @__PURE__ */ jsx97(InlineError, { "data-testid": "create-org-required-error", children: missingRequired.length === 1 ? `${missingRequired[0]} is required` : `These fields are required: ${missingRequired.join(", ")}` }),
+    (serverError || otherViolations.length > 0) && /* @__PURE__ */ jsxs64(InlineError, { "data-testid": "create-org-server-error", children: [
       serverError,
-      otherViolations.length > 0 && /* @__PURE__ */ jsx98("ul", { "data-testid": "create-org-violations", className: "mt-1 list-disc pl-4", children: otherViolations.map((violation) => /* @__PURE__ */ jsx98("li", { children: violation }, violation)) })
+      otherViolations.length > 0 && /* @__PURE__ */ jsx97("ul", { "data-testid": "create-org-violations", className: "mt-1 list-disc pl-4", children: otherViolations.map((violation) => /* @__PURE__ */ jsx97("li", { children: violation }, violation)) })
     ] }),
-    /* @__PURE__ */ jsxs65("div", { className: "space-y-2 pt-1", children: [
-      /* @__PURE__ */ jsx98(
+    /* @__PURE__ */ jsxs64("div", { className: "space-y-2 pt-1", children: [
+      /* @__PURE__ */ jsx97(
         "button",
         {
           type: "submit",
           "data-testid": "submit-create-org",
           disabled: !canSubmit,
-          className: AUTH_FILLED_BUTTON,
+          className: cn("cursor-pointer", AUTH_FILLED_BUTTON),
           style: { boxShadow: AUTH_BUTTON_SHADOW },
           children: submitting ? "Creating\u2026" : submitLabel
         }
       ),
-      onCancel && /* @__PURE__ */ jsx98("button", { type: "button", onClick: onCancel, className: AUTH_QUIET_BUTTON, children: "Cancel" })
+      onCancel && /* @__PURE__ */ jsx97("button", { type: "button", onClick: onCancel, className: cn("cursor-pointer", AUTH_QUIET_BUTTON), children: "Cancel" })
     ] })
   ] });
 }
 
 // src/components/list-columns.tsx
 import * as React84 from "react";
-import { jsx as jsx99, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs65 } 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";
 var cellsClass = "flex shrink-0 items-center gap-3";
@@ -7155,11 +7278,11 @@ function warnDuplicateKeys(columns, where) {
 }
 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 }),
-    /* @__PURE__ */ jsx99("span", { className: "min-w-0 flex-1 truncate", children: lead }),
-    /* @__PURE__ */ jsx99("span", { className: cellsClass, children: columns.map((c) => /* @__PURE__ */ jsx99("span", { className: cn(CELL_WIDTH[c.width], cellClass), children: c.label }, c.key)) }),
-    trailing && /* @__PURE__ */ jsx99("span", { className: "size-4 shrink-0", "aria-hidden": true })
+  return /* @__PURE__ */ jsxs65("div", { ref, className: cn(headerClass, className), ...props, children: [
+    mark && /* @__PURE__ */ jsx98("span", { className: "size-8 shrink-0", "aria-hidden": true }),
+    /* @__PURE__ */ jsx98("span", { className: "min-w-0 flex-1 truncate", children: lead }),
+    /* @__PURE__ */ jsx98("span", { className: cellsClass, children: columns.map((c) => /* @__PURE__ */ jsx98("span", { className: cn(CELL_WIDTH[c.width], cellClass), children: c.label }, c.key)) }),
+    trailing && /* @__PURE__ */ jsx98("span", { className: "size-4 shrink-0", "aria-hidden": true })
   ] });
 });
 function cellValue(values, column) {
@@ -7169,7 +7292,7 @@ function cellValue(values, column) {
 }
 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(
+  return /* @__PURE__ */ jsx98("span", { ref, className: cn(cellsClass, className), ...props, children: columns.map((c) => /* @__PURE__ */ jsx98(
     "span",
     {
       className: cn(CELL_WIDTH[c.width], cellClass, c.quiet && "text-text-tertiary"),
@@ -7183,8 +7306,8 @@ ListCells.displayName = "ListCells";
 
 // src/components/theme-picker.tsx
 import * as React85 from "react";
-import { Check as Check12, Monitor } from "lucide-react";
-import { jsx as jsx100, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Check as Check12 } from "lucide-react";
+import { jsx as jsx99, jsxs as jsxs66 } from "react/jsx-runtime";
 var THEME_SWATCHES = {
   //        --bg-surface  --bg-sunken   --bg-overlay  --border-default  --text-tertiary
   light: { canvas: "#f2f3f4", rail: "#e1e2e4", body: "#ffffff", quiet: "#bbbec7", strong: "#535a6e" },
@@ -7198,13 +7321,13 @@ var OPTIONS = [
   { value: "system", label: "Auto", name: "Auto, follows your device theme" }
 ];
 function Panels({ palette }) {
-  return /* @__PURE__ */ jsxs67("span", { className: "flex h-full gap-1.5 p-1.5", style: { background: palette.canvas }, children: [
-    /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsxs66("span", { className: "flex h-full gap-1.5 p-1.5", style: { background: palette.canvas }, children: [
+    /* @__PURE__ */ jsx99(
       "span",
       {
         className: "flex flex-col gap-1.5 p-1.5",
         style: { width: "28%", borderRadius: 5, background: palette.rail },
-        children: RAIL_BARS.map((w, i) => /* @__PURE__ */ jsx100(
+        children: RAIL_BARS.map((w, i) => /* @__PURE__ */ jsx99(
           "span",
           {
             className: "rounded-full",
@@ -7214,12 +7337,12 @@ function Panels({ palette }) {
         ))
       }
     ),
-    /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsx99(
       "span",
       {
         className: "flex flex-1 flex-col gap-1.5 border p-2",
         style: { borderRadius: 5, background: palette.body, borderColor: palette.quiet },
-        children: BODY_BARS.map((w, i) => /* @__PURE__ */ jsx100(
+        children: BODY_BARS.map((w, i) => /* @__PURE__ */ jsx99(
           "span",
           {
             className: "rounded-full",
@@ -7231,17 +7354,23 @@ function Panels({ palette }) {
     )
   ] });
 }
-var autoPlateClass = "flex h-full items-center justify-center bg-bg-surface";
+var CUT = "polygon(0 0, -8px 0, -8px calc(100% + 8px), calc(100% + 8px) calc(100% + 8px), calc(100% + 8px) calc(100% - 16px), 100% calc(100% - 16px))";
+function AutoPanels() {
+  return /* @__PURE__ */ jsxs66("span", { className: "relative block h-full", children: [
+    /* @__PURE__ */ jsx99("span", { className: "absolute inset-0", children: /* @__PURE__ */ jsx99(Panels, { palette: THEME_SWATCHES.light }) }),
+    /* @__PURE__ */ jsx99("span", { className: "absolute inset-0", style: { clipPath: CUT }, children: /* @__PURE__ */ jsx99(Panels, { palette: THEME_SWATCHES.dark }) })
+  ] });
+}
 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 duration-fast hover:bg-bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus";
+var cardClass = "grid cursor-pointer gap-2 rounded-lg p-1.5 text-left transition-colors duration-fast hover:bg-[var(--hov-bg)] 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 = 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) => {
+  return /* @__PURE__ */ jsx99("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 (
       // Not a `Button` (Guidelines/When it isn't a Button): the preview is the control, and
       // `aria-pressed` is what says which one is on.
-      /* @__PURE__ */ jsxs67(
+      /* @__PURE__ */ jsxs66(
         "button",
         {
           type: "button",
@@ -7250,8 +7379,8 @@ var Picker = React85.forwardRef(function Picker2({ value, onValueChange, classNa
           onClick: () => onValueChange(o.value),
           className: cardClass,
           children: [
-            /* @__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(
+            /* @__PURE__ */ jsx99("span", { className: cn(previewClass, selected && "border-border-strong"), "aria-hidden": true, children: o.value === "system" ? /* @__PURE__ */ jsx99(AutoPanels, {}) : /* @__PURE__ */ jsx99(Panels, { palette: THEME_SWATCHES[o.value] }) }),
+            /* @__PURE__ */ jsxs66(
               "span",
               {
                 className: cn(
@@ -7259,7 +7388,7 @@ var Picker = React85.forwardRef(function Picker2({ value, onValueChange, classNa
                   selected ? "font-semibold text-text-primary" : "text-text-secondary"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx100(Check12, { className: cn("size-4 shrink-0", !selected && "invisible"), "aria-hidden": true }),
+                  /* @__PURE__ */ jsx99(Check12, { className: cn("size-4 shrink-0", !selected && "invisible"), "aria-hidden": true }),
                   o.label
                 ]
               }
@@ -7273,7 +7402,7 @@ var Picker = React85.forwardRef(function Picker2({ value, onValueChange, classNa
 });
 var WiredPicker = React85.forwardRef(function WiredPicker2({ onValueChange, ...props }, ref) {
   const { theme, setTheme } = useTheme();
-  return /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsx99(
     Picker,
     {
       ...props,
@@ -7293,15 +7422,15 @@ var ThemePicker = React85.forwardRef(function ThemePicker2({ value, onValueChang
       "[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."
     );
   }
-  return controlled.current ? /* @__PURE__ */ jsx100(Picker, { ...props, ref, value: value ?? "system", onValueChange: onValueChange ?? (() => {
-  }) }) : /* @__PURE__ */ jsx100(WiredPicker, { ...props, ref, onValueChange });
+  return controlled.current ? /* @__PURE__ */ jsx99(Picker, { ...props, ref, value: value ?? "system", onValueChange: onValueChange ?? (() => {
+  }) }) : /* @__PURE__ */ jsx99(WiredPicker, { ...props, ref, onValueChange });
 });
 ThemePicker.displayName = "ThemePicker";
 
 // src/components/secret-reveal.tsx
 import * as React86 from "react";
 import { Copy as Copy2, Download } from "lucide-react";
-import { jsx as jsx101, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs67 } from "react/jsx-runtime";
 var asText = (value) => Array.isArray(value) ? value.join("\n") : value;
 var REVEALED = "A secret is on screen and will not be shown again.";
 var REFUSED = "The browser refused the clipboard. Select the value to copy it.";
@@ -7309,13 +7438,13 @@ function SecretValue({ value }) {
   if (Array.isArray(value)) {
     const half = Math.ceil(value.length / 2);
     const columns = [value.slice(0, half), value.slice(half)].filter((column) => column.length > 0);
-    return /* @__PURE__ */ jsx101("div", { className: "flex w-fit gap-x-12", children: columns.map((column, index) => (
+    return /* @__PURE__ */ jsx100("div", { className: "flex w-fit gap-x-12", children: columns.map((column, index) => (
       // Neither the columns nor the values inside one are ever reordered, and two identical
       // values in a list are legal, so the index is the key and the value is not.
-      /* @__PURE__ */ jsx101("div", { className: "grid gap-y-1.5", children: column.map((line, row) => /* @__PURE__ */ jsx101("code", { className: "font-mono text-sm font-medium tabular-nums text-text-primary", children: line }, row)) }, index)
+      /* @__PURE__ */ jsx100("div", { className: "grid gap-y-1.5", children: column.map((line, row) => /* @__PURE__ */ jsx100("code", { className: "font-mono text-sm font-medium tabular-nums text-text-primary", children: line }, row)) }, index)
     )) });
   }
-  return /* @__PURE__ */ jsx101("code", { className: "block break-all font-mono text-sm font-medium text-text-primary", children: value });
+  return /* @__PURE__ */ jsx100("code", { className: "block break-all font-mono text-sm font-medium text-text-primary", children: value });
 }
 var SecretReveal = React86.forwardRef(
   ({
@@ -7371,12 +7500,12 @@ var SecretReveal = React86.forwardRef(
       reportTaken();
       onDownload?.();
     };
-    return /* @__PURE__ */ jsx101("div", { ref, className: cn("overflow-hidden rounded-lg bg-bg-sunken", className), ...props, children: /* @__PURE__ */ jsx101("div", { className: highlightClassName, ref: highlightRef, children: /* @__PURE__ */ jsxs68("div", { className: "grid gap-3 rounded-lg border border-border-strong px-4 py-3", children: [
-      /* @__PURE__ */ jsx101("span", { role: "status", className: "sr-only", children: announced }),
-      /* @__PURE__ */ jsx101("div", { id: captionId, className: "text-sm text-text-secondary", children: caption }),
-      /* @__PURE__ */ jsx101(SecretValue, { value }),
-      /* @__PURE__ */ jsxs68("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsx101(
+    return /* @__PURE__ */ jsx100("div", { ref, className: cn("overflow-hidden rounded-lg bg-bg-sunken", className), ...props, children: /* @__PURE__ */ jsx100("div", { className: highlightClassName, ref: highlightRef, children: /* @__PURE__ */ jsxs67("div", { className: "grid gap-3 rounded-lg border border-border-strong px-4 py-3", children: [
+      /* @__PURE__ */ jsx100("span", { role: "status", className: "sr-only", children: announced }),
+      /* @__PURE__ */ jsx100("div", { id: captionId, className: "text-sm text-text-secondary", children: caption }),
+      /* @__PURE__ */ jsx100(SecretValue, { value }),
+      /* @__PURE__ */ jsxs67("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx100(
           Button,
           {
             ref: copyRef,
@@ -7384,12 +7513,12 @@ var SecretReveal = React86.forwardRef(
             "aria-describedby": captionId,
             variant: "outline",
             size: "sm",
-            icon: /* @__PURE__ */ jsx101(Copy2, {}),
+            icon: /* @__PURE__ */ jsx100(Copy2, {}),
             children: copyLabel ?? (Array.isArray(value) ? "Copy all" : "Copy")
           }
         ),
-        onDownload && /* @__PURE__ */ jsx101(Button, { onClick: download, "aria-describedby": captionId, variant: "outline", size: "sm", icon: /* @__PURE__ */ jsx101(Download, {}), children: downloadLabel }),
-        /* @__PURE__ */ jsx101(
+        onDownload && /* @__PURE__ */ jsx100(Button, { onClick: download, "aria-describedby": captionId, variant: "outline", size: "sm", icon: /* @__PURE__ */ jsx100(Download, {}), children: downloadLabel }),
+        /* @__PURE__ */ jsx100(
           Button,
           {
             onClick: onConfirm,
@@ -7400,7 +7529,7 @@ var SecretReveal = React86.forwardRef(
           }
         )
       ] }),
-      refused && /* @__PURE__ */ jsx101("div", { role: "status", className: "text-xs text-text-tertiary", children: REFUSED })
+      refused && /* @__PURE__ */ jsx100("div", { role: "status", className: "text-xs text-text-tertiary", children: REFUSED })
     ] }) }) });
   }
 );
@@ -7410,7 +7539,7 @@ SecretReveal.displayName = "SecretReveal";
 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";
+import { jsx as jsx101 } from "react/jsx-runtime";
 var STAR_BOX = {
   sm: "size-4",
   md: "size-5",
@@ -7422,7 +7551,7 @@ var ROW_GAP = {
   lg: "gap-1.5"
 };
 var defaultItemLabel = (value, max) => `${value} out of ${max} stars`;
-var StarGlyph = ({ filled, size }) => /* @__PURE__ */ jsx102(
+var StarGlyph = ({ filled, size }) => /* @__PURE__ */ jsx101(
   Star,
   {
     "aria-hidden": "true",
@@ -7457,18 +7586,18 @@ var StarRating = React87.forwardRef(
       onValueChange?.(next);
     };
     if (readOnly) {
-      return /* @__PURE__ */ jsx102(
+      return /* @__PURE__ */ jsx101(
         "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))
+          children: stars.map((star) => /* @__PURE__ */ jsx101(StarGlyph, { filled: star <= selected, size }, star))
         }
       );
     }
-    return /* @__PURE__ */ jsx102(
+    return /* @__PURE__ */ jsx101(
       RadioGroupPrimitive2.Root,
       {
         ref,
@@ -7485,7 +7614,7 @@ var StarRating = React87.forwardRef(
         orientation: "horizontal",
         loop: false,
         className: cn("inline-flex items-center", ROW_GAP[size], className),
-        children: stars.map((star) => /* @__PURE__ */ jsx102(
+        children: stars.map((star) => /* @__PURE__ */ jsx101(
           RadioGroupPrimitive2.Item,
           {
             value: String(star),
@@ -7496,11 +7625,12 @@ var StarRating = React87.forwardRef(
               if (min === 0 && star === selected) commit(0);
             },
             className: cn(
+              "cursor-pointer",
               // 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 })
+            children: /* @__PURE__ */ jsx101(StarGlyph, { filled: star <= shown, size })
           },
           star
         ))
@@ -7513,7 +7643,7 @@ 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";
+import { jsx as jsx102, jsxs as jsxs68 } 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",
@@ -7538,7 +7668,7 @@ var RatingScale = React88.forwardRef(
     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 row = /* @__PURE__ */ jsx102("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",
@@ -7546,15 +7676,16 @@ var RatingScale = React88.forwardRef(
         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__ */ jsx102("span", { className: box, "aria-hidden": "true", children: slot }, slot);
       }
-      return /* @__PURE__ */ jsx103(
+      return /* @__PURE__ */ jsx102(
         RadioGroupPrimitive3.Item,
         {
           value: String(slot),
           "aria-label": itemLabel(slot, min, max),
           className: cn(
             box,
+            "cursor-pointer",
             // 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",
@@ -7566,12 +7697,12 @@ var RatingScale = React88.forwardRef(
         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 })
+    const ends = endLabels ? /* @__PURE__ */ jsxs68("div", { className: "flex items-center justify-between text-xs text-text-tertiary", children: [
+      /* @__PURE__ */ jsx102("span", { children: endLabels.low }),
+      /* @__PURE__ */ jsx102("span", { children: endLabels.high })
     ] }) : null;
     if (readOnly) {
-      return /* @__PURE__ */ jsxs69(
+      return /* @__PURE__ */ jsxs68(
         "div",
         {
           ref,
@@ -7585,7 +7716,7 @@ var RatingScale = React88.forwardRef(
         }
       );
     }
-    const group = /* @__PURE__ */ jsx103(
+    const group = /* @__PURE__ */ jsx102(
       RadioGroupPrimitive3.Root,
       {
         ref,
@@ -7604,7 +7735,7 @@ var RatingScale = React88.forwardRef(
       }
     );
     if (!endLabels) return group;
-    return /* @__PURE__ */ jsxs69("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    return /* @__PURE__ */ jsxs68("div", { className: cn("flex flex-col gap-1.5", className), children: [
       group,
       ends
     ] });
@@ -7823,8 +7954,10 @@ export {
   PopoverContent,
   PopoverTrigger,
   Progress,
+  QuickSearchRow,
   RadioGroup2 as RadioGroup,
   RadioGroupItem,
+  RailToggle,
   RatingScale,
   RemovableChip,
   RemoveButton,
@@ -7893,6 +8026,7 @@ export {
   isKnownExtensionIcon,
   isNotificationSettled,
   navigationMenuTriggerStyle,
+  productStatusBadge,
   severityBadgeVariant,
   severityLabels,
   statusDotVariants,