@lessly/ui 0.12.0 → 0.14.0

package/dist/index.js

@@ -2444,15 +2444,185 @@ var EmptyState = React42.forwardRef(
 );
 EmptyState.displayName = "EmptyState";
 
-// src/components/copy-button.tsx
+// src/components/sign-in-screen.tsx
 import * as React43 from "react";
+import { Fragment, jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
+var GLOW_BG = "radial-gradient(560px 320px at 28% 16%, var(--auth-glow-a), transparent 68%),radial-gradient(520px 340px at 78% 90%, var(--auth-glow-b), transparent 66%),var(--bg-sunken)";
+var DEFAULT_TITLE = {
+  login: "Sign in",
+  forbidden: "Access restricted",
+  error: "Couldn't load"
+};
+var DEFAULT_DESCRIPTION = {
+  forbidden: "This app is limited to one Workspace group.",
+  error: "Something interrupted sign-in. Try again in a moment."
+};
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsx49(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "inline-block animate-spin rounded-full border-2 border-current border-t-transparent",
+        className
+      )
+    }
+  );
+}
+function GoogleGlyph() {
+  return /* @__PURE__ */ jsx49("span", { className: "inline-flex size-[26px] flex-none items-center justify-center rounded-md bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.05)_inset]", children: /* @__PURE__ */ jsxs23("svg", { width: "17", height: "17", viewBox: "0 0 18 18", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx49("path", { fill: "#4285F4", d: "M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62z" }),
+    /* @__PURE__ */ jsx49("path", { fill: "#34A853", d: "M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18z" }),
+    /* @__PURE__ */ jsx49("path", { fill: "#FBBC05", d: "M3.97 10.72a5.4 5.4 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33z" }),
+    /* @__PURE__ */ jsx49("path", { fill: "#EA4335", d: "M9 3.58c1.32 0 2.5.46 3.44 1.35l2.58-2.58C13.46.9 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58z" })
+  ] }) });
+}
+var LockIcon = (props) => /* @__PURE__ */ jsxs23("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...props, children: [
+  /* @__PURE__ */ jsx49("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }),
+  /* @__PURE__ */ jsx49("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+] });
+var WarningIcon = (props) => /* @__PURE__ */ jsxs23("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...props, children: [
+  /* @__PURE__ */ jsx49("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+  /* @__PURE__ */ jsx49("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+  /* @__PURE__ */ jsx49("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+] });
+var ErrorIcon = (props) => /* @__PURE__ */ jsxs23("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...props, children: [
+  /* @__PURE__ */ jsx49("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx49("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+  /* @__PURE__ */ jsx49("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+] });
+var RetryIcon = (props) => /* @__PURE__ */ jsxs23("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...props, children: [
+  /* @__PURE__ */ jsx49("path", { d: "M23 4v6h-6" }),
+  /* @__PURE__ */ jsx49("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })
+] });
+var filledBtn = "flex h-[46px] w-full items-center justify-center gap-[11px] rounded-[10px] border border-transparent bg-text-primary px-[14px] text-[14.5px] font-semibold tracking-[-0.005em] text-bg-sunken transition-opacity hover:opacity-[0.92] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand active:translate-y-px disabled:cursor-not-allowed disabled:opacity-[0.55]";
+var calloutBase = "mb-[22px] flex gap-[10px] rounded-[10px] border px-[13px] py-[12px] text-left text-[13px] leading-[1.5] text-text-secondary [&_code]:font-mono [&_code]:text-[12px] [&_code]:text-text-primary [&_strong]:font-semibold [&_strong]:text-text-primary";
+function LockNote({ children }) {
+  return /* @__PURE__ */ jsxs23("div", { className: "mx-auto mt-[20px] flex flex-wrap items-center justify-center gap-[7px] text-[12px] leading-[1.4] text-text-secondary [&_code]:rounded-[5px] [&_code]:bg-bg-secondary [&_code]:px-[6px] [&_code]:py-[2px] [&_code]:font-mono [&_code]:text-[11.5px] [&_code]:text-text-secondary", children: [
+    /* @__PURE__ */ jsx49(LockIcon, { className: "flex-none text-text-tertiary" }),
+    children
+  ] });
+}
+var SignInScreen = React43.forwardRef(
+  ({
+    state: state2 = "login",
+    brand,
+    eyebrow,
+    title,
+    description,
+    googleLabel = "Continue with Google",
+    onGoogle,
+    signingIn = false,
+    signingInLabel = "Signing you in\u2026",
+    restriction,
+    forbidden,
+    error,
+    onRetry,
+    retryLabel = "Try again",
+    loadingLabel = "Loading\u2026",
+    footer = "Supercharged by Lessly",
+    className,
+    ...props
+  }, ref) => {
+    const shell = (children) => /* @__PURE__ */ jsx49(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex min-h-screen w-full items-center justify-center overflow-hidden px-6 py-12 text-text-primary",
+          className
+        ),
+        style: { background: GLOW_BG },
+        ...props,
+        children
+      }
+    );
+    const brandMark = /* @__PURE__ */ jsx49("div", { className: "text-[24px] font-bold leading-none tracking-[-0.02em] text-text-primary", children: brand });
+    if (state2 === "loading") {
+      return shell(
+        /* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center gap-[16px] text-text-secondary", children: [
+          brandMark,
+          /* @__PURE__ */ jsx49(Spinner, { className: "size-[22px] text-text-tertiary opacity-90" }),
+          /* @__PURE__ */ jsx49("span", { role: "status", className: "text-[13.5px] tracking-[-0.005em]", children: loadingLabel })
+        ] })
+      );
+    }
+    const heading = title ?? DEFAULT_TITLE[state2];
+    const sub = description ?? DEFAULT_DESCRIPTION[state2];
+    return shell(
+      /* @__PURE__ */ jsxs23(
+        "div",
+        {
+          className: "relative w-full max-w-[360px] rounded-2xl bg-bg-surface px-[34px] pb-[30px] pt-[38px] text-center",
+          style: {
+            border: "1px solid var(--auth-card-border)",
+            boxShadow: "var(--auth-card-shadow)"
+          },
+          children: [
+            /* @__PURE__ */ jsx49("div", { className: "mb-[22px]", children: brandMark }),
+            eyebrow && state2 === "login" && /* @__PURE__ */ jsx49("p", { className: "mb-[12px] text-[11px] font-semibold uppercase tracking-[0.11em] text-text-tertiary", children: eyebrow }),
+            /* @__PURE__ */ jsx49("h1", { className: "mb-[8px] text-[20px] font-semibold leading-[1.25] tracking-[-0.015em] text-text-primary", children: heading }),
+            sub && /* @__PURE__ */ jsx49("p", { className: "mx-auto mb-[24px] max-w-[280px] text-[13.5px] leading-[1.5] text-text-secondary", children: sub }),
+            state2 === "login" && /* @__PURE__ */ jsx49(
+              "button",
+              {
+                type: "button",
+                onClick: onGoogle,
+                disabled: signingIn,
+                "aria-busy": signingIn || void 0,
+                className: filledBtn,
+                style: { boxShadow: "var(--auth-btn-shadow)" },
+                children: signingIn ? /* @__PURE__ */ jsxs23(Fragment, { children: [
+                  /* @__PURE__ */ jsx49(Spinner, { className: "size-[17px] opacity-50" }),
+                  /* @__PURE__ */ jsx49("span", { children: signingInLabel })
+                ] }) : /* @__PURE__ */ jsxs23(Fragment, { children: [
+                  /* @__PURE__ */ jsx49(GoogleGlyph, {}),
+                  /* @__PURE__ */ jsx49("span", { children: googleLabel })
+                ] })
+              }
+            ),
+            state2 === "forbidden" && forbidden && /* @__PURE__ */ jsxs23("div", { role: "status", className: cn(calloutBase, "border-border-warning bg-bg-warning-subtle"), children: [
+              /* @__PURE__ */ jsx49(WarningIcon, { className: "mt-px flex-none text-border-warning" }),
+              /* @__PURE__ */ jsx49("span", { children: forbidden })
+            ] }),
+            state2 === "error" && /* @__PURE__ */ jsxs23(Fragment, { children: [
+              /* @__PURE__ */ jsxs23("div", { role: "alert", className: cn(calloutBase, "border-border-danger bg-bg-danger-subtle"), children: [
+                /* @__PURE__ */ jsx49(ErrorIcon, { className: "mt-px flex-none text-border-danger" }),
+                /* @__PURE__ */ jsx49("span", { children: error ?? "The identity provider didn\u2019t respond. Retry in a moment." })
+              ] }),
+              onRetry && /* @__PURE__ */ jsxs23(
+                "button",
+                {
+                  type: "button",
+                  onClick: onRetry,
+                  className: filledBtn,
+                  style: { boxShadow: "var(--auth-btn-shadow)" },
+                  children: [
+                    /* @__PURE__ */ jsx49(RetryIcon, {}),
+                    /* @__PURE__ */ jsx49("span", { children: retryLabel })
+                  ]
+                }
+              )
+            ] }),
+            restriction && (state2 === "login" || state2 === "forbidden") && /* @__PURE__ */ jsx49(LockNote, { children: restriction }),
+            footer != null && /* @__PURE__ */ jsx49("div", { className: "mt-[24px] text-[11px] tracking-[0.005em] text-text-tertiary", children: footer })
+          ]
+        }
+      )
+    );
+  }
+);
+SignInScreen.displayName = "SignInScreen";
+
+// src/components/copy-button.tsx
+import * as React44 from "react";
 import { Check as Check5, Copy } from "lucide-react";
-import { jsx as jsx49 } from "react/jsx-runtime";
-var CopyButton = React43.forwardRef(
+import { jsx as jsx50 } from "react/jsx-runtime";
+var CopyButton = React44.forwardRef(
   ({ value, label = "Copy", className, variant = "ghost", size = "icon", onClick, ...props }, ref) => {
-    const [copied, setCopied] = React43.useState(false);
-    const timer = React43.useRef(void 0);
-    React43.useEffect(() => () => clearTimeout(timer.current), []);
+    const [copied, setCopied] = React44.useState(false);
+    const timer = React44.useRef(void 0);
+    React44.useEffect(() => () => clearTimeout(timer.current), []);
     const handleClick = async (e) => {
       onClick?.(e);
       if (!navigator.clipboard?.writeText) return;
@@ -2464,7 +2634,7 @@ var CopyButton = React43.forwardRef(
       } catch {
       }
     };
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       Button,
       {
         ref,
@@ -2475,7 +2645,7 @@ var CopyButton = React43.forwardRef(
         className: cn(className),
         ...props,
         "aria-label": copied ? "Copied" : label,
-        children: copied ? /* @__PURE__ */ jsx49(Check5, { className: "size-4 text-text-success" }) : /* @__PURE__ */ jsx49(Copy, { className: "size-4" })
+        children: copied ? /* @__PURE__ */ jsx50(Check5, { className: "size-4 text-text-success" }) : /* @__PURE__ */ jsx50(Copy, { className: "size-4" })
       }
     );
   }
@@ -2483,9 +2653,9 @@ var CopyButton = React43.forwardRef(
 CopyButton.displayName = "CopyButton";
 
 // src/components/stat-card.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 import { ArrowDown, ArrowUp, Info as Info2, Minus as Minus2 } from "lucide-react";
-import { jsx as jsx50, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs24 } from "react/jsx-runtime";
 var directionIcons = {
   up: ArrowUp,
   down: ArrowDown,
@@ -2501,36 +2671,36 @@ var toneFromDirection = {
   down: "negative",
   neutral: "neutral"
 };
-var StatCard = React44.forwardRef(
+var StatCard = React45.forwardRef(
   ({ label, value, delta, hint, sub, icon: Icon, className, ...props }, ref) => {
     const direction = delta?.direction ?? "neutral";
     const tone = delta?.tone ?? toneFromDirection[direction];
     const DeltaIcon = directionIcons[direction];
     const deltaClass = toneClasses[tone];
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "div",
       {
         ref,
         className: cn("rounded-xl border border-border-subtle bg-bg-surface p-5", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx50("span", { className: "text-xs font-medium uppercase tracking-wide text-text-tertiary", children: label }),
-              hint && /* @__PURE__ */ jsx50(TooltipProvider, { children: /* @__PURE__ */ jsxs23(Tooltip, { children: [
-                /* @__PURE__ */ jsx50(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx50("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__ */ jsx50(Info2, { className: "size-3.5", "aria-hidden": "true" }) }) }),
-                /* @__PURE__ */ jsx50(TooltipContent, { children: hint })
+          /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx51("span", { className: "text-xs font-medium uppercase tracking-wide text-text-tertiary", children: label }),
+              hint && /* @__PURE__ */ jsx51(TooltipProvider, { children: /* @__PURE__ */ jsxs24(Tooltip, { children: [
+                /* @__PURE__ */ jsx51(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx51("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__ */ jsx51(Info2, { className: "size-3.5", "aria-hidden": "true" }) }) }),
+                /* @__PURE__ */ jsx51(TooltipContent, { children: hint })
               ] }) })
             ] }),
-            Icon && /* @__PURE__ */ jsx50(Icon, { className: "size-4 text-icon-secondary", "aria-hidden": "true" })
+            Icon && /* @__PURE__ */ jsx51(Icon, { className: "size-4 text-icon-secondary", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx50("div", { className: "mt-2 text-3xl font-semibold text-text-primary", children: value }),
-          (delta || sub) && /* @__PURE__ */ jsxs23("div", { className: "mt-2 flex items-center gap-2 text-sm", children: [
-            delta && /* @__PURE__ */ jsxs23("span", { className: cn("inline-flex items-center gap-0.5 font-medium", deltaClass), children: [
-              /* @__PURE__ */ jsx50(DeltaIcon, { className: "size-3.5", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx51("div", { className: "mt-2 text-3xl font-semibold text-text-primary", children: value }),
+          (delta || sub) && /* @__PURE__ */ jsxs24("div", { className: "mt-2 flex items-center gap-2 text-sm", children: [
+            delta && /* @__PURE__ */ jsxs24("span", { className: cn("inline-flex items-center gap-0.5 font-medium", deltaClass), children: [
+              /* @__PURE__ */ jsx51(DeltaIcon, { className: "size-3.5", "aria-hidden": "true" }),
               delta.value
             ] }),
-            sub && /* @__PURE__ */ jsx50("span", { className: "text-text-tertiary", children: sub })
+            sub && /* @__PURE__ */ jsx51("span", { className: "text-text-tertiary", children: sub })
           ] })
         ]
       }
@@ -2540,11 +2710,11 @@ var StatCard = React44.forwardRef(
 StatCard.displayName = "StatCard";
 
 // src/components/confirm-dialog.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 import { Loader2 } from "lucide-react";
-import { jsx as jsx51, jsxs as jsxs24 } from "react/jsx-runtime";
-var InlineError = React45.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx51(
+import { jsx as jsx52, jsxs as jsxs25 } from "react/jsx-runtime";
+var InlineError = React46.forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx52(
     "div",
     {
       ref,
@@ -2570,12 +2740,12 @@ function ConfirmDialog({
   destructive = false,
   onConfirm
 }) {
-  const [internalOpen, setInternalOpen] = React45.useState(false);
+  const [internalOpen, setInternalOpen] = React46.useState(false);
   const isControlled = open !== void 0;
   const actualOpen = isControlled ? open : internalOpen;
-  const [busy, setBusy] = React45.useState(false);
-  const [error, setError] = React45.useState(null);
-  React45.useEffect(() => {
+  const [busy, setBusy] = React46.useState(false);
+  const [error, setError] = React46.useState(null);
+  React46.useEffect(() => {
     if (!actualOpen) setError(null);
   }, [actualOpen]);
   const setOpen = (next) => {
@@ -2595,20 +2765,20 @@ function ConfirmDialog({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsxs24(Dialog, { open: actualOpen, onOpenChange: (next) => {
+  return /* @__PURE__ */ jsxs25(Dialog, { open: actualOpen, onOpenChange: (next) => {
     if (!busy) setOpen(next);
   }, children: [
-    trigger && /* @__PURE__ */ jsx51(DialogTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxs24(DialogContent, { children: [
-      /* @__PURE__ */ jsxs24(DialogHeader, { children: [
-        /* @__PURE__ */ jsx51(DialogTitle, { children: title }),
-        description && /* @__PURE__ */ jsx51(DialogDescription, { children: description })
+    trigger && /* @__PURE__ */ jsx52(DialogTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs25(DialogContent, { children: [
+      /* @__PURE__ */ jsxs25(DialogHeader, { children: [
+        /* @__PURE__ */ jsx52(DialogTitle, { children: title }),
+        description && /* @__PURE__ */ jsx52(DialogDescription, { children: description })
       ] }),
-      error && /* @__PURE__ */ jsx51(InlineError, { children: error }),
-      /* @__PURE__ */ jsxs24(DialogFooter, { children: [
-        /* @__PURE__ */ jsx51(Button, { variant: "outline", disabled: busy, onClick: () => setOpen(false), children: cancelLabel }),
-        /* @__PURE__ */ jsxs24(Button, { variant: destructive ? "destructive" : "default", disabled: busy, onClick: handleConfirm, children: [
-          busy && /* @__PURE__ */ jsx51(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }),
+      error && /* @__PURE__ */ jsx52(InlineError, { children: error }),
+      /* @__PURE__ */ jsxs25(DialogFooter, { children: [
+        /* @__PURE__ */ jsx52(Button, { variant: "outline", disabled: busy, onClick: () => setOpen(false), children: cancelLabel }),
+        /* @__PURE__ */ jsxs25(Button, { variant: destructive ? "destructive" : "default", disabled: busy, onClick: handleConfirm, children: [
+          busy && /* @__PURE__ */ jsx52(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }),
           confirmLabel
         ] })
       ] })
@@ -2618,7 +2788,7 @@ function ConfirmDialog({
 
 // src/components/user-menu.tsx
 import { ChevronsUpDown } from "lucide-react";
-import { Fragment, jsx as jsx52, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
 function initialsOf(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (parts.length === 0) return "?";
@@ -2627,11 +2797,11 @@ function initialsOf(name) {
 }
 function UserMenu({ user, items, collapsed = false, align = "start" }) {
   const secondLine = user.subtitle ?? user.email;
-  const avatar = /* @__PURE__ */ jsxs25(Avatar, { className: collapsed ? "size-9" : "size-7", children: [
-    user.avatarUrl && /* @__PURE__ */ jsx52(AvatarImage, { src: user.avatarUrl, alt: user.name }),
-    /* @__PURE__ */ jsx52(AvatarFallback, { className: "text-xs", children: initialsOf(user.name) })
+  const avatar = /* @__PURE__ */ jsxs26(Avatar, { className: collapsed ? "size-9" : "size-7", children: [
+    user.avatarUrl && /* @__PURE__ */ jsx53(AvatarImage, { src: user.avatarUrl, alt: user.name }),
+    /* @__PURE__ */ jsx53(AvatarFallback, { className: "text-xs", children: initialsOf(user.name) })
   ] });
-  const trigger = collapsed ? /* @__PURE__ */ jsx52(
+  const trigger = collapsed ? /* @__PURE__ */ jsx53(
     "button",
     {
       type: "button",
@@ -2639,46 +2809,46 @@ function UserMenu({ user, items, collapsed = false, align = "start" }) {
       className: "rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
       children: avatar
     }
-  ) : /* @__PURE__ */ jsxs25(
+  ) : /* @__PURE__ */ jsxs26(
     "button",
     {
       type: "button",
       className: "flex w-full items-center gap-2.5 rounded-xl px-1.5 py-[5px] text-left transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
       children: [
         avatar,
-        /* @__PURE__ */ jsxs25("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx52("span", { className: "truncate text-sm leading-[normal] font-medium text-text-primary", children: user.name }),
-          secondLine && /* @__PURE__ */ jsx52("span", { className: "truncate text-xs leading-[normal] text-text-tertiary", children: secondLine })
+        /* @__PURE__ */ jsxs26("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx53("span", { className: "truncate text-sm leading-[normal] font-medium text-text-primary", children: user.name }),
+          secondLine && /* @__PURE__ */ jsx53("span", { className: "truncate text-xs leading-[normal] text-text-tertiary", children: secondLine })
         ] }),
-        /* @__PURE__ */ jsx52(ChevronsUpDown, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
+        /* @__PURE__ */ jsx53(ChevronsUpDown, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
       ]
     }
   );
-  const menuTrigger = /* @__PURE__ */ jsx52(DropdownMenuTrigger, { asChild: true, children: trigger });
-  const menu = /* @__PURE__ */ jsxs25(DropdownMenu, { children: [
-    collapsed ? /* @__PURE__ */ jsx52(TooltipProvider, { children: /* @__PURE__ */ jsxs25(Tooltip, { children: [
-      /* @__PURE__ */ jsx52(TooltipTrigger, { asChild: true, children: menuTrigger }),
-      /* @__PURE__ */ jsx52(TooltipContent, { side: "right", children: user.name })
+  const menuTrigger = /* @__PURE__ */ jsx53(DropdownMenuTrigger, { asChild: true, children: trigger });
+  const menu = /* @__PURE__ */ jsxs26(DropdownMenu, { children: [
+    collapsed ? /* @__PURE__ */ jsx53(TooltipProvider, { children: /* @__PURE__ */ jsxs26(Tooltip, { children: [
+      /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: menuTrigger }),
+      /* @__PURE__ */ jsx53(TooltipContent, { side: "right", children: user.name })
     ] }) }) : menuTrigger,
-    /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsxs26(
       DropdownMenuContent,
       {
         align,
         sideOffset: 6,
         className: "flex w-56 flex-col gap-px rounded-xl border-border-subtle bg-[var(--menu-bg)] p-1 shadow-(--menu-shadow)",
         children: [
-          /* @__PURE__ */ jsxs25(DropdownMenuLabel, { className: "px-2 pt-1.5 pb-1 text-xs font-medium text-text-tertiary", children: [
-            /* @__PURE__ */ jsx52("span", { className: "block truncate text-sm font-medium text-text-primary", children: user.name }),
-            secondLine && /* @__PURE__ */ jsx52("span", { className: "block truncate text-xs font-normal text-text-tertiary", children: secondLine })
+          /* @__PURE__ */ jsxs26(DropdownMenuLabel, { className: "px-2 pt-1.5 pb-1 text-xs font-medium text-text-tertiary", children: [
+            /* @__PURE__ */ jsx53("span", { className: "block truncate text-sm font-medium text-text-primary", children: user.name }),
+            secondLine && /* @__PURE__ */ jsx53("span", { className: "block truncate text-xs font-normal text-text-tertiary", children: secondLine })
           ] }),
-          /* @__PURE__ */ jsx52(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
+          /* @__PURE__ */ jsx53(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
           items.map((item, i) => {
             const Icon = item.icon;
-            const content = /* @__PURE__ */ jsxs25(Fragment, { children: [
-              Icon && /* @__PURE__ */ jsx52(Icon, { className: "size-4", "aria-hidden": "true" }),
+            const content = /* @__PURE__ */ jsxs26(Fragment2, { children: [
+              Icon && /* @__PURE__ */ jsx53(Icon, { className: "size-4", "aria-hidden": "true" }),
               item.label
             ] });
-            return /* @__PURE__ */ jsx52(
+            return /* @__PURE__ */ jsx53(
               DropdownMenuItem,
               {
                 onSelect: item.onSelect,
@@ -2687,7 +2857,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__ */ jsx52("a", { href: item.href, children: content }) : content
+                children: item.href ? /* @__PURE__ */ jsx53("a", { href: item.href, children: content }) : content
               },
               `${item.label}-${i}`
             );
@@ -2701,20 +2871,20 @@ function UserMenu({ user, items, collapsed = false, align = "start" }) {
 
 // src/components/extension-link.tsx
 import { Link as Link2 } from "react-router";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function ExtensionLink({ uiMode, to, className, children, ...anchorProps }) {
   if (uiMode === "federation") {
-    return /* @__PURE__ */ jsx53(Link2, { to, className, ...anchorProps, children });
+    return /* @__PURE__ */ jsx54(Link2, { to, className, ...anchorProps, children });
   }
-  return /* @__PURE__ */ jsx53("a", { href: to, className, ...anchorProps, children });
+  return /* @__PURE__ */ jsx54("a", { href: to, className, ...anchorProps, children });
 }
 ExtensionLink.displayName = "ExtensionLink";
 
 // src/components/extension-icon.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import * as LucideIcons from "lucide-react";
 import { Puzzle } from "lucide-react";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var FORWARD_REF = /* @__PURE__ */ Symbol.for("react.forward_ref");
 var catalog = LucideIcons;
 function toPascalCase(name) {
@@ -2739,14 +2909,14 @@ function warnUnknownIconOnce(name) {
   warnedUnknownIcons.add(name);
   console.warn(`[@lessly/ui] ExtensionIcon: unknown icon "${name}" \u2014 falling back to Puzzle.`);
 }
-var ExtensionIcon = React46.forwardRef(
+var ExtensionIcon = React47.forwardRef(
   ({ name, ...props }, ref) => {
     const Icon = resolveIcon(name);
     if (!Icon) {
       warnUnknownIconOnce(name);
-      return /* @__PURE__ */ jsx54(Puzzle, { ref, ...props });
+      return /* @__PURE__ */ jsx55(Puzzle, { ref, ...props });
     }
-    return /* @__PURE__ */ jsx54(Icon, { ref, ...props });
+    return /* @__PURE__ */ jsx55(Icon, { ref, ...props });
   }
 );
 ExtensionIcon.displayName = "ExtensionIcon";
@@ -2793,9 +2963,9 @@ function useSidebar(options = {}) {
 }
 
 // src/components/nav-row.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 import { Slot as Slot4 } from "@radix-ui/react-slot";
-import { Fragment as Fragment2, jsx as jsx55, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
 var base = "flex w-full items-center text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
 var shape = {
   rail: "gap-[14px] rounded-xl px-2.5 py-2",
@@ -2811,9 +2981,9 @@ var state = {
     active: "font-semibold text-text-brand hover:bg-[var(--menu-hov)]"
   }
 };
-var NavRow = React47.forwardRef(function NavRow2({ icon, label, active = false, variant, trailing, hideLabel = false, asChild = false, className, children, ...props }, ref) {
-  const content = /* @__PURE__ */ jsxs26(Fragment2, { children: [
-    icon && /* @__PURE__ */ jsx55(
+var NavRow = React48.forwardRef(function NavRow2({ icon, label, active = false, variant, trailing, hideLabel = false, asChild = false, className, children, ...props }, ref) {
+  const content = /* @__PURE__ */ jsxs27(Fragment3, { children: [
+    icon && /* @__PURE__ */ jsx56(
       "span",
       {
         className: "flex size-5 shrink-0 items-center justify-center [&_svg]:size-[18px]",
@@ -2821,24 +2991,24 @@ var NavRow = React47.forwardRef(function NavRow2({ icon, label, active = false,
         children: icon
       }
     ),
-    !hideLabel && /* @__PURE__ */ jsx55("span", { className: "min-w-0 flex-1 truncate", children: label }),
-    trailing && /* @__PURE__ */ jsx55("span", { className: "flex shrink-0 items-center", children: trailing })
+    !hideLabel && /* @__PURE__ */ jsx56("span", { className: "min-w-0 flex-1 truncate", children: label }),
+    trailing && /* @__PURE__ */ jsx56("span", { className: "flex shrink-0 items-center", children: trailing })
   ] });
   const classes = cn(base, shape[variant], state[variant][active ? "active" : "idle"], className);
   if (asChild) {
-    const child = React47.Children.only(children);
-    return /* @__PURE__ */ jsx55(Slot4, { ref, className: classes, "aria-label": hideLabel ? label : void 0, ...props, children: React47.cloneElement(child, void 0, content) });
+    const child = React48.Children.only(children);
+    return /* @__PURE__ */ jsx56(Slot4, { ref, className: classes, "aria-label": hideLabel ? label : void 0, ...props, children: React48.cloneElement(child, void 0, content) });
   }
-  return /* @__PURE__ */ jsx55("button", { ref, type: "button", className: classes, "aria-label": hideLabel ? label : void 0, ...props, children: content });
+  return /* @__PURE__ */ jsx56("button", { ref, type: "button", className: classes, "aria-label": hideLabel ? label : void 0, ...props, children: content });
 });
 NavRow.displayName = "NavRow";
 
 // src/components/nav-section-label.tsx
-import * as React48 from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
-var NavSectionLabel = React48.forwardRef(
+import * as React49 from "react";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var NavSectionLabel = React49.forwardRef(
   function NavSectionLabel2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx56(
+    return /* @__PURE__ */ jsx57(
       "div",
       {
         ref,
@@ -2851,8 +3021,8 @@ var NavSectionLabel = React48.forwardRef(
 NavSectionLabel.displayName = "NavSectionLabel";
 
 // src/components/menu-popup.tsx
-import * as React49 from "react";
-import { jsx as jsx57, jsxs as jsxs27 } from "react/jsx-runtime";
+import * as React50 from "react";
+import { jsx as jsx58, jsxs as jsxs28 } from "react/jsx-runtime";
 function MenuPopup({
   trigger,
   children,
@@ -2864,9 +3034,9 @@ function MenuPopup({
   sideOffset = 6,
   className
 }) {
-  return /* @__PURE__ */ jsxs27(Popover, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx57(PopoverTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs28(Popover, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx58(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx58(
       PopoverContent,
       {
         side: direction === "up" ? "top" : "bottom",
@@ -2881,9 +3051,9 @@ function MenuPopup({
     )
   ] });
 }
-var MenuDivider = React49.forwardRef(
+var MenuDivider = React50.forwardRef(
   function MenuDivider2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx57(
+    return /* @__PURE__ */ jsx58(
       "div",
       {
         ref,
@@ -2898,7 +3068,7 @@ MenuDivider.displayName = "MenuDivider";
 
 // src/components/sidebar-nav.tsx
 import { Link as Link3, useLocation } from "react-router";
-import { jsx as jsx58, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
 function isActivePath(pathname, full, exact) {
   if (exact) return pathname === full;
   return pathname === full || pathname.startsWith(`${full}/`);
@@ -2914,23 +3084,23 @@ function SidebarNavLink({
   const Comp = LinkComponent ?? Link3;
   const to = `${basePath}${item.href}`;
   const Icon = item.icon;
-  const link = /* @__PURE__ */ jsx58(
+  const link = /* @__PURE__ */ jsx59(
     NavRow,
     {
       variant: "rail",
       active,
       label: item.label,
       hideLabel: collapsed,
-      icon: Icon ? /* @__PURE__ */ jsx58(Icon, { "aria-hidden": "true" }) : void 0,
+      icon: Icon ? /* @__PURE__ */ jsx59(Icon, { "aria-hidden": "true" }) : void 0,
       className: cn(collapsed && "size-9 justify-center px-0 py-0", className),
       asChild: true,
-      children: /* @__PURE__ */ jsx58(Comp, { to, "aria-current": active ? "page" : void 0 })
+      children: /* @__PURE__ */ jsx59(Comp, { to, "aria-current": active ? "page" : void 0 })
     }
   );
   if (!collapsed) return link;
-  return /* @__PURE__ */ jsxs28(Tooltip, { children: [
-    /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: link }),
-    /* @__PURE__ */ jsx58(TooltipContent, { side: "right", children: item.label })
+  return /* @__PURE__ */ jsxs29(Tooltip, { children: [
+    /* @__PURE__ */ jsx59(TooltipTrigger, { asChild: true, children: link }),
+    /* @__PURE__ */ jsx59(TooltipContent, { side: "right", children: item.label })
   ] });
 }
 function SidebarNav({
@@ -2942,7 +3112,7 @@ function SidebarNav({
   className
 }) {
   const { pathname } = useLocation();
-  const nav = /* @__PURE__ */ jsx58(
+  const nav = /* @__PURE__ */ jsx59(
     "nav",
     {
       className: cn(
@@ -2953,7 +3123,7 @@ function SidebarNav({
       children: items.map((item) => {
         const full = `${basePath}${item.href}`;
         const active = isItemActive ? isItemActive(item, pathname) : isActivePath(pathname, full, item.exact);
-        return /* @__PURE__ */ jsx58(
+        return /* @__PURE__ */ jsx59(
           SidebarNavLink,
           {
             item,
@@ -2967,14 +3137,14 @@ function SidebarNav({
       })
     }
   );
-  return collapsed ? /* @__PURE__ */ jsx58(TooltipProvider, { children: nav }) : nav;
+  return collapsed ? /* @__PURE__ */ jsx59(TooltipProvider, { children: nav }) : nav;
 }
 
 // src/components/app-sidebar.tsx
 import { PanelLeft } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
 function Divider({ collapsed, testId, className }) {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     "div",
     {
       "data-testid": testId,
@@ -3006,7 +3176,7 @@ function AppSidebar({
     defaultCollapsed,
     onCollapsedChange
   });
-  const pin = collapsible ? /* @__PURE__ */ jsx59(
+  const pin = collapsible ? /* @__PURE__ */ jsx60(
     "button",
     {
       type: "button",
@@ -3014,10 +3184,10 @@ function AppSidebar({
       "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
       "aria-expanded": !collapsed,
       className: "flex size-6 shrink-0 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-      children: /* @__PURE__ */ jsx59(PanelLeft, { className: "size-4", "aria-hidden": "true" })
+      children: /* @__PURE__ */ jsx60(PanelLeft, { className: "size-4", "aria-hidden": "true" })
     }
   ) : null;
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "aside",
     {
       "data-collapsed": collapsed,
@@ -3027,12 +3197,12 @@ function AppSidebar({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx59("div", { className: cn("flex items-center gap-2", collapsed ? "justify-center px-1 pt-2" : "px-3 pt-[13px]"), children: collapsed ? collapsible ? logoCollapsed ?? logo ? (
+        /* @__PURE__ */ jsx60("div", { className: cn("flex items-center gap-2", collapsed ? "justify-center px-1 pt-2" : "px-3 pt-[13px]"), children: collapsed ? collapsible ? logoCollapsed ?? logo ? (
           /* The collapsed rail (52px) can't fit the logo mark beside the pin side by side —
              so the pin overlays the mark instead, revealed on hover/focus, same as pre-flat-rail. */
-          /* @__PURE__ */ jsxs29("div", { className: "group relative flex size-8 items-center justify-center", children: [
-            /* @__PURE__ */ jsx59("span", { className: "pointer-events-none transition-opacity group-hover:opacity-0 group-focus-within:opacity-0", children: logoCollapsed ?? logo }),
-            /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsxs30("div", { className: "group relative flex size-8 items-center justify-center", children: [
+            /* @__PURE__ */ jsx60("span", { className: "pointer-events-none transition-opacity group-hover:opacity-0 group-focus-within:opacity-0", children: logoCollapsed ?? logo }),
+            /* @__PURE__ */ jsx60(
               "button",
               {
                 type: "button",
@@ -3040,7 +3210,7 @@ function AppSidebar({
                 "aria-label": "Expand sidebar",
                 "aria-expanded": false,
                 className: "absolute inset-0 flex items-center justify-center rounded-md text-text-secondary opacity-0 transition-opacity hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-border-focus group-hover:opacity-100 group-focus-within:opacity-100",
-                children: /* @__PURE__ */ jsx59(PanelLeft, { className: "size-4", "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx60(PanelLeft, { className: "size-4", "aria-hidden": "true" })
               }
             )
           ] })
@@ -3049,7 +3219,7 @@ function AppSidebar({
              count, it's expanded-only). Hover-revealing the pin over nothing would leave
              an invisible 32px box as the only way back to expanded, so render it plain
              and fully visible instead. */
-          /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsx60(
             "button",
             {
               type: "button",
@@ -3057,15 +3227,15 @@ function AppSidebar({
               "aria-label": "Expand sidebar",
               "aria-expanded": false,
               className: "flex size-8 shrink-0 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-              children: /* @__PURE__ */ jsx59(PanelLeft, { className: "size-4", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx60(PanelLeft, { className: "size-4", "aria-hidden": "true" })
             }
           )
-        ) : logoCollapsed ?? logo : /* @__PURE__ */ jsxs29(Fragment3, { children: [
+        ) : logoCollapsed ?? logo : /* @__PURE__ */ jsxs30(Fragment4, { children: [
           header ?? logo,
           pin
         ] }) }),
-        /* @__PURE__ */ jsx59(Divider, { collapsed, testId: "sidebar-divider-header", className: "mt-3" }),
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx60(Divider, { collapsed, testId: "sidebar-divider-header", className: "mt-3" }),
+        /* @__PURE__ */ jsx60(
           "div",
           {
             "data-testid": "sidebar-scroll",
@@ -3073,12 +3243,12 @@ function AppSidebar({
               "min-h-0 flex-1 overflow-y-auto overflow-x-hidden pt-3 pb-2",
               collapsed ? "px-1" : "px-3"
             ),
-            children: /* @__PURE__ */ jsx59(SidebarNav, { items, collapsed, basePath, LinkComponent, isItemActive })
+            children: /* @__PURE__ */ jsx60(SidebarNav, { items, collapsed, basePath, LinkComponent, isItemActive })
           }
         ),
-        footer && /* @__PURE__ */ jsxs29(Fragment3, { children: [
-          /* @__PURE__ */ jsx59(Divider, { collapsed, testId: "sidebar-divider-account" }),
-          /* @__PURE__ */ jsx59("div", { className: cn("py-2", collapsed ? "px-1" : "px-3"), children: footer })
+        footer && /* @__PURE__ */ jsxs30(Fragment4, { children: [
+          /* @__PURE__ */ jsx60(Divider, { collapsed, testId: "sidebar-divider-account" }),
+          /* @__PURE__ */ jsx60("div", { className: cn("py-2", collapsed ? "px-1" : "px-3"), children: footer })
         ] })
       ]
     }
@@ -3086,36 +3256,123 @@ function AppSidebar({
 }
 
 // src/components/sidebar-product-header.tsx
-import * as React50 from "react";
+import * as React51 from "react";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import { ChevronsUpDown as ChevronsUpDown2 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
-var SidebarProductHeader = React50.forwardRef(
+import { Fragment as Fragment5, jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
+var SidebarProductHeader = React51.forwardRef(
   function SidebarProductHeader2({ name, icon, trailing, asChild = false, className, children, ...props }, ref) {
-    const adornment = trailing === void 0 ? /* @__PURE__ */ jsx60(ChevronsUpDown2, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }) : trailing;
-    const content = /* @__PURE__ */ jsxs30(Fragment4, { children: [
-      icon && /* @__PURE__ */ jsx60("span", { className: "flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md", "aria-hidden": "true", children: icon }),
-      /* @__PURE__ */ jsx60("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-text-primary", children: name }),
-      adornment && /* @__PURE__ */ jsx60("span", { className: "flex shrink-0 items-center", children: adornment })
+    const adornment = trailing === void 0 ? /* @__PURE__ */ jsx61(ChevronsUpDown2, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }) : trailing;
+    const content = /* @__PURE__ */ jsxs31(Fragment5, { children: [
+      icon && /* @__PURE__ */ jsx61("span", { className: "flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md", "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsx61("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-text-primary", children: name }),
+      adornment && /* @__PURE__ */ jsx61("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);
     if (asChild) {
-      const child = React50.Children.only(children);
-      return /* @__PURE__ */ jsx60(Slot5, { ref, className: classes, ...props, children: React50.cloneElement(child, void 0, content) });
+      const child = React51.Children.only(children);
+      return /* @__PURE__ */ jsx61(Slot5, { ref, className: classes, ...props, children: React51.cloneElement(child, void 0, content) });
     }
-    return /* @__PURE__ */ jsx60("button", { ref, type: "button", className: classes, ...props, children: content });
+    return /* @__PURE__ */ jsx61("button", { ref, type: "button", className: classes, ...props, children: content });
   }
 );
 SidebarProductHeader.displayName = "SidebarProductHeader";
 
+// src/components/org-product-switcher.tsx
+import { ChevronsUpDown as ChevronsUpDown3, Check as Check6 } from "lucide-react";
+import { Fragment as Fragment6, jsx as jsx62, jsxs as jsxs32 } from "react/jsx-runtime";
+var triggerBox = "flex w-full items-center gap-2.5 rounded-xl px-1.5 py-1 text-left transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
+var 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";
+function Mark({ item, size }) {
+  const box = size === "md" ? "size-7" : "size-5";
+  if (item.icon) {
+    return /* @__PURE__ */ jsx62("span", { className: cn("flex shrink-0 items-center justify-center overflow-hidden rounded-md", box), "aria-hidden": "true", children: item.icon });
+  }
+  return /* @__PURE__ */ jsx62(
+    "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: item.name.charAt(0).toUpperCase()
+    }
+  );
+}
+function OrgProductSwitcher({
+  organizations,
+  activeOrgId,
+  onOrgSelect,
+  products,
+  activeProductId,
+  onProductSelect,
+  actions,
+  className,
+  ...props
+}) {
+  const activeOrg = organizations.find((o) => o.id === activeOrgId);
+  const activeProduct = products.find((p) => p.id === activeProductId);
+  const ariaLabel = props["aria-label"] ?? `${activeOrg?.name ?? ""} / ${activeProduct?.name ?? ""}`;
+  return /* @__PURE__ */ jsxs32(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs32(DropdownMenuTrigger, { "aria-label": ariaLabel, className: cn(triggerBox, className), children: [
+      activeProduct && /* @__PURE__ */ jsx62(Mark, { item: activeProduct, size: "md" }),
+      /* @__PURE__ */ jsxs32("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx62("span", { className: "truncate text-xs leading-[normal] text-text-tertiary", children: activeOrg?.name }),
+        /* @__PURE__ */ jsx62("span", { className: "truncate text-sm leading-[normal] font-semibold text-text-primary", children: activeProduct?.name })
+      ] }),
+      /* @__PURE__ */ jsx62(ChevronsUpDown3, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" })
+    ] }),
+    /* @__PURE__ */ jsxs32(
+      DropdownMenuContent,
+      {
+        align: "start",
+        sideOffset: 6,
+        className: "flex w-60 flex-col gap-px rounded-xl border-border-subtle bg-[var(--menu-bg)] p-1 shadow-(--menu-shadow)",
+        children: [
+          /* @__PURE__ */ jsx62(DropdownMenuLabel, { className: sectionLabel, children: "Organizations" }),
+          organizations.map((o) => /* @__PURE__ */ jsxs32(DropdownMenuItem, { className: menuItem, onSelect: () => onOrgSelect(o.id), children: [
+            /* @__PURE__ */ jsx62(Mark, { item: o, size: "sm" }),
+            /* @__PURE__ */ jsx62("span", { className: "min-w-0 flex-1 truncate", children: o.name }),
+            o.id === activeOrgId && /* @__PURE__ */ jsx62(Check6, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
+          ] }, o.id)),
+          /* @__PURE__ */ jsx62(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
+          /* @__PURE__ */ jsxs32(DropdownMenuLabel, { className: sectionLabel, children: [
+            activeOrg?.name,
+            " \xB7 Products"
+          ] }),
+          products.map((p) => /* @__PURE__ */ jsxs32(DropdownMenuItem, { className: menuItem, onSelect: () => onProductSelect(p.id), children: [
+            /* @__PURE__ */ jsx62(Mark, { item: p, size: "sm" }),
+            /* @__PURE__ */ jsx62("span", { className: "min-w-0 flex-1 truncate", children: p.name }),
+            p.id === activeProductId && /* @__PURE__ */ jsx62(Check6, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
+          ] }, p.id)),
+          actions && actions.length > 0 && /* @__PURE__ */ jsxs32(Fragment6, { children: [
+            /* @__PURE__ */ jsx62(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
+            actions.map((a) => /* @__PURE__ */ jsx62(DropdownMenuItem, { className: menuItem, onSelect: a.onSelect, asChild: Boolean(a.href), children: a.href ? /* @__PURE__ */ jsxs32("a", { href: a.href, children: [
+              a.icon,
+              a.label
+            ] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
+              a.icon,
+              a.label
+            ] }) }, a.id))
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+OrgProductSwitcher.displayName = "OrgProductSwitcher";
+
 // src/components/sidebar-back-header.tsx
 import { ArrowLeft as ArrowLeft2 } from "lucide-react";
-import { jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs33 } from "react/jsx-runtime";
 var focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
 var arrowPlate = "flex size-5 items-center justify-center rounded-md transition-colors hover:bg-[color-mix(in_srgb,var(--text-primary)_12%,transparent)] hover:text-text-primary";
 var 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__ */ jsx61(ArrowLeft2, { size: 16, "aria-hidden": "true" });
+var Arrow = () => /* @__PURE__ */ jsx63(ArrowLeft2, { size: 16, "aria-hidden": "true" });
 function SidebarBackHeader({
   title,
   onBack,
@@ -3129,7 +3386,7 @@ function SidebarBackHeader({
   const { className: arrowClassName, ...arrowRest } = arrowProps ?? {};
   const { className: titleClassName, ...titleRest } = titleProps ?? {};
   if (!onTitleClick) {
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs33(
       "button",
       {
         type: "button",
@@ -3137,14 +3394,14 @@ function SidebarBackHeader({
         className: cn("flex items-center rounded-xl", focusRing, className),
         ...rowProps,
         children: [
-          /* @__PURE__ */ jsx61("span", { className: arrowBox, children: /* @__PURE__ */ jsx61("span", { className: cn(arrowPlate, arrowClassName), ...arrowRest, children: /* @__PURE__ */ jsx61(Arrow, {}) }) }),
-          /* @__PURE__ */ jsx61("span", { className: cn(titleBox, titleClassName), ...titleRest, children: title })
+          /* @__PURE__ */ jsx63("span", { className: arrowBox, children: /* @__PURE__ */ jsx63("span", { className: cn(arrowPlate, arrowClassName), ...arrowRest, children: /* @__PURE__ */ jsx63(Arrow, {}) }) }),
+          /* @__PURE__ */ jsx63("span", { className: cn(titleBox, titleClassName), ...titleRest, children: title })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs31("div", { className: cn("flex items-center", className), ...rowProps, children: [
-    /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsxs33("div", { className: cn("flex items-center", className), ...rowProps, children: [
+    /* @__PURE__ */ jsx63(
       "button",
       {
         type: "button",
@@ -3152,10 +3409,10 @@ function SidebarBackHeader({
         onClick: onBack,
         className: cn(arrowBox, focusRing, arrowClassName),
         ...arrowRest,
-        children: /* @__PURE__ */ jsx61("span", { className: arrowPlate, children: /* @__PURE__ */ jsx61(Arrow, {}) })
+        children: /* @__PURE__ */ jsx63("span", { className: arrowPlate, children: /* @__PURE__ */ jsx63(Arrow, {}) })
       }
     ),
-    /* @__PURE__ */ jsx61(
+    /* @__PURE__ */ jsx63(
       "button",
       {
         type: "button",
@@ -3170,54 +3427,54 @@ function SidebarBackHeader({
 SidebarBackHeader.displayName = "SidebarBackHeader";
 
 // src/components/app-shell.tsx
-import * as React51 from "react";
+import * as React52 from "react";
 import { Menu as Menu2 } from "lucide-react";
 import { useLocation as useLocation2 } from "react-router";
-import { jsx as jsx62, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs34 } from "react/jsx-runtime";
 function expandedSidebar(sidebar) {
-  return React51.isValidElement(sidebar) ? React51.cloneElement(sidebar, { collapsed: false }) : sidebar;
+  return React52.isValidElement(sidebar) ? React52.cloneElement(sidebar, { collapsed: false }) : sidebar;
 }
 function AppShell({ sidebar, topBar, children, className }) {
   const { pathname } = useLocation2();
-  const [mobileOpen, setMobileOpen] = React51.useState(false);
-  React51.useEffect(() => {
+  const [mobileOpen, setMobileOpen] = React52.useState(false);
+  React52.useEffect(() => {
     setMobileOpen(false);
   }, [pathname]);
   const isMobile = useIsMobile();
   if (isMobile) {
-    return /* @__PURE__ */ jsx62(TooltipProvider, { children: /* @__PURE__ */ jsxs32("div", { className: cn("flex min-h-screen flex-col bg-bg-surface", className), children: [
-      /* @__PURE__ */ jsxs32("header", { className: "flex shrink-0 items-center justify-between border-b border-border-subtle bg-bg-surface px-4 py-3", children: [
-        /* @__PURE__ */ jsxs32(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
-          /* @__PURE__ */ jsx62(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx62(Button, { variant: "ghost", size: "icon", className: "size-8 text-text-secondary", "aria-label": "Open navigation", children: /* @__PURE__ */ jsx62(Menu2, { className: "size-5" }) }) }),
-          /* @__PURE__ */ jsxs32(SheetContent, { side: "left", className: "w-[248px] bg-bg-surface p-0", children: [
-            /* @__PURE__ */ jsx62(SheetTitle, { className: "sr-only", children: "Navigation" }),
-            /* @__PURE__ */ jsx62(SheetDescription, { className: "sr-only", children: "Application navigation menu" }),
+    return /* @__PURE__ */ jsx64(TooltipProvider, { children: /* @__PURE__ */ jsxs34("div", { className: cn("flex min-h-screen flex-col bg-bg-surface", className), children: [
+      /* @__PURE__ */ jsxs34("header", { className: "flex shrink-0 items-center justify-between border-b border-border-subtle bg-bg-surface px-4 py-3", children: [
+        /* @__PURE__ */ jsxs34(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
+          /* @__PURE__ */ jsx64(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx64(Button, { variant: "ghost", size: "icon", className: "size-8 text-text-secondary", "aria-label": "Open navigation", children: /* @__PURE__ */ jsx64(Menu2, { className: "size-5" }) }) }),
+          /* @__PURE__ */ jsxs34(SheetContent, { side: "left", className: "w-[248px] bg-bg-surface p-0", children: [
+            /* @__PURE__ */ jsx64(SheetTitle, { className: "sr-only", children: "Navigation" }),
+            /* @__PURE__ */ jsx64(SheetDescription, { className: "sr-only", children: "Application navigation menu" }),
             expandedSidebar(sidebar)
           ] })
         ] }),
-        /* @__PURE__ */ jsx62("div", { className: "flex items-center gap-2", children: topBar })
+        /* @__PURE__ */ jsx64("div", { className: "flex items-center gap-2", children: topBar })
       ] }),
-      /* @__PURE__ */ jsx62("main", { className: "flex-1 overflow-auto", children })
+      /* @__PURE__ */ jsx64("main", { className: "flex-1 overflow-auto", children })
     ] }) });
   }
-  return /* @__PURE__ */ jsx62(TooltipProvider, { children: /* @__PURE__ */ jsxs32("div", { className: cn("flex min-h-screen gap-3 bg-bg-surface p-4", className), children: [
-    /* @__PURE__ */ jsx62("div", { className: "sticky top-4 h-[calc(100vh-32px)] shrink-0", children: sidebar }),
-    /* @__PURE__ */ jsxs32("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
-      topBar && /* @__PURE__ */ jsx62("div", { className: "flex shrink-0 items-center justify-end gap-2", children: topBar }),
-      /* @__PURE__ */ jsx62("main", { className: "flex-1 overflow-y-auto", children })
+  return /* @__PURE__ */ jsx64(TooltipProvider, { children: /* @__PURE__ */ jsxs34("div", { className: cn("flex min-h-screen gap-3 bg-bg-surface p-4", className), children: [
+    /* @__PURE__ */ jsx64("div", { className: "sticky top-4 h-[calc(100vh-32px)] shrink-0", children: sidebar }),
+    /* @__PURE__ */ jsxs34("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+      topBar && /* @__PURE__ */ jsx64("div", { className: "flex shrink-0 items-center justify-end gap-2", children: topBar }),
+      /* @__PURE__ */ jsx64("main", { className: "flex-1 overflow-y-auto", children })
     ] })
   ] }) });
 }
 var AuthenticatedLayout = AppShell;
 
 // src/components/grid.tsx
-import * as React52 from "react";
+import * as React53 from "react";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
-import { jsx as jsx63 } from "react/jsx-runtime";
-var Grid = React52.forwardRef(
+import { jsx as jsx65 } from "react/jsx-runtime";
+var Grid = React53.forwardRef(
   ({ fluid = false, asChild = false, className, ...props }, ref) => {
     const Comp = asChild ? Slot6 : "div";
-    return /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsx65(
       Comp,
       {
         ref,
@@ -3235,9 +3492,9 @@ var Grid = React52.forwardRef(
 Grid.displayName = "Grid";
 
 // src/components/col.tsx
-import * as React53 from "react";
+import * as React54 from "react";
 import { Slot as Slot7 } from "@radix-ui/react-slot";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var TIER_MAX = { base: 4, md: 8, xl: 12 };
 var SPAN = {
   base: { 1: "col-span-1", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4" },
@@ -3357,22 +3614,194 @@ function responsiveClasses(span, offset) {
   }
   return cn(...spanClasses, ...startClasses);
 }
-var Col = React53.forwardRef(
+var Col = React54.forwardRef(
   ({ span, offset, asChild = false, className, ...props }, ref) => {
     const Comp = asChild ? Slot7 : "div";
-    return /* @__PURE__ */ jsx64(Comp, { ref, className: cn(responsiveClasses(span, offset), className), ...props });
+    return /* @__PURE__ */ jsx66(Comp, { ref, className: cn(responsiveClasses(span, offset), className), ...props });
   }
 );
 Col.displayName = "Col";
 
+// src/components/code-block.tsx
+import * as React55 from "react";
+import { jsx as jsx67, jsxs as jsxs35 } from "react/jsx-runtime";
+var TOKEN_CLASS = {
+  comment: "text-text-tertiary italic",
+  string: "text-text-success",
+  keyword: "text-text-link",
+  other: "text-text-secondary"
+};
+var TS_KEYWORDS = [
+  "import",
+  "from",
+  "export",
+  "default",
+  "const",
+  "let",
+  "var",
+  "function",
+  "return",
+  "new",
+  "type",
+  "interface",
+  "enum",
+  "extends",
+  "implements",
+  "class",
+  "async",
+  "await",
+  "if",
+  "else",
+  "for",
+  "while",
+  "switch",
+  "case",
+  "break",
+  "continue",
+  "true",
+  "false",
+  "null",
+  "undefined",
+  "void",
+  "as",
+  "satisfies",
+  "typeof",
+  "keyof",
+  "in",
+  "of"
+];
+var LANGS = {
+  ts: { lineComment: "//", blockComment: true, keywords: TS_KEYWORDS },
+  tsx: { lineComment: "//", blockComment: true, keywords: TS_KEYWORDS },
+  bash: {
+    lineComment: "#",
+    blockComment: false,
+    keywords: [
+      "pnpm",
+      "npm",
+      "npx",
+      "yarn",
+      "node",
+      "cd",
+      "export",
+      "echo",
+      "sudo",
+      "git",
+      "rm",
+      "mkdir",
+      "cp",
+      "mv",
+      "ls",
+      "cat",
+      "set",
+      "source"
+    ]
+  },
+  json: { blockComment: false, keywords: ["true", "false", "null"] },
+  css: {
+    blockComment: true,
+    keywords: [
+      "important",
+      "inherit",
+      "initial",
+      "unset",
+      "none",
+      "auto",
+      "@media",
+      "@import",
+      "@keyframes",
+      "@font-face",
+      "@supports"
+    ]
+  }
+};
+function escapeRe(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function buildRegex(cfg) {
+  const commentAlts = [];
+  if (cfg.blockComment) commentAlts.push("/\\*[\\s\\S]*?\\*/");
+  if (cfg.lineComment) commentAlts.push(escapeRe(cfg.lineComment) + "[^\\n]*");
+  const comment = commentAlts.length ? `(?<comment>${commentAlts.join("|")})` : "";
+  const string = `(?<string>'(?:[^'\\\\]|\\\\.)*'|"(?:[^"\\\\]|\\\\.)*"|\`(?:[^\`\\\\]|\\\\.)*\`)`;
+  const kw = cfg.keywords.map(escapeRe).join("|");
+  const keyword = kw ? `(?<keyword>(?<![\\w$])(?:${kw})(?![\\w$]))` : "";
+  const other = "(?<other>[\\s\\S])";
+  const src = [comment, string, keyword, other].filter(Boolean).join("|");
+  return new RegExp(src, "g");
+}
+var LANG_RE = {
+  ts: buildRegex(LANGS.ts),
+  tsx: buildRegex(LANGS.tsx),
+  bash: buildRegex(LANGS.bash),
+  json: buildRegex(LANGS.json),
+  css: buildRegex(LANGS.css)
+};
+function tokenize(code, lang) {
+  const tokens = [];
+  for (const match of code.matchAll(LANG_RE[lang])) {
+    const g = match.groups ?? {};
+    const kind = g.comment != null ? "comment" : g.string != null ? "string" : g.keyword != null ? "keyword" : "other";
+    const text = match[0];
+    const prev = tokens[tokens.length - 1];
+    if (prev && prev.kind === kind && kind === "other") {
+      prev.text += text;
+    } else {
+      tokens.push({ kind, text });
+    }
+  }
+  return tokens;
+}
+var CodeBlock = React55.forwardRef(
+  ({ code, lang = "tsx", copy = false, filename, scroll = false, className, ...props }, ref) => {
+    const tokens = React55.useMemo(() => tokenize(code, lang), [code, lang]);
+    const framed = Boolean(filename) || copy;
+    const pre = /* @__PURE__ */ jsx67(
+      "pre",
+      {
+        ref,
+        className: cn(
+          "p-4 font-mono text-xs leading-6 text-text-secondary",
+          scroll ? "overflow-x-auto" : "whitespace-pre-wrap break-words",
+          !framed && "rounded-lg border border-border-subtle bg-bg-primary",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx67("code", { children: tokens.map((token, index) => /* @__PURE__ */ jsx67("span", { className: TOKEN_CLASS[token.kind], children: token.text }, index)) })
+      }
+    );
+    if (!framed) return pre;
+    return /* @__PURE__ */ jsxs35("div", { className: "overflow-hidden rounded-lg border border-border-subtle bg-bg-primary", children: [
+      /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between gap-3 border-b border-border-subtle px-4 py-2", children: [
+        filename ? /* @__PURE__ */ jsx67("span", { className: "font-mono text-xs text-text-tertiary", children: filename }) : /* @__PURE__ */ jsx67("span", {}),
+        copy ? /* @__PURE__ */ jsx67(CopyButton, { value: code, label: "Copy code" }) : null
+      ] }),
+      pre
+    ] });
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+var Code = React55.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67(
+  "code",
+  {
+    ref,
+    className: cn(
+      "rounded border border-border-subtle bg-bg-secondary px-1.5 py-0.5 font-mono text-[0.85em] text-text-primary",
+      className
+    ),
+    ...props
+  }
+));
+Code.displayName = "Code";
+
 // src/components/grid-overlay.tsx
-import * as React54 from "react";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import * as React56 from "react";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var BASELINE = "var(--grid-gutter) / 2";
-var GridOverlay = React54.forwardRef(
+var GridOverlay = React56.forwardRef(
   ({ columns, baseline = false, className, style, ...props }, ref) => {
     const count = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;
-    return /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx68(
       "div",
       {
         ref,
@@ -3389,7 +3818,7 @@ var GridOverlay = React54.forwardRef(
           ...style
         },
         ...props,
-        children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx65("span", { style: { backgroundColor: "var(--bg-brand)", opacity: 0.1 } }, i))
+        children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx68("span", { style: { backgroundColor: "var(--bg-brand)", opacity: 0.1 } }, i))
       }
     );
   }
@@ -3397,10 +3826,10 @@ var GridOverlay = React54.forwardRef(
 GridOverlay.displayName = "GridOverlay";
 
 // src/components/segment-chip.tsx
-import * as React55 from "react";
+import * as React57 from "react";
 import { cva as cva9 } from "class-variance-authority";
 import { Link2 as Link22, KeyRound, Clock, Plus } from "lucide-react";
-import { jsx as jsx66, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs36 } from "react/jsx-runtime";
 var segmentChipVariants = cva9(
   "inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-sm font-medium leading-tight",
   {
@@ -3421,11 +3850,11 @@ var kindIcons = {
   pending: Clock,
   available: Plus
 };
-var SegmentChip = React55.forwardRef(
+var SegmentChip = React57.forwardRef(
   ({ kind, resource, icon, hideIcon = false, className, ...props }, ref) => {
     const Icon = icon ?? kindIcons[kind ?? "granted"];
-    return /* @__PURE__ */ jsxs33("span", { ref, className: cn(segmentChipVariants({ kind }), className), ...props, children: [
-      !hideIcon && /* @__PURE__ */ jsx66(Icon, { className: "size-3.5 shrink-0 opacity-90", "aria-hidden": "true" }),
+    return /* @__PURE__ */ jsxs36("span", { ref, className: cn(segmentChipVariants({ kind }), className), ...props, children: [
+      !hideIcon && /* @__PURE__ */ jsx69(Icon, { className: "size-3.5 shrink-0 opacity-90", "aria-hidden": "true" }),
       resource
     ] });
   }
@@ -3433,9 +3862,9 @@ var SegmentChip = React55.forwardRef(
 SegmentChip.displayName = "SegmentChip";
 
 // src/components/connection-card.tsx
-import * as React56 from "react";
+import * as React58 from "react";
 import { AlertTriangle, ChevronDown as ChevronDown4 } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx67, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx70, jsxs as jsxs37 } from "react/jsx-runtime";
 var authLabels = { app: "App", oauth: "OAuth", token: "token" };
 var statusMeta = {
   connected: { label: "Connected", badge: "success", dot: "success" },
@@ -3445,7 +3874,7 @@ var statusMeta = {
 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 ConnectionCard = React56.forwardRef(
+var ConnectionCard = React58.forwardRef(
   ({
     name,
     scope,
@@ -3466,7 +3895,7 @@ var ConnectionCard = React56.forwardRef(
   }, ref) => {
     const meta = statusMeta[status];
     const connected = status !== "disconnected";
-    const glyphBox = /* @__PURE__ */ jsx67(
+    const glyphBox = /* @__PURE__ */ jsx70(
       "div",
       {
         "aria-hidden": "true",
@@ -3474,51 +3903,51 @@ var ConnectionCard = React56.forwardRef(
         children: glyph ?? monogram(name)
       }
     );
-    const identity = /* @__PURE__ */ jsxs34("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx67("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
-      /* @__PURE__ */ jsxs34("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [
-        /* @__PURE__ */ jsx67(Badge, { variant: "secondary", children: scope }),
-        /* @__PURE__ */ jsx67(Badge, { variant: "secondary", children: authLabels[auth] })
+    const identity = /* @__PURE__ */ jsxs37("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx70("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
+      /* @__PURE__ */ jsxs37("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ jsx70(Badge, { variant: "secondary", children: scope }),
+        /* @__PURE__ */ jsx70(Badge, { variant: "secondary", children: authLabels[auth] })
       ] })
     ] });
-    const statusBadge = /* @__PURE__ */ jsxs34(Badge, { variant: meta.badge, className: "gap-1.5", children: [
-      /* @__PURE__ */ jsx67(StatusDot, { status: meta.dot, size: "sm" }),
+    const statusBadge = /* @__PURE__ */ jsxs37(Badge, { variant: meta.badge, className: "gap-1.5", children: [
+      /* @__PURE__ */ jsx70(StatusDot, { status: meta.dot, size: "sm" }),
       statusLabel ?? meta.label
     ] });
-    const accessNote = access ? /* @__PURE__ */ jsxs34(
+    const accessNote = access ? /* @__PURE__ */ jsxs37(
       "div",
       {
         role: "note",
         className: "flex items-start gap-2 border-t border-border-subtle bg-bg-warning-subtle px-4 py-2.5 text-xs font-medium text-text-warning",
         children: [
-          /* @__PURE__ */ jsx67(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx67("span", { children: access })
+          /* @__PURE__ */ jsx70(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx70("span", { children: access })
         ]
       }
     ) : null;
     const footerAction = collapsible ? action : connected && action;
-    const footer = grantedCount !== void 0 || footerAction ? /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-3", children: [
-      /* @__PURE__ */ jsx67("span", { className: "text-sm text-text-secondary", children: grantedCount !== void 0 ? /* @__PURE__ */ jsxs34(Fragment5, { children: [
+    const footer = grantedCount !== void 0 || footerAction ? /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-3", children: [
+      /* @__PURE__ */ jsx70("span", { className: "text-sm text-text-secondary", children: grantedCount !== void 0 ? /* @__PURE__ */ jsxs37(Fragment7, { children: [
         "Granted to ",
-        /* @__PURE__ */ jsx67("span", { className: "font-semibold text-text-primary", children: grantedCount }),
+        /* @__PURE__ */ jsx70("span", { className: "font-semibold text-text-primary", children: grantedCount }),
         " ",
         grantedCount === 1 ? "product" : "products"
-      ] }) : /* @__PURE__ */ jsx67("span", { className: "text-text-tertiary", children: "Not granted to any product yet" }) }),
+      ] }) : /* @__PURE__ */ jsx70("span", { className: "text-text-tertiary", children: "Not granted to any product yet" }) }),
       footerAction
     ] }) : null;
-    const drawer = children ? /* @__PURE__ */ jsx67("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children }) : null;
+    const drawer = children ? /* @__PURE__ */ jsx70("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children }) : null;
     if (!collapsible) {
-      return /* @__PURE__ */ jsxs34(
+      return /* @__PURE__ */ jsxs37(
         Card,
         {
           ref,
           className: cn(status === "disconnected" && "border-dashed border-border-default", className),
           ...props,
           children: [
-            /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-3 p-4", children: [
+            /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-3 p-4", children: [
               glyphBox,
               identity,
-              /* @__PURE__ */ jsx67("div", { className: "ml-auto shrink-0", children: connected ? statusBadge : action })
+              /* @__PURE__ */ jsx70("div", { className: "ml-auto shrink-0", children: connected ? statusBadge : action })
             ] }),
             accessNote,
             footer,
@@ -3527,7 +3956,7 @@ var ConnectionCard = React56.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsx67(Collapsible, { defaultOpen, open, onOpenChange, children: /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsx70(Collapsible, { defaultOpen, open, onOpenChange, children: /* @__PURE__ */ jsxs37(
       Card,
       {
         ref,
@@ -3538,7 +3967,7 @@ var ConnectionCard = React56.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx67(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs34(
+          /* @__PURE__ */ jsx70(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs37(
             "button",
             {
               type: "button",
@@ -3546,9 +3975,9 @@ var ConnectionCard = React56.forwardRef(
               children: [
                 glyphBox,
                 identity,
-                /* @__PURE__ */ jsxs34("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+                /* @__PURE__ */ jsxs37("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
                   statusBadge,
-                  /* @__PURE__ */ jsx67(
+                  /* @__PURE__ */ jsx70(
                     ChevronDown4,
                     {
                       "aria-hidden": "true",
@@ -3559,7 +3988,7 @@ var ConnectionCard = React56.forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs34(CollapsibleContent2, { children: [
+          /* @__PURE__ */ jsxs37(CollapsibleContent2, { children: [
             accessNote,
             footer,
             drawer
@@ -3572,32 +4001,32 @@ var ConnectionCard = React56.forwardRef(
 ConnectionCard.displayName = "ConnectionCard";
 
 // src/components/request-row.tsx
-import * as React57 from "react";
-import { Fragment as Fragment6, jsx as jsx68, jsxs as jsxs35 } from "react/jsx-runtime";
+import * as React59 from "react";
+import { Fragment as Fragment8, jsx as jsx71, jsxs as jsxs38 } 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 = React57.forwardRef(
+var RequestRow = React59.forwardRef(
   ({ surface, name, state: state2, glyph, subtitle, grantedResource, onApprove, onDeny, onRequest, action, className, ...props }, ref) => {
     let controls = action;
     if (controls === void 0) {
       if (surface === "org" && state2 === "pending") {
-        controls = /* @__PURE__ */ jsxs35(Fragment6, { children: [
-          /* @__PURE__ */ jsx68(Button, { variant: "outline", size: "sm", onClick: onDeny, children: "Deny" }),
-          /* @__PURE__ */ jsx68(Button, { size: "sm", onClick: onApprove, children: "Approve" })
+        controls = /* @__PURE__ */ jsxs38(Fragment8, { children: [
+          /* @__PURE__ */ jsx71(Button, { variant: "outline", size: "sm", onClick: onDeny, children: "Deny" }),
+          /* @__PURE__ */ jsx71(Button, { size: "sm", onClick: onApprove, children: "Approve" })
         ] });
       } else if (state2 === "available") {
-        controls = /* @__PURE__ */ jsx68(Button, { size: "sm", onClick: onRequest, children: "Request" });
+        controls = /* @__PURE__ */ jsx71(Button, { size: "sm", onClick: onRequest, children: "Request" });
       } else if (state2 === "pending") {
-        controls = /* @__PURE__ */ jsxs35(Badge, { variant: "secondary", className: "gap-1.5", children: [
-          /* @__PURE__ */ jsx68(StatusDot, { status: "neutral", size: "sm" }),
+        controls = /* @__PURE__ */ jsxs38(Badge, { variant: "secondary", className: "gap-1.5", children: [
+          /* @__PURE__ */ jsx71(StatusDot, { status: "neutral", size: "sm" }),
           "Pending"
         ] });
       } else if (state2 === "granted") {
-        controls = /* @__PURE__ */ jsx68(SegmentChip, { kind: "granted", resource: grantedResource ?? "a segment" });
+        controls = /* @__PURE__ */ jsx71(SegmentChip, { kind: "granted", resource: grantedResource ?? "a segment" });
       }
     }
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs38(
       "div",
       {
         ref,
@@ -3607,7 +4036,7 @@ var RequestRow = React57.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx68(
+          /* @__PURE__ */ jsx71(
             "div",
             {
               "aria-hidden": "true",
@@ -3615,11 +4044,11 @@ var RequestRow = React57.forwardRef(
               children: glyph ?? monogram2(name)
             }
           ),
-          /* @__PURE__ */ jsxs35("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx68("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
-            subtitle && /* @__PURE__ */ jsx68("p", { className: "truncate text-xs text-text-tertiary", children: subtitle })
+          /* @__PURE__ */ jsxs38("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx71("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
+            subtitle && /* @__PURE__ */ jsx71("p", { className: "truncate text-xs text-text-tertiary", children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx68("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: controls })
+          /* @__PURE__ */ jsx71("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: controls })
         ]
       }
     );
@@ -3628,9 +4057,9 @@ var RequestRow = React57.forwardRef(
 RequestRow.displayName = "RequestRow";
 
 // src/components/feedback-button.tsx
-import * as React58 from "react";
+import * as React60 from "react";
 import { MessageSquare, Loader2 as Loader22, CheckCircle2 } from "lucide-react";
-import { jsx as jsx69, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs39 } from "react/jsx-runtime";
 var TITLE_MAX = 256;
 var DETAILS_MAX = 65536;
 var DEFAULT_LABELS = {
@@ -3644,15 +4073,15 @@ var DEFAULT_LABELS = {
 };
 function FeedbackButton({ onSubmit, labels, className }) {
   const l = { ...DEFAULT_LABELS, ...labels };
-  const uid = React58.useId();
+  const uid = React60.useId();
   const titleId = `${uid}-title`;
   const detailsId = `${uid}-details`;
   const titleErrId = `${uid}-title-error`;
   const detailsErrId = `${uid}-details-error`;
-  const [open, setOpen] = React58.useState(false);
-  const [status, setStatus] = React58.useState("idle");
-  const [title, setTitle] = React58.useState("");
-  const [details, setDetails] = React58.useState("");
+  const [open, setOpen] = React60.useState(false);
+  const [status, setStatus] = React60.useState("idle");
+  const [title, setTitle] = React60.useState("");
+  const [details, setDetails] = React60.useState("");
   const titleTooLong = title.length > TITLE_MAX;
   const detailsTooLong = details.length > DETAILS_MAX;
   const titleEmpty = title.trim().length === 0;
@@ -3677,20 +4106,20 @@ function FeedbackButton({ onSubmit, labels, className }) {
       setStatus("error");
     }
   };
-  return /* @__PURE__ */ jsxs36(Popover, { open, onOpenChange: changeOpen, children: [
-    /* @__PURE__ */ jsx69(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs36(Button, { variant: "ghost", size: "sm", "aria-label": l.trigger, className, children: [
-      /* @__PURE__ */ jsx69(MessageSquare, { className: "size-4", "aria-hidden": "true" }),
+  return /* @__PURE__ */ jsxs39(Popover, { open, onOpenChange: changeOpen, children: [
+    /* @__PURE__ */ jsx72(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs39(Button, { variant: "ghost", size: "sm", "aria-label": l.trigger, className, children: [
+      /* @__PURE__ */ jsx72(MessageSquare, { className: "size-4", "aria-hidden": "true" }),
       l.trigger
     ] }) }),
-    /* @__PURE__ */ jsx69(PopoverContent, { align: "end", side: "bottom", className: "w-80", children: status === "success" ? /* @__PURE__ */ jsxs36("div", { className: "flex flex-col items-center gap-3 py-2 text-center", children: [
-      /* @__PURE__ */ jsx69(CheckCircle2, { className: "size-8 text-text-success", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx69("p", { role: "status", className: "text-sm text-text-primary", children: l.success }),
-      /* @__PURE__ */ jsx69(Button, { variant: "outline", size: "sm", onClick: () => changeOpen(false), children: "Close" })
-    ] }) : /* @__PURE__ */ jsxs36("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsx69("p", { className: "text-sm font-medium text-text-primary", children: l.title }),
-      /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsx69(Label2, { htmlFor: titleId, children: l.titleField }),
-        /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx72(PopoverContent, { align: "end", side: "bottom", className: "w-80", children: status === "success" ? /* @__PURE__ */ jsxs39("div", { className: "flex flex-col items-center gap-3 py-2 text-center", children: [
+      /* @__PURE__ */ jsx72(CheckCircle2, { className: "size-8 text-text-success", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx72("p", { role: "status", className: "text-sm text-text-primary", children: l.success }),
+      /* @__PURE__ */ jsx72(Button, { variant: "outline", size: "sm", onClick: () => changeOpen(false), children: "Close" })
+    ] }) : /* @__PURE__ */ jsxs39("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx72("p", { className: "text-sm font-medium text-text-primary", children: l.title }),
+      /* @__PURE__ */ jsxs39("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx72(Label2, { htmlFor: titleId, children: l.titleField }),
+        /* @__PURE__ */ jsx72(
           Input,
           {
             id: titleId,
@@ -3701,16 +4130,16 @@ function FeedbackButton({ onSubmit, labels, className }) {
             "aria-describedby": titleTooLong ? titleErrId : void 0
           }
         ),
-        titleTooLong && /* @__PURE__ */ jsxs36("p", { id: titleErrId, className: "text-xs text-text-danger", children: [
+        titleTooLong && /* @__PURE__ */ jsxs39("p", { id: titleErrId, className: "text-xs text-text-danger", children: [
           l.titleField,
           " must be ",
           TITLE_MAX,
           " characters or fewer."
         ] })
       ] }),
-      /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsx69(Label2, { htmlFor: detailsId, children: l.detailsField }),
-        /* @__PURE__ */ jsx69(
+      /* @__PURE__ */ jsxs39("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx72(Label2, { htmlFor: detailsId, children: l.detailsField }),
+        /* @__PURE__ */ jsx72(
           Textarea,
           {
             id: detailsId,
@@ -3721,16 +4150,16 @@ function FeedbackButton({ onSubmit, labels, className }) {
             "aria-describedby": detailsTooLong ? detailsErrId : void 0
           }
         ),
-        detailsTooLong && /* @__PURE__ */ jsxs36("p", { id: detailsErrId, className: "text-xs text-text-danger", children: [
+        detailsTooLong && /* @__PURE__ */ jsxs39("p", { id: detailsErrId, className: "text-xs text-text-danger", children: [
           l.detailsField,
           " must be ",
           DETAILS_MAX,
           " characters or fewer."
         ] })
       ] }),
-      status === "error" && /* @__PURE__ */ jsx69(InlineError, { children: l.error }),
-      /* @__PURE__ */ jsxs36(Button, { type: "submit", disabled: !valid || submitting, children: [
-        submitting && /* @__PURE__ */ jsx69(Loader22, { className: "size-4 animate-spin", "aria-hidden": "true" }),
+      status === "error" && /* @__PURE__ */ jsx72(InlineError, { children: l.error }),
+      /* @__PURE__ */ jsxs39(Button, { type: "submit", disabled: !valid || submitting, children: [
+        submitting && /* @__PURE__ */ jsx72(Loader22, { className: "size-4 animate-spin", "aria-hidden": "true" }),
         l.submit
       ] })
     ] }) })
@@ -3739,7 +4168,7 @@ function FeedbackButton({ onSubmit, labels, className }) {
 
 // src/components/create-product-window.tsx
 import { useForm } from "react-hook-form";
-import { jsx as jsx70, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs40 } from "react/jsx-runtime";
 var CREATE_ORG_VALUE = "__create_new_org__";
 function CreateProductWindow({
   organizations,
@@ -3772,10 +4201,10 @@ function CreateProductWindow({
     }
   });
   const showSelect = organizations.length > 0;
-  return /* @__PURE__ */ jsxs37("div", { className: "flex w-full max-w-md flex-col gap-6", children: [
-    showSelect && /* @__PURE__ */ jsxs37("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx70("span", { className: "text-sm font-medium leading-none text-text-primary", children: "Organization" }),
-      /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsxs40("div", { className: "flex w-full max-w-md flex-col gap-6", children: [
+    showSelect && /* @__PURE__ */ jsxs40("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx73("span", { className: "text-sm font-medium leading-none text-text-primary", children: "Organization" }),
+      /* @__PURE__ */ jsx73(
         Select,
         {
           "data-testid": "create-product-org-select",
@@ -3788,9 +4217,9 @@ function CreateProductWindow({
         }
       )
     ] }),
-    !createOrgMode && /* @__PURE__ */ jsxs37("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx70("span", { className: "text-sm font-medium leading-none text-text-primary", children: "Products" }),
-      productsLoading ? /* @__PURE__ */ jsx70("p", { className: "text-sm text-text-tertiary", children: "Loading products\u2026" }) : products.length === 0 ? /* @__PURE__ */ jsx70("p", { className: "text-sm text-text-tertiary", children: "No products yet." }) : /* @__PURE__ */ jsx70("ul", { className: "flex flex-col gap-1", children: products.map((product) => /* @__PURE__ */ jsx70("li", { children: /* @__PURE__ */ jsxs37(
+    !createOrgMode && /* @__PURE__ */ jsxs40("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx73("span", { className: "text-sm font-medium leading-none text-text-primary", children: "Products" }),
+      productsLoading ? /* @__PURE__ */ jsx73("p", { className: "text-sm text-text-tertiary", children: "Loading products\u2026" }) : products.length === 0 ? /* @__PURE__ */ jsx73("p", { className: "text-sm text-text-tertiary", children: "No products yet." }) : /* @__PURE__ */ jsx73("ul", { className: "flex flex-col gap-1", children: products.map((product) => /* @__PURE__ */ jsx73("li", { children: /* @__PURE__ */ jsxs40(
         "button",
         {
           type: "button",
@@ -3799,14 +4228,14 @@ function CreateProductWindow({
             "flex w-full items-center justify-between rounded-md border border-border-default bg-bg-primary px-3 py-2 text-left text-sm text-text-primary hover:bg-bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus"
           ),
           children: [
-            /* @__PURE__ */ jsx70("span", { className: "truncate", children: product.name }),
-            /* @__PURE__ */ jsx70("span", { className: "ml-2 truncate text-text-tertiary", children: product.slug })
+            /* @__PURE__ */ jsx73("span", { className: "truncate", children: product.name }),
+            /* @__PURE__ */ jsx73("span", { className: "ml-2 truncate text-text-tertiary", children: product.slug })
           ]
         }
       ) }, product.id)) })
     ] }),
-    /* @__PURE__ */ jsx70(Form, { ...form, children: /* @__PURE__ */ jsxs37("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", noValidate: true, children: [
-      createOrgMode && /* @__PURE__ */ jsx70(
+    /* @__PURE__ */ jsx73(Form, { ...form, children: /* @__PURE__ */ jsxs40("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", noValidate: true, children: [
+      createOrgMode && /* @__PURE__ */ jsx73(
         FormField,
         {
           control: form.control,
@@ -3814,14 +4243,14 @@ function CreateProductWindow({
           rules: {
             validate: (value) => value.trim().length > 0 || "Organization name is required"
           },
-          render: ({ field }) => /* @__PURE__ */ jsxs37(FormItem, { children: [
-            /* @__PURE__ */ jsx70(FormLabel, { children: "Organization name" }),
-            /* @__PURE__ */ jsx70(FormControl, { children: /* @__PURE__ */ jsx70(Input, { placeholder: "Acme Inc.", ...field }) }),
-            /* @__PURE__ */ jsx70(FormMessage, {})
+          render: ({ field }) => /* @__PURE__ */ jsxs40(FormItem, { children: [
+            /* @__PURE__ */ jsx73(FormLabel, { children: "Organization name" }),
+            /* @__PURE__ */ jsx73(FormControl, { children: /* @__PURE__ */ jsx73(Input, { placeholder: "Acme Inc.", ...field }) }),
+            /* @__PURE__ */ jsx73(FormMessage, {})
           ] })
         }
       ),
-      /* @__PURE__ */ jsx70(
+      /* @__PURE__ */ jsx73(
         FormField,
         {
           control: form.control,
@@ -3829,18 +4258,619 @@ function CreateProductWindow({
           rules: {
             validate: (value) => value.trim().length > 0 || "Product name is required"
           },
-          render: ({ field }) => /* @__PURE__ */ jsxs37(FormItem, { children: [
-            /* @__PURE__ */ jsx70(FormLabel, { children: "Product name" }),
-            /* @__PURE__ */ jsx70(FormControl, { children: /* @__PURE__ */ jsx70(Input, { placeholder: "My product", ...field }) }),
-            /* @__PURE__ */ jsx70(FormMessage, {})
+          render: ({ field }) => /* @__PURE__ */ jsxs40(FormItem, { children: [
+            /* @__PURE__ */ jsx73(FormLabel, { children: "Product name" }),
+            /* @__PURE__ */ jsx73(FormControl, { children: /* @__PURE__ */ jsx73(Input, { placeholder: "My product", ...field }) }),
+            /* @__PURE__ */ jsx73(FormMessage, {})
           ] })
         }
       ),
-      error && /* @__PURE__ */ jsx70(InlineError, { children: error }),
-      /* @__PURE__ */ jsx70(Button, { type: "submit", disabled: submitting, children: "Create product" })
+      error && /* @__PURE__ */ jsx73(InlineError, { children: error }),
+      /* @__PURE__ */ jsx73(Button, { type: "submit", disabled: submitting, children: "Create product" })
     ] }) })
   ] });
 }
+
+// src/components/notification-types.ts
+var severityLabels = {
+  critical: "Critical",
+  important: "Important",
+  fyi: "FYI"
+};
+var severityBadgeVariants = {
+  critical: "destructive",
+  important: "warning",
+  fyi: "secondary"
+};
+function severityBadgeVariant(severity) {
+  return severityBadgeVariants[severity];
+}
+function formatRelativeAge(createdAt, now = /* @__PURE__ */ new Date()) {
+  const then = createdAt instanceof Date ? createdAt : new Date(createdAt);
+  const seconds = Math.max(0, Math.floor((now.getTime() - then.getTime()) / 1e3));
+  if (seconds < 5) return "now";
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  return `${Math.floor(minutes / 60)}h ago`;
+}
+function isNotificationSettled(item) {
+  if (item.cls === "ephemeral") return false;
+  return Boolean(item.receipt) || item.read === true;
+}
+
+// src/components/notification-bell.tsx
+import * as React61 from "react";
+import { BellRing, Settings } from "lucide-react";
+import { jsx as jsx74, jsxs as jsxs41 } from "react/jsx-runtime";
+function BellRow({
+  item,
+  onItemClick,
+  onActionClick,
+  formatAge
+}) {
+  const settled = isNotificationSettled(item);
+  const unread = !settled && !item.read;
+  const actions = settled ? [] : item.actions ?? [];
+  const age = item.createdAt ? formatAge(item.createdAt instanceof Date ? item.createdAt : new Date(item.createdAt)) : null;
+  return /* @__PURE__ */ jsxs41("div", { className: cn("rounded-lg bg-bg-surface px-3 py-2.5", settled && "opacity-45"), children: [
+    /* @__PURE__ */ jsxs41("div", { className: "flex items-start gap-2.5", children: [
+      /* @__PURE__ */ jsxs41("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx74(
+          "button",
+          {
+            type: "button",
+            onClick: () => onItemClick?.(item),
+            className: cn(
+              "block text-left text-sm leading-tight underline-offset-2 hover:underline",
+              unread ? "font-semibold text-text-primary" : "text-text-secondary"
+            ),
+            children: item.title
+          }
+        ),
+        /* @__PURE__ */ jsxs41("p", { className: "mt-1 truncate text-xs text-text-tertiary", children: [
+          /* @__PURE__ */ jsx74("span", { className: "font-semibold uppercase tracking-wide text-text-secondary", children: item.source }),
+          item.receipt ? `, ${item.receipt}` : ""
+        ] })
+      ] }),
+      age && /* @__PURE__ */ jsx74("span", { className: "mt-px shrink-0 text-xs text-text-tertiary", children: age })
+    ] }),
+    (actions.length > 0 || item.deepLink) && /* @__PURE__ */ jsxs41("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-2", children: [
+      actions.map((action) => {
+        const chip = action.variant === "primary" || action.variant === "destructive";
+        return /* @__PURE__ */ jsx74(
+          "button",
+          {
+            type: "button",
+            onClick: () => onActionClick?.(item, action),
+            className: cn(
+              chip ? "rounded-md px-2.5 py-1 text-xs font-medium transition-colors" : "text-xs font-semibold text-text-secondary transition-opacity hover:opacity-80",
+              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"
+            ),
+            children: action.label
+          },
+          action.id
+        );
+      }),
+      item.deepLink && /* @__PURE__ */ jsx74(
+        "button",
+        {
+          type: "button",
+          onClick: () => onItemClick?.(item),
+          className: "text-xs font-semibold text-text-brand transition-opacity hover:opacity-80",
+          children: item.deepLink.label
+        }
+      )
+    ] })
+  ] });
+}
+var NotificationBell = React61.forwardRef(
+  ({
+    items,
+    unreadCount,
+    maxItems = 5,
+    onMarkAllRead,
+    onItemClick,
+    onActionClick,
+    onOpenSettings,
+    onOpenArchive,
+    open,
+    onOpenChange,
+    formatAge,
+    className
+  }, ref) => {
+    const unread = unreadCount ?? items.filter((n) => !n.read && n.cls !== "ephemeral").length;
+    const age = React61.useCallback(
+      (createdAt) => formatAge ? formatAge(createdAt) : formatRelativeAge(createdAt),
+      [formatAge]
+    );
+    const rows = items.slice(0, maxItems);
+    return /* @__PURE__ */ jsxs41(Popover, { open, onOpenChange, children: [
+      /* @__PURE__ */ jsx74(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs41(
+        "button",
+        {
+          ref,
+          type: "button",
+          "aria-label": "Notifications",
+          className: cn(
+            "relative flex size-8 items-center justify-center rounded-lg text-text-secondary transition-colors hover:bg-bg-elevated hover:text-text-primary data-[state=open]:bg-bg-brand-subtle data-[state=open]:text-text-brand",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx74(BellRing, { className: "size-[18px]", "aria-hidden": "true" }),
+            unread > 0 && /* @__PURE__ */ jsx74("span", { className: "absolute -right-1.5 -top-1.5 flex size-[17px] items-center justify-center rounded-full bg-bg-brand text-xs font-bold leading-none text-text-on-brand ring-2 ring-bg-surface", children: unread })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs41(PopoverContent, { align: "end", className: "w-[380px] overflow-hidden p-0", children: [
+        /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between px-5 py-3", children: [
+          /* @__PURE__ */ jsx74("span", { className: "text-sm font-bold text-text-primary", children: "Notification center" }),
+          /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx74(
+              "button",
+              {
+                type: "button",
+                disabled: unread === 0,
+                onClick: () => onMarkAllRead?.(),
+                className: cn(
+                  "text-sm font-medium transition-colors",
+                  unread === 0 ? "cursor-default text-text-disabled" : "text-text-tertiary hover:text-text-primary"
+                ),
+                children: "Mark all read"
+              }
+            ),
+            onOpenSettings && /* @__PURE__ */ jsx74(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Notification settings",
+                onClick: () => onOpenSettings(),
+                className: "flex size-6 items-center justify-center rounded-md text-text-tertiary transition-colors hover:bg-bg-surface hover:text-text-primary",
+                children: /* @__PURE__ */ jsx74(Settings, { className: "size-[15px]", "aria-hidden": "true" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx74("div", { className: "space-y-1.5 px-2 pb-2", children: rows.length === 0 ? /* @__PURE__ */ jsx74("p", { className: "px-3 py-12 text-center text-xs leading-relaxed text-text-disabled", children: "Nothing yet. Everything addressed to you lands here." }) : rows.map((item) => /* @__PURE__ */ jsx74(
+          BellRow,
+          {
+            item,
+            onItemClick,
+            onActionClick,
+            formatAge: age
+          },
+          item.id
+        )) }),
+        items.length > 0 && onOpenArchive && /* @__PURE__ */ jsx74(
+          "button",
+          {
+            type: "button",
+            onClick: () => onOpenArchive(),
+            className: "flex w-full items-center justify-center px-5 py-2.5 text-sm font-medium text-text-brand transition-colors hover:bg-bg-surface",
+            children: "Open notifications archive"
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NotificationBell.displayName = "NotificationBell";
+
+// src/components/notification-center.tsx
+import * as React62 from "react";
+import { ArrowUpRight, Check as Check7, Search as Search2 } from "lucide-react";
+import { jsx as jsx75, jsxs as jsxs42 } from "react/jsx-runtime";
+var chipBase = "rounded-lg px-3 py-1.5 text-sm font-medium transition-colors";
+var chipOn = "bg-bg-brand-subtle text-text-brand";
+var chipOff = "bg-bg-elevated text-text-secondary hover:text-text-primary";
+function CenterRow({
+  item,
+  onItemClick,
+  onDeepLinkClick,
+  formatAge
+}) {
+  const unread = !item.read;
+  const age = item.createdAt ? formatAge(item.createdAt instanceof Date ? item.createdAt : new Date(item.createdAt)) : null;
+  return /* @__PURE__ */ jsxs42("article", { className: "rounded-lg bg-bg-elevated px-4 py-3", children: [
+    /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx75("span", { className: "text-xs font-semibold uppercase tracking-[0.09em] text-text-secondary", children: item.source }),
+      /* @__PURE__ */ jsx75(Badge, { variant: severityBadgeVariant(item.severity), children: severityLabels[item.severity] }),
+      age && /* @__PURE__ */ jsx75("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-text-tertiary", children: age })
+    ] }),
+    /* @__PURE__ */ jsx75(
+      "button",
+      {
+        type: "button",
+        onClick: () => onItemClick?.(item),
+        className: cn(
+          "mt-1 block text-left text-sm leading-snug underline-offset-2 hover:underline",
+          unread ? "font-semibold text-text-primary" : "font-medium text-text-secondary"
+        ),
+        children: item.title
+      }
+    ),
+    item.body && /* @__PURE__ */ jsx75("p", { className: "mt-0.5 text-sm leading-snug text-text-secondary", children: item.body }),
+    (item.receipt || item.deepLink) && /* @__PURE__ */ jsxs42("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5", children: [
+      item.receipt && /* @__PURE__ */ jsxs42("span", { className: "inline-flex items-center gap-1.5 text-sm text-text-tertiary", children: [
+        /* @__PURE__ */ jsx75(Check7, { className: "size-3 shrink-0 text-text-success", "aria-hidden": "true" }),
+        item.receipt
+      ] }),
+      item.deepLink && /* @__PURE__ */ jsxs42(
+        "button",
+        {
+          type: "button",
+          onClick: () => onDeepLinkClick?.(item),
+          className: "inline-flex items-center gap-1 text-sm font-medium text-text-brand transition-colors hover:text-text-primary",
+          children: [
+            item.deepLink.label,
+            /* @__PURE__ */ jsx75(ArrowUpRight, { className: "size-3", "aria-hidden": "true" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var NotificationCenter = React62.forwardRef(
+  ({
+    items,
+    title = "Notifications",
+    description,
+    sources,
+    products,
+    searchable = true,
+    pageSize = 20,
+    onItemClick,
+    onDeepLinkClick,
+    onMarkAllRead,
+    formatAge,
+    className
+  }, ref) => {
+    const [status, setStatus] = React62.useState("all");
+    const [source, setSource] = React62.useState("all");
+    const [product, setProduct] = React62.useState("all");
+    const [query, setQuery] = React62.useState("");
+    const [limit, setLimit] = React62.useState(pageSize);
+    const age = React62.useCallback(
+      (createdAt) => formatAge ? formatAge(createdAt) : formatRelativeAge(createdAt),
+      [formatAge]
+    );
+    const sourceChips = React62.useMemo(
+      () => sources ?? Array.from(new Set(items.map((n) => n.source))),
+      [sources, items]
+    );
+    const q = query.trim().toLowerCase();
+    const matched = items.filter((n) => status === "all" || !n.read).filter((n) => source === "all" || n.source === source).filter((n) => product === "all" || n.product === product).filter(
+      (n) => q === "" || n.title.toLowerCase().includes(q) || (n.body ?? "").toLowerCase().includes(q) || n.source.toLowerCase().includes(q)
+    );
+    const shown = matched.slice(0, limit);
+    const remaining = matched.length - shown.length;
+    const filtering = q !== "" || status !== "all" || source !== "all" || product !== "all";
+    return /* @__PURE__ */ jsxs42("div", { ref, className: cn("mx-auto max-w-[560px]", className), children: [
+      /* @__PURE__ */ jsxs42("div", { className: "mb-4 flex items-start gap-4", children: [
+        /* @__PURE__ */ jsxs42("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx75("h1", { className: "mb-1.5 text-2xl font-semibold tracking-tight text-text-primary", children: title }),
+          description && /* @__PURE__ */ jsx75("p", { className: "text-sm text-text-tertiary", children: description })
+        ] }),
+        onMarkAllRead && /* @__PURE__ */ jsx75(
+          "button",
+          {
+            type: "button",
+            onClick: () => onMarkAllRead(),
+            className: "shrink-0 rounded-md px-2.5 py-1 text-sm font-medium text-text-tertiary transition-colors hover:text-text-primary",
+            children: "Read all"
+          }
+        )
+      ] }),
+      searchable && /* @__PURE__ */ jsxs42("div", { className: "mb-3 flex items-center gap-2 rounded-lg bg-bg-elevated px-3 py-2", children: [
+        /* @__PURE__ */ jsx75(Search2, { className: "size-4 shrink-0 text-text-tertiary", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx75(
+          "input",
+          {
+            type: "text",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            placeholder: "Search notifications",
+            className: "w-full bg-transparent text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs42("div", { className: "mb-2 flex flex-wrap gap-1.5", children: [
+        /* @__PURE__ */ jsx75(
+          "button",
+          {
+            type: "button",
+            onClick: () => setStatus("all"),
+            className: cn(chipBase, status === "all" ? chipOn : chipOff),
+            children: "All"
+          }
+        ),
+        /* @__PURE__ */ jsx75(
+          "button",
+          {
+            type: "button",
+            onClick: () => setStatus("unread"),
+            className: cn(chipBase, status === "unread" ? chipOn : chipOff),
+            children: "Unread"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs42("div", { className: "mb-2 flex flex-wrap gap-1.5", children: [
+        /* @__PURE__ */ jsx75(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSource("all"),
+            className: cn(chipBase, source === "all" ? chipOn : chipOff),
+            children: "All sources"
+          }
+        ),
+        sourceChips.map((s) => /* @__PURE__ */ jsx75(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSource(s),
+            className: cn(chipBase, source === s ? chipOn : chipOff),
+            children: s
+          },
+          s
+        ))
+      ] }),
+      products && products.length > 0 && /* @__PURE__ */ jsxs42("div", { className: "mb-4 flex flex-wrap gap-1.5", children: [
+        /* @__PURE__ */ jsx75(
+          "button",
+          {
+            type: "button",
+            onClick: () => setProduct("all"),
+            className: cn(chipBase, product === "all" ? chipOn : chipOff),
+            children: "All products"
+          }
+        ),
+        products.map((p) => /* @__PURE__ */ jsx75(
+          "button",
+          {
+            type: "button",
+            onClick: () => setProduct(p.id),
+            className: cn(chipBase, product === p.id ? chipOn : chipOff),
+            children: p.label
+          },
+          p.id
+        ))
+      ] }),
+      shown.length === 0 ? /* @__PURE__ */ jsx75("p", { className: "rounded-xl bg-bg-elevated px-4 py-10 text-center text-sm leading-relaxed text-text-disabled", children: filtering ? "Nothing matches." : "Nothing here yet. Everything addressed to you lands here." }) : /* @__PURE__ */ jsxs42("div", { className: "flex flex-col gap-1.5", children: [
+        shown.map((item) => /* @__PURE__ */ jsx75(
+          CenterRow,
+          {
+            item,
+            onItemClick,
+            onDeepLinkClick,
+            formatAge: age
+          },
+          item.id
+        )),
+        remaining > 0 && /* @__PURE__ */ jsxs42(
+          "button",
+          {
+            type: "button",
+            onClick: () => setLimit((l) => l + pageSize),
+            className: "mt-1 rounded-lg bg-bg-elevated px-4 py-2.5 text-sm font-medium text-text-secondary transition-colors hover:bg-bg-surface hover:text-text-primary",
+            children: [
+              "Load ",
+              remaining,
+              " more"
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NotificationCenter.displayName = "NotificationCenter";
+
+// src/components/notification-settings.tsx
+import * as React63 from "react";
+import { Moon as Moon2, Plus as Plus2, Volume2 } from "lucide-react";
+import { Fragment as Fragment9, jsx as jsx76, jsxs as jsxs43 } from "react/jsx-runtime";
+var THRESHOLDS = [
+  ["everything", "Everything"],
+  ["important", "Important"],
+  ["critical only", "Critical only"]
+];
+var DEFAULT_KEY = "default";
+function ThresholdControl({
+  label,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx76(
+    "span",
+    {
+      role: "group",
+      "aria-label": `Interrupt me for ${label}`,
+      className: "inline-flex shrink-0 overflow-hidden rounded-md bg-bg-primary",
+      children: THRESHOLDS.map(([threshold, text]) => /* @__PURE__ */ jsx76(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": value === threshold,
+          onClick: () => onChange(threshold),
+          className: cn(
+            "px-3 py-1.5 text-sm font-semibold transition-colors",
+            value === threshold ? "bg-bg-brand-subtle text-text-brand" : "text-text-tertiary hover:text-text-primary"
+          ),
+          children: text
+        },
+        threshold
+      ))
+    }
+  );
+}
+var NotificationSettings = React63.forwardRef(
+  ({
+    subscriptions,
+    value,
+    onChange,
+    products,
+    soundEnabled,
+    onSoundEnabledChange,
+    mutes = [],
+    onUnmute,
+    pushSlot,
+    className
+  }, ref) => {
+    const [tab, setTab] = React63.useState(DEFAULT_KEY);
+    const isDefault = tab === DEFAULT_KEY;
+    const defaults = value[DEFAULT_KEY] ?? { thresholds: {} };
+    const customized = !isDefault && Object.prototype.hasOwnProperty.call(value, tab);
+    const active = customized ? value[tab] : defaults;
+    const productLabel = products?.find((p) => p.id === tab)?.label ?? tab;
+    const setThreshold = (id, threshold) => {
+      const key = isDefault ? DEFAULT_KEY : tab;
+      const base2 = value[key] ?? defaults;
+      onChange({ ...value, [key]: { thresholds: { ...base2.thresholds, [id]: threshold } } });
+    };
+    const customize = () => onChange({ ...value, [tab]: { thresholds: { ...defaults.thresholds } } });
+    const resetToDefault = () => {
+      const next = { ...value };
+      delete next[tab];
+      onChange(next);
+    };
+    const scopeGroup = (scope) => {
+      const rows = subscriptions.filter((s) => s.scope === scope);
+      if (rows.length === 0) return null;
+      return /* @__PURE__ */ jsxs43("div", { children: [
+        /* @__PURE__ */ jsx76("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__ */ jsx76("div", { className: "space-y-2", children: rows.map((sub) => /* @__PURE__ */ jsxs43(
+          "div",
+          {
+            className: "flex items-center gap-4 rounded-xl bg-bg-elevated px-4 py-3",
+            children: [
+              /* @__PURE__ */ jsx76("p", { className: "min-w-0 flex-1 text-sm font-semibold text-text-primary", children: sub.name }),
+              /* @__PURE__ */ jsx76(
+                ThresholdControl,
+                {
+                  label: sub.name,
+                  value: active.thresholds[sub.id] ?? "important",
+                  onChange: (t) => setThreshold(sub.id, t)
+                }
+              )
+            ]
+          },
+          sub.id
+        )) })
+      ] }, scope);
+    };
+    return /* @__PURE__ */ jsxs43("div", { ref, className: cn("space-y-5", className), children: [
+      products && products.length > 0 && /* @__PURE__ */ jsxs43("div", { children: [
+        /* @__PURE__ */ jsx76("p", { className: "mb-2 px-0.5 text-xs font-bold uppercase tracking-wider text-text-tertiary", children: "Preferences for" }),
+        /* @__PURE__ */ jsx76("div", { className: "flex flex-wrap gap-2", children: [{ id: DEFAULT_KEY, label: "Default" }, ...products].map((t) => /* @__PURE__ */ jsxs43(
+          "button",
+          {
+            type: "button",
+            onClick: () => setTab(t.id),
+            className: cn(
+              "flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-semibold transition-colors",
+              tab === t.id ? "bg-bg-brand-subtle text-text-brand" : "bg-bg-elevated text-text-tertiary hover:text-text-primary"
+            ),
+            children: [
+              t.label,
+              t.id !== DEFAULT_KEY && Object.prototype.hasOwnProperty.call(value, t.id) && /* @__PURE__ */ jsx76("span", { className: "size-1.5 rounded-full bg-bg-brand", "aria-label": "customized" })
+            ]
+          },
+          t.id
+        )) })
+      ] }),
+      isDefault ? /* @__PURE__ */ jsxs43(Fragment9, { children: [
+        /* @__PURE__ */ jsx76("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__ */ jsxs43(Card, { className: "border-none bg-bg-elevated p-5", children: [
+          /* @__PURE__ */ jsx76("p", { className: "mb-1.5 text-xs font-bold uppercase tracking-wide text-text-tertiary", children: "Push to" }),
+          /* @__PURE__ */ jsx76("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__ */ jsx76("div", { className: "rounded-lg bg-bg-surface px-4 py-6 text-center", children: /* @__PURE__ */ jsx76("p", { className: "text-sm text-text-tertiary", children: "No integrations connected." }) })
+        ] }),
+        mutes.length > 0 && /* @__PURE__ */ jsxs43("div", { children: [
+          /* @__PURE__ */ jsx76("p", { className: "mb-1.5 px-0.5 text-xs font-bold uppercase tracking-wider text-text-tertiary", children: "Muted" }),
+          /* @__PURE__ */ jsx76(Card, { className: "border-none bg-bg-elevated p-2", children: mutes.map((m) => /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-3 rounded-lg px-3 py-2.5", children: [
+            /* @__PURE__ */ jsx76(Moon2, { className: "size-4 shrink-0 text-text-tertiary", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs43("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx76("p", { className: "text-sm font-medium text-text-primary", children: m.source }),
+              /* @__PURE__ */ jsxs43("p", { className: "text-sm text-text-tertiary", children: [
+                "Muted \u2014 ",
+                m.label,
+                ". Critical still comes through."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx76(
+              "button",
+              {
+                type: "button",
+                onClick: () => onUnmute?.(m.source),
+                className: "rounded-md px-2.5 py-1 text-sm font-medium text-text-brand transition-colors hover:bg-bg-surface",
+                children: "Unmute"
+              }
+            )
+          ] }, m.source)) })
+        ] }),
+        scopeGroup("product"),
+        scopeGroup("org"),
+        onSoundEnabledChange && /* @__PURE__ */ jsx76(Card, { className: "border-none bg-bg-elevated p-4", children: /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx76(Volume2, { className: "size-4 text-text-tertiary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs43("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx76("p", { className: "text-sm font-medium text-text-primary", children: "Notification sound" }),
+            /* @__PURE__ */ jsx76("p", { className: "text-sm text-text-tertiary", children: "Play a tone when a notification arrives. Critical always chimes." })
+          ] }),
+          /* @__PURE__ */ jsx76(
+            Switch,
+            {
+              checked: soundEnabled ?? false,
+              onCheckedChange: onSoundEnabledChange,
+              "aria-label": "Notification sound"
+            }
+          )
+        ] }) })
+      ] }) : !customized ? /* @__PURE__ */ jsxs43(Card, { className: "border-none bg-bg-elevated p-8 text-center", children: [
+        /* @__PURE__ */ jsxs43("p", { className: "text-sm font-semibold text-text-primary", children: [
+          productLabel,
+          " follows your Default preferences."
+        ] }),
+        /* @__PURE__ */ jsx76("p", { className: "mx-auto mt-1.5 max-w-[360px] text-sm leading-relaxed text-text-tertiary", children: "Interrupt thresholds, sound and forwarding all come from Default. Opt in to give this product its own interrupt thresholds." }),
+        /* @__PURE__ */ jsxs43(
+          "button",
+          {
+            type: "button",
+            onClick: customize,
+            className: "mt-5 inline-flex items-center gap-1.5 rounded-lg bg-bg-brand px-3.5 py-2 text-sm font-semibold text-text-on-brand transition-colors hover:bg-bg-brand-hover",
+            children: [
+              /* @__PURE__ */ jsx76(Plus2, { className: "size-4", "aria-hidden": "true" }),
+              " Customize for ",
+              productLabel
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs43(Fragment9, { children: [
+        /* @__PURE__ */ jsx76(Card, { className: "border-none bg-bg-brand-subtle p-3.5", children: /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs43("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs43("p", { className: "text-sm font-semibold text-text-brand", children: [
+              "Custom preferences for ",
+              productLabel
+            ] }),
+            /* @__PURE__ */ jsx76("p", { className: "text-sm leading-relaxed text-text-secondary", children: "Only the interrupt thresholds below differ. Sound and forwarding follow Default." })
+          ] }),
+          /* @__PURE__ */ jsx76(
+            "button",
+            {
+              type: "button",
+              onClick: resetToDefault,
+              className: "shrink-0 rounded-md px-2.5 py-1 text-sm font-medium text-text-tertiary transition-colors hover:text-text-danger",
+              children: "Reset to Default"
+            }
+          )
+        ] }) }),
+        scopeGroup("product")
+      ] })
+    ] });
+  }
+);
+NotificationSettings.displayName = "NotificationSettings";
 export {
   Accordion,
   AccordionContent,
@@ -3889,6 +4919,8 @@ export {
   CarouselNext,
   CarouselPrevious,
   Checkbox,
+  Code,
+  CodeBlock,
   Col,
   Collapsible,
   CollapsibleContent2 as CollapsibleContent,
@@ -4009,6 +5041,10 @@ export {
   NavigationMenuList,
   NavigationMenuTrigger,
   NavigationMenuViewport,
+  NotificationBell,
+  NotificationCenter,
+  NotificationSettings,
+  OrgProductSwitcher,
   Pagination,
   PaginationContent,
   PaginationEllipsis,
@@ -4044,6 +5080,7 @@ export {
   SidebarNav,
   SidebarNavLink,
   SidebarProductHeader,
+  SignInScreen,
   Skeleton,
   Slider,
   StatCard,
@@ -4076,9 +5113,13 @@ export {
   badgeVariants,
   buttonVariants,
   cn,
+  formatRelativeAge,
   isKnownExtensionIcon,
+  isNotificationSettled,
   navigationMenuTriggerStyle,
   segmentChipVariants,
+  severityBadgeVariant,
+  severityLabels,
   statusDotVariants,
   toast,
   toggleVariants,