@cboxdk/cbox-ui 0.6.0 → 0.7.0

package/dist/index.js

@@ -1,10 +1,9 @@
-import { createContext, useContext, useEffect, useState, useRef, useMemo, useCallback, useId } from 'react';
+import { cn } from './chunk-OFTNLF7H.js';
+export { cn, niceTicks, timeTicks } from './chunk-OFTNLF7H.js';
+import { createContext, useContext, useMemo, useEffect, useState, useRef, 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';
+import { X, Menu, PanelLeftOpen, PanelLeftClose, PinOff, Pin } from 'lucide-react';
 
-// src/context/cbox-id.tsx
 var CboxIdContext = createContext(null);
 function CboxIdProvider({
   value,
@@ -24,9 +23,6 @@ function useCboxId() {
 function useCboxIdOptional() {
   return useContext(CboxIdContext);
 }
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function AppContent({ children, className, ...props }) {
   return /* @__PURE__ */ jsx(
     "main",
@@ -43,6 +39,27 @@ function AppContent({ children, className, ...props }) {
 function AppShell({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "flex h-svh w-full bg-canvas text-foreground", children });
 }
+var Localization = createContext({
+  locale: "en",
+  t: interpolate,
+  formatDate: (value) => new Date(value).toLocaleString()
+});
+function interpolate(message, values = {}) {
+  return message.replace(
+    /\{([a-zA-Z][a-zA-Z0-9_]*)\}/g,
+    (match, key) => Object.prototype.hasOwnProperty.call(values, key) ? String(values[key]) : match
+  );
+}
+function CboxLocalizationProvider({ locale, translate, formatDate = defaultDate, children }) {
+  const value = useMemo(() => ({ locale, t: translate, formatDate }), [locale, translate, formatDate]);
+  return /* @__PURE__ */ jsx(Localization.Provider, { value, children });
+}
+function useCboxLocalization() {
+  return useContext(Localization);
+}
+function defaultDate(value) {
+  return new Date(value).toLocaleString();
+}
 function CboxBrand({
   appKey,
   submark,
@@ -84,14 +101,17 @@ function CboxBrand({
             draggable: false
           }
         ),
-        submarkText !== null && submarkText !== "" ? /* @__PURE__ */ jsx(
+        submarkText !== null && submarkText !== "" ? /* @__PURE__ */ jsxs(
           "span",
           {
             className: cn(
-              "text-mono text-[10px] font-semibold tracking-[0.22em] uppercase",
+              "text-[13px] font-semibold whitespace-nowrap",
               tone === "light" ? "text-white/60" : "text-muted-foreground/80"
             ),
-            children: submarkText
+            children: [
+              "\xB7 ",
+              submarkText
+            ]
           }
         ) : null
       ]
@@ -109,6 +129,7 @@ function CboxAppSidebar({
   collapsed = false,
   className
 }) {
+  const { t } = useCboxLocalization();
   return /* @__PURE__ */ jsxs(
     "aside",
     {
@@ -124,7 +145,7 @@ function CboxAppSidebar({
           LinkComponent,
           {
             href: brandHref,
-            "aria-label": "Home",
+            "aria-label": t("Home"),
             className: cn(
               "flex h-14 shrink-0 items-center border-b border-sidebar-border/70",
               collapsed ? "justify-center px-0" : "px-4"
@@ -197,6 +218,7 @@ function CboxMobileNavDrawer({
   currentPath,
   LinkComponent
 }) {
+  const { t } = useCboxLocalization();
   useEffect(() => {
     if (!open) {
       return;
@@ -238,7 +260,7 @@ function CboxMobileNavDrawer({
           {
             role: "dialog",
             "aria-modal": "true",
-            "aria-label": "Navigation",
+            "aria-label": t("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"
@@ -249,7 +271,7 @@ function CboxMobileNavDrawer({
                   LinkComponent,
                   {
                     href: brandHref,
-                    "aria-label": "Home",
+                    "aria-label": t("Home"),
                     className: "flex items-center",
                     children: /* @__PURE__ */ jsx(
                       CboxBrand,
@@ -267,7 +289,7 @@ function CboxMobileNavDrawer({
                   {
                     type: "button",
                     onClick: onClose,
-                    "aria-label": "Close navigation",
+                    "aria-label": t("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 })
                   }
@@ -314,6 +336,7 @@ function CboxMobileNavDrawer({
   );
 }
 function AppSwitcher({ className, onLockedAppClick }) {
+  const { t } = useCboxLocalization();
   const cboxId = useCboxIdOptional();
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
@@ -396,7 +419,7 @@ function AppSwitcher({ className, onLockedAppClick }) {
     }
   }, [navigableHrefs.length, activeIndex]);
   const triggerMonogram = currentApp?.monogram ?? currentApp?.name.slice(0, 1).toUpperCase() ?? "\u2B1B";
-  const triggerName = currentApp?.name ?? "Apps";
+  const triggerName = currentApp?.name ?? t("Apps");
   const triggerAccent = currentApp?.accentColor;
   function onSearchKeyDown(event) {
     if (event.key === "ArrowDown") {
@@ -470,10 +493,10 @@ function AppSwitcher({ className, onLockedAppClick }) {
       "div",
       {
         role: "dialog",
-        "aria-label": "Switch app",
+        "aria-label": t("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-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: t("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(
@@ -484,8 +507,8 @@ function AppSwitcher({ className, onLockedAppClick }) {
                 value: query,
                 onChange: (e) => setQuery(e.target.value),
                 onKeyDown: onSearchKeyDown,
-                placeholder: "Filter apps\u2026",
-                "aria-label": "Filter apps",
+                placeholder: t("Filter apps\u2026"),
+                "aria-label": t("Filter apps"),
                 autoComplete: "off",
                 spellCheck: false,
                 className: "w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground/60 focus:outline-none"
@@ -493,15 +516,7 @@ function AppSwitcher({ className, onLockedAppClick }) {
             )
           ] }) }),
           /* @__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,
+            totalMatches === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-[12px] text-muted-foreground", children: t("No apps match \u201C{query}\u201D", { query }) }) : 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(
@@ -523,7 +538,7 @@ function AppSwitcher({ className, onLockedAppClick }) {
             }) }) : 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("p", { className: "text-mono px-3 py-1.5 text-[10px] font-semibold tracking-[0.18em] text-muted-foreground/70 uppercase", children: t("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(
@@ -561,6 +576,7 @@ function AppRow({
   onLockedAppClick,
   onNavigate
 }) {
+  const { t } = useCboxLocalization();
   const isComingSoon = app.comingSoon === true;
   const isLocked = app.entitled === false || isComingSoon;
   const monogram = app.monogram ?? app.name.slice(0, 1).toUpperCase();
@@ -591,7 +607,7 @@ function AppRow({
           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.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: t("current") }) : null
     ] }),
     app.description ? /* @__PURE__ */ jsx(
       "span",
@@ -604,9 +620,9 @@ function AppRow({
       }
     ) : 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: [
+  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: t("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"
+    t("Add")
   ] }) : null;
   if (isComingSoon) {
     return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
@@ -614,7 +630,7 @@ function AppRow({
       {
         "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`,
+        title: t("{name} \u2014 coming soon", { name: app.name }),
         children: [
           tile,
           body,
@@ -638,7 +654,7 @@ function AppRow({
           highlighted && "bg-secondary",
           onLockedAppClick !== void 0 ? "hover:bg-secondary" : "cursor-default"
         ),
-        title: `Add ${app.name} to your plan`,
+        title: t("Add {name} to your plan", { name: app.name }),
         children: [
           tile,
           body,
@@ -832,6 +848,7 @@ function SurfaceModal({
   size = "wide",
   children
 }) {
+  const { t } = useCboxLocalization();
   const dialogRef = useRef(null);
   const previousFocusRef = useRef(null);
   useEffect(() => {
@@ -928,7 +945,7 @@ function SurfaceModal({
                   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",
+                  "aria-label": t("Close"),
                   children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", strokeWidth: 1.8 })
                 }
               )
@@ -947,6 +964,7 @@ var TONES = {
   critical: "destructive"
 };
 function InboxSurface({ open, onClose }) {
+  const { t, formatDate } = useCboxLocalization();
   const transport = useTransport();
   const cboxId = useCboxIdOptional();
   const [inbox, setInbox] = useState(null);
@@ -974,7 +992,7 @@ function InboxSurface({ open, onClose }) {
         if (!cancelled) setInbox(body);
       } catch (e) {
         if (!cancelled) {
-          setError(e instanceof Error ? e.message : "Load failed");
+          setError(e instanceof Error ? e.message : t("Load failed"));
         }
       } finally {
         if (!cancelled) setLoading(false);
@@ -1025,15 +1043,15 @@ function InboxSurface({ open, onClose }) {
     {
       open,
       onClose,
-      eyebrow: "Notifications",
-      title: unread > 0 ? `Inbox \xB7 ${unread} unread` : "Inbox \xB7 all caught up",
+      eyebrow: t("Notifications"),
+      title: unread > 0 ? t("Inbox \xB7 {count} unread", { count: unread }) : t("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"
+            children: t("All")
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1041,18 +1059,12 @@ function InboxSurface({ open, onClose }) {
           {
             active: filter === "unread",
             onClick: () => setFilter("unread"),
-            children: "Unread"
+            children: t("Unread")
           }
         )
       ] }),
       footer: inbox !== null && baseUrl !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("span", { children: [
-          "Showing ",
-          filtered.length,
-          " of ",
-          items.length,
-          "."
-        ] }),
+        /* @__PURE__ */ jsx("span", { children: t("Showing {shown} of {total}.", { shown: filtered.length, total: items.length }) }),
         /* @__PURE__ */ jsx(
           "a",
           {
@@ -1060,18 +1072,18 @@ function InboxSurface({ open, onClose }) {
             target: "_blank",
             rel: "noreferrer",
             className: "font-medium text-foreground hover:underline",
-            children: "Open in new tab \u2197"
+            children: t("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: "text-sm font-medium text-destructive", children: t("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(
+      ] }) : loading && inbox === null ? /* @__PURE__ */ jsx("div", { className: "px-5 py-12 text-center text-sm text-muted-foreground", children: t("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."
+          title: filter === "unread" ? t("No unread notifications") : t("No notifications yet"),
+          description: t("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 ?? {};
@@ -1105,9 +1117,7 @@ function InboxSurface({ open, onClose }) {
                 /* @__PURE__ */ jsxs("p", { className: "text-mono mt-1 text-[10px] text-muted-foreground", children: [
                   item.event_type,
                   " \xB7 ",
-                  new Date(
-                    item.created_at
-                  ).toLocaleString()
+                  formatDate(item.created_at)
                 ] })
               ] }),
               item.read_at === null ? /* @__PURE__ */ jsx(
@@ -1120,8 +1130,8 @@ function InboxSurface({ open, onClose }) {
                     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"
+                  "aria-label": t("Mark as read"),
+                  children: t("Mark read")
                 }
               ) : null
             ] }) })
@@ -1225,6 +1235,7 @@ function useTransport() {
   return t;
 }
 function NotificationsBell({ className }) {
+  const { t, formatDate } = useCboxLocalization();
   const ctx = useCboxIdOptional();
   const surfaces = useCboxSurfacesOptional();
   const [open, setOpen] = useState(false);
@@ -1256,7 +1267,7 @@ function NotificationsBell({ className }) {
       "button",
       {
         type: "button",
-        "aria-label": "Notifications",
+        "aria-label": t("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, {})
@@ -1271,7 +1282,7 @@ function NotificationsBell({ className }) {
       {
         type: "button",
         onClick: () => setOpen((v) => !v),
-        "aria-label": unreadCount > 0 ? `${unreadCount} unread notifications` : "Notifications",
+        "aria-label": unreadCount > 0 ? t("{count} unread notifications", { count: unreadCount }) : t("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",
@@ -1289,15 +1300,12 @@ function NotificationsBell({ className }) {
         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("span", { className: "text-mono text-[10px] font-semibold tracking-[0.18em] uppercase text-muted-foreground", children: t("Notifications") }),
+            unreadCount > 0 ? /* @__PURE__ */ jsx("span", { className: "text-mono text-[10px] tabular-nums text-muted-foreground", children: t("{count} unread", { count: unreadCount }) }) : 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("p", { className: "text-sm font-medium text-foreground", children: t("All caught up") }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t("No recent notifications.") })
           ] }) : /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/70", children: previewItems.map((item) => /* @__PURE__ */ jsx(
             PreviewRow,
             {
@@ -1316,14 +1324,14 @@ function NotificationsBell({ className }) {
                 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"
+              children: t("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"
+              children: t("See all notifications \u2192")
             }
           )
         ]
@@ -1336,10 +1344,11 @@ function PreviewRow({
   markReadUrl,
   onMarkedRead
 }) {
+  const { t, formatDate } = useCboxLocalization();
   const tone = item.severity === "critical" ? "bg-destructive" : item.severity === "warning" ? "bg-warning" : "bg-info";
   const ts = (() => {
     try {
-      return new Date(item.createdAt).toLocaleString();
+      return formatDate(item.createdAt);
     } catch {
       return item.createdAt;
     }
@@ -1393,8 +1402,8 @@ function PreviewRow({
         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",
+        "aria-label": t("Mark as read"),
+        title: t("Mark as read"),
         children: "\u2713"
       }
     ) : null
@@ -1432,7 +1441,8 @@ function Bell() {
     }
   );
 }
-function SearchTrigger({ onOpen, className, label = "Search" }) {
+function SearchTrigger({ onOpen, className, label }) {
+  const { t } = useCboxLocalization();
   const [shortcut, setShortcut] = useState("\u2318K");
   useEffect(() => {
     if (typeof navigator === "undefined") return;
@@ -1447,10 +1457,10 @@ function SearchTrigger({ onOpen, className, label = "Search" }) {
         "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",
+      "aria-label": t("Open command palette"),
       children: [
         /* @__PURE__ */ jsx(SearchIcon2, {}),
-        /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: label ?? t("Search") }),
         /* @__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 })
       ]
     }
@@ -1476,18 +1486,28 @@ function SearchIcon2() {
     }
   );
 }
-function UserMenu({ extras, className }) {
+var Anchor = ({ href, className, children }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function UserMenu({ extras, className, placement = "bottom-end", LinkComponent: Link = Anchor }) {
+  const { t } = useCboxLocalization();
   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: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), onKeyDown: (event) => {
+    if (event.key === "Escape") setOpen(false);
+  }, onBlur: (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+  }, 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",
+        "aria-label": t("Open user menu"),
+        "aria-expanded": open,
+        onKeyDown: (event) => {
+          if (event.key === "Escape") setOpen(false);
+        },
         children: user.avatar_url ? /* @__PURE__ */ jsx(
           "img",
           {
@@ -1498,7 +1518,7 @@ function UserMenu({ extras, className }) {
         ) : /* @__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: [
+    open ? /* @__PURE__ */ jsxs("div", { className: cn("absolute z-50 w-64 rounded-lg border border-border bg-popover p-1 shadow-md", placement === "top-start" ? "bottom-full left-0 mb-2" : "right-0 top-full mt-1"), 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 })
@@ -1509,24 +1529,24 @@ function UserMenu({ extras, className }) {
       ] }) : null,
       /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
       /* @__PURE__ */ jsxs(
-        "a",
+        Link,
         {
           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("span", { children: t("Manage account") }),
             /* @__PURE__ */ jsx(CrossAppArrow, {})
           ]
         }
       ),
       urls.orgSettingsUrl && currentOrganization ? /* @__PURE__ */ jsxs(
-        "a",
+        Link,
         {
           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",
+              t("Team & billing"),
               /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
                 " \xB7 ",
                 currentOrganization.name
@@ -1544,7 +1564,7 @@ function UserMenu({ extras, className }) {
           {
             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"
+            children: t("Sign out")
           }
         )
       ] })
@@ -1594,6 +1614,7 @@ function CboxAppShell({
   topbarRightCluster,
   children
 }) {
+  const { t } = useCboxLocalization();
   const ToggleIcon = sidebarCollapsed ? PanelLeftOpen : PanelLeftClose;
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   useEffect(() => {
@@ -1636,8 +1657,8 @@ function CboxAppShell({
               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",
+              "aria-label": t("Open navigation"),
+              title: t("Open navigation"),
               children: /* @__PURE__ */ jsx(Menu, { className: "h-4 w-4", strokeWidth: 1.8 })
             }
           ),
@@ -1647,8 +1668,8 @@ function CboxAppShell({
               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",
+              "aria-label": sidebarCollapsed ? t("Expand sidebar") : t("Collapse sidebar"),
+              title: sidebarCollapsed ? t("Expand sidebar") : t("Collapse sidebar"),
               children: /* @__PURE__ */ jsx(
                 ToggleIcon,
                 {
@@ -1678,6 +1699,7 @@ function ContextBar({
   LinkComponent = DefaultLink,
   className
 }) {
+  const { t } = useCboxLocalization();
   if (crumbs.length === 0) {
     return null;
   }
@@ -1685,7 +1707,7 @@ function ContextBar({
     "nav",
     {
       "data-component": "context-bar",
-      "aria-label": "Context",
+      "aria-label": t("Context"),
       className: cn("flex min-w-0 items-center gap-1", className),
       children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs(
         "div",
@@ -1721,6 +1743,7 @@ function ContextCrumbChip({
   crumb,
   LinkComponent
 }) {
+  const { t } = useCboxLocalization();
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
   const listId = useId();
@@ -1742,7 +1765,7 @@ function ContextCrumbChip({
     };
   }, [open]);
   const hasMenu = crumb.items.length > 0 || crumb.footerLink !== void 0;
-  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative min-w-0", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -1751,7 +1774,7 @@ function ContextCrumbChip({
         "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}`,
+        "aria-label": crumb.ariaLabel ?? t("Switch {name}", { name: 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",
@@ -1767,7 +1790,7 @@ function ContextCrumbChip({
               size: "sm"
             }
           ) : null,
-          /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: crumb.label }),
+          /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: crumb.label }),
           hasMenu ? /* @__PURE__ */ jsx(Chevron2, { open }) : null
         ]
       }
@@ -1822,6 +1845,7 @@ function ContextItemRow({
   LinkComponent,
   onAfterClick
 }) {
+  const { t } = useCboxLocalization();
   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,
@@ -1850,7 +1874,7 @@ function ContextItemRow({
       children: /* @__PURE__ */ jsx(
         "span",
         {
-          "aria-label": item.settingsAriaLabel ?? `Settings for ${item.label}`,
+          "aria-label": item.settingsAriaLabel ?? t("Settings for {name}", { name: item.label }),
           onClickCapture: (event) => {
             event.stopPropagation();
             onAfterClick();
@@ -1923,7 +1947,7 @@ function ContextAvatarChip({
   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 sizeClass = size === "sm" ? "h-[26px] w-[26px] text-[10px]" : "h-7 w-7 text-[11px]";
   const style = avatar.src === void 0 && avatar.accent !== void 0 ? {
     backgroundColor: avatar.accent,
     color: "#fff"
@@ -2023,6 +2047,7 @@ function CboxOrgContextBar({
   LinkComponent,
   onNavigate
 }) {
+  const { t } = useCboxLocalization();
   const cboxId = useCboxIdOptional();
   if (cboxId === null) {
     return null;
@@ -2041,7 +2066,7 @@ function CboxOrgContextBar({
     // 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}`
+    settingsAriaLabel: t("Settings for {name}", { name: org.name })
   }));
   const onSelect = (slug) => {
     const org = organizations.find((o) => o.slug === slug);
@@ -2063,10 +2088,10 @@ function CboxOrgContextBar({
           items,
           onSelect,
           footerLink: {
-            label: "Manage organizations",
+            label: t("Manage organizations"),
             href: `${idBase}/settings/organizations`
           },
-          ariaLabel: "Switch organization"
+          ariaLabel: t("Switch organization")
         }
       ]
     }
@@ -2080,6 +2105,7 @@ function deriveInitials2(label) {
   return (label.slice(0, 2) || "?").toUpperCase();
 }
 function OrgSwitcher({ Trigger = DefaultTrigger, className }) {
+  const { t } = useCboxLocalization();
   const { currentOrganization, organizations, onSwitchOrganization } = useCboxId();
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
@@ -2179,10 +2205,10 @@ function OrgSwitcher({ Trigger = DefaultTrigger, className }) {
       "div",
       {
         role: "dialog",
-        "aria-label": "Switch organization",
+        "aria-label": t("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-3 pt-2 pb-1", children: /* @__PURE__ */ jsx("p", { className: "text-mono text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase", children: t("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(
@@ -2193,23 +2219,15 @@ function OrgSwitcher({ Trigger = DefaultTrigger, className }) {
                 value: query,
                 onChange: (e) => setQuery(e.target.value),
                 onKeyDown: onSearchKeyDown,
-                placeholder: "Filter\u2026",
-                "aria-label": "Filter organizations",
+                placeholder: t("Filter\u2026"),
+                "aria-label": t("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) => {
+          /* @__PURE__ */ jsx("div", { className: "max-h-[50vh] overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-[12px] text-muted-foreground", children: t("No organizations match \u201C{query}\u201D", { query }) }) : /* @__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(
@@ -2224,7 +2242,7 @@ function OrgSwitcher({ Trigger = DefaultTrigger, className }) {
                 ),
                 children: [
                   /* @__PURE__ */ jsx("span", { className: "truncate", children: org.name }),
-                  active ? /* @__PURE__ */ jsx("span", { className: "text-mono text-[10px] text-muted-foreground", children: "current" }) : null
+                  active ? /* @__PURE__ */ jsx("span", { className: "text-mono text-[10px] text-muted-foreground", children: t("current") }) : null
                 ]
               }
             ) }, org.id);
@@ -2320,6 +2338,7 @@ function TopBar({
   );
 }
 function AppLauncher({ className, onLockedAppClick }) {
+  const { t } = useCboxLocalization();
   const cboxId = useCboxIdOptional();
   const [open, setOpen] = useState(false);
   const containerRef = useRef(null);
@@ -2360,7 +2379,7 @@ function AppLauncher({ className, onLockedAppClick }) {
       "button",
       {
         type: "button",
-        "aria-label": "Open app launcher",
+        "aria-label": t("Open app launcher"),
         "aria-expanded": open,
         onClick: () => setOpen((v) => !v),
         className: cn(
@@ -2374,10 +2393,10 @@ function AppLauncher({ className, onLockedAppClick }) {
       "div",
       {
         role: "dialog",
-        "aria-label": "Cbox app launcher",
+        "aria-label": t("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__ */ 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: t("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,
@@ -2390,7 +2409,7 @@ function AppLauncher({ className, onLockedAppClick }) {
             )) }) : 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("p", { className: "text-mono px-3 py-1.5 text-[10px] font-semibold tracking-[0.18em] text-muted-foreground/70 uppercase", children: t("Available") }),
               /* @__PURE__ */ jsx("ul", { className: "space-y-0.5 p-1 pt-0", children: locked.map((app) => /* @__PURE__ */ jsx(
                 AppRow2,
                 {
@@ -2408,6 +2427,7 @@ function AppLauncher({ className, onLockedAppClick }) {
   ] });
 }
 function AppRow2({ app, orgSlug, onLockedAppClick }) {
+  const { t } = useCboxLocalization();
   const isComingSoon = app.comingSoon === true;
   const isLocked = app.entitled === false || isComingSoon;
   const monogram = app.monogram ?? app.name.slice(0, 1).toUpperCase();
@@ -2438,7 +2458,7 @@ function AppRow2({ app, orgSlug, onLockedAppClick }) {
           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.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: t("current") }) : null
     ] }),
     app.description ? /* @__PURE__ */ jsx(
       "span",
@@ -2451,9 +2471,9 @@ function AppRow2({ app, orgSlug, onLockedAppClick }) {
       }
     ) : 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: [
+  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: t("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"
+    t("Add")
   ] }) : null;
   if (isComingSoon) {
     return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
@@ -2461,7 +2481,7 @@ function AppRow2({ app, orgSlug, onLockedAppClick }) {
       {
         "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`,
+        title: t("{name} \u2014 coming soon", { name: app.name }),
         children: [
           tile,
           body,
@@ -2480,7 +2500,7 @@ function AppRow2({ app, orgSlug, onLockedAppClick }) {
           "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`,
+        title: t("Add {name} to your plan", { name: app.name }),
         children: [
           tile,
           body,
@@ -2553,12 +2573,190 @@ function Lock2() {
     }
   );
 }
+var DEFAULT_REFRESH_SECONDS = 60;
+function parseAppCatalog(ok, body) {
+  const data = typeof body === "object" && body !== null ? body : {};
+  if (!ok) {
+    const authorize = typeof data.authorize_url === "string" ? data.authorize_url : null;
+    if (authorize !== null || data.state === "authorization_required") {
+      return { status: "authorization_required", authorizeUrl: authorize };
+    }
+    return { status: "unavailable" };
+  }
+  if (!Array.isArray(data.apps)) {
+    return { status: "unavailable" };
+  }
+  const apps = [];
+  for (const entry of data.apps) {
+    if (typeof entry !== "object" || entry === null) continue;
+    const app = entry;
+    if (typeof app.key !== "string" || typeof app.name !== "string" || typeof app.launch_url !== "string") continue;
+    if (!/^https?:\/\//.test(app.launch_url)) continue;
+    apps.push({
+      key: app.key,
+      name: app.name,
+      launch_url: app.launch_url,
+      icon_url: typeof app.icon_url === "string" ? app.icon_url : null,
+      description: typeof app.description === "string" ? app.description : null
+    });
+  }
+  const refresh = typeof data.refresh_after === "number" && Number.isFinite(data.refresh_after) ? data.refresh_after : DEFAULT_REFRESH_SECONDS;
+  return { status: "ready", apps, refreshAfter: Math.max(1, Math.min(DEFAULT_REFRESH_SECONDS, refresh)) };
+}
+function authorizeHref(authorizeUrl, location) {
+  if (authorizeUrl === null) return null;
+  try {
+    const url = new URL(authorizeUrl, location.origin);
+    if (url.origin !== location.origin) return null;
+    url.searchParams.set("return_to", location.pathname + location.search);
+    return url.pathname + url.search;
+  } catch {
+    return null;
+  }
+}
+function CboxAppCatalog({ endpoint, currentAppKey, icons, className }) {
+  const { t } = useCboxLocalization();
+  const [open, setOpen] = useState(false);
+  const [state, setState] = useState({ status: "idle" });
+  const container = useRef(null);
+  const flight = useRef(null);
+  const expires = useRef(0);
+  const load = useCallback(async () => {
+    if (endpoint === null || flight.current !== null) return;
+    const request = new AbortController();
+    flight.current = request;
+    setState((current) => current.status === "ready" ? current : { status: "loading" });
+    try {
+      const response = await fetch(endpoint, {
+        credentials: "same-origin",
+        cache: "no-store",
+        headers: { Accept: "application/json", "X-Requested-With": "XMLHttpRequest" },
+        signal: request.signal
+      });
+      const body = await response.json().catch(() => null);
+      if (request.signal.aborted) return;
+      const next = parseAppCatalog(response.ok, body);
+      expires.current = next.status === "ready" ? Date.now() + next.refreshAfter * 1e3 : 0;
+      setState(next);
+    } catch {
+      if (!request.signal.aborted) {
+        expires.current = 0;
+        setState({ status: "unavailable" });
+      }
+    } finally {
+      if (flight.current === request) flight.current = null;
+    }
+  }, [endpoint]);
+  const refresh = useCallback(() => {
+    if (document.visibilityState === "visible" && Date.now() >= expires.current) void load();
+  }, [load]);
+  useEffect(() => {
+    if (!open) return;
+    refresh();
+    const outside = (event) => {
+      if (container.current !== null && !container.current.contains(event.target)) setOpen(false);
+    };
+    const key = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("pointerdown", outside);
+    window.addEventListener("keydown", key);
+    window.addEventListener("focus", refresh);
+    document.addEventListener("visibilitychange", refresh);
+    return () => {
+      window.removeEventListener("pointerdown", outside);
+      window.removeEventListener("keydown", key);
+      window.removeEventListener("focus", refresh);
+      document.removeEventListener("visibilitychange", refresh);
+    };
+  }, [open, refresh]);
+  useEffect(() => {
+    if (!open || state.status !== "ready") return;
+    const timer = window.setTimeout(refresh, Math.max(50, expires.current - Date.now()));
+    return () => window.clearTimeout(timer);
+  }, [open, state, refresh]);
+  useEffect(() => () => flight.current?.abort(), []);
+  useEffect(() => {
+    expires.current = 0;
+    setState({ status: "idle" });
+  }, [endpoint]);
+  const reconnect = state.status === "authorization_required" && typeof window !== "undefined" ? authorizeHref(state.authorizeUrl, window.location) : null;
+  return /* @__PURE__ */ jsxs("div", { ref: container, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": t("Switch app"),
+        title: t("Switch app"),
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        disabled: endpoint === null,
+        onClick: () => setOpen((value) => !value),
+        className: cn(
+          "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground disabled:cursor-default disabled:opacity-60 disabled:hover:bg-transparent",
+          open && "bg-secondary text-foreground"
+        ),
+        children: /* @__PURE__ */ jsx(Grid2, {})
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-label": t("Switch app"), className: "absolute right-0 top-full z-50 mt-1.5 w-[min(18.25rem,calc(100vw-1rem))] overflow-hidden rounded-lg border border-border bg-popover p-3 shadow-lg", children: [
+      /* @__PURE__ */ jsx("h2", { className: "mb-2 text-sm font-semibold text-foreground", children: t("Switch app") }),
+      /* @__PURE__ */ jsxs("div", { "aria-live": "polite", children: [
+        (state.status === "idle" || state.status === "loading") && /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-sm text-muted-foreground", children: t("Loading apps\u2026") }),
+        state.status === "unavailable" && /* @__PURE__ */ jsxs("div", { className: "space-y-2 px-1 py-2 text-sm", children: [
+          /* @__PURE__ */ jsx("p", { role: "alert", className: "text-muted-foreground", children: t("Apps could not be loaded.") }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void load(), className: "font-medium text-foreground underline", children: t("Try again") })
+        ] }),
+        state.status === "authorization_required" && /* @__PURE__ */ jsxs("div", { className: "space-y-2 px-1 py-2 text-sm", children: [
+          /* @__PURE__ */ jsx("p", { role: "alert", className: "text-muted-foreground", children: t("Apps could not be loaded.") }),
+          reconnect !== null ? /* @__PURE__ */ jsx("a", { href: reconnect, className: "font-medium text-foreground underline", children: t("Reconnect to Cbox ID") }) : /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void load(), className: "font-medium text-foreground underline", children: t("Try again") })
+        ] }),
+        state.status === "ready" && (state.apps.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-sm text-muted-foreground", children: t("No apps available") }) : /* @__PURE__ */ jsx("nav", { "aria-label": t("Switch app"), className: "grid grid-cols-3 gap-1", children: state.apps.map((app) => {
+          const current = app.key === currentAppKey;
+          return /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: app.launch_url,
+              "aria-current": current ? "true" : void 0,
+              title: app.description ?? app.name,
+              onClick: () => setOpen(false),
+              className: cn("relative flex min-h-[60px] min-w-0 flex-col items-center justify-center gap-1.5 rounded-md p-2 text-center text-[13px] font-medium leading-tight text-foreground hover:bg-secondary", current && "bg-accent-soft"),
+              children: [
+                /* @__PURE__ */ jsx(AppMark, { app, icon: icons?.[app.key] }),
+                /* @__PURE__ */ jsx("span", { className: "max-w-full break-words", children: app.name.replace(/^Cbox\s*·\s*/i, "") }),
+                current && /* @__PURE__ */ jsx(Check2, {})
+              ]
+            },
+            app.key
+          );
+        }) }))
+      ] })
+    ] }) : null
+  ] });
+}
+function AppMark({ app, icon }) {
+  const [failed, setFailed] = useState(false);
+  if (icon !== void 0) {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex h-6 w-6 items-center justify-center", children: icon });
+  }
+  if (typeof app.icon_url === "string" && app.icon_url !== "" && !failed) {
+    return /* @__PURE__ */ jsx("img", { src: app.icon_url, alt: "", className: "h-6 w-6 rounded object-contain", loading: "lazy", onError: () => setFailed(true) });
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "grid h-6 w-6 place-items-center rounded bg-secondary text-[11px] font-semibold text-foreground", children: app.name.slice(0, 2) });
+}
+function Grid2() {
+  return /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "currentColor", "aria-hidden": true, children: [3, 9, 15].flatMap((y) => [3, 9, 15].map((x) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: "1.65" }, `${x}-${y}`))) });
+}
+function Check2() {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", className: "absolute right-2 top-1.5 h-3 w-3 text-accent", children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) });
+}
 function Combobox(props) {
+  const { t } = useCboxLocalization();
   const {
     items,
-    placeholder = "Select\u2026",
-    searchPlaceholder = "Search\u2026",
-    emptyText = "Nothing matches.",
+    placeholder = t("Select\u2026"),
+    searchPlaceholder = t("Search\u2026"),
+    emptyText = t("Nothing matches."),
     footerLink,
     disabled = false,
     required = false,
@@ -2855,7 +3053,7 @@ function ComboboxGroupRows({
           /* @__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
+        isActive ? /* @__PURE__ */ jsx(Check3, {}) : null
       ] });
       const className = cn(
         "group block w-full rounded-sm transition-colors text-left",
@@ -3037,7 +3235,7 @@ function Chevron4({ open }) {
     }
   );
 }
-function Check2() {
+function Check3() {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -3103,7 +3301,7 @@ function DataPanel({
     "section",
     {
       className: cn(
-        "rounded-lg border border-border bg-card text-card-foreground shadow-[0_1px_2px_rgba(0,0,0,0.02)]",
+        "rounded-lg border border-border bg-card text-card-foreground shadow-[0_1px_2px_rgb(0_0_0/0.04),0_4px_12px_rgb(0_0_0/0.03)]",
         className
       ),
       ...rest,
@@ -3289,12 +3487,13 @@ function PageTabs({
   );
 }
 function DesktopStrip({ items, activeHref, LinkComponent }) {
+  const { t } = useCboxLocalization();
   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",
+      "aria-label": t("Section navigation"),
       children: items.map((item) => {
         const Icon = item.icon;
         const active = item.href === activeHref;
@@ -3330,6 +3529,7 @@ function DesktopStrip({ items, activeHref, LinkComponent }) {
   );
 }
 function MobileDropdown({ items, activeHref, LinkComponent }) {
+  const { t } = useCboxLocalization();
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
   const listId = useId();
@@ -3389,7 +3589,7 @@ function MobileDropdown({ items, activeHref, LinkComponent }) {
       {
         id: listId,
         role: "listbox",
-        "aria-label": "Section navigation",
+        "aria-label": t("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;
@@ -3590,7 +3790,7 @@ function StatTile({
 function urlString(defaultValue = "") {
   return {
     parse: (raw) => raw ?? defaultValue,
-    serialize: (value) => value === "" ? null : value,
+    serialize: (value) => value,
     isDefault: (value) => value === defaultValue
   };
 }
@@ -3665,7 +3865,152 @@ function buildUrlSearch(state, schema) {
   }
   return params.toString();
 }
+function navMatchLength(path, href) {
+  if (href === "/") {
+    return path === "/" ? 1 : -1;
+  }
+  return path === href || path.startsWith(href + "/") ? href.length : -1;
+}
+function activeNavItem(path, items) {
+  let best;
+  let length = -1;
+  for (const item of items) {
+    const match = navMatchLength(path, item.href);
+    if (match > length) {
+      best = item;
+      length = match;
+    }
+  }
+  return best;
+}
+function activeNavArea(path, areas) {
+  let best;
+  let length = -1;
+  for (const area of areas) {
+    const candidates = [area.href, ...(area.items ?? []).map((item) => item.href)];
+    const match = Math.max(...candidates.map((href) => navMatchLength(path, href)));
+    if (match > length) {
+      best = area;
+      length = match;
+    }
+  }
+  return best;
+}
+function useControllable(value, fallback, onChange) {
+  const [own, setOwn] = useState(fallback);
+  const current = value ?? own;
+  const ref = useRef(current);
+  ref.current = current;
+  const set = useCallback((next) => {
+    const resolved = typeof next === "function" ? next(ref.current) : next;
+    if (value === void 0) setOwn(resolved);
+    onChange?.(resolved);
+  }, [value, onChange]);
+  return [current, set];
+}
+function CboxWorkspaceShell({ appKey, brandSubmark, areas, currentPath, LinkComponent: Link, context, tools, account, children, brandHref = "/", mainId = "main-content", pinned: pinnedProp, defaultPinned = false, onPinnedChange, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange }) {
+  const { t } = useCboxLocalization();
+  const [pinned, setPinned] = useControllable(pinnedProp, defaultPinned, onPinnedChange);
+  const [collapsed, setCollapsed] = useControllable(collapsedProp, defaultCollapsed, onCollapsedChange);
+  const [expanded, setExpanded] = useState(false);
+  const [mobile, setMobile] = useState(false);
+  const dialog = useRef(null);
+  const path = currentPath.split(/[?#]/)[0] ?? "/";
+  const area = activeNavArea(path, areas);
+  const subnav = area?.items && area.items.length > 1 ? area : void 0;
+  useEffect(() => {
+    setMobile(false);
+  }, [currentPath]);
+  useEffect(() => {
+    const el = dialog.current;
+    if (mobile && el && !el.open) el.showModal();
+    if (!mobile && el?.open) el.close();
+  }, [mobile]);
+  useEffect(() => {
+    const key = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === ".") {
+        event.preventDefault();
+        setCollapsed((value) => !value);
+      }
+    };
+    addEventListener("keydown", key);
+    return () => removeEventListener("keydown", key);
+  }, [setCollapsed]);
+  const open = pinned || expanded;
+  const links = (items) => {
+    const active = activeNavItem(path, items);
+    return items.map((item) => /* @__PURE__ */ jsxs(Link, { href: item.href, className: `cbx-workspace-link ${item === active ? "is-active" : ""}`, "aria-label": item.label, "aria-current": item === active ? "page" : void 0, children: [
+      /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0", strokeWidth: 1.7 }),
+      /* @__PURE__ */ jsx("span", { children: item.label })
+    ] }, item.href));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "cbx-workspace", children: [
+    /* @__PURE__ */ jsx("div", { className: "cbx-rail-slot", "data-pinned": pinned, children: /* @__PURE__ */ jsxs("aside", { className: "cbx-rail", "data-open": open, onMouseEnter: () => setExpanded(true), onMouseLeave: () => setExpanded(false), onFocusCapture: () => setExpanded(true), onBlurCapture: (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget)) setExpanded(false);
+    }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "cbx-rail-brand", children: [
+        /* @__PURE__ */ jsxs(Link, { href: brandHref, "aria-label": t("Home"), children: [
+          /* @__PURE__ */ jsx("span", { className: "dark:hidden", children: /* @__PURE__ */ jsx(CboxBrand, { appKey, submark: brandSubmark, collapsed: !open }) }),
+          /* @__PURE__ */ jsx("span", { className: "hidden dark:block", children: /* @__PURE__ */ jsx(CboxBrand, { appKey, submark: brandSubmark, collapsed: !open, tone: "light" }) })
+        ] }),
+        open && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPinned((value) => !value), "aria-label": t(pinned ? "Unpin navigation" : "Pin navigation"), "aria-pressed": pinned, children: pinned ? /* @__PURE__ */ jsx(PinOff, { size: 16 }) : /* @__PURE__ */ jsx(Pin, { size: 16 }) })
+      ] }),
+      /* @__PURE__ */ jsx("nav", { "aria-label": brandSubmark, children: areas.map((item) => /* @__PURE__ */ jsxs(Link, { href: item.href, "aria-label": item.label, "aria-current": area === item ? "page" : void 0, title: open ? void 0 : item.label, className: `cbx-workspace-link ${area === item ? "is-active" : ""}`, children: [
+        /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0", strokeWidth: 1.7 }),
+        open && /* @__PURE__ */ jsx("span", { children: item.label })
+      ] }, item.href)) }),
+      /* @__PURE__ */ jsx("div", { className: "cbx-rail-account", children: account })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "cbx-workspace-column", children: [
+      /* @__PURE__ */ jsxs("header", { className: "cbx-workspace-header", children: [
+        /* @__PURE__ */ jsx("button", { className: "cbx-mobile-trigger", type: "button", onClick: () => setMobile(true), "aria-label": t("Open navigation"), children: /* @__PURE__ */ jsx(Menu, { size: 18 }) }),
+        /* @__PURE__ */ jsx("div", { className: "cbx-workspace-context", children: context }),
+        /* @__PURE__ */ jsx("div", { className: "cbx-workspace-tools", children: tools })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "cbx-workspace-body", children: [
+        subnav && /* @__PURE__ */ jsx("aside", { className: "cbx-subnav", "data-collapsed": collapsed, children: collapsed ? /* @__PURE__ */ jsxs("button", { className: "cbx-subnav-strip", type: "button", onClick: () => setCollapsed(false), "aria-label": t("Expand sidebar"), children: [
+          /* @__PURE__ */ jsx(PanelLeftOpen, { size: 16 }),
+          /* @__PURE__ */ jsx("span", { children: subnav.label })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "cbx-subnav-header", children: [
+            /* @__PURE__ */ jsx("strong", { children: subnav.label }),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setCollapsed(true), "aria-label": t("Collapse sidebar"), title: "\u2318.", children: /* @__PURE__ */ jsx(PanelLeftClose, { size: 16 }) })
+          ] }),
+          /* @__PURE__ */ jsx("nav", { "aria-label": subnav.label, children: links(subnav.items ?? []) })
+        ] }) }),
+        /* @__PURE__ */ jsx("main", { id: mainId, className: "canvas-gradient cbx-workspace-main", children })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("dialog", { ref: dialog, className: "cbx-workspace-mobile", onClose: () => setMobile(false), onClick: (event) => {
+      if (event.target === event.currentTarget) setMobile(false);
+    }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "cbx-subnav-header", children: [
+        /* @__PURE__ */ jsx("strong", { children: brandSubmark }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setMobile(false), "aria-label": t("Close navigation"), children: /* @__PURE__ */ jsx(X, { size: 18 }) })
+      ] }),
+      /* @__PURE__ */ jsx("nav", { "aria-label": t("Navigation"), children: areas.map((item) => /* @__PURE__ */ jsxs("section", { children: [
+        links([item]),
+        item.items && /* @__PURE__ */ jsx("div", { className: "pl-4", children: links(item.items) })
+      ] }, item.href)) }),
+      /* @__PURE__ */ jsx("div", { className: "cbx-rail-account", children: account })
+    ] })
+  ] });
+}
+var CHART_PALETTE = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"];
+function Sparkline({ values, color = "var(--chart-1)", width = 90, height = 20 }) {
+  if (values.length === 0) {
+    return null;
+  }
+  const clean = values.map((value) => Number.isFinite(value) ? value : 0);
+  const max = Math.max(1e-9, ...clean);
+  const points = clean.map((value, index) => [index / Math.max(1, clean.length - 1) * (width - 2) + 1, height - 1 - value / max * (height - 3)]);
+  const d = points.map(([px, py], index) => `${index === 0 ? "M" : "L"}${px.toFixed(1)} ${py.toFixed(1)}`).join("");
+  return /* @__PURE__ */ jsxs("svg", { width, height, viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: `${d}L${width - 1} ${height}L1 ${height}Z`, fill: color, opacity: 0.14 }),
+    /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" })
+  ] });
+}
 
-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 };
+export { AppContent, AppLauncher, AppShell, AppSwitcher, CHART_PALETTE, CboxAppCatalog, CboxAppShell, CboxAppSidebar, CboxBrand, CboxIdProvider, CboxLocalizationProvider, CboxMobileNavDrawer, CboxOrgContextBar, CboxSurfaces, CboxWorkspaceShell, Combobox, ContextAvatarChip, ContextBar, DataPanel, EmptyState, Heading, KeyValue, KeyValueList, NotificationsBell, OrgSwitcher, PageHeader, PageShell, PageTabs, PanelBody, RowLink, SearchTrigger, SectionHeader, Sparkline, StatTile, StatusPill, TopBar, UserMenu, activeNavArea, activeNavItem, authorizeHref, buildUrlSearch, defineUrlSchema, interpolate, navMatchLength, parseAppCatalog, parseUrlSearch, urlBoolean, urlEnum, urlNumber, urlString, urlStringArray, useCboxId, useCboxIdOptional, useCboxLocalization, useCboxSurfaces, useCboxSurfacesOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map