@cboxdk/cbox-ui 0.7.0 → 0.8.0

package/README.md

@@ -200,12 +200,12 @@ grant) and the component renders its answer, refreshes it when `refresh_after` e
 while the panel is open, and offers the way back to Cbox ID when the grant is missing.
 
 ```tsx
-<CboxAppCatalog endpoint={appCatalogUrl} currentAppKey="infra" icons={serviceMarks} />
+<CboxAppCatalog endpoint={appCatalogUrl} currentAppKey="infra" />
 ```
 
 The endpoint contract (`parseAppCatalog` is exported, so a host can test its own answer):
 
-- `200 { apps: [{ key, name, launch_url, icon_url?, description? }], refresh_after?: seconds }`
+- `200 { apps: [{ key, name, launch_url, icon_url?, icon_dark_url?, description? }], refresh_after?: seconds }`
   — `refresh_after` is clamped to 1–60 s; apps without an `http(s)` launch URL are dropped.
 - `401`/`403` with `{ authorize_url }` or `{ state: 'authorization_required' }` — the panel
   says the apps could not be loaded and links "Reconnect to Cbox ID" to `authorize_url` with
@@ -213,8 +213,15 @@ The endpoint contract (`parseAppCatalog` is exported, so a host can test its own
 - Anything else — "Apps could not be loaded." with a retry.
 
 `endpoint={null}` renders the control disabled, so the chrome keeps its shape on pages
-without an organization. `icons` maps an app key to a mark the host bundles (the family's
-service marks); without one the catalog's `icon_url` is shown, then the name's initials.
+without an organization.
+
+App icons come from Cbox ID's catalog: `icon_url` for light surfaces and `icon_dark_url` for
+dark ones. The tiles render both and the token stylesheet shows the one for the current theme
+(`.dark` or `[data-theme="dark"]` on the root); an app without an icon shows its initials. Apps
+keep no local copy of the marks. Each answer is kept in this browser (`cbox-app-catalog`), so
+`<CboxServiceMark appKey="infra" />` and the collapsed `CboxBrand` in the rail paint the app's
+own icon at once on the next page. A host that loads the catalog itself calls
+`rememberAppCatalog(apps)`; `CboxAppIcon` renders any single app's icon.
 
 ### Workspace navigation (current design contract)
 

package/dist/index.d.ts

@@ -62,8 +62,10 @@ type CboxAppLink = {
      * Defaults to the first letter of `name`.
      */
     monogram?: string;
-    /** Optional inline SVG path or URL for the launcher tile icon. */
-    iconUrl?: string;
+    /** Cbox ID's catalog `icon_url`: the app's icon for light surfaces (`https:` only). */
+    iconUrl?: string | null;
+    /** Cbox ID's catalog `icon_dark_url`: the app's icon for dark surfaces. */
+    iconDarkUrl?: string | null;
     /**
      * Accent colour for the monogram tile (and current-app highlight).
      * Hex string or any CSS colour the browser accepts. Falls back to
@@ -394,7 +396,9 @@ type CboxBrandProps = {
      *  `light` on dark / coloured surfaces. */
     tone?: 'dark' | 'light';
     /** Collapsed mode renders only the square icon — used in the
-     *  collapsed-sidebar state. */
+     *  collapsed-sidebar state. The icon is the app's own icon from
+     *  Cbox ID's catalog (light and dark) once this browser has seen
+     *  the catalog, and the Cbox icon until then. */
     collapsed?: boolean;
     className?: string;
 };
@@ -504,7 +508,10 @@ type CboxCatalogApp = {
     key: string;
     name: string;
     launch_url: string;
+    /** Cbox ID's uploaded icon for light surfaces. */
     icon_url?: string | null;
+    /** Cbox ID's uploaded icon for dark surfaces. */
+    icon_dark_url?: string | null;
     description?: string | null;
 };
 type CboxAppCatalogState = {
@@ -528,17 +535,12 @@ type CboxAppCatalogProps = {
     endpoint: string | null;
     /** The app key of this app; its tile is marked current and does not navigate. */
     currentAppKey: string;
-    /**
-     * Marks per app key, rendered instead of the catalog's `icon_url` (a host that bundles the
-     * family's service marks). An app without one shows its `icon_url`, then its initials.
-     */
-    icons?: Record<string, ReactNode>;
     className?: string;
 };
 /**
  * Interpret the catalog endpoint's answer. The contract every Cbox app serves:
  *
- * - `200 { apps: [{ key, name, launch_url, icon_url?, description? }], refresh_after?: seconds }`
+ * - `200 { apps: [{ key, name, launch_url, icon_url?, icon_dark_url?, description? }], refresh_after?: seconds }`
  * - `401`/`403 { authorize_url?: string }` or `{ state: 'authorization_required' }`: the
  *   person has to (re)connect their catalog grant; `authorize_url` is where.
  * - anything else: unavailable right now.
@@ -556,9 +558,63 @@ declare function authorizeHref(authorizeUrl: string | null, location: {
  * The Switch-app control: a grid of the Cbox apps this person can open, read live from the
  * host's catalog endpoint. The host owns the endpoint and the grant; this renders the answer,
  * refreshes it when it expires while the panel is open, and offers the way back to Cbox ID
- * when the grant is missing.
+ * when the grant is missing. Each tile shows the app's icon from the catalog (light and dark),
+ * and the answer is kept so `CboxServiceMark` paints the app's own mark from it.
+ */
+declare function CboxAppCatalog({ endpoint, currentAppKey, className }: CboxAppCatalogProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Every Cbox app's icon comes from Cbox ID's catalog: one light and one dark upload per app
+ * (`icon_url`, `icon_dark_url`). There is no local copy of the marks in this package or in an
+ * app. The last catalog the browser saw is kept here so an app's own mark and the switcher
+ * paint at once on the next page; the live answer replaces it when it arrives.
  */
-declare function CboxAppCatalog({ endpoint, currentAppKey, icons, className }: CboxAppCatalogProps): react_jsx_runtime.JSX.Element;
+type CboxKnownApp = {
+    key: string;
+    name: string;
+    icon_url: string | null;
+    icon_dark_url: string | null;
+};
+/** Keep the catalog the person just loaded, so every mark on this origin repaints from it. */
+declare function rememberAppCatalog(apps: ReadonlyArray<{
+    key: string;
+    name: string;
+    icon_url?: string | null;
+    icon_dark_url?: string | null;
+}>): void;
+/** The last catalog this browser kept; empty on the server and before the first answer. */
+declare function useKnownAppCatalog(): CboxKnownApp[];
+/** Only `https:` icon URLs are rendered: the icons are hosted by Cbox ID. */
+declare function secureIconUrl(url: unknown): string | null;
+type CboxAppIconProps = {
+    /** The app's name; its first two letters stand in when it has no icon. */
+    name: string;
+    /** Catalog `icon_url`: the icon for light surfaces (or the only one). */
+    iconUrl?: string | null;
+    /** Catalog `icon_dark_url`: the icon for dark surfaces. */
+    iconDarkUrl?: string | null;
+    /** Size and shape of the icon box, e.g. `h-6 w-6`. */
+    className?: string;
+    /** Rendered instead of initials when the app has no usable icon. */
+    fallback?: ReactNode;
+};
+/**
+ * One app's icon from the catalog. With both uploads it renders two images and the token
+ * stylesheet shows the one for the current theme (`.dark` or `[data-theme="dark"]` on the
+ * root, the same switch the tokens use). Without an icon, or when it fails to load, it shows
+ * the app's initials.
+ */
+declare function CboxAppIcon({ name, iconUrl, iconDarkUrl, className, fallback }: CboxAppIconProps): react_jsx_runtime.JSX.Element;
+type CboxServiceMarkProps = {
+    /** The app key in Cbox ID's catalog (`signals`, `infra`, …). */
+    appKey: string;
+    /** Size of the mark. Default `h-6 w-6`. */
+    className?: string;
+    /** Shown while the catalog has not told this browser the app's icon yet. Default nothing. */
+    fallback?: ReactNode;
+};
+/** An app's own mark (its rail or brand icon), read from the catalog this browser last kept. */
+declare function CboxServiceMark({ appKey, className, fallback }: CboxServiceMarkProps): react_jsx_runtime.JSX.Element;
 
 type AppSwitcherProps = {
     className?: string;
@@ -1524,4 +1580,4 @@ declare function Sparkline({ values, color, width, height }: {
     height?: number;
 }): react_jsx_runtime.JSX.Element | null;
 
-export { AppContent, AppLauncher, AppShell, AppSwitcher, CHART_PALETTE, CboxAppCatalog, type CboxAppCatalogProps, type CboxAppCatalogState, type CboxAppKey, type CboxAppLink, CboxAppShell, type CboxAppShellProps, CboxAppSidebar, type CboxAppSidebarProps, CboxBrand, type CboxBrandProps, type CboxCatalogApp, type CboxIdContextValue, CboxIdProvider, CboxLocalizationProvider, CboxMobileNavDrawer, type CboxMobileNavDrawerProps, type CboxNavArea, type CboxNavItem, type CboxNavSection, type CboxNotificationPreviewItem, type CboxNotificationsState, CboxOrgContextBar, type CboxOrgContextBarProps, type CboxOrganization, CboxSurfaces, type CboxSurfacesProps, type CboxTranslationValues, type CboxTranslator, type CboxUser, CboxWorkspaceShell, type CboxWorkspaceShellProps, Combobox, type ComboboxAvatar, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ContextAvatar, ContextAvatarChip, ContextBar, type ContextCrumb, type ContextItem, DataPanel, EmptyState, Heading, type InboxState, type InferUrlState, KeyValue, KeyValueList, type LinkComponent, NotificationsBell, OrgSwitcher, PageHeader, PageShell, type PageTabSpec, PageTabs, type PageTabsProps, type PageWidth, PanelBody, type RealtimeState, type RealtimeStatus, RowLink, type RowLinkProps, SearchTrigger, SectionHeader, Sparkline, StatTile, StatusPill, type SurfaceArgs, type SurfaceConfig, type SurfaceController, type SurfaceId, TopBar, type Transport, type UrlField, type UrlSchema, UserMenu, activeNavArea, activeNavItem, authorizeHref, buildUrlSearch, cn, defineUrlSchema, interpolate, navMatchLength, parseAppCatalog, parseUrlSearch, urlBoolean, urlEnum, urlNumber, urlString, urlStringArray, useCboxId, useCboxIdOptional, useCboxLocalization, useCboxSurfaces, useCboxSurfacesOptional };
+export { AppContent, AppLauncher, AppShell, AppSwitcher, CHART_PALETTE, CboxAppCatalog, type CboxAppCatalogProps, type CboxAppCatalogState, CboxAppIcon, type CboxAppIconProps, type CboxAppKey, type CboxAppLink, CboxAppShell, type CboxAppShellProps, CboxAppSidebar, type CboxAppSidebarProps, CboxBrand, type CboxBrandProps, type CboxCatalogApp, type CboxIdContextValue, CboxIdProvider, type CboxKnownApp, CboxLocalizationProvider, CboxMobileNavDrawer, type CboxMobileNavDrawerProps, type CboxNavArea, type CboxNavItem, type CboxNavSection, type CboxNotificationPreviewItem, type CboxNotificationsState, CboxOrgContextBar, type CboxOrgContextBarProps, type CboxOrganization, CboxServiceMark, type CboxServiceMarkProps, CboxSurfaces, type CboxSurfacesProps, type CboxTranslationValues, type CboxTranslator, type CboxUser, CboxWorkspaceShell, type CboxWorkspaceShellProps, Combobox, type ComboboxAvatar, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ContextAvatar, ContextAvatarChip, ContextBar, type ContextCrumb, type ContextItem, DataPanel, EmptyState, Heading, type InboxState, type InferUrlState, KeyValue, KeyValueList, type LinkComponent, NotificationsBell, OrgSwitcher, PageHeader, PageShell, type PageTabSpec, PageTabs, type PageTabsProps, type PageWidth, PanelBody, type RealtimeState, type RealtimeStatus, RowLink, type RowLinkProps, SearchTrigger, SectionHeader, Sparkline, StatTile, StatusPill, type SurfaceArgs, type SurfaceConfig, type SurfaceController, type SurfaceId, TopBar, type Transport, type UrlField, type UrlSchema, UserMenu, activeNavArea, activeNavItem, authorizeHref, buildUrlSearch, cn, defineUrlSchema, interpolate, navMatchLength, parseAppCatalog, parseUrlSearch, rememberAppCatalog, secureIconUrl, urlBoolean, urlEnum, urlNumber, urlString, urlStringArray, useCboxId, useCboxIdOptional, useCboxLocalization, useCboxSurfaces, useCboxSurfacesOptional, useKnownAppCatalog };

package/dist/index.js

@@ -1,7 +1,7 @@
 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 { createContext, useContext, useMemo, useSyncExternalStore, useState, useEffect, useRef, useCallback, useId } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { X, Menu, PanelLeftOpen, PanelLeftClose, PinOff, Pin } from 'lucide-react';
 
 var CboxIdContext = createContext(null);
@@ -60,6 +60,97 @@ function useCboxLocalization() {
 function defaultDate(value) {
   return new Date(value).toLocaleString();
 }
+var KEPT = "cbox-app-catalog";
+var EVENT = "cbox-app-catalog";
+var EMPTY = [];
+var cache = { raw: null, apps: EMPTY };
+function storage() {
+  try {
+    return typeof window === "undefined" ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function readKnownAppCatalog() {
+  let raw = null;
+  try {
+    raw = storage()?.getItem(KEPT) ?? null;
+  } catch {
+    raw = null;
+  }
+  if (raw === cache.raw) return cache.apps;
+  let apps = EMPTY;
+  try {
+    const value = raw === null ? [] : JSON.parse(raw);
+    if (Array.isArray(value)) {
+      apps = value.flatMap((entry) => {
+        if (typeof entry !== "object" || entry === null) return [];
+        const app = entry;
+        if (typeof app.key !== "string" || typeof app.name !== "string") return [];
+        return [{ key: app.key, name: app.name, icon_url: secureIconUrl(app.icon_url), icon_dark_url: secureIconUrl(app.icon_dark_url) }];
+      });
+    }
+  } catch {
+    apps = EMPTY;
+  }
+  cache = { raw, apps };
+  return apps;
+}
+function subscribe(change) {
+  if (typeof window === "undefined") return () => void 0;
+  const storageChange = (event) => {
+    if (event.key === KEPT) change();
+  };
+  document.addEventListener(EVENT, change);
+  window.addEventListener("storage", storageChange);
+  return () => {
+    document.removeEventListener(EVENT, change);
+    window.removeEventListener("storage", storageChange);
+  };
+}
+function rememberAppCatalog(apps) {
+  const kept = apps.map(({ key, name, icon_url, icon_dark_url }) => ({ key, name, icon_url: icon_url ?? null, icon_dark_url: icon_dark_url ?? null }));
+  try {
+    storage()?.setItem(KEPT, JSON.stringify(kept));
+  } catch {
+  }
+  if (typeof document !== "undefined") document.dispatchEvent(new CustomEvent(EVENT));
+}
+function useKnownAppCatalog() {
+  return useSyncExternalStore(subscribe, readKnownAppCatalog, () => EMPTY);
+}
+function secureIconUrl(url) {
+  if (typeof url !== "string" || url === "") return null;
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" ? parsed.href : null;
+  } catch {
+    return null;
+  }
+}
+function initials(name) {
+  return name.replace(/^Cbox\s*·\s*/i, "").slice(0, 2);
+}
+function CboxAppIcon({ name, iconUrl, iconDarkUrl, className = "h-6 w-6", fallback }) {
+  const light = secureIconUrl(iconUrl);
+  const dark = secureIconUrl(iconDarkUrl);
+  const [failed, setFailed] = useState(null);
+  const key = `${light ?? ""}|${dark ?? ""}`;
+  if (light === null || failed === key) {
+    if (fallback !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("grid shrink-0 place-items-center rounded bg-secondary text-[11px] font-semibold text-foreground", className), children: initials(name) });
+  }
+  const lost = () => setFailed(key);
+  return /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: cn("cbx-app-icon-box inline-flex shrink-0 items-center justify-center", className), children: [
+    /* @__PURE__ */ jsx("img", { src: light, alt: "", decoding: "async", onError: lost, className: cn("cbx-app-icon", dark === null ? "cbx-app-icon-single" : "cbx-app-icon-light", "h-full w-full") }),
+    dark !== null && /* @__PURE__ */ jsx("img", { src: dark, alt: "", decoding: "async", onError: lost, className: "cbx-app-icon cbx-app-icon-dark h-full w-full" })
+  ] });
+}
+function CboxServiceMark({ appKey, className = "h-6 w-6", fallback = null }) {
+  const app = useKnownAppCatalog().find((entry) => entry.key === appKey);
+  if (app === void 0 || app.icon_url === null) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  return /* @__PURE__ */ jsx(CboxAppIcon, { name: app.name, iconUrl: app.icon_url, iconDarkUrl: app.icon_dark_url, className, fallback: fallback ?? void 0 });
+}
 function CboxBrand({
   appKey,
   submark,
@@ -69,7 +160,7 @@ function CboxBrand({
   className
 }) {
   if (collapsed) {
-    return /* @__PURE__ */ jsx(
+    const cboxIcon = /* @__PURE__ */ jsx(
       "img",
       {
         src: `${assetBase}/cbox-icon.png`,
@@ -80,6 +171,7 @@ function CboxBrand({
         className: cn("h-9 w-9 rounded-md", className)
       }
     );
+    return /* @__PURE__ */ jsx(CboxServiceMark, { appKey, className: cn("h-9 w-9", className), fallback: cboxIcon });
   }
   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`;
@@ -467,21 +559,13 @@ function AppSwitcher({ className, onLockedAppClick }) {
           /* @__PURE__ */ jsx(
             "span",
             {
-              style: triggerAccent !== void 0 ? {
+              style: triggerAccent !== void 0 && secureIconUrl(currentApp?.iconUrl) === null ? {
                 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
+              children: currentApp ? /* @__PURE__ */ jsx(CboxAppIcon, { name: currentApp.name, iconUrl: currentApp.iconUrl, iconDarkUrl: currentApp.iconDarkUrl, className: "h-3.5 w-3.5", fallback: /* @__PURE__ */ jsx(Fragment, { children: triggerMonogram }) }) : triggerMonogram
             }
           ),
           /* @__PURE__ */ jsx("span", { className: "max-w-[140px] truncate", children: triggerName }),
@@ -581,7 +665,7 @@ function AppRow({
   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 tileStyle = accent !== void 0 && secureIconUrl(app.iconUrl) === null ? { 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",
@@ -592,7 +676,7 @@ function AppRow({
         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 })
+      children: /* @__PURE__ */ jsx(CboxAppIcon, { name: app.name, iconUrl: app.iconUrl, iconDarkUrl: app.iconDarkUrl, className: "h-5 w-5", fallback: /* @__PURE__ */ jsx("span", { children: monogram }) })
     }
   );
   const body = /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
@@ -1491,7 +1575,7 @@ function UserMenu({ extras, className, placement = "bottom-end", LinkComponent:
   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("");
+  const initials2 = user.name.split(/\s+/).filter(Boolean).slice(0, 2).map((n) => n[0]?.toUpperCase() ?? "").join("");
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), onKeyDown: (event) => {
     if (event.key === "Escape") setOpen(false);
   }, onBlur: (event) => {
@@ -1515,7 +1599,7 @@ function UserMenu({ extras, className, placement = "bottom-end", LinkComponent:
             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 || "?" })
+        ) : /* @__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: initials2 || "?" })
       }
     ),
     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: [
@@ -1946,7 +2030,7 @@ function ContextAvatarChip({
   fallbackLabel,
   size = "md"
 }) {
-  const initials = avatar.initials ?? deriveInitials(fallbackLabel);
+  const initials2 = avatar.initials ?? deriveInitials(fallbackLabel);
   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,
@@ -1975,7 +2059,7 @@ function ContextAvatarChip({
         avatar.accent === void 0 && "bg-info-soft text-info",
         sizeClass
       ),
-      children: initials
+      children: initials2
     }
   );
 }
@@ -2432,7 +2516,7 @@ function AppRow2({ app, orgSlug, onLockedAppClick }) {
   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 tileStyle = accent !== void 0 && secureIconUrl(app.iconUrl) === null ? { 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",
@@ -2443,7 +2527,7 @@ function AppRow2({ app, orgSlug, onLockedAppClick }) {
         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 })
+      children: /* @__PURE__ */ jsx(CboxAppIcon, { name: app.name, iconUrl: app.iconUrl, iconDarkUrl: app.iconDarkUrl, className: "h-5 w-5", fallback: /* @__PURE__ */ jsx("span", { children: monogram }) })
     }
   );
   const body = /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
@@ -2597,6 +2681,7 @@ function parseAppCatalog(ok, body) {
       name: app.name,
       launch_url: app.launch_url,
       icon_url: typeof app.icon_url === "string" ? app.icon_url : null,
+      icon_dark_url: typeof app.icon_dark_url === "string" ? app.icon_dark_url : null,
       description: typeof app.description === "string" ? app.description : null
     });
   }
@@ -2614,7 +2699,7 @@ function authorizeHref(authorizeUrl, location) {
     return null;
   }
 }
-function CboxAppCatalog({ endpoint, currentAppKey, icons, className }) {
+function CboxAppCatalog({ endpoint, currentAppKey, className }) {
   const { t } = useCboxLocalization();
   const [open, setOpen] = useState(false);
   const [state, setState] = useState({ status: "idle" });
@@ -2638,6 +2723,7 @@ function CboxAppCatalog({ endpoint, currentAppKey, icons, className }) {
       const next = parseAppCatalog(response.ok, body);
       expires.current = next.status === "ready" ? Date.now() + next.refreshAfter * 1e3 : 0;
       setState(next);
+      if (next.status === "ready") rememberAppCatalog(next.apps);
     } catch {
       if (!request.signal.aborted) {
         expires.current = 0;
@@ -2722,7 +2808,7 @@ function CboxAppCatalog({ endpoint, currentAppKey, icons, className }) {
               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(CboxAppIcon, { name: app.name, iconUrl: app.icon_url, iconDarkUrl: app.icon_dark_url }),
                 /* @__PURE__ */ jsx("span", { className: "max-w-full break-words", children: app.name.replace(/^Cbox\s*·\s*/i, "") }),
                 current && /* @__PURE__ */ jsx(Check2, {})
               ]
@@ -2734,16 +2820,6 @@ function CboxAppCatalog({ endpoint, currentAppKey, icons, className }) {
     ] }) : 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}`))) });
 }
@@ -3145,7 +3221,7 @@ function ComboboxAvatarChip({
   avatar,
   fallbackLabel
 }) {
-  const initials = avatar.initials ?? deriveInitials3(fallbackLabel);
+  const initials2 = 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(
@@ -3166,7 +3242,7 @@ function ComboboxAvatarChip({
         "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
+      children: initials2
     }
   );
 }
@@ -4011,6 +4087,6 @@ function Sparkline({ values, color = "var(--chart-1)", width = 90, height = 20 }
   ] });
 }
 
-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 };
+export { AppContent, AppLauncher, AppShell, AppSwitcher, CHART_PALETTE, CboxAppCatalog, CboxAppIcon, CboxAppShell, CboxAppSidebar, CboxBrand, CboxIdProvider, CboxLocalizationProvider, CboxMobileNavDrawer, CboxOrgContextBar, CboxServiceMark, 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, rememberAppCatalog, secureIconUrl, urlBoolean, urlEnum, urlNumber, urlString, urlStringArray, useCboxId, useCboxIdOptional, useCboxLocalization, useCboxSurfaces, useCboxSurfacesOptional, useKnownAppCatalog };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map