@lessly/ui 2.3.1 → 4.0.0

package/dist/index.js

@@ -1,6 +1,8 @@
 import {
   Button,
+  EntityRow,
   NavRow,
+  RailToggle,
   Sheet,
   SheetClose,
   SheetContent,
@@ -19,7 +21,7 @@ import {
   cn,
   useIsMobile,
   useSidebar
-} from "./chunk-CEXND5YW.js";
+} from "./chunk-DYHP7W3X.js";
 
 // src/components/auto-height.tsx
 import * as React from "react";
@@ -82,9 +84,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 +173,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 +234,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 +303,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 +490,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 +534,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 +546,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 +560,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 +665,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 +707,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 +740,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 +780,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 +802,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 +841,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 +864,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 +1534,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 +1678,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 +1744,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 +1820,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 +1860,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,
@@ -1927,14 +1943,14 @@ import * as React35 from "react";
 import { cva as cva5 } from "class-variance-authority";
 import { jsx as jsx42, jsxs as jsxs21 } 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" }
@@ -1963,7 +1979,7 @@ var AlertTitle = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "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
   }
 ));
@@ -1972,7 +1988,7 @@ var AlertDescription = React35.forwardRef(({ className, ...props }, ref) => /* @
   "div",
   {
     ref,
-    className: cn("text-sm [&_p]:leading-relaxed", className),
+    className: cn("text-sm text-text-secondary [&_p]:leading-relaxed", className),
     ...props
   }
 ));
@@ -2137,9 +2153,9 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 
 // src/components/command.tsx
 import * as React38 from "react";
-import { Command as CommandPrimitive } from "cmdk";
+import { Command as CommandPrimitive, useCommandState } from "cmdk";
 import { Search } from "lucide-react";
-import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
 var Command = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   CommandPrimitive,
   {
@@ -2152,7 +2168,58 @@ 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 KeyCap = ({ children }) => /* @__PURE__ */ jsx45("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__ */ jsx45("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__ */ jsxs24("span", { className: "flex items-center gap-1.5", children: [
+  /* @__PURE__ */ jsx45("span", { className: "flex items-center gap-1", children: keys.map((key) => /* @__PURE__ */ jsx45(KeyCap, { children: key }, key)) }),
+  " ",
+  verb
+] }, verb)) });
+var CommandKeyHintsSlot = ({ children }) => {
+  const count = useCommandState((state) => state.filtered.count);
+  return count > 0 ? /* @__PURE__ */ jsx45(Fragment2, { children }) : null;
+};
+var CommandDialog = ({
+  children,
+  groups,
+  placeholder,
+  empty,
+  keyHints = /* @__PURE__ */ jsx45(CommandKeyHints, {}),
+  shortcut = false,
+  open,
+  onOpenChange,
+  ...props
+}) => {
+  React38.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__ */ jsx45(Dialog, { open, onOpenChange, ...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: groups ? /* @__PURE__ */ jsxs24(Fragment2, { children: [
+    /* @__PURE__ */ jsx45(CommandInput, { placeholder }),
+    /* @__PURE__ */ jsxs24(CommandList, { className: "max-h-[420px]", children: [
+      /* @__PURE__ */ jsx45(CommandEmpty, { children: empty }),
+      groups.map((group) => /* @__PURE__ */ jsx45(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsx45(
+        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__ */ jsx45(CommandKeyHintsSlot, { children: keyHints })
+  ] }) : 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(
@@ -2172,7 +2239,7 @@ var CommandList = React38.forwardRef(({ className, ...props }, ref) => /* @__PUR
   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
   }
 ));
@@ -2213,7 +2280,7 @@ var CommandItem = React38.forwardRef(
     {
       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
       ),
@@ -2268,7 +2335,7 @@ var NavigationMenuList = React39.forwardRef(({ className, ...props }, ref) => /*
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = cva6(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-bg-elevated px-4 py-2 text-sm font-medium transition-colors 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(
   NavigationMenuPrimitive.Trigger,
@@ -2330,7 +2397,7 @@ var NavigationMenuIndicator = React39.forwardRef(({ className, ...props }, ref)
 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 +2431,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 +2442,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());
@@ -2410,7 +2477,21 @@ var Toaster = ({ ...props }) => {
 
 // src/components/theme-toggle.tsx
 import { Sun, Moon } from "lucide-react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+
+// src/components/top-bar-utilities.tsx
+import * as React40 from "react";
+import { jsx as jsx48, jsxs as jsxs26 } 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 = React40.forwardRef(
+  ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx48("div", { ref, className: cn("flex items-center gap-1", className), ...props, children: items.map(({ name, icon, onClick }) => /* @__PURE__ */ jsxs26(Tooltip, { children: [
+    /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx48("button", { type: "button", className: topBarMarkClass, "aria-label": name, onClick, children: icon }) }),
+    /* @__PURE__ */ jsx48(TooltipContent, { children: name })
+  ] }, name)) })
+);
+TopBarUtilities.displayName = "TopBarUtilities";
+
+// src/components/theme-toggle.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
 var icons = {
   light: Sun,
   dark: Moon
@@ -2420,14 +2501,15 @@ function ThemeToggle() {
   const Icon = icons[resolvedTheme];
   const next = resolvedTheme === "light" ? "dark" : "light";
   const label = theme === "system" ? `Following your device (${resolvedTheme}). Switch to ${next}.` : `Switch to ${next} theme`;
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "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__ */ jsx49(Icon, {})
     }
   );
 }
@@ -2435,9 +2517,9 @@ function ThemeToggle() {
 // src/components/calendar.tsx
 import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight6 } from "lucide-react";
 import { DayPicker } from "react-day-picker";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     DayPicker,
     {
       showOutsideDays,
@@ -2495,7 +2577,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         ...classNames
       },
       components: {
-        Chevron: ({ className: cls, orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx49(ChevronLeft2, { className: cn("size-4", cls), ...rest }) : /* @__PURE__ */ jsx49(ChevronRight6, { className: cn("size-4", cls), ...rest })
+        Chevron: ({ className: cls, orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx50(ChevronLeft2, { className: cn("size-4", cls), ...rest }) : /* @__PURE__ */ jsx50(ChevronRight6, { className: cn("size-4", cls), ...rest })
       },
       ...props
     }
@@ -2504,9 +2586,9 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
 Calendar.displayName = "Calendar";
 
 // src/components/date-picker.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import { Calendar as CalendarIcon } from "lucide-react";
-import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
 var DEFAULT_FORMAT = {
   year: "numeric",
   month: "long",
@@ -2519,9 +2601,9 @@ function DatePicker({
   disabled,
   className
 }) {
-  const [open, setOpen] = React40.useState(false);
-  return /* @__PURE__ */ jsxs26(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx50(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs26(
+  const [open, setOpen] = React41.useState(false);
+  return /* @__PURE__ */ jsxs27(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs27(
       Button,
       {
         type: "button",
@@ -2529,12 +2611,12 @@ function DatePicker({
         disabled,
         className: cn("w-[240px] justify-start gap-2 text-left font-regular", !value && "text-text-tertiary", className),
         children: [
-          /* @__PURE__ */ jsx50(CalendarIcon, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx51(CalendarIcon, { className: "size-4 shrink-0" }),
           value ? value.toLocaleDateString(void 0, DEFAULT_FORMAT) : placeholder
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx50(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx51(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx51(
       Calendar,
       {
         mode: "single",
@@ -2551,20 +2633,20 @@ function DatePicker({
 DatePicker.displayName = "DatePicker";
 
 // src/components/add-picker.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import { Plus } from "lucide-react";
-import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
-var AddPicker = React41.forwardRef(
+import { jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
+var AddPicker = React42.forwardRef(
   ({ label, noun, items, exclude, onPick, className }, ref) => {
-    const [open, setOpen] = React41.useState(false);
-    const [q, setQ] = React41.useState("");
+    const [open, setOpen] = React42.useState(false);
+    const [q, setQ] = React42.useState("");
     const taken = exclude ?? [];
     const needle = q.toLowerCase();
     const matches = items.filter(
       (item) => !taken.includes(item.id) && (item.name.toLowerCase().includes(needle) || !!item.sub?.toLowerCase().includes(needle))
     );
     const search = items.length > 1 ? `Search ${items.length} ${noun}` : `Search ${noun}`;
-    return /* @__PURE__ */ jsxs27(
+    return /* @__PURE__ */ jsxs28(
       Popover,
       {
         open,
@@ -2573,15 +2655,15 @@ var AddPicker = React41.forwardRef(
           if (!next) setQ("");
         },
         children: [
-          /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs27(Button, { ref, variant: "ghost", size: "xs", className: cn("shrink-0", className), children: [
-            /* @__PURE__ */ jsx51(Plus, { className: "size-4", "aria-hidden": true }),
+          /* @__PURE__ */ jsx52(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs28(Button, { ref, variant: "ghost", size: "xs", className: cn("shrink-0", className), children: [
+            /* @__PURE__ */ jsx52(Plus, { className: "size-4", "aria-hidden": true }),
             label
           ] }) }),
-          /* @__PURE__ */ jsx51(PopoverContent, { align: "end", className: "w-72 p-0", children: /* @__PURE__ */ jsxs27(Command, { shouldFilter: false, label: search, children: [
-            /* @__PURE__ */ jsx51(CommandInput, { autoFocus: true, value: q, onValueChange: setQ, placeholder: search }),
-            /* @__PURE__ */ jsxs27(CommandList, { className: "max-h-[18rem] p-1", children: [
-              /* @__PURE__ */ jsx51(CommandEmpty, { children: q ? `No ${noun} match.` : `No ${noun} left to add.` }),
-              matches.map((item) => /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx52(PopoverContent, { align: "end", className: "w-72 p-0", children: /* @__PURE__ */ jsxs28(Command, { shouldFilter: false, label: search, children: [
+            /* @__PURE__ */ jsx52(CommandInput, { autoFocus: true, value: q, onValueChange: setQ, placeholder: search }),
+            /* @__PURE__ */ jsxs28(CommandList, { className: "max-h-[18rem] p-1", children: [
+              /* @__PURE__ */ jsx52(CommandEmpty, { children: q ? `No ${noun} match.` : `No ${noun} left to add.` }),
+              matches.map((item) => /* @__PURE__ */ jsx52(
                 CommandItem,
                 {
                   value: item.id,
@@ -2592,7 +2674,7 @@ var AddPicker = React41.forwardRef(
                     setOpen(false);
                     setQ("");
                   },
-                  children: /* @__PURE__ */ jsx51("span", { className: "truncate", children: item.name })
+                  children: /* @__PURE__ */ jsx52("span", { className: "truncate", children: item.name })
                 },
                 item.id
               ))
@@ -2606,31 +2688,31 @@ var AddPicker = React41.forwardRef(
 AddPicker.displayName = "AddPicker";
 
 // src/components/carousel.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
-import { jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
-var CarouselContext = React42.createContext(null);
+import { jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
+var CarouselContext = React43.createContext(null);
 function useCarousel() {
-  const context = React42.useContext(CarouselContext);
+  const context = React43.useContext(CarouselContext);
   if (!context) throw new Error("useCarousel must be used within a <Carousel />");
   return context;
 }
-var Carousel = React42.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+var Carousel = React43.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
   const [carouselRef, api] = useEmblaCarousel(
     { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React42.useState(false);
-  const [canScrollNext, setCanScrollNext] = React42.useState(false);
-  const onSelect = React42.useCallback((emblaApi) => {
+  const [canScrollPrev, setCanScrollPrev] = React43.useState(false);
+  const [canScrollNext, setCanScrollNext] = React43.useState(false);
+  const onSelect = React43.useCallback((emblaApi) => {
     if (!emblaApi) return;
     setCanScrollPrev(emblaApi.canScrollPrev());
     setCanScrollNext(emblaApi.canScrollNext());
   }, []);
-  const scrollPrev = React42.useCallback(() => api?.scrollPrev(), [api]);
-  const scrollNext = React42.useCallback(() => api?.scrollNext(), [api]);
-  const handleKeyDown = React42.useCallback(
+  const scrollPrev = React43.useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = React43.useCallback(() => api?.scrollNext(), [api]);
+  const handleKeyDown = React43.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -2642,11 +2724,11 @@ var Carousel = React42.forwardRef(({ orientation = "horizontal", opts, setApi, p
     },
     [scrollPrev, scrollNext]
   );
-  React42.useEffect(() => {
+  React43.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React42.useEffect(() => {
+  React43.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2656,7 +2738,7 @@ var Carousel = React42.forwardRef(({ orientation = "horizontal", opts, setApi, p
       api.off("select", onSelect);
     };
   }, [api, onSelect]);
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     CarouselContext.Provider,
     {
       value: {
@@ -2669,7 +2751,7 @@ var Carousel = React42.forwardRef(({ orientation = "horizontal", opts, setApi, p
         canScrollPrev,
         canScrollNext
       },
-      children: /* @__PURE__ */ jsx52(
+      children: /* @__PURE__ */ jsx53(
         "div",
         {
           ref,
@@ -2685,10 +2767,10 @@ var Carousel = React42.forwardRef(({ orientation = "horizontal", opts, setApi, p
   );
 });
 Carousel.displayName = "Carousel";
-var CarouselContent = React42.forwardRef(
+var CarouselContent = React43.forwardRef(
   ({ className, ...props }, ref) => {
     const { carouselRef, orientation } = useCarousel();
-    return /* @__PURE__ */ jsx52("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx53("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx53(
       "div",
       {
         ref,
@@ -2699,10 +2781,10 @@ var CarouselContent = React42.forwardRef(
   }
 );
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React42.forwardRef(
+var CarouselItem = React43.forwardRef(
   ({ className, ...props }, ref) => {
     const { orientation } = useCarousel();
-    return /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx53(
       "div",
       {
         ref,
@@ -2719,9 +2801,9 @@ var CarouselItem = React42.forwardRef(
   }
 );
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React42.forwardRef(({ className, ...props }, ref) => {
+var CarouselPrevious = React43.forwardRef(({ className, ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "button",
     {
       ref,
@@ -2736,16 +2818,16 @@ var CarouselPrevious = React42.forwardRef(({ className, ...props }, ref) => {
       onClick: scrollPrev,
       ...props,
       children: [
-        /* @__PURE__ */ jsx52(ArrowLeft, { className: "size-4" }),
-        /* @__PURE__ */ jsx52("span", { className: "sr-only", children: "Previous slide" })
+        /* @__PURE__ */ jsx53(ArrowLeft, { className: "size-4" }),
+        /* @__PURE__ */ jsx53("span", { className: "sr-only", children: "Previous slide" })
       ]
     }
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React42.forwardRef(({ className, ...props }, ref) => {
+var CarouselNext = React43.forwardRef(({ className, ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "button",
     {
       ref,
@@ -2760,8 +2842,8 @@ var CarouselNext = React42.forwardRef(({ className, ...props }, ref) => {
       onClick: scrollNext,
       ...props,
       children: [
-        /* @__PURE__ */ jsx52(ArrowRight, { className: "size-4" }),
-        /* @__PURE__ */ jsx52("span", { className: "sr-only", children: "Next slide" })
+        /* @__PURE__ */ jsx53(ArrowRight, { className: "size-4" }),
+        /* @__PURE__ */ jsx53("span", { className: "sr-only", children: "Next slide" })
       ]
     }
   );
@@ -2769,7 +2851,7 @@ var CarouselNext = React42.forwardRef(({ className, ...props }, ref) => {
 CarouselNext.displayName = "CarouselNext";
 
 // src/components/form.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import {
   Controller,
@@ -2777,16 +2859,16 @@ import {
   useFormContext,
   useFormState
 } from "react-hook-form";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var Form = FormProvider;
-var FormFieldContext = React43.createContext(null);
+var FormFieldContext = React44.createContext(null);
 function FormField({ ...props }) {
-  return /* @__PURE__ */ jsx53(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx53(Controller, { ...props }) });
+  return /* @__PURE__ */ jsx54(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx54(Controller, { ...props }) });
 }
-var FormItemContext = React43.createContext(null);
+var FormItemContext = React44.createContext(null);
 function useFormField() {
-  const fieldContext = React43.useContext(FormFieldContext);
-  const itemContext = React43.useContext(FormItemContext);
+  const fieldContext = React44.useContext(FormFieldContext);
+  const itemContext = React44.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext?.name });
   if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
@@ -2801,16 +2883,16 @@ function useFormField() {
     ...fieldState
   };
 }
-var FormItem = React43.forwardRef(
+var FormItem = React44.forwardRef(
   ({ className, ...props }, ref) => {
-    const id = React43.useId();
-    return /* @__PURE__ */ jsx53(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx53("div", { ref, className: cn("space-y-2", className), ...props }) });
+    const id = React44.useId();
+    return /* @__PURE__ */ jsx54(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx54("div", { ref, className: cn("space-y-2", className), ...props }) });
   }
 );
 FormItem.displayName = "FormItem";
-var FormLabel = React43.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React44.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     Label2,
     {
       ref,
@@ -2821,9 +2903,9 @@ var FormLabel = React43.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React43.forwardRef(({ ...props }, ref) => {
+var FormControl = React44.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     Slot2,
     {
       ref,
@@ -2835,9 +2917,9 @@ var FormControl = React43.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React43.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React44.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "p",
     {
       ref,
@@ -2848,11 +2930,11 @@ var FormDescription = React43.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React43.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React44.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message ?? "") : children;
   if (!body) return null;
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "p",
     {
       ref,
@@ -2866,9 +2948,9 @@ var FormMessage = React43.forwardRef(({ className, children, ...props }, ref) =>
 FormMessage.displayName = "FormMessage";
 
 // src/components/status-dot.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 import { cva as cva7 } from "class-variance-authority";
-import { jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
 var statusDotVariants = cva7("inline-block shrink-0 rounded-full", {
   variants: {
     status: {
@@ -2882,8 +2964,8 @@ var statusDotVariants = cva7("inline-block shrink-0 rounded-full", {
   },
   defaultVariants: { status: "neutral", size: "md" }
 });
-var StatusDot = React44.forwardRef(
-  ({ className, status, size, pulse = false, label, ...props }, ref) => /* @__PURE__ */ jsxs29(
+var StatusDot = React45.forwardRef(
+  ({ className, status, size, pulse = false, label, ...props }, ref) => /* @__PURE__ */ jsxs30(
     "span",
     {
       ref,
@@ -2891,14 +2973,14 @@ var StatusDot = React44.forwardRef(
       className: cn("relative inline-flex", className),
       ...props,
       children: [
-        pulse && /* @__PURE__ */ jsx54(
+        pulse && /* @__PURE__ */ jsx55(
           "span",
           {
             "aria-hidden": "true",
             className: cn(statusDotVariants({ status, size }), "absolute inset-0 animate-ping opacity-75")
           }
         ),
-        /* @__PURE__ */ jsx54("span", { className: cn(statusDotVariants({ status, size })) })
+        /* @__PURE__ */ jsx55("span", { className: cn(statusDotVariants({ status, size })) })
       ]
     }
   )
@@ -2906,11 +2988,11 @@ var StatusDot = React44.forwardRef(
 StatusDot.displayName = "StatusDot";
 
 // src/components/docs-link.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 import { BookOpen, ExternalLink } from "lucide-react";
-import { jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
-var DocsLink = React45.forwardRef(
-  ({ href = "https://docs.lessly.com", label = "Docs", showLeadingIcon = true, className, ...props }, ref) => /* @__PURE__ */ jsxs30(
+import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
+var DocsLink = React46.forwardRef(
+  ({ href = "https://docs.lessly.com", label = "Docs", showLeadingIcon = true, className, ...props }, ref) => /* @__PURE__ */ jsxs31(
     "a",
     {
       ref,
@@ -2923,9 +3005,9 @@ var DocsLink = React45.forwardRef(
       ),
       ...props,
       children: [
-        showLeadingIcon && /* @__PURE__ */ jsx55(BookOpen, { className: "size-4", "aria-hidden": "true" }),
+        showLeadingIcon && /* @__PURE__ */ jsx56(BookOpen, { className: "size-4", "aria-hidden": "true" }),
         label,
-        /* @__PURE__ */ jsx55(ExternalLink, { className: "size-3 text-text-tertiary", "aria-hidden": "true" })
+        /* @__PURE__ */ jsx56(ExternalLink, { className: "size-3 text-text-tertiary", "aria-hidden": "true" })
       ]
     }
   )
@@ -2933,28 +3015,28 @@ var DocsLink = React45.forwardRef(
 DocsLink.displayName = "DocsLink";
 
 // src/components/empty-state.tsx
-import * as React46 from "react";
-import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
-var EmptyState = React46.forwardRef(
-  ({ icon: Icon, title, titleAs: TitleTag = "p", description, action, className, ...props }, ref) => /* @__PURE__ */ jsxs31("div", { ref, className: cn("flex flex-col items-center px-4 py-10 text-center", className), ...props, children: [
-    Icon && /* @__PURE__ */ jsx56(Icon, { className: "mb-3 size-6 text-text-tertiary", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx56(TitleTag, { className: "text-sm text-text-secondary", children: title }),
-    description && /* @__PURE__ */ jsx56("p", { className: "mt-1 max-w-sm text-sm text-text-tertiary", children: description }),
-    action && /* @__PURE__ */ jsx56("div", { className: "mt-3", children: action })
+import * as React47 from "react";
+import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
+var EmptyState = React47.forwardRef(
+  ({ icon: Icon, title, titleAs: TitleTag = "p", description, action, className, ...props }, ref) => /* @__PURE__ */ jsxs32("div", { ref, className: cn("flex flex-col items-center px-4 py-10 text-center", className), ...props, children: [
+    Icon && /* @__PURE__ */ jsx57(Icon, { className: "mb-3 size-6 text-text-tertiary", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx57(TitleTag, { className: "text-sm text-text-secondary", children: title }),
+    description && /* @__PURE__ */ jsx57("p", { className: "mt-1 max-w-sm text-sm text-text-tertiary", children: description }),
+    action && /* @__PURE__ */ jsx57("div", { className: "mt-3", children: action })
   ] })
 );
 EmptyState.displayName = "EmptyState";
 
 // src/components/copy-button.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 import { Check as Check7, Copy } from "lucide-react";
-import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
 var MASK = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
-var CopyButton = React47.forwardRef(
+var CopyButton = React48.forwardRef(
   ({ value, label = "Copy", masked = false, className, variant = "ghost", size = "icon", onClick, ...props }, ref) => {
-    const [copied, setCopied] = React47.useState(false);
-    const timer = React47.useRef(void 0);
-    React47.useEffect(() => () => clearTimeout(timer.current), []);
+    const [copied, setCopied] = React48.useState(false);
+    const timer = React48.useRef(void 0);
+    React48.useEffect(() => () => clearTimeout(timer.current), []);
     const handleClick = async (e) => {
       onClick?.(e);
       if (!navigator.clipboard?.writeText) return;
@@ -2972,7 +3054,7 @@ var CopyButton = React47.forwardRef(
       // itself at the height `size` already declares instead of taking a label's padding. At the
       // default `size="icon"` that is the same 40px square it always was; at `xs`/`sm` it is now
       // square rather than a wide pill (#432).
-      /* @__PURE__ */ jsx57(
+      /* @__PURE__ */ jsx58(
         Button,
         {
           ref,
@@ -2983,13 +3065,13 @@ var CopyButton = React47.forwardRef(
           className: cn(className),
           ...props,
           "aria-label": copied ? "Copied" : masked ? `${label} ending ${tail}` : label,
-          icon: copied ? /* @__PURE__ */ jsx57(Check7, { className: "text-text-success" }) : /* @__PURE__ */ jsx57(Copy, {})
+          icon: copied ? /* @__PURE__ */ jsx58(Check7, { className: "text-text-success" }) : /* @__PURE__ */ jsx58(Copy, {})
         }
       )
     );
     if (!masked) return button;
-    return /* @__PURE__ */ jsxs32("span", { className: "inline-flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx57("code", { "aria-hidden": true, className: "font-mono text-xs text-text-tertiary", children: `${MASK}${tail}` }),
+    return /* @__PURE__ */ jsxs33("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx58("code", { "aria-hidden": true, className: "font-mono text-xs text-text-tertiary", children: `${MASK}${tail}` }),
       button
     ] });
   }
@@ -2997,9 +3079,9 @@ var CopyButton = React47.forwardRef(
 CopyButton.displayName = "CopyButton";
 
 // src/components/stat-card.tsx
-import * as React48 from "react";
+import * as React49 from "react";
 import { ArrowDown, ArrowUp, Info as Info2, Minus as Minus2 } from "lucide-react";
-import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
 var directionIcons = {
   up: ArrowUp,
   down: ArrowDown,
@@ -3015,37 +3097,39 @@ var toneFromDirection = {
   down: "negative",
   neutral: "neutral"
 };
-var StatCard = React48.forwardRef(
-  ({ label, value, delta, hint, sub, icon: Icon, className, ...props }, ref) => {
+var StatCard = React49.forwardRef(
+  ({ 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];
     const deltaClass = toneClasses[tone];
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs34(
       "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(TooltipContent, { children: hint })
+          /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx59("span", { className: "text-xs font-medium text-text-tertiary", children: label }),
+              hint && /* @__PURE__ */ jsx59(TooltipProvider, { children: /* @__PURE__ */ jsxs34(Tooltip, { children: [
+                /* @__PURE__ */ jsx59(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx59("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__ */ jsx59(Info2, { className: "size-3.5", "aria-hidden": "true" }) }) }),
+                /* @__PURE__ */ jsx59(TooltipContent, { children: hint })
               ] }) })
             ] }),
-            Icon && /* @__PURE__ */ jsx58(Icon, { className: "size-4 text-icon-secondary", "aria-hidden": "true" })
+            Icon && /* @__PURE__ */ jsx59(Icon, { className: "size-4 text-icon-secondary", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx58("div", { className: "mt-2 text-3xl font-semibold text-text-primary", children: value }),
-          (delta || sub) && /* @__PURE__ */ jsxs33("div", { className: "mt-2 flex items-center gap-2 text-sm", children: [
-            delta && /* @__PURE__ */ jsxs33("span", { className: cn("inline-flex items-center gap-0.5 font-medium", deltaClass), children: [
-              /* @__PURE__ */ jsx58(DeltaIcon, { className: "size-3.5", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx59("div", { className: "mt-2 text-3xl font-semibold text-text-primary", children: value }),
+          (delta || sub) && /* @__PURE__ */ jsxs34("div", { className: "mt-2 flex items-center gap-2 text-sm", children: [
+            delta && /* @__PURE__ */ jsxs34("span", { className: cn("inline-flex items-center gap-0.5 font-medium", deltaClass), children: [
+              /* @__PURE__ */ jsx59(DeltaIcon, { className: "size-3.5", "aria-hidden": "true" }),
               delta.value
             ] }),
-            sub && /* @__PURE__ */ jsx58("span", { className: "text-text-tertiary", children: sub })
-          ] })
+            sub && /* @__PURE__ */ jsx59("span", { className: "text-text-tertiary", children: sub })
+          ] }),
+          trend !== void 0 && /* @__PURE__ */ jsx59("div", { "data-slot": "stat-card-trend", className: "mt-3 min-h-10", children: trend })
         ]
       }
     );
@@ -3054,17 +3138,17 @@ var StatCard = React48.forwardRef(
 StatCard.displayName = "StatCard";
 
 // src/components/confirm-dialog.tsx
-import * as React50 from "react";
+import * as React51 from "react";
 import { Loader2 as Loader22 } from "lucide-react";
 
 // src/components/step-up-challenge.tsx
-import * as React49 from "react";
+import * as React50 from "react";
 import { Fingerprint, Loader2 } from "lucide-react";
-import { jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs35 } 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 StepUpChallenge = React49.forwardRef((props, ref) => {
+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 = React50.forwardRef((props, ref) => {
   const {
     methods,
     defaultMethod,
@@ -3084,28 +3168,28 @@ var StepUpChallenge = React49.forwardRef((props, ref) => {
   const offered = methods && methods.length > 0 ? methods : DEFAULT_METHODS;
   const first = offered[0] ?? "passkey";
   const initial = defaultMethod && offered.includes(defaultMethod) ? defaultMethod : first;
-  const [method, setMethod] = React49.useState(initial);
-  const [code, setCode] = React49.useState("");
-  const [errorFactor, setErrorFactor] = React49.useState(initial);
-  const [attempted, setAttempted] = React49.useState(false);
-  const fieldRef = React49.useRef(null);
-  const mounted = React49.useRef(false);
-  const pending = React49.useRef(false);
-  const attemptedAt = React49.useRef(0);
+  const [method, setMethod] = React50.useState(initial);
+  const [code, setCode] = React50.useState("");
+  const [errorFactor, setErrorFactor] = React50.useState(initial);
+  const [attempted, setAttempted] = React50.useState(false);
+  const fieldRef = React50.useRef(null);
+  const mounted = React50.useRef(false);
+  const pending = React50.useRef(false);
+  const attemptedAt = React50.useRef(0);
   const active = offered.includes(method) ? method : first;
   const other = offered.find((m) => m !== active);
   const showError = Boolean(error) && errorFactor === active;
-  const reactId = React49.useId();
+  const reactId = React50.useId();
   const fieldId = `${reactId}-code`;
   const errorId = `${reactId}-error`;
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     pending.current = false;
   }, [verifying, error]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (!error) return;
     fieldRef.current?.focus();
   }, [error]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (!mounted.current) {
       mounted.current = true;
       return;
@@ -3140,7 +3224,7 @@ var StepUpChallenge = React49.forwardRef((props, ref) => {
   const stopCodeBearingEvent = (event) => {
     event.stopPropagation();
   };
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       ...rest,
@@ -3148,15 +3232,15 @@ var StepUpChallenge = React49.forwardRef((props, ref) => {
       "aria-busy": verifying || void 0,
       className: cn("grid gap-4", className),
       children: [
-        active === "passkey" ? /* @__PURE__ */ jsxs34("div", { className: "grid justify-items-start gap-2", children: [
-          /* @__PURE__ */ jsx59(Fingerprint, { className: "size-5 text-text-secondary", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx59("p", { className: "text-sm text-text-secondary", children: "Your device will ask for your fingerprint, face or PIN." }),
+        active === "passkey" ? /* @__PURE__ */ jsxs35("div", { className: "grid justify-items-start gap-2", children: [
+          /* @__PURE__ */ jsx60(Fingerprint, { className: "size-5 text-text-secondary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx60("p", { className: "text-sm text-text-secondary", children: "Your device will ask for your fingerprint, face or PIN." }),
           other === "code" && // Not a `Button` (Guidelines/When it isn't a Button): a `Button` here would read as a
           // second action competing with the confirm below.
-          /* @__PURE__ */ jsx59("button", { type: "button", className: FACTOR_SWITCH, disabled: verifying, onClick: () => switchTo("code"), children: `Use a ${codeLength}-digit code instead` })
-        ] }) : /* @__PURE__ */ jsxs34("div", { className: "grid justify-items-start gap-2", children: [
-          /* @__PURE__ */ jsx59("label", { htmlFor: fieldId, className: "text-sm font-medium text-text-primary", children: `${codeLength}-digit code` }),
-          /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsx60("button", { type: "button", className: FACTOR_SWITCH, disabled: verifying, onClick: () => switchTo("code"), children: `Use a ${codeLength}-digit code instead` })
+        ] }) : /* @__PURE__ */ jsxs35("div", { className: "grid justify-items-start gap-2", children: [
+          /* @__PURE__ */ jsx60("label", { htmlFor: fieldId, className: "text-sm font-medium text-text-primary", children: `${codeLength}-digit code` }),
+          /* @__PURE__ */ jsx60(
             "div",
             {
               "data-sensitive": "one-time-code",
@@ -3169,7 +3253,7 @@ var StepUpChallenge = React49.forwardRef((props, ref) => {
               onDrop: stopCodeBearingEvent,
               onKeyDown: stopCodeBearingKey,
               onKeyUp: stopCodeBearingKey,
-              children: /* @__PURE__ */ jsx59(
+              children: /* @__PURE__ */ jsx60(
                 InputOTP,
                 {
                   ref: fieldRef,
@@ -3190,18 +3274,18 @@ var StepUpChallenge = React49.forwardRef((props, ref) => {
                     event.preventDefault();
                     submit();
                   },
-                  children: /* @__PURE__ */ jsx59(InputOTPGroup, { children: Array.from({ length: codeLength }, (_, index) => /* @__PURE__ */ jsx59(InputOTPSlot, { index }, index)) })
+                  children: /* @__PURE__ */ jsx60(InputOTPGroup, { children: Array.from({ length: codeLength }, (_, index) => /* @__PURE__ */ jsx60(InputOTPSlot, { index }, index)) })
                 }
               )
             }
           ),
           other === "passkey" && // The mirror of the line in the passkey pane — see the note there.
-          /* @__PURE__ */ jsx59("button", { type: "button", className: FACTOR_SWITCH, disabled: verifying, onClick: () => switchTo("passkey"), children: "Use a passkey instead" })
+          /* @__PURE__ */ jsx60("button", { type: "button", className: FACTOR_SWITCH, disabled: verifying, onClick: () => switchTo("passkey"), children: "Use a passkey instead" })
         ] }),
-        showError && /* @__PURE__ */ jsx59(InlineError, { id: errorId, children: error }),
-        /* @__PURE__ */ jsxs34(DialogFooter, { children: [
-          onBack && /* @__PURE__ */ jsx59(Button, { type: "button", variant: "outline", size: "sm", disabled: verifying, onClick: onBack, children: backLabel }),
-          /* @__PURE__ */ jsx59(
+        showError && /* @__PURE__ */ jsx60(InlineError, { id: errorId, children: error }),
+        /* @__PURE__ */ jsxs35(DialogFooter, { children: [
+          onBack && /* @__PURE__ */ jsx60(Button, { type: "button", variant: "outline", size: "sm", disabled: verifying, onClick: onBack, children: backLabel }),
+          /* @__PURE__ */ jsx60(
             Button,
             {
               type: "button",
@@ -3211,7 +3295,7 @@ var StepUpChallenge = React49.forwardRef((props, ref) => {
               "aria-disabled": !canSubmit || void 0,
               "aria-busy": verifying || void 0,
               className: cn(!canSubmit && "opacity-50"),
-              icon: verifying ? /* @__PURE__ */ jsx59(Loader2, { className: "animate-spin" }) : void 0,
+              icon: verifying ? /* @__PURE__ */ jsx60(Loader2, { className: "animate-spin" }) : void 0,
               onClick: submit,
               children: confirmLabel
             }
@@ -3224,9 +3308,9 @@ var StepUpChallenge = React49.forwardRef((props, ref) => {
 StepUpChallenge.displayName = "StepUpChallenge";
 
 // src/components/confirm-dialog.tsx
-import { jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
-var InlineError = React50.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx60(
+import { jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
+var InlineError = React51.forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx61(
     "div",
     {
       ref,
@@ -3256,14 +3340,14 @@ function ConfirmDialog({
   onConfirm,
   onError
 }) {
-  const [internalOpen, setInternalOpen] = React50.useState(false);
+  const [internalOpen, setInternalOpen] = React51.useState(false);
   const isControlled = open !== void 0;
   const actualOpen = isControlled ? open : internalOpen;
-  const [busy, setBusy] = React50.useState(false);
-  const [error, setError] = React50.useState(null);
-  const [typed, setTyped] = React50.useState("");
-  const [stepped, setStepped] = React50.useState(false);
-  const phraseId = `${React50.useId()}-phrase`;
+  const [busy, setBusy] = React51.useState(false);
+  const [error, setError] = React51.useState(null);
+  const [typed, setTyped] = React51.useState("");
+  const [stepped, setStepped] = React51.useState(false);
+  const phraseId = `${React51.useId()}-phrase`;
   const phraseMet = !confirmPhrase || typed.trim().toLowerCase() === confirmPhrase.trim().toLowerCase();
   const challenging = Boolean(stepUp) && (!confirmPhrase || stepped);
   const panelTitle = challenging ? stepUp?.title ?? title : title;
@@ -3273,7 +3357,7 @@ function ConfirmDialog({
     setTyped("");
     setStepped(false);
   };
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     if (!actualOpen) reset();
   }, [actualOpen]);
   const setOpen = (next) => {
@@ -3293,22 +3377,22 @@ function ConfirmDialog({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsxs35(Dialog, { open: actualOpen, onOpenChange: (next) => {
+  return /* @__PURE__ */ jsxs36(Dialog, { open: actualOpen, onOpenChange: (next) => {
     if (!busy) setOpen(next);
   }, children: [
-    trigger && /* @__PURE__ */ jsx60(DialogTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxs35(DialogContent, { children: [
-      /* @__PURE__ */ jsxs35(DialogHeader, { children: [
-        /* @__PURE__ */ jsx60(DialogTitle, { children: panelTitle }),
-        panelDescription && /* @__PURE__ */ jsx60(DialogDescription, { children: panelDescription })
+    trigger && /* @__PURE__ */ jsx61(DialogTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs36(DialogContent, { children: [
+      /* @__PURE__ */ jsxs36(DialogHeader, { children: [
+        /* @__PURE__ */ jsx61(DialogTitle, { children: panelTitle }),
+        panelDescription && /* @__PURE__ */ jsx61(DialogDescription, { children: panelDescription })
       ] }),
-      confirmPhrase && !challenging && /* @__PURE__ */ jsxs35("div", { className: "grid gap-1.5", children: [
-        /* @__PURE__ */ jsxs35("label", { htmlFor: phraseId, className: "text-xs font-medium text-text-secondary", children: [
+      confirmPhrase && !challenging && /* @__PURE__ */ jsxs36("div", { className: "grid gap-1.5", children: [
+        /* @__PURE__ */ jsxs36("label", { htmlFor: phraseId, className: "text-xs font-medium text-text-secondary", children: [
           "Type ",
-          /* @__PURE__ */ jsx60("span", { className: "font-mono text-text-primary", children: confirmPhrase }),
+          /* @__PURE__ */ jsx61("span", { className: "font-mono text-text-primary", children: confirmPhrase }),
           " to confirm"
         ] }),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           Input,
           {
             id: phraseId,
@@ -3319,8 +3403,8 @@ function ConfirmDialog({
           }
         )
       ] }),
-      error && !challenging && /* @__PURE__ */ jsx60(InlineError, { children: error }),
-      challenging ? /* @__PURE__ */ jsx60(
+      error && !challenging && /* @__PURE__ */ jsx61(InlineError, { children: error }),
+      challenging ? /* @__PURE__ */ jsx61(
         StepUpChallenge,
         {
           methods: stepUp?.methods,
@@ -3339,16 +3423,16 @@ function ConfirmDialog({
           onVerifyPasskey: () => void handleConfirm({ method: "passkey" }),
           onVerifyCode: (code) => void handleConfirm({ method: "code", code })
         }
-      ) : /* @__PURE__ */ jsxs35(DialogFooter, { children: [
-        /* @__PURE__ */ jsx60(Button, { variant: "outline", disabled: busy, onClick: () => setOpen(false), children: cancelLabel }),
-        /* @__PURE__ */ jsxs35(
+      ) : /* @__PURE__ */ jsxs36(DialogFooter, { children: [
+        /* @__PURE__ */ jsx61(Button, { variant: "outline", disabled: busy, onClick: () => setOpen(false), children: cancelLabel }),
+        /* @__PURE__ */ jsxs36(
           Button,
           {
             variant: destructive ? "destructive-solid" : "default",
             disabled: busy || !phraseMet,
             onClick: () => stepUp ? setStepped(true) : void handleConfirm(),
             children: [
-              busy && /* @__PURE__ */ jsx60(Loader22, { className: "size-4 animate-spin", "aria-hidden": "true" }),
+              busy && /* @__PURE__ */ jsx61(Loader22, { className: "size-4 animate-spin", "aria-hidden": "true" }),
               confirmLabel
             ]
           }
@@ -3359,59 +3443,81 @@ function ConfirmDialog({
 }
 
 // src/components/user-menu.tsx
+import * as React52 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 jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
+function UserMenu({ user, items, collapsed = false, tooltip = true, align = "start" }) {
+  const openedByPointer = React52.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
-    }
-  ) : /* @__PURE__ */ jsxs36(
+  const avatar = /* @__PURE__ */ jsx62(PersonAvatar, { name: user.name, id: user.id, src: user.avatarUrl, size: "sm" });
+  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__ */ jsx62(
+      "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__ */ jsxs37(
     "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: [
-          /* @__PURE__ */ jsx61("span", { className: "truncate text-sm leading-[normal] font-medium text-text-primary", children: user.name }),
-          secondLine && /* @__PURE__ */ jsx61("span", { className: "truncate text-xs leading-[normal] text-text-tertiary", children: secondLine })
+        /* @__PURE__ */ jsxs37("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx62("span", { className: "truncate text-sm leading-[normal] font-medium text-text-primary", children: user.name }),
+          secondLine && /* @__PURE__ */ jsx62("span", { className: "truncate text-xs leading-[normal] text-text-tertiary", children: secondLine })
         ] }),
-        /* @__PURE__ */ jsx61(ChevronsUpDown, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
+        /* @__PURE__ */ jsx62(ChevronsUpDown, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
       ]
     }
   );
-  const menuTrigger = /* @__PURE__ */ jsx61(DropdownMenuTrigger, { asChild: true, children: trigger });
-  const menu = /* @__PURE__ */ jsxs36(DropdownMenu, { children: [
-    collapsed ? /* @__PURE__ */ jsx61(TooltipProvider, { children: /* @__PURE__ */ jsxs36(Tooltip, { children: [
-      /* @__PURE__ */ jsx61(TooltipTrigger, { asChild: true, children: menuTrigger }),
-      /* @__PURE__ */ jsx61(TooltipContent, { side: "right", children: user.name })
+  const menuTrigger = /* @__PURE__ */ jsx62(
+    DropdownMenuTrigger,
+    {
+      asChild: true,
+      onPointerDown: () => {
+        openedByPointer.current = true;
+      },
+      onKeyDown: () => {
+        openedByPointer.current = false;
+      },
+      children: trigger
+    }
+  );
+  const menu = /* @__PURE__ */ jsxs37(DropdownMenu, { children: [
+    collapsed && tooltip ? /* @__PURE__ */ jsx62(TooltipProvider, { children: /* @__PURE__ */ jsxs37(Tooltip, { children: [
+      /* @__PURE__ */ jsx62(TooltipTrigger, { asChild: true, children: menuTrigger }),
+      /* @__PURE__ */ jsx62(TooltipContent, { side: "right", children: user.name })
     ] }) }) : menuTrigger,
-    /* @__PURE__ */ jsxs36(
+    /* @__PURE__ */ jsxs37(
       DropdownMenuContent,
       {
         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: [
-            /* @__PURE__ */ jsx61("span", { className: "block truncate text-sm font-medium text-text-primary", children: user.name }),
-            collapsed && secondLine && /* @__PURE__ */ jsx61("span", { className: "block truncate text-xs font-regular text-text-tertiary", children: secondLine })
+          /* @__PURE__ */ jsxs37(DropdownMenuLabel, { className: "px-2 pt-1.5 pb-1 text-xs font-medium text-text-tertiary", children: [
+            /* @__PURE__ */ jsx62("span", { className: "block truncate text-sm font-medium text-text-primary", children: user.name }),
+            collapsed && secondLine && /* @__PURE__ */ jsx62("span", { className: "block truncate text-xs font-regular text-text-tertiary", children: secondLine })
           ] }),
-          /* @__PURE__ */ jsx61(DropdownMenuSeparator, { className: "mx-0 shrink-0" }),
+          /* @__PURE__ */ jsx62(DropdownMenuSeparator, { className: "mx-0 shrink-0" }),
           items.map((item, i) => {
             const Icon = item.icon;
-            const content = /* @__PURE__ */ jsxs36(Fragment2, { children: [
-              Icon && /* @__PURE__ */ jsx61(Icon, { className: "size-4", "aria-hidden": "true" }),
+            const content = /* @__PURE__ */ jsxs37(Fragment3, { children: [
+              Icon && /* @__PURE__ */ jsx62(Icon, { className: "size-4", "aria-hidden": "true" }),
               item.label
             ] });
-            return /* @__PURE__ */ jsx61(
+            return /* @__PURE__ */ jsx62(
               DropdownMenuItem,
               {
                 onSelect: item.onSelect,
@@ -3420,7 +3526,7 @@ function UserMenu({ user, items, collapsed = false, align = "start" }) {
                   item.destructive && "text-text-danger focus:text-text-danger"
                 ),
                 asChild: Boolean(item.href),
-                children: item.href ? /* @__PURE__ */ jsx61("a", { href: item.href, children: content }) : content
+                children: item.href ? /* @__PURE__ */ jsx62("a", { href: item.href, children: content }) : content
               },
               `${item.label}-${i}`
             );
@@ -3433,10 +3539,10 @@ function UserMenu({ user, items, collapsed = false, align = "start" }) {
 }
 
 // src/components/extension-icon.tsx
-import * as React51 from "react";
+import * as React53 from "react";
 import * as LucideIcons from "lucide-react";
 import { Puzzle } from "lucide-react";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var FORWARD_REF = /* @__PURE__ */ Symbol.for("react.forward_ref");
 var catalog = LucideIcons;
 function toPascalCase(name) {
@@ -3461,22 +3567,22 @@ 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 = React53.forwardRef(
   ({ name, ...props }, ref) => {
     const Icon = resolveIcon(name);
     if (!Icon) {
       warnUnknownIconOnce(name);
-      return /* @__PURE__ */ jsx62(Puzzle, { ref, ...props, "data-icon-fallback": name });
+      return /* @__PURE__ */ jsx63(Puzzle, { ref, ...props, "data-icon-fallback": name });
     }
-    return /* @__PURE__ */ jsx62(Icon, { ref, ...props });
+    return /* @__PURE__ */ jsx63(Icon, { ref, ...props });
   }
 );
 ExtensionIcon.displayName = "ExtensionIcon";
 
 // src/components/icon-hint.tsx
-import * as React52 from "react";
-import { jsx as jsx63, jsxs as jsxs37 } from "react/jsx-runtime";
-var IconHint = React52.forwardRef(
+import * as React54 from "react";
+import { jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
+var IconHint = React54.forwardRef(
   ({ children, label, side = "top", align = "center", className, ...props }, ref) => {
     if (label.trim().length === 0) {
       if (process.env.NODE_ENV !== "production") {
@@ -3484,7 +3590,7 @@ var IconHint = React52.forwardRef(
           '[IconHint] `label` is blank: there is no name to expose and no sentence to show, and a focusable role="img" with no name is a WCAG 4.1.2 failure. Rendering the glyph as decorative instead \u2014 pass a sentence, or use DecorativeIcon if it needs none.'
         );
       }
-      return /* @__PURE__ */ jsx63(
+      return /* @__PURE__ */ jsx64(
         "span",
         {
           ref,
@@ -3498,8 +3604,8 @@ var IconHint = React52.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsxs37(Tooltip, { children: [
-      /* @__PURE__ */ jsx63(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsxs38(Tooltip, { children: [
+      /* @__PURE__ */ jsx64(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx64(
         "span",
         {
           ref,
@@ -3516,16 +3622,16 @@ var IconHint = React52.forwardRef(
           children
         }
       ) }),
-      /* @__PURE__ */ jsx63(TooltipContent, { side, align, "aria-hidden": true, children: label })
+      /* @__PURE__ */ jsx64(TooltipContent, { side, align, "aria-hidden": true, children: label })
     ] });
   }
 );
 IconHint.displayName = "IconHint";
 
 // src/components/decorative-icon.tsx
-import * as React53 from "react";
-import { jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
-var DecorativeIcon = React53.forwardRef(
+import * as React55 from "react";
+import { jsx as jsx65, jsxs as jsxs39 } from "react/jsx-runtime";
+var DecorativeIcon = React55.forwardRef(
   ({ children, label, side = "top", align = "center", className, ...props }, ref) => {
     if (label.trim().length === 0) {
       if (process.env.NODE_ENV !== "production") {
@@ -3533,7 +3639,7 @@ var DecorativeIcon = React53.forwardRef(
           "[DecorativeIcon] `label` is blank, so the tooltip would open on an empty bubble. Rendering the bare glyph instead \u2014 pass a sentence, or drop the wrapper if the glyph has nothing to add."
         );
       }
-      return /* @__PURE__ */ jsx64(
+      return /* @__PURE__ */ jsx65(
         "span",
         {
           ref,
@@ -3547,8 +3653,8 @@ var DecorativeIcon = React53.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsxs38(Tooltip, { children: [
-      /* @__PURE__ */ jsx64(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsxs39(Tooltip, { children: [
+      /* @__PURE__ */ jsx65(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx65(
         "span",
         {
           ref,
@@ -3564,15 +3670,15 @@ var DecorativeIcon = React53.forwardRef(
           children
         }
       ) }),
-      /* @__PURE__ */ jsx64(TooltipContent, { side, align, "aria-hidden": true, children: label })
+      /* @__PURE__ */ jsx65(TooltipContent, { side, align, "aria-hidden": true, children: label })
     ] });
   }
 );
 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 React56 from "react";
+import { Fragment as Fragment4, jsx as jsx66, jsxs as jsxs40 } from "react/jsx-runtime";
 var FALLBACK_STAGE_W = 360;
 var FALLBACK_STAGE_H = 270;
 var STEP = 8;
@@ -3605,7 +3711,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 = React56.forwardRef(
   ({
     src,
     shape = "square",
@@ -3625,21 +3731,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] = React56.useState(null);
+    const [error, setError] = React56.useState(null);
+    const [focused, setFocused] = React56.useState(false);
+    const [stage, setStage] = React56.useState({ w: FALLBACK_STAGE_W, h: FALLBACK_STAGE_H });
+    const [crop, setCrop] = React56.useState({ x: 0, y: 0, size: 0 });
+    const imgRef = React56.useRef(null);
+    const stageRef = React56.useRef(null);
+    const framed = React56.useRef(false);
+    const inset = React56.useRef({ left: 0, top: 0 });
+    React56.useEffect(() => {
       framed.current = false;
       setNat(null);
       setError(null);
     }, [src]);
-    React54.useLayoutEffect(() => {
+    React56.useLayoutEffect(() => {
       const el = stageRef.current;
       if (!el) return void 0;
       const read = (entry) => {
@@ -3665,13 +3771,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(() => {
+    React56.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 = React56.useCallback(
       (x, y, size) => {
         if (!nat) return { x, y, size };
         const max = Math.min(nat.w, nat.h);
@@ -3681,8 +3787,8 @@ var ImageCropper = React54.forwardRef(
       },
       [nat, fit, minCropSize]
     );
-    const moving = React54.useRef(null);
-    const resizing = React54.useRef(null);
+    const moving = React56.useRef(null);
+    const resizing = React56.useRef(null);
     const onMoveDown = (e) => {
       e.target.setPointerCapture(e.pointerId);
       moving.current = { px: e.clientX, py: e.clientY, cx: crop.x, cy: crop.y };
@@ -3799,8 +3905,8 @@ var ImageCropper = React54.forwardRef(
     const percent = nat ? Math.round(crop.size / Math.min(nat.w, nat.h) * 100) : 100;
     const fromLeft = nat ? Math.round(crop.x / nat.w * 100) : 0;
     const fromTop = nat ? Math.round(crop.y / nat.h * 100) : 0;
-    return /* @__PURE__ */ jsxs39("div", { ref, className: cn("flex flex-col gap-3", className), ...props, children: [
-      /* @__PURE__ */ jsxs39(
+    return /* @__PURE__ */ jsxs40("div", { ref, className: cn("flex flex-col gap-3", className), ...props, children: [
+      /* @__PURE__ */ jsxs40(
         "div",
         {
           ref: stageRef,
@@ -3809,7 +3915,7 @@ var ImageCropper = React54.forwardRef(
           onPointerMove,
           onPointerUp,
           children: [
-            /* @__PURE__ */ jsx65(
+            /* @__PURE__ */ jsx66(
               "img",
               {
                 ref: imgRef,
@@ -3822,8 +3928,8 @@ var ImageCropper = React54.forwardRef(
                 className: "pointer-events-none absolute inset-0 size-full object-contain"
               }
             ),
-            !nat && !error && /* @__PURE__ */ jsx65("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-text-tertiary", children: "Loading\u2026" }),
-            error === "load" && /* @__PURE__ */ jsx65(
+            !nat && !error && /* @__PURE__ */ jsx66("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-text-tertiary", children: "Loading\u2026" }),
+            error === "load" && /* @__PURE__ */ jsx66(
               "div",
               {
                 role: "alert",
@@ -3831,8 +3937,8 @@ var ImageCropper = React54.forwardRef(
                 children: errorMessage
               }
             ),
-            nat && error !== "load" && /* @__PURE__ */ jsxs39(Fragment3, { children: [
-              /* @__PURE__ */ jsx65(
+            nat && error !== "load" && /* @__PURE__ */ jsxs40(Fragment4, { children: [
+              /* @__PURE__ */ jsx66(
                 "div",
                 {
                   tabIndex: 0,
@@ -3854,15 +3960,15 @@ var ImageCropper = React54.forwardRef(
                     cursor: "move",
                     boxShadow: (focused ? FOCUS_SHADOW : "") + RING_SHADOW
                   },
-                  children: /* @__PURE__ */ jsxs39("div", { className: "pointer-events-none absolute inset-0 opacity-40", children: [
-                    /* @__PURE__ */ jsx65("div", { className: "absolute left-1/3 top-0 h-full w-px bg-white/60" }),
-                    /* @__PURE__ */ jsx65("div", { className: "absolute left-2/3 top-0 h-full w-px bg-white/60" }),
-                    /* @__PURE__ */ jsx65("div", { className: "absolute left-0 top-1/3 h-px w-full bg-white/60" }),
-                    /* @__PURE__ */ jsx65("div", { className: "absolute left-0 top-2/3 h-px w-full bg-white/60" })
+                  children: /* @__PURE__ */ jsxs40("div", { className: "pointer-events-none absolute inset-0 opacity-40", children: [
+                    /* @__PURE__ */ jsx66("div", { className: "absolute left-1/3 top-0 h-full w-px bg-white/60" }),
+                    /* @__PURE__ */ jsx66("div", { className: "absolute left-2/3 top-0 h-full w-px bg-white/60" }),
+                    /* @__PURE__ */ jsx66("div", { className: "absolute left-0 top-1/3 h-px w-full bg-white/60" }),
+                    /* @__PURE__ */ jsx66("div", { className: "absolute left-0 top-2/3 h-px w-full bg-white/60" })
                   ] })
                 }
               ),
-              CORNERS.map((corner) => /* @__PURE__ */ jsx65(
+              CORNERS.map((corner) => /* @__PURE__ */ jsx66(
                 "div",
                 {
                   "data-grip": corner,
@@ -3875,7 +3981,7 @@ var ImageCropper = React54.forwardRef(
                     padding: BRACKET.inset
                   },
                   onPointerDown: onResizeDown(corner),
-                  children: /* @__PURE__ */ jsx65(
+                  children: /* @__PURE__ */ jsx66(
                     "span",
                     {
                       className: "block border-solid border-white",
@@ -3897,10 +4003,10 @@ var ImageCropper = React54.forwardRef(
           ]
         }
       ),
-      error === "export" ? /* @__PURE__ */ jsx65("p", { role: "alert", className: "text-xs text-text-danger", children: exportErrorMessage }) : hint != null && !error ? /* @__PURE__ */ jsx65("p", { className: "text-xs text-text-tertiary", children: hint }) : null,
-      /* @__PURE__ */ jsxs39("div", { className: "flex justify-end gap-2", children: [
-        onCancel && /* @__PURE__ */ jsx65(Button, { type: "button", variant: "outline", size: "sm", onClick: onCancel, children: cancelLabel }),
-        /* @__PURE__ */ jsx65(Button, { type: "button", size: "sm", onClick: save, disabled: !nat || error != null, children: saveLabel })
+      error === "export" ? /* @__PURE__ */ jsx66("p", { role: "alert", className: "text-xs text-text-danger", children: exportErrorMessage }) : hint != null && !error ? /* @__PURE__ */ jsx66("p", { className: "text-xs text-text-tertiary", children: hint }) : null,
+      /* @__PURE__ */ jsxs40("div", { className: "flex justify-end gap-2", children: [
+        onCancel && /* @__PURE__ */ jsx66(Button, { type: "button", variant: "outline", size: "sm", onClick: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ jsx66(Button, { type: "button", size: "sm", onClick: save, disabled: !nat || error != null, children: saveLabel })
       ] })
     ] });
   }
@@ -3908,7 +4014,7 @@ var ImageCropper = React54.forwardRef(
 ImageCropper.displayName = "ImageCropper";
 
 // src/components/image-crop-dialog.tsx
-import { jsx as jsx66, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";
 function ImageCropDialog({
   open,
   onOpenChange,
@@ -3919,17 +4025,17 @@ function ImageCropDialog({
   onCrop,
   ...cropperProps
 }) {
-  return /* @__PURE__ */ jsx66(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsx67(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs41(
     DialogContent,
     {
       className: "sm:max-w-md",
       ...description ? {} : { "aria-describedby": void 0 },
       children: [
-        /* @__PURE__ */ jsxs40(DialogHeader, { children: [
-          /* @__PURE__ */ jsx66(DialogTitle, { children: title ?? `Crop ${label.toLowerCase()}` }),
-          description && /* @__PURE__ */ jsx66(DialogDescription, { children: description })
+        /* @__PURE__ */ jsxs41(DialogHeader, { children: [
+          /* @__PURE__ */ jsx67(DialogTitle, { children: title ?? `Crop ${label.toLowerCase()}` }),
+          description && /* @__PURE__ */ jsx67(DialogDescription, { children: description })
         ] }),
-        src && /* @__PURE__ */ jsx66(
+        src && /* @__PURE__ */ jsx67(
           ImageCropper,
           {
             src,
@@ -3948,9 +4054,9 @@ function ImageCropDialog({
 ImageCropDialog.displayName = "ImageCropDialog";
 
 // src/components/image-upload.tsx
-import * as React55 from "react";
+import * as React57 from "react";
 import { Image as ImageIcon } from "lucide-react";
-import { jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
 var PREVIEW_BOX = {
   sm: "size-8",
   md: "size-12",
@@ -3965,7 +4071,7 @@ function formatSize(bytes) {
   if (bytes >= 1024) return `${Math.floor(bytes / 1024)} KB`;
   return `${bytes} B`;
 }
-var ImageUpload = React55.forwardRef(
+var ImageUpload = React57.forwardRef(
   ({
     value,
     onChange,
@@ -3988,11 +4094,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 = React57.useRef(null);
+    const [picked, setPicked] = React57.useState(null);
+    const [cropOpen, setCropOpen] = React57.useState(false);
+    const [error, setError] = React57.useState(null);
+    const pickSeq = React57.useRef(0);
     const refuse = (message) => {
       setError(message);
       onError?.(message);
@@ -4035,8 +4141,8 @@ var ImageUpload = React55.forwardRef(
       reader.readAsDataURL(file);
     };
     const framed = value != null || fallback == null;
-    return /* @__PURE__ */ jsxs41("div", { ref, className: cn("flex items-start gap-3", className), ...props, children: [
-      /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsxs42("div", { ref, className: cn("flex items-start gap-3", className), ...props, children: [
+      /* @__PURE__ */ jsx68(
         "span",
         {
           className: cn(
@@ -4045,12 +4151,12 @@ var ImageUpload = React55.forwardRef(
             PREVIEW_MASK[shape],
             framed && "border border-border-default bg-bg-secondary text-text-secondary"
           ),
-          children: value ? /* @__PURE__ */ jsx67("img", { src: value, alt: `${label} preview`, className: "size-full object-cover" }) : fallback ?? /* @__PURE__ */ jsx67(ImageIcon, { className: "size-5", "aria-hidden": true })
+          children: value ? /* @__PURE__ */ jsx68("img", { src: value, alt: `${label} preview`, className: "size-full object-cover" }) : fallback ?? /* @__PURE__ */ jsx68(ImageIcon, { className: "size-5", "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ jsxs41("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsxs42("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx68(
             Button,
             {
               type: "button",
@@ -4061,7 +4167,7 @@ var ImageUpload = React55.forwardRef(
               children: value ? changeLabel : uploadLabel
             }
           ),
-          value && /* @__PURE__ */ jsx67(
+          value && /* @__PURE__ */ jsx68(
             Button,
             {
               type: "button",
@@ -4076,10 +4182,10 @@ var ImageUpload = React55.forwardRef(
             }
           )
         ] }),
-        hint != null && /* @__PURE__ */ jsx67("p", { className: "mt-1 text-xs text-text-tertiary", children: hint }),
-        error && /* @__PURE__ */ jsx67("p", { role: "alert", className: "mt-1 text-xs text-text-danger", children: error })
+        hint != null && /* @__PURE__ */ jsx68("p", { className: "mt-1 text-xs text-text-tertiary", children: hint }),
+        error && /* @__PURE__ */ jsx68("p", { role: "alert", className: "mt-1 text-xs text-text-danger", children: error })
       ] }),
-      /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsx68(
         "input",
         {
           ref: inputRef,
@@ -4094,7 +4200,7 @@ var ImageUpload = React55.forwardRef(
           }
         }
       ),
-      crop && /* @__PURE__ */ jsx67(
+      crop && /* @__PURE__ */ jsx68(
         ImageCropDialog,
         {
           open: cropOpen,
@@ -4116,75 +4222,15 @@ 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 * as React58 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";
 var SLOTTED_GLYPH = "inline-flex shrink-0 items-center justify-center [&>svg]:size-3.5";
-var BackLink = React57.forwardRef(
+var BackLink = React58.forwardRef(
   ({ parent, asChild = false, children, className, onClick, ...props }, ref) => {
-    const slotted = asChild && React57.isValidElement(children);
+    const slotted = asChild && React58.isValidElement(children);
     if (!slotted && !onClick) return null;
     const shell = {
       variant: "ghost",
@@ -4204,10 +4250,10 @@ var BackLink = React57.forwardRef(
 BackLink.displayName = "BackLink";
 
 // src/components/card-note.tsx
-import * as React58 from "react";
-import { Lock } from "lucide-react";
+import * as React59 from "react";
+import { Lock as Lock2 } from "lucide-react";
 import { jsx as jsx70, jsxs as jsxs44 } from "react/jsx-runtime";
-var CardNote = React58.forwardRef(
+var CardNote = React59.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs44(
     "p",
     {
@@ -4218,7 +4264,7 @@ var CardNote = React58.forwardRef(
         className
       ),
       children: [
-        /* @__PURE__ */ jsx70(Lock, { className: "mt-0.5 size-3 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsx70(Lock2, { className: "mt-0.5 size-3 shrink-0", "aria-hidden": true }),
         children
       ]
     }
@@ -4227,10 +4273,10 @@ var CardNote = React58.forwardRef(
 CardNote.displayName = "CardNote";
 
 // src/components/remove-button.tsx
-import * as React59 from "react";
+import * as React60 from "react";
 import { X as X2 } from "lucide-react";
 import { jsx as jsx71, jsxs as jsxs45 } from "react/jsx-runtime";
-var RemoveButton = React59.forwardRef(
+var RemoveButton = React60.forwardRef(
   ({ label, size = "sm", side = "top", className, ...props }, ref) => {
     const button = /* @__PURE__ */ jsx71(
       Button,
@@ -4255,7 +4301,7 @@ var RemoveButton = React59.forwardRef(
 RemoveButton.displayName = "RemoveButton";
 
 // src/components/grant-role-picker.tsx
-import * as React60 from "react";
+import * as React61 from "react";
 import { Check as Check8 } from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx72, jsxs as jsxs46 } from "react/jsx-runtime";
 var WEIGHT_TONE = {
@@ -4270,7 +4316,7 @@ var grantRemoveLabel = (detail, notInForce) => {
   if (!detail) return words;
   return detail.startsWith(",") ? `${words}${detail}` : `${words} ${detail}`;
 };
-var GrantRolePicker = React60.forwardRef(
+var GrantRolePicker = React61.forwardRef(
   ({
     value,
     roles,
@@ -4319,7 +4365,7 @@ var GrantRolePicker = React60.forwardRef(
         valueNote !== void 0 && /* @__PURE__ */ jsx72("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: [
+        [...new Set(pickable.map((r) => r.group).filter((g) => !!g))].map((band) => /* @__PURE__ */ jsxs46(React61.Fragment, { children: [
           /* @__PURE__ */ jsx72(DropdownMenuSeparator, {}),
           /* @__PURE__ */ jsx72(DropdownMenuLabel, { className: "px-2 py-1 text-xs font-medium text-text-tertiary", children: band }),
           pickable.filter((r) => r.group === band).map(item)
@@ -4353,9 +4399,9 @@ var GrantRolePicker = React60.forwardRef(
 GrantRolePicker.displayName = "GrantRolePicker";
 
 // src/components/grant-row.tsx
-import * as React61 from "react";
+import * as React62 from "react";
 import { jsx as jsx73, jsxs as jsxs47 } from "react/jsx-runtime";
-var GrantRow = React61.forwardRef((props, ref) => {
+var GrantRow = React62.forwardRef((props, ref) => {
   const {
     name,
     role,
@@ -4449,10 +4495,10 @@ var GrantRow = React61.forwardRef((props, ref) => {
 GrantRow.displayName = "GrantRow";
 
 // src/components/removable-chip.tsx
-import * as React62 from "react";
+import * as React63 from "react";
 import { X as X3 } from "lucide-react";
 import { jsx as jsx74, jsxs as jsxs48 } from "react/jsx-runtime";
-var RemovableChip = React62.forwardRef(
+var RemovableChip = React63.forwardRef(
   ({ label, onRemove, leading, removeLabel, className, ...props }, ref) => /* @__PURE__ */ jsxs48(
     "span",
     {
@@ -4486,22 +4532,22 @@ var RemovableChip = React62.forwardRef(
 RemovableChip.displayName = "RemovableChip";
 
 // src/hooks/use-fresh-highlight.ts
-import * as React63 from "react";
+import * as React64 from "react";
 var HOLD_MS = 3200;
 var CLEAR_MS = HOLD_MS + 900;
 function useFreshHighlight() {
-  const [freshId, setFreshId] = React63.useState(null);
-  const [message, setMessage] = React63.useState("");
-  const timer = React63.useRef(void 0);
-  React63.useEffect(() => () => clearTimeout(timer.current), []);
-  const markFresh = React63.useCallback((id, announce) => {
+  const [freshId, setFreshId] = React64.useState(null);
+  const [message, setMessage] = React64.useState("");
+  const timer = React64.useRef(void 0);
+  React64.useEffect(() => () => clearTimeout(timer.current), []);
+  const markFresh = React64.useCallback((id, announce) => {
     clearTimeout(timer.current);
     setFreshId(id);
     if (announce) setMessage(announce);
     timer.current = setTimeout(() => setFreshId(null), CLEAR_MS);
   }, []);
-  const isFresh = React63.useCallback((id) => id === freshId, [freshId]);
-  const freshRef = React63.useCallback((el) => {
+  const isFresh = React64.useCallback((id) => id === freshId, [freshId]);
+  const freshRef = React64.useCallback((el) => {
     if (!el) return;
     const rect = el.getBoundingClientRect();
     const viewportH = window.innerHeight || document.documentElement.clientHeight;
@@ -4510,7 +4556,7 @@ function useFreshHighlight() {
     const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
     el.scrollIntoView({ block: "nearest", behavior: reduce ? "auto" : "smooth" });
   }, []);
-  const announcer = React63.createElement(
+  const announcer = React64.createElement(
     "span",
     { role: "status", "aria-live": "polite", className: "sr-only" },
     message
@@ -4518,12 +4564,64 @@ function useFreshHighlight() {
   return { isFresh, markFresh, freshRef, announcer };
 }
 
+// src/components/quick-search-row.tsx
+import { Search as Search2 } from "lucide-react";
+import { jsx as jsx75, jsxs as jsxs49 } 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__ */ jsxs49(
+      "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__ */ jsx75("span", { className: "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx75(Search2, {}) }),
+          /* @__PURE__ */ jsx75("span", { className: "min-w-0 flex-1 truncate", children: label }),
+          shortcut && /* @__PURE__ */ jsx75("span", { className: "shrink-0 text-xs font-medium text-text-tertiary", children: shortcut })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs49(Tooltip, { children: [
+    /* @__PURE__ */ jsx75(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx75(
+      NavRow,
+      {
+        variant: "rail",
+        icon: icon ?? /* @__PURE__ */ jsx75(Search2, { "aria-hidden": "true" }),
+        label,
+        onClick: onOpen
+      }
+    ) }),
+    /* @__PURE__ */ jsx75(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";
-var NavSectionLabel = React64.forwardRef(
+import * as React65 from "react";
+import { jsx as jsx76 } from "react/jsx-runtime";
+var NavSectionLabel = React65.forwardRef(
   function NavSectionLabel2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx75(
+    return /* @__PURE__ */ jsx76(
       "div",
       {
         ref,
@@ -4536,8 +4634,8 @@ var NavSectionLabel = React64.forwardRef(
 NavSectionLabel.displayName = "NavSectionLabel";
 
 // src/components/menu-popup.tsx
-import * as React65 from "react";
-import { jsx as jsx76, jsxs as jsxs49 } from "react/jsx-runtime";
+import * as React66 from "react";
+import { jsx as jsx77, jsxs as jsxs50 } from "react/jsx-runtime";
 function MenuPopup({
   trigger,
   children,
@@ -4549,9 +4647,9 @@ function MenuPopup({
   sideOffset = 6,
   className
 }) {
-  return /* @__PURE__ */ jsxs49(Popover, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx76(PopoverTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsxs50(Popover, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx77(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx77(
       PopoverContent,
       {
         side: direction === "up" ? "top" : "bottom",
@@ -4566,9 +4664,9 @@ function MenuPopup({
     )
   ] });
 }
-var MenuDivider = React65.forwardRef(
+var MenuDivider = React66.forwardRef(
   function MenuDivider2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx76(
+    return /* @__PURE__ */ jsx77(
       "div",
       {
         ref,
@@ -4582,72 +4680,86 @@ var MenuDivider = React65.forwardRef(
 MenuDivider.displayName = "MenuDivider";
 
 // src/components/sidebar-product-header.tsx
-import * as React66 from "react";
-import { Slot as Slot4 } from "@radix-ui/react-slot";
+import * as React67 from "react";
+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(
+import { Fragment as Fragment7, jsx as jsx78, jsxs as jsxs51 } from "react/jsx-runtime";
+var SidebarProductHeader = React67.forwardRef(
   function SidebarProductHeader2({ name, icon, trailing, asChild = false, className, children, ...props }, ref) {
-    const adornment = trailing === void 0 ? /* @__PURE__ */ jsx77(ChevronsUpDown2, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }) : trailing;
-    const content = /* @__PURE__ */ jsxs50(Fragment7, { children: [
-      icon && /* @__PURE__ */ jsx77("span", { className: "flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md", "aria-hidden": "true", children: icon }),
-      /* @__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 adornment = trailing === void 0 ? /* @__PURE__ */ jsx78(ChevronsUpDown2, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }) : trailing;
+    const content = /* @__PURE__ */ jsxs51(Fragment7, { children: [
+      icon && /* @__PURE__ */ jsx78("span", { className: "flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md", "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsx78("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-text-primary", children: name }),
+      adornment && /* @__PURE__ */ jsx78("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) });
+      const child = React67.Children.only(children);
+      return /* @__PURE__ */ jsx78(Slot3, { ref, className: classes, ...props, children: React67.cloneElement(child, void 0, content) });
     }
-    return /* @__PURE__ */ jsx77("button", { ref, type: "button", className: classes, ...props, children: content });
+    return /* @__PURE__ */ jsx78("button", { ref, type: "button", className: classes, ...props, children: content });
   }
 );
 SidebarProductHeader.displayName = "SidebarProductHeader";
 
 // src/components/org-product-switcher.tsx
-import { ChevronsUpDown as ChevronsUpDown3, Check as Check9 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx78, jsxs as jsxs51 } from "react/jsx-runtime";
-var triggerBox = "flex w-full items-center gap-2.5 rounded-xl px-1.5 py-1 text-left transition-colors duration-fast hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
+import * as React68 from "react";
+import { ChevronsUpDown as ChevronsUpDown3, Check as Check9, Search as Search3 } from "lucide-react";
+import { Fragment as Fragment8, jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
+var PRODUCT_STATUS_LABEL = {
+  blocked: "Blocked",
+  archived: "Archived"
+};
+function productStatusBadge(status) {
+  if (status === "active") return void 0;
+  return /* @__PURE__ */ jsx79(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__ */ jsxs52("span", { className: "flex min-w-0 items-center gap-1", children: [
+    /* @__PURE__ */ jsx79("span", { className: cn("min-w-0 truncate text-sm leading-[normal]", className), children }),
+    /* @__PURE__ */ jsx79(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] });
+  return /* @__PURE__ */ jsx79("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__ */ jsx79("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__ */ jsx79("span", { "aria-hidden": "true", className: cn("shrink-0", ICON_BOX[size]) }) : null;
+  return /* @__PURE__ */ jsx79(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] = React68.useState(false);
+  const [query, setQuery] = React68.useState("");
+  const contentRef = React68.useRef(null);
+  const searchRef = React68.useRef(null);
   const activeOrg = organizations.find((o) => o.id === activeOrgId);
   const activeProduct = products.find((p) => p.id === activeProductId);
   const orgName = nameOf(activeOrg);
@@ -4655,63 +4767,112 @@ 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: [
-        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" })
+  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;
+  React68.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__ */ jsxs52(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__ */ jsxs52(DropdownMenuTrigger, { "aria-label": ariaLabel, className: cn(inlineTriggerBox, className), children: [
+        /* @__PURE__ */ jsx79("span", { className: cn(!inlineName && "font-medium text-text-tertiary"), children: inlineName ?? NO_ORG_LABEL }),
+        /* @__PURE__ */ jsx79(ChevronsUpDown3, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
+      ] })
+    ) : /* @__PURE__ */ jsxs52(DropdownMenuTrigger, { "aria-label": ariaLabel, className: cn(triggerBox, className), children: [
+      triggerMark && /* @__PURE__ */ jsx79(Mark2, { item: triggerMark, kind: markKind, size: "md" }),
+      orgLevel ? /* @__PURE__ */ jsx79("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx79(NameLine, { className: orgName ? "font-semibold text-text-primary" : "text-text-tertiary", children: orgName ?? NO_ORG_LABEL }) }) : /* @__PURE__ */ jsxs52("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+        orgName && /* @__PURE__ */ jsx79("span", { className: "truncate text-xs leading-[normal] text-text-tertiary", children: orgName }),
+        /* @__PURE__ */ jsx79(NameLine, { className: productName ? "font-semibold text-text-primary" : "text-text-tertiary", children: productLabel })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs51(
+    /* @__PURE__ */ jsxs52(
       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__ */ jsxs52(Fragment8, { children: [
+            /* @__PURE__ */ jsx79(DropdownMenuLabel, { className: sectionLabel, children: menuKind === "organization" ? "Organizations" : "Products" }),
+            /* @__PURE__ */ jsxs52("div", { className: searchBox, onKeyDown: onSearchKeyDown, children: [
+              /* @__PURE__ */ jsx79(Search3, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
+              /* @__PURE__ */ jsx79(
+                "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__ */ jsx79("div", { role: "group", className: rowScroller, children: matches.map((item) => {
+              const status = menuKind === "product" && productStatusBadge(item.status ?? "active");
+              return /* @__PURE__ */ jsxs52(DropdownMenuItem, { "data-menu-row": "", className: menuItem, onSelect: () => pick(item.id), children: [
+                /* @__PURE__ */ jsx79(Mark2, { item, kind: menuKind, size: "sm", reserve: true }),
+                /* @__PURE__ */ jsx79(ItemLabel, { item, kind: menuKind }),
+                status && /* @__PURE__ */ jsx79("span", { className: "shrink-0", children: status }),
+                item.id === activeItemId && /* @__PURE__ */ jsx79(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
+              ] }, item.id);
+            }) }),
+            matches.length === 0 && /* @__PURE__ */ jsxs52("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" }),
-            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: [
+          actions && actions.length > 0 && /* @__PURE__ */ jsxs52(Fragment8, { children: [
+            items.length > 0 && /* @__PURE__ */ jsx79(DropdownMenuSeparator, { className: "mx-0 shrink-0" }),
+            actions.map((a) => /* @__PURE__ */ jsx79(DropdownMenuItem, { className: menuItem, onSelect: a.onSelect, asChild: Boolean(a.href), children: a.href ? /* @__PURE__ */ jsxs52("a", { href: a.href, children: [
               a.icon,
               a.label
-            ] }) : /* @__PURE__ */ jsxs51(Fragment8, { children: [
+            ] }) : /* @__PURE__ */ jsxs52(Fragment8, { children: [
               a.icon,
               a.label
             ] }) }, a.id))
@@ -4725,12 +4886,13 @@ OrgProductSwitcher.displayName = "OrgProductSwitcher";
 
 // src/components/sidebar-back-header.tsx
 import { ArrowLeft as ArrowLeft3 } from "lucide-react";
-import { jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs53 } 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" });
+var Arrow = () => /* @__PURE__ */ jsx80(ArrowLeft3, { size: 16, "aria-hidden": "true" });
 function SidebarBackHeader({
   title,
   onBack,
@@ -4744,22 +4906,22 @@ function SidebarBackHeader({
   const { className: arrowClassName, ...arrowRest } = arrowProps ?? {};
   const { className: titleClassName, ...titleRest } = titleProps ?? {};
   if (!onTitleClick) {
-    return /* @__PURE__ */ jsxs52(
+    return /* @__PURE__ */ jsxs53(
       "button",
       {
         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, {}) }) }),
-          /* @__PURE__ */ jsx79("span", { className: cn(titleBox, titleClassName), ...titleRest, children: title })
+          /* @__PURE__ */ jsx80("span", { className: arrowBox, children: /* @__PURE__ */ jsx80("span", { className: cn(arrowPlate, arrowClassName), ...arrowRest, children: /* @__PURE__ */ jsx80(Arrow, {}) }) }),
+          /* @__PURE__ */ jsx80("span", { className: cn(titleBox, titleClassName), ...titleRest, children: title })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs52("div", { className: cn("flex items-center", className), ...rowProps, children: [
-    /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsxs53("div", { className: cn("flex items-center rounded-xl", rowPlate, className), ...rowProps, children: [
+    /* @__PURE__ */ jsx80(
       "button",
       {
         type: "button",
@@ -4767,10 +4929,10 @@ function SidebarBackHeader({
         onClick: onBack,
         className: cn(arrowBox, focusRing, arrowClassName),
         ...arrowRest,
-        children: /* @__PURE__ */ jsx79("span", { className: arrowPlate, children: /* @__PURE__ */ jsx79(Arrow, {}) })
+        children: /* @__PURE__ */ jsx80("span", { className: arrowPlate, children: /* @__PURE__ */ jsx80(Arrow, {}) })
       }
     ),
-    /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx80(
       "button",
       {
         type: "button",
@@ -4785,34 +4947,23 @@ function SidebarBackHeader({
 SidebarBackHeader.displayName = "SidebarBackHeader";
 
 // src/components/top-bar.tsx
-import * as React67 from "react";
-import { jsx as jsx80, jsxs as jsxs53 } from "react/jsx-runtime";
-var TopBar = React67.forwardRef(
-  ({ left, right, className, ...props }, ref) => /* @__PURE__ */ jsxs53("div", { ref, className: cn("flex w-full items-center gap-1", className), ...props, children: [
+import * as React69 from "react";
+import { jsx as jsx81, jsxs as jsxs54 } from "react/jsx-runtime";
+var TopBar = React69.forwardRef(
+  ({ left, right, className, ...props }, ref) => /* @__PURE__ */ jsxs54("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 })
+    right && /* @__PURE__ */ jsx81("div", { className: "ml-auto flex items-center gap-2", children: right })
   ] })
 );
 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 * as React70 from "react";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
 import { jsx as jsx82 } from "react/jsx-runtime";
-var Grid = React69.forwardRef(
+var Grid = React70.forwardRef(
   ({ fluid = false, asChild = false, className, ...props }, ref) => {
-    const Comp = asChild ? Slot5 : "div";
+    const Comp = asChild ? Slot4 : "div";
     return /* @__PURE__ */ jsx82(
       Comp,
       {
@@ -4831,8 +4982,8 @@ var Grid = React69.forwardRef(
 Grid.displayName = "Grid";
 
 // src/components/col.tsx
-import * as React70 from "react";
-import { Slot as Slot6 } from "@radix-ui/react-slot";
+import * as React71 from "react";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
 import { jsx as jsx83 } from "react/jsx-runtime";
 var TIER_MAX = { base: 4, md: 8, xl: 12 };
 var SPAN = {
@@ -4953,9 +5104,9 @@ function responsiveClasses(span, offset) {
   }
   return cn(...spanClasses, ...startClasses);
 }
-var Col = React70.forwardRef(
+var Col = React71.forwardRef(
   ({ span, offset, asChild = false, className, ...props }, ref) => {
-    const Comp = asChild ? Slot6 : "div";
+    const Comp = asChild ? Slot5 : "div";
     return /* @__PURE__ */ jsx83(Comp, { ref, className: cn(responsiveClasses(span, offset), className), ...props });
   }
 );
@@ -4972,7 +5123,7 @@ function PageColumn({ className, width = "reading", ...props }) {
 }
 
 // src/components/code-block.tsx
-import * as React71 from "react";
+import * as React72 from "react";
 import { jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
 var TOKEN_CLASS = {
   comment: "text-text-tertiary italic",
@@ -5144,11 +5295,11 @@ function dropLeading(tokens, count) {
   }
   return out;
 }
-var CodeBlock = React71.forwardRef(
+var CodeBlock = React72.forwardRef(
   ({ code, lang = "tsx", variant = "default", copy = false, filename, scroll = false, highlightLines, showLineNumbers = false, className, ...props }, ref) => {
-    const lines = React71.useMemo(() => tokenizeLines(code, lang), [code, lang]);
-    const rawLines = React71.useMemo(() => code.split("\n"), [code]);
-    const highlighted = React71.useMemo(() => parseHighlightLines(highlightLines), [highlightLines]);
+    const lines = React72.useMemo(() => tokenizeLines(code, lang), [code, lang]);
+    const rawLines = React72.useMemo(() => code.split("\n"), [code]);
+    const highlighted = React72.useMemo(() => parseHighlightLines(highlightLines), [highlightLines]);
     const isDiff = variant === "diff";
     const isTerminal = variant === "terminal";
     const showCopy = copy && !isTerminal;
@@ -5223,7 +5374,7 @@ var CodeBlock = React71.forwardRef(
   }
 );
 CodeBlock.displayName = "CodeBlock";
-var Code = React71.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx85(
+var Code = React72.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx85(
   "code",
   {
     ref,
@@ -5237,10 +5388,10 @@ var Code = React71.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Code.displayName = "Code";
 
 // src/components/grid-overlay.tsx
-import * as React72 from "react";
+import * as React73 from "react";
 import { jsx as jsx86 } from "react/jsx-runtime";
 var BASELINE = "var(--grid-gutter) / 2";
-var GridOverlay = React72.forwardRef(
+var GridOverlay = React73.forwardRef(
   ({ columns, baseline = false, className, style, ...props }, ref) => {
     const count = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;
     return /* @__PURE__ */ jsx86(
@@ -5268,7 +5419,7 @@ var GridOverlay = React72.forwardRef(
 GridOverlay.displayName = "GridOverlay";
 
 // src/components/attachment-chip.tsx
-import * as React73 from "react";
+import * as React74 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";
@@ -5290,7 +5441,7 @@ var stateIcons = {
   requested: Clock,
   available: Plus2
 };
-var AttachmentChip = React73.forwardRef(
+var AttachmentChip = React74.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: [
@@ -5302,8 +5453,8 @@ var AttachmentChip = React73.forwardRef(
 AttachmentChip.displayName = "AttachmentChip";
 
 // src/components/connector-card.tsx
-import * as React74 from "react";
-import { AlertTriangle, ChevronDown as ChevronDown6 } from "lucide-react";
+import * as React75 from "react";
+import { AlertTriangle, ChevronDown as ChevronDown5 } from "lucide-react";
 import { Fragment as Fragment9, jsx as jsx88, jsxs as jsxs57 } from "react/jsx-runtime";
 var originLabels = {
   org: "Attached by the organization",
@@ -5317,7 +5468,7 @@ var statusLabels = {
 function monogram(name) {
   return name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
 }
-var ConnectorCard = React74.forwardRef(
+var ConnectorCard = React75.forwardRef(
   ({
     name,
     kind,
@@ -5342,7 +5493,7 @@ var ConnectorCard = React74.forwardRef(
       "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)
       }
     );
@@ -5418,7 +5569,7 @@ var ConnectorCard = React74.forwardRef(
                 /* @__PURE__ */ jsxs57("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
                   statusBadge,
                   /* @__PURE__ */ jsx88(
-                    ChevronDown6,
+                    ChevronDown5,
                     {
                       "aria-hidden": "true",
                       className: "size-4 shrink-0 text-text-tertiary transition-transform duration-fast group-data-[state=open]:rotate-180"
@@ -5441,12 +5592,12 @@ var ConnectorCard = React74.forwardRef(
 ConnectorCard.displayName = "ConnectorCard";
 
 // src/components/request-row.tsx
-import * as React75 from "react";
+import * as React76 from "react";
 import { Fragment as Fragment10, jsx as jsx89, jsxs as jsxs58 } from "react/jsx-runtime";
 function monogram2(name) {
   return name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
 }
-var RequestRow = React75.forwardRef(
+var RequestRow = React76.forwardRef(
   ({ surface, name, state, glyph, subtitle, account, onApprove, onDeny, onRequest, onRevoke, action, className, ...props }, ref) => {
     let controls = action;
     if (controls === void 0) {
@@ -5481,7 +5632,7 @@ var RequestRow = React75.forwardRef(
             "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)
             }
           ),
@@ -5498,7 +5649,7 @@ var RequestRow = React75.forwardRef(
 RequestRow.displayName = "RequestRow";
 
 // src/components/feedback-button.tsx
-import * as React76 from "react";
+import * as React77 from "react";
 import { MessageSquare, Loader2 as Loader23, CheckCircle2 } from "lucide-react";
 import { jsx as jsx90, jsxs as jsxs59 } from "react/jsx-runtime";
 var TITLE_MAX = 256;
@@ -5514,15 +5665,15 @@ var DEFAULT_LABELS = {
 };
 function FeedbackButton({ onSubmit, labels, className }) {
   const l = { ...DEFAULT_LABELS, ...labels };
-  const uid = React76.useId();
+  const uid = React77.useId();
   const titleId = `${uid}-title`;
   const detailsId = `${uid}-details`;
   const titleErrId = `${uid}-title-error`;
   const detailsErrId = `${uid}-details-error`;
-  const [open, setOpen] = React76.useState(false);
-  const [status, setStatus] = React76.useState("idle");
-  const [title, setTitle] = React76.useState("");
-  const [details, setDetails] = React76.useState("");
+  const [open, setOpen] = React77.useState(false);
+  const [status, setStatus] = React77.useState("idle");
+  const [title, setTitle] = React77.useState("");
+  const [details, setDetails] = React77.useState("");
   const titleTooLong = title.length > TITLE_MAX;
   const detailsTooLong = details.length > DETAILS_MAX;
   const titleEmpty = title.trim().length === 0;
@@ -5656,11 +5807,11 @@ function isNotificationSettled(item) {
 }
 
 // src/components/notification-bell.tsx
-import * as React78 from "react";
+import * as React79 from "react";
 import { BellRing, Settings } from "lucide-react";
 
 // src/components/notification-row.tsx
-import * as React77 from "react";
+import * as React78 from "react";
 
 // src/components/notification-parts.tsx
 import { Check as Check10 } from "lucide-react";
@@ -5690,12 +5841,12 @@ 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__ */ jsx91("a", { href: link.href, "aria-label": name, onClick, className, children: link.label }) : /* @__PURE__ */ jsx91("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";
-var NotificationRow = React77.forwardRef(
+var NotificationRow = React78.forwardRef(
   ({ item, onItemClick, onActionClick, onMarkRead, formatAge, className, ...props }, ref) => {
     const settled = isNotificationSettled(item);
     const unread = !settled && !item.read;
@@ -5717,7 +5868,7 @@ var NotificationRow = React77.forwardRef(
             /* @__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__ */ jsx92("span", { className: "font-semibold", children: item.source }),
                   item.receipt ? `, ${item.receipt}` : ""
                 ] }),
                 /* @__PURE__ */ jsx92(
@@ -5726,7 +5877,7 @@ var NotificationRow = React77.forwardRef(
                     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
@@ -5759,6 +5910,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"
@@ -5791,7 +5943,7 @@ NotificationRow.displayName = "NotificationRow";
 
 // src/components/notification-bell.tsx
 import { jsx as jsx93, jsxs as jsxs61 } from "react/jsx-runtime";
-var NotificationBell = React78.forwardRef(
+var NotificationBell = React79.forwardRef(
   ({
     items,
     unreadCount,
@@ -5819,11 +5971,12 @@ var NotificationBell = React78.forwardRef(
           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" }),
+            /* @__PURE__ */ jsx93(BellRing, { "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 })
           ]
         }
@@ -5833,7 +5986,10 @@ var NotificationBell = React78.forwardRef(
         {
           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: [
@@ -5844,7 +6000,7 @@ var NotificationBell = React78.forwardRef(
                   {
                     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"
                   }
                 ),
@@ -5854,7 +6010,7 @@ var NotificationBell = React78.forwardRef(
                     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",
+                    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__ */ jsx93(Settings, { className: "size-[15px]", "aria-hidden": "true" })
                   }
                 )
@@ -5877,7 +6033,7 @@ var NotificationBell = React78.forwardRef(
               {
                 type: "button",
                 onClick: () => onOpenArchive(),
-                className: "flex w-full shrink-0 items-center justify-center px-5 py-2.5 text-sm font-medium text-text-brand transition-colors 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"
               }
             )
@@ -5890,10 +6046,10 @@ var NotificationBell = React78.forwardRef(
 NotificationBell.displayName = "NotificationBell";
 
 // src/components/notification-center.tsx
-import * as React79 from "react";
-import { Check as Check11, Search as Search2 } from "lucide-react";
+import * as React80 from "react";
+import { Check as Check11, Search as Search4 } 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";
+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({
@@ -5909,7 +6065,7 @@ function CenterRow({
   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("span", { className: "text-xs font-semibold text-text-tertiary", 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(
@@ -5929,7 +6085,7 @@ function CenterRow({
         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
@@ -5956,7 +6112,7 @@ function CenterRow({
     ] })
   ] });
 }
-var NotificationCenter = React79.forwardRef(
+var NotificationCenter = React80.forwardRef(
   ({
     items,
     header = true,
@@ -5973,16 +6129,16 @@ var NotificationCenter = React79.forwardRef(
     formatAge,
     className
   }, ref) => {
-    const [status, setStatus] = React79.useState("all");
-    const [source, setSource] = React79.useState("all");
-    const [product, setProduct] = React79.useState("all");
-    const [query, setQuery] = React79.useState("");
-    const [limit, setLimit] = React79.useState(pageSize);
-    const age = React79.useCallback(
+    const [status, setStatus] = React80.useState("all");
+    const [source, setSource] = React80.useState("all");
+    const [product, setProduct] = React80.useState("all");
+    const [query, setQuery] = React80.useState("");
+    const [limit, setLimit] = React80.useState(pageSize);
+    const age = React80.useCallback(
       (createdAt) => formatAge ? formatAge(createdAt) : formatRelativeAge(createdAt),
       [formatAge]
     );
-    const sourceChips = React79.useMemo(
+    const sourceChips = React80.useMemo(
       () => sources ?? Array.from(new Set(items.map((n) => n.source))),
       [sources, items]
     );
@@ -6004,13 +6160,13 @@ var NotificationCenter = React79.forwardRef(
           {
             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(Search4, { className: "size-4 shrink-0 text-text-tertiary", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx94(
           "input",
           {
@@ -6101,7 +6257,7 @@ var NotificationCenter = React79.forwardRef(
           {
             type: "button",
             onClick: () => setLimit((l) => l + pageSize),
-            className: "mt-1 rounded-lg bg-bg-elevated px-4 py-2.5 text-sm font-medium text-text-secondary transition-colors 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,
@@ -6116,7 +6272,7 @@ var NotificationCenter = React79.forwardRef(
 NotificationCenter.displayName = "NotificationCenter";
 
 // src/components/notification-settings.tsx
-import * as React80 from "react";
+import * as React81 from "react";
 import { Moon as Moon2, Plus as Plus3, Volume2 } from "lucide-react";
 import { Fragment as Fragment11, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
 var THRESHOLDS = [
@@ -6143,7 +6299,7 @@ function ThresholdControl({
     }
   );
 }
-var NotificationSettings = React80.forwardRef(
+var NotificationSettings = React81.forwardRef(
   ({
     subscriptions,
     value,
@@ -6156,7 +6312,7 @@ var NotificationSettings = React80.forwardRef(
     pushSlot,
     className
   }, ref) => {
-    const [tab, setTab] = React80.useState(DEFAULT_KEY);
+    const [tab, setTab] = React81.useState(DEFAULT_KEY);
     const isDefault = tab === DEFAULT_KEY;
     const defaults = value[DEFAULT_KEY] ?? { thresholds: {} };
     const customized = !isDefault && Object.prototype.hasOwnProperty.call(value, tab);
@@ -6177,7 +6333,7 @@ var NotificationSettings = React80.forwardRef(
       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("p", { className: "mb-1.5 px-0.5 text-xs font-medium text-text-tertiary", children: scope === "product" ? "This product" : "Organization" }),
         /* @__PURE__ */ jsx95("div", { className: "space-y-2", children: rows.map((sub) => /* @__PURE__ */ jsxs63(
           "div",
           {
@@ -6200,7 +6356,7 @@ var NotificationSettings = React80.forwardRef(
     };
     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("p", { className: "mb-2 px-0.5 text-xs font-medium text-text-tertiary", children: "Preferences for" }),
         /* @__PURE__ */ jsx95(
           ToggleGroup,
           {
@@ -6217,18 +6373,18 @@ var NotificationSettings = React80.forwardRef(
       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(CardTitle, { as: "p", className: "mb-1.5", 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." }) })
         ] }),
         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("p", { className: "mb-1.5 px-0.5 text-xs font-medium 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 ",
+                "Muted, ",
                 m.label,
                 ". Critical still comes through."
               ] })
@@ -6238,7 +6394,7 @@ var NotificationSettings = React80.forwardRef(
               {
                 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"
               }
             )
@@ -6272,7 +6428,7 @@ var NotificationSettings = React80.forwardRef(
           {
             type: "button",
             onClick: customize,
-            className: "mt-5 inline-flex items-center gap-1.5 rounded-lg bg-bg-brand px-3.5 py-2 text-sm font-semibold text-text-on-brand transition-colors 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" }),
               " Customize for ",
@@ -6294,7 +6450,7 @@ var NotificationSettings = React80.forwardRef(
             {
               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"
             }
           )
@@ -6307,14 +6463,14 @@ var NotificationSettings = React80.forwardRef(
 NotificationSettings.displayName = "NotificationSettings";
 
 // src/components/notification-toast.tsx
-import * as React81 from "react";
+import * as React82 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";
+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 NotificationToast = React81.forwardRef(
+var linkAction = "cursor-pointer text-sm font-semibold text-text-brand transition-colors duration-fast hover:text-text-primary";
+var NotificationToast = React82.forwardRef(
   ({
     item,
     showSource = true,
@@ -6331,7 +6487,7 @@ var NotificationToast = React81.forwardRef(
     const actions = item.actions ?? [];
     const percent = progress === void 0 || !Number.isFinite(progress) ? void 0 : Math.min(100, Math.max(0, progress));
     const progressLine = progressLabel === void 0 && percent !== void 0 ? `live, ${Math.round(percent)}%` : progressLabel;
-    const barId = React81.useId();
+    const barId = React82.useId();
     const hasProgressLine = progressLine !== null && progressLine !== void 0;
     return /* @__PURE__ */ jsxs64(
       "div",
@@ -6345,7 +6501,7 @@ var NotificationToast = React81.forwardRef(
         ),
         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 }),
+            showSource && /* @__PURE__ */ jsx96("span", { className: "text-xs font-semibold text-text-tertiary", 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: [
               overflow,
@@ -6355,7 +6511,7 @@ var NotificationToast = React81.forwardRef(
                   type: "button",
                   "aria-label": dismissLabel,
                   onClick: () => onDismiss(item),
-                  className: "flex size-5 shrink-0 items-center justify-center rounded-md text-text-tertiary transition-colors duration-fast hover:bg-bg-surface hover:text-text-primary",
+                  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__ */ jsx96(X4, { className: "size-3.5", "aria-hidden": "true" })
                 }
               )
@@ -6366,7 +6522,7 @@ var NotificationToast = React81.forwardRef(
             {
               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 }),
@@ -6409,7 +6565,7 @@ var NotificationToast = React81.forwardRef(
 NotificationToast.displayName = "NotificationToast";
 
 // src/components/notification-toaster.tsx
-import * as React82 from "react";
+import * as React83 from "react";
 import { jsx as jsx97 } from "react/jsx-runtime";
 var positions = {
   "bottom-right": "bottom-6 right-6 flex-col",
@@ -6417,7 +6573,7 @@ var positions = {
   "top-right": "top-6 right-6 flex-col-reverse",
   "top-left": "top-6 left-6 flex-col-reverse"
 };
-var NotificationToaster = React82.forwardRef(
+var NotificationToaster = React83.forwardRef(
   ({
     items,
     dwell,
@@ -6434,15 +6590,15 @@ var NotificationToaster = React82.forwardRef(
     className
   }, ref) => {
     const shown = items.slice(0, max);
-    const [paused, setPaused] = React82.useState(false);
-    const onDismissRef = React82.useRef(onDismiss);
+    const [paused, setPaused] = React83.useState(false);
+    const onDismissRef = React83.useRef(onDismiss);
     onDismissRef.current = onDismiss;
     const fyiDwell = dwell?.fyi;
     const importantDwell = dwell?.important;
     const criticalDwell = dwell?.critical;
-    const remaining = React82.useRef(/* @__PURE__ */ new Map());
+    const remaining = React83.useRef(/* @__PURE__ */ new Map());
     const liveIds = shown.map((item) => `${item.id}:${item.severity}`).join(" ");
-    React82.useEffect(() => {
+    React83.useEffect(() => {
       const owedById = remaining.current;
       const dwellSeconds = {
         fyi: fyiDwell ?? TOAST_DWELL.fyi,
@@ -6770,7 +6926,7 @@ var COUNTRY_OPTIONS = [
 ];
 
 // src/components/organization-onboarding-form.tsx
-import * as React83 from "react";
+import * as React84 from "react";
 
 // src/lib/auth-surface.ts
 var AUTH_FILLED_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[11px] rounded-[10px] border border-transparent bg-text-primary px-[14px] text-[14.5px] font-semibold tracking-[-0.005em] text-bg-sunken transition-opacity duration-fast hover:opacity-[0.92] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand active:translate-y-px disabled:cursor-not-allowed disabled:opacity-[0.55]";
@@ -6781,10 +6937,20 @@ var AUTH_BUTTON_SHADOW = "var(--auth-btn-shadow)";
 import { jsx as jsx98, jsxs as jsxs65 } from "react/jsx-runtime";
 var CONTROLLER_SHARE_PCT = 50;
 var MAX_BENEFICIAL_OWNERS = 50;
+var REQUIRED_FIELD_LABELS = {
+  name: "Organization name",
+  legalName: "Legal name",
+  ownerName: "Owner name",
+  countryOfIncorporation: "Country of incorporation",
+  residencyCountry: "Country of residency"
+};
 var OWNERSHIP_CONFIRMATION_MESSAGE = "Please confirm the ownership details by ticking the box";
 function isOwnershipViolation(violation) {
   return /ownership[_\s-]?confirmed/i.test(violation);
 }
+function RequiredMark() {
+  return /* @__PURE__ */ jsx98("span", { className: "text-text-danger", children: " *" });
+}
 function parseShare(raw) {
   if (!/^\d{1,3}$/.test(raw.trim())) return null;
   const n = Number(raw);
@@ -6802,7 +6968,6 @@ function initialRows(owners) {
   }));
 }
 function OrganizationOnboardingForm({
-  requireSanctionsFields,
   onSubmit,
   defaultValues,
   submitting,
@@ -6813,22 +6978,23 @@ function OrganizationOnboardingForm({
   onCancel,
   className
 }) {
-  const [name, setName] = React83.useState(defaultValues?.name ?? "");
-  const [legalName, setLegalName] = React83.useState(defaultValues?.legal_name ?? "");
-  const [ownerName, setOwnerName] = React83.useState(defaultValues?.owner_name ?? "");
-  const [countryOfIncorporation, setCountryOfIncorporation] = React83.useState(
+  const [name, setName] = React84.useState(defaultValues?.name ?? "");
+  const [legalName, setLegalName] = React84.useState(defaultValues?.legal_name ?? "");
+  const [ownerName, setOwnerName] = React84.useState(defaultValues?.owner_name ?? "");
+  const [countryOfIncorporation, setCountryOfIncorporation] = React84.useState(
     defaultValues?.country_of_incorporation ?? ""
   );
-  const [residencyCountry, setResidencyCountry] = React83.useState(
+  const [residencyCountry, setResidencyCountry] = React84.useState(
     defaultValues?.residency_country ?? ""
   );
-  const [owners, setOwners] = React83.useState(
+  const [owners, setOwners] = React84.useState(
     () => initialRows(defaultValues?.beneficial_owners)
   );
-  const [ownershipConfirmed, setOwnershipConfirmed] = React83.useState(false);
-  const [confirmationAttempted, setConfirmationAttempted] = React83.useState(false);
-  const nextKeyRef = React83.useRef(owners.length);
-  const submittingRef = React83.useRef(false);
+  const [ownershipConfirmed, setOwnershipConfirmed] = React84.useState(false);
+  const [confirmationAttempted, setConfirmationAttempted] = React84.useState(false);
+  const [requiredAttempted, setRequiredAttempted] = React84.useState(false);
+  const nextKeyRef = React84.useRef(owners.length);
+  const submittingRef = React84.useRef(false);
   const trimmed = name.trim();
   const filledOwners = owners.filter((row) => !isRowBlank(row));
   const ownerShares = filledOwners.map((row) => parseShare(row.share));
@@ -6840,9 +7006,16 @@ function OrganizationOnboardingForm({
     (share) => share !== null && share >= CONTROLLER_SHARE_PCT
   );
   const needsOwnershipConfirmation = !hasController;
-  const missingCountry = requireSanctionsFields && countryOfIncorporation === "";
+  const missingRequired = [
+    [trimmed, REQUIRED_FIELD_LABELS.name],
+    [legalName.trim(), REQUIRED_FIELD_LABELS.legalName],
+    [ownerName.trim(), REQUIRED_FIELD_LABELS.ownerName],
+    [countryOfIncorporation, REQUIRED_FIELD_LABELS.countryOfIncorporation],
+    [residencyCountry, REQUIRED_FIELD_LABELS.residencyCountry]
+  ].filter(([value]) => value === "").map(([, label]) => label);
   const missingConfirmation = needsOwnershipConfirmation && !ownershipConfirmed;
-  const canSubmit = trimmed !== "" && ownersValid && !missingCountry && !submitting;
+  const canSubmit = ownersValid && !submitting;
+  const showRequiredError = requiredAttempted && missingRequired.length > 0;
   const ownershipViolations = needsOwnershipConfirmation ? (violations ?? []).filter(isOwnershipViolation) : [];
   const otherViolations = (violations ?? []).filter(
     (violation) => !ownershipViolations.includes(violation)
@@ -6861,7 +7034,8 @@ function OrganizationOnboardingForm({
   const handleSubmit = (event) => {
     event.preventDefault();
     if (!canSubmit || submittingRef.current) return;
-    if (missingConfirmation) {
+    if (missingRequired.length > 0 || missingConfirmation) {
+      setRequiredAttempted(true);
       setConfirmationAttempted(true);
       return;
     }
@@ -6873,16 +7047,16 @@ function OrganizationOnboardingForm({
     }));
     onSubmit({
       name: trimmed,
-      ...legalName.trim() !== "" ? { legal_name: legalName.trim() } : {},
-      ...ownerName.trim() !== "" ? { owner_name: ownerName.trim() } : {},
-      ...countryOfIncorporation !== "" ? { country_of_incorporation: countryOfIncorporation } : {},
-      ...residencyCountry !== "" ? { residency_country: residencyCountry } : {},
+      legal_name: legalName.trim(),
+      owner_name: ownerName.trim(),
+      country_of_incorporation: countryOfIncorporation,
+      residency_country: residencyCountry,
       beneficial_owners: beneficialOwners,
       // Only meaningful — and only collected — when the list shows no controlling owner.
       ...needsOwnershipConfirmation ? { ownership_confirmed: ownershipConfirmed } : {}
     });
   };
-  React83.useEffect(() => {
+  React84.useEffect(() => {
     submittingRef.current = false;
   }, [
     name,
@@ -6898,7 +7072,7 @@ function OrganizationOnboardingForm({
   const countryField = (params) => /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
     /* @__PURE__ */ jsxs65(Label2, { htmlFor: params.id, children: [
       params.label,
-      params.required && /* @__PURE__ */ jsx98("span", { className: "text-text-danger", children: " *" })
+      /* @__PURE__ */ jsx98(RequiredMark, {})
     ] }),
     /* @__PURE__ */ jsx98(
       Select,
@@ -6915,7 +7089,10 @@ 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__ */ jsx98(Label2, { htmlFor: "create-org-name", children: "Organization name" }),
+      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-name", children: [
+        REQUIRED_FIELD_LABELS.name,
+        /* @__PURE__ */ jsx98(RequiredMark, {})
+      ] }),
       /* @__PURE__ */ jsx98(
         Input,
         {
@@ -6928,7 +7105,10 @@ function OrganizationOnboardingForm({
       )
     ] }),
     /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx98(Label2, { htmlFor: "create-org-legal-name", children: "Legal name" }),
+      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-legal-name", children: [
+        REQUIRED_FIELD_LABELS.legalName,
+        /* @__PURE__ */ jsx98(RequiredMark, {})
+      ] }),
       /* @__PURE__ */ jsx98(
         Input,
         {
@@ -6941,7 +7121,10 @@ function OrganizationOnboardingForm({
       )
     ] }),
     /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx98(Label2, { htmlFor: "create-org-owner-name", children: "Owner name" }),
+      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-owner-name", children: [
+        REQUIRED_FIELD_LABELS.ownerName,
+        /* @__PURE__ */ jsx98(RequiredMark, {})
+      ] }),
       /* @__PURE__ */ jsx98(
         Input,
         {
@@ -6955,17 +7138,15 @@ function OrganizationOnboardingForm({
     ] }),
     countryField({
       id: "create-org-country",
-      label: "Country of incorporation",
+      label: REQUIRED_FIELD_LABELS.countryOfIncorporation,
       value: countryOfIncorporation,
-      onChange: setCountryOfIncorporation,
-      required: requireSanctionsFields
+      onChange: setCountryOfIncorporation
     }),
     countryField({
       id: "create-org-residency",
-      label: "Country of residency",
+      label: REQUIRED_FIELD_LABELS.residencyCountry,
       value: residencyCountry,
-      onChange: setResidencyCountry,
-      required: false
+      onChange: setResidencyCountry
     }),
     /* @__PURE__ */ jsxs65("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxs65("div", { className: "flex items-center justify-between", children: [
@@ -7071,7 +7252,7 @@ function OrganizationOnboardingForm({
             className: "text-xs font-regular leading-snug",
             children: [
               "I confirm the ownership structure above is complete and correct",
-              /* @__PURE__ */ jsx98("span", { className: "text-text-danger", children: " *" })
+              /* @__PURE__ */ jsx98(RequiredMark, {})
             ]
           }
         )
@@ -7086,7 +7267,8 @@ function OrganizationOnboardingForm({
         }
       )
     ] }),
-    (serverError || otherViolations.length > 0) && /* @__PURE__ */ jsxs65(InlineError, { children: [
+    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: [
       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)) })
     ] }),
@@ -7097,18 +7279,18 @@ function OrganizationOnboardingForm({
           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__ */ jsx98("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 * as React85 from "react";
 import { jsx as jsx99, jsxs as jsxs66 } from "react/jsx-runtime";
 var CELL_WIDTH = { 20: "w-20", 24: "w-24", 28: "w-28", 32: "w-32" };
 var headerClass = "flex items-center gap-3 border-b border-border-subtle bg-bg-secondary px-4 py-1.5 text-xs text-text-tertiary";
@@ -7127,7 +7309,7 @@ function warnDuplicateKeys(columns, where) {
     seen.add(c.key);
   }
 }
-var ListHeader = React84.forwardRef(function ListHeader2({ lead, columns, mark = true, trailing = true, className, ...props }, ref) {
+var ListHeader = React85.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 }),
@@ -7141,7 +7323,7 @@ function cellValue(values, column) {
   const value = values[column.key];
   return value === void 0 || value === null || value === "" ? column.fallback : value;
 }
-var ListCells = React84.forwardRef(function ListCells2({ columns, values, className, ...props }, ref) {
+var ListCells = React85.forwardRef(function ListCells2({ columns, values, className, ...props }, ref) {
   warnDuplicateKeys(columns, "ListCells");
   return /* @__PURE__ */ jsx99("span", { ref, className: cn(cellsClass, className), ...props, children: columns.map((c) => /* @__PURE__ */ jsx99(
     "span",
@@ -7156,8 +7338,8 @@ ListHeader.displayName = "ListHeader";
 ListCells.displayName = "ListCells";
 
 // src/components/theme-picker.tsx
-import * as React85 from "react";
-import { Check as Check12, Monitor } from "lucide-react";
+import * as React86 from "react";
+import { Check as Check12 } from "lucide-react";
 import { jsx as jsx100, jsxs as jsxs67 } from "react/jsx-runtime";
 var THEME_SWATCHES = {
   //        --bg-surface  --bg-sunken   --bg-overlay  --border-default  --text-tertiary
@@ -7205,11 +7387,17 @@ 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__ */ jsxs67("span", { className: "relative block h-full", children: [
+    /* @__PURE__ */ jsx100("span", { className: "absolute inset-0", children: /* @__PURE__ */ jsx100(Panels, { palette: THEME_SWATCHES.light }) }),
+    /* @__PURE__ */ jsx100("span", { className: "absolute inset-0", style: { clipPath: CUT }, children: /* @__PURE__ */ jsx100(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) {
+var Picker = React86.forwardRef(function Picker2({ value, onValueChange, className, ...props }, ref) {
   return /* @__PURE__ */ jsx100("div", { role: "group", "aria-label": "Theme", ...props, ref, className: cn("grid gap-4", className), style: { ...TRACK, ...props.style }, children: OPTIONS.map((o) => {
     const selected = o.value === value;
     return (
@@ -7224,7 +7412,7 @@ 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__ */ jsx100("span", { className: cn(previewClass, selected && "border-border-strong"), "aria-hidden": true, children: o.value === "system" ? /* @__PURE__ */ jsx100(AutoPanels, {}) : /* @__PURE__ */ jsx100(Panels, { palette: THEME_SWATCHES[o.value] }) }),
             /* @__PURE__ */ jsxs67(
               "span",
               {
@@ -7245,7 +7433,7 @@ var Picker = React85.forwardRef(function Picker2({ value, onValueChange, classNa
     );
   }) });
 });
-var WiredPicker = React85.forwardRef(function WiredPicker2({ onValueChange, ...props }, ref) {
+var WiredPicker = React86.forwardRef(function WiredPicker2({ onValueChange, ...props }, ref) {
   const { theme, setTheme } = useTheme();
   return /* @__PURE__ */ jsx100(
     Picker,
@@ -7260,8 +7448,8 @@ var WiredPicker = React85.forwardRef(function WiredPicker2({ onValueChange, ...p
     }
   );
 });
-var ThemePicker = React85.forwardRef(function ThemePicker2({ value, onValueChange, ...props }, ref) {
-  const controlled = React85.useRef(value !== void 0);
+var ThemePicker = React86.forwardRef(function ThemePicker2({ value, onValueChange, ...props }, ref) {
+  const controlled = React86.useRef(value !== void 0);
   if (process.env.NODE_ENV !== "production" && controlled.current !== (value !== void 0)) {
     console.warn(
       "[ThemePicker] `value` went from " + (controlled.current ? "set to missing" : "missing to set") + " after mount. The picker stays " + (controlled.current ? "controlled" : "wired to the console theme") + " for its whole life: render it once its value is known, or leave `value` off entirely."
@@ -7273,7 +7461,7 @@ var ThemePicker = React85.forwardRef(function ThemePicker2({ value, onValueChang
 ThemePicker.displayName = "ThemePicker";
 
 // src/components/secret-reveal.tsx
-import * as React86 from "react";
+import * as React87 from "react";
 import { Copy as Copy2, Download } from "lucide-react";
 import { jsx as jsx101, jsxs as jsxs68 } from "react/jsx-runtime";
 var asText = (value) => Array.isArray(value) ? value.join("\n") : value;
@@ -7291,7 +7479,7 @@ function SecretValue({ value }) {
   }
   return /* @__PURE__ */ jsx101("code", { className: "block break-all font-mono text-sm font-medium text-text-primary", children: value });
 }
-var SecretReveal = React86.forwardRef(
+var SecretReveal = React87.forwardRef(
   ({
     value,
     caption,
@@ -7308,18 +7496,18 @@ var SecretReveal = React86.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [takenText, setTakenText] = React86.useState(null);
-    const [refusedText, setRefusedText] = React86.useState(null);
-    const [announcedFor, setAnnouncedFor] = React86.useState(null);
-    const copyRef = React86.useRef(null);
-    const captionId = React86.useId();
+    const [takenText, setTakenText] = React87.useState(null);
+    const [refusedText, setRefusedText] = React87.useState(null);
+    const [announcedFor, setAnnouncedFor] = React87.useState(null);
+    const copyRef = React87.useRef(null);
+    const captionId = React87.useId();
     const text = asText(value);
     const empty = text.length === 0;
     const taken = takenText === text;
     const refused = refusedText === text;
-    React86.useEffect(() => setAnnouncedFor(text), [text]);
+    React87.useEffect(() => setAnnouncedFor(text), [text]);
     const announced = announcedFor === text ? REVEALED : "";
-    React86.useEffect(() => {
+    React87.useEffect(() => {
       if (autoFocus) copyRef.current?.focus();
     }, [autoFocus]);
     const reportTaken = () => {
@@ -7381,7 +7569,7 @@ var SecretReveal = React86.forwardRef(
 SecretReveal.displayName = "SecretReveal";
 
 // src/components/star-rating.tsx
-import * as React87 from "react";
+import * as React88 from "react";
 import * as RadioGroupPrimitive2 from "@radix-ui/react-radio-group";
 import { Star } from "lucide-react";
 import { jsx as jsx102 } from "react/jsx-runtime";
@@ -7407,7 +7595,7 @@ var StarGlyph = ({ filled, size }) => /* @__PURE__ */ jsx102(
     )
   }
 );
-var StarRating = React87.forwardRef(
+var StarRating = React88.forwardRef(
   ({
     className,
     value,
@@ -7422,9 +7610,9 @@ var StarRating = React87.forwardRef(
     ...props
   }, ref) => {
     const stars = Array.from({ length: max }, (_, index) => index + 1);
-    const [mirror, setMirror] = React87.useState(defaultValue ?? 0);
+    const [mirror, setMirror] = React88.useState(defaultValue ?? 0);
     const selected = value ?? mirror;
-    const [preview, setPreview] = React87.useState(null);
+    const [preview, setPreview] = React88.useState(null);
     const shown = preview ?? selected;
     const commit = (next) => {
       setMirror(next);
@@ -7470,6 +7658,7 @@ 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"
@@ -7485,7 +7674,7 @@ var StarRating = React87.forwardRef(
 StarRating.displayName = "StarRating";
 
 // src/components/rating-scale.tsx
-import * as React88 from "react";
+import * as React89 from "react";
 import * as RadioGroupPrimitive3 from "@radix-ui/react-radio-group";
 import { jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
 var SLOT_BOX = {
@@ -7494,7 +7683,7 @@ var SLOT_BOX = {
   lg: "h-11 min-w-11 px-3 text-base"
 };
 var defaultItemLabel2 = (value, _min, max) => `${value} out of ${max}`;
-var RatingScale = React88.forwardRef(
+var RatingScale = React89.forwardRef(
   ({
     className,
     value,
@@ -7510,7 +7699,7 @@ var RatingScale = React88.forwardRef(
     ...props
   }, ref) => {
     const slots = Array.from({ length: Math.max(0, max - min + 1) }, (_, index) => min + index);
-    const [mirror, setMirror] = React88.useState(defaultValue);
+    const [mirror, setMirror] = React89.useState(defaultValue);
     const selected = value ?? mirror;
     const row = /* @__PURE__ */ jsx103("div", { className: cn("flex flex-wrap items-center gap-1.5", !endLabels && className), children: slots.map((slot) => {
       const isSelected = slot === selected;
@@ -7529,6 +7718,7 @@ var RatingScale = React88.forwardRef(
           "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",
@@ -7797,8 +7987,10 @@ export {
   PopoverContent,
   PopoverTrigger,
   Progress,
+  QuickSearchRow,
   RadioGroup2 as RadioGroup,
   RadioGroupItem,
+  RailToggle,
   RatingScale,
   RemovableChip,
   RemoveButton,
@@ -7867,6 +8059,7 @@ export {
   isKnownExtensionIcon,
   isNotificationSettled,
   navigationMenuTriggerStyle,
+  productStatusBadge,
   severityBadgeVariant,
   severityLabels,
   statusDotVariants,