@cboxdk/cbox-ui 0.6.0

package/dist/index.js

@@ -0,0 +1,3671 @@
+import { createContext, useContext, useEffect, useState, useRef, useMemo, useCallback, useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { X, Menu, PanelLeftOpen, PanelLeftClose } from 'lucide-react';
+
+// src/context/cbox-id.tsx
+var CboxIdContext = createContext(null);
+function CboxIdProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CboxIdContext.Provider, { value, children });
+}
+function useCboxId() {
+  const ctx = useContext(CboxIdContext);
+  if (ctx === null) {
+    throw new Error(
+      "@cboxdk/cbox-ui: useCboxId() must be called inside <CboxIdProvider>. Wrap your app root and populate it from the id-client SDK (or, in id itself, from Inertia shared props)."
+    );
+  }
+  return ctx;
+}
+function useCboxIdOptional() {
+  return useContext(CboxIdContext);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function AppContent({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      ...props,
+      className: cn(
+        "canvas-gradient relative flex h-svh flex-1 flex-col overflow-y-auto",
+        className
+      ),
+      children
+    }
+  );
+}
+function AppShell({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-svh w-full bg-canvas text-foreground", children });
+}
+function CboxBrand({
+  appKey,
+  submark,
+  assetBase = "/brand",
+  tone = "dark",
+  collapsed = false,
+  className
+}) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: `${assetBase}/cbox-icon.png`,
+        srcSet: `${assetBase}/cbox-icon.png 1x, ${assetBase}/cbox-icon@2x.png 2x`,
+        alt: "Cbox",
+        width: 36,
+        height: 36,
+        className: cn("h-9 w-9 rounded-md", className)
+      }
+    );
+  }
+  const wordmark = tone === "light" ? `${assetBase}/cbox-logo-white.png` : `${assetBase}/cbox-logo.png`;
+  const wordmarkRetina = tone === "light" ? `${assetBase}/cbox-logo-white@2x.png` : `${assetBase}/cbox-logo@2x.png`;
+  const submarkText = submark === void 0 ? appKey : submark;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("inline-flex items-center gap-2", className),
+      "aria-label": `Cbox \xB7 ${appKey}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: wordmark,
+            srcSet: `${wordmark} 1x, ${wordmarkRetina} 2x`,
+            alt: "Cbox",
+            height: 22,
+            className: "h-[22px] w-auto select-none",
+            draggable: false
+          }
+        ),
+        submarkText !== null && submarkText !== "" ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "text-mono text-[10px] font-semibold tracking-[0.22em] uppercase",
+              tone === "light" ? "text-white/60" : "text-muted-foreground/80"
+            ),
+            children: submarkText
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function CboxAppSidebar({
+  appKey,
+  brandSubmark,
+  assetBase,
+  brandHref = "/",
+  sections,
+  currentPath,
+  LinkComponent,
+  collapsed = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      "data-slot": "cbox-app-sidebar",
+      "data-collapsed": collapsed ? "true" : "false",
+      className: cn(
+        "hidden h-svh shrink-0 flex-col border-r border-sidebar-border bg-sidebar transition-[width] duration-150 ease-out lg:flex",
+        collapsed ? "w-[60px]" : "w-[240px]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            href: brandHref,
+            "aria-label": "Home",
+            className: cn(
+              "flex h-14 shrink-0 items-center border-b border-sidebar-border/70",
+              collapsed ? "justify-center px-0" : "px-4"
+            ),
+            children: /* @__PURE__ */ jsx(
+              CboxBrand,
+              {
+                appKey,
+                submark: brandSubmark,
+                assetBase,
+                collapsed
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "nav",
+          {
+            className: cn(
+              "flex-1 overflow-y-auto pt-5 pb-3",
+              collapsed ? "space-y-3 px-2" : "space-y-5 px-3"
+            ),
+            children: sections.map((section) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              collapsed ? null : /* @__PURE__ */ jsx("p", { className: "text-eyebrow px-3 pb-1", children: section.label }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: section.items.map((item) => {
+                const active = item.matchPrefix === true ? currentPath === item.href || currentPath.startsWith(item.href + "/") : currentPath === item.href;
+                const Icon = item.icon;
+                return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                  LinkComponent,
+                  {
+                    href: item.href,
+                    prefetch: true,
+                    "aria-label": collapsed ? item.label : void 0,
+                    title: collapsed ? item.label : void 0,
+                    className: cn(
+                      collapsed ? "group mx-auto flex h-9 w-9 items-center justify-center rounded-md transition-colors" : "group flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] transition-colors",
+                      active ? "bg-sidebar-accent font-semibold text-sidebar-accent-foreground" : "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-foreground"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          className: cn(
+                            "h-4 w-4 shrink-0",
+                            active ? "text-foreground" : "text-sidebar-muted"
+                          ),
+                          strokeWidth: 1.7
+                        }
+                      ),
+                      collapsed ? null : /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label })
+                    ]
+                  }
+                ) }, item.label);
+              }) })
+            ] }, section.label))
+          }
+        )
+      ]
+    }
+  );
+}
+function CboxMobileNavDrawer({
+  open,
+  onClose,
+  appKey,
+  brandSubmark,
+  assetBase,
+  brandHref = "/",
+  sections,
+  currentPath,
+  LinkComponent
+}) {
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open, onClose]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 z-40 lg:hidden",
+        open ? "" : "pointer-events-none"
+      ),
+      "aria-hidden": open ? "false" : "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: onClose,
+            className: cn(
+              "absolute inset-0 bg-black/40 transition-opacity duration-200",
+              open ? "opacity-100" : "opacity-0"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Navigation",
+            className: cn(
+              "absolute inset-y-0 left-0 flex w-[280px] max-w-[80vw] flex-col border-r border-sidebar-border bg-sidebar shadow-xl transition-transform duration-200 ease-out",
+              open ? "translate-x-0" : "-translate-x-full"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex h-14 shrink-0 items-center justify-between gap-2 border-b border-sidebar-border/70 px-4", children: [
+                /* @__PURE__ */ jsx(
+                  LinkComponent,
+                  {
+                    href: brandHref,
+                    "aria-label": "Home",
+                    className: "flex items-center",
+                    children: /* @__PURE__ */ jsx(
+                      CboxBrand,
+                      {
+                        appKey,
+                        submark: brandSubmark,
+                        assetBase,
+                        collapsed: false
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    "aria-label": "Close navigation",
+                    className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+                    children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", strokeWidth: 1.8 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("nav", { className: "flex-1 space-y-5 overflow-y-auto px-3 pt-5 pb-3", children: sections.map((section) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-eyebrow px-3 pb-1", children: section.label }),
+                /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: section.items.map((item) => {
+                  const active = item.matchPrefix === true ? currentPath === item.href || currentPath.startsWith(
+                    item.href + "/"
+                  ) : currentPath === item.href;
+                  const Icon = item.icon;
+                  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                    LinkComponent,
+                    {
+                      href: item.href,
+                      prefetch: true,
+                      className: cn(
+                        "group flex items-center gap-2.5 rounded-md px-3 py-2 text-[14px] transition-colors",
+                        active ? "bg-sidebar-accent font-semibold text-sidebar-accent-foreground" : "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-foreground"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            className: cn(
+                              "h-4 w-4 shrink-0",
+                              active ? "text-foreground" : "text-sidebar-muted"
+                            ),
+                            strokeWidth: 1.7
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label })
+                      ]
+                    }
+                  ) }, item.label);
+                }) })
+              ] }, section.label)) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function AppSwitcher({ className, onLockedAppClick }) {
+  const cboxId = useCboxIdOptional();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const containerRef = useRef(null);
+  const searchRef = useRef(null);
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setActiveIndex(0);
+      const id = requestAnimationFrame(() => searchRef.current?.focus());
+      return () => cancelAnimationFrame(id);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function onPointerDown(event) {
+      if (containerRef.current !== null && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    function onKey(event) {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    }
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  if (cboxId === null || cboxId.apps.length === 0) {
+    return null;
+  }
+  const apps = cboxId.apps;
+  const orgSlug = cboxId.currentOrganization?.slug;
+  const currentApp = apps.find((a) => a.current === true) ?? null;
+  const { entitled, locked, navigableHrefs } = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const matches = (app) => {
+      if (q === "") {
+        return true;
+      }
+      return app.name.toLowerCase().includes(q) || app.key.toLowerCase().includes(q) || (app.description?.toLowerCase().includes(q) ?? false);
+    };
+    const entitledList = [];
+    const lockedList = [];
+    for (const app of apps) {
+      if (!matches(app)) {
+        continue;
+      }
+      const isEntitled = app.entitled !== false && app.comingSoon !== true;
+      (isEntitled ? entitledList : lockedList).push(app);
+    }
+    const navigable = [];
+    for (const app of entitledList) {
+      if (app.current !== true) {
+        navigable.push({ app, isLocked: false });
+      }
+    }
+    for (const app of lockedList) {
+      if (app.comingSoon !== true) {
+        navigable.push({ app, isLocked: true });
+      }
+    }
+    return {
+      entitled: entitledList,
+      locked: lockedList,
+      navigableHrefs: navigable
+    };
+  }, [apps, query]);
+  const totalMatches = entitled.length + locked.length;
+  useEffect(() => {
+    if (activeIndex >= navigableHrefs.length) {
+      setActiveIndex(0);
+    }
+  }, [navigableHrefs.length, activeIndex]);
+  const triggerMonogram = currentApp?.monogram ?? currentApp?.name.slice(0, 1).toUpperCase() ?? "\u2B1B";
+  const triggerName = currentApp?.name ?? "Apps";
+  const triggerAccent = currentApp?.accentColor;
+  function onSearchKeyDown(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (navigableHrefs.length === 0) {
+        return;
+      }
+      setActiveIndex((i) => (i + 1) % navigableHrefs.length);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (navigableHrefs.length === 0) {
+        return;
+      }
+      setActiveIndex((i) => (i - 1 + navigableHrefs.length) % navigableHrefs.length);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const target = navigableHrefs[activeIndex];
+      if (target === void 0) {
+        return;
+      }
+      if (target.isLocked) {
+        onLockedAppClick?.(target.app);
+        setOpen(false);
+        return;
+      }
+      const href = orgSlug !== void 0 && target.app.current !== true ? buildOrgUrl(target.app.url, orgSlug) : target.app.url;
+      window.location.href = href;
+      setOpen(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "true",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        className: "flex items-center gap-2 rounded-md border border-border bg-card px-2.5 py-1.5 text-sm font-medium text-foreground hover:bg-secondary",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: triggerAccent !== void 0 ? {
+                backgroundColor: triggerAccent,
+                color: "#fff",
+                borderColor: triggerAccent
+              } : void 0,
+              className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-sm border border-border bg-secondary text-[10px] font-bold",
+              children: currentApp?.iconUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: currentApp.iconUrl,
+                  alt: "",
+                  className: "h-3.5 w-3.5",
+                  loading: "eager"
+                }
+              ) : triggerMonogram
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "max-w-[140px] truncate", children: triggerName }),
+          /* @__PURE__ */ jsx(Chevron, {})
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "Switch app",
+        className: "absolute left-0 top-full z-50 mt-1 w-[min(22rem,calc(100vw-1.5rem))] overflow-hidden rounded-lg border border-border bg-popover shadow-lg",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b border-border/70 px-3 pt-2.5 pb-1.5", children: /* @__PURE__ */ jsx("p", { className: "text-mono text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase", children: "Switch app" }) }),
+          /* @__PURE__ */ jsx("div", { className: "border-b border-border/70 px-2 py-1.5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md px-2 py-1 focus-within:bg-secondary", children: [
+            /* @__PURE__ */ jsx(SearchIcon, {}),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: searchRef,
+                type: "text",
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                onKeyDown: onSearchKeyDown,
+                placeholder: "Filter apps\u2026",
+                "aria-label": "Filter apps",
+                autoComplete: "off",
+                spellCheck: false,
+                className: "w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground/60 focus:outline-none"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "max-h-[60vh] overflow-y-auto py-1", children: [
+            totalMatches === 0 ? /* @__PURE__ */ jsxs("p", { className: "px-3 py-6 text-center text-[12px] text-muted-foreground", children: [
+              "No apps match",
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "text-mono text-foreground", children: [
+                "\u201C",
+                query,
+                "\u201D"
+              ] })
+            ] }) : null,
+            entitled.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "space-y-0.5 p-1", children: entitled.map((app) => {
+              const navIndex = findNavIndex(navigableHrefs, app);
+              return /* @__PURE__ */ jsx(
+                AppRow,
+                {
+                  app,
+                  orgSlug,
+                  highlighted: navIndex === activeIndex,
+                  onMouseEnter: () => {
+                    if (navIndex !== -1) {
+                      setActiveIndex(navIndex);
+                    }
+                  },
+                  onLockedAppClick,
+                  onNavigate: () => setOpen(false)
+                },
+                app.key
+              );
+            }) }) : null,
+            locked.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              entitled.length > 0 ? /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border/50" }) : null,
+              /* @__PURE__ */ jsx("p", { className: "text-mono px-3 py-1.5 text-[10px] font-semibold tracking-[0.18em] text-muted-foreground/70 uppercase", children: "Available" }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-0.5 p-1 pt-0", children: locked.map((app) => {
+                const navIndex = findNavIndex(navigableHrefs, app);
+                return /* @__PURE__ */ jsx(
+                  AppRow,
+                  {
+                    app,
+                    orgSlug,
+                    highlighted: navIndex === activeIndex,
+                    onMouseEnter: () => {
+                      if (navIndex !== -1) {
+                        setActiveIndex(navIndex);
+                      }
+                    },
+                    onLockedAppClick,
+                    onNavigate: () => setOpen(false)
+                  },
+                  app.key
+                );
+              }) })
+            ] }) : null
+          ] })
+        ]
+      }
+    ) : null
+  ] });
+}
+function findNavIndex(navigable, app) {
+  return navigable.findIndex((n) => n.app.key === app.key);
+}
+function AppRow({
+  app,
+  orgSlug,
+  highlighted,
+  onMouseEnter,
+  onLockedAppClick,
+  onNavigate
+}) {
+  const isComingSoon = app.comingSoon === true;
+  const isLocked = app.entitled === false || isComingSoon;
+  const monogram = app.monogram ?? app.name.slice(0, 1).toUpperCase();
+  const accent = app.accentColor;
+  const tileStyle = accent !== void 0 && app.iconUrl === void 0 ? { backgroundColor: accent, color: "#fff", borderColor: accent } : void 0;
+  const href = orgSlug !== void 0 && app.current !== true ? buildOrgUrl(app.url, orgSlug) : app.url;
+  const tile = /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: tileStyle,
+      className: cn(
+        "flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-card text-[13px] font-semibold text-foreground",
+        app.current && "ring-2 ring-accent-edge ring-offset-1 ring-offset-popover",
+        isLocked && "opacity-60 grayscale"
+      ),
+      children: app.iconUrl ? /* @__PURE__ */ jsx("img", { src: app.iconUrl, alt: "", className: "h-5 w-5", loading: "lazy" }) : /* @__PURE__ */ jsx("span", { children: monogram })
+    }
+  );
+  const body = /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "truncate text-sm font-medium text-foreground",
+            isLocked && "text-muted-foreground"
+          ),
+          children: app.name
+        }
+      ),
+      app.current ? /* @__PURE__ */ jsx("span", { className: "text-mono shrink-0 rounded-sm border border-accent-edge/40 bg-accent-soft px-1 text-[9px] font-semibold tracking-[0.14em] text-accent uppercase", children: "current" }) : null
+    ] }),
+    app.description ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "truncate text-[11px]",
+          isLocked ? "text-muted-foreground/70" : "text-muted-foreground"
+        ),
+        children: app.description
+      }
+    ) : null
+  ] });
+  const trailing = isComingSoon ? /* @__PURE__ */ jsx("span", { className: "text-mono shrink-0 rounded-sm border border-border bg-secondary px-1.5 py-0.5 text-[9px] font-semibold tracking-[0.14em] text-muted-foreground uppercase", children: "soon" }) : isLocked ? /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1 text-[10px] font-medium text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(Lock, {}),
+    "Add"
+  ] }) : null;
+  if (isComingSoon) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-disabled": true,
+        className: "flex w-full cursor-not-allowed items-center gap-3 rounded-md px-2.5 py-2",
+        title: `${app.name} \u2014 coming soon`,
+        children: [
+          tile,
+          body,
+          trailing
+        ]
+      }
+    ) });
+  }
+  if (isLocked) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onMouseEnter,
+        onClick: () => {
+          onLockedAppClick?.(app);
+          onNavigate();
+        },
+        className: cn(
+          "group flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-left transition-colors",
+          highlighted && "bg-secondary",
+          onLockedAppClick !== void 0 ? "hover:bg-secondary" : "cursor-default"
+        ),
+        title: `Add ${app.name} to your plan`,
+        children: [
+          tile,
+          body,
+          trailing
+        ]
+      }
+    ) });
+  }
+  if (app.current === true) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onMouseEnter,
+        className: "flex w-full items-center gap-3 rounded-md bg-accent-soft px-2.5 py-2",
+        children: [
+          tile,
+          body,
+          trailing
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      onMouseEnter,
+      onClick: onNavigate,
+      className: cn(
+        "group flex w-full items-center gap-3 rounded-md px-2.5 py-2 transition-colors hover:bg-secondary",
+        highlighted && "bg-secondary"
+      ),
+      children: [
+        tile,
+        body,
+        trailing
+      ]
+    }
+  ) });
+}
+function buildOrgUrl(url, orgSlug) {
+  if (url === "" || orgSlug === "") {
+    return url;
+  }
+  try {
+    const u = new URL(url);
+    u.pathname = `/org/${encodeURIComponent(orgSlug)}`;
+    return u.toString();
+  } catch {
+    return `${url.replace(/\/$/, "")}/org/${encodeURIComponent(orgSlug)}`;
+  }
+}
+function Chevron() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M2 4l3 3 3-3",
+          stroke: "currentColor",
+          strokeWidth: "1.4",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function SearchIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      className: "shrink-0 text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "5.25", cy: "5.25", r: "3.25" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 8l2 2" })
+      ]
+    }
+  );
+}
+function Lock() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2.5", y: "5", width: "7", height: "5", rx: "1" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 5V3.5a2 2 0 1 1 4 0V5" })
+      ]
+    }
+  );
+}
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center gap-3 px-6 py-12 text-center",
+        className
+      ),
+      children: [
+        Icon ? /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md bg-secondary text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", strokeWidth: 1.6 }) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-foreground", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null
+        ] }),
+        action ? /* @__PURE__ */ jsx("div", { className: "pt-1", children: action }) : null
+      ]
+    }
+  );
+}
+var toneStyles = {
+  neutral: "border-border bg-secondary text-secondary-foreground",
+  info: "border-info/20 bg-info-soft text-info",
+  success: "border-success/20 bg-success-soft text-success",
+  warning: "border-warning/20 bg-warning-soft text-warning",
+  destructive: "border-destructive/20 bg-destructive-soft text-destructive",
+  muted: "border-border bg-card text-muted-foreground"
+};
+var dotStyles = {
+  neutral: "bg-muted-foreground",
+  info: "bg-info",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+  muted: "bg-muted-foreground/60"
+};
+function StatusPill({
+  children,
+  tone = "neutral",
+  className,
+  dot = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] leading-none font-medium",
+        toneStyles[tone],
+        className
+      ),
+      children: [
+        dot ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("h-1.5 w-1.5 rounded-full", dotStyles[tone])
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+function SurfaceModal({
+  open,
+  onClose,
+  title,
+  eyebrow,
+  headerActions,
+  footer,
+  size = "wide",
+  children
+}) {
+  const dialogRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const original = document.body.style.overflow;
+    const gutter = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    if (gutter > 0) {
+      document.body.style.paddingRight = `${gutter}px`;
+    }
+    return () => {
+      document.body.style.overflow = original;
+      document.body.style.paddingRight = "";
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    previousFocusRef.current = document.activeElement;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key === "Tab" && dialogRef.current !== null) {
+        const focusable = dialogRef.current.querySelectorAll(
+          'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (first === void 0 || last === void 0) return;
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    const id = window.setTimeout(() => {
+      const focusable = dialogRef.current?.querySelector(
+        'input, button, [tabindex]:not([tabindex="-1"])'
+      );
+      focusable?.focus();
+    }, 50);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      window.clearTimeout(id);
+      previousFocusRef.current?.focus?.();
+    };
+  }, [open, onClose]);
+  const onBackdrop = useCallback(
+    (e) => {
+      if (e.target === e.currentTarget) onClose();
+    },
+    [onClose]
+  );
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "presentation",
+      onMouseDown: onBackdrop,
+      className: cn(
+        "fixed inset-0 z-50 flex animate-in fade-in duration-150",
+        size === "spotlight" ? "items-start justify-center pt-[10vh]" : "items-center justify-center px-4 py-[5vh]",
+        "bg-foreground/40 backdrop-blur-sm"
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: dialogRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": typeof title === "string" ? title : void 0,
+          className: cn(
+            "flex max-h-full w-full flex-col overflow-hidden rounded-lg border border-border bg-background text-foreground shadow-2xl",
+            "animate-in zoom-in-95 slide-in-from-bottom-2 duration-150",
+            size === "spotlight" ? "max-w-[640px]" : "max-w-[960px]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("header", { className: "flex shrink-0 items-start gap-3 border-b border-border/70 bg-background/80 px-5 py-4 backdrop-blur-md", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                eyebrow !== void 0 ? /* @__PURE__ */ jsx("p", { className: "text-mono text-[10px] font-semibold tracking-[0.18em] uppercase text-muted-foreground", children: eyebrow }) : null,
+                /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold tracking-tight text-foreground", children: title })
+              ] }),
+              headerActions !== void 0 ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: headerActions }) : null,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  className: "ml-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", strokeWidth: 1.8 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children }),
+            footer !== void 0 ? /* @__PURE__ */ jsx("footer", { className: "flex shrink-0 items-center justify-between gap-3 border-t border-border/70 bg-background/80 px-5 py-3 text-xs text-muted-foreground backdrop-blur-md", children: footer }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+var TONES = {
+  info: "info",
+  warning: "warning",
+  critical: "destructive"
+};
+function InboxSurface({ open, onClose }) {
+  const transport = useTransport();
+  const cboxId = useCboxIdOptional();
+  const [inbox, setInbox] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [filter, setFilter] = useState("all");
+  const userId = cboxId?.user.id ?? null;
+  const baseUrl = transport.urls.notifications ?? null;
+  useEffect(() => {
+    if (!open || userId === null || baseUrl === null) return;
+    let cancelled = false;
+    const load = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const headers = await authHeaders(transport, "notifications");
+        const response = await fetch(
+          `${baseUrl}/api/v1/recipients/${userId}/inbox?limit=100`,
+          { headers, credentials: "include" }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        const body = await response.json();
+        if (!cancelled) setInbox(body);
+      } catch (e) {
+        if (!cancelled) {
+          setError(e instanceof Error ? e.message : "Load failed");
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [open, userId, baseUrl, transport]);
+  const markRead = async (id) => {
+    if (inbox === null || userId === null || baseUrl === null) return;
+    const prev = inbox;
+    setInbox({
+      ...inbox,
+      items: inbox.items.map(
+        (it) => it.id === id ? { ...it, read_at: (/* @__PURE__ */ new Date()).toISOString() } : it
+      ),
+      unread_count: Math.max(0, inbox.unread_count - 1)
+    });
+    try {
+      const headers = await authHeaders(transport, "notifications");
+      const csrf = transport.csrfToken?.();
+      if (csrf !== void 0 && csrf !== "") {
+        headers["X-CSRF-TOKEN"] = csrf;
+        headers["X-Requested-With"] = "XMLHttpRequest";
+      }
+      const response = await fetch(
+        `${baseUrl}/api/v1/recipients/${userId}/notifications/${id}/read`,
+        {
+          method: "POST",
+          headers,
+          credentials: "include"
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+    } catch {
+      setInbox(prev);
+    }
+  };
+  const items = inbox?.items ?? [];
+  const filtered = filter === "unread" ? items.filter((i) => i.read_at === null) : items;
+  const unread = inbox?.unread_count ?? 0;
+  return /* @__PURE__ */ jsx(
+    SurfaceModal,
+    {
+      open,
+      onClose,
+      eyebrow: "Notifications",
+      title: unread > 0 ? `Inbox \xB7 ${unread} unread` : "Inbox \xB7 all caught up",
+      headerActions: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          FilterTab,
+          {
+            active: filter === "all",
+            onClick: () => setFilter("all"),
+            children: "All"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FilterTab,
+          {
+            active: filter === "unread",
+            onClick: () => setFilter("unread"),
+            children: "Unread"
+          }
+        )
+      ] }),
+      footer: inbox !== null && baseUrl !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Showing ",
+          filtered.length,
+          " of ",
+          items.length,
+          "."
+        ] }),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `${baseUrl}/inbox`,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "font-medium text-foreground hover:underline",
+            children: "Open in new tab \u2197"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("span", { children: "\u2014" }),
+      children: error !== null ? /* @__PURE__ */ jsxs("div", { className: "px-5 py-8 text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children: "Couldn't load inbox" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: error })
+      ] }) : loading && inbox === null ? /* @__PURE__ */ jsx("div", { className: "px-5 py-12 text-center text-sm text-muted-foreground", children: "Loading\u2026" }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-5 py-12", children: /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          title: filter === "unread" ? "No unread notifications" : "No notifications yet",
+          description: "When a Cbox app sends you something \u2014 invitation accepted, billing event, security alert \u2014 it lands here."
+        }
+      ) }) : /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/70", children: filtered.map((item) => {
+        const data = item.data ?? {};
+        const ctaUrl = data.cta_url;
+        const InnerWrapper = ({
+          children
+        }) => ctaUrl !== void 0 && ctaUrl !== "" ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: ctaUrl,
+            className: "block transition-colors hover:bg-secondary/40",
+            children
+          }
+        ) : /* @__PURE__ */ jsx("div", { children });
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: item.read_at === null ? "bg-secondary/20" : "",
+            children: /* @__PURE__ */ jsx(InnerWrapper, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 px-5 py-3", children: [
+              /* @__PURE__ */ jsx(
+                StatusPill,
+                {
+                  tone: TONES[item.severity],
+                  dot: true,
+                  children: item.severity
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: data.title ?? item.event_type }),
+                (data.body ?? "") !== "" ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-xs text-muted-foreground", children: data.body }) : null,
+                /* @__PURE__ */ jsxs("p", { className: "text-mono mt-1 text-[10px] text-muted-foreground", children: [
+                  item.event_type,
+                  " \xB7 ",
+                  new Date(
+                    item.created_at
+                  ).toLocaleString()
+                ] })
+              ] }),
+              item.read_at === null ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    void markRead(item.id);
+                  },
+                  className: "shrink-0 rounded-md border border-border bg-card px-2 py-1 text-xs font-medium text-foreground transition-colors hover:border-border-strong",
+                  "aria-label": "Mark as read",
+                  children: "Mark read"
+                }
+              ) : null
+            ] }) })
+          },
+          item.id
+        );
+      }) })
+    }
+  );
+}
+async function authHeaders(transport, audience) {
+  const headers = {
+    Accept: "application/json"
+  };
+  try {
+    const { token } = await transport.getToken(audience);
+    if (token !== "") {
+      headers.Authorization = `Bearer ${token}`;
+    }
+  } catch {
+  }
+  return headers;
+}
+function FilterTab({
+  active,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: active ? "rounded-md bg-secondary px-2 py-1 text-xs font-medium text-foreground" : "rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-secondary/60 hover:text-foreground",
+      "aria-pressed": active,
+      children
+    }
+  );
+}
+var TransportContext = createContext(null);
+var SurfaceContext = createContext(null);
+function CboxSurfaces({
+  transport,
+  surfaces,
+  config,
+  children
+}) {
+  const enabled = useMemo(() => new Set(surfaces), [surfaces]);
+  const [active, setActive] = useState(null);
+  const open = useCallback(
+    (id, args) => {
+      if (!enabled.has(id)) {
+        console.warn(
+          `[cbox-ui] surface "${id}" is not enabled in this host. Add it to <CboxSurfaces surfaces={[\u2026]}>.`
+        );
+        return;
+      }
+      setActive({ id, args });
+    },
+    [enabled]
+  );
+  const close = useCallback(() => setActive(null), []);
+  const controller = useMemo(
+    () => ({
+      activeSurface: active?.id ?? null,
+      open,
+      close
+    }),
+    [active, open, close]
+  );
+  return /* @__PURE__ */ jsx(TransportContext.Provider, { value: transport, children: /* @__PURE__ */ jsxs(SurfaceContext.Provider, { value: controller, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      InboxSurface,
+      {
+        open: active?.id === "inbox",
+        onClose: close
+      }
+    )
+  ] }) });
+}
+function useCboxSurfaces() {
+  const ctx = useContext(SurfaceContext);
+  if (ctx === null) {
+    throw new Error(
+      "[cbox-ui] useCboxSurfaces must be used inside <CboxSurfaces>. Did the host forget to mount it?"
+    );
+  }
+  return ctx;
+}
+function useCboxSurfacesOptional() {
+  return useContext(SurfaceContext);
+}
+function useTransport() {
+  const t = useContext(TransportContext);
+  if (t === null) {
+    throw new Error(
+      "[cbox-ui] useTransport must be used inside <CboxSurfaces>."
+    );
+  }
+  return t;
+}
+function NotificationsBell({ className }) {
+  const ctx = useCboxIdOptional();
+  const surfaces = useCboxSurfacesOptional();
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e) => {
+      const target = e.target;
+      if (target instanceof Node && ref.current !== null && !ref.current.contains(target)) {
+        setOpen(false);
+      }
+    };
+    const onEsc = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onEsc);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [open]);
+  const notificationsData = ctx === null ? null : ctx.notifications ?? null;
+  if (ctx === null) {
+    return null;
+  }
+  if (notificationsData === null) {
+    return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Notifications",
+        disabled: true,
+        className: "relative flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground opacity-60 cursor-default",
+        children: /* @__PURE__ */ jsx(Bell, {})
+      }
+    ) });
+  }
+  const { unreadCount, inboxUrl, previewItems, markReadUrl } = notificationsData;
+  const display = unreadCount > 99 ? "99+" : unreadCount.toString();
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-label": unreadCount > 0 ? `${unreadCount} unread notifications` : "Notifications",
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        className: "relative flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground data-[open=true]:bg-secondary data-[open=true]:text-foreground",
+        "data-open": open ? "true" : "false",
+        children: [
+          /* @__PURE__ */ jsx(Bell, {}),
+          unreadCount > 0 ? /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 flex min-w-[16px] items-center justify-center rounded-full bg-destructive px-1 text-[9px] font-semibold leading-4 text-destructive-foreground", children: display }) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "menu",
+        className: "absolute right-0 z-30 mt-2 w-[360px] origin-top-right rounded-md border border-border bg-popover text-popover-foreground shadow-lg",
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between border-b border-border/70 px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-mono text-[10px] font-semibold tracking-[0.18em] uppercase text-muted-foreground", children: "Notifications" }),
+            unreadCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-mono text-[10px] tabular-nums text-muted-foreground", children: [
+              unreadCount,
+              " unread"
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-[420px] overflow-y-auto", children: previewItems === void 0 || previewItems.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-8 text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "All caught up" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "No recent notifications." })
+          ] }) : /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/70", children: previewItems.map((item) => /* @__PURE__ */ jsx(
+            PreviewRow,
+            {
+              item,
+              markReadUrl,
+              onMarkedRead: () => setOpen(false)
+            },
+            item.id
+          )) }) }),
+          surfaces !== null ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setOpen(false);
+                surfaces.open("inbox");
+              },
+              className: "flex w-full items-center justify-center border-t border-border/70 px-3 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary",
+              children: "See all notifications \u2192"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: inboxUrl,
+              className: "flex items-center justify-center border-t border-border/70 px-3 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary",
+              children: "See all notifications \u2192"
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
+function PreviewRow({
+  item,
+  markReadUrl,
+  onMarkedRead
+}) {
+  const tone = item.severity === "critical" ? "bg-destructive" : item.severity === "warning" ? "bg-warning" : "bg-info";
+  const ts = (() => {
+    try {
+      return new Date(item.createdAt).toLocaleString();
+    } catch {
+      return item.createdAt;
+    }
+  })();
+  const markRead = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (markReadUrl === void 0 || markReadUrl === "") return;
+    const url = markReadUrl.replace("{id}", item.id);
+    const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? "";
+    try {
+      await fetch(url, {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "X-CSRF-TOKEN": csrf,
+          "X-Requested-With": "XMLHttpRequest"
+        }
+      });
+    } catch {
+    }
+    onMarkedRead();
+  };
+  const Wrapper = ({ children }) => item.ctaUrl !== null && item.ctaUrl !== void 0 && item.ctaUrl !== "" ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: item.ctaUrl,
+      className: "block transition-colors hover:bg-secondary/50",
+      children
+    }
+  ) : /* @__PURE__ */ jsx("div", { children });
+  return /* @__PURE__ */ jsx("li", { className: item.readAt === null ? "bg-secondary/20" : "", children: /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 px-3 py-2.5", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full",
+          tone
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-[13px] font-medium text-foreground", children: item.title }),
+      item.body !== void 0 && item.body !== null && item.body !== "" ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-xs text-muted-foreground", children: item.body }) : null,
+      /* @__PURE__ */ jsx("p", { className: "text-mono mt-1 text-[10px] text-muted-foreground", children: ts })
+    ] }),
+    item.readAt === null ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: markRead,
+        className: "shrink-0 rounded-md px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+        "aria-label": "Mark as read",
+        title: "Mark as read",
+        children: "\u2713"
+      }
+    ) : null
+  ] }) }) });
+}
+function Bell() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4 6.5a4 4 0 1 1 8 0v2.4l1.2 2H2.8l1.2-2V6.5z",
+            stroke: "currentColor",
+            strokeWidth: "1.4",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6.5 12.5a1.5 1.5 0 0 0 3 0",
+            stroke: "currentColor",
+            strokeWidth: "1.4",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function SearchTrigger({ onOpen, className, label = "Search" }) {
+  const [shortcut, setShortcut] = useState("\u2318K");
+  useEffect(() => {
+    if (typeof navigator === "undefined") return;
+    setShortcut(/Mac/.test(navigator.platform) ? "\u2318K" : "Ctrl K");
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onOpen,
+      className: cn(
+        "hidden h-8 w-[180px] items-center gap-2 rounded-md border border-border bg-card pr-1.5 pl-2.5 text-xs text-muted-foreground transition-colors hover:border-border-strong hover:text-foreground sm:inline-flex",
+        className
+      ),
+      "aria-label": "Open command palette",
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon2, {}),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: label }),
+        /* @__PURE__ */ jsx("kbd", { className: "text-mono ml-1 rounded-sm border border-border bg-secondary px-1 py-0.5 text-[10px] font-medium tracking-tight text-muted-foreground", children: shortcut })
+      ]
+    }
+  );
+}
+function SearchIcon2() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+        /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+      ]
+    }
+  );
+}
+function UserMenu({ extras, className }) {
+  const { user, currentOrganization, urls } = useCboxId();
+  const [open, setOpen] = useState(false);
+  const initials = user.name.split(/\s+/).filter(Boolean).slice(0, 2).map((n) => n[0]?.toUpperCase() ?? "").join("");
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        className: "flex h-9 items-center gap-2 rounded-md px-1.5 hover:bg-secondary",
+        "aria-label": "Open user menu",
+        children: user.avatar_url ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: user.avatar_url,
+            alt: "",
+            className: "h-7 w-7 rounded-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-accent-soft text-[11px] font-semibold text-foreground", children: initials || "?" })
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full z-50 mt-1 w-64 rounded-md border border-border bg-popover p-1 shadow-md", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-2 py-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: user.name }),
+        /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: user.email })
+      ] }),
+      extras ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
+        extras
+      ] }) : null,
+      /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: urls.accountUrl,
+          className: "flex items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-secondary",
+          children: [
+            /* @__PURE__ */ jsx("span", { children: "Manage account" }),
+            /* @__PURE__ */ jsx(CrossAppArrow, {})
+          ]
+        }
+      ),
+      urls.orgSettingsUrl && currentOrganization ? /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: urls.orgSettingsUrl,
+          className: "flex items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-secondary",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+              "Team & billing",
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                " \xB7 ",
+                currentOrganization.name
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(CrossAppArrow, {})
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
+      /* @__PURE__ */ jsxs("form", { action: urls.signOutUrl, method: "POST", children: [
+        /* @__PURE__ */ jsx(SignOutCsrf, {}),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            className: "flex w-full items-center rounded-sm px-2 py-1.5 text-left text-sm hover:bg-secondary",
+            children: "Sign out"
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+}
+function CrossAppArrow() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "none",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3 7l4-4M3 3h4v4",
+          stroke: "currentColor",
+          strokeWidth: "1.4",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function SignOutCsrf() {
+  if (typeof document === "undefined") return null;
+  const csrf = document.querySelector('meta[name="csrf-token"]')?.content;
+  if (!csrf) return null;
+  return /* @__PURE__ */ jsx("input", { type: "hidden", name: "_token", value: csrf });
+}
+function CboxAppShell({
+  appKey,
+  brandSubmark,
+  assetBase,
+  brandHref,
+  sections,
+  currentPath,
+  LinkComponent,
+  sidebarCollapsed = false,
+  onToggleSidebar,
+  topbarCentre,
+  onSearchOpen,
+  topbarRightCluster,
+  children
+}) {
+  const ToggleIcon = sidebarCollapsed ? PanelLeftOpen : PanelLeftClose;
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  useEffect(() => {
+    setMobileNavOpen(false);
+  }, [currentPath]);
+  return /* @__PURE__ */ jsxs(AppShell, { children: [
+    /* @__PURE__ */ jsx(
+      CboxAppSidebar,
+      {
+        appKey,
+        brandSubmark,
+        assetBase,
+        brandHref,
+        sections,
+        currentPath,
+        LinkComponent,
+        collapsed: sidebarCollapsed
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CboxMobileNavDrawer,
+      {
+        open: mobileNavOpen,
+        onClose: () => setMobileNavOpen(false),
+        appKey,
+        brandSubmark,
+        assetBase,
+        brandHref,
+        sections,
+        currentPath,
+        LinkComponent
+      }
+    ),
+    /* @__PURE__ */ jsxs(AppContent, { children: [
+      /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-20 flex h-14 shrink-0 items-center justify-between gap-3 border-b border-border/70 bg-background/80 px-4 backdrop-blur-md", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setMobileNavOpen(true),
+              className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground lg:hidden",
+              "aria-label": "Open navigation",
+              title: "Open navigation",
+              children: /* @__PURE__ */ jsx(Menu, { className: "h-4 w-4", strokeWidth: 1.8 })
+            }
+          ),
+          onToggleSidebar !== void 0 ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onToggleSidebar,
+              className: "hidden h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground lg:inline-flex",
+              "aria-label": sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar",
+              title: sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar",
+              children: /* @__PURE__ */ jsx(
+                ToggleIcon,
+                {
+                  className: "h-4 w-4",
+                  strokeWidth: 1.8
+                }
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(AppSwitcher, {}),
+          topbarCentre !== void 0 ? topbarCentre : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: topbarRightCluster !== void 0 ? topbarRightCluster : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SearchTrigger, { onOpen: onSearchOpen ?? (() => {
+          }) }),
+          /* @__PURE__ */ jsx(NotificationsBell, {}),
+          /* @__PURE__ */ jsx(UserMenu, {})
+        ] }) })
+      ] }),
+      children
+    ] })
+  ] });
+}
+var DefaultLink = ({ href, className, children }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function ContextBar({
+  crumbs,
+  LinkComponent = DefaultLink,
+  className
+}) {
+  if (crumbs.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-component": "context-bar",
+      "aria-label": "Context",
+      className: cn("flex min-w-0 items-center gap-1", className),
+      children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex min-w-0 items-center gap-1",
+          children: [
+            index > 0 ? /* @__PURE__ */ jsx(Separator, {}) : null,
+            /* @__PURE__ */ jsx(
+              ContextCrumbChip,
+              {
+                crumb,
+                LinkComponent
+              }
+            )
+          ]
+        },
+        crumb.id
+      ))
+    }
+  );
+}
+function Separator() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "text-mono shrink-0 text-[14px] font-light text-muted-foreground/50 select-none",
+      children: "/"
+    }
+  );
+}
+function ContextCrumbChip({
+  crumb,
+  LinkComponent
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const listId = useId();
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(event) {
+      if (ref.current !== null && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    function onKey(event) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const hasMenu = crumb.items.length > 0 || crumb.footerLink !== void 0;
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": hasMenu ? open : void 0,
+        "aria-haspopup": hasMenu ? "listbox" : void 0,
+        "aria-controls": hasMenu ? listId : void 0,
+        "aria-label": crumb.ariaLabel ?? `Switch ${crumb.label}`,
+        disabled: !hasMenu,
+        className: cn(
+          "flex h-8 min-w-0 items-center gap-2 rounded-md border border-transparent px-2 text-[13px] text-foreground transition-colors",
+          hasMenu && "hover:border-border hover:bg-secondary/60 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+          open && "border-border bg-secondary/60"
+        ),
+        children: [
+          crumb.avatar !== void 0 ? /* @__PURE__ */ jsx(
+            ContextAvatarChip,
+            {
+              avatar: crumb.avatar,
+              fallbackLabel: crumb.label,
+              size: "sm"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: crumb.label }),
+          hasMenu ? /* @__PURE__ */ jsx(Chevron2, { open }) : null
+        ]
+      }
+    ),
+    open && hasMenu ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: listId,
+        role: "listbox",
+        "aria-label": crumb.ariaLabel ?? crumb.label,
+        className: "absolute left-0 top-full z-30 mt-1 w-64 overflow-hidden rounded-md border border-border bg-popover shadow-lg",
+        children: [
+          crumb.items.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "max-h-72 overflow-y-auto py-1", children: crumb.items.map((item) => /* @__PURE__ */ jsx(
+            ContextItemRow,
+            {
+              item,
+              onSelect: crumb.onSelect,
+              LinkComponent,
+              onAfterClick: () => setOpen(false)
+            },
+            item.id
+          )) }) : null,
+          crumb.footerLink !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            crumb.items.length > 0 ? /* @__PURE__ */ jsx("div", { className: "border-t border-border/60" }) : null,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                onClickCapture: () => setOpen(false),
+                children: /* @__PURE__ */ jsxs(
+                  LinkComponent,
+                  {
+                    href: crumb.footerLink.href,
+                    prefetch: true,
+                    className: "flex items-center gap-2 px-3 py-2.5 text-[13px] font-medium text-info transition-colors hover:bg-info-soft",
+                    children: [
+                      /* @__PURE__ */ jsx(Plus, {}),
+                      /* @__PURE__ */ jsx("span", { children: crumb.footerLink.label })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }) : null
+        ]
+      }
+    ) : null
+  ] });
+}
+function ContextItemRow({
+  item,
+  onSelect,
+  LinkComponent,
+  onAfterClick
+}) {
+  const body = /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-2.5 px-2.5 py-2", children: [
+    item.avatar !== void 0 ? /* @__PURE__ */ jsx(
+      ContextAvatarChip,
+      {
+        avatar: item.avatar,
+        fallbackLabel: item.label,
+        size: "md"
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] font-medium text-foreground", children: item.label }),
+      item.secondary !== void 0 ? /* @__PURE__ */ jsx("span", { className: "text-mono truncate text-[10px] text-muted-foreground", children: item.secondary }) : null
+    ] }),
+    item.current === true && item.settingsHref === void 0 ? /* @__PURE__ */ jsx(Check, {}) : null
+  ] });
+  const baseClassName = cn(
+    "group/item block w-full rounded-sm transition-colors",
+    item.current === true ? "bg-accent-soft hover:bg-accent-soft/80" : "hover:bg-secondary"
+  );
+  const settingsCog = item.settingsHref !== void 0 ? /* @__PURE__ */ jsx(
+    LinkComponent,
+    {
+      href: item.settingsHref,
+      prefetch: true,
+      className: "invisible absolute right-1 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-sm text-muted-foreground transition-colors group-hover/item:visible hover:bg-card hover:text-foreground focus-visible:visible focus-visible:bg-card focus-visible:text-foreground focus-visible:outline-none",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-label": item.settingsAriaLabel ?? `Settings for ${item.label}`,
+          onClickCapture: (event) => {
+            event.stopPropagation();
+            onAfterClick();
+          },
+          className: "contents",
+          children: /* @__PURE__ */ jsx(SettingsIcon, {})
+        }
+      )
+    }
+  ) : null;
+  if (onSelect !== void 0) {
+    return /* @__PURE__ */ jsxs("li", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onSelect(item.id);
+            onAfterClick();
+          },
+          className: cn(baseClassName, "text-left"),
+          children: body
+        }
+      ),
+      settingsCog
+    ] });
+  }
+  if (item.href !== void 0) {
+    return /* @__PURE__ */ jsxs("li", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        LinkComponent,
+        {
+          href: item.href,
+          prefetch: true,
+          className: baseClassName,
+          children: body
+        }
+      ),
+      settingsCog
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("li", { className: "relative", children: [
+    /* @__PURE__ */ jsx("div", { className: baseClassName, children: body }),
+    settingsCog
+  ] });
+}
+function SettingsIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M11.66 8.42a.79.79 0 0 0 .16.86l.03.03a.96.96 0 1 1-1.36 1.36l-.03-.03a.79.79 0 0 0-.86-.16.79.79 0 0 0-.48.72v.08a.96.96 0 1 1-1.92 0v-.04a.79.79 0 0 0-.52-.72.79.79 0 0 0-.86.16l-.03.03a.96.96 0 1 1-1.36-1.36l.03-.03a.79.79 0 0 0 .16-.86.79.79 0 0 0-.72-.48h-.08a.96.96 0 1 1 0-1.92h.04a.79.79 0 0 0 .72-.52.79.79 0 0 0-.16-.86l-.03-.03a.96.96 0 1 1 1.36-1.36l.03.03a.79.79 0 0 0 .86.16h.04a.79.79 0 0 0 .48-.72v-.08a.96.96 0 1 1 1.92 0v.04a.79.79 0 0 0 .48.72.79.79 0 0 0 .86-.16l.03-.03a.96.96 0 1 1 1.36 1.36l-.03.03a.79.79 0 0 0-.16.86v.04a.79.79 0 0 0 .72.48h.08a.96.96 0 1 1 0 1.92h-.04a.79.79 0 0 0-.72.48Z" })
+      ]
+    }
+  );
+}
+function ContextAvatarChip({
+  avatar,
+  fallbackLabel,
+  size = "md"
+}) {
+  const initials = avatar.initials ?? deriveInitials(fallbackLabel);
+  const sizeClass = size === "sm" ? "h-5 w-5 text-[9px]" : "h-7 w-7 text-[11px]";
+  const style = avatar.src === void 0 && avatar.accent !== void 0 ? {
+    backgroundColor: avatar.accent,
+    color: "#fff"
+  } : void 0;
+  if (avatar.src !== void 0) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: avatar.src,
+        alt: "",
+        className: cn(
+          "shrink-0 rounded-sm bg-secondary object-cover",
+          sizeClass
+        ),
+        loading: "lazy"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style,
+      className: cn(
+        "flex shrink-0 items-center justify-center rounded-sm font-semibold tracking-tight",
+        avatar.accent === void 0 && "bg-info-soft text-info",
+        sizeClass
+      ),
+      children: initials
+    }
+  );
+}
+function deriveInitials(label) {
+  const parts = label.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase();
+  }
+  return (label.slice(0, 2) || "?").toUpperCase();
+}
+function Chevron2({ open }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn(
+        "shrink-0 text-muted-foreground transition-transform duration-150",
+        open && "rotate-180"
+      ),
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "m2.5 4 2.5 2.5L7.5 4" })
+    }
+  );
+}
+function Check() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "shrink-0 text-accent",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "m3 7.5 2.5 2.5L11 4.5" })
+    }
+  );
+}
+function Plus() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "shrink-0",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "M6 2v8M2 6h8" })
+    }
+  );
+}
+function CboxOrgContextBar({
+  LinkComponent,
+  onNavigate
+}) {
+  const cboxId = useCboxIdOptional();
+  if (cboxId === null) {
+    return null;
+  }
+  const { currentOrganization, organizations, urls } = cboxId;
+  const activeOrg = currentOrganization ?? organizations[0] ?? null;
+  if (activeOrg === null) {
+    return null;
+  }
+  const idBase = urls.idBaseUrl.replace(/\/$/, "");
+  const items = organizations.map((org) => ({
+    id: org.slug,
+    label: org.name,
+    avatar: { initials: deriveInitials2(org.name) },
+    current: org.slug === activeOrg.slug,
+    // Cogwheel shortcut → id's org-settings page. Cross-app
+    // deep link; id handles the auth and rendering.
+    settingsHref: `${idBase}/org/${org.slug}/settings`,
+    settingsAriaLabel: `Settings for ${org.name}`
+  }));
+  const onSelect = (slug) => {
+    const org = organizations.find((o) => o.slug === slug);
+    if (org === void 0) return;
+    const path = typeof window !== "undefined" ? window.location.pathname : "/";
+    const next = path.startsWith("/org/") ? path.replace(/^\/org\/[^/]+/, `/org/${org.slug}`) : `/org/${org.slug}`;
+    const search = typeof window !== "undefined" ? window.location.search : "";
+    onNavigate(next + search);
+  };
+  return /* @__PURE__ */ jsx(
+    ContextBar,
+    {
+      LinkComponent,
+      crumbs: [
+        {
+          id: "org",
+          label: activeOrg.name,
+          avatar: { initials: deriveInitials2(activeOrg.name) },
+          items,
+          onSelect,
+          footerLink: {
+            label: "Manage organizations",
+            href: `${idBase}/settings/organizations`
+          },
+          ariaLabel: "Switch organization"
+        }
+      ]
+    }
+  );
+}
+function deriveInitials2(label) {
+  const parts = label.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase();
+  }
+  return (label.slice(0, 2) || "?").toUpperCase();
+}
+function OrgSwitcher({ Trigger = DefaultTrigger, className }) {
+  const { currentOrganization, organizations, onSwitchOrganization } = useCboxId();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const containerRef = useRef(null);
+  const searchRef = useRef(null);
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setActiveIndex(0);
+      const id = requestAnimationFrame(() => searchRef.current?.focus());
+      return () => cancelAnimationFrame(id);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function onPointerDown(event) {
+      if (containerRef.current !== null && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    function onKey(event) {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    }
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (q === "") {
+      return organizations;
+    }
+    return organizations.filter(
+      (org) => org.name.toLowerCase().includes(q) || org.slug.toLowerCase().includes(q)
+    );
+  }, [organizations, query]);
+  useEffect(() => {
+    if (activeIndex >= filtered.length) {
+      setActiveIndex(0);
+    }
+  }, [filtered.length, activeIndex]);
+  const onPick = (org) => {
+    setOpen(false);
+    if (onSwitchOrganization) {
+      onSwitchOrganization(org);
+      return;
+    }
+    if (typeof console !== "undefined") {
+      console.warn(
+        "[cbox-ui] OrgSwitcher: no onSwitchOrganization handler provided. Apps must wire one (router.visit) \u2014 there is no server endpoint to fall back to."
+      );
+    }
+  };
+  function onSearchKeyDown(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (filtered.length === 0) {
+        return;
+      }
+      setActiveIndex((i) => (i + 1) % filtered.length);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (filtered.length === 0) {
+        return;
+      }
+      setActiveIndex((i) => (i - 1 + filtered.length) % filtered.length);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const target = filtered[activeIndex];
+      if (target !== void 0) {
+        onPick(target);
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      Trigger,
+      {
+        organization: currentOrganization,
+        onClick: () => setOpen((v) => !v),
+        open
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "Switch organization",
+        className: "absolute left-0 top-full z-50 mt-1 w-64 overflow-hidden rounded-md border border-border bg-popover shadow-md",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b border-border/70 px-3 pt-2 pb-1", children: /* @__PURE__ */ jsx("p", { className: "text-mono text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase", children: "Switch organization" }) }),
+          /* @__PURE__ */ jsx("div", { className: "border-b border-border/70 px-2 py-1.5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md px-2 py-1 focus-within:bg-secondary", children: [
+            /* @__PURE__ */ jsx(SearchIcon3, {}),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: searchRef,
+                type: "text",
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                onKeyDown: onSearchKeyDown,
+                placeholder: "Filter\u2026",
+                "aria-label": "Filter organizations",
+                autoComplete: "off",
+                spellCheck: false,
+                className: "w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground/60 focus:outline-none"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-[50vh] overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "px-3 py-6 text-center text-[12px] text-muted-foreground", children: [
+            "No organizations match",
+            " ",
+            /* @__PURE__ */ jsxs("span", { className: "text-mono text-foreground", children: [
+              "\u201C",
+              query,
+              "\u201D"
+            ] })
+          ] }) : /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: filtered.map((org, index) => {
+            const active = currentOrganization?.id === org.id;
+            const highlighted = index === activeIndex;
+            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onMouseEnter: () => setActiveIndex(index),
+                onClick: () => onPick(org),
+                className: cn(
+                  "flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm transition-colors",
+                  active ? "bg-accent-soft text-foreground" : highlighted ? "bg-secondary" : "hover:bg-secondary"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: org.name }),
+                  active ? /* @__PURE__ */ jsx("span", { className: "text-mono text-[10px] text-muted-foreground", children: "current" }) : null
+                ]
+              }
+            ) }, org.id);
+          }) }) })
+        ]
+      }
+    ) : null
+  ] });
+}
+var DefaultTrigger = ({ organization, onClick }) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    type: "button",
+    onClick,
+    className: "flex items-center gap-2 rounded-md border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground hover:bg-secondary",
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate max-w-[180px]", children: organization?.name ?? "Pick an organization" }),
+      /* @__PURE__ */ jsx(Chevron3, {})
+    ]
+  }
+);
+function Chevron3() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M2 4l3 3 3-3",
+          stroke: "currentColor",
+          strokeWidth: "1.4",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function SearchIcon3() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      className: "shrink-0 text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "5.25", cy: "5.25", r: "3.25" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 8l2 2" })
+      ]
+    }
+  );
+}
+function TopBar({
+  brand,
+  centre,
+  rightCluster,
+  showOrgSwitcher = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex h-14 shrink-0 items-center gap-3 border-b border-border bg-background px-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          brand,
+          /* @__PURE__ */ jsx(AppSwitcher, {}),
+          showOrgSwitcher ? /* @__PURE__ */ jsx(OrgSwitcher, {}) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: centre }),
+        /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: rightCluster ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(NotificationsBell, {}),
+          /* @__PURE__ */ jsx(UserMenu, {})
+        ] }) })
+      ]
+    }
+  );
+}
+function AppLauncher({ className, onLockedAppClick }) {
+  const cboxId = useCboxIdOptional();
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function onPointerDown(event) {
+      if (containerRef.current !== null && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    function onKey(event) {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    }
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  if (cboxId === null || cboxId.apps.length === 0) {
+    return null;
+  }
+  const apps = cboxId.apps;
+  const orgSlug = cboxId.currentOrganization?.slug;
+  const entitled = [];
+  const locked = [];
+  for (const app of apps) {
+    const isEntitled = app.entitled !== false && app.comingSoon !== true;
+    (isEntitled ? entitled : locked).push(app);
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Open app launcher",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        className: cn(
+          "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+          open && "bg-secondary text-foreground"
+        ),
+        children: /* @__PURE__ */ jsx(Grid, {})
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "Cbox app launcher",
+        className: "absolute right-0 top-full z-50 mt-1.5 w-[min(20rem,calc(100vw-1.5rem))] overflow-hidden rounded-lg border border-border bg-popover shadow-lg",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b border-border/70 px-3 py-2.5", children: /* @__PURE__ */ jsx("p", { className: "text-mono text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase", children: "Cbox suite" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "max-h-[60vh] overflow-y-auto py-1", children: [
+            entitled.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "space-y-0.5 p-1", children: entitled.map((app) => /* @__PURE__ */ jsx(
+              AppRow2,
+              {
+                app,
+                orgSlug,
+                onLockedAppClick
+              },
+              app.key
+            )) }) : null,
+            locked.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              entitled.length > 0 ? /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border/50" }) : null,
+              /* @__PURE__ */ jsx("p", { className: "text-mono px-3 py-1.5 text-[10px] font-semibold tracking-[0.18em] text-muted-foreground/70 uppercase", children: "Available" }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-0.5 p-1 pt-0", children: locked.map((app) => /* @__PURE__ */ jsx(
+                AppRow2,
+                {
+                  app,
+                  orgSlug,
+                  onLockedAppClick
+                },
+                app.key
+              )) })
+            ] }) : null
+          ] })
+        ]
+      }
+    ) : null
+  ] });
+}
+function AppRow2({ app, orgSlug, onLockedAppClick }) {
+  const isComingSoon = app.comingSoon === true;
+  const isLocked = app.entitled === false || isComingSoon;
+  const monogram = app.monogram ?? app.name.slice(0, 1).toUpperCase();
+  const accent = app.accentColor;
+  const tileStyle = accent !== void 0 && app.iconUrl === void 0 ? { backgroundColor: accent, color: "#fff", borderColor: accent } : void 0;
+  const href = orgSlug !== void 0 && app.current !== true ? buildOrgUrl2(app.url, orgSlug) : app.url;
+  const tile = /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: tileStyle,
+      className: cn(
+        "flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-card text-[13px] font-semibold text-foreground",
+        app.current && "ring-2 ring-accent-edge ring-offset-1 ring-offset-popover",
+        isLocked && "opacity-60 grayscale"
+      ),
+      children: app.iconUrl ? /* @__PURE__ */ jsx("img", { src: app.iconUrl, alt: "", className: "h-5 w-5", loading: "lazy" }) : /* @__PURE__ */ jsx("span", { children: monogram })
+    }
+  );
+  const body = /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "truncate text-sm font-medium text-foreground",
+            isLocked && "text-muted-foreground"
+          ),
+          children: app.name
+        }
+      ),
+      app.current ? /* @__PURE__ */ jsx("span", { className: "text-mono shrink-0 rounded-sm border border-accent-edge/40 bg-accent-soft px-1 text-[9px] font-semibold tracking-[0.14em] text-accent uppercase", children: "current" }) : null
+    ] }),
+    app.description ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "truncate text-[11px]",
+          isLocked ? "text-muted-foreground/70" : "text-muted-foreground"
+        ),
+        children: app.description
+      }
+    ) : null
+  ] });
+  const trailing = isComingSoon ? /* @__PURE__ */ jsx("span", { className: "text-mono shrink-0 rounded-sm border border-border bg-secondary px-1.5 py-0.5 text-[9px] font-semibold tracking-[0.14em] text-muted-foreground uppercase", children: "soon" }) : isLocked ? /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1 text-[10px] font-medium text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(Lock2, {}),
+    "Add"
+  ] }) : null;
+  if (isComingSoon) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-disabled": true,
+        className: "flex w-full cursor-not-allowed items-center gap-3 rounded-md px-2.5 py-2",
+        title: `${app.name} \u2014 coming soon`,
+        children: [
+          tile,
+          body,
+          trailing
+        ]
+      }
+    ) });
+  }
+  if (isLocked) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onLockedAppClick?.(app),
+        className: cn(
+          "group flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-left transition-colors",
+          onLockedAppClick !== void 0 ? "hover:bg-secondary" : "cursor-default"
+        ),
+        title: `Add ${app.name} to your plan`,
+        children: [
+          tile,
+          body,
+          trailing
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      className: cn(
+        "group flex w-full items-center gap-3 rounded-md px-2.5 py-2 transition-colors hover:bg-secondary",
+        app.current && "bg-accent-soft hover:bg-accent-soft"
+      ),
+      children: [
+        tile,
+        body,
+        trailing
+      ]
+    }
+  ) });
+}
+function buildOrgUrl2(url, orgSlug) {
+  if (url === "" || orgSlug === "") {
+    return url;
+  }
+  try {
+    const u = new URL(url);
+    u.pathname = `/org/${encodeURIComponent(orgSlug)}`;
+    return u.toString();
+  } catch {
+    return `${url.replace(/\/$/, "")}/org/${encodeURIComponent(orgSlug)}`;
+  }
+}
+function Grid() {
+  return /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, children: [1, 8, 15].flatMap(
+    (y) => [1, 8, 15].map((x) => /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width: "2.5",
+        height: "2.5",
+        rx: "0.6",
+        fill: "currentColor"
+      },
+      `${x}-${y}`
+    ))
+  ) });
+}
+function Lock2() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2.5", y: "5", width: "7", height: "5", rx: "1" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 5V3.5a2 2 0 1 1 4 0V5" })
+      ]
+    }
+  );
+}
+function Combobox(props) {
+  const {
+    items,
+    placeholder = "Select\u2026",
+    searchPlaceholder = "Search\u2026",
+    emptyText = "Nothing matches.",
+    footerLink,
+    disabled = false,
+    required = false,
+    ariaLabel,
+    triggerClassName,
+    panelClassName,
+    triggerWidth = "auto",
+    LinkComponent,
+    id: idProp,
+    className,
+    value
+  } = props;
+  const groups = useMemo(() => normaliseGroups(items), [items]);
+  const flatOptions = useMemo(
+    () => groups.flatMap((g) => g.options),
+    [groups]
+  );
+  const activeOption = useMemo(
+    () => value !== null && value !== void 0 ? flatOptions.find((opt) => opt.value === value) : null,
+    [flatOptions, value]
+  );
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [highlightIndex, setHighlightIndex] = useState(-1);
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const reactId = useId();
+  const id = idProp ?? reactId;
+  const listId = `${id}-listbox`;
+  const filteredGroups = useMemo(
+    () => filterGroups(groups, query),
+    [groups, query]
+  );
+  const filteredFlat = useMemo(
+    () => filteredGroups.flatMap((g) => g.options),
+    [filteredGroups]
+  );
+  useEffect(() => {
+    if (!open) return;
+    const firstEnabled = filteredFlat.findIndex(
+      (opt) => opt.disabled !== true
+    );
+    setHighlightIndex(firstEnabled);
+  }, [filteredFlat, open]);
+  useEffect(() => {
+    if (open) {
+      const id2 = window.setTimeout(() => inputRef.current?.focus(), 0);
+      return () => window.clearTimeout(id2);
+    }
+    setQuery("");
+    return void 0;
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(event) {
+      if (containerRef.current !== null && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => window.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  const onSelectOption = useCallback(
+    (opt) => {
+      if (opt.disabled === true) return;
+      if (opt.href !== void 0 && LinkComponent !== void 0 && props.onChange === void 0) {
+        setOpen(false);
+        return;
+      }
+      if (props.onChange !== void 0) {
+        props.onChange(opt.value);
+      }
+      setOpen(false);
+    },
+    [LinkComponent, props]
+  );
+  const onKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setHighlightIndex(
+          (current) => nextEnabledIndex(filteredFlat, current, 1)
+        );
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setHighlightIndex(
+          (current) => nextEnabledIndex(filteredFlat, current, -1)
+        );
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        setHighlightIndex(
+          filteredFlat.findIndex((o) => o.disabled !== true)
+        );
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        let last = -1;
+        for (let i = 0; i < filteredFlat.length; i++) {
+          const opt = filteredFlat[i];
+          if (opt !== void 0 && opt.disabled !== true) {
+            last = i;
+          }
+        }
+        setHighlightIndex(last);
+        return;
+      }
+      if (event.key === "Enter") {
+        if (highlightIndex >= 0) {
+          event.preventDefault();
+          const opt = filteredFlat[highlightIndex];
+          if (opt !== void 0) {
+            onSelectOption(opt);
+          }
+        }
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setOpen(false);
+        return;
+      }
+      if (event.key === "Tab") {
+        setOpen(false);
+        return;
+      }
+    },
+    [filteredFlat, highlightIndex, onSelectOption]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative", triggerWidth === "full" && "w-full", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id,
+            type: "button",
+            role: "combobox",
+            disabled,
+            "aria-expanded": open,
+            "aria-haspopup": "listbox",
+            "aria-controls": listId,
+            "aria-required": required,
+            "aria-label": ariaLabel,
+            onClick: () => setOpen((v) => !v),
+            className: cn(
+              "flex h-9 items-center gap-2 rounded-md border border-input bg-card px-3 text-left text-[13px] text-foreground transition-colors",
+              triggerWidth === "full" && "w-full",
+              "hover:border-border-strong focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+              open && "border-border-strong ring-2 ring-ring/30",
+              disabled && "cursor-not-allowed opacity-60",
+              triggerClassName
+            ),
+            children: [
+              activeOption?.avatar !== void 0 ? /* @__PURE__ */ jsx(
+                ComboboxAvatarChip,
+                {
+                  avatar: activeOption.avatar,
+                  fallbackLabel: activeOption.label
+                }
+              ) : activeOption?.icon !== void 0 ? /* @__PURE__ */ jsx(
+                activeOption.icon,
+                {
+                  className: "h-3.5 w-3.5 shrink-0 text-muted-foreground",
+                  strokeWidth: 1.7
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex-1 truncate",
+                    activeOption === null || activeOption === void 0 ? "text-muted-foreground" : ""
+                  ),
+                  children: activeOption !== null && activeOption !== void 0 ? activeOption.label : placeholder
+                }
+              ),
+              /* @__PURE__ */ jsx(Chevron4, { open })
+            ]
+          }
+        ),
+        open ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute left-0 right-0 top-full z-30 mt-1 overflow-hidden rounded-md border border-border bg-popover shadow-lg",
+              panelClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "border-b border-border/60 px-2 py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx(SearchIcon4, {}),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value),
+                    onKeyDown,
+                    placeholder: searchPlaceholder,
+                    className: "h-8 w-full rounded-sm border-0 bg-transparent pl-7 pr-2 text-[13px] outline-none placeholder:text-muted-foreground/70",
+                    "aria-controls": listId,
+                    "aria-autocomplete": "list",
+                    "aria-activedescendant": highlightIndex >= 0 ? `${listId}-${highlightIndex}` : void 0
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  id: listId,
+                  ref: listRef,
+                  role: "listbox",
+                  className: "max-h-72 overflow-y-auto py-1",
+                  children: filteredFlat.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-6 text-center text-[13px] text-muted-foreground", children: emptyText }) : filteredGroups.map((group, groupIndex) => /* @__PURE__ */ jsx(
+                    ComboboxGroupRows,
+                    {
+                      group,
+                      flatOptions: filteredFlat,
+                      listId,
+                      highlightIndex,
+                      activeValue: value ?? null,
+                      LinkComponent,
+                      onSelect: onSelectOption,
+                      onHover: (idx) => setHighlightIndex(idx)
+                    },
+                    group.label || `group-${groupIndex}`
+                  ))
+                }
+              ),
+              footerLink !== void 0 ? /* @__PURE__ */ jsx(
+                FooterLink,
+                {
+                  label: footerLink.label,
+                  href: footerLink.href,
+                  LinkComponent,
+                  onAfterClick: () => setOpen(false)
+                }
+              ) : null
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ComboboxGroupRows({
+  group,
+  flatOptions,
+  listId,
+  highlightIndex,
+  activeValue,
+  LinkComponent,
+  onSelect,
+  onHover
+}) {
+  if (group.options.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    group.label !== "" ? /* @__PURE__ */ jsx(
+      "li",
+      {
+        role: "presentation",
+        className: "text-mono px-3 pt-2 pb-1 text-[10px] font-semibold tracking-[0.18em] text-muted-foreground/70 uppercase",
+        children: group.label
+      }
+    ) : null,
+    group.options.map((opt) => {
+      const flatIndex = flatOptions.indexOf(opt);
+      const isHighlighted = flatIndex === highlightIndex;
+      const isActive = opt.value === activeValue;
+      const inner = /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-2.5 px-2.5 py-2", children: [
+        opt.avatar !== void 0 ? /* @__PURE__ */ jsx(
+          ComboboxAvatarChip,
+          {
+            avatar: opt.avatar,
+            fallbackLabel: opt.label
+          }
+        ) : opt.icon !== void 0 ? /* @__PURE__ */ jsx(
+          opt.icon,
+          {
+            className: "h-3.5 w-3.5 shrink-0 text-muted-foreground",
+            strokeWidth: 1.7
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] font-medium text-foreground", children: opt.label }),
+          opt.secondary !== void 0 ? /* @__PURE__ */ jsx("span", { className: "text-mono truncate text-[10px] text-muted-foreground", children: opt.secondary }) : null
+        ] }),
+        isActive ? /* @__PURE__ */ jsx(Check2, {}) : null
+      ] });
+      const className = cn(
+        "group block w-full rounded-sm transition-colors text-left",
+        opt.disabled === true && "cursor-not-allowed opacity-50",
+        isHighlighted && opt.disabled !== true && "bg-secondary",
+        isActive && "bg-accent-soft hover:bg-accent-soft/80"
+      );
+      if (opt.href !== void 0 && LinkComponent !== void 0) {
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            id: `${listId}-${flatIndex}`,
+            role: "option",
+            "aria-selected": isActive,
+            "aria-disabled": opt.disabled === true,
+            onMouseEnter: () => onHover(flatIndex),
+            children: /* @__PURE__ */ jsx(
+              LinkComponent,
+              {
+                href: opt.href,
+                prefetch: true,
+                className,
+                children: inner
+              }
+            )
+          },
+          opt.value
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "li",
+        {
+          id: `${listId}-${flatIndex}`,
+          role: "option",
+          "aria-selected": isActive,
+          "aria-disabled": opt.disabled === true,
+          onMouseEnter: () => onHover(flatIndex),
+          children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: opt.disabled === true,
+              onClick: () => onSelect(opt),
+              className,
+              children: inner
+            }
+          )
+        },
+        opt.value
+      );
+    })
+  ] });
+}
+function FooterLink({
+  label,
+  href,
+  LinkComponent,
+  onAfterClick
+}) {
+  const className = "flex items-center gap-2 border-t border-border/60 px-3 py-2.5 text-[13px] font-medium text-info transition-colors hover:bg-info-soft";
+  if (LinkComponent !== void 0) {
+    return /* @__PURE__ */ jsxs(
+      LinkComponent,
+      {
+        href,
+        prefetch: true,
+        className,
+        children: [
+          /* @__PURE__ */ jsx(Plus2, {}),
+          /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      className,
+      onClick: onAfterClick,
+      children: [
+        /* @__PURE__ */ jsx(Plus2, {}),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+function ComboboxAvatarChip({
+  avatar,
+  fallbackLabel
+}) {
+  const initials = avatar.initials ?? deriveInitials3(fallbackLabel);
+  const style = avatar.src === void 0 && avatar.accent !== void 0 ? { backgroundColor: avatar.accent, color: "#fff" } : void 0;
+  if (avatar.src !== void 0) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: avatar.src,
+        alt: "",
+        className: "h-5 w-5 shrink-0 rounded-sm bg-secondary object-cover",
+        loading: "lazy"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style,
+      className: cn(
+        "flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-[9px] font-semibold tracking-tight",
+        avatar.accent === void 0 && "bg-info-soft text-info"
+      ),
+      children: initials
+    }
+  );
+}
+function deriveInitials3(label) {
+  const parts = label.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase();
+  }
+  return (label.slice(0, 2) || "?").toUpperCase();
+}
+function normaliseGroups(items) {
+  if (items.length === 0) return [];
+  const first = items[0];
+  if (first !== void 0 && "options" in first) {
+    return items;
+  }
+  return [{ label: "", options: items }];
+}
+function filterGroups(groups, query) {
+  const q = query.trim().toLowerCase();
+  if (q === "") return groups;
+  return groups.map((group) => ({
+    label: group.label,
+    options: group.options.filter((opt) => matchesQuery(opt, q))
+  })).filter((group) => group.options.length > 0);
+}
+function matchesQuery(option, q) {
+  const haystack = [
+    option.label,
+    option.secondary ?? "",
+    ...option.keywords ?? []
+  ].join(" ").toLowerCase();
+  return haystack.includes(q);
+}
+function nextEnabledIndex(options, current, direction) {
+  const total = options.length;
+  if (total === 0) return -1;
+  let i = current;
+  for (let step = 0; step < total; step++) {
+    i = (i + direction + total) % total;
+    const opt = options[i];
+    if (opt !== void 0 && opt.disabled !== true) {
+      return i;
+    }
+  }
+  return -1;
+}
+function Chevron4({ open }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      className: cn(
+        "shrink-0 text-muted-foreground transition-transform duration-150",
+        open && "rotate-180"
+      ),
+      children: /* @__PURE__ */ jsx("path", { d: "m3.5 5.5 3.5 3.5 3.5-3.5" })
+    }
+  );
+}
+function Check2() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "shrink-0 text-accent",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "m3 7.5 2.5 2.5L11 4.5" })
+    }
+  );
+}
+function Plus2() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "shrink-0",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "M6 2v8M2 6h8" })
+    }
+  );
+}
+function SearchIcon4() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "pointer-events-none absolute left-1.5 top-1/2 -translate-y-1/2 text-muted-foreground",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "4.25" }),
+        /* @__PURE__ */ jsx("path", { d: "m11.5 11.5-2.5-2.5" })
+      ]
+    }
+  );
+}
+function DataPanel({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "rounded-lg border border-border bg-card text-card-foreground shadow-[0_1px_2px_rgba(0,0,0,0.02)]",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function SectionHeader({
+  title,
+  description,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex flex-col gap-3 border-b border-border px-5 py-4 sm:flex-row sm:items-center sm:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-[15px] leading-none font-semibold text-foreground", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+        ] }),
+        actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
+      ]
+    }
+  );
+}
+function PanelBody({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-5 py-4", className), ...rest, children });
+}
+function Heading({
+  title,
+  description,
+  variant = "default"
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: variant === "small" ? "" : "mb-8 space-y-0.5", children: [
+    /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: variant === "small" ? "mb-0.5 text-base font-medium" : "text-xl font-semibold tracking-tight",
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+  ] });
+}
+function KeyValue({
+  label,
+  children,
+  mono = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-[140px_1fr] items-baseline gap-x-6 border-b border-border py-3 last:border-b-0",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-eyebrow text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            className: cn(
+              "text-sm break-all text-foreground",
+              mono && "text-mono text-[13px]"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function KeyValueList({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("dl", { className: cn("px-6", className), children });
+}
+function PageHeader({
+  title,
+  eyebrow,
+  description,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          eyebrow !== void 0 ? /* @__PURE__ */ jsx("p", { className: "text-mono text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase", children: eyebrow }) : null,
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl leading-tight font-semibold tracking-tight text-foreground", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+        ] }),
+        actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+      ]
+    }
+  );
+}
+var widthClass = {
+  comfortable: "max-w-6xl px-6 py-8 lg:px-10 lg:py-10",
+  wide: "max-w-7xl px-6 py-8 lg:px-10 lg:py-10",
+  full: "max-w-none px-6 py-8 lg:px-10 lg:py-10",
+  bleed: "max-w-none p-0"
+};
+function PageShell({
+  children,
+  width = "comfortable",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mx-auto w-full space-y-6",
+        widthClass[width],
+        className
+      ),
+      children
+    }
+  );
+}
+var DefaultLink2 = ({ href, className, children, "aria-current": ariaCurrent }) => /* @__PURE__ */ jsx("a", { href, className, "aria-current": ariaCurrent, children });
+function PageTabs({
+  items,
+  currentPath,
+  LinkComponent = DefaultLink2,
+  actions,
+  className
+}) {
+  const activeHref = resolveActiveHref(items, currentPath);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-component": "page-tabs",
+      className: cn(
+        // Card-style chrome — same border, radius, bg as DataPanel
+        // so the tab strip reads as a peer of the content panels
+        // beneath it instead of floating on the page background.
+        // Width matches PageShell content; no sticky positioning.
+        "rounded-lg border border-border bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "hidden items-end gap-3 px-3 sm:flex", children: [
+          /* @__PURE__ */ jsx(
+            DesktopStrip,
+            {
+              items,
+              activeHref,
+              LinkComponent
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex min-h-12 shrink-0 items-center gap-2", children: actions })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-3 sm:hidden", children: [
+          /* @__PURE__ */ jsx(
+            MobileDropdown,
+            {
+              items,
+              activeHref,
+              LinkComponent
+            }
+          ),
+          actions !== void 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null
+        ] })
+      ]
+    }
+  );
+}
+function DesktopStrip({ items, activeHref, LinkComponent }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: "flex min-h-12 flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden py-1.5",
+      role: "tablist",
+      "aria-label": "Section navigation",
+      children: items.map((item) => {
+        const Icon = item.icon;
+        const active = item.href === activeHref;
+        return /* @__PURE__ */ jsxs(
+          LinkComponent,
+          {
+            href: item.href,
+            prefetch: true,
+            "aria-current": active ? "page" : void 0,
+            className: cn(
+              "inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 text-[13px] whitespace-nowrap transition-colors",
+              active ? "bg-secondary font-semibold text-foreground shadow-sm ring-1 ring-border-strong/60" : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
+            ),
+            children: [
+              Icon !== void 0 ? /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  className: cn(
+                    "h-3.5 w-3.5 shrink-0",
+                    active ? "text-foreground" : "text-muted-foreground"
+                  ),
+                  strokeWidth: 1.7
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("span", { children: item.label }),
+              /* @__PURE__ */ jsx(ItemTrailing, { item, active })
+            ]
+          },
+          item.href
+        );
+      })
+    }
+  );
+}
+function MobileDropdown({ items, activeHref, LinkComponent }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const listId = useId();
+  const active = items.find((item) => item.href === activeHref) ?? items[0];
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(event) {
+      if (ref.current !== null && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    function onKey(event) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  if (active === void 0) {
+    return null;
+  }
+  const ActiveIcon = active.icon;
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": listId,
+        className: cn(
+          "flex w-full min-h-11 items-center justify-between gap-2 rounded-md border border-border bg-card px-3 text-left text-[13px] font-medium text-foreground transition-colors hover:border-border-strong",
+          open && "border-border-strong ring-2 ring-ring/30"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+            ActiveIcon !== void 0 ? /* @__PURE__ */ jsx(
+              ActiveIcon,
+              {
+                className: "h-3.5 w-3.5 shrink-0 text-muted-foreground",
+                strokeWidth: 1.7
+              }
+            ) : null,
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: active.label }),
+            /* @__PURE__ */ jsx(ItemTrailing, { item: active, active: true })
+          ] }),
+          /* @__PURE__ */ jsx(Chevron5, { open })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "ul",
+      {
+        id: listId,
+        role: "listbox",
+        "aria-label": "Section navigation",
+        className: "absolute left-0 right-0 top-full z-30 mt-1 overflow-hidden rounded-md border border-border bg-popover shadow-lg",
+        children: items.map((item) => {
+          const Icon = item.icon;
+          const isActive = item.href === activeHref;
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            LinkComponent,
+            {
+              href: item.href,
+              prefetch: true,
+              "aria-current": isActive ? "page" : void 0,
+              className: cn(
+                "flex w-full items-center gap-2 px-3 py-2.5 text-[13px] transition-colors",
+                isActive ? "bg-accent-soft font-semibold text-foreground" : "text-muted-foreground hover:bg-secondary hover:text-foreground"
+              ),
+              children: [
+                Icon !== void 0 ? /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    className: cn(
+                      "h-3.5 w-3.5 shrink-0",
+                      isActive ? "text-foreground" : "text-muted-foreground"
+                    ),
+                    strokeWidth: 1.7
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+                /* @__PURE__ */ jsx(
+                  ItemTrailing,
+                  {
+                    item,
+                    active: isActive
+                  }
+                )
+              ]
+            }
+          ) }, item.href);
+        })
+      }
+    ) : null
+  ] });
+}
+function ItemTrailing({
+  item,
+  active
+}) {
+  if (item.badge !== void 0) {
+    return /* @__PURE__ */ jsx("span", { className: "ml-1 shrink-0", children: item.badge });
+  }
+  if (item.count !== void 0) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "ml-1 shrink-0 rounded-sm border px-1 text-[10px] font-semibold tracking-tight tabular-nums",
+          active ? "border-border-strong bg-secondary text-foreground" : "border-border bg-secondary/60 text-muted-foreground"
+        ),
+        children: item.count
+      }
+    );
+  }
+  return null;
+}
+function Chevron5({ open }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn(
+        "shrink-0 text-muted-foreground transition-transform duration-150",
+        open && "rotate-180"
+      ),
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "m3.5 5.5 3.5 3.5 3.5-3.5" })
+    }
+  );
+}
+function pathOnly(href) {
+  const queryIndex = href.indexOf("?");
+  const hashIndex = href.indexOf("#");
+  let end = href.length;
+  if (queryIndex !== -1) end = Math.min(end, queryIndex);
+  if (hashIndex !== -1) end = Math.min(end, hashIndex);
+  return href.slice(0, end);
+}
+function resolveActiveHref(items, currentPath) {
+  const current = pathOnly(currentPath);
+  const candidates = items.map((item) => {
+    const itemPath = pathOnly(item.href);
+    const matched = item.matchPrefix === true ? current === itemPath || current.startsWith(itemPath + "/") : current === itemPath;
+    return matched ? item.href : null;
+  }).filter((href) => href !== null);
+  if (candidates.length === 0) return null;
+  return candidates.reduce(
+    (longest, href) => href.length > longest.length ? href : longest
+  );
+}
+var DefaultLink3 = ({ href, className, children }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function RowLink({
+  href,
+  children,
+  trailing,
+  LinkComponent = DefaultLink3,
+  active = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    LinkComponent,
+    {
+      href,
+      prefetch: true,
+      className: cn(
+        "group flex w-full items-center gap-4 px-5 py-3.5 transition-colors focus-visible:bg-secondary/60 focus-visible:outline-none",
+        active ? "bg-accent-soft hover:bg-accent-soft/80" : "hover:bg-secondary/60",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          "data-component": "row-link",
+          "data-active": active ? "true" : void 0,
+          onClickCapture: (event) => {
+            const target = event.target;
+            if (target.closest(
+              'button, a, input, select, textarea, [role="button"], [data-stop-row-click]'
+            ) !== null && target.closest("[data-row-body]") === null) {
+              event.stopPropagation();
+            }
+          },
+          className: "flex w-full items-center gap-4",
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-row-body": true,
+                className: "flex min-w-0 flex-1 items-center gap-4",
+                children
+              }
+            ),
+            trailing !== void 0 ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center gap-2", children: trailing }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+var toneStyles2 = {
+  info: { bg: "bg-info-soft", fg: "text-info" },
+  success: { bg: "bg-success-soft", fg: "text-success" },
+  warning: { bg: "bg-warning-soft", fg: "text-warning" },
+  destructive: { bg: "bg-destructive-soft", fg: "text-destructive" },
+  neutral: { bg: "bg-secondary", fg: "text-foreground" }
+};
+function StatTile({
+  label,
+  value,
+  suffix,
+  icon: Icon,
+  tone = "info",
+  className
+}) {
+  const styles = toneStyles2[tone];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 rounded-lg border border-border bg-card p-4 shadow-[0_1px_2px_rgba(0,0,0,0.02)] transition-colors hover:border-border-strong",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-10 w-10 shrink-0 items-center justify-center rounded-md",
+              styles.bg
+            ),
+            children: /* @__PURE__ */ jsx(Icon, { className: cn("h-5 w-5", styles.fg), strokeWidth: 1.8 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "tabular text-2xl leading-none font-semibold tracking-tight text-foreground", children: value }),
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: label }),
+          suffix ? /* @__PURE__ */ jsx("p", { className: "text-mono truncate text-[10px] text-muted-foreground/80", children: suffix }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/utils/url-state.ts
+function urlString(defaultValue = "") {
+  return {
+    parse: (raw) => raw ?? defaultValue,
+    serialize: (value) => value === "" ? null : value,
+    isDefault: (value) => value === defaultValue
+  };
+}
+function urlNumber(defaultValue, options = {}) {
+  const clamp = (n) => {
+    if (options.min !== void 0 && n < options.min) return options.min;
+    if (options.max !== void 0 && n > options.max) return options.max;
+    return n;
+  };
+  return {
+    parse: (raw) => {
+      if (raw === null) return defaultValue;
+      const parsed = Number.parseInt(raw, 10);
+      if (Number.isNaN(parsed)) return defaultValue;
+      return clamp(parsed);
+    },
+    serialize: (value) => String(value),
+    isDefault: (value) => value === defaultValue
+  };
+}
+function urlEnum(values, defaultValue) {
+  const allowed = new Set(values);
+  return {
+    parse: (raw) => raw !== null && allowed.has(raw) ? raw : defaultValue,
+    serialize: (value) => value,
+    isDefault: (value) => value === defaultValue
+  };
+}
+function urlBoolean(defaultValue = false) {
+  return {
+    parse: (raw) => raw === null ? defaultValue : raw === "true",
+    serialize: (value) => value ? "true" : "false",
+    isDefault: (value) => value === defaultValue
+  };
+}
+function urlStringArray(defaultValue = []) {
+  const defaultKey = [...defaultValue].sort().join(",");
+  return {
+    parse: (raw) => {
+      if (raw === null || raw === "") return [...defaultValue];
+      return raw.split(",").filter((item) => item !== "");
+    },
+    serialize: (value) => value.length === 0 ? null : value.join(","),
+    isDefault: (value) => [...value].sort().join(",") === defaultKey
+  };
+}
+function defineUrlSchema(schema) {
+  return schema;
+}
+function parseUrlSearch(search, schema) {
+  const normalised = search.startsWith("?") ? search.slice(1) : search;
+  const params = new URLSearchParams(normalised);
+  const state = {};
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    if (field === void 0) continue;
+    state[key] = field.parse(params.get(key));
+  }
+  return state;
+}
+function buildUrlSearch(state, schema) {
+  const params = new URLSearchParams();
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    if (field === void 0) continue;
+    const value = state[key];
+    if (field.isDefault(value)) continue;
+    const serialized = field.serialize(value);
+    if (serialized !== null) {
+      params.set(key, serialized);
+    }
+  }
+  return params.toString();
+}
+
+export { AppContent, AppLauncher, AppShell, AppSwitcher, CboxAppShell, CboxAppSidebar, CboxBrand, CboxIdProvider, CboxMobileNavDrawer, CboxOrgContextBar, CboxSurfaces, Combobox, ContextAvatarChip, ContextBar, DataPanel, EmptyState, Heading, KeyValue, KeyValueList, NotificationsBell, OrgSwitcher, PageHeader, PageShell, PageTabs, PanelBody, RowLink, SearchTrigger, SectionHeader, StatTile, StatusPill, TopBar, UserMenu, buildUrlSearch, cn, defineUrlSchema, parseUrlSearch, urlBoolean, urlEnum, urlNumber, urlString, urlStringArray, useCboxId, useCboxIdOptional, useCboxSurfaces, useCboxSurfacesOptional };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map